/* zoltadvisors.com, new look (ZT-194): what the live site adds to the ZT-160 lab styles (base.css, style.css, pages.css,
   home.css stay as the lab left them). Loads last on every new-look page. */

/* ---------- Footer: the lab's quiet top row, then the live site's four link columns ---------- */
.foot-top{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s5);align-items:start}
.foot-top p{margin:0 0 var(--s2)}
.foot-contact a{color:var(--paper);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--pearl-rule)}
.foot-contact a:hover{text-decoration-color:var(--gold-l)}
.foot-cols{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5);margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--pearl-faint)}
.foot-cols h2{margin:0 0 var(--s3);color:var(--on-dark-2);font:600 13px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase}
.foot-cols ul{margin:0;padding:0;list-style:none}
.foot-cols a{display:inline-flex;align-items:center;min-height:36px;color:var(--paper);font-size:var(--t-small);text-decoration:none;background:linear-gradient(var(--gold-l),var(--gold-l)) 0 calc(100% - 6px)/0 1px no-repeat;transition:background-size var(--dur-ui) var(--ease-out)}
.foot-cols a:hover{background-size:100% 1px}
.foot .foot-note{margin-top:var(--s3);color:var(--on-dark-2);font-size:var(--t-cap)}
.foot-meta{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s6);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--pearl-faint)}
.foot .foot-meta p{margin:0;color:var(--on-dark-2);font-size:var(--t-cap)}
.foot-meta a{color:var(--on-dark);text-underline-offset:3px}
@media (max-width:860px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.foot-cols{grid-template-columns:1fr}}
@media (max-width:767px){.foot{padding-bottom:calc(var(--s9) + 72px)}}   /* room for the phone dock */

/* ---------- Questions on pages that don't load home.css (the same rules as the homepage's) ---------- */
.faq{padding-block:clamp(72px,8vw,128px)}
.faq h2{font-size:clamp(30px,2.6vw + 14px,56px);line-height:1.02;letter-spacing:-.04em;color:var(--paper)}
.faq-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7);align-items:start}
.faq-list details{border-top:1px solid var(--pearl-faint)}
.faq-list details:last-child{border-bottom:1px solid var(--pearl-faint)}
.faq-list summary{position:relative;display:flex;align-items:center;min-height:64px;padding:var(--s3) 40px var(--s3) 0;cursor:pointer;list-style:none;color:var(--paper);font-weight:600;font-size:var(--t-lead)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before,.faq-list summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:1.5px;background:var(--pearl);transition:transform var(--dur-ui,200ms) var(--ease-out,ease)}
.faq-list summary::after{transform:rotate(90deg)}
.faq-list details[open] summary::after{transform:rotate(0)}
.faq-list details p{margin:0 0 var(--s5);max-width:36em;color:var(--on-dark);line-height:1.6}
.faq-list details p a{color:var(--paper);text-underline-offset:3px;text-decoration-color:var(--pearl-rule)}
@media (max-width:760px){.faq-row{grid-template-columns:1fr;gap:var(--s5)}}
@media (prefers-reduced-motion:reduce){.faq-list summary::after{transition:none}}

/* ---------- Three plain steps (IRS help "Transcripts first") and a line under the team list ---------- */
.steps3{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);counter-reset:s}
.steps3 li{counter-increment:s;padding-top:var(--s5);border-top:1px solid var(--pearl-rule);color:var(--on-dark);font-size:var(--t-lead);line-height:1.5}
.steps3 li::before{content:counter(s);display:block;margin-bottom:var(--s3);color:var(--gold-l);font:600 15px/1 var(--f-mark)}
.steps3 b{color:var(--paper);font-weight:600}
@media (max-width:760px){.steps3{grid-template-columns:1fr;gap:var(--s4)}}
.team-more{margin-top:var(--s5);max-width:44em;color:var(--on-dark);font-size:var(--t-small);line-height:1.6}
.team-more a{color:var(--paper);text-underline-offset:3px}
.svc-hero .micro,.page-top .micro{margin-top:var(--s4);color:var(--on-dark-2)}

/* ---------- Brand kit v8 (ZT-196, Ivo 27 Sep): the kit's files only ---------- */
/* Zolt Gold, the kit's new brand color, for small accents only: the gold word, step numbers, the credential dots and the
   dots between credentials. Everything larger keeps the champagne gold (--gold-l). #D4A53C on the night is about 8:1. */
