/* Taya Corp public site. Tokens live in tokens.css. Only transform and opacity are animated. */

:root{
  --navy:#0E1E3A;            /* fixed navy for the hero, the final call and the footer (does not flip in dark mode) */
  --navy-2:#16294D;
  --navy-3:#0A1629;
  --paper:#F2F4F7;
  --brass:#B8892E;
  --brass-2:#D4A94F;
  --tshadow:0 1px 2px rgba(5,10,22,.95),0 3px 12px rgba(5,10,22,.78),0 10px 44px rgba(5,10,22,.8);
  --nav-h:74px;
  --gutter:clamp(16px,4vw,40px);
  --maxw:1200px;
  --tc-bottom-bar:0px;
}
:root[data-theme="dark"]{--navy:#0A1629;--navy-2:#12213B;--navy-3:#060E1C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--navy:#0A1629;--navy-2:#12213B;--navy-3:#060E1C}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font:400 17px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;animation:page-in .7s var(--ease-out) both}
@keyframes page-in{from{opacity:0}to{opacity:1}}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.06em}
.wrap{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:transform var(--t-fast) var(--ease-out)}
.skip:focus{transform:translateY(72px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- environment: a ledger sheet drifting behind everything ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env-grid{position:absolute;inset:-10% -10% -10% -10%;background:
  linear-gradient(90deg,transparent calc(8% - 1px),rgba(184,137,46,.10) calc(8% - 1px),rgba(184,137,46,.10) 8%,transparent 8%),
  repeating-linear-gradient(0deg,transparent 0 31px,rgba(14,30,58,.045) 31px 32px);
  animation:env-drift 90s linear infinite;animation-delay:-20s}
.env-glow{position:absolute;width:70vmax;height:70vmax;right:-25vmax;top:-20vmax;border-radius:50%;background:radial-gradient(circle,rgba(184,137,46,.10),transparent 62%);animation:env-glow 70s var(--ease-soft) infinite alternate;animation-delay:-12s}
@keyframes env-drift{to{transform:translateY(-32px)}}
@keyframes env-glow{to{transform:translate(-18vmax,30vmax)}}
:root[data-theme="dark"] .env-grid{opacity:.5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .env-grid{opacity:.5}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.72em 1.35em;border-radius:999px;border:1.5px solid transparent;font:600 15.5px/1.1 var(--font-body);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px rgba(184,137,46,.28)}
.btn-accent:hover{background:var(--accent-hover);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 26px rgba(184,137,46,.36)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--text-primary);background:var(--panel)}
.btn-ghost-light{background:rgba(11,22,40,.45);color:#F2F4F7;border-color:rgba(242,244,247,.55);backdrop-filter:blur(6px)}
.btn-ghost-light:hover{background:rgba(242,244,247,.14);border-color:#F2F4F7}
.btn-lg{min-height:54px;padding:.9em 1.6em;font-size:16.5px}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid transparent;background:transparent;cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{border-color:currentColor}
@media (pointer:coarse){.btn{min-height:48px}.icon-btn{width:46px;height:46px}}

/* ---------- navigation ---------- */
/* The bar is always a dark strip from edge to edge (owner request, 2026-09-25), over the hero and everywhere else. */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);color:#F2F4F7;transition:background-color var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out)}
.nav::before{content:"";position:absolute;inset:0;background:var(--navy-3);box-shadow:0 1px 0 rgba(242,244,247,.08),0 8px 24px rgba(6,14,28,.28);opacity:1;transition:opacity var(--t-med) var(--ease-out);z-index:-1}
.nav-in{height:100%;width:min(1320px,100% - 2*var(--gutter));margin-inline:auto;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand-mark{width:44px;height:44px;flex:none}
.nav .bm-dark{display:none}
.brand-words{display:flex;flex-direction:column;line-height:1}
.brand-name{font:700 21px/1 var(--font-display);letter-spacing:.14em}
.brand-tag{font:500 9.5px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;margin-top:5px;opacity:.8}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{position:relative;white-space:nowrap;padding:10px 12px;text-decoration:none;font-weight:500;font-size:15px;border-radius:8px}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.nav-tools{display:flex;align-items:center;gap:8px}
.lang{display:flex;border:1.5px solid color-mix(in srgb,currentColor 38%,transparent);border-radius:999px;padding:2px}
.lang button{border:0;background:transparent;cursor:pointer;font:600 12.5px/1 var(--font-mono);letter-spacing:.06em;padding:8px 10px;border-radius:999px;opacity:.72;transition:background-color var(--t-fast) var(--ease-out),opacity var(--t-fast) var(--ease-out)}
.lang button[aria-pressed="true"]{background:var(--text-primary);color:var(--canvas);opacity:1}
.nav .lang button[aria-pressed="true"]{background:#F2F4F7;color:#0E1E3A}
.theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .i-sun{display:none}:root:not([data-theme="light"]) .theme-btn .i-moon{display:block}}
.nav-account{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px 0 11px;border-radius:999px;border:1.5px solid color-mix(in srgb,currentColor 38%,transparent);text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap;transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.nav-account:hover{border-color:currentColor}
.nav-account svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
/* Signed in: initials + name at the top, and a small account menu */
.nav-tools{position:relative}
.nav-account.signed-in{padding-left:5px}
.nav-account.signed-in svg{display:none}
.nav-account.signed-in::before{content:attr(data-initials);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 12.5px/1 var(--font-body);letter-spacing:.02em}
.nav-account.signed-in .acct-label{max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:260px;padding:14px;border-radius:16px;background:var(--panel);color:var(--text-primary);border:1px solid var(--line);box-shadow:var(--shadow-2);display:grid;gap:6px;text-shadow:none;animation:panel-in .3s var(--ease-out) both}
.acct-who{display:flex;align-items:center;gap:12px;padding:4px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.acct-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 14px/1 var(--font-body);flex:none}
.acct-id{display:flex;flex-direction:column;min-width:0}
.acct-name{font:600 16px/1.25 var(--font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-contact{font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-go,.acct-out{display:flex;align-items:center;min-height:42px;padding:0 10px;border-radius:10px;border:0;background:none;text-align:left;text-decoration:none;font-weight:600;font-size:15px;color:var(--text-primary);cursor:pointer}
.acct-go:hover,.acct-out:hover{background:var(--panel-2)}
.acct-out{color:var(--danger)}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--tc-bottom-bar));z-index:70;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;background:var(--navy);color:#F2F4F7;box-shadow:var(--shadow-2);font-weight:600;font-size:15px;opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:20px;height:20px;fill:none;stroke:#5FC79A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-account{display:none!important}
/* html.nav-tight (set by site.js, see .nav-compact below): the account shows only its icon or initials */
.nav-tight .nav-account{padding:0;width:42px;justify-content:center}.nav-tight .nav-account.signed-in{padding:0;border-color:transparent}.nav-tight .nav-account .acct-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:720px){.nav-account{display:none}.menu-account{display:block!important;font-weight:600!important;color:#D4A94F}}
.menu-btn{display:none}
.menu-btn path{transition:transform var(--t-med) var(--ease-out),opacity var(--t-fast);transform-origin:12px 12px}
.menu-btn[aria-expanded="true"] .m1{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .m2{opacity:0}
.menu-btn[aria-expanded="true"] .m3{transform:translateY(-5px) rotate(-45deg)}
/* Collapsed nav (hamburger): when the bar does not fit on one line, site.js first sets html.nav-tight and,
   if it still does not fit, html.nav-compact too. The fit depends on the language, the account name and
   the fonts, so it is measured instead of using a fixed breakpoint. */
.nav-compact .nav-links{position:fixed;left:0;right:0;top:var(--nav-h);flex-direction:column;gap:0;margin:0;padding:10px var(--gutter) 22px;background:var(--navy-3);color:#F2F4F7;box-shadow:0 18px 40px rgba(6,14,28,.35);transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform var(--t-med) var(--ease-out),opacity var(--t-med) var(--ease-out),visibility 0s linear var(--t-med)}
.nav-compact .nav-links.open{transform:none;opacity:1;visibility:visible;transition:transform var(--t-med) var(--ease-out),opacity var(--t-med) var(--ease-out)}
.nav-compact .nav-links a{padding:14px 4px;font-size:18px;border-bottom:1px solid rgba(242,244,247,.12)}
.nav-compact .nav-links a::after{display:none}
.nav-compact .menu-btn{display:inline-grid}
.nav-compact .nav-tools{margin-left:auto}
.nav-measuring .nav-links{transition:none!important}
@media (max-width:720px){
  .nav-cta{display:none}
  .brand-tag{display:none}
  .brand-name{font-size:18px}
  .brand-mark{width:38px;height:38px}
  :root{--nav-h:64px}
}
@media (max-width:420px){
  .nav-in{gap:8px}
  .nav-tools{gap:4px}
  .brand{gap:8px}
  .brand-mark{width:34px;height:34px}
  .brand-name{font-size:15.5px;letter-spacing:.1em}
  .icon-btn{width:44px;height:44px}
  .lang button{padding:7px 8px}
}

/* ---------- type ---------- */
.kicker{font-size:12.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent-text)}
.h-sec{font:600 clamp(30px,4.2vw,50px)/1.08 var(--font-display);letter-spacing:-.012em;max-width:22ch;margin-top:12px;text-wrap:balance}
.sec-lede{margin-top:16px;max-width:56ch;color:var(--text-secondary);font-size:18px}
.sec{padding:clamp(80px,11vw,140px) 0}
.sec-head{margin-bottom:clamp(36px,5vw,56px)}

/* ---------- reveal choreography ---------- */
.r{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.r.in{opacity:1;transform:none}
.r.in.done{transition-delay:0s}

/* ---------- HERO (autoplay loop, one viewport; same behaviour as Sidex.EsmeraldsGlass) ---------- */
/* The film plays on its own and loops. Timed captions sit in the calm left lane (top lane on phones,
   where the portrait file keeps the paper stack free at the bottom). The CTAs never move. */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:var(--navy-3);color:#F2F4F7}
.hero .stage,.hero .caps,.hero .media,.hero .poster,#heroVideo{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.stage{position:absolute;inset:0;overflow:hidden}
.media{position:absolute;inset:0;pointer-events:none;--pos:62% 50%}
.poster{position:absolute;inset:0;background-position:var(--ppos,var(--pos));background-size:cover;background-repeat:no-repeat}
html:not(.js) .poster{background-image:url("img/hero-poster.jpg?v=3")}
#heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--vpos,var(--pos));opacity:0;transition:opacity .8s var(--ease-out);transform:translateZ(0)}
.hero.playing #heroVideo{opacity:1}
.hero.dip #heroVideo{opacity:0;transition:opacity .45s var(--ease-out)}
.hero.video-failed #heroVideo{display:none}
/* Light veils only: the footage stays crisp. A soft left lane for the text, nothing over the right half. */
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,12,26,.56) 0%,rgba(6,12,26,.3) 30%,rgba(6,12,26,0) 52%),
  linear-gradient(180deg,rgba(6,12,26,.42) 0%,rgba(6,12,26,0) 16%)}
.hero-lane{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;
  width:min(1320px,100%);margin-inline:auto;padding:calc(var(--nav-h) + 32px) var(--gutter) 96px;text-shadow:var(--tshadow);pointer-events:none}
.hero-lane .caps,.hero-lane .cta-row{pointer-events:auto}
.caps{display:grid;width:min(48vw,640px)}
.cap{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out),visibility 0s linear .6s}
.cap.on{opacity:1;visibility:visible;transition:opacity .35s var(--ease-out),visibility 0s}
.cap .kicker{margin-bottom:18px}
.h-hero{font:700 clamp(40px,5.2vw,76px)/1.03 var(--font-display);letter-spacing:-.018em;max-width:15ch;text-wrap:balance}
.h-band{font:600 clamp(36px,4.6vw,64px)/1.06 var(--font-display);letter-spacing:-.015em;max-width:15ch;text-wrap:balance}
.hero .sub{margin-top:20px;font-size:clamp(17px,1.45vw,20px);line-height:1.55;max-width:40ch;color:rgba(242,244,247,.94)}
.chip{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(8,14,30,.55);border:1px solid rgba(212,169,79,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#E7CF9A;text-shadow:0 1px 3px rgba(5,5,10,.85)}
.hero-lane .cta-row{display:inline-flex;flex-wrap:wrap;gap:12px;align-self:flex-start;margin-top:clamp(40px,8vh,96px)}
.hero-lane .btn{text-shadow:none}
.call-short{display:none}
/* Split text (built by site.js) */
.vis{display:block}
.w{display:inline-block;white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Caption entrances, triggered by video time. Leaving: the caption fades as a whole, then its parts
   reset silently (0s transition after the fade) so the next entrance starts clean. */
.cap .w,.cap .sub,.cap .kicker,.cap .vis{transition:opacity 0s linear .6s,transform 0s linear .6s}
/* intro: drift down by word, the papers falling */
.c0 .w,.c1 .w{opacity:0;transform:translateY(-.24em)}
.c0.on .w,.c1.on .w{opacity:1;transform:none;transition:opacity .8s var(--ease-out) calc(var(--th,0)*1.4s + .2s),transform 1s var(--ease-out) calc(var(--th,0)*1.4s + .2s)}
.c0 .kicker{opacity:0;transform:translateY(-10px)}
.c0.on .kicker{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
/* approach from depth: the camera easing toward the desk */
.c2 .vis{opacity:0;transform:scale(.9);transform-origin:left bottom}
.c2.on .vis{opacity:1;transform:none;transition:opacity 1s var(--ease-out) .1s,transform 1.8s var(--ease-out) .1s}
/* settle: word rise into a staged arrival, the stack at rest */
.c3 .w{opacity:0;transform:translateY(.24em)}
.c3.on .w{opacity:1;transform:none;transition:opacity .8s var(--ease-out) calc(var(--th,0)*1.4s + .1s),transform 1s var(--ease-out) calc(var(--th,0)*1.4s + .1s)}
.c3 .sub{opacity:0;transform:translateY(12px)}
.c3.on .sub{opacity:1;transform:none;transition:opacity .8s var(--ease-out) 1s,transform 1s var(--ease-out) 1s}
/* Phones and portrait tablets: captions at the top over the calm wall, CTAs at the bottom in one row */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){
  .scrim{background:
    linear-gradient(180deg,rgba(6,12,26,.62) 0%,rgba(6,12,26,.38) 30%,rgba(6,12,26,0) 50%,rgba(6,12,26,0) 76%,rgba(6,12,26,.5) 100%)}
  .hero-lane{justify-content:space-between;padding:calc(var(--nav-h) + 22px) var(--gutter) calc(22px + var(--tc-bottom-bar) + env(safe-area-inset-bottom,0px))}
  .caps{width:100%;max-width:600px}
  .cap{align-self:start}
  .hero-lane .h-hero{font-size:clamp(34px,9vw,60px);max-width:16ch}
  .hero-lane .h-band{font-size:clamp(32px,8.4vw,54px);max-width:17ch}
  .hero .sub{font-size:16.5px}
  .hero-lane .cta-row{margin-top:0;display:grid;grid-template-columns:1fr auto auto;width:100%;max-width:560px}
  .hero-lane .cta-row .btn{min-height:50px;padding-inline:1.1em}
  .hero-lane .call-full{display:none}
  .hero-lane .call-short{display:inline}
}
/* Phones: the fixed bottom bar already carries "Call" and "Start a process" */
@media (max-width:720px){.hero-lane .cta-row{display:none}}
/* Portrait phones get the portrait file (hero-mobile.mp4, hero-poster-mobile.jpg): no side crop */
@media (orientation:portrait) and (max-width:820px){
  .media{--pos:50% 50%}
  html:not(.js) .poster{background-image:url("img/hero-poster-mobile.jpg?v=3")}
}
/* Landscape phones: short viewport, keep everything on one screen */
@media (orientation:landscape) and (max-height:560px){
  .hero{min-height:340px}
  .hero-lane{justify-content:flex-end;padding-top:calc(var(--nav-h) + 12px);padding-bottom:22px}
  .caps{width:min(58vw,560px)}
  .cap .kicker,.cap .sub{display:none}
  .hero-lane .h-hero{font-size:clamp(24px,7.5vh,40px);max-width:20ch}
  .hero-lane .h-band{font-size:clamp(22px,7vh,36px);max-width:20ch}
  .hero-lane .cta-row{margin-top:14px;gap:10px}
}

/* ---------- KPIs ---------- */
.kpis{padding:clamp(48px,6vw,72px) 0;border-bottom:1px solid var(--line)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.kpi{padding:6px 0 6px 20px;border-left:2px solid var(--accent-muted)}
.kpi-n{font:600 clamp(40px,4.4vw,58px)/1 var(--font-display);color:var(--text-primary)}
.kpi-plus{color:var(--accent-text)}
.kpi-l{margin-top:10px;color:var(--text-secondary);font-size:15.5px;max-width:22ch}
@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr);row-gap:34px}}
/* Fifth KPI: the average client rating, only when there are approved reviews */
.kpi-grid:has(> .kpi-rating:not([hidden])){grid-template-columns:repeat(5,1fr)}
.kpi-rating{color:inherit;text-decoration:none}
.kpi-rating[hidden]{display:none}
.kpi-rating .kpi-n{display:flex;align-items:center;gap:.14em}
.kpi-star{width:.62em;height:.62em;fill:var(--accent);flex:none}
.kpi-rating:hover .kpi-l{color:var(--text-primary)}
@media (max-width:1100px){.kpi-grid:has(> .kpi-rating:not([hidden])){grid-template-columns:repeat(3,1fr);row-gap:34px}}
@media (max-width:900px){.kpi-grid:has(> .kpi-rating:not([hidden])){grid-template-columns:repeat(2,1fr)}.kpi-rating{grid-column:1/-1}}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;height:100%;text-align:left;padding:26px 24px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-1);cursor:pointer;overflow:hidden;transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.svc-btn::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.svc-btn:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--accent-muted)}
.svc-btn:hover::before,.svc-btn:focus-visible::before{transform:scaleX(1)}
.svc-ico{width:40px;height:40px;fill:none;stroke:var(--accent-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-ico path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-soft);transition-delay:calc(var(--i,0) * 70ms + .2s)}
.svc.in .svc-ico path{stroke-dashoffset:0}
.svc-t{margin-top:18px;font:600 20px/1.2 var(--font-display);color:var(--text-primary)}
.svc-d{margin-top:8px;color:var(--text-secondary);font-size:15.5px;line-height:1.5;flex:1}
.svc-go{margin-top:18px;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-text);display:inline-flex;align-items:center;gap:8px}
.svc-go::after{content:"";width:18px;height:1.5px;background:currentColor;transition:transform var(--t-med) var(--ease-out);transform-origin:left}
.svc-btn:hover .svc-go::after{transform:scaleX(1.7)}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.svc-grid{grid-template-columns:1fr}.svc-btn{padding:20px}}

