/* ============================================================
   Dvor nekretnine: shared styles
   One light theme. A clean agency layout (white and pale grey
   sections taking turns, centred section titles with a short note,
   cards with soft shadows, small-radius buttons) carrying the
   FiatLux interaction kit: slider progress line, scroll windows,
   drawn underlines, hover frame, scroll rail.
   One accent (blue): links, current and active states, focus.
   ============================================================ */
@font-face{
  font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/opensans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/opensans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* colour tokens that the top bar blends are registered, so they can transition */
@property --ink{syntax:'<color>';inherits:true;initial-value:#1B2430}
@property --ink-dim{syntax:'<color>';inherits:true;initial-value:#4A5563}
@property --accent{syntax:'<color>';inherits:true;initial-value:#0B63B5}
@property --line{syntax:'<color>';inherits:true;initial-value:#E3E7ED}

:root{
  --paper:#FFFFFF;
  --paper-2:#F3F5F8;   /* every other section, like the reference layout's grey bands */
  --ink:#1B2430;       /* 15.6:1 on white */
  --ink-dim:#4A5563;   /* 7.6:1 */
  --ink-faint:#5F6B7A; /* 5.4:1 on white, 5.0:1 on paper-2 */
  --accent:#0B63B5;    /* 6.1:1 on white, 5.5:1 on paper-2 */
  --ring:var(--accent);
  --bad:#A8322A;       /* form errors only, never the accent */
  --good:#2E6B3A;
  --line:#E3E7ED;
  --btn:#1B2430;--btn-ink:#FFFFFF;--btn-hi:#33404F;
  --shadow:0 1px 2px rgba(27,36,48,.06),0 12px 32px -16px rgba(27,36,48,.22);
  --shadow-hi:0 2px 4px rgba(27,36,48,.06),0 22px 44px -18px rgba(27,36,48,.3);

  --font:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --focus-t:outline-offset 160ms var(--ease-out),outline-color 160ms;

  --bar:4.25rem; /* top bar height: drives the photo header pull-up and scroll-padding-top */
  --a11y-size:max(44px,2.5rem);
  --maxw:1440px;
  --gutter:clamp(20px,5vw,72px);
}
html{font-size:clamp(1rem,.875rem + .25vw,1.125rem);scroll-behavior:smooth;scroll-padding-top:var(--bar)}

/* dark islands: everything on a photo keeps one fixed set of light-on-dark tokens */
.slider,.band,.page-hero--photo{
  --ink:#FFFFFF;--ink-dim:#E6EAEF;--ink-faint:#D3D9E0;--accent:#9CCBFF;--ring:#FFFFFF;--line:rgba(255,255,255,.22);
  --btn:#FFFFFF;--btn-ink:#1B2430;--btn-hi:#E3E9F0;
  text-shadow:0 1px 2px rgba(10,14,20,.55),0 0 18px rgba(10,14,20,.6);
}
:is(.slider,.band,.page-hero--photo) :is(.btn,button){text-shadow:none}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:1rem;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* focus: a ring that eases out from the element */
:where(a,button,input,select,textarea,summary){outline:2px solid transparent;outline-offset:0;transition:var(--focus-t)}
:where(a,button,summary):focus-visible{outline-color:var(--ring);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:4px;font-size:.875rem;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:12px;top:12px}

/* type */
h1,h2,h3{font-weight:400;line-height:1.2;text-wrap:balance}
.page-title,.slide-title{font-size:clamp(2rem,1.2rem + 2.8vw,3.5rem);font-weight:600;letter-spacing:-.015em;line-height:1.12;max-width:22ch}
.sec-title{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.sec-sub,.lede{color:var(--ink-dim);font-size:clamp(1rem,.95rem + .2vw,1.125rem);max-width:60ch;margin-inline:auto}
p{text-wrap:pretty}
.eyebrow{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}

/* buttons: one style everywhere. Solid ink, small corners, short labels */
a.btn{text-decoration:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:3rem;max-width:100%;padding:.75rem 1.6rem;border:0;border-radius:4px;cursor:pointer;
  font:inherit;font-size:.9375rem;font-weight:600;line-height:1.3;text-align:center;
  color:var(--btn-ink);background:var(--btn);
  box-shadow:0 1px 2px rgba(27,36,48,.12);
  transition:background-color 160ms var(--ease-out),translate 160ms var(--ease-out),box-shadow 160ms var(--ease-out),var(--focus-t);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--btn-hi);translate:0 -1px;box-shadow:0 8px 18px -8px rgba(27,36,48,.45)}
}
.btn:active{translate:0 1px;transition-duration:80ms}

/* drawn underlines: a background line that grows from the first letter
   to the last on hover and leaves to the right. --u-up lifts it to just under the
   baseline (Open Sans descends about .29em, so .2em). --u-rest is a resting line. */
.tlink,.prose a,.cconsent a,.cookie-note a,.foot-col a,.foot-bar a,.office a,.nav a>span,.filter button>span,.lang a{
  --u-y:calc(100% - var(--u-up,.2em));
  text-decoration:none;
  background:
    linear-gradient(var(--u-c,currentColor),var(--u-c,currentColor)) 100% var(--u-y)/0 var(--u-w,2px) no-repeat,
    linear-gradient(var(--u-rest,transparent),var(--u-rest,transparent)) 0 var(--u-y)/100% var(--u-w,2px) no-repeat;
  transition:background-size 500ms var(--ease-io),color 160ms var(--ease-out),var(--focus-t);
}
.tlink,.prose a,.cconsent a,.cookie-note a,.office a{color:var(--accent);font-weight:600}
.tlink{font-weight:600}
@media (hover:hover) and (pointer:fine){
  :is(.tlink,.prose a,.cconsent a,.cookie-note a,.foot-col a,.foot-bar a,.office a,.lang a):hover,
  .nav a:hover>span,.filter button:hover>span,.home:hover .tlink{
    background-position:0 var(--u-y),0 var(--u-y);background-size:100% var(--u-w,2px),100% var(--u-w,2px);
  }
}
/* the current page, language and filter keep their line, in the accent */
.nav a[aria-current="page"]>span,.lang a[aria-current],.filter [aria-pressed="true"]>span{--u-rest:var(--accent)}

/* top bar */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  height:var(--bar);padding:0 var(--gutter);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);color:var(--ink);
}
/* over a photo header the bar starts clear with light type and eases to solid as
   soon as the page scrolls (app.js sets .is-solid from an 8px sentinel). The type
   changes colour halfway through the fade, so it is never grey on grey. Without
   JS (.js missing) it simply stays solid. */
.js body:has(>.slider,>.page-hero--photo) .topbar{
  transition:
    background-color 1.4s var(--ease-io),border-color 1.4s var(--ease-io),
    -webkit-backdrop-filter 1.4s var(--ease-io),backdrop-filter 1.4s var(--ease-io),
    --ink .3s linear .55s,--ink-dim .3s linear .55s,--accent .3s linear .55s,--line .3s linear .55s;
}
.js body:has(>.slider,>.page-hero--photo) .topbar:not(.is-solid){
  background-color:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  --ink:#FFFFFF;--ink-dim:#EEF1F5;--accent:#FFFFFF;--line:rgba(255,255,255,.25);
  --btn:#FFFFFF;--btn-ink:#1B2430;--btn-hi:#E3E9F0;
  text-shadow:0 1px 3px rgba(10,14,20,.45);
}
.js body:has(>.slider,>.page-hero--photo) .topbar:not(.is-solid) .btn{text-shadow:none}
.topbar.bar-instant,.topbar.bar-instant *{transition:none!important}
.bar-sentinel{position:absolute;left:0;top:0;width:1px;height:8px;pointer-events:none}

.mark{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;color:var(--ink);text-decoration:none;line-height:1;white-space:nowrap}
.mark svg{width:2rem;height:2rem;flex-shrink:0;color:var(--accent)}
.mark-name{display:flex;flex-direction:column;gap:4px}
.mark-name b{font-size:1.25rem;font-weight:800;letter-spacing:.18em}
.mark-name small{font-size:.625rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}

.nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav a{
  display:block;padding:.5rem 0;color:var(--ink-dim);text-decoration:none;
  font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:color 160ms var(--ease-out),var(--focus-t);
}
.nav a>span{--u-up:-.1em;padding-bottom:.35em} /* the line sits a little under the caps */
.nav a[aria-current="page"]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--ink)}}
.right{display:flex;align-items:center;gap:18px}
.bar-cta.btn{min-height:2.5rem;padding:.5rem 1.15rem;font-size:.875rem}
.lang{display:flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.lang a{color:var(--ink-dim);--u-up:.05em}
.lang a[aria-current]{color:var(--ink)}

.burger{
  position:relative;display:none;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:4px;cursor:pointer;
  background:none;color:var(--ink);
}
.burger::before{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:12px;translate:-50% -50%;
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;
}

@media (max-width:1100px){.bar-cta{display:none!important}}
@media (max-width:880px){
  :root{--bar:3.75rem}
  /* the dropdown only exists with the JS burger; without JS the links stay a plain row */
  .topbar:not(:has(.burger)){flex-wrap:wrap;height:auto;padding-block:.6rem;row-gap:0}
  .topbar:not(:has(.burger)) .nav{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:0 18px}
  .topbar:has(.burger) .nav{
    position:absolute;top:100%;right:var(--gutter);flex-direction:column;align-items:flex-start;gap:0;min-width:13rem;
    padding:10px 18px;border-radius:6px;background:#fff;box-shadow:var(--shadow-hi);
    --ink:#1B2430;--ink-dim:#4A5563;--accent:#0B63B5;text-shadow:none;
    transition:opacity 160ms var(--ease-out),translate 160ms var(--ease-out),visibility 160ms;
  }
  .topbar:has(.burger) .nav a{padding:.7rem 0}
  .burger{display:block}
  .topbar:has(.burger):not(.menu-open) .nav{opacity:0;visibility:hidden;translate:0 -6px;pointer-events:none}
}
@media (max-width:440px){
  .topbar{gap:10px;padding-inline:14px}
  .mark{gap:8px}
  .mark svg{width:1.6rem;height:1.6rem}
  .mark-name b{font-size:1.05rem;letter-spacing:.14em}
  .mark-name small{font-size:.5625rem;letter-spacing:.16em}
  .right{gap:10px}
}

/* sections */
section{padding:clamp(64px,10vh,112px) 0;position:relative}
section.alt{background:var(--paper-2)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:clamp(36px,6vh,64px)}
.sec-foot{display:flex;justify-content:center;margin-top:clamp(36px,5vh,56px)}

/* features: icon left, text right, three in a row (after the reference layout's feature strip) */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.feat{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 22px;border-radius:8px;text-align:center}
.feat svg{width:3rem;height:3rem;color:var(--accent);stroke-width:1.5}
.feat h3{font-size:1.0625rem;font-weight:700;margin-bottom:6px}
.feat p{color:var(--ink-dim);font-size:.9688rem;max-width:36ch;margin-inline:auto}
@media (max-width:980px){.feats{grid-template-columns:minmax(0,1fr);max-width:36rem;margin-inline:auto}}

/* property cards: photo on top, text under it */
.homes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.homes--all{grid-template-columns:repeat(4,minmax(0,1fr))}
.home{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:8px;box-shadow:var(--shadow);text-align:center;
}
.home-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:#DDE3EA}
.home-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:calc(1.06 * var(--hz,1));transition:scale 700ms var(--ease-out)}
.home-tag{
  position:absolute;left:14px;top:14px;z-index:1;padding:5px 10px;border-radius:3px;
  background:#fff;color:var(--ink);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.home-body{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 22px 26px;flex:1}
.home h3{font-size:1.125rem;font-weight:700;line-height:1.3}
.home-place{color:var(--ink-dim);font-size:.9375rem}
.home-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:6px;color:var(--ink-faint);font-size:.875rem}
.home-price{margin-top:auto;padding-top:14px;font-size:1.25rem;font-weight:700;color:var(--ink)}
.home-price small{font-size:.8125rem;font-weight:600;color:var(--ink-dim)}
.home .tlink{margin-top:10px;font-size:.9375rem}
/* the whole card is clickable through its one link (one tab stop per card) */
.home .tlink::after{content:"";position:absolute;inset:0;z-index:2}
.home:has(.tlink:focus-visible){outline:2px solid var(--ring);outline-offset:3px}
.home .tlink:focus-visible{outline:none}
@media (max-width:1240px){.homes--all{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.homes,.homes--all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.homes,.homes--all{grid-template-columns:minmax(0,1fr);max-width:30rem;margin-inline:auto}}

/* image and text rows, alternating sides */
.rows{display:grid;gap:clamp(48px,8vh,96px)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px);align-items:center}
.row:nth-child(even) .row-media{order:2}
.row-media{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:8px;box-shadow:var(--shadow);background:#DDE3EA}
.row-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.06}
.row-text{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:34rem;margin-inline:auto}
.row-text h3{font-size:clamp(1.375rem,1.1rem + .8vw,1.875rem);font-weight:600}
.row-text p{color:var(--ink-dim)}
@media (max-width:880px){.row{grid-template-columns:minmax(0,1fr)} .row:nth-child(even) .row-media{order:0}}