:root{--zolt-gold:#D4A53C}
.gold-w,.work-n,.team-c i{color:var(--zolt-gold)}
.steps3 li::before{color:var(--zolt-gold)}
/* The homepage hero keeps the 3D mark (Ivo, 28 Sep: "b"), rebuilt in the kit's colors: blue glass over gold, a silver rim,
   the inside baked from the kit file (hero3d/interior.webp) and its first-paint poster rendered from it. */
/* The tighter frame also draws the mark about 11% bigger at the same height: the header and footer marks step down to
   keep their size. */
.brand img{height:30px}
@media (min-width:761px){.brand img{height:36px}}
.foot img{height:27px}

/* ---------- Paper cream (ZT-198, Ivo 28 Sep: "the white sections… more like thick paper", the cream "lightly throughout",
   the app in its light mode) ---------- */
:root{--cream:#F4EDE0;--cream-2:#E9DFCC;--cream-line:rgba(22,25,29,.14);--cream-ink:#16191D;--cream-mute:#5E574B;--gold-ink:#7A5A14}
/* Thick paper: the cream, the paper tile laid over it (textures/paper.webp, multiply; scripts/paper-texture.mjs makes it), a
   lighter top edge and a soft shadow on the night below, so the band reads as a sheet lying on top of the page. */
.paper{background-color:var(--cream);color:var(--cream-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 26px 50px -24px rgba(0,0,0,.85);z-index:1}
.paper::before{background:url(/nl/textures/paper.webp) 0 0/256px;mix-blend-mode:multiply;opacity:.9}

/* The form's choices ("What do you need?", the language): cream paper tiles on the night. Chosen: a Zolt Gold edge. */
.sf-opt{border-color:transparent;background:var(--cream) url(/nl/textures/paper.webp) 0 0/256px;background-blend-mode:multiply;color:var(--cream-ink)}
.sf-opt:hover{border-color:var(--cream-2);color:var(--cream-ink);box-shadow:0 10px 24px -16px rgba(0,0,0,.9)}
.sf-opt:has(:checked){border-color:var(--zolt-gold);background-color:#FBF6EA;box-shadow:inset 0 0 0 1px var(--zolt-gold);color:var(--cream-ink)}
.sf-opt{color-scheme:light}   /* the native box and dot draw light on the cream */
.sf-opt input{accent-color:var(--gold-ink)}
main [data-start-form] .sf-set[data-invalid] .sf-opt{border-color:#F2B8A0;box-shadow:inset 0 0 0 1px #F2B8A0}

/* The client app in its light mode (the portal is cream, like its real sign-in): every sample app screen on the site, and
   the hero phone. The phone's body stays dark; only the screens turn light. */
.as-screen{border-color:rgba(22,25,29,.1);background:linear-gradient(180deg,#FBFAF7,#F1EADF);color:var(--cream-ink);box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.as-k{color:var(--cream-mute)}
.as-big{color:var(--cream-ink)}
.as-ok{color:var(--gold-ink)}
.as-ok::before{background:radial-gradient(circle,var(--gold-ink) 0 3px,transparent 3.5px),rgba(122,90,20,.15)}
.as-files li,.as-rem,.as-pl div{background:rgba(22,25,29,.05)}
.as-files li.ok::after,.as-rem b,.as-pl .left dd{color:var(--gold-ink)}
.as-files li.up::after{background:linear-gradient(90deg,var(--cream-ink) 0 60%,rgba(22,25,29,.15) 60%)}
.as-pl dt{color:var(--cream-mute)}
.as-chips span{border-color:rgba(22,25,29,.22)}
.as-chips span:last-child{border-color:var(--gold-ink);color:var(--gold-ink)}
.ag-steps li{border-top-color:rgba(22,25,29,.14);color:var(--cream-mute)}
.ag-steps li.done{border-top-color:var(--cream-ink)}
.ag-steps li.now{border-top-color:var(--zolt-gold);color:var(--cream-ink)}
.ag-screen{background:linear-gradient(180deg,#FBFAF7,#EFE7D8);color:var(--cream-ink)}
.ag-k{color:var(--cream-mute)}
.ag-status{color:var(--cream-ink)}
.ag-rem{background:rgba(22,25,29,.06);color:var(--cream-ink)}
.ag-rem b{color:var(--gold-ink)}
.ag-sample{border-color:rgba(22,25,29,.22);color:var(--cream-mute)}

/* ---------- Why we made Zolt (ZT-199): the homepage's first paper sheet, between the hero and the services ---------- */
.why{padding-block:clamp(72px,8vw,128px)}
.why-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:start}
.why h2{color:var(--cream-ink);font-size:clamp(30px,2.6vw + 14px,56px);line-height:1.02;letter-spacing:-.04em}
.why-lead{margin:0 0 var(--s5);max-width:34em;color:var(--cream-ink);font-size:var(--t-lead);line-height:1.55}
.why-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--cream-line);counter-reset:w}
.why-list li{display:grid;grid-template-columns:2.4em 1fr;padding:var(--s4) 0;border-bottom:1px solid var(--cream-line);color:#3A362F;font-size:var(--t-lead);line-height:1.5;counter-increment:w}
.why-list li::before{content:counter(w);color:var(--gold-ink);font:600 15px/1.95 var(--f-mark)}
.why-list b{color:var(--cream-ink);font-weight:600}
.why-end{margin:var(--s6) 0 0;color:var(--cream-ink);font:600 clamp(20px,.6vw + 16px,24px)/1.3 var(--f-display);letter-spacing:-.01em}
@media (max-width:860px){.why-row{grid-template-columns:1fr;gap:var(--s5)}}
/* The service pages' paper band sits far down the page: the browser skips it (and its texture) until it comes near, so
   the paper never competes with the first screen's image on a slow phone. */
.guide.paper{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* ---------- Phones, from bigger screens' side (ZT-200) ---------- */
/* The header's EN/ES switch, on every screen (Jorge asked for it on phones; Ivo, 28 Sep: "the english spanish button that
   is working on mobile, I don't see it on the website version"). The current language is lit; the whole switch is one link
   to the page in the other language. Where the nav is open it sits after the links, before the button, and replaces the
   "Español" link; where the nav folds into the sheet behind "Menu" it sits next to "Menu" and the link stays in the sheet. */
.lang-flip{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;text-decoration:none}
.lang-flip .lf{display:grid;place-items:center;min-width:30px;height:26px;padding:0 6px;border:1px solid var(--pearl-rule);color:var(--on-dark);font:600 12px/1 var(--f-body);letter-spacing:.04em;transition:color var(--dur-ui,200ms) var(--ease-out,ease),border-color var(--dur-ui,200ms) var(--ease-out,ease)}
.lang-flip .lf:first-child{border-radius:13px 0 0 13px;border-right:0}
.lang-flip .lf:last-child{border-radius:0 13px 13px 0}
.lang-flip .lf.on{border-color:var(--paper);background:var(--paper);color:var(--night)}
.lang-flip:hover .lf:not(.on){color:var(--paper);border-color:var(--pearl-line)}
.lang-flip:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px;border-radius:15px}
@media (min-width:1041px){.head-row>.lang-flip{order:1}.head-row>.head-book{order:2}}
@media (min-width:1041px) and (max-width:1220px){html[lang="es"] .head-row>.lang-flip,html[lang="es"] .head-row>.head-book{order:0}}

/* ---------- The app phone's home: a dark pocket under "Why we made Zolt" (Ivo, 28 Sep) ---------- */
/* The phone left the hero (the Z stands alone on the water) and lives here, under the heading, in a dark pocket on the
   paper so the app's light screen stands out. Its screen is the app glimpse's (.ag-screen, light mode); --pw sets its
   size, 1:2. It stays put on phones too (Ivo, 28 Sep: no phone movement; mobile.css only sizes it). */
.why-side{display:flex;flex-direction:column;gap:var(--s6)}
.why-pocket{position:relative;isolation:isolate;display:grid;place-items:center;overflow:clip;padding:40px 24px 44px;border-radius:24px;background:#0B0D10;box-shadow:0 26px 50px -28px rgba(0,0,0,.75);view-timeline:--pocket block}
/* The phone floats (Ivo, 28 Sep: "the background is moving when you scroll so the phone feels like it's really floating";
   then "make the background there the marble"; Oct 4, ZT-433: no old renders, so the marble is gone): behind it, the
   mint and blue aurora of the 2D layer, which drifts slower than the page as you scroll,
   while the phone stays put. The layer is taller than the pocket, so its edges never show. */
.why-pocket::before{content:"";position:absolute;inset:-22% -8%;z-index:-2;background:radial-gradient(55% 45% at 28% 26%,rgba(46,230,166,.18),transparent 72%),radial-gradient(60% 55% at 72% 74%,rgba(0,163,224,.24),transparent 74%),#0B0D10;transform:translate3d(0,0,0)}
/* Dark edges and the rim on top of the stone, so the phone stays what stands out. */
.why-pocket::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(62% 52% at 50% 46%,rgba(11,13,16,.02),rgba(11,13,16,.34) 72%,rgba(11,13,16,.7));box-shadow:inset 0 1px 0 rgba(251,250,247,.08),inset 0 0 0 1px rgba(212,165,60,.18)}
@keyframes stone-drift{from{transform:translate3d(0,-17%,0)}to{transform:translate3d(0,17%,0)}}
@keyframes stone-drift-wide{from{transform:translate3d(0,-11%,0)}to{transform:translate3d(0,11%,0)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .why-pocket::before{animation:stone-drift linear both;animation-timeline:--pocket;animation-range:cover}
    .graphite::before{animation:stone-drift-wide linear both;animation-timeline:--graphite;animation-range:cover}
  }
}

/* ---------- Brushed graphite: the three services and the portal (Ivo, 28 Sep: picked "D" of six, "but darken it, we want
   the service cards to be more visible as well") ---------- */
/* Dark brushed metal (its photograph removed with the old renders, ZT-433; the dot grid below had already replaced it). It drifts slowly as you scroll, like the pocket's marble; a still shade on top keeps the
   heading's band and the edges darker, so the words and the cards come first. */
.graphite{isolation:isolate;overflow:clip;view-timeline:--graphite block}
.graphite::before{content:"";position:absolute;inset:-16% 0;z-index:-2;transform:translate3d(0,0,0)}
.graphite::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,13,16,.6),rgba(11,13,16,.18) 40%,rgba(11,13,16,.18) 70%,rgba(11,13,16,.55)),linear-gradient(90deg,rgba(11,13,16,.4),rgba(11,13,16,0) 32%,rgba(11,13,16,0) 68%,rgba(11,13,16,.4))}
/* The service cards stand clear of the metal: near-solid night, a Zolt Gold edge and icon, a lit top rim and a lift. */
.svc4-card{border-color:rgba(212,165,60,.42);background-color:rgba(12,14,17,.82);box-shadow:inset 0 1px 0 rgba(251,250,247,.1),0 24px 48px -26px rgba(0,0,0,.95)}
.svc4-card:hover{border-color:rgba(212,165,60,.72)}
.svc4-g{color:var(--zolt-gold)}

/* ---------- "Wherever you are." (Ivo, 28 Sep: "something nicer for the two bottom sections", then "not too busy, I don't
   want a background here") ---------- */
/* The plain night stays; the two ways to work with us become two quiet tiles with a globe and a pin. */
.reach .reach-row{align-items:center}
.reach .reach-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.reach .reach-list li{display:block;padding:var(--s5);border:1px solid rgba(212,165,60,.3);border-radius:18px;background:linear-gradient(180deg,rgba(251,250,247,.04),rgba(251,250,247,0));box-shadow:inset 0 1px 0 rgba(251,250,247,.06);color:var(--on-dark);font-size:var(--t-small);line-height:1.5}
.reach .reach-list li::before{content:none}
.reach-g{display:block;width:40px;height:40px;margin-bottom:var(--s4);color:var(--zolt-gold)}
.reach .reach-list b{display:block;margin-bottom:4px;color:var(--paper);font:600 clamp(18px,.5vw + 15px,22px)/1.15 var(--f-display);letter-spacing:-.02em}

/* ---------- "Questions." on the paper cream (Ivo, 28 Sep) ---------- */
/* A light sheet between the dark sections, like "Why we made Zolt": the questions in ink, each plus in a thin Zolt Gold
   ring; an open question's answer sits on a lighter strip of the paper. Other pages' FAQs keep their look. */
.faq.paper h2{color:var(--cream-ink)}
.faq.paper .faq-list details{border-color:var(--cream-line)}
.faq.paper .faq-list summary{color:var(--cream-ink);background:radial-gradient(circle at calc(100% - 15px) 50%,transparent 12.5px,rgba(122,90,20,.55) 13px,rgba(122,90,20,.55) 13.6px,transparent 14.2px) no-repeat}
.faq.paper .faq-list summary:hover{color:var(--gold-ink)}
.faq.paper .faq-list summary::before,.faq.paper .faq-list summary::after{background:var(--gold-ink)}
.faq.paper .faq-list details[open]{background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,0) 85%)}
.faq.paper .faq-list details p{color:#3A362F}
.faq.paper .faq-list summary:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}

/* ---------- A scene per service page: the old photographs are gone (ZT-433, Ivo, Oct 4: no old renders). The glow and
   the service's flat spot that replace them are in src/styles/shapes.css (nl/Scene). ---------- */

/* ---------- The trust line under the homepage hero (nl/TrustTicker; Ivo, 28 Sep: "thinner and more modern", he picked
   the ticker) ---------- */
/* One thin line between a gold hairline and the night: the facts drift left at about 16 px a second (Ivo: "half the speed"), Zolt Gold diamonds
   between them, soft edges; two identical runs make the loop seamless. It holds on hover, on focus and with the pause
   button at the right; with reduced motion it stands still, one line to swipe or scroll. */
.ticker{display:flex;align-items:center;border-top:1px solid rgba(212,165,60,.24);border-bottom:1px solid var(--pearl-faint)}
.tk-view{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk-track{display:flex;width:max-content;animation:tk-run 96s linear infinite}
.tk-run{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.tk-run li{display:flex;align-items:center;gap:22px;min-height:46px;padding-left:22px;color:var(--on-dark);font:500 13.5px/1.2 var(--f-body);letter-spacing:.01em;white-space:nowrap}
.tk-run li::after{content:"";flex:none;width:6px;height:6px;border-radius:1px;background:var(--zolt-gold);transform:rotate(45deg)}
@keyframes tk-run{to{transform:translateX(-50%)}}
.ticker:hover .tk-track,.ticker:focus-within .tk-track,.ticker[data-paused] .tk-track{animation-play-state:paused}
.tk-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:max(4px,calc((100vw - var(--max)) / 2 - 36px));padding:0;border:0;border-radius:50%;background:none;color:var(--on-dark-2);cursor:pointer}
.tk-btn svg{width:13px;height:13px;fill:currentColor}
.tk-btn .tk-play,.tk-btn[aria-pressed="true"] .tk-pause{display:none}
.tk-btn[aria-pressed="true"] .tk-play{display:block}
.tk-btn:hover{color:var(--paper)}
.tk-btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:-6px}
@media (prefers-reduced-motion:reduce){
  .tk-track{animation:none}
  .tk-view{overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
  .tk-view::-webkit-scrollbar{display:none}
  .tk-view:focus-visible{outline:2px solid var(--gold-l);outline-offset:-3px}
  .tk-run[aria-hidden]{display:none}
  .tk-run li:first-child{padding-left:var(--gutter)}
  .tk-run li:last-child{padding-right:var(--gutter)}
  .tk-run li:last-child::after{content:none}
  .tk-btn{display:none}
}

/* ---------- The hero's words (Ivo, 28 Sep: "a little blur ... for the hero wherever necessary to increase visibility and
   emphasis on words") ---------- */
/* A soft frosted halo right behind the words: the lights under the headline blur and dim a little, feathered out so there
   is no box. */
.hero-room .hero-copy::before{content:"";position:absolute;inset:-14% -10% -16% -8%;z-index:-1;pointer-events:none;background:rgba(11,13,16,.16);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);-webkit-mask:radial-gradient(closest-side,#000 58%,transparent);mask:radial-gradient(closest-side,#000 58%,transparent)}
.why-phone{--pw:190px;position:relative;width:var(--pw);height:calc(var(--pw) * 2);padding:6px;border-radius:calc(var(--pw) * .16);background:linear-gradient(160deg,#3A4049,#14171B 40%,#0B0D10);box-shadow:0 0 0 1px rgba(251,250,247,.16),0 30px 50px -20px rgba(0,0,0,.9),0 0 60px -10px rgba(0,163,224,.32)}
.why-phone::after{content:"";position:absolute;left:12%;right:12%;bottom:-12px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent)}

/* ---------- Growth menu in the header (ZT-260, Ivo, Oct 1): Taxes · Business · Growth, Growth a mega-menu ---------- */
/* On the open bar "Growth" is a button like the links beside it, with a small chevron; it drops one night panel under the
   bar, right-aligned with the page: the headline "Grow your business" and the way to every price, then three columns
   (Websites, SEO, Marketing), each page a name and one line. In the folded menu it opens in place under its row. Three
   top items fit the bar as before, so it folds where it always did (1040 px; 1220 px in Spanish). */
.nav-dd{position:relative}
.nav-dd-mega{position:static}
.nav-dd-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 9px;border:0;background:none;color:var(--on-dark);font:400 15px/1 var(--f-body);white-space:nowrap;cursor:pointer;transition:color var(--dur-ui) var(--ease-out)}
.nav-dd-btn:hover,.nav-dd[data-open]>.nav-dd-btn{color:var(--paper)}
.nav-dd-btn[data-here]{color:var(--paper);font-weight:600}
.nav-dd-btn::after{content:"";position:absolute;left:9px;right:9px;bottom:10px;height:1px;background:var(--pearl-line);transform:scaleX(0);transform-origin:0 50%}
.nav-dd-btn[data-here]::after{transform:scaleX(1)}
.nav-dd-c{width:7px;height:7px;margin:-3px 0 0 2px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-ui) var(--ease-out)}
.nav-dd[data-open] .nav-dd-c{margin-top:3px;transform:rotate(-135deg)}
.nav-dd-list{display:none;position:absolute;top:100%;z-index:60;margin:0;padding:var(--s5);background:var(--night-2);border:1px solid var(--pearl-faint);border-radius:16px;box-shadow:0 24px 48px -20px rgba(0,0,0,.75)}
.nav-mega{right:var(--gutter);width:min(860px,calc(100% - var(--gutter) * 2))}
.nav-dd[data-open]>.nav-dd-list{display:block}
html:not(.js) .nav-dd:is(:hover,:focus-within)>.nav-dd-list{display:block}
.nav-mega-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s5);padding:0 12px var(--s4);border-bottom:1px solid var(--pearl-faint)}
.nav-mega-h{color:var(--paper);font:600 clamp(22px,1vw + 14px,28px)/1.1 var(--f-display);letter-spacing:-.03em}
.nav-mega-all{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);font-size:var(--t-small);font-weight:600;text-decoration:underline;text-decoration-color:var(--pearl-rule);text-underline-offset:4px}
.nav-mega-all:hover{text-decoration-color:var(--gold-l)}
.nav-mega-cols{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
.nav-mega-k{display:flex;align-items:center;gap:10px;padding:0 12px var(--s2);color:var(--on-dark-2);font-size:var(--t-cap);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.nav-mega-k svg{width:22px;height:22px;color:var(--zolt-gold)}
.nav-mega-col ul{margin:0;padding:0;list-style:none}
.nav-dd-list a:not(.nav-mega-all){display:grid;gap:2px;padding:10px 12px;border-radius:9px;color:var(--paper);text-decoration:none;transition:background-color var(--dur-ui) var(--ease-out)}
.nav-dd-list a:not(.nav-mega-all):hover{background:rgba(251,250,247,.06)}
.nav-dd-list b{font-weight:600;font-size:15px;line-height:1.25}
.nav-dd-list a span{color:var(--on-dark-2);font-size:13px;line-height:1.35}
.nav-dd-list a[aria-current="page"] b{text-decoration:underline;text-decoration-color:var(--pearl-line);text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.nav-dd-c{transition:none}}
/* In the folded menu: Growth is a full row like the links, its chevron at the right, the menu indented under it. */
@media (max-width:1040px){
  .nav-dd-btn{width:100%;justify-content:flex-start;gap:0;min-height:52px;padding-inline:0;color:var(--paper);font-size:17px}
  .nav-dd-btn::after{left:0;right:auto;width:100%;bottom:12px}
  .nav-dd-c{margin-left:auto;margin-right:6px}
  .nav-dd-list{position:static;width:auto;padding:0 0 var(--s4) 40px;background:none;border:0;border-radius:0;box-shadow:none}
  .nav-mega-head{padding:0 0 var(--s2);border:0}
  .nav-mega-h{font-size:20px}
  .nav-mega-cols{grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s2)}
  .nav-mega-k{padding:0 0 4px}
  .nav-dd-list a:not(.nav-mega-all){padding:9px 0}
  .nav-dd-list a:not(.nav-mega-all):hover{background:none}
  .nav-dd-list a:not(.nav-mega-all):hover b{text-decoration:underline;text-decoration-color:var(--gold-l);text-underline-offset:4px}
  html:not(.js) .nav-dd .nav-dd-list{display:block}
}
@media (min-width:1041px) and (max-width:1220px){
  html[lang="es"] .nav-dd-btn{width:100%;justify-content:flex-start;gap:0;min-height:52px;padding-inline:0;color:var(--paper);font-size:17px}
  html[lang="es"] .nav-dd-btn::after{left:0;right:auto;width:100%;bottom:12px}
  html[lang="es"] .nav-dd-c{margin-left:auto;margin-right:6px}
  html[lang="es"] .nav-dd-list{position:static;width:auto;padding:0 0 var(--s4) 40px;background:none;border:0;border-radius:0;box-shadow:none}
  html[lang="es"] .nav-mega-head{padding:0 0 var(--s2);border:0}
  html[lang="es"] .nav-mega-h{font-size:20px}
  html[lang="es"] .nav-mega-cols{grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s2)}
  html[lang="es"] .nav-mega-k{padding:0 0 4px}
  html[lang="es"] .nav-dd-list a:not(.nav-mega-all){padding:9px 0}
  html[lang="es"] .nav-dd-list a:not(.nav-mega-all):hover{background:none}
  html:not(.js)[lang="es"] .nav-dd .nav-dd-list{display:block}
}

/* Taxes and Business (Ivo, Oct 2): mega-menus like Growth, on the open bar and in the folded menu (data/nav.ts). Business
   has two groups, so its panel sets --cols:2 and is narrower. On Spanish pages an English-only page carries a small EN. */
.mm-en{display:inline-block;margin-left:6px;padding:2px 3px 1px;border:1px solid var(--pearl-rule);color:var(--on-dark-2);font:600 9px/1 var(--f-body);letter-spacing:.06em;vertical-align:2px}
@media (min-width:1041px){.nav-mega[style*="--cols:2"]{width:min(600px,calc(100% - var(--gutter) * 2))}}
/* Websites & Growth (Ivo, Oct 4): three columns and, beside them, the plans as one lit card, mint like the plans themselves. */
@media (min-width:1041px){.nav-mega[style*="--cols:4"]{width:min(1000px,calc(100% - var(--gutter) * 2))}}
.nav-mega-plans a:not(.nav-mega-all){height:100%;padding:12px 14px;align-content:start;background:rgba(46,230,166,.07);border:1px solid rgba(46,230,166,.28)}
.nav-mega-plans a:not(.nav-mega-all):hover{background:rgba(46,230,166,.13)}
.nav-mega-plans b::after{content:" \2192";color:var(--mint)}

/* ---------- "Also from Zolt: grow your business" (ZT-260): the homepage band before the questions ---------- */
/* One row on wide screens: the words left, the three doors (Websites, SEO, Marketing) as ledger lines with their starting
   price in gold, then the link to all of Zolt Growth. Plain charcoal, no background image (the next sheet is the cream). */
.gband{padding-block:clamp(64px,7vw,104px)}
.gband-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
.gband-head{grid-column:1/span 5}
.gband-k{color:var(--zolt-gold);font-size:var(--t-small);font-weight:600}
.gband h2{margin-top:var(--s2);color:var(--paper);font-size:clamp(30px,2.4vw + 14px,52px);line-height:1.02;letter-spacing:-.04em}
.gband-p{margin-top:var(--s4);max-width:28em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}
.gband-list{grid-column:7/-1;margin:0;padding:0;list-style:none;border-top:1px solid var(--pearl-rule)}
.gband-list a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);min-height:56px;padding:var(--s3) 0;border-bottom:1px solid var(--pearl-faint);color:var(--paper);text-decoration:none}
.gband-n{font:600 clamp(19px,.6vw + 15px,24px)/1.2 var(--f-display);letter-spacing:-.02em;background:linear-gradient(var(--gold-l),var(--gold-l)) 0 100%/0 1px no-repeat;transition:background-size var(--dur-ui) var(--ease-out)}
.gband-list a:is(:hover,:focus-visible) .gband-n{background-size:100% 1px}
.gband-v{color:var(--gold-l);font-size:15px;white-space:nowrap}
.gband-all{grid-column:7/-1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s3)}
@media (max-width:900px){
  .gband-head,.gband-list,.gband-all{grid-column:1/-1}
  .gband-list{margin-top:var(--s6)}
}
@media (prefers-reduced-motion:reduce){.gband-n{transition:none}}