/* ---------- who (tabs) ---------- */
.who{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--panel-2) 70%,transparent) 30%,color-mix(in srgb,var(--panel-2) 70%,transparent) 70%,transparent)}
.tab-list{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-1);margin-bottom:28px}
.tab-list [role="tab"]{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;padding:11px 20px;border-radius:999px;font-weight:600;font-size:15px;color:var(--text-secondary);transition:color var(--t-med) var(--ease-out)}
.tab-list [role="tab"][aria-selected="true"]{color:var(--canvas)}
.tab-ink{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:var(--tw,100px);border-radius:999px;background:var(--text-primary);transform:translateX(var(--tx,5px));transition:transform .5s var(--ease-out),width .5s var(--ease-out)}
.tab-panel{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.tab-panel:not([hidden]){animation:panel-in .6s var(--ease-out) both}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.who-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-2);aspect-ratio:3/2;background:var(--navy)}
.who-img img{width:100%;height:100%;object-fit:cover}
.who-list{display:grid;gap:2px}
.who-list li{position:relative;padding:15px 0 15px 34px;border-bottom:1px solid var(--line);font-size:18px;font-weight:500}
.who-list li::before{content:"";position:absolute;left:4px;top:50%;width:12px;height:12px;transform:translateY(-50%) rotate(45deg);border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
@media (max-width:860px){.tab-panel{grid-template-columns:1fr}.tab-list{display:flex;width:100%}.tab-list [role="tab"]{flex:1;padding:11px 10px;font-size:14px}}

/* ---------- the interactive moment ---------- */
.order{background:var(--navy);color:#F2F4F7;position:relative;overflow:hidden}
.order .kicker{color:#E7CF9A}
.order .sec-lede{color:rgba(242,244,247,.78)}
.order::before{content:"";position:absolute;inset:0;background:url("img/hero-ending-1280.jpg?v=3") center/cover;opacity:.16;pointer-events:none}
.order-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:center}
.order-stage{position:relative;height:440px;border-radius:22px;background:radial-gradient(ellipse at 50% 30%,rgba(212,169,79,.16),transparent 62%),linear-gradient(180deg,rgba(242,244,247,.05),rgba(242,244,247,.02));border:1px solid rgba(242,244,247,.1);overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pile{position:absolute;left:50%;top:44%;width:0;height:0}
.doc{position:absolute;left:-78px;top:-98px;width:156px;height:196px;border-radius:10px;background:#FBFCFD;box-shadow:0 10px 28px rgba(0,0,0,.35);padding:14px;display:flex;flex-direction:column;gap:9px;
  transform:translate(calc(var(--sx)*(1 - var(--p)) + var(--tx)*var(--p)),calc(var(--sy)*(1 - var(--p)) + var(--ty)*var(--p))) rotate(calc(var(--sr)*(1 - var(--p)) + var(--tr)*var(--p)))}
.doc i{display:block;height:6px;border-radius:3px;background:#D5DBE4}
.doc i:nth-child(odd){width:72%}
.doc-tag{align-self:flex-start;font-size:11px;color:#0E1E3A;background:#F1E3C3;padding:3px 7px;border-radius:5px;letter-spacing:.08em}
.doc-receipt{width:118px;left:-59px;height:176px;border-radius:4px}
.doc-id{height:112px;top:-56px;background:#E9EDF3}
.doc-id b{display:block;width:34px;height:34px;border-radius:50%;background:#C7CFDB}
.d1{--sx:-190px;--sy:-40px;--sr:-14deg;--tx:-6px;--ty:-8px;--tr:0deg;z-index:5}
.d2{--sx:150px;--sy:-70px;--sr:12deg;--tx:-3px;--ty:-5px;--tr:0deg;z-index:4}
.d3{--sx:-70px;--sy:80px;--sr:22deg;--tx:0px;--ty:-2px;--tr:0deg;z-index:3}
.d4{--sx:190px;--sy:70px;--sr:-9deg;--tx:3px;--ty:40px;--tr:0deg;z-index:6}
.d5{--sx:30px;--sy:-120px;--sr:-26deg;--tx:5px;--ty:1px;--tr:0deg;z-index:2}
.folder{position:absolute;left:-100px;top:-78px;width:200px;height:170px;border-radius:12px;background:linear-gradient(180deg,#1A2F57,#12213B);border:1px solid rgba(212,169,79,.4);z-index:1;opacity:var(--p);transform:translateY(calc((1 - var(--p))*30px)) scale(calc(.9 + .1*var(--p)))}
.folder-tab{position:absolute;left:14px;top:-12px;width:70px;height:16px;border-radius:6px 6px 0 0;background:#1A2F57;border:1px solid rgba(212,169,79,.4);border-bottom:0}
.proc-card{position:absolute;right:22px;top:22px;width:210px;padding:14px 16px;border-radius:14px;background:rgba(8,14,30,.72);border:1px solid rgba(212,169,79,.35);backdrop-filter:blur(8px);--pc:clamp(0,(var(--p) - .55)*3,1);opacity:var(--pc);transform:translateY(calc((1 - var(--pc))*12px))}
.proc-num{font-size:11px;color:#E7CF9A}
.proc-t{margin-top:4px;font:600 16px/1.2 var(--font-display)}
.proc-steps{margin-top:12px;display:grid;gap:8px;font-size:13.5px}
.ps{display:flex;align-items:center;gap:10px;opacity:.45;transition:opacity .4s var(--ease-out)}
.ps-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid #E7CF9A;transition:background-color .4s var(--ease-out),transform .4s var(--ease-out)}
.order-stage.s1 .s1,.order-stage.s2 .s2,.order-stage.s3 .s3,.order-stage.s2 .s1,.order-stage.s3 .s1,.order-stage.s3 .s2{opacity:1}
.order-stage.s1 .s1 .ps-dot,.order-stage.s2 .s2 .ps-dot,.order-stage.s3 .s3 .ps-dot,.order-stage.s2 .s1 .ps-dot,.order-stage.s3 .s1 .ps-dot,.order-stage.s3 .s2 .ps-dot{background:#D4A94F}
.order-stage.s3 .s3 .ps-dot{background:#5FC79A;border-color:#5FC79A;transform:scale(1.25)}
.hold-btn{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:92px;height:92px;border-radius:50%;border:0;background:rgba(242,244,247,.08);color:#F2F4F7;cursor:pointer;display:grid;place-items:center;transition:background-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.hold-btn:hover{background:rgba(242,244,247,.14)}
.hold-btn.holding{transform:translateX(-50%) scale(.95)}
.hold-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke:rgba(242,244,247,.22);stroke-width:2.5}
.hold-ring .hold-fill{stroke:#D4A94F;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.hold-txt{position:relative;font:600 13px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.order-stage.complete .hold-btn{opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out)}
.order-done{position:absolute;left:24px;right:24px;bottom:30px;text-align:center;font:600 18px/1.4 var(--font-display);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out) .2s,transform .6s var(--ease-out) .2s}
.order-stage.complete .order-done{opacity:1;transform:none}
@media (max-width:900px){.order-grid{grid-template-columns:1fr}.order-stage{height:430px}}
@media (max-width:520px){.doc{width:124px;height:160px;left:-62px;top:-80px}.doc-receipt{width:96px;left:-48px;height:142px}.doc-id{height:92px;top:-46px}.folder{width:160px;left:-80px;height:140px;top:-64px}.d1{--sx:-110px}.d2{--sx:100px}.d4{--sx:110px}.proc-card{right:12px;top:12px;width:180px}}

/* ---------- how it works: the status rail (signature) ---------- */
.how-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,6vw,90px);align-items:start}
.how .sec-head{position:sticky;top:calc(var(--nav-h) + 40px)}
.how .sec-head .cta-trio{margin-top:28px}
/* Start a process · Call · WhatsApp, always together */
.cta-trio{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rail{position:relative;display:grid;gap:clamp(34px,5vw,56px);padding-left:56px}
.rail-line{position:absolute;left:14px;top:8px;bottom:8px;width:4px;height:calc(100% - 16px);overflow:visible}
.rail-track{stroke:var(--line);stroke-width:2;vector-effect:non-scaling-stroke}
/* No non-scaling-stroke on the ink: with the dash measured on pathLength it broke the line into pieces. The
   SVG is only stretched vertically, so a vertical line keeps its 3px width anyway. */
.rail-ink{stroke:var(--accent);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0))}
.step{position:relative}
.step-node{position:absolute;left:-51px;top:4px;width:18px;height:18px;transform:rotate(45deg);border:2px solid var(--line-strong);background:var(--canvas);transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.step.lit .step-node{background:var(--accent);border-color:var(--accent);transform:rotate(45deg) scale(1.12)}
.step-n{font-size:12px;color:var(--accent-text)}
.step-t{margin-top:6px;font:600 25px/1.2 var(--font-display)}
.step-d{margin-top:8px;color:var(--text-secondary);max-width:44ch}
@media (max-width:900px){.how-grid{grid-template-columns:1fr}.how .sec-head{position:static}}

/* ---------- client band: a quiet way back into the portal for people who already have an account ---------- */
.client-band{padding:clamp(40px,5vw,56px) 0;background:var(--panel-2);border-block:1px solid var(--line)}
.client-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.client-copy{max-width:56ch}
.client-t{font:600 clamp(21px,2.3vw,28px)/1.25 var(--font-display);letter-spacing:-.01em}
.client-d{margin-top:6px;color:var(--text-secondary);font-size:15.5px}
.client-btn{flex:none}
@media (max-width:640px){.client-in{flex-direction:column;align-items:stretch;text-align:center}.client-btn{width:100%}}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(36px,7vw,110px);align-items:center}
.about-photo{position:relative;width:min(420px,78vw);aspect-ratio:1;margin:18px}
.about-photo img{width:100%;height:100%;object-fit:cover;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform 1.2s var(--ease-out)}
.about-photo:hover img{transform:scale(1.02)}
.about-frame{position:absolute;inset:-18px;width:calc(100% + 36px);height:calc(100% + 36px);max-width:none;overflow:visible;pointer-events:none;fill:none;stroke:var(--accent);stroke-width:.5;vector-effect:non-scaling-stroke}
.draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease-soft) .3s}
.in .draw,.draw.in{stroke-dashoffset:0}
.about-text{margin-top:20px;font:500 clamp(20px,2vw,25px)/1.5 var(--font-display);max-width:34ch}
.about-sign{margin-top:24px;display:flex;align-items:baseline;gap:14px}
.about-name{font:600 22px/1 var(--font-display)}
.about-role{font-size:12px;color:var(--text-secondary);text-transform:uppercase}
.about-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;justify-items:center;text-align:left}.about-copy{width:100%}}

/* ---------- reviews ---------- */
.reviews-avg{font-weight:600;color:var(--text-primary)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* 1, 2 or 4 reviews: two columns, so no card is left alone on its row */
.reviews-grid:has(> :only-child),.reviews-grid:has(> :nth-child(2):last-child),.reviews-grid:has(> :nth-child(4):last-child){grid-template-columns:1fr 1fr}
.rcard{padding:24px 22px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:14px}
.rcard-stars{display:flex;gap:3px}
.rcard-stars svg{width:17px;height:17px;fill:var(--line-strong);flex:none}
.rcard-stars svg.on{fill:var(--accent)}
.rcard-body{color:var(--text-primary);font-size:15.5px;line-height:1.55;flex:1}
.rcard-foot{font-size:13px;color:var(--text-secondary)}
.rcard-name{font-weight:600;color:var(--text-primary)}
.reviews-empty{padding:32px 24px;border-radius:var(--radius);border:1.5px dashed var(--line-strong);text-align:center;color:var(--text-secondary);font-size:15.5px}
.reviews-cta{margin-top:28px;display:flex;justify-content:center}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.reviews-grid{grid-template-columns:1fr}}

/* ---------- news / tax calendar ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ncard{position:relative;padding:26px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-1);display:flex;flex-direction:column;overflow:hidden}
.ncard-img{margin:-26px -24px 20px;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.ncard-img img{width:100%;height:100%;object-fit:cover}
.ncard-date{font-size:12px;text-transform:uppercase;color:var(--accent-text)}
.ncard-t{margin-top:10px;font:600 22px/1.25 var(--font-display)}
.ncard-d{margin-top:10px;color:var(--text-secondary);font-size:15.5px}
.ncard-more{align-self:flex-start;margin-top:16px;font-weight:600;color:var(--accent-text);display:inline-flex;align-items:center;gap:8px}
.ncard-more::after{content:"";width:18px;height:1.5px;background:currentColor;transition:transform var(--t-med) var(--ease-out);transform-origin:left}
.ncard-live{cursor:pointer;transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.ncard-live:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--accent-muted)}
.ncard-live:hover .ncard-more::after{transform:scaleX(1.7)}
.ncard-live .ncard-img img{transition:transform 1.2s var(--ease-out)}
.ncard-live:hover .ncard-img img{transform:scale(1.04)}
.ncard-link{color:inherit;text-decoration:none}
.ncard-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ncard-link:focus-visible{outline:none}
.ncard-live:focus-within{outline:2.5px solid var(--focus);outline-offset:3px}
/* The dialog itself never scrolls: only the article does, so the close button stays in the top right corner */
.news-dlg{width:min(760px,calc(100% - 24px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:18px;background:var(--panel);color:var(--text-primary);box-shadow:var(--shadow-2);overflow:hidden}
.news-dlg[open]{display:flex;flex-direction:column}
.news-dlg::backdrop{background:rgba(6,12,26,.6);backdrop-filter:blur(4px)}
.news-dlg[open]{animation:panel-in .4s var(--ease-out) both}
.news-close{position:absolute;right:26px;top:14px;z-index:2;width:44px;height:44px;background:var(--panel);color:var(--text-primary);border-color:var(--line);box-shadow:var(--shadow-1)}
.news-close:hover{border-color:var(--text-primary)}
.news-art{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(22px,4vw,44px);border-radius:inherit;
  /* A slim scrollbar on a transparent track, kept clear of the corners, so all four corners read rounded */
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text-secondary) 45%,transparent) transparent}
.news-art::-webkit-scrollbar{width:8px}
.news-art::-webkit-scrollbar-track{background:transparent;margin-block:18px}
.news-art::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-secondary) 45%,transparent);border-radius:8px}
.news-art-img{margin:calc(-1*clamp(22px,4vw,44px)) calc(-1*clamp(22px,4vw,44px)) 24px;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.news-art-img img{width:100%;height:100%;object-fit:cover}
.news-art-t{margin-top:10px;font:600 clamp(26px,3.4vw,36px)/1.15 var(--font-display)}
.news-art-body{margin:18px 0 26px;display:grid;gap:14px;color:var(--text-secondary);max-width:68ch}
.news-art-body h2,.news-art-body h3{margin-top:8px;font:600 22px/1.3 var(--font-display);color:var(--text-primary)}
.news-art-body ul,.news-art-body ol{padding-left:1.3em;display:grid;gap:6px}
.news-art-body ul{list-style:disc}.news-art-body ol{list-style:decimal}
.news-art-body a{color:var(--accent-text);font-weight:600}
.news-art-body blockquote{margin:0;padding:4px 0 4px 18px;border-left:2px solid var(--accent);font-style:italic}
.news-art-body strong{color:var(--text-primary)}
.news-note{margin-top:22px;color:var(--text-secondary);font-size:15px}
@media (max-width:900px){.news-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,90px);align-items:start}
.faq .sec-head{position:sticky;top:calc(var(--nav-h) + 40px)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font:600 19px/1.35 var(--font-display)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:18px;height:18px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.8px;background:var(--accent-text);transition:transform var(--t-med) var(--ease-out)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa-a{padding:0 0 24px;color:var(--text-secondary);max-width:62ch}
.qa[open] .qa-a{animation:panel-in .45s var(--ease-out) both}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq .sec-head{position:static}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.contact-grid .sec-head{grid-column:1/-1;margin-bottom:0}
.contact-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.owner-card{display:flex;gap:18px;align-items:center;padding:20px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.owner-photo{width:84px;height:84px;object-fit:cover;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);flex:none}
.owner-name{font:600 22px/1.1 var(--font-display)}
.owner-role{margin-top:4px;font:500 12px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.owner-note{margin-top:6px;color:var(--text-secondary);font-size:15px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile-wide{grid-column:1/-1}
.tile{display:flex;align-items:center;gap:14px;width:100%;height:100%;padding:16px 18px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);text-decoration:none;text-align:left;cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
.tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.tile-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-text)}
.tile-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile-txt{display:flex;flex-direction:column;min-width:0}
.tile-k{font:500 12px/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}
.tile-v{margin-top:4px;font-weight:600;font-size:15.5px;overflow-wrap:anywhere}
/* The map card grows so the left column ends exactly where the form card ends */
.map-card{flex:1 1 auto;display:grid;grid-template-columns:minmax(200px,1.15fr) 1fr;gap:22px;align-items:center;padding:22px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.map-art{align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:0}
.fl-map{width:100%;height:100%;max-height:360px}
.fl-land{fill:color-mix(in srgb,var(--accent) 16%,var(--panel-2));stroke:var(--line-strong);stroke-width:1.2}
:root[data-theme="dark"] .fl-land{fill:#22365C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fl-land{fill:#22365C}}
.fl-keys{fill:none;stroke:var(--line-strong);stroke-width:1.4;stroke-dasharray:2 4}
.fl-dot{fill:var(--accent)}
.fl-pulse{fill:var(--accent);opacity:.25;transform-origin:338.7px 323.6px;animation:pulse 3.2s var(--ease-out) infinite;animation-delay:-1s}
@keyframes pulse{0%{transform:scale(.4);opacity:.45}100%{transform:scale(1.6);opacity:0}}
.fl-lead{fill:none;stroke:var(--text-secondary);stroke-width:1.2}
.fl-lbl{font:600 22px var(--font-body);fill:var(--text-primary)}
.map-cap{font:600 18px/1.3 var(--font-display)}
.map-cap2{margin-top:4px;color:var(--text-secondary);font-size:15px}
.map-btn{margin-top:14px;min-height:40px;padding:.55em 1.1em;font-size:14.5px}
@media (max-width:980px){.contact-grid{grid-template-columns:minmax(0,1fr)}.map-card{flex:none}.fl-map{max-height:260px}}
@media (max-width:520px){.tiles{grid-template-columns:minmax(0,1fr)}.map-card{grid-template-columns:110px minmax(0,1fr);gap:16px;padding:18px}.map-card .btn{white-space:normal;text-align:center}}

.form-card{padding:clamp(22px,3vw,34px);border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.lead{display:grid;gap:14px}
.lead-title{font:600 26px/1.2 var(--font-display)}
.lead-lede{margin-top:8px;color:var(--text-secondary);font-size:15.5px}
.field{display:grid;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{font-weight:600;font-size:14.5px}
.field input,.field textarea,.field select,.nl-row input{width:100%;font:inherit;font-size:16px;color:var(--text-primary);background:var(--canvas);border:1.5px solid var(--line-strong);border-radius:10px;padding:12px 14px;transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.field input:focus,.field textarea:focus,.field select:focus,.nl-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.field textarea{resize:vertical;min-height:112px}
.select{position:relative}
.select select{appearance:none;padding-right:40px;cursor:pointer}
.select::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.hint-row{margin-top:-6px;font-size:13.5px;color:var(--text-secondary)}
.err{min-height:0;font-size:13.5px;color:var(--danger);font-weight:500}
.err:empty{display:none}
[aria-invalid="true"]{border-color:var(--danger)!important}
.form-alert{padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);font-weight:500}
.btn-send{justify-self:start;margin-top:4px;position:relative}
.send-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.busy .send-spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.sent{display:grid;justify-items:center;text-align:center;gap:10px;padding:40px 10px}
.sent-ico{width:56px;height:56px;animation:panel-in .6s var(--ease-out) both}
.sent-text{font:600 23px/1.3 var(--font-display)}
.sent-sub{color:var(--text-secondary)}
.sent-again{margin-top:8px;border:0;background:none;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}

/* ---------- final call ---------- */
.final{background:var(--navy);color:#F2F4F7;padding:clamp(80px,10vw,130px) 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:url("img/hero-ending-1280.jpg?v=3") 60% 50%/cover;opacity:.28}
.final::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 10%,color-mix(in srgb,var(--navy) 55%,transparent) 60%,transparent)}
.final-in{position:relative;z-index:1;display:grid;justify-items:start;gap:16px}
.final-mark{width:64px;height:64px}
.final-t{font:700 clamp(38px,5vw,64px)/1.05 var(--font-display);letter-spacing:-.015em}
.final-d{font-size:19px;color:rgba(242,244,247,.85);max-width:40ch;margin-bottom:12px}

/* ---------- newsletter ---------- */
.nl{padding:clamp(56px,7vw,84px) 0;border-top:1px solid var(--line)}
.nl-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.nl-title{margin-top:10px;font:600 clamp(26px,3vw,36px)/1.15 var(--font-display);max-width:20ch}
.nl-label{font-weight:600;font-size:14.5px}
.nl-row{display:flex;gap:10px;margin-top:8px}
.nl-row input{flex:1;min-width:0}
.nl-consent{margin-top:10px;font-size:13.5px;color:var(--text-secondary)}
.nl-done{font:600 20px/1.4 var(--font-display)}
@media (max-width:820px){.nl-in{grid-template-columns:1fr}}
@media (max-width:420px){.nl-row{flex-direction:column}}

/* ---------- footer ---------- */
.foot{background:var(--navy-3);color:#DCE2EC;padding:clamp(56px,7vw,84px) 0 calc(28px + var(--tc-bottom-bar))}
.sitemap{display:grid;grid-template-columns:1.3fr 1fr 1.5fr 1.2fr;gap:36px}
.brand-foot{color:#F2F4F7}
.foot-sign{margin:18px 0 20px;font:600 20px/1.3 var(--font-display);color:#F2F4F7}
.map-h{font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#E7CF9A;margin-bottom:16px}
.map-list{display:grid;gap:10px}
.map-list-2{grid-template-columns:1fr 1fr;column-gap:20px}
.map-list a,.map-place{color:#C3CCDA;text-decoration:none;font-size:15px;line-height:1.45}
.map-list a:hover{color:#F2F4F7;text-decoration:underline}
.foot-legal{margin-top:48px;padding-top:22px;border-top:1px solid rgba(242,244,247,.12);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;justify-content:space-between;font-size:14px;color:#9FACC0}
/* SIDEX signature: same proportions as Sidex.EsmeraldsGlass ("Powered by" / "Hecho por"), colours for the dark footer */
.powered{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#9FACC0;opacity:.85;transition:opacity .4s var(--ease-out)}
.powered:hover,.powered:focus-visible{opacity:1}
.pw-txt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.sidex-mark{width:16px;height:16px;flex:none}
.pw-name{font:600 12.5px/1 var(--font-body);letter-spacing:.14em;color:#F2F4F7}
@media (max-width:980px){.sitemap{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sitemap{grid-template-columns:1fr}.map-list-2{grid-template-columns:1fr 1fr}}

/* ---------- mobile bottom bar ---------- */
.mbar{display:none}
@media (max-width:720px){
  :root{--tc-bottom-bar:74px}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;align-items:center;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--canvas) 92%,transparent);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line),0 -10px 30px rgba(14,30,58,.08);transform:translateY(0);transition:transform var(--t-med) var(--ease-out)}
  .mbar-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-strong);text-decoration:none;font-weight:600}
  .mbar-call svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mbar-cta{flex:1;min-height:50px}
}
/* Narrow phones: Call and WhatsApp keep their icons, the text goes to the screen readers */
@media (max-width:430px){
  .mbar{gap:8px}
  .mbar-call{padding:0 15px}
  .mbar-call span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- Google Maps dialog ---------- */
.gmap-dlg{width:min(900px,calc(100% - 24px));padding:0;border:0;border-radius:18px;background:var(--panel);color:var(--text-primary);box-shadow:var(--shadow-2)}
.gmap-dlg::backdrop{background:rgba(6,12,26,.6);backdrop-filter:blur(4px)}
.gmap-dlg[open]{animation:panel-in .4s var(--ease-out) both}
.gmap-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 22px;border-bottom:1px solid var(--line)}
.gmap-title{font:600 20px/1.2 var(--font-display)}
.gmap-body{position:relative;aspect-ratio:16/10;background:var(--panel-2)}
.gmap-body.is-loading::before{content:attr(data-loading);position:absolute;inset:0;display:grid;place-items:center;color:var(--text-secondary);font-weight:600;animation:tc-map-pulse 1.4s ease-in-out infinite}
.gmap-body.is-loading iframe{opacity:0}
.gmap-body iframe{transition:opacity .3s}
@keyframes tc-map-pulse{50%{opacity:.45}}
.gmap-body iframe{width:100%;height:100%;border:0}
.gmap-foot{padding:12px 22px;font-weight:600}
.gmap-foot a{color:var(--accent-text)}

/* ---------- new version bar ---------- */
.reload-bar{position:fixed;left:50%;bottom:calc(20px + var(--tc-bottom-bar));z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border-radius:999px;background:var(--panel);color:var(--text-primary);border:1px solid var(--line);box-shadow:var(--shadow-2);animation:panel-in .5s var(--ease-out) both;font-weight:500;font-size:15px}
.reload-bar .btn{min-height:38px;padding:.5em 1em}

/* ---------- reduced motion: everything in its final state ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .r{opacity:1;transform:none}
  .svc-ico path,.draw{stroke-dashoffset:0}
  .rail-ink{stroke-dashoffset:0}
  .step .step-node{background:var(--accent);border-color:var(--accent)}
  .tab-ink{transform:translateX(var(--tx,5px))}
}