/* notes (about: how we work), no numbering */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.note{padding:clamp(26px,3vw,40px);background:#fff;border-radius:8px;box-shadow:var(--shadow);text-align:center}
.note h3{font-size:1.125rem;font-weight:700;margin-bottom:10px}
.note p{color:var(--ink-dim);font-size:.9688rem}
@media (max-width:980px){.notes{grid-template-columns:minmax(0,1fr);max-width:36rem;margin-inline:auto}}

/* prose: left-aligned lines inside a centred column */
.prose{max-width:68ch;margin-inline:auto}
.prose p+p,.prose p+h3,.prose ul+h3{margin-top:1em}
.prose h3{font-size:1.125rem;font-weight:700;margin:1.8em 0 .5em}
.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-dim)}
.prose ul{padding-left:1.2em}
.prose:has(>p:only-child){text-align:center}
.legal-meta{font-size:.875rem;color:var(--ink-faint)}

/* office and form, side by side (after the reference layout's address + form) */
.office{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:start}
.office-info,.office-form{text-align:center}
.office-info>p,.office-form>p{margin-inline:auto}
.office-info h2{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);font-weight:400;margin-bottom:16px}
.office-info>p{color:var(--ink-dim);max-width:46ch}
.office-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;margin-top:36px}
.office-list li{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-dim)}
.office-list svg{width:1.75rem;height:1.75rem;color:var(--accent)}
.office-list b{display:block;color:var(--ink);font-weight:700}
.office-list a{white-space:nowrap}
.office-form h2{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);font-weight:400;margin-bottom:16px}
.office-form>p{color:var(--ink-dim);margin-bottom:24px}
@media (max-width:880px){.office{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){.office-list{grid-template-columns:minmax(0,1fr)}}

/* contact form: grey filled fields, a full-width send button */
.cform{container-type:inline-size}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.cfield{display:flex;flex-direction:column;margin-bottom:14px}
.cform-grid .cfield{margin-bottom:0}
.cform input:not([type="checkbox"]),.cform textarea{
  font:inherit;font-size:1rem;line-height:1.5;color:var(--ink);text-align:left;
  background:#EEF1F5;border:1px solid transparent;border-radius:4px;padding:.85rem 1rem;width:100%;
  transition:border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color 160ms var(--ease-out);
}
.alt .cform input:not([type="checkbox"]),.alt .cform textarea{background:#fff}
.cform ::placeholder{color:var(--ink-faint);opacity:1}
.cform textarea{resize:vertical;min-height:9.5rem}
.cform input:not([type="checkbox"]):focus,.cform textarea:focus{
  outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
.cform :is(input,textarea)[aria-invalid="true"]{border-color:var(--bad)}
.cform :is(input,textarea)[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 20%,transparent)}
.cerr{margin-top:6px;font-size:.875rem;line-height:1.4;color:var(--bad);text-align:left}
.cconsent+.cerr{text-align:center}
.cconsent+.cerr{margin:-6px 0 14px}
.cconsent{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin:6px 0 18px;font-size:.9062rem;color:var(--ink-dim);cursor:pointer;text-align:left}
.cconsent input[type="checkbox"]{
  --size:1.2em;appearance:none;-webkit-appearance:none;font:inherit;flex-shrink:0;
  width:var(--size);height:var(--size);margin:calc((1lh - var(--size)) / 2) 0 0;
  background:#fff;border:1.5px solid var(--ink-faint);border-radius:3px;cursor:pointer;position:relative;
  transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out),var(--focus-t);
}
.cconsent input:checked{background:var(--accent);border-color:var(--accent)}
.cconsent input:checked::after{
  content:"";position:absolute;left:50%;top:46%;width:28%;height:52%;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-55%) rotate(45deg);
}
.cconsent input:focus-visible{outline-color:var(--ring);outline-offset:3px}
.cconsent input[aria-invalid="true"]{border-color:var(--bad)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{display:flex;justify-content:center;min-height:65px;margin-bottom:18px}
@container (max-width:299.98px){.cf-turnstile{scale:.9;transform-origin:50% 0;margin-bottom:10px}}
@container (max-width:269.98px){.cf-turnstile{scale:.8}}
.cform .btn{width:100%}
.cform-note{margin-top:12px;font-size:.8125rem;color:var(--ink-faint)}
.cform-status{min-height:1.4em;margin-top:10px;font-size:.9062rem}
.cform-status.ok{color:var(--good)}
.cform-status.err{color:var(--bad)}
@media (max-width:560px){.cform-grid{grid-template-columns:1fr}}

/* call to action strip */
.cta-strip{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.cta-strip h2{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.125rem);font-weight:400}
.cta-strip p{color:var(--ink-dim);margin-top:6px}

/* filter tabs (properties): plain words split by a middot, the current one underlined */
.filter{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(28px,4vh,44px)}
.filter button{
  padding:.5rem .1rem;border:0;background:none;cursor:pointer;font:inherit;font-size:.9375rem;font-weight:600;color:var(--ink-dim);
  transition:color 160ms var(--ease-out),var(--focus-t);
}
.filter button>span{--u-up:.05em}
.filter button+button::before{content:"·"/"";margin-inline:clamp(.8rem,1.8vw,1.4rem);color:var(--ink-faint)}
.filter [aria-pressed="true"]{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.filter button:hover{color:var(--ink)}}

/* facts (imprint) */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:56rem;margin:28px auto 0}
.fact{padding:18px 20px;background:#fff;border-radius:6px;box-shadow:var(--shadow);text-align:center}
.fact .k{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.fact .v{margin-top:4px;color:var(--ink)}
@media (max-width:620px){.facts{grid-template-columns:minmax(0,1fr)}}

/* credits table */
.credits{width:100%;max-width:68rem;margin:28px auto 0;border-collapse:collapse;font-size:.9062rem}
.credits th,.credits td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink-dim)}
.credits thead th{color:var(--ink);font-weight:700}
.credits a{color:var(--accent);font-weight:600;overflow-wrap:anywhere}
.credits-wrap{overflow-x:auto}