/* ---------- The homepage headline (Ivo, Oct 1): "Your numbers. Your tech. One team." ---------- */
/* Three beats on three lines: the first in white, the second in Miami Blue, the third in Zolt Gold. The colours carry no
   meaning of their own (the words say it all), and each clears AA large text on the darkened hero (the scrim below). */
.hero h1.h1-three>span{display:block}
.h1-w{color:var(--paper)}
.h1-b{color:var(--blue)}
.h1-g{color:var(--zolt-gold)}

/* ---------- Glass (Ivo, Oct 2, 9:24 PM): one system for every button and card ----------
   .glass-cta   the call to action ("Book a free call", "Reserve una llamada gratis", "Start now"): mint glass, ink words
                (#16191D on the mint face is 9:1 and up; AA needs 4.5). A .btn that books a call is one without the class
                (href /book or /es/reservar), so every page's booking button matches.
   .glass-btn   every other button: frosted glass that fits its background, a clear frost on the night and a dark frost on
                the paper. A plain .btn is one; the notched layers style.css draws step aside for one rounded glass face.
   .glass-card  plans, products, options, features: frosted black glass, a 1px soft light edge, a faint top highlight,
                a floating shadow; gold only as an accent (a hairline or a label).
   Blur is the costly part, so it stays on the face alone (no extra layers), cards drop it on phones (mobile.css), and
   everything turns solid with prefers-reduced-transparency and holds still with prefers-reduced-motion. */
