/* Approved RefinedLight canvas design, adapted to the shared PHP navigation. */
.olg-refined-light {
  --refined-ink: #16211e;
  --refined-muted: #5e706a;
  --refined-gold: #d5ad3c;
  --refined-pale-gold: #efd987;
}
.olg-refined-light button:focus-visible,
.olg-refined-light a:focus-visible { outline: 2px solid var(--refined-pale-gold); outline-offset: 4px; }
.olg-refined-light .olg-header {
  height: 88px; grid-template-columns: 88px 1fr auto;
  padding: 0 clamp(22px, 4.8vw, 78px);
  color: var(--refined-ink); background: rgba(244,240,230,.96);
  border-bottom: 1px solid rgba(22,33,30,.14);
  box-shadow: 0 5px 20px rgba(25,48,43,.06); backdrop-filter: blur(14px);
}
.olg-refined-light .olg-brand { width: 64px; height: 64px; }
.olg-refined-light .olg-brand img { filter: none; }
.olg-refined-light .olg-nav { gap: clamp(16px, 2.35vw, 38px); }
.olg-refined-light .olg-nav button { color: var(--refined-muted); }
.olg-refined-light .olg-nav button:hover,
.olg-refined-light .olg-nav button.is-active { color: var(--refined-ink); }
.olg-refined-light .olg-nav button::after { background: var(--refined-gold); }
.olg-refined-light .olg-contact-link svg,
.refined-write svg { width: 18px; height: 18px; }
.olg-refined-light .footer-logo {
  display: block; width: 66px; height: auto; opacity: .82; mix-blend-mode: multiply;
  filter: drop-shadow(0 3px 8px rgba(17,28,25,.1));
}
.refined-hero {
  min-height: max(700px, 100svh); isolation: isolate;
  background: #183937 url('./liptovska-mara-hero.jpg') 67% center / cover no-repeat;
}
.refined-hero::before {
  z-index: -1;
  background: linear-gradient(90deg, rgba(8,25,22,.68), rgba(11,31,26,.22) 58%, rgba(7,20,17,.3)),
    linear-gradient(180deg, rgba(9,25,22,.34) 0%, transparent 42%, rgba(7,19,16,.56) 100%);
}
.refined-content {
  --refined-logo-width: clamp(256.32px, 25.92vw, 339.84px);
  --refined-glass-left: calc(var(--refined-logo-width) * -0.12149955);
  position: relative; z-index: 2; min-height: max(700px, 100svh); width: min(100%, 1440px);
  margin: auto; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; padding: 140px clamp(42px, 12vw, 190px) 90px;
  padding-left: clamp(42px, 10vw, 166px);
}
.refined-rule {
  position: absolute; top: 136px; right: clamp(42px, 5vw, 80px); max-width: 46%;
  display: flex; align-items: center; gap: 12px; margin: 0; text-align: center;
  color: #fff; font-size: 11.7px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; animation: refined-rise .55s .08s both;
}
.refined-rule::before,
.refined-rule::after { content: ""; width: 38px; height: 1px; flex-shrink: 0; background: var(--refined-pale-gold); }
.refined-logo-panel {
  position: relative; isolation: isolate; flex-shrink: 0;
  width: var(--refined-logo-width); aspect-ratio: 1;
  margin-bottom: 18px;
  /* Exclude the SVG's transparent left inset when aligning with the heading and CTA. */
  transform: translate(-12.149955%, 20px);
}
.refined-title-glass {
  content: ""; position: absolute; z-index: -1; inset: 0;
  border: 0; border-radius: 8px;
  background: linear-gradient(135deg, rgba(244,240,230,.09), rgba(9,29,25,.2));
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  box-shadow: 0 14px 36px rgba(4,19,16,.18);
  pointer-events: none;
}
.refined-vector-logo {
  display: block; width: 100%; height: auto; filter: none;
  opacity: 1; mix-blend-mode: normal;
}
.refined-logo-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(213,173,60,.7), rgba(213,173,60,.7)) left top / 42px 1px,
    linear-gradient(rgba(213,173,60,.7), rgba(213,173,60,.7)) left top / 1px 24px,
    linear-gradient(rgba(213,173,60,.7), rgba(213,173,60,.7)) right bottom / 42px 1px,
    linear-gradient(rgba(213,173,60,.7), rgba(213,173,60,.7)) right bottom / 1px 24px;
  background-repeat: no-repeat;
}
.refined-personal {
  position: relative; isolation: isolate; max-width: 850px; margin: 20px 0 0; color: #fff;
  font: normal 400 clamp(38.64px, 5.04vw, 72.24px)/.98 'Manrope', sans-serif;
  letter-spacing: -.06em;
  animation: refined-rise .55s .45s both;
}
.refined-title-glass { inset: -12px -18px -12px var(--refined-glass-left); }
.refined-personal::before,
.refined-personal::after {
  content: ""; position: absolute; width: 42px; height: 24px;
  border: solid rgba(213,173,60,.7); pointer-events: none;
}
.refined-personal::before { left: var(--refined-glass-left); top: -12px; border-width: 1px 0 0 1px; }
.refined-personal::after { right: -18px; bottom: -12px; border-width: 0 1px 1px 0; }
.refined-region {
  max-width: 100%; margin: 28px 0 0; color: var(--olg-gold);
  font: 600 clamp(46px, 6vw, 86px)/1.1 'Playfair Display', serif;
  letter-spacing: -.06em; animation: refined-rise .55s .6s both;
}
.refined-actions { display: flex; align-items: center; gap: 19px; margin-top: clamp(27px, 4vh, 40px); animation: refined-rise .55s .54s both; }
.olg-refined-light .olg-contact-link,
.olg-refined-light .refined-write {
  padding: 15px 23px; border: 1px solid var(--refined-gold); border-radius: 999px;
  color: var(--refined-ink); background: var(--refined-gold);
  font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  transition: background .24s ease, transform .24s ease;
}
.olg-refined-light .olg-contact-link:hover,
.olg-refined-light .refined-write:hover { background: var(--refined-pale-gold); transform: translateY(-2px); }
.refined-note { color: rgba(255,255,255,.65); font-size: 10px; line-height: 1.5; letter-spacing: .04em; }
.refined-location {
  position: absolute; z-index: 2; right: calc(clamp(22px, 4.3vw, 68px) + 22px); bottom: 43px;
  color: rgba(255,255,255,.88);
  font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
@keyframes refined-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes refined-logo-rise { from { opacity: 0; transform: translate(-10%, 14px); } to { opacity: 1; transform: translate(-10%, 0); } }
@keyframes refined-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 901px) {
  .olg-refined-light .olg-about > .section-intro {
    align-self: start;
    position: relative;
    top: -40px;
  }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .olg-refined-light .olg-header { padding-inline: 22px; grid-template-columns: 64px 1fr auto; }
  .olg-refined-light .olg-nav { gap: 16px; }
}
@media (max-width: 900px) {
  .olg-refined-light .olg-header { grid-template-columns: 70px 1fr auto; padding-inline: 21px; }
  .olg-refined-light .olg-nav { top: 88px; background: rgba(244,240,230,.99); }
  .olg-refined-light .olg-menu { display: block; }
  .refined-content {
    padding-inline: clamp(34px, 9vw, 92px);
    padding-left: clamp(34px, 7vw, 74px);
  }
  .refined-rule { position: static; max-width: 100%; align-self: center; margin-bottom: 20px; }
}
@media (max-width: 620px) {
  .olg-refined-light .olg-header { height: 78px; grid-template-columns: 58px 1fr auto; }
  .olg-refined-light .olg-brand { width: 58px; height: 58px; }
  .olg-refined-light .olg-nav { top: 78px; }
  .olg-refined-light .olg-contact-link { padding: 9px 12px; font-size: 10px; }
  .olg-refined-light .footer-logo { width: 58px; }
  .refined-hero { background-position: 55% center; }
  .refined-content { padding: 118px 27px 90px; }
  .refined-rule { margin-bottom: 16px; gap: 8px; }
  .refined-rule::before, .refined-rule::after { width: 24px; }
  .refined-content {
    --refined-logo-width: 262.08px;
    --refined-glass-left: calc(var(--refined-logo-width) * -0.12149955 + 12px);
  }
  .refined-logo-panel::after { inset: 6px 0 6px 12px; }
  .refined-personal { font-size: clamp(31.92px, 9.912vw, 38.64px); }
  .refined-region { font-size: clamp(38px, 11.8vw, 46px); }
  .refined-actions { align-items: flex-start; flex-direction: column; gap: 13px; margin-top: 25px; }
  .refined-location { right: 37px; bottom: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .refined-rule, .refined-vector-logo,
  .refined-personal, .refined-actions, .refined-region { animation: none; opacity: 1; }
}