/* footer */
.site-foot{background:var(--paper);border-top:1px solid var(--line);padding-top:clamp(52px,8vh,88px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px clamp(24px,4vw,64px)}
.foot-brand p{margin-top:18px;max-width:32ch;color:var(--ink-dim);font-size:.9375rem}
.foot-k{margin-bottom:14px;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.foot-col ul{list-style:none;display:grid;gap:8px;justify-items:start}
.foot-col li{font-size:.9375rem;color:var(--ink-dim)}
.foot-col a{color:var(--ink-dim)}
.foot-col a[href^="mailto"],.foot-col a[href^="tel"]{white-space:nowrap}
.foot-bar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 24px;
  margin-top:clamp(40px,7vh,72px);padding:22px 0 clamp(28px,5vh,40px);border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--ink-faint);
}
.foot-bar a{color:var(--ink-dim)}
.demo-note a{color:var(--accent);font-weight:600}
@media (max-width:980px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .foot-brand{grid-column:1/-1}}
@media (max-width:620px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .foot-contact{grid-column:1/-1}}
@media (max-width:359.98px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   photos: slider, photo headers, bands
   ============================================================ */
/* the scrim: darkest right behind the centred text, a top shade for the clear bar */
.slide::before,.page-hero--photo::before,.band::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,14,20,.5) 0%,transparent calc(var(--bar) * 2.6)),
    radial-gradient(60% 56% at 50% 50%,rgba(10,14,20,.6) 0%,rgba(10,14,20,.38) 62%,rgba(10,14,20,.12) 100%),
    linear-gradient(0deg,rgba(10,14,20,.42) 0%,transparent 28%);
}
@keyframes slideZoom{from{scale:1.07}to{scale:1}}
@keyframes textIn{from{opacity:0;translate:0 -14px}to{opacity:1;translate:none}}