:root{
  --glass-blur:blur(12px) saturate(140%);
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 46%,rgba(255,255,255,0));
  --glass-edge:rgba(251,250,247,.16);--glass-edge-top:rgba(251,250,247,.34);
  --glass-frost:rgba(251,250,247,.07);
  --glass-ink:rgba(22,25,29,.62);
  --glass-mint:rgba(46,230,166,.88);
  --glass-shadow:0 12px 28px -14px rgba(0,0,0,.65),0 2px 6px -2px rgba(0,0,0,.35);
  --glass-shadow-up:0 18px 36px -14px rgba(0,0,0,.7),0 3px 8px -2px rgba(0,0,0,.35);
  --glass-shadow-down:0 6px 14px -8px rgba(0,0,0,.6)
}
.btn::before,.btn::after,.btn>span::before{content:none}
:is(.btn,button.btn,.glass-btn){border:1px solid var(--glass-edge);border-top-color:var(--glass-edge-top);border-radius:14px;background:var(--glass-hi),var(--glass-frost);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--glass-shadow);color:var(--paper);transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out)}
.btn-sm{border-radius:12px}
:is(.btn,.glass-btn):hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--glass-shadow-up)}
:is(.btn,.glass-btn):active{transform:translateY(1px) scale(.985);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--glass-shadow-down)}
.btn[aria-disabled="true"]{opacity:.55;transform:none}
/* On the paper: a dark frost, paper words (about 7:1). */
.paper :is(.btn,.glass-btn){--glass-frost:rgba(22,25,29,.74);--glass-edge:rgba(22,25,29,.4);--glass-edge-top:rgba(255,255,255,.3)}
/* The call to action: mint glass that floats on a mint-tinted shadow. */
:is(.glass-cta,.btn[href="/book"],.btn[href^="/book?"],.btn[href^="/book#"],.btn[href="/es/reservar"],.btn[href^="/es/reservar?"],.btn[href^="/es/reservar#"]){border-color:rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.7);background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.08) 48%,rgba(255,255,255,0)),var(--glass-mint);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,80,50,.22),0 12px 26px -12px rgba(46,230,166,.55),0 3px 8px -3px rgba(0,0,0,.35)}
:is(.glass-cta,.btn[href="/book"],.btn[href^="/book?"],.btn[href^="/book#"],.btn[href="/es/reservar"],.btn[href^="/es/reservar?"],.btn[href^="/es/reservar#"]):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,80,50,.22),0 18px 34px -12px rgba(46,230,166,.62),0 4px 10px -3px rgba(0,0,0,.35)}
:is(.glass-cta,.btn[href="/book"],.btn[href^="/book?"],.btn[href^="/book#"],.btn[href="/es/reservar"],.btn[href^="/es/reservar?"],.btn[href^="/es/reservar#"]):active{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -8px rgba(46,230,166,.5)}
/* Cards: the class, and the site's existing cards, drawn the same way. */
:is(.glass-card,.g-opt,.g-plan,.g-door,.g-ways-list li,.svc4-card,main.compat .card){border:1px solid rgba(251,250,247,.14);border-top-color:rgba(251,250,247,.26);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%),var(--glass-ink);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--glass-shadow)}
:is(.g-ways-list li,main.compat .card){padding:var(--s5)}
.g-opt.g-opt:has(:checked){border-color:var(--zolt-gold);background:linear-gradient(rgba(212,165,60,.1),rgba(212,165,60,.1)),var(--glass-ink);box-shadow:inset 0 0 0 1px var(--zolt-gold),var(--glass-shadow)}
.g-opt.g-opt:hover{border-color:rgba(251,250,247,.3)}
/* The product screenshot each option carries (lane D delivers them; until then an empty frame, on previews only). */
.g-shot{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;border:1px dashed rgba(251,250,247,.24);border-radius:12px;background:repeating-linear-gradient(135deg,rgba(251,250,247,.03) 0 10px,transparent 10px 20px);color:var(--on-dark-2);font-size:12px;line-height:1.4;text-align:center}
.g-shot>span{max-width:80%;padding:4px 8px}
.g-shot img{display:block;width:100%;height:100%;object-fit:cover}
.g-opt .g-shot{grid-column:1/-1;margin-bottom:10px}
.g-opt:has(.g-shot) input{grid-row:2/span 4}
.g-plan .g-shot{aspect-ratio:2/1;margin-bottom:var(--s4)}
@media (prefers-reduced-transparency:reduce){
  :is(.btn,button.btn,.glass-btn){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--night-2)}
  .paper :is(.btn,.glass-btn){background:var(--ink)}
  :is(.glass-cta,.btn[href="/book"],.btn[href^="/book?"],.btn[href^="/book#"],.btn[href="/es/reservar"],.btn[href^="/es/reservar?"],.btn[href^="/es/reservar#"]){background:var(--mint)}
  :is(.glass-card,.g-opt,.g-plan,.g-door,.g-ways-list li,.svc4-card,main.compat .card){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--night-2)}
}
@media (prefers-reduced-motion:reduce){
  :is(.btn,.glass-btn){transition:none}
  :is(.btn,.glass-btn):is(:hover,:active){transform:none}
}

