/* photos: --look warm */
/* mood: optometry/frame-house, cloned on noma.dk */
@import url(/assets/fonts/fonts.css);
:root{
  --bg:#F7F8F5; --alt:#E4ECF4; --ink:#0A1A52; --mute:#2E3A63;
  --line:color-mix(in srgb,#0A1A52 16%,transparent);
  --surface:#FFFFFF; --hover-bg:color-mix(in srgb,#0A1A52 6%,transparent);
  --hdr-bg:#F7F8F5;
  --accent:#0A1A52; --accent-ink:#F7F8F5; --accent-2:#16387E; --focus:#3F86C9;
  --dark:#0A1A52; --dark-ink:#F7F8F5; --dark-mute:#C9D3EA; --dark-line:rgba(247,248,245,.2);
  --hero-shade:#06102F;
  --font-body:"Literata",Georgia,"Times New Roman",serif;
  --font-display:"Literata",Georgia,"Times New Roman",serif;
  --font-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r-sm:0; --radius:0; --r-lg:0;
  --e1:none; --e2:0 10px 30px rgba(10,26,82,.10); --shadow:var(--e2);
  --ease:cubic-bezier(.25,.1,.25,1);
  --wrap:1600px; --gut:clamp(16px,2.8vw,40px); --hdr:88px; --text:17px; --logo-w:54px;
  --h1-hero:clamp(32px,3.1vw,46px);
  --t-title:clamp(28px,2.5vw,36px);
  --t-cap:clamp(24px,2.1vw,30px);
  --t-small:18px;
  --gap:12px;
}
::selection{background:#A9DCF5;color:#0A1A52}
body{font-size:var(--text);line-height:1.6;letter-spacing:.005em;font-optical-sizing:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;line-height:1.12;color:var(--ink)}
.ui{font-family:var(--font-ui);font-size:16px;line-height:1.55;letter-spacing:0}

/* links: underlined, the underline changes colour (reference: 150ms) */
.u{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .15s var(--ease),color .15s var(--ease)}
.u:hover{text-decoration-color:var(--focus)}
.u:active{color:var(--accent-2)}

/* buttons: square, solid navy; outlined on the photo */
.btn{border-radius:0;font-family:var(--font-display);font-weight:500;font-size:18px;min-height:52px;padding:0 26px;letter-spacing:0}
.btn:hover{background:var(--accent-2)}
.btn:active{background:#07123B}
.btn.line{background:transparent;color:var(--dark-ink);box-shadow:inset 0 0 0 1px var(--dark-ink)}
.btn.line:hover{background:var(--dark-ink);color:var(--ink)}
.btn.line:active{background:#DCE4F0;color:var(--ink)}
.btn .arr{display:inline-block;width:18px;height:12px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* header: transparent over the hero, paper white once the page moves (reference) */
.hdr{margin-bottom:calc(-1 * var(--hdr));background:transparent;transition:transform .5s var(--ease),background-color .3s,border-color .3s}
.hdr.solid{background:var(--hdr-bg)}
.hdr>.wrap{max-width:none;padding-inline:var(--gut)}
.hdr .brand b{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:-.01em}
.hdr .brand small{font-family:var(--font-ui);font-size:14px}
.hdr .brand .on-dark{display:block}.hdr .brand .on-light{display:none}
.hdr.solid .brand .on-dark{display:none}.hdr.solid .brand .on-light{display:block}
.hdr:not(.solid) .brand b,.hdr:not(.solid) .brand small,.hdr:not(.solid) .nav a,.hdr:not(.solid) .menu-btn,.hdr:not(.solid) .hdr-cta{color:var(--dark-ink)}
.nav a{font-family:var(--font-display);font-size:19px;font-weight:400;border-radius:0}
.nav a:hover{background:none;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.hdr-cta{background:none;color:var(--ink);font-size:19px;font-weight:400;padding:0 0 0 18px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent)}
.hdr-cta:hover{background:none;text-decoration-color:var(--focus)}
.menu-btn{font-family:var(--font-display);font-weight:400;font-size:18px}
.sheet nav a{font-weight:400}

/* hero: their lounge, 80vh, small serif h1 bottom-left, outlined button (reference #1) */
.hero{min-height:max(560px,80svh);background:var(--dark)}
.hero-bg img{object-position:50% 90%}
.hero-bg::before{content:"";position:absolute;inset:0 0 auto;height:200px;z-index:1;background:linear-gradient(color-mix(in srgb,var(--hero-shade) 62%,transparent),transparent)}
.hero[data-scrim] .hero-bg::after{z-index:1;background:linear-gradient(20deg,color-mix(in srgb,var(--hero-shade) 82%,transparent) 0%,color-mix(in srgb,var(--hero-shade) 40%,transparent) 34%,transparent 58%)}
.hero .copy{max-width:none;padding-inline:var(--gut);padding-block:0 clamp(36px,5vh,56px);gap:22px}
.hero h1{font-size:var(--h1-hero);font-weight:500;line-height:1.1;max-width:none;text-shadow:0 1px 18px rgba(6,16,47,.35)}
.js-motion .hero-bg>img{animation:ya-fade 1s linear both}
@keyframes ya-fade{from{opacity:0}to{opacity:1}}

/* the one tinted strip (reference #2) */
.strip{background:var(--alt);padding-block:22px}
.strip .wrap{max-width:none;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,2.6fr) auto;gap:clamp(20px,2.6vw,40px);align-items:end}
.strip .sec-head{margin:0;max-width:none}
.strip h2{font-size:var(--t-small);font-weight:500;max-width:none;margin:0}
.strip .sec-head p{margin:4px 0 0;color:var(--ink);font-size:17px;max-width:46ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.facts li{padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--ink) 55%,transparent)}
.facts b{display:block;font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.facts span{display:block;margin-top:2px;font-family:var(--font-ui);font-size:16px;line-height:1.45;color:var(--ink)}
.strip .btn{min-height:48px;font-size:17px}

/* the frame pair, edge to edge (reference #3) */
.pair{padding-block:0 clamp(72px,8vw,110px)}
.pair .sec-head{max-width:none;margin:0;padding:20px var(--gut) 14px}
.pair h2{font-size:var(--t-small);max-width:none}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.pair figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .3s var(--ease)}
.pair figcaption{padding:22px var(--gut) 0}
.pair h3{font-size:var(--t-cap);font-weight:400;line-height:1.18}
.pair figcaption p{margin-top:6px;font-family:var(--font-ui);font-size:16px}

/* letter splits (reference #4 and #7) */
.letter{padding-block:clamp(40px,5vw,70px) clamp(80px,9vw,130px)}
.letter .wrap{max-width:none;padding-inline:var(--gut);display:grid;grid-template-columns:47fr 11fr 37fr 5fr;align-items:start}
.letter .photo{grid-column:1}
.letter .photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.letter .text{grid-column:3}
.letter.flip .wrap{grid-template-columns:6fr 36fr 11fr 47fr}
.letter.flip .text{grid-column:2;grid-row:1}
.letter.flip .photo{grid-column:4;grid-row:1}
.letter .sec-head{max-width:none;margin:0 0 clamp(36px,4vw,56px);padding-top:18px}
.letter h2{font-size:var(--t-title);max-width:18ch;margin:0}
.letter .sec-head p{margin:22px 0 0;color:var(--ink);font-size:18px;max-width:46ch}
.letter .text>*{max-width:48ch}
.svc{display:grid;gap:26px}
.svc h3{font-size:20px;font-weight:500;line-height:1.3}
.svc p{margin-top:6px}
.letter h3.part{font-size:var(--t-cap);font-weight:400;margin:clamp(56px,6vw,80px) 0 22px}
.plans{columns:2;column-gap:28px;margin-top:22px;font-family:var(--font-ui);font-size:16px}
.plans li{break-inside:avoid;padding:9px 0;border-top:1px solid var(--line)}
.pay{margin-top:26px;font-family:var(--font-ui);font-size:16px}
.pay li{padding:9px 0;border-top:1px solid var(--line)}
.pay li:last-child{border-bottom:1px solid var(--line)}
.note{margin-top:24px}
.letter .act{margin-top:26px}
.steps{display:grid;gap:22px;counter-reset:s}
.steps li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:8px}
.steps li::before{counter-increment:s;content:counter(s);grid-row:span 2;font-family:var(--font-ui);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.9}
.steps h4{font-size:20px;font-weight:500;line-height:1.3}
.steps p{margin-top:4px}

/* wide inset (reference #5) */
.inset{padding:0 var(--gut) clamp(80px,9vw,130px)}
.inset img{width:100%;aspect-ratio:1.49;object-fit:cover}

/* the shop scroller (reference #6) */
.scroller{padding-block:0 clamp(90px,10vw,150px)}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:89vw;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start}
.slide img{width:100%;aspect-ratio:16/9;object-fit:cover}
.slide figcaption{padding-top:20px;min-height:96px}
.slide figcaption h3{font-size:var(--t-cap);font-weight:400}
.slide figcaption p{margin-top:6px;font-family:var(--font-ui);font-size:16px}
.scroll-bar{display:flex;justify-content:space-between;align-items:start;gap:24px;padding:22px var(--gut) 0}
.scroller .sec-head{margin:0;max-width:none}
.scroller .sec-head h2{font-size:var(--t-cap);font-weight:400;max-width:none}
.scroller .sec-head p{margin:6px 0 0;font-family:var(--font-ui);font-size:16px;color:var(--ink)}
.arrows{display:flex;gap:18px}
.arrows button{display:grid;place-items:center;width:64px;height:48px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;transition:color .15s var(--ease),opacity .3s var(--ease)}
.arrows button:hover{color:var(--accent-2)}
.arrows button:active{opacity:.6}
.arrows button[disabled]{opacity:.3;cursor:default}
.arrows svg{width:56px;height:36px}

/* footer on the same ground (reference #8) */
.foot{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:16px;padding-top:clamp(90px,10vw,150px);border-top:1px solid var(--line)}
.foot .wrap{max-width:none;padding-inline:var(--gut)}
.foot a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .15s var(--ease)}
.foot a:hover{text-decoration-color:var(--focus)}
.foot-top{display:grid;grid-template-columns:27fr 73fr;gap:clamp(28px,3vw,48px)}
.foot-intro h2{font-size:var(--t-cap);font-weight:400;font-family:var(--font-display)}
.foot-intro p{margin-top:12px;font-size:16px;max-width:36ch}
.foot-intro ul{margin-top:18px;display:grid;gap:6px}
.foot-intro img{margin-top:26px;width:min(100%,300px);aspect-ratio:1;object-fit:cover}
.foot-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.foot-h{color:var(--ink);font-size:20px;font-weight:400;margin-bottom:14px}
.shop-h{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:44px;margin-bottom:12px;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font-family:var(--font-display);font-size:20px;line-height:1.25}
.shop-h small{font-family:var(--font-ui);font-size:14px;color:var(--mute)}
.shop-h:hover span{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--focus)}
.shop-h[aria-pressed=true] span{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--ink)}
.shop-h:active{color:var(--accent-2)}
.foot-col ul{gap:6px}
.foot-col li{line-height:1.5}
.foot-col a{min-height:32px}
.foot-map{grid-column:1/-1;margin-top:clamp(28px,3vw,44px);gap:12px}
.foot-map iframe{height:340px;border-radius:0;background:var(--alt);filter:grayscale(.35)}
.foot-map>a{justify-self:start}
.foot-legal{margin-top:12px;max-width:44ch}
.foot-base{border-top-color:var(--line);margin-top:clamp(60px,7vw,100px);padding-block:22px;align-items:end}
.foot-base .brand img{width:110px}
.foot-base .brand b{font-size:clamp(24px,2.4vw,34px);font-weight:500}
.foot-social{margin-top:6px}