/* slideshow. Without JS slide 1 shows (it carries .is-active) and the controls stay hidden */
.slider{
  position:relative;isolation:isolate;overflow:hidden;display:grid;
  min-height:max(560px,100svh);margin-top:calc(-1 * var(--bar));
  background:#1B2430;color:var(--ink);
}
.slides{position:relative;display:grid;touch-action:pan-y}
.slide{
  grid-area:1/1;position:relative;isolation:isolate;z-index:0;
  display:flex;align-items:center;padding-block:calc(var(--bar) + clamp(64px,10svh,120px)) clamp(110px,15svh,160px);
  visibility:hidden;
}
.slide.is-active,.slide.is-prev{visibility:visible}
.slide.is-active{z-index:1}
/* the move: the new slide fades in over the old one, which keeps zooming underneath */
.slide.is-in{animation:slideIn 1.1s var(--ease-out) both}
@keyframes slideIn{from{opacity:0}to{opacity:1}}
.slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.is-active .slide-img,.slide.is-prev .slide-img{animation:slideZoom 12s linear both}
.slider.is-paused .slide-img{animation-play-state:paused}
.slide-body{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.slide-title{margin-top:14px}
.slide-text{color:var(--ink-dim);font-size:clamp(1.0625rem,.95rem + .45vw,1.3rem);max-width:46ch;margin-top:18px}
.slide-cta,.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.slide.is-in{--td:500ms}
.slide.is-active .slide-body>*{animation:textIn 700ms var(--ease-out) var(--td,0ms) both}
.slide.is-active .slide-body>:nth-child(2){animation-delay:calc(var(--td,0ms) + 140ms)}
.slide.is-active .slide-body>:nth-child(3){animation-delay:calc(var(--td,0ms) + 280ms)}
.slide.is-active .slide-body>:nth-child(4){animation-delay:calc(var(--td,0ms) + 420ms)}

.slider-ctrl{display:none;position:absolute;inset:0;z-index:3;pointer-events:none}
.slider.is-ready .slider-ctrl{display:block}
.slider-bar{position:absolute;left:0;right:0;bottom:clamp(26px,4.5svh,44px);display:flex;justify-content:center}
.slider-group{display:flex;align-items:center;gap:14px;pointer-events:auto}
.slider-dots{display:flex;gap:10px}
.slider-dots button{position:relative;width:44px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.slider-dots button::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;
  background:rgba(255,255,255,.45);transition:background-color 160ms var(--ease-out);
}
.slider-dots button.is-active::before{background:#fff}
.slider-toggle{
  display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(10,14,20,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  transition:background-color 160ms var(--ease-out),var(--focus-t);
}
.slider-toggle::before{content:"";width:3px;height:12px;border-radius:2px;background:currentColor;box-shadow:5px 0 currentColor;translate:-2.5px 0}
.slider.is-off .slider-toggle::before{width:11px;border-radius:0;box-shadow:none;translate:1px 0;clip-path:polygon(0 0,100% 50%,0 100%)}
.slider-prev,.slider-next{
  position:absolute;top:50%;translate:0 -50%;pointer-events:auto;display:grid;place-items:center;
  width:clamp(44px,6vw,88px);height:clamp(88px,16svh,150px);padding:0;border:0;border-radius:4px;background:none;cursor:pointer;color:#fff;opacity:.75;
  transition:opacity 160ms var(--ease-out),var(--focus-t);
}
.slider-prev{left:clamp(0px,2vw,36px)}
.slider-next{right:clamp(0px,2vw,36px)}
.slider-prev::before,.slider-next::before{content:"";width:clamp(16px,2vw,26px);aspect-ratio:1;border:solid currentColor;border-width:0 0 2px 2px;transition:translate 200ms var(--ease-out)}
.slider-prev::before{rotate:45deg;margin-left:22%}
.slider-next::before{rotate:-135deg;margin-right:22%}
@media (hover:hover) and (pointer:fine){
  .slider-prev:hover,.slider-next:hover{opacity:1}
  .slider-prev:hover::before{translate:-4px 0}
  .slider-next:hover::before{translate:4px 0}
  .slider-toggle:hover{background:rgba(10,14,20,.6)}
  .slider-dots button:hover::before{background:#fff}
}
@media (max-width:680px){.slide-body{padding-inline:40px}}
/* progress: a line along the bottom of the photo; its animationend advances the slide */
.slider-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2)}
.slider-progress::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;scale:0 1}
.slider-progress.is-run::after{animation:sliderFill 7s linear forwards}
.slider.is-paused .slider-progress::after{animation-play-state:paused}
@keyframes sliderFill{from{scale:0 1}to{scale:1 1}}

/* photo page headers */
.page-hero--photo{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  min-height:max(480px,100svh);margin-top:calc(-1 * var(--bar));
  padding-block:calc(var(--bar) + clamp(56px,10vh,120px)) clamp(56px,10vh,120px);
  background:#1B2430;color:var(--ink);
}
.page-hero--photo>img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;animation:slideZoom 12s linear both}
.page-hero--photo .wrap{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2}
.page-hero--photo .wrap>*{animation:textIn 700ms var(--ease-out) both}
.page-hero--photo .wrap>:nth-child(2){animation-delay:140ms}
.page-hero--photo .wrap>:nth-child(3){animation-delay:280ms}
.page-hero--photo .wrap>:nth-child(4){animation-delay:420ms}
.page-hero--photo .page-title{margin-top:14px}
.page-hero--photo .lede{color:var(--ink-dim);margin-top:18px;max-width:52ch}