/* ---------- The hero, softened (Ivo, Oct 1: "blur the hero so we can improve the visibility of the logo and the
   headline"; Oct 2: the marble less blurred, about 3px instead of 8px, the words still AA) ---------- */
/* The scene behind the mark (the bay, the sky, the far shore; on tablets and phones the whole photo) is a little out of
   focus and a little darker, so its lights soften without losing the marble's veins. The words keep AA on their own: the
   frosted halo behind them is darker and wider than the ZT-160 one, and the small line under the buttons is --on-dark.
   Measured on Oct 2 against the brightest pixel touching a letter, 320-1920 px, English and Spanish: white 7.7:1, blue
   4.0:1 and gold 6.8:1 (large text, 3:1), the deck 13:1 and the small line 6.1:1 (4.5:1). */
.hero-room{--hero-blur:3px;--hero-dim:.76}
.hero-room .rm-back .rm-img{filter:blur(var(--hero-blur)) brightness(var(--hero-dim))}
.hero-room .hero-copy::before{background:rgba(11,13,16,.4);-webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.hero-room .hero-micro{color:var(--on-dark)}

/* ---------- The Zolt field: the site's own background (ZT-387, then ZT-391, Ivo, Oct 2) ----------
   Ivo: the photo behind the hero was too much; a texture of our own instead, so the glass has something to show, and
   then (ZT-391) "every dot is a tiny Zolt mark". Under the homepage hero the marks are a live 3D field (field/zolt-field.js,
   with its lenses); everywhere else they are a still pattern, field/field-tile.png: the brand kit's own favicon.svg,
   embedded as it is, 100 marks of about 5 x 8 px to a 240 px tile on gently curved rows (scripts/field-tile.mjs), so on
   the page they read as dots. On dark it runs at 7%, on the paper at 4.5%. Both layers are fixed to the screen on one
   origin, so they line up across every section edge, and drift up a little as the page scrolls (a light parallax, where
   the browser runs scroll-driven animation, never with reduced motion). The dark layer is one fixed layer under the
   whole page (body::before); each paper section clips its own (clip-path also clips fixed children; background-
   attachment: fixed is slow on phones). The dark sections are see-through; night2 and night0 keep their rhythm as light
   tints. Photo-backed places (the service pages' scenes, the Growth marble, the app phone's pocket) keep their photos. */
:root{
  --dots-base:#1B1F24;
  --dots-glow-blue:rgba(0,163,224,.08);
  --dots-glow-gold:rgba(212,165,60,.06);
  --field-tile:url(/nl/field/field-tile.png) 0 0/240px 240px;
  --field-on-dark:.07;
  --field-on-paper:.045;
  --night:var(--dots-base);
  --glass-blur:blur(7px) saturate(140%);
  --glass-ink:rgba(27,31,36,.56);
  /* A little frost on the glass (Ivo, Oct 3), so the words on it read easier: a dark tint on the dark glass, a mint one
     on the mint call to action. */
  --frost-dark:rgba(20,23,27,.35);
  --frost-mint:rgba(46,230,166,.14)
}
body{background:var(--dots-base)}
body::before{content:"";position:fixed;inset:0 0 -480px;z-index:-1;pointer-events:none;opacity:var(--field-on-dark);background:var(--field-tile)}
.night,.graphite{background:transparent}
.night2{background:rgba(255,255,255,.025)}
.night0{background:rgba(5,6,8,.22)}
.graphite::before,.graphite::after{content:none}
.paper,.mist{clip-path:inset(0)}
.paper::before,.mist::before{position:fixed;inset:0 0 -480px;opacity:var(--field-on-paper);background:var(--field-tile)}
@keyframes field-drift{to{transform:translate3d(0,-480px,0)}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body::before,.paper::before,.mist::before{animation:field-drift linear both;animation-timeline:scroll(root)}
  }
}
/* Glass that shows the field: the header once it has scrolled, and the phone bar. */
.head::before{background:rgba(27,31,36,.92);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
.dock{background:rgba(27,31,36,.74);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 -12px 28px -14px rgba(0,0,0,.6)}
/* Cards below the hero keep their soft blur, which melts the tiny marks away, so each card also carries the field as
   through a lens: the same marks 1.9x larger (field-tile-lens.png, faded in the file), so under the glass they read as
   little Z's. On desktop that copy is fixed to the screen like the field, so it slides inside the glass as the page
   scrolls; phones keep it still (fixed backgrounds are slow there). */
:root{--dots-lens:url(/nl/field/field-tile-lens.png) 0 0/456px 456px}
:is(.glass-card,.g-opt,.g-plan,.g-door,.g-ways-list li,.svc4-card,main.compat .card){background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%),linear-gradient(var(--frost-dark),var(--frost-dark)),var(--dots-lens),var(--glass-ink);-webkit-backdrop-filter:blur(4px) saturate(130%);backdrop-filter:blur(4px) saturate(130%)}
@media (min-width:1024px) and (hover:hover){
  :is(.glass-card,.g-opt,.g-plan,.g-door,.g-ways-list li,.svc4-card,main.compat .card){background-attachment:scroll,scroll,fixed,scroll}
}
/* The hero: no photo, so no scrim behind the words and no room drifting on scroll (the Z's own 3D still turns). */
.hero-room .hero-copy::before{content:none}
.hero-room .rm-rig{animation:none}
/* The Z: a little smaller, a gold glow behind it (the grid's second glow) and a soft light under its tip in place of the
   water's reflection. */