/* phone call bar */
.callbar a{font-family:var(--font-display);font-weight:500;font-size:17px}
.callbar a:first-child{background:var(--accent);color:var(--accent-ink)}

@media (max-width:1180px){
  .strip .wrap{grid-template-columns:1fr;align-items:start}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .letter .wrap,.letter.flip .wrap{grid-template-columns:1fr;gap:28px}
  .letter .photo,.letter .text,.letter.flip .photo,.letter.flip .text{grid-column:1;grid-row:auto}
  .letter.flip .photo{grid-row:1}
  .foot-top{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .facts{grid-template-columns:1fr}
  .strip .btn{width:100%}
  .pair-grid{grid-template-columns:1fr;gap:28px}
  .pair figcaption{padding-top:14px}
  .inset img{aspect-ratio:4/5}
  .track{grid-auto-columns:86vw}
  .slide img{aspect-ratio:4/3}
  .scroll-bar{flex-direction:column}
  .plans{columns:1}
  .hero{min-height:78svh}
  .hero .copy{gap:16px}
  .hero .btn{width:100%}
}
@media (max-width:620px){.foot-grid{grid-template-columns:1fr}.foot-map iframe{height:280px}}
@media (prefers-reduced-motion:reduce){.js-motion .hero-bg>img{animation:none}.track{scroll-behavior:auto}}
.scroller{position:relative}
.slide figcaption .sec-head{margin:0;max-width:none;text-align:left}
.slide figcaption h2{font-size:var(--t-cap);font-weight:400;max-width:none;margin:0}
.scroll-bar{position:absolute;right:0;bottom:clamp(90px,10vw,150px);padding:0 var(--gut) 40px}
@media (max-width:700px){.scroll-bar{position:static;padding:8px var(--gut) 0;align-items:flex-end}}
.hero-bg picture{position:absolute;inset:0}
.hero-bg picture img{width:100%;height:100%;max-width:none;object-fit:cover}
.js-motion .hero-bg img{animation:ya-fade 1s linear both}
@media (prefers-reduced-motion:reduce){.js-motion .hero-bg img{animation:none}}
@media (max-width:600px){.hero-bg img{object-position:50% 50%}}
.pair figure img,.letter .photo img,.inset img,.slide img{height:auto}
.scroll-bar{position:static;justify-content:flex-end;padding:0 var(--gut);margin-top:-8px}
.slide figcaption{padding-right:160px}
@media (max-width:700px){.slide figcaption{padding-right:0;min-height:0}.scroll-bar{margin-top:8px}}
.foot .brand b{color:var(--ink)}
.foot .brand small{color:var(--mute)}
@media (max-width:700px){.foot-base .brand img{width:72px}.callbar a{font-size:16px;white-space:nowrap;padding:0 8px}}
.hdr:not(.solid){background:linear-gradient(rgba(6,16,47,.62),rgba(6,16,47,.18))}
.hdr .brand{min-height:44px}
.foot-col a,.foot-social a,.foot-map>a{min-height:44px}
.slide figcaption .sec-head[data-open=figure]{display:block}
.foot-base .brand{min-height:48px}
@media (max-width:700px){.scroll-bar{justify-content:flex-start;align-items:flex-start}.arrows{margin-left:-8px}}
.hdr:not(.solid){background:linear-gradient(rgba(6,16,47,.6),rgba(6,16,47,0))}
/* big swing */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important;padding:0!important}
.pair h3{line-height:1.22;max-width:22ch}
.pair figcaption p{margin-top:10px;font-size:16px}
.letter .wrap{grid-template-columns:47fr 15fr 26fr 6fr}
.letter .sec-head p{font-size:17px;max-width:none}
.letter .text>*{max-width:none}
.letter.flip .wrap{grid-template-columns:6fr 27fr 14fr 47fr}
.plans{columns:1}
:root{--h1-hero:clamp(30px,2.5vw,38px)}
.hero .btn.line{min-height:80px;padding:0 30px;font-size:28px;gap:14px}
.hero .btn.line .arr{width:22px;height:14px}
.hero[data-scrim] .hero-bg::after{background:linear-gradient(20deg,color-mix(in srgb,var(--hero-shade) 70%,transparent) 0%,color-mix(in srgb,var(--hero-shade) 28%,transparent) 30%,transparent 52%)}
.strip{padding-block:16px}
.strip .wrap{align-items:center}
.strip h2,.strip .sec-head p{display:inline;font-size:17px}
.strip .sec-head p{margin:0 0 0 6px}
.facts li{padding-bottom:6px}
.facts b,.facts span{display:inline}
.facts span::before{content:" · "}
.facts b{font-size:16px}
.hdr:not(.solid){border-bottom-color:transparent}
.shop-h{margin-bottom:16px}
.shop-h[aria-pressed=true] span{text-underline-offset:3px}
.slide figcaption{padding-top:24px;min-height:88px}
.u:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (max-width:700px){
  .pair h3{max-width:none;font-size:24px}
  .hero .btn.line{min-height:64px;font-size:21px}
  .strip h2,.strip .sec-head p{display:block}
  .strip .sec-head p{margin:4px 0 0}
  .facts b,.facts span{display:block}
  .facts span::before{content:none}
}
@media (max-width:900px){.letter .wrap,.letter.flip .wrap{grid-template-columns:1fr}}
.shop-h small{display:block;margin-top:8px}
.letter .photo img[src*=examroom]{object-position:60% 60%}
.hdr:not(.solid){background-origin:border-box;background-repeat:no-repeat}
/* polish pass */
:root{--sec:clamp(96px,9vw,130px);--ul-off:5px;--ul-mix:45%}
.pair figcaption p+p{margin-top:12px}
.pair{padding-block:0 var(--sec)}
.letter{padding-block:0 var(--sec)}
.inset{padding:0 var(--gut) var(--sec)}
.scroller{padding-block:0 var(--sec)}
.foot{padding-top:var(--sec)}
.u{text-underline-offset:var(--ul-off);text-decoration-color:color-mix(in srgb,currentColor var(--ul-mix),transparent)}
.hdr-cta{text-underline-offset:var(--ul-off);text-decoration-color:color-mix(in srgb,currentColor var(--ul-mix),transparent);padding:0 0 0 clamp(24px,2.4vw,40px)}
.nav a:hover{text-underline-offset:var(--ul-off)}
.foot a{text-underline-offset:var(--ul-off);text-decoration-color:color-mix(in srgb,currentColor var(--ul-mix),transparent)}
.shop-h:hover span,.shop-h[aria-pressed=true] span{text-underline-offset:var(--ul-off)}
.btn:focus-visible,.nav a:focus-visible,.hdr-cta:focus-visible,.menu-btn:focus-visible,.arrows button:focus-visible,.shop-h:focus-visible,.foot a:focus-visible,.callbar a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.hero .btn:focus-visible,.hdr:not(.solid) a:focus-visible{outline-color:var(--dark-ink)}
.facts b{letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.facts b,.facts span{display:block}
.facts span::before{content:none}
.facts span{margin-top:2px}
.facts li{border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.letter .sec-head{padding-top:0}
.letter h2{margin-top:-.16em}
.pair figure img,.letter .photo img,.inset img,.slide img,.foot-map iframe{background:var(--alt)}
.js-motion .hero-bg>img,.js-motion .hero-bg img{animation:ya-fade 1.2s var(--ease) both}
.hdr{transition:transform .5s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease)}
.arrows button:hover{color:var(--ink)}
.arrows svg{transition:transform .3s var(--ease)}
.arrows .next:hover svg{transform:translateX(4px)}
.arrows .prev:hover svg{transform:translateX(-4px)}
.arrows button[disabled]:hover svg{transform:none}
.scroll-bar{margin-top:-56px}
.steps li::before{line-height:26px}
.plans{columns:2;column-gap:24px}
.pair figcaption p:not(:has(a)){font-family:var(--font-ui);color:var(--ink);max-width:44ch}
.foot-col li{font-variant-numeric:tabular-nums}
.foot-intro ul{gap:0}
.foot-intro li{padding:8px 0;border-top:1px solid var(--line)}
.foot-intro li:last-child{border-bottom:1px solid var(--line)}
.foot-intro h2{line-height:1.25;margin-top:-.08em}
.foot-map iframe{filter:grayscale(.6) contrast(.95)}
.slide figcaption p{margin-top:8px}
@media (prefers-reduced-motion:reduce){.js-motion .hero-bg>img,.js-motion .hero-bg img{animation:none}}
@media (max-width:800px){
  :root{--sec:72px;--ul-off:4px}
  .pair figcaption p+p{margin-top:10px}
  .callbar a:focus-visible{outline-offset:-4px}
  .facts b{font-size:16px}
  .facts{gap:0}
  .facts li{padding:10px 0}
  .facts li:first-child{border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
  .letter .sec-head{padding-top:0}
  .letter h2{margin-top:0}
  .arrows .next:hover svg,.arrows .prev:hover svg{transform:none}
  .scroll-bar{margin-top:8px}
  .plans{columns:1}
  .pair-grid{gap:48px}
  .foot-intro h2{margin-top:0}
  .hdr-cta{padding-left:0}
  .slide figcaption p{margin-top:6px}
}
.scroll-bar{margin-top:0}
.pair h3{max-width:none}
/* scroller, reformatted: heading + counter + progress + square arrows above, slides that clearly peek */
.scroll-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:0 var(--gut) clamp(24px,2.6vw,36px)}
.scroll-head .sec-head{margin:0;max-width:none}
.scroll-head h2{font-size:var(--t-title);font-weight:500;max-width:none}
.scroll-head .sec-head p{margin:10px 0 0;font-size:17px;color:var(--ink);max-width:44ch}
.scroll-ctrl{display:flex;align-items:center;gap:22px;flex:none}
.count{margin:0;font-family:var(--font-ui);font-size:16px;font-variant-numeric:tabular-nums;color:var(--mute)}
.count b{color:var(--ink);font-weight:600}
.progress{position:relative;width:clamp(120px,12vw,180px);height:2px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.progress i{position:absolute;inset:0 auto 0 0;width:25%;background:var(--ink);transition:width .45s var(--ease)}
.arrows{display:flex;gap:10px}
.arrows button{width:56px;height:56px;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);background:transparent;color:var(--ink);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.arrows button:hover{background:var(--ink);color:var(--accent-ink);border-color:var(--ink)}
.arrows button:active{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink)}
.arrows button[disabled]{opacity:.3;cursor:default;background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.arrows svg{width:26px;height:16px}
.arrows .next:hover svg,.arrows .prev:hover svg{transform:none}
.track{grid-auto-columns:min(72vw,1160px);gap:16px;cursor:grab}
.slide figcaption{padding:20px 0 0;min-height:0}
.slide figcaption h3{font-size:var(--t-cap);font-weight:400}
.slide figcaption p{margin-top:6px;font-family:var(--font-ui);font-size:16px}
.scroll-bar{display:none}
@media (max-width:800px){
  .scroll-head{flex-direction:column;align-items:stretch;gap:20px}
  .scroll-ctrl{justify-content:space-between;gap:16px}
  .progress{flex:1;width:auto}
  .arrows button{width:48px;height:48px}
  .track{grid-auto-columns:82vw;gap:12px}
}
/* seguros: the visit steps sit under the photo, so both columns end together */
.letter.flip .photo .visit{margin-top:clamp(40px,4vw,56px)}
.letter.flip .photo .visit .part{margin-top:0}
/* footer: one row of columns, then the map full width, no dead block */
.foot-top{align-items:start}
.foot-map{grid-column:auto;margin-top:clamp(40px,4vw,56px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px 24px}
.foot-map iframe{grid-column:1/-1;height:360px}
.foot-map>a{grid-column:1;justify-self:start}
.foot-base{margin-top:clamp(40px,4vw,64px)}
.foot-col li+li{margin-top:2px}
@media (max-width:800px){
  .letter.flip .photo .visit{margin-top:40px}
  .foot-map iframe{height:280px}
}