/* bands between sections */
.band{position:relative;isolation:isolate;overflow:hidden;margin:0;height:clamp(300px,50vh,540px);background:#1B2430;color:var(--ink)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.06}
.band-body{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:2;text-align:center}
.band-line{font-size:clamp(1.5rem,1rem + 1.8vw,2.5rem);font-weight:400;line-height:1.25;max-width:26ch;margin:0 auto 14px;text-wrap:balance}
.band-cite{font-size:.9375rem;color:var(--ink-dim);margin-bottom:24px}
.band-cite cite{font-style:italic}

/* scroll window: the photo is position:fixed and clipped by the band's clip-path, so it
   stays still while the band scrolls past (works on iOS, unlike background-attachment).
   No ancestor may use transform, filter, will-change or contain. Plain band under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .band.band--window{height:clamp(640px,115svh,1260px);overflow:visible;background:transparent;clip-path:inset(0)}
  .band.band--window>img{position:fixed;scale:1}
  .band.band--window::before{position:fixed}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .band.band--window{view-timeline-name:--win}
    .band.band--window>img,.band.band--window::before{animation:winFade linear both;animation-timeline:--win;animation-range:cover}
    .band.band--window .band-body{animation:winText linear both;animation-timeline:--win;animation-range:cover}
    /* parallax on card and row photos: a 5% pan over their view timeline */
    .home-media img,.row-media img{animation:winPan linear both;animation-timeline:view();animation-range:cover;scale:calc(1.12 * var(--hz,1))}
    /* scroll reveal: done over the first 220px, so a tall block never stays half faded */
    section :is(.sec-head,.feat,.home,.row,.note,.prose>*,.office-info,.office-form,.cta-strip,.filter,.fact,.credits-wrap,.sec-foot){
      animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 220px;
    }
  }
}
@keyframes winPan{from{translate:0 -5%}to{translate:0 5%}}
@keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}
@keyframes winFade{0%{opacity:0}35%{opacity:1}65%{opacity:1}100%{opacity:0}}
@keyframes winText{0%,25%{opacity:0}40%{opacity:1}60%{opacity:1}75%,100%{opacity:0}}