.hero-room .rm-rig .rm-box{--mh:min(var(--bh) * .42,400px,(100cqh - var(--bh) * (1 - var(--tip-y)) - var(--head-h) - 24px) / .911)}
.hero-room .hero-mark::before{left:-80%;right:-80%;top:-30%;bottom:-25%;height:auto;background:radial-gradient(closest-side,rgba(212,165,60,.16),var(--dots-glow-gold) 55%,transparent)}
.hero-room .hero-mark::after{left:6%;right:-4%;bottom:2.5%;height:9%;background:radial-gradient(closest-side,rgba(255,226,170,.3),rgba(212,165,60,.1) 55%,transparent)}
/* The live field (ZT-391): the hero is opaque again. The still of the field (field/still-*.webp, the field's own first
   frame on the base colour, 16 and 11 KB) paints first, and the canvas fades in over it once it has drawn
   (data-field-live, zolt-field.js). The blue glow sits over both; the Z, its gold glow and the words above that. */
.hero-room{background:var(--dots-base)}
.hero-room::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(70vmax 52vmax at 0 0,var(--dots-glow-blue),transparent 70%)}
.zf-still,.zf-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.zf-still{background:url(/nl/field/still-wide.webp) 50% 100%/cover no-repeat;transition:opacity .9s var(--ease-out)}
.zf-canvas{opacity:0;transition:opacity .9s var(--ease-out)}
[data-field-live] .zf-canvas{opacity:1}
[data-field-live] .zf-still{opacity:0}
/* The glass in the hero is clear, so the field's lens shows through it: no blur here (the canvas does the optics). */
.hero-room :is(.ctas .btn,.hero-ea,.hero-doors .hero-door){-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-room .btn-quiet{border:1px solid rgba(251,250,247,.24);border-top-color:rgba(251,250,247,.42);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 50%),linear-gradient(var(--frost-dark),var(--frost-dark)),rgba(255,255,255,.03)}
.hero-room .hero-ea{border-color:rgba(251,250,247,.24);background:linear-gradient(var(--frost-dark),var(--frost-dark)),rgba(255,255,255,.03)}
.hero-room .hero-doors .hero-door{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),linear-gradient(var(--frost-dark),var(--frost-dark)),rgba(27,31,36,.34)}
.hero-room .hero-doors .hero-door:hover{border-color:rgba(226,194,122,.42)}
/* The header while it sits over the field: clear too, a lens of its own. */
html[data-field-head] .head::before{background:var(--frost-dark);-webkit-backdrop-filter:none;backdrop-filter:none}
/* Buttons on dark (Ivo, Oct 2, replacing "mint with ink words"): the call to action is mint glass, a fifth mint over
   whatever is behind it, a 1px mint edge, a soft inner highlight and a mint glow, with paper words (about 9:1 over the
   dark base). On the paper it stays solid mint with ink words. */