/* hover zoom: cards grow a little and their photo zooms inside them (mouse only) */
:is(.home,.feat,.note){transition:scale 360ms var(--ease-out),box-shadow 360ms var(--ease-out),background-color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .home{--zoom:1.025}
  :is(.feat,.note){--zoom:1.02}
  :is(.home,.feat,.note):hover{scale:var(--zoom);z-index:2}
  .home:hover{--hz:1.07;box-shadow:var(--shadow-hi)}
}
@media (hover:hover) and (pointer:fine){.feat:hover{background:#fff;box-shadow:var(--shadow)}}

/* ============================================================
   injected by app.js
   ============================================================ */
/* hover frame: one rounded outline that glides between hover-lit cards and the
   header links, like a plan outline drawn round a room. Fine pointers only. */
.hover-frame{
  position:fixed;left:0;top:0;z-index:55;pointer-events:none;
  width:var(--rw,0px);height:var(--rh,0px);transform:translate(var(--rx,0px),var(--ry,0px));
  border:2px solid var(--accent);border-radius:12px;opacity:0;
  transition:transform 240ms var(--ease-out),width 240ms var(--ease-out),height 240ms var(--ease-out),opacity 140ms var(--ease-out),border-radius 240ms var(--ease-out);
}
.hover-frame.is-on{opacity:1}
.hover-frame.is-snap{transition:none}
.hover-frame.is-link{border-radius:6px;border-width:1.5px}
@media (hover:none){.hover-frame{display:none}}

/* scroll progress rail */
.scroll-prog{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:56;pointer-events:none;background:rgba(27,36,48,.06)}
.scroll-prog::after{content:"";position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--p,0));background:var(--accent)}
@supports (animation-timeline:scroll()){.scroll-prog::after{animation:scrollProg linear both;animation-timeline:scroll(root block)}}
@keyframes scrollProg{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* back to top */
.top-sentinel{position:absolute;left:0;top:0;width:1px;height:100vh;pointer-events:none}
.to-top{
  position:fixed;right:16px;bottom:16px;z-index:59;display:grid;place-items:center;width:3rem;height:3rem;padding:0;
  border:0;border-radius:4px;background:var(--btn);color:#fff;cursor:pointer;box-shadow:var(--shadow-hi);
  opacity:0;visibility:hidden;translate:0 8px;
  transition:opacity 160ms var(--ease-out),translate 160ms var(--ease-out),visibility 160ms,background-color 160ms,var(--focus-t);
}
.to-top::before{content:"";width:12px;height:12px;border:solid currentColor;border-width:2px 0 0 2px;rotate:45deg;margin-top:6px}
.to-top.show{opacity:1;visibility:visible;translate:none}
@media (hover:hover) and (pointer:fine){.to-top:hover{background:var(--btn-hi)}}

/* cookie notice: informational, one dismiss button */
.cookie-note{
  position:fixed;right:16px;bottom:16px;z-index:60;width:min(21rem,calc(100% - 32px));
  display:grid;gap:10px;padding:20px 22px;border-radius:8px;background:#fff;box-shadow:var(--shadow-hi);border:1px solid var(--line);
  transition:opacity 500ms var(--ease-out) 900ms,translate 500ms var(--ease-out) 900ms;
}
@starting-style{.cookie-note{opacity:0;translate:0 18px}}
.cookie-note.is-out{opacity:0;translate:0 14px;transition-duration:220ms;transition-delay:0s}
.cookie-k{font-weight:700;color:var(--ink)}
.cookie-note p{font-size:.875rem;color:var(--ink-dim)}
.cookie-note .btn{min-height:2.5rem;margin-top:4px}
@media (max-width:560px){.cookie-note{left:16px;width:auto}}

/* accessibility button and panel (native popover) */
.a11y-btn{
  position:fixed;left:16px;top:calc(var(--bar) + 16px);z-index:58;display:grid;place-items:center;
  width:var(--a11y-size);height:var(--a11y-size);padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--accent);box-shadow:var(--shadow-hi);cursor:pointer;
  transition:scale 120ms var(--ease-out),var(--focus-t);
}
.a11y-btn svg{width:58%;height:58%}
.a11y-btn:active{scale:.94}
.a11y-btn::after{
  content:"";position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px #fff;opacity:0;transition:opacity 160ms;
}
:root:is(.a11y-big,.a11y-gray,.a11y-contrast,.a11y-dys,.a11y-links) .a11y-btn::after{opacity:1}
.a11y-panel{
  position:fixed;inset:calc(var(--bar) + 16px) auto auto calc(var(--a11y-size) + 26px);margin:0;
  width:min(330px,calc(100vw - var(--a11y-size) - 42px));max-height:calc(100dvh - var(--bar) - 32px);overflow:auto;
  padding:4px 20px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);box-shadow:var(--shadow-hi);
  opacity:0;translate:-8px 0;
  transition:opacity 180ms var(--ease-out),translate 240ms var(--ease-out),overlay 240ms allow-discrete,display 240ms allow-discrete;
}
.a11y-panel:popover-open{opacity:1;translate:0}
@starting-style{.a11y-panel:popover-open{opacity:0;translate:-8px 0}}
.a11y-head{padding:14px 0 10px;font-weight:700}
.a11y-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:3rem;
  padding:0;border:0;border-top:1px solid var(--line);background:none;font:inherit;font-size:.9375rem;color:var(--ink-dim);text-align:left;
}
button.a11y-row{cursor:pointer}
button.a11y-row[aria-checked="true"]{color:var(--ink)}
/* a small switch: grey track, the knob slides over and the track turns accent when on */
.a11y-lamp{position:relative;flex-shrink:0;width:2.25rem;height:1.25rem;border-radius:999px;background:#C9D1DA;transition:background-color 160ms}
.a11y-lamp::after{content:"";position:absolute;left:3px;top:3px;width:calc(1.25rem - 6px);aspect-ratio:1;border-radius:50%;background:#fff;transition:translate 200ms var(--ease-out)}
[aria-checked="true"]>.a11y-lamp{background:var(--accent)}
[aria-checked="true"]>.a11y-lamp::after{translate:1rem 0}
.a11y-sizes{display:flex;align-items:baseline;gap:14px}
.a11y-sizes button{
  padding:0 2px;border:0;background:none;cursor:pointer;font:inherit;font-weight:700;font-size:.875rem;line-height:1.6;color:var(--ink-faint);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.35em;
}
.a11y-sizes button+button{font-size:1.25rem}
.a11y-sizes [aria-pressed="true"]{color:var(--ink);text-decoration-color:var(--accent)}
@media (hover:hover) and (pointer:fine){button.a11y-row:hover,.a11y-sizes button:hover{color:var(--ink)}}

/* accessibility choices: classes on <html> */
:root.a11y-big{font-size:clamp(1.25rem,1.09375rem + .3125vw,1.40625rem)}
:root.a11y-gray{filter:grayscale(1)} /* a filter on the root does not trap the fixed window photos */
:root.a11y-contrast{--ink:#000;--ink-dim:#000;--ink-faint:#1B2430;--accent:#004A8F;--ring:#004A8F;--line:#5F6B7A}
.a11y-contrast :is(.slider,.band,.page-hero--photo){--ink:#fff;--ink-dim:#fff;--ink-faint:#fff;--accent:#fff}
.a11y-contrast :is(.slide,.page-hero--photo,.band)::before{background:rgba(10,14,20,.66)}
:root.a11y-dys{--font:Verdana,Tahoma,sans-serif}
.a11y-dys body *{letter-spacing:.05em!important;word-spacing:.16em!important;font-style:normal!important}
.a11y-dys .mark,.a11y-dys .mark *{letter-spacing:.04em!important}
.a11y-dys :is(p,li,.lede){line-height:1.8!important}
:root.a11y-links a:not(.btn,.mark,.skip-link){text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:.2em!important;background-image:none!important}
:root.a11y-links .nav a>span{background-image:none!important}
/* bigger or wider text must still fit 320px: the bar shrinks, long words may wrap */
:root:is(.a11y-big,.a11y-dys) body{overflow-wrap:anywhere}
:root:is(.a11y-big,.a11y-dys) :is(.office-list a,.foot-col a){white-space:normal}
@media (max-width:440px){:root:is(.a11y-big,.a11y-dys) .topbar{zoom:.78} :root:is(.a11y-big,.a11y-dys){--bar:2.95rem}}

/* page transitions */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms}
  ::view-transition-group(nav-line){animation-duration:320ms;animation-timing-function:var(--ease-io)}
}
@media (width>880px){.nav a[aria-current="page"]>span{view-transition-name:nav-line}}

/* reduced motion: one rule stops everything */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn,.btn:hover,.btn:active{translate:none}
}

/* touch screens: no backdrop blur (it was nearly all the GPU work per scroll frame on phones) */
@media (pointer:coarse){
  .topbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
}