:is(.glass-cta,.btn[href="/book"],.btn[href^="/book?"],.btn[href^="/book#"],.btn[href="/es/reservar"],.btn[href^="/es/reservar?"],.btn[href^="/es/reservar#"]){border:1px solid rgba(46,230,166,.78);border-top-color:rgba(184,255,226,.92);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 48%,rgba(255,255,255,0)),linear-gradient(var(--frost-mint),var(--frost-mint)),rgba(46,230,166,.2);color:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 14px -6px rgba(46,230,166,.6),0 0 26px -8px rgba(46,230,166,.55),0 10px 24px -14px rgba(0,0,0,.6)}
:is(.glass-cta,.btn[href="/book"],.btn[href^="/book?"],.btn[href^="/book#"],.btn[href="/es/reservar"],.btn[href^="/es/reservar?"],.btn[href^="/es/reservar#"]):hover{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 48%,rgba(255,255,255,0)),linear-gradient(var(--frost-mint),var(--frost-mint)),rgba(46,230,166,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 16px -6px rgba(46,230,166,.7),0 0 34px -8px rgba(46,230,166,.7),0 14px 30px -14px rgba(0,0,0,.65)}
.paper :is(.glass-cta,.btn[href="/book"],.btn[href^="/book?"],.btn[href^="/book#"],.btn[href="/es/reservar"],.btn[href^="/es/reservar?"],.btn[href^="/es/reservar#"]){border-color:rgba(0,80,50,.22);background:var(--mint);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px -12px rgba(46,230,166,.6),0 3px 8px -3px rgba(0,0,0,.25)}
/* Less busy, same words: more air between the blocks, the sub line a step smaller. */
.hero .h1-kw{margin-bottom:var(--s5)}
.hero-room .deck{margin-top:var(--s6);font-size:clamp(17px,.3vw + 14px,19px)}
.hero-room .ctas{margin-top:var(--s7)}
.hero-room .hero-doors{margin-top:var(--s7)}
@media (prefers-reduced-transparency:reduce){
  .head::before,.dock,html[data-field-head] .head::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--dots-base)}
  :is(.glass-cta,.btn[href="/book"],.btn[href^="/book?"],.btn[href^="/book#"],.btn[href="/es/reservar"],.btn[href^="/es/reservar?"],.btn[href^="/es/reservar#"]){background:var(--mint);color:var(--ink)}
  .hero-room :is(.btn-quiet,.hero-ea,.hero-doors .hero-door){background:var(--night-2)}
}