/* ============================================================
   AUTONOMA — Cinematic Stone design system
   Skin approved by Alex (style-lab Opção 2). Substance from autonoma-next.
   light = stone/ink · dark = deep ink · brass accent ≤5% · one giant serif
   Fonts self-hosted (/assets/fonts/fonts.css): Gambetta · General Sans · IBM Plex Mono
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --stone:#EFEBE4; --stone-2:#E6E1D8; --card:#F5F2EC;
  --ink:#171A1E; --ink-soft:#54575B; --ink-faint:#8F8B82;
  --brass:#A88544; --brass-on-dark:#C6A45E; --moss:#3E4A3D;
  --rule:#DAD4C8;
  /* semantic (flip per theme) */
  --page:#EFEBE4; --page-2:#E6E1D8; --surface:#F5F2EC;
  --tx:#171A1E; --tx-soft:#54575B; --tx-faint:#8F8B82;
  --line:#DAD4C8; --accent:#A88544;
  /* dark scene constants (always dark, both themes) */
  --scene-bg:#0e1013; --on-scene:#F7F4EE; --on-scene-soft:rgba(245,242,236,.82);
  /* legacy aliases (autonoma-next markup safety) */
  --navy:#171A1E; --navy-deep:#0e1013; --gold:#A88544; --gold-light:#C6A45E;
  --page-warm:#E6E1D8; --ink-mid:#54575B; --accent-ink:#A88544; --shadow:rgba(23,26,30,.08);
  --serif:'Gambetta',Georgia,serif;
  --sans:'General Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --page:#101317; --page-2:#0B0D11; --surface:#171B21;
  --tx:#ECE7DE; --tx-soft:#AEAAA1; --tx-faint:#6E6C64;
  --line:#262A31; --accent:#C6A45E;
  --navy:#ECE7DE; --navy-deep:#0B0D11; --gold:#C6A45E; --gold-light:#D6B978;
  --page-warm:#0B0D11; --ink-mid:#AEAAA1; --accent-ink:#C6A45E; --shadow:rgba(0,0,0,.4);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--page);color:var(--tx);line-height:1.62;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;position:relative;z-index:2}

/* label voices */
.eyebrow,.cap{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--tx-soft);display:inline-block}
.eyebrow{color:var(--accent)}
.coord{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--tx-faint)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:15px 28px;border-radius:2px;transition:transform .3s,background .3s,color .3s,border-color .3s;cursor:pointer;border:none}
.btn-gold,.btn-ink{background:var(--ink);color:var(--stone)}
.btn-gold:hover,.btn-ink:hover{transform:translateY(-2px);background:var(--brass);color:#fff}
:root[data-theme="dark"] .btn-gold,:root[data-theme="dark"] .btn-ink{background:var(--brass);color:var(--ink)}
:root[data-theme="dark"] .btn-gold:hover{background:var(--stone);color:var(--ink)}
.btn-stone{background:var(--stone);color:var(--ink)}.btn-stone:hover{background:var(--brass);color:#fff;transform:translateY(-2px)}
.btn-line,.btn-glass{background:rgba(255,255,255,.06);color:#F5F2EC;border:1px solid rgba(245,242,236,.45);backdrop-filter:blur(8px)}
.btn-line:hover,.btn-glass:hover{border-color:var(--brass-on-dark);color:var(--brass-on-dark)}
.btn-out{background:transparent;color:var(--tx);border:1px solid var(--tx)}
.btn-out:hover{background:var(--tx);color:var(--page)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .5s,box-shadow .5s,padding .5s;padding:24px 0}
.nav.scrolled{background:color-mix(in srgb,var(--page) 90%,transparent);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--line);padding:12px 0}
.nav-in{max-width:1240px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo .mark{width:34px;height:34px;flex:0 0 auto}
.nav-logo .wm{font-family:var(--sans);font-weight:600;font-size:.96rem;letter-spacing:.32em;text-transform:uppercase;line-height:1;color:#F5F2EC;text-shadow:0 1px 10px rgba(0,0,0,.4);transition:color .4s}
.nav.scrolled .nav-logo .wm{color:var(--tx);text-shadow:none}
.mark .cr{stroke:#F5F2EC;transition:stroke .3s}
.nav.scrolled .mark .cr{stroke:var(--tx)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,236,.82);transition:color .2s;text-shadow:0 1px 6px rgba(0,0,0,.4);position:relative}
.nav.scrolled .nav-links a{color:var(--tx-soft);text-shadow:none}
.nav-links a:hover,.nav-links a.active{color:var(--brass-on-dark)}
.nav.scrolled .nav-links a:hover,.nav.scrolled .nav-links a.active{color:var(--brass)}
/* dropdown */
.nav-drop{position:relative}
.nav-menu{position:absolute;top:calc(100% + 14px);left:-16px;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:0 20px 50px var(--shadow);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;z-index:120}
.nav-drop:hover .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{display:flex;align-items:center;gap:12px;padding:11px 14px;color:var(--tx-soft)!important;text-shadow:none!important;border-radius:2px;letter-spacing:.06em}
.nav-menu a:hover{background:var(--page-2);color:var(--tx)!important}
.nav-menu .ic{color:var(--brass);font-size:.6rem}
.nav-right{display:flex;align-items:center;gap:12px}
/* lang */
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;border:1px solid rgba(245,242,236,.36);border-radius:2px;padding:8px 12px;background:rgba(255,255,255,.06);color:rgba(245,242,236,.9);font-family:var(--mono);font-size:.64rem;cursor:pointer;transition:.3s}
.nav.scrolled .lang-btn{border-color:var(--line);background:var(--surface);color:var(--tx-soft)}
.lang-btn .flag{font-size:.9rem}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:0 20px 50px var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;z-index:130}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:flex;width:100%;align-items:center;gap:9px;padding:9px 12px;background:none;border:none;color:var(--tx-soft);font-family:var(--sans);font-size:.85rem;cursor:pointer;border-radius:2px;text-align:left}
.lang-menu button:hover,.lang-menu button.active{background:var(--page-2);color:var(--tx)}
.lang-menu .grp{font-family:var(--sans);font-weight:500;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-faint);padding:10px 12px 4px}
/* theme */
.theme-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(245,242,236,.36);background:rgba(255,255,255,.06);border-radius:2px;color:rgba(245,242,236,.9);cursor:pointer;transition:.3s}
.nav.scrolled .theme-btn{border-color:var(--line);background:var(--surface);color:var(--tx-soft)}
.theme-btn svg{width:17px;height:17px}
.theme-btn .i-sun{display:none}.theme-btn .i-moon{display:block}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
.nav-cta{padding:11px 20px}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamb span{width:22px;height:2px;background:#F5F2EC;border-radius:2px;transition:.3s}
.nav.scrolled .hamb span{background:var(--tx)}
/* páginas interiores (hero claro): nav começa com texto escuro — nunca invisível */
.nav.nav-lite:not(.scrolled) .nav-logo .wm{color:var(--tx);text-shadow:none}
.nav.nav-lite:not(.scrolled) .mark .cr{stroke:var(--tx)}
.nav.nav-lite:not(.scrolled) .nav-links a,.nav.nav-lite:not(.scrolled) .nav-links .drop-lbl{color:var(--tx-soft);text-shadow:none}
.nav.nav-lite:not(.scrolled) .nav-links a:hover,.nav.nav-lite:not(.scrolled) .nav-links a.active{color:var(--brass)}
.nav.nav-lite:not(.scrolled) .lang-btn{border-color:var(--line);background:var(--surface);color:var(--tx-soft)}
.nav.nav-lite:not(.scrolled) .theme-btn{border-color:var(--line);background:var(--surface);color:var(--tx-soft)}
.nav.nav-lite:not(.scrolled) .hamb span{background:var(--tx)}

/* ---------- HERO (home) ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--scene-bg)}
.hero-mesh{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 20% 20%,#1b2027,#0e1013 70%)}
.hero video,.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-still{background:var(--scene-bg) center/cover no-repeat}
.hero-overlay,.hero-vig{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(10,11,13,.82) 0%,rgba(10,11,13,.42) 46%,rgba(10,11,13,.12) 72%,rgba(10,11,13,.42) 100%)}
.hero-content,.hero-inner{position:relative;z-index:2;width:100%}
.hero-badge{font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(245,242,236,.86);margin-bottom:22px;display:inline-flex;align-items:center;gap:8px}
.hero-badge .flags{font-size:1rem;letter-spacing:0}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1.06;letter-spacing:-.01em;color:#F7F4EE;max-width:17ch;text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero h1 em{font-style:italic;color:var(--brass-on-dark)}
.hero-sub{font-size:clamp(.98rem,1.25vw,1.1rem);font-weight:400;color:rgba(245,242,236,.9);margin:24px 0 30px;max-width:52ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.h-anim{opacity:0;filter:blur(11px);transform:translateY(14px)}

/* enhanced scroll cue (#2 — more prominent than next's) */
.scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(245,242,236,.75)}
.scrollcue span:first-child{font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase}
.scrollcue .mouse{width:24px;height:38px;border:1.5px solid rgba(245,242,236,.6);border-radius:14px;position:relative}
.scrollcue .mouse::before{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--brass-on-dark);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}60%{opacity:1;transform:translateY(8px)}100%{opacity:0;transform:translateY(12px)}}
.scrollcue .line{display:none}

/* ---------- interior page hero ---------- */
.hero-page{padding:150px 0 70px;background:var(--page-2);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero-page .back{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-soft)}
.hero-page .back:hover{color:var(--accent)}
.hero-page h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.01em;margin:14px 0 18px;max-width:20ch}
.hero-page h1 em{font-style:italic;color:var(--accent)}
.hero-page p{font-size:1.1rem;color:var(--tx-soft);max-width:56ch}
/* interior hero with full-bleed video (niche pages) */
.hero-page.hero-media{background:var(--scene-bg);border:none;padding:0;min-height:88vh;display:flex;align-items:flex-end}
.hero-page.hero-media video,.hero-page.hero-media .hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-page.hero-media .hero-vig{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,11,13,.35) 0%,rgba(10,11,13,.05) 42%,rgba(10,11,13,.78) 100%)}
.hero-page.hero-media .wrap{position:relative;z-index:2;padding-bottom:64px}
.hero-page.hero-media .back{color:rgba(245,242,236,.8)}
.hero-page.hero-media h1{color:#F7F4EE;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero-page.hero-media h1 em{color:var(--brass-on-dark)}
.hero-page.hero-media p{color:rgba(245,242,236,.9)}

/* ---------- keyword strip / marquee ---------- */
.strip,.marquee{background:var(--page);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;white-space:nowrap}
.stripe-track,.marquee-track{display:inline-flex;animation:marq 48s linear infinite;will-change:transform}
.stripe-track span,.marquee-track span{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--tx-soft);padding:0 28px;position:relative}
.stripe-track span::after,.marquee-track span::after{content:"◇";position:absolute;right:-4px;top:1px;color:var(--brass);font-size:.5rem;letter-spacing:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:132px 0}
.sec-warm,.sec-alt{background:var(--page-2)}
.sec-head{max-width:820px;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.01em}
.sec-head h2 em{font-style:italic;color:var(--accent)}
.sec-head p{margin-top:20px;font-size:1.08rem;font-weight:400;color:var(--tx-soft);max-width:56ch}
.sec-head.center p{margin-left:auto;margin-right:auto}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s ease,transform 1.1s ease,filter 1.1s ease;filter:blur(6px)}
.reveal.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.reveal,.h-anim{opacity:1!important;transform:none!important;filter:none!important}}

/* watermark texture bg for a section (Alex 2026-07-08: visíveis, não fantasma — Codex sitev2 artwork, cream + gold line-art) */
.wm-tex::before{content:"";position:absolute;inset:0;background:var(--wm-img,url('/ops/approval-gallery/assets/aut-sitev2-watermark-01.jpg')) center/cover no-repeat;opacity:.55;z-index:0;pointer-events:none}
:root[data-theme="dark"] .wm-tex::before{opacity:.1;mix-blend-mode:screen}

/* ---------- ROUTER DOORS ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.door{position:relative;overflow:hidden;padding:40px 32px 34px;background:var(--surface);border:1px solid var(--line);border-radius:3px;transition:transform .4s,border-color .4s,box-shadow .4s;min-height:280px;display:flex;flex-direction:column}
.door::before{content:"";position:absolute;inset:0;background:var(--door-tex) center/cover no-repeat;opacity:.16;z-index:0}
:root[data-theme="dark"] .door::before{opacity:.15;mix-blend-mode:screen}
.door:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 44px var(--shadow)}
.door>*{position:relative;z-index:1}
.dnum{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--accent);margin-bottom:20px}
.door h3{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.12;margin-bottom:12px}
.door p{font-size:.96rem;color:var(--tx-soft);flex:1}
.dcta{margin-top:20px;font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;gap:8px;align-items:center}
.door:hover .arw{transform:translateX(5px)}.arw{transition:transform .3s}

/* ---------- WHAT WE DO cards ---------- */
.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wcard{position:relative;overflow:hidden;padding:38px 30px;background:var(--surface);border:1px solid var(--line);border-radius:3px;transition:transform .4s,border-color .4s,box-shadow .4s}
.wcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 44px var(--shadow)}
.wcard.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brass) 16%,transparent),transparent 60%);opacity:0;transition:opacity .4s;z-index:0}
.wcard.spot:hover::before{opacity:1}
.wcard>*{position:relative;z-index:1}
.wn{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--accent);margin-bottom:16px}
.wcard h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.12;margin-bottom:10px}
.wcard p{font-size:.95rem;color:var(--tx-soft);margin-bottom:16px}
.more{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:2px;transition:gap .3s}
.more:hover{opacity:.75}

/* quiet ledger grid (opção-2 alt for what-we-do) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.cell{padding:42px 32px 42px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:background .35s}
.cell:nth-child(3n){border-right:none}
.cell:not(:nth-child(3n+1)){padding-left:32px}
.cell:hover{background:var(--surface)}
.cell .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--accent)}
.cell h3{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.08;margin:16px 0 8px}
.cell .meta{font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-faint);margin-bottom:12px}
.cell p{font-size:.95rem;color:var(--tx-soft)}

/* ---------- MOTION SHOWCASE ---------- */
.showcase{display:grid;grid-template-columns:1fr 1.2fr;background:var(--scene-bg);color:var(--on-scene);overflow:hidden}
.showcase-grid{display:contents}
.showcase-copy{padding:100px 60px;display:flex;flex-direction:column;justify-content:center}
.showcase-copy .eyebrow{color:var(--brass-on-dark);margin-bottom:18px}
.showcase-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.06;margin-bottom:16px;color:#F7F4EE}
.showcase-copy p{color:rgba(245,242,236,.82);max-width:44ch}
.showcase-video{position:relative;min-height:440px;background:#000}
.showcase-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showcase-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--scene-bg) 0%,transparent 22%)}

/* ---------- full-bleed SCENE band ---------- */
.scene{position:relative;height:78vh;min-height:520px;overflow:hidden;background:var(--scene-bg);display:flex;align-items:flex-end}
.scene video,.scene-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.scene-vig{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,11,13,.3) 0%,rgba(10,11,13,.05) 40%,rgba(10,11,13,.7) 100%)}
.scene-in{position:relative;z-index:2;width:100%;padding-bottom:60px}
.scene .cap,.scene .eyebrow{color:rgba(245,242,236,.8);margin-bottom:18px}
.scene h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.02;color:#F7F4EE;max-width:20ch;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.scene h2 em{font-style:italic;color:var(--brass-on-dark)}
.scene .coord{color:rgba(245,242,236,.6);margin-top:22px}

/* ---------- SCROLL-CINEMATIC (home — typographic scenes, no clips) ---------- */
.cine{position:relative}
.cine-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--scene-bg)}
.cine-scene{position:absolute;inset:0;opacity:0;pointer-events:none}
.cine-scene.on{opacity:1;pointer-events:auto}
/* imagem-câmara: full-bleed, travela por scroll (scale+translate via JS) */
.cine-scene .cine-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;background-size:cover;background-position:center;will-change:transform;transform:scale(1.35)}
.cine-scene .cine-vig{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,11,13,.35) 0%,rgba(10,11,13,.12) 30%,rgba(10,11,13,.55) 72%,rgba(10,11,13,.92) 100%)}
.cine-cap{position:absolute;z-index:2;inset:0;display:flex;align-items:center;text-align:center;will-change:transform,opacity}
.cine-cap .wrap{width:100%}
.cine-cap .eyebrow{color:var(--brass-on-dark);margin-bottom:20px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.cine-cap h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,6rem);line-height:1;color:#F7F4EE;max-width:15ch;margin:0 auto;text-shadow:0 3px 34px rgba(0,0,0,.6)}
.cine-cap h2 em{font-style:italic;color:var(--brass-on-dark)}
.cine-cap p{color:rgba(245,242,236,.92);max-width:50ch;margin:22px auto 0;font-size:1.12rem;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.cine-cap .cine-cta{margin-top:32px}
/* contador de cena (01 / 03) */
.cine-count{position:absolute;z-index:3;right:34px;top:calc(50% - 66px);transform:translateY(-100%);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:rgba(245,242,236,.8);text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.cine-count b{color:var(--brass-on-dark);font-weight:400}
.cine-prog{position:absolute;z-index:3;right:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.cine-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(245,242,236,.5);transition:.3s}
.cine-dot.on{background:var(--brass-on-dark);border-color:var(--brass-on-dark);transform:scale(1.25)}
.cine-track{height:360vh}

/* ---------- PROBLEM lines ---------- */
.pline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding-left .3s,border-color .3s}
.pline:first-of-type{border-top:1px solid var(--line)}
.pline:hover{padding-left:12px;border-color:var(--accent)}
.pline .q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.3;color:var(--tx)}
.pline .q b{display:block;font-family:var(--sans);font-style:normal;font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:10px}
.pline .go{font-size:1.6rem;color:var(--accent);transition:transform .3s}
.pline:hover .go{transform:translateX(6px)}

/* ---------- SERENITY / brand-art quote band (banner yt escuro, presença leve) ---------- */
.serenity{position:relative;padding:150px 0;overflow:hidden;background:var(--scene-bg);text-align:center;color:var(--on-scene)}
.serenity img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.6;z-index:0}
.serenity::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 46%,rgba(10,11,13,.32),rgba(10,11,13,.72))}
.serenity .wrap{z-index:2}
.serenity blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.6rem);line-height:1.14;color:#F7F4EE}
.serenity blockquote em{font-style:italic;color:var(--brass-on-dark)}
.serenity .attr{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,236,.7);margin-top:26px}

/* ---------- STEPS (how we work) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{padding-top:24px;border-top:1px solid var(--tx);transition:border-color .3s}
.step:hover{border-color:var(--accent)}
.sn,.step .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--accent)}
.step h4{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:14px 0 8px}
.step p{font-size:.92rem;color:var(--tx-soft)}

/* ---------- PROMISE (dark) — opção-2 skin: stamp art bottom-left ---------- */
.promise{background:var(--ink);color:var(--stone);position:relative;overflow:hidden}
:root[data-theme="dark"] .promise{background:#0B0D11}
.promise::before{content:"";position:absolute;inset:0;background:url('/ops/approval-gallery/assets/aut-util-dark-new-01.png') center/cover no-repeat;opacity:.2;mix-blend-mode:screen;pointer-events:none;z-index:0}
/* variante: textura kintsugi bem leve (Sobre) — texto por cima sempre legível */
.promise.p-kintsugi::before{inset:0;left:0;bottom:0;width:auto;height:auto;background:url('/ops/approval-gallery/assets/autonoma-banner-dark-yt-05.png') center/cover no-repeat;opacity:.14}
.promise.p-kintsugi::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,26,30,.55),rgba(23,26,30,.8))}
.promise .wrap{position:relative;z-index:2}
.promise .sec-head h2,.promise h2{color:#F7F4EE}.promise .sec-head h2 em{color:var(--brass-on-dark)}
.promise .eyebrow{color:var(--brass-on-dark)}
/* pull-quote discreto acima dos 5 princípios (migrado da secção serenity) */
.promise-quote{position:relative;z-index:2;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.22;color:#F7F4EE;max-width:24ch;margin:-28px 0 56px;padding-left:22px;border-left:2px solid var(--brass-on-dark)}
.promise-quote em{font-style:italic;color:var(--brass-on-dark)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;position:relative;z-index:2}
.pcell{border-top:1px solid rgba(245,242,236,.2);padding-top:22px;transition:border-color .3s}
.pcell:hover{border-color:var(--brass-on-dark)}
.pcell .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--brass-on-dark)}
.pcell h4{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.45rem;color:#F7F4EE;margin:12px 0}
.pcell p{font-size:.94rem;color:rgba(245,242,236,.78)}
/* 7th principle — full-width signature closing band (below the 3x2 grid) */
/* #07 — no box: the band flows straight out of the promise scene. A large gilded
   globe emerges from the SAME navy, text breathes on the clean left; the gold
   hairline above is the only separator. */
.pfinal{position:relative;z-index:2;margin-top:54px;padding:clamp(64px,8vw,104px) clamp(24px,5vw,64px);text-align:left;overflow:hidden;border-top:1px solid color-mix(in srgb,var(--brass-on-dark) 55%,transparent)}
/* the artwork — anchored right, dissolving into the scene navy on every edge via a
   radial mask (no rectangle, no seam → reads as part of the section, not a pasted block) */
.pfinal::before{content:"";position:absolute;inset:0;background:url('/ops/approval-gallery/assets/aut-util-dark-new-04.png') right center/cover no-repeat;opacity:.72;z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(125% 155% at 90% 50%,#000 0%,#000 40%,transparent 74%);mask-image:radial-gradient(125% 155% at 90% 50%,#000 0%,#000 40%,transparent 74%)}
/* the compass stamp stays — a faint watermark grounding the text side, never a 2nd focal point */
.pfinal::after{content:"";position:absolute;left:clamp(-44px,-2.4vw,-22px);bottom:-40px;width:clamp(150px,18vw,230px);aspect-ratio:1;background:url('/ops/approval-gallery/assets/aut-util-stamp-02.png') center/contain no-repeat;opacity:.05;z-index:0;pointer-events:none}
.pfinal-in{position:relative;z-index:1;max-width:34ch;margin:0}
.pfinal-n{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.34em;color:var(--brass-on-dark);opacity:.85;margin-bottom:20px}
.pfinal-t{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.08;color:var(--brass-on-dark);margin:0 0 18px}
.pfinal-p{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.62;color:rgba(245,242,236,.9)}
.pfinal.reveal{transition-duration:1.7s;transition-delay:.2s}
/* stronger initial blur/offset scoped to the pre-reveal state ONLY — without :not(.in)
   this rule (equal specificity, later in source than .reveal.in) kept overriding
   filter/transform, so the band stayed blurred after revealing. */
.pfinal.reveal:not(.in){filter:blur(10px);transform:translateY(20px)}
@media(max-width:720px){.pfinal{text-align:center;padding:clamp(52px,9vw,76px) 22px;margin-top:40px}.pfinal-in{max-width:100%;margin:0 auto}.pfinal::before{background-position:center center;opacity:.5;-webkit-mask-image:radial-gradient(112% 128% at 50% 50%,#000 0%,#000 42%,transparent 80%);mask-image:radial-gradient(112% 128% at 50% 50%,#000 0%,#000 42%,transparent 80%)}.pfinal::after{display:none}}

/* banner geo contido perto da entrada — banner INTEIRO visível, nunca cortado */
.geo-card{padding:26px 0 0;background:var(--page)}
.geo-card img{width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line);box-shadow:0 18px 44px var(--shadow)}

/* ---------- REGION (painel único full-bleed; a imagem troca por locale) ---------- */
.regions{position:relative}
.rp-panel{position:relative;min-height:92vh;overflow:hidden;background:#e9e3d8;display:flex;align-items:center}
/* duas camadas sobrepostas para o cross-fade suave ao trocar de língua */
.rp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;opacity:0;transition:opacity .6s ease;will-change:opacity;animation:rpKen 26s ease-in-out infinite alternate}
.rp-img.on{opacity:1}
@keyframes rpKen{from{transform:scale(1.02)}to{transform:scale(1.12)}}
/* scrim suave só do lado esquerdo, onde vive o texto */
.rp-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(244,240,232,.92) 0%,rgba(244,240,232,.55) 34%,rgba(244,240,232,0) 62%)}
.rp-cap{position:relative;z-index:2;width:100%}
.rp-cap .wrap{width:100%}
.rp-eyebrow{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);margin-bottom:22px;display:inline-flex;align-items:center;gap:12px}
.rp-eyebrow .rp-flag{font-size:1.15rem;letter-spacing:0}
.rp-cap h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.04;color:var(--ink);max-width:15ch;text-shadow:0 1px 22px rgba(244,240,232,.7)}
.rp-cap h2 em{font-style:italic;color:var(--brass)}
@media(prefers-reduced-motion:reduce){.rp-img{animation:none}}
@media(max-width:900px){
  .rp-panel{min-height:80vh}
  .rp-img{object-position:68% center}
  /* scrim um pouco mais forte no telemóvel para o texto respirar sobre o mapa */
  .rp-scrim{background:linear-gradient(90deg,rgba(244,240,232,.95) 0%,rgba(244,240,232,.7) 42%,rgba(244,240,232,.1) 78%)}
}

/* ---------- textura clara atrás dos heróis interiores (abertura de página) ---------- */
/* B) fundo (compasso/logo) mais visível; texto acima dele sem colidir */
.hero-page.hero-tex::before{content:"";position:absolute;inset:0;background:var(--hero-tex-img,url('/ops/approval-gallery/assets/aut-util-existing-light-01.png')) center/cover no-repeat;opacity:.66;z-index:0;pointer-events:none}
:root[data-theme="dark"] .hero-page.hero-tex::before{opacity:.12}
.hero-page.hero-tex .wrap{position:relative;z-index:1}
/* mobile: âncora o motivo (compasso) no canto inferior-direito, contido, com folga
   por baixo do texto — o texto "sobe" e deixa de assentar sobre o logo */
@media(max-width:768px){
  .hero-page.hero-tex{padding-bottom:118px}
  .hero-page.hero-tex::before{background-position:right bottom;background-size:auto 38%;opacity:.62}
  :root[data-theme="dark"] .hero-page.hero-tex::before{opacity:.16}
}

/* ---------- UNHURRY teaser (próximo projeto — misterioso, nada clicável) ---------- */
.unhurry-teaser{cursor:default}
.uh-soon{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);align-self:flex-start}
.uh-soon .uh-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:soonPulse 2.2s ease-out infinite}
@keyframes soonPulse{0%{box-shadow:0 0 0 0 rgba(168,133,68,.45)}70%{box-shadow:0 0 0 12px rgba(168,133,68,0)}100%{box-shadow:0 0 0 0 rgba(168,133,68,0)}}
@media(prefers-reduced-motion:reduce){.uh-soon .uh-dot{animation:none}}

/* ---------- HP-STRIP / GEO / STAMP ---------- */
.hp-strip{position:relative;padding:110px 0;overflow:hidden;background:var(--scene-bg);color:var(--on-scene)}
.hp-strip .bgtex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;z-index:0}
.hp-strip::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,11,13,.85),rgba(10,11,13,.55))}
.hp-strip .wrap{z-index:2}
.hp-strip .eyebrow{color:var(--brass-on-dark);margin-bottom:14px}
.hp-strip h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.1;color:#F7F4EE;max-width:20ch}
.hp-strip h3 em{font-style:italic;color:var(--brass-on-dark)}
.hp-strip p{color:rgba(245,242,236,.82);max-width:60ch;margin:18px 0 22px}
.hplink{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-on-dark);border-bottom:1px solid var(--brass-on-dark);padding-bottom:3px}
.geo{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden;background:var(--scene-bg);color:var(--on-scene)}
.geo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.5;z-index:0}
.geo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,11,13,.82),rgba(10,11,13,.4))}
.geo .geo-in{position:relative;z-index:2;width:100%}
.geo-copy{padding:60px 0}
.geo h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;color:#F7F4EE;max-width:18ch}
.geo p{color:rgba(245,242,236,.82);max-width:48ch;margin-top:16px}
.stamp-divider{padding:70px 0;background:var(--scene-bg);text-align:center;overflow:hidden}
.stamp-divider img{max-width:420px;width:70%;margin:0 auto;opacity:.9;object-fit:contain}

/* ---------- UNHURRY door ---------- */
.unhurry{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface);min-height:420px}
.unhurry-copy{padding:64px 54px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.unhurry-copy .eyebrow{color:var(--accent);margin-bottom:14px}
.unhurry-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;margin-bottom:14px}
.unhurry-copy p{color:var(--tx-soft);max-width:42ch;margin-bottom:22px}
.uhlink{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:3px;align-self:flex-start}
.unhurry-media{position:relative;overflow:hidden;background:var(--scene-bg)}
.unhurry-media video,.unhurry-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.unhurry-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 0%,transparent 30%)}

/* ---------- START (opção-2 dark contact — "Começar um projeto") ---------- */
.start{background:var(--ink);color:var(--stone);position:relative;overflow:hidden}
:root[data-theme="dark"] .start{background:#0B0D11}
.start::before{content:"";position:absolute;inset:0;background:url('/ops/approval-gallery/assets/aut-util-dark-new-02.png') center/cover no-repeat;opacity:.46;mix-blend-mode:screen;filter:contrast(1.14) brightness(1.06);pointer-events:none}
.start .wrap{position:relative;z-index:2}
.start .eyebrow{color:var(--brass-on-dark)}
.start h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.04;color:#F7F4EE;margin:16px 0 20px}
.start h2 em{font-style:italic;color:var(--brass-on-dark)}
.start .leadp{font-size:1.06rem;color:rgba(245,242,236,.85);max-width:44ch;margin-bottom:28px}
.start .trust span{color:rgba(245,242,236,.78)}
.start-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:rgba(245,242,236,.62);line-height:2;border-top:1px solid rgba(245,242,236,.2);padding-top:20px;margin-top:26px}
.start-note a{color:rgba(245,242,236,.62)}.start-note a:hover{color:var(--brass-on-dark)}
.start .socials a{border-color:rgba(245,242,236,.28);color:rgba(245,242,236,.75)}
.start .socials a:hover{border-color:var(--brass-on-dark);color:var(--brass-on-dark)}
.start .au-form{background:transparent;border:none;padding:0}
.start .fld label{color:var(--brass-on-dark)}
.start .fld input,.start .fld textarea{background:rgba(245,242,236,.05);border:none;border-bottom:1px solid rgba(245,242,236,.28);border-radius:0;padding:11px 2px;color:#F7F4EE}
.start .fld input:focus,.start .fld textarea:focus{border-color:var(--brass-on-dark)}
.start .btn-gold{background:var(--stone);color:var(--ink)}
.start .btn-gold:hover{background:var(--brass-on-dark);color:var(--ink)}
.start .form-note{color:rgba(245,242,236,.55)}
.start .form-ok{background:rgba(245,242,236,.05);border-color:var(--brass-on-dark);color:#F7F4EE}
.start .form-ok p{color:rgba(245,242,236,.82)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-lead .eyebrow{color:var(--accent)}
.contact-lead h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.04;margin-bottom:16px}
.contact-lead h2 em{font-style:italic;color:var(--accent)}
.contact-lead p{color:var(--tx-soft);max-width:44ch}
.trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
.trust span{font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--tx-soft)}
.socials{display:flex;gap:12px}
.socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:2px;color:var(--tx-soft);transition:.3s}
.socials a:hover{border-color:var(--accent);color:var(--accent)}
.socials a svg{width:18px;height:18px}
.au-form,form.au-form{display:flex;flex-direction:column;gap:18px;background:var(--surface);border:1px solid var(--line);padding:34px;border-radius:4px}
.fld label,.field label{font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px}
.fld input,.fld textarea,.field input,.field textarea{width:100%;background:var(--page);border:1px solid var(--line);border-radius:2px;padding:12px 14px;font-family:var(--sans);font-size:.98rem;color:var(--tx);transition:border-color .25s}
.fld input:focus,.fld textarea:focus,.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.fld textarea,.field textarea{resize:vertical;min-height:110px}
.form-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;color:var(--tx-faint);text-align:center}
.form-ok{display:none;padding:36px;text-align:center;border:1px solid var(--accent);border-radius:4px;background:var(--surface)}
.form-ok.show{display:block}
.form-ok h4{font-family:var(--serif);font-style:italic;font-size:1.5rem;margin-bottom:8px}
.form-ok p{color:var(--tx-soft)}
/* honest-submit error — injected via JS only when BOTH endpoints fail */
.form-err{display:none;padding:12px 14px;border:1px solid #B4552D;border-radius:4px;background:rgba(180,85,45,.08);color:var(--tx);font-size:.88rem;line-height:1.5}
.form-err.show{display:block}
.start .form-err{color:#F7F4EE;border-color:#C97B54;background:rgba(201,123,84,.14)}

/* ---------- SERVICE showcase (services.html redesign #9) ---------- */
.svc-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-tile{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--surface);display:flex;flex-direction:column;min-height:340px;transition:transform .4s,box-shadow .4s,border-color .4s}
.svc-tile:hover{transform:translateY(-5px);box-shadow:0 22px 50px var(--shadow);border-color:var(--accent)}
.svc-tile .svc-media{position:relative;height:170px;overflow:hidden;background:var(--scene-bg)}
.svc-tile .svc-media video,.svc-tile .svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-tile .svc-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.svc-tile .wn{margin-bottom:10px}
.svc-tile h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.1;margin-bottom:8px}
.svc-tile p{font-size:.92rem;color:var(--tx-soft);flex:1;margin-bottom:16px}
/* service detail block */
.svc-block{padding:100px 0;border-top:1px solid var(--line)}
.svc-detail{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.svc-detail.rev .svc-detail-media{order:-1}
.svc-detail-copy .wn{margin-bottom:14px}
.svc-detail-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.08;margin-bottom:14px}
.svc-detail-copy p{color:var(--tx-soft);margin-bottom:14px}
.svc-detail-media{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--scene-bg);min-height:360px}
.svc-detail-media video,.svc-detail-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.svc-niche-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.svc-niche-tags a,.svc-niche-tags span{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.04em;color:var(--tx-soft);border:1px solid var(--line);padding:6px 13px;border-radius:40px;transition:.3s}
.svc-niche-tags a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- DEMOS (services practical) ---------- */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.demo-copy .eyebrow{color:var(--accent)}
.demo-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1;margin:8px 0 12px}
.demo-copy p{color:var(--tx-soft)}
.wa-phone{max-width:340px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 20px 50px var(--shadow)}
.wa-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.wa-av,.cb-av{width:34px;height:34px;border-radius:50%;background:var(--brass);color:#fff;display:grid;place-items:center;font-weight:600;font-family:var(--serif)}
.wa-name{font-weight:600;font-size:.9rem}.wa-st{font-size:.72rem;color:var(--tx-soft)}
.wa-body{display:flex;flex-direction:column;gap:8px}
.wa-msg,.cb-msg{padding:9px 13px;border-radius:14px;font-size:.86rem;max-width:82%;line-height:1.4}
.wa-in,.cb-bot{background:var(--page-2);color:var(--tx);align-self:flex-start;border-bottom-left-radius:4px}
.wa-out,.cb-user{background:var(--brass);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.wa-badge{font-size:.68rem;color:var(--tx-faint);text-align:center;margin-top:6px;font-family:var(--mono)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba-card{padding:24px;border-radius:4px;border:1px solid var(--line);background:var(--surface)}
.ba-card.before{opacity:.72}.ba-card.after{border-color:var(--accent)}
.ba-lbl{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ba .stars{color:var(--brass);letter-spacing:2px;margin-bottom:8px}
.ba-card p{font-size:.9rem;color:var(--tx-soft)}

/* ---------- svc-mock — cada card de serviço mostra o próprio serviço ---------- */
.svc-mock{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:linear-gradient(135deg,var(--page-2),var(--surface))}
:root[data-theme="dark"] .svc-mock{background:linear-gradient(135deg,#12161B,#171B21)}
.mini-browser{width:88%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--scene-bg);box-shadow:0 14px 30px var(--shadow)}
.mini-browser .mb-bar{display:flex;gap:5px;padding:7px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.mini-browser .mb-bar i{width:7px;height:7px;border-radius:50%;background:var(--tx-faint);opacity:.55}
.mini-browser .mb-bar i:first-child{background:var(--brass);opacity:1}
.mini-browser img{width:100%;height:108px;object-fit:cover;display:block}
.mini-chat{width:82%;max-width:250px;display:flex;flex-direction:column;gap:8px}
.mini-chat .cb-msg{font-size:.8rem;box-shadow:0 6px 16px var(--shadow)}
.mini-wa{width:82%;max-width:250px;display:flex;flex-direction:column;gap:8px}
.mini-wa .wa-msg{font-size:.8rem;box-shadow:0 6px 16px var(--shadow)}
.svc-mock .rev-card{box-shadow:0 10px 26px var(--shadow)}
/* logo Autonoma no header do assistente */
.aw-logo{width:30px;height:30px;border-radius:50%;border:1px solid var(--brass);background:var(--page-2);display:grid;place-items:center;flex:0 0 auto}
/* moldura WhatsApp real */
.wa-frame{width:88%;max-width:270px;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 30px var(--shadow);background:#ECE5DD}
.wa-head{display:flex;align-items:center;gap:9px;padding:9px 13px;background:#075E54;color:#fff}
.wa-title{font-weight:600;font-size:.82rem;line-height:1.15}
.wa-sub{font-size:.64rem;opacity:.75}
.wa-chat{padding:12px 12px 10px;display:flex;flex-direction:column;gap:7px}
.wam{max-width:86%;padding:7px 11px;border-radius:9px;font-size:.8rem;line-height:1.4;color:#1B1B1B;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.wam.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.wam.out{background:#DCF8C6;align-self:flex-end;border-top-right-radius:2px}
.wam .ticks{font-style:normal;font-size:.66rem;color:#4FC3F7;margin-left:6px}
.wa-chat .wa-badge{color:#5b6b62}
.wa-av-green{width:34px;height:34px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:0 0 auto}
/* convite pós-serviço */
.invite-card{width:88%;max-width:262px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 12px 30px var(--shadow)}
.inv-tag{font-family:var(--sans);font-weight:600;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.inv-msg{font-size:.84rem;color:var(--tx-soft);line-height:1.5;margin-bottom:10px}
.mnt-mock{width:82%;max-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 10px 26px var(--shadow)}
.mnt-mock .row{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--tx-soft);padding:4px 0}
.mnt-mock .row b{color:#4CAF7D;font-weight:700}
.mnt-mock .up{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:9px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.66rem;color:var(--tx-faint)}
.mnt-mock .up i{width:8px;height:8px;border-radius:50%;background:#4CAF7D;box-shadow:0 0 7px #4CAF7D;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- phone-frame reel (IG card — 9:16 inside a device) ---------- */
.phone-reel{position:absolute;inset:0;display:grid;place-items:center;background:var(--scene-bg)}
.phone-reel::before{content:"";position:absolute;inset:0;background:url('/assets/images/site-exclusive/reel-greenpark-9x16-still.jpg') center/cover no-repeat;filter:blur(22px) brightness(.5);transform:scale(1.15)}
.phone-reel .phone{position:relative;height:86%;aspect-ratio:9/17.5;border-radius:22px;border:3px solid #2a2e34;background:#000;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.phone-reel .phone::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:34%;height:9px;border-radius:6px;background:#2a2e34;z-index:2}
.phone-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-reel .ig-tag{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--sans);font-weight:600;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,242,236,.9);background:rgba(10,11,13,.55);backdrop-filter:blur(6px);padding:4px 10px;border-radius:20px;white-space:nowrap}

/* ---------- assistant window (work card 02) ---------- */
.asst-win{width:100%;max-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 44px var(--shadow)}
.asst-win .aw-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--page-2);border-bottom:1px solid var(--line)}
.asst-win .aw-name{font-weight:600;font-size:.84rem}
.asst-win .aw-st{font-size:.68rem;color:var(--tx-soft)}
.asst-win .aw-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#4CAF7D;box-shadow:0 0 6px #4CAF7D}
.asst-win .cb-msgs{padding:14px}

/* ---------- review mock (work card 05) ---------- */
.rev-mock{width:100%;max-width:330px;display:flex;flex-direction:column;gap:10px}
.rev-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 10px 26px var(--shadow)}
.rev-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rev-avatar{width:30px;height:30px;border-radius:50%;background:var(--brass);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:.9rem}
.rev-name{font-weight:600;font-size:.84rem}
.rev-when{font-size:.68rem;color:var(--tx-faint)}
.rev-stars{color:var(--brass);letter-spacing:3px;font-size:.95rem}
.rev-stars .st{opacity:0;display:inline-block;transform:scale(.4)}
.rev-card.lit .st,.rev-stars.lit .st{animation:starpop .5s ease forwards}
.rev-card.lit .st:nth-child(2),.rev-stars.lit .st:nth-child(2){animation-delay:.15s}.rev-card.lit .st:nth-child(3),.rev-stars.lit .st:nth-child(3){animation-delay:.3s}.rev-card.lit .st:nth-child(4),.rev-stars.lit .st:nth-child(4){animation-delay:.45s}.rev-card.lit .st:nth-child(5),.rev-stars.lit .st:nth-child(5){animation-delay:.6s}
@keyframes starpop{to{opacity:1;transform:scale(1)}}
.rev-txt{font-size:.84rem;color:var(--tx-soft);margin-top:6px;line-height:1.5}
.rev-badge{align-self:center;font-family:var(--mono);font-size:.64rem;color:var(--tx-faint)}

/* ---------- WhatsApp live-run (messages appear in sequence) ---------- */
.wa-run .wa-msg{opacity:0;transform:translateY(8px)}
.wa-run .wa-msg.go{animation:waIn .45s ease forwards}
.wa-run .wa-badge{opacity:0;transition:opacity .5s}
.wa-run .wa-badge.go{opacity:1}
@keyframes waIn{to{opacity:1;transform:none}}
.wa-typing{display:inline-flex;gap:4px;padding:10px 13px;border-radius:14px;background:var(--page-2);align-self:flex-start;opacity:0}
.wa-typing.go{opacity:1}
.wa-typing i{width:6px;height:6px;border-radius:50%;background:var(--tx-faint);animation:tydot 1s infinite}
.wa-typing i:nth-child(2){animation-delay:.18s}.wa-typing i:nth-child(3){animation-delay:.36s}
@keyframes tydot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* ---------- WORK cards (#10) ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.work-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--surface);transition:transform .4s,box-shadow .4s,border-color .4s}
.work-card:hover{transform:translateY(-5px);box-shadow:0 22px 54px var(--shadow);border-color:var(--accent)}
.work-media{position:relative;height:280px;overflow:hidden;background:var(--scene-bg)}
.work-media video,.work-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.work-card:hover .work-media img,.work-card:hover .work-media video{transform:scale(1.05)}
.work-body{padding:26px 28px 30px}
.work-body .eyebrow{color:var(--accent);font-size:.62rem;margin-bottom:8px}
.work-body h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.1;margin-bottom:8px}
.work-body p{font-size:.94rem;color:var(--tx-soft)}
/* before/after slider card */
.ba-slider{position:absolute;inset:0}
.ba-slider .after-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-slider .before-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 50% 0 0)}
.ba-slider .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--brass-on-dark);z-index:3}
.ba-slider .handle::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;background:var(--brass);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.9rem}

/* ---------- LABS (#12 preserve + interactive) ---------- */
.lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.lab{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.lab-stage{position:relative;height:200px;overflow:hidden;background:var(--scene-bg);display:grid;place-items:center}
.lab-cursor{cursor:crosshair}
.lab-cursor .glow{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--brass-on-dark),transparent 60%);left:var(--lx,50%);top:var(--ly,50%);transform:translate(-50%,-50%);opacity:.6;pointer-events:none;filter:blur(6px)}
.lab-cursor .hint{position:relative;z-index:2;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.7)}
.lab-blur .word{font-family:var(--serif);font-size:2.4rem;color:#F7F4EE;filter:blur(9px);animation:labblur 3.4s ease-in-out infinite alternate}
@keyframes labblur{to{filter:blur(0)}}
.lab-grad .field{position:absolute;inset:0;background:linear-gradient(120deg,#1b2027,var(--moss),var(--brass));background-size:220% 220%;animation:labgrad 8s ease infinite;opacity:.7}
@keyframes labgrad{0%{background-position:0 0}50%{background-position:100% 100%}100%{background-position:0 0}}
.lab-grad .lbl{position:relative;z-index:2;font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#F7F4EE}
.lab-count{font-family:var(--serif);font-size:2.4rem;color:#F7F4EE}
.lab-count .num{color:var(--brass-on-dark)}
.lab-meta{padding:20px 22px 24px}
.lab-meta h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:6px}
.lab-meta p{font-size:.9rem;color:var(--tx-soft)}
.concept-note{display:flex;align-items:center;gap:14px;padding:22px 26px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--tx-soft);font-size:.95rem}
.concept-note .ic{color:var(--accent);font-size:1.1rem}
/* labs module catalog — every card carries a LIVE mini-demo */
.lab-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lab-mod{border:1px solid var(--line);border-radius:4px;background:var(--surface);transition:.3s;overflow:hidden}
.lab-mod:hover{border-color:var(--accent);transform:translateY(-3px)}
.lab-mod .lm-body{padding:18px 22px 22px}
.lab-mod h4{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin-bottom:6px}
.lab-mod p{font-size:.88rem;color:var(--tx-soft)}
.lab-mod .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.lm-stage{position:relative;height:150px;background:var(--scene-bg);overflow:hidden;display:grid;place-items:center;border-bottom:1px solid var(--line)}
/* 1 cinematic scroll — auto crossfade scenes */
.lm-cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:lmcine 7s infinite}
.lm-cine img:nth-child(2){animation-delay:3.5s}
@keyframes lmcine{0%,45%{opacity:1}55%,95%{opacity:0}100%{opacity:1}}
/* 2 text mask — image through giant letters */
.lm-mask span{font-family:var(--serif);font-weight:700;font-size:3.2rem;letter-spacing:.02em;background:url('/assets/images/site-exclusive/still-hotel-window.jpg') center/cover;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lmmaskpan 9s ease-in-out infinite alternate}
@keyframes lmmaskpan{to{background-position:70% 60%}}
/* 3 sticky stack — cards stack in loop */
.lm-stack{perspective:600px}
.lm-stack i{position:absolute;left:50%;top:50%;width:110px;height:70px;margin:-35px 0 0 -55px;border-radius:6px;background:var(--card);border:1px solid var(--brass);opacity:0;animation:lmstack 4.6s infinite}
.lm-stack i:nth-child(2){animation-delay:1.5s;background:#DED8CC}
.lm-stack i:nth-child(3){animation-delay:3s;background:#CFC8BA}
@keyframes lmstack{0%{opacity:0;transform:translateY(70px) scale(.9)}18%,60%{opacity:1;transform:translateY(0) scale(1)}80%,100%{opacity:0;transform:translateY(-16px) scale(.96)}}
/* 4 zoom parallax — layers follow pointer */
.lm-parallax{cursor:crosshair}
.lm-parallax .ly{position:absolute;inset:-8%;background:center/cover no-repeat;transition:transform .25s ease-out;will-change:transform}
.lm-parallax .ly.b{filter:brightness(.55)}
.lm-parallax .ly.f{display:grid;place-items:center;background:none}
.lm-parallax .ly.f span{font-family:var(--serif);font-size:1.5rem;color:#F7F4EE;text-shadow:0 2px 18px rgba(0,0,0,.7)}
/* 5 image trail */
.lm-trail{cursor:crosshair}
.lm-trail .tr{position:absolute;width:44px;height:30px;border-radius:3px;background:center/cover;pointer-events:none;animation:lmtrail .9s ease forwards}
@keyframes lmtrail{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6) translateY(8px)}}
.lm-trail .hint,.lm-parallax .hint{position:relative;z-index:2;font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.75);pointer-events:none}
/* 6 flip card */
.lm-flip{perspective:700px;cursor:pointer}
.lm-flip .fl{position:relative;width:130px;height:86px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,.1,.2,1)}
.lm-flip:hover .fl{transform:rotateY(180deg)}
.lm-flip .f1,.lm-flip .f2{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;display:grid;place-items:center;font-family:var(--serif);font-size:.9rem}
.lm-flip .f1{background:var(--card);color:var(--ink);border:1px solid var(--rule)}
.lm-flip .f2{background:var(--brass);color:#fff;transform:rotateY(180deg)}
/* 7 spotlight border */
.lm-spot{cursor:crosshair}
.lm-spot .sp{position:relative;width:150px;height:90px;border-radius:8px;background:#171B21;display:grid;place-items:center;color:rgba(245,242,236,.8);font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.lm-spot .sp::before{content:"";position:absolute;inset:-1.5px;border-radius:9px;padding:1.5px;background:radial-gradient(90px circle at var(--sx,50%) var(--sy,50%),var(--brass-on-dark),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* 8 kinetic marquee */
.lm-marq{white-space:nowrap}
.lm-marq .mq{display:inline-flex;animation:marq 14s linear infinite}
.lm-marq span{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:#F7F4EE;padding:0 22px}
.lm-marq span::after{content:"◇";color:var(--brass-on-dark);font-size:.7rem;margin-left:22px;font-style:normal}
/* 9 odometer */
.lm-count{font-family:var(--serif);font-size:2.2rem;color:#F7F4EE}
.lm-count b{color:var(--brass-on-dark);font-weight:400}
/* 10 liquid glass video */
.lm-glass video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 11 mesh gradient */
.lm-mesh .field{position:absolute;inset:0;background:linear-gradient(120deg,#1b2027,var(--moss),var(--brass));background-size:220% 220%;animation:labgrad 8s ease infinite;opacity:.75}
/* 12 curtain reveal — hover wipe */
.lm-curtain{cursor:pointer}
.lm-curtain img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lm-curtain .top{clip-path:inset(0 0 0 0);transition:clip-path .8s cubic-bezier(.6,.05,.2,1)}
.lm-curtain:hover .top{clip-path:inset(0 0 0 100%)}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.about-lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.22}
.about-lead em{font-style:italic;color:var(--accent)}
.about-photo{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--page-2);aspect-ratio:4/5}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo .ph-note{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:linear-gradient(0deg,rgba(10,11,13,.7),transparent);font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:rgba(245,242,236,.85)}
.about-stats{display:flex;flex-direction:column}
.astat{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.astat:first-child{border-top:1px solid var(--line)}
.astat .k{font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-faint)}
.astat .v{font-family:var(--serif);font-size:1.3rem}
.astat .v.mono{font-family:var(--mono);font-size:.9rem;letter-spacing:.04em}
.about-quote{position:relative;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.3rem,2vw,1.5rem);line-height:1.4;color:var(--tx);margin:0;padding:26px 0 22px 30px;border-top:1px solid var(--line)}
.about-quote::before{content:"\201C";position:absolute;left:-4px;top:20px;font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--accent);opacity:.6}
.about-meta{margin:0;padding-left:30px;color:var(--tx-faint)}
.letter{max-width:720px;margin:0 auto}
.letter p{font-size:1.12rem;line-height:1.7;color:var(--tx-soft);margin-bottom:20px}
.letter .greet{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--accent);line-height:1.2}
.letter .sign{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--tx)}
/* SERVIR — dark full-bleed band (About, between the two photos) */
.servir{position:relative;padding:130px 0;background:var(--scene-bg);color:var(--on-scene);overflow:hidden}
.servir::before{content:"";position:absolute;inset:0;background:url('/assets/images/site-exclusive/bg-watermark-navy-constellation.jpg') center/cover no-repeat;opacity:.70;filter:contrast(1.12) brightness(1.12);z-index:0}
/* localized scrim: darker pool behind the left-aligned text block, fading light on the
   right so the constellation/texture imposes clearly while the copy stays comfortable. */
.servir::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(125% 95% at 24% 46%,rgba(10,11,13,.60),rgba(10,11,13,.30) 60%,rgba(10,11,13,.18) 100%)}
.servir .wrap{z-index:2}
.servir-grid{display:grid;grid-template-columns:1fr .82fr;gap:60px;align-items:center}
.servir-copy{text-align:left}
.servir .eyebrow{color:var(--brass-on-dark)}
.servir h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.04;color:#F7F4EE;margin:16px 0 24px}
.servir p{font-size:1.06rem;line-height:1.72;color:rgba(245,242,236,.86);max-width:58ch;margin:0}
.servir .coord{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:rgba(245,242,236,.5);margin:28px 0 0}
.servir-still{position:relative;border:1px solid rgba(245,242,236,.14);border-radius:6px;overflow:hidden;box-shadow:0 34px 80px -34px rgba(0,0,0,.75);aspect-ratio:4/3}
.servir-still img{width:100%;height:100%;object-fit:cover;display:block}
.servir-still::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,transparent 52%,rgba(10,11,13,.4));pointer-events:none}

/* ---------- niche feature grid ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.feat-grid.cols3{grid-template-columns:repeat(3,1fr)}
.feat{padding:32px 30px;border:1px solid var(--line);border-radius:4px;background:var(--surface);transition:.3s}
.feat:hover{border-color:var(--accent);transform:translateY(-3px)}
.feat h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-bottom:10px}
.feat p{font-size:.94rem;color:var(--tx-soft)}
.feat .fn{font-family:var(--mono);font-size:.72rem;color:var(--accent);margin-bottom:12px}

/* ---------- FOOTER ---------- */
.site-foot{background:var(--page-2);border-top:1px solid var(--line);padding:74px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:46px}
.foot-brand svg{max-width:200px;height:auto;margin-bottom:16px}
:root[data-theme="light"] .foot-brand svg text[fill="#FAF8F4"],:root[data-theme="light"] .foot-brand .wm-navy{fill:var(--ink)!important}
.foot-brand p{font-size:.92rem;color:var(--tx-soft);max-width:34ch;margin-bottom:16px}
.foot-col h5{font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-faint);margin-bottom:16px}
.foot-col a{display:block;font-size:.92rem;color:var(--tx-soft);margin-bottom:10px}
.foot-col a:hover{color:var(--accent)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--tx-faint)}
.foot-bot a{color:inherit}.foot-bot a:hover{color:var(--accent)}

/* ---------- EXIT-INTENT ---------- */
.fbk-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,11,13,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s}
.fbk-overlay.open{display:flex;opacity:1}
.fbk-card{position:relative;max-width:520px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:44px 40px}
.fbk-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.6rem;color:var(--tx-faint);cursor:pointer;line-height:1}
.fbk-eyebrow{font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.fbk-card h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.1;margin:12px 0}
.fbk-card p{color:var(--tx-soft);margin-bottom:18px}
.fbk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.fbk-chip{font-family:var(--sans);font-weight:500;font-size:.82rem;padding:8px 16px;border:1px solid var(--line);border-radius:40px;background:var(--page);color:var(--tx-soft);cursor:pointer;transition:.25s}
.fbk-chip:hover{border-color:var(--accent)}
.fbk-chip.sel{background:var(--brass);color:#fff;border-color:var(--brass)}
.fbk-card textarea{width:100%;background:var(--page);border:1px solid var(--line);border-radius:3px;padding:12px;font-family:var(--sans);font-size:.92rem;color:var(--tx);min-height:70px;resize:vertical;margin-bottom:16px}
.fbk-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.fbk-skip{background:none;border:none;color:var(--tx-faint);font-size:.86rem;cursor:pointer;text-decoration:underline}
.fbk-thanks{display:none;text-align:center}
.fbk-thanks.show{display:block}
.fbk-thanks h3{margin-top:0}

/* ---------- hint pill ---------- */
.hint-pill{position:fixed;left:16px;bottom:16px;z-index:900;background:var(--surface);border:1px solid var(--line);border-radius:40px;padding:11px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:.4s;max-width:calc(100vw - 32px)}
.hint-pill.show{opacity:1;visibility:visible;transform:none}
.hint-pill span{font-size:.82rem;color:var(--tx-soft)}
.hint-pill button{background:var(--brass);color:#fff;border:none;border-radius:40px;padding:6px 14px;font-size:.76rem;font-weight:600;cursor:pointer;white-space:nowrap}
.hint-pill .hint-close{background:transparent;color:var(--tx-soft);font-weight:500;padding:6px 8px}

/* ---------- chatbot mascot — Alex chibi de corpo inteiro (vivo, interativo) — RESTAURADO do 13fbba7 (aprovado) ---------- */
#chatbot-bubble{position:fixed;right:16px;bottom:0;z-index:920;width:50px;background:none;border:none;cursor:pointer;padding:0;transform:translateX(150px);transition:transform .3s}
#chatbot-bubble.arrived{transform:none;animation:mascot-walkin 1.1s cubic-bezier(.25,.8,.35,1)}
#chatbot-bubble.away{transform:translateX(150px)}
#chatbot-bubble img{width:50px;height:auto;display:block;filter:drop-shadow(0 12px 14px rgba(23,26,30,.3));transform-origin:50% 96%;animation:mascot-idle 3.8s ease-in-out infinite}
#chatbot-bubble.wave img{animation:mascot-wave .8s ease-in-out 3}
#chatbot-bubble:hover img{animation:mascot-hello .7s ease-in-out infinite}
#chatbot-bubble.hop img{animation:mascot-hop .45s ease-out 1}
@keyframes mascot-walkin{0%{transform:translateX(150px)}30%{transform:translateX(96px) translateY(-7px)}55%{transform:translateX(52px) translateY(0)}78%{transform:translateX(18px) translateY(-7px)}100%{transform:translateX(0) translateY(0)}}
@keyframes mascot-idle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.015,.985) rotate(-1deg)}}
@keyframes mascot-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg) translateY(-4px)}65%{transform:rotate(6deg)}}
@keyframes mascot-hello{0%,100%{transform:rotate(-5deg) translateY(-3px) scale(1.05)}50%{transform:rotate(4deg) translateY(-5px) scale(1.05)}}
@keyframes mascot-hop{0%{transform:translateY(0)}40%{transform:translateY(-16px)}70%{transform:translateY(0)}85%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#chatbot-bubble img,#chatbot-bubble.arrived,#chatbot-bubble:hover img{animation:none!important}}
/* balão de fala do mascote — acima da cabeça */
.cb-greet{position:fixed;right:58px;bottom:64px;z-index:921;background:var(--surface);border:1px solid var(--brass);border-radius:14px 14px 3px 14px;padding:10px 15px;font-size:.86rem;color:var(--tx);box-shadow:0 12px 30px var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.4s;max-width:220px;cursor:pointer}
.cb-greet::after{content:"";position:absolute;right:-7px;bottom:10px;width:12px;height:12px;background:var(--surface);border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);transform:rotate(-45deg)}
.cb-greet.show{opacity:1;visibility:visible;transform:none}
.cb-av-img{position:relative;width:34px;height:34px;border-radius:50%;background:var(--page-2);border:1px solid var(--brass);overflow:hidden;display:grid;place-items:center;flex:0 0 auto}
/* blindado contra regras genéricas de mídia (.work-media img etc.) — fix 603b8e8 mantido */
.cb-av-img img{position:static!important;inset:auto!important;width:82%!important;height:auto!important;object-fit:contain!important;margin:20% 0 0!important;transform:none!important}
/* mobile ≤768px — mascote mais pequeno (cobria títulos/conteúdo em 390×844,
   auditoria 2026-07-09) + recolhe durante o scroll (classe .scroll-hide via JS) */
@media(max-width:768px){
  #chatbot-bubble{width:46px;transition:transform .3s,opacity .3s}
  #chatbot-bubble img{width:46px}
  .cb-greet{right:54px;bottom:58px;max-width:190px}
  #chatbot-bubble.scroll-hide{transform:translateY(110px);opacity:0;pointer-events:none}
}
#chatbot-panel{position:fixed;right:22px;bottom:88px;z-index:920;width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 60px var(--shadow);overflow:hidden;display:none;flex-direction:column}
#chatbot-panel.open{display:flex}
.cb-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cb-title{font-weight:600;font-size:.92rem}.cb-st{font-size:.72rem;color:var(--tx-soft)}
.cb-close{margin-left:auto;background:none;border:none;font-size:1.3rem;color:var(--tx-faint);cursor:pointer}
.cb-note{padding:12px 16px;font-size:.78rem;color:var(--tx-soft);background:var(--page-2);border-bottom:1px solid var(--line)}
.cb-msgs{max-height:300px;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.cb-in{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.cb-in textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:20px;padding:9px 14px;font-family:var(--sans);font-size:.88rem;color:var(--tx);background:var(--page);max-height:80px}
.cb-send{width:38px;height:38px;border-radius:50%;background:var(--brass);border:none;cursor:pointer;display:grid;place-items:center}
.cb-send svg{width:16px;height:16px;fill:#fff}

/* dropdown parent that is a label, not a link */
.nav-links .drop-lbl{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,236,.82);text-shadow:0 1px 6px rgba(0,0,0,.4);cursor:default;transition:color .2s;display:inline-flex;align-items:center;gap:6px}
.nav-links .drop-lbl::after{content:"▾";font-size:.7em;color:var(--brass-on-dark)}
.nav.scrolled .nav-links .drop-lbl{color:var(--tx-soft);text-shadow:none}
.nav-drop:hover .drop-lbl{color:var(--brass-on-dark)}
.nav.scrolled .nav-drop:hover .drop-lbl{color:var(--brass)}

/* closing CTA with brand banner background (work page) */
/* the scene (lamp · compass · olive branch · AUTONOMA wordmark) is beautiful — let it
   breathe: brighter image, much lighter overlay, and a localized scrim only behind the
   text. Text block lifts up so the wordmark at the base stays whole and visible below. */
.cta-banner{min-height:660px;display:flex;align-items:flex-end;padding:0}
.cta-banner .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.72;filter:brightness(1.38) contrast(1.02);z-index:0}
.cta-banner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,26,30,.06) 0%,rgba(23,26,30,.12) 34%,rgba(23,26,30,.52) 66%,rgba(23,26,30,.46) 84%,rgba(23,26,30,.26) 100%)}
.cta-banner .wrap{z-index:2;padding-top:150px;padding-bottom:172px}
.cta-banner h2{text-shadow:0 2px 20px rgba(11,13,17,.9),0 1px 3px rgba(11,13,17,.75)}
.cta-banner.promise::before{display:none}
@media(max-width:560px){.cta-banner{min-height:600px}.cta-banner .wrap{padding-top:110px;padding-bottom:150px}}

/* floating "compare styles" back link (preview only) */
.lab-back{position:fixed;left:16px;top:50%;z-index:80;background:var(--ink);color:var(--stone);font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.12em;padding:9px 13px;border-radius:2px;text-transform:uppercase;opacity:.85;transition:.2s}
.lab-back:hover{opacity:1}

/* ---------- nav mobile ---------- */
@media(max-width:960px){
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--page);padding:16px 40px 26px;border-bottom:1px solid var(--line);box-shadow:0 20px 40px var(--shadow);display:none}
  .nav.open .nav-links{display:flex}
  .nav-links a{color:var(--tx-soft);text-shadow:none;padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav-drop{width:100%}.nav-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:0 0 0 14px}
  .hamb{display:flex}
}
@media(max-width:900px){
  .doors,.wcards,.svc-showcase,.grid,.lab-modules{grid-template-columns:1fr 1fr}
  .about-grid,.contact-grid,.showcase,.unhurry,.demo,.svc-detail,.work-grid,.lab-grid,.feat-grid,.feat-grid.cols3,.servir-grid{grid-template-columns:1fr}
  .servir{padding:96px 0}.servir-grid{gap:38px}.servir-copy{text-align:center}.servir p{margin:0 auto}.servir-still{order:2;max-width:520px;margin:0 auto;width:100%}
  .svc-detail.rev .svc-detail-media{order:0}
  .showcase-copy{padding:64px 40px}.showcase-video{min-height:300px}
  .unhurry-media{min-height:280px}.unhurry-media::after{background:linear-gradient(0deg,var(--surface) 0%,transparent 40%)}
  .steps,.pgrid{grid-template-columns:1fr 1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .wrap,.nav-in{padding:0 22px}
  .sec{padding:84px 0}.scene{height:68vh}.serenity{padding:100px 0}
  .doors,.wcards,.svc-showcase,.grid,.steps,.pgrid,.lab-modules,.lab-grid,.foot-grid{grid-template-columns:1fr}
  .cell{padding:28px 0!important;border-right:none}
  .cine-cap{padding-bottom:50px}.cine-prog{right:20px}
  .nav-links{padding:16px 22px 26px}
}

/* ---------- family band (About) ---------- */
.family-band{position:relative;width:100%;max-width:960px;margin:0 auto 46px;border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:var(--scene-bg)}
.family-band img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02)}
.family-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(23,26,30,.35) 100%);pointer-events:none}
@media(max-width:640px){.family-band{margin-bottom:32px;border-radius:4px}}

/* ---------- scroll cue do hero — mesma cápsula GRANDE a piscar ---------- */
.scrollcue{flex-direction:row;gap:9px;padding:8px 15px;border:1.5px solid var(--brass-on-dark);border-radius:60px;background:rgba(14,16,19,.55);backdrop-filter:blur(10px);animation:cueblink 1.6s ease-in-out infinite;box-shadow:0 0 0 1px rgba(198,164,94,.25),0 14px 40px rgba(0,0,0,.5)}
.scrollcue span:first-child{font-weight:700;font-size:.6rem;letter-spacing:.26em;color:#F7F4EE;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.scrollcue .mouse{width:16px;height:26px;border:1.5px solid var(--brass-on-dark);border-radius:9px}
.scrollcue .mouse::before{width:3px;height:6px;margin-left:-1.5px;background:var(--brass-on-dark);box-shadow:0 0 10px var(--brass-on-dark)}
.scrollcue::after{content:"⌄";font-size:.9rem;line-height:.5;color:var(--brass-on-dark);animation:cuedown 1.6s ease-in-out infinite}
@media(max-width:560px){.scrollcue{padding:7px 12px;gap:8px}.scrollcue span:first-child{font-size:.55rem;letter-spacing:.2em}.scrollcue .mouse{width:14px;height:22px}}

/* ============ SCROLL CUE do Labs live — linha vertical dourada + SCROLL (exato) ============ */
.cine-cue{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;transition:opacity .5s}
.cine-cue .cue-line{width:3px;height:64px;border-radius:2px;background:linear-gradient(to bottom,#D4B87A,#C4A265 45%,rgba(196,162,101,.15));box-shadow:0 0 14px rgba(196,162,101,.55);animation:scrollPulse 2s ease-in-out infinite}
.cine-cue .cue-row{display:flex;align-items:baseline;gap:14px;animation:scrollTextPulse 2s ease-in-out infinite}
.cine-cue .cue-word{font-family:var(--serif);font-size:.9rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;background:linear-gradient(135deg,#C4A265 0%,#E8D5A3 45%,#C4A265 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cine-cue .cue-side{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.72);text-shadow:0 2px 10px rgba(0,0,0,.6)}
@keyframes scrollPulse{0%,100%{opacity:.55;transform:scaleY(.92)}50%{opacity:1;transform:scaleY(1)}}
@keyframes scrollTextPulse{0%,100%{opacity:.75}50%{opacity:1}}
.cine-cue.done{opacity:0}

/* defensivo: títulos gigantes nunca estouram viewports estreitos/font-scaling */
h1,h2,.hero h1,.cine-cap h2{overflow-wrap:break-word}
@media(max-width:360px){
  .hero h1{font-size:clamp(1.9rem,11vw,2.6rem)}
  .wrap{padding-left:18px;padding-right:18px}
}

/* nav compacta em ecrãs estreitos */
@media(max-width:480px){
  .nav-in{padding:0 14px;gap:8px}
  .brand .wm{letter-spacing:.18em;font-size:.82rem}
  .brand .mark{width:30px;height:30px}
  .nav-right{gap:7px}
  .lang button, .lang .lang-btn{padding:4px 6px;font-size:.6rem}
  .theme-btn{width:30px;height:30px}
  .nav-cta{padding:9px 12px;font-size:.58rem;letter-spacing:.12em}
}
/* Mobile nav: on phones the top-bar START competes with the hamburger and
   pushes it off-screen (≤ ~520px, all phones incl. Pro Max 430). So ≤560px we
   hide the top-bar START and instead show a START cloned into the drawer by
   app.js. The drawer-start is hidden by default because on desktop .nav-links
   is the inline horizontal menu (visible) — it must only appear in the mobile
   drawer, exactly where the top-bar START is hidden. */
.drawer-start{display:none}
@media(max-width:560px){
  .nav-right .nav-cta{display:none}
  .nav-links .drawer-start{display:block;margin-top:14px;background:var(--brass);color:#fff;border:none;border-radius:40px;padding:13px 18px;text-align:center;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;transition:background .2s}
  .nav-links .drawer-start:hover{background:var(--brass-on-dark);color:#fff}
  :root[data-theme="dark"] .nav-links .drawer-start{color:var(--ink)}
}

/* ---------- SERVICE DETAIL PAGES (plans · included · faq) ---------- */
.inc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 34px;list-style:none;padding:0;margin:0}
.inc-grid li{position:relative;padding-left:26px;color:var(--tx-soft);line-height:1.55;font-size:.98rem}
.inc-grid li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:600}

.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan-grid.cols2{grid-template-columns:repeat(2,1fr)}
.plan-card{position:relative;display:flex;flex-direction:column;padding:36px 32px;background:var(--surface);border:1px solid var(--line);border-radius:4px;transition:transform .3s,border-color .3s,box-shadow .3s}
.plan-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 44px var(--shadow)}
.plan-card.featured{border-color:var(--accent)}
.plan-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.plan-name{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.04;margin-bottom:6px}
.plan-cadence{font-size:.9rem;color:var(--tx-soft);margin-bottom:18px}
.plan-price{font-family:var(--serif);font-weight:400;font-size:1.45rem;color:var(--tx);line-height:1.1}
.plan-from{font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-faint);display:block;margin-bottom:20px}
/* C5) pt-BR: sem preços — esconde valor e rótulo "A partir de"; CTA passa a "Fale conosco para valores" */
html[lang="pt-BR"] .plan-price,html[lang="pt-BR"] .plan-from{display:none}
html[lang="pt-BR"] .plan-name{margin-bottom:20px}
.plan-feats{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.plan-feats li{position:relative;padding-left:22px;font-size:.92rem;color:var(--tx-soft);line-height:1.5}
.plan-feats li::before{content:"→";position:absolute;left:0;color:var(--accent)}
.plan-feats li strong{color:var(--tx);font-weight:600}
.plan-feats li.dim{opacity:.48}
.plan-feats li.dim::before{content:"–";color:var(--tx-faint)}
.plan-card .btn{margin-top:auto;align-self:flex-start}

/* C6) discreet in-frame video controls (play/pause + sound) — house style, corner of frame */
.vidctl{position:absolute;right:10px;bottom:10px;z-index:5;display:flex;gap:6px}
.vidctl-b{width:32px;height:32px;border-radius:50%;border:1px solid rgba(245,242,236,.30);background:rgba(20,18,15,.44);backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%);color:#F5F2EC;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .25s,border-color .25s,color .25s,transform .2s}
.vidctl-b:hover{background:rgba(20,18,15,.66);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.vidctl-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vidctl-b svg{display:block;width:15px;height:15px}
.plan-note{margin-top:28px;font-size:.86rem;color:var(--tx-faint);line-height:1.6;max-width:74ch}

.faq-list{max-width:840px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--tx);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";font-family:var(--sans);font-size:1.5rem;line-height:1;color:var(--accent);transition:transform .3s;flex-shrink:0}
.faq-item[open] .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 0 24px;color:var(--tx-soft);line-height:1.7;max-width:74ch}

/* before/after showcase (work page) */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ba-card{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.ba-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 44px var(--shadow)}
.ba-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--scene-bg)}
.ba-pane{position:absolute;inset:0}
.ba-pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-pane.after{clip-path:inset(0 0 0 100%);animation:baSweep 7s ease-in-out infinite}
@keyframes baSweep{0%,10%{clip-path:inset(0 0 0 100%)}45%,55%{clip-path:inset(0 0 0 0)}90%,100%{clip-path:inset(0 0 0 100%)}}
.ba-lbl2{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--sans);font-weight:500;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#F7F4EE;background:rgba(14,16,19,.7);padding:5px 11px;border-radius:40px;backdrop-filter:blur(4px)}
.ba-pane.after .ba-lbl2{left:auto;right:12px;background:rgba(168,133,68,.88)}
.ba-info{padding:22px 24px 26px}
.ba-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.ba-info h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-bottom:8px}
.ba-info p{font-size:.92rem;color:var(--tx-soft);line-height:1.5}
@media (prefers-reduced-motion:reduce){.ba-pane.after{clip-path:inset(0 0 0 50%);animation:none}}
@media (max-width:900px){.plan-grid,.plan-grid.cols2,.inc-grid,.ba-grid{grid-template-columns:1fr}}

/* === HOME STORY FILM === */
/* A frame sequence the visitor scrubs with the scroll. The stage is always dark
   (like .cine) so it reads the same in both themes; the page below is untouched.
   --grow drives the promise block from quiet (0, readable from frame one) to the
   finale (1). Default is 1: no JS, reduced motion or a failed film all land on a
   still + full-size promise, with the runway collapsed to one viewport. */
.story{position:relative;--story-scrub:450vh;--grow:1;--subo:1;--rise:0;--pfin:0}
/* --rise and --pfin have to be resolved ON .story-promise: story.js sets --grow
   inline on that element, so a var(--grow) read higher up the tree would always
   see the CSS default (1) and leave the block permanently lifted. */
.story.on .story-promise{--rise:var(--grow);--pfin:var(--grow)}
.story-track{height:100vh}
.story.on .story-track{height:calc(100vh + var(--story-scrub))}
.story-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--scene-bg)}

.story-poster,.story-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.story-poster{object-fit:cover;transition:opacity .8s ease}
.story-canvas{opacity:0;transition:opacity .8s ease}
.story.on .story-canvas{opacity:1}
.story.on .story-poster{opacity:0}

/* scrims — measured so the worst pixel under text stays readable without a card.
   Combined alpha peaks ≈.75 bottom-left (top .50 · bottom .62 · side .34). */
.story-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,9,11,.50) 0%,rgba(8,9,11,.14) 17%,rgba(8,9,11,0) 34%),
  linear-gradient(0deg,rgba(8,9,11,.56) 0%,rgba(8,9,11,.34) 20%,rgba(8,9,11,.08) 44%,rgba(8,9,11,0) 62%),
  linear-gradient(100deg,rgba(8,9,11,.54) 0%,rgba(8,9,11,.30) 44%,rgba(8,9,11,.05) 72%,rgba(8,9,11,0) 88%)}
.story-vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 96% at 50% 44%,transparent 46%,rgba(8,9,11,.34) 100%)}

/* story beats — one per scene, scrubbed enter → hold → exit by story.js */
.story-beats{position:absolute;inset:0;z-index:2;pointer-events:none}
.story:not(.on) .story-beats{display:none}
/* caption scrim: present only while a caption is on screen (story.js drives
   --beat-scrim from the live beat opacity), so the film is never permanently
   muddied and the worst pixel under the text still measures. Widened and
   never fades to zero across the caption's own width (mobile b-line runs
   close to the right edge of this gradient — a taper to fully transparent
   there left bright frames unreadable); combined with the base scrim/vig it
   tops out ≈.80 under the caption zone. */
.story-beats::before{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--beat-scrim,0);
  background:linear-gradient(100deg,rgba(8,9,11,.68) 0%,rgba(8,9,11,.58) 40%,rgba(8,9,11,.46) 65%,rgba(8,9,11,.32) 85%,rgba(8,9,11,.18) 100%)}
.story-beat{position:absolute;inset:0;display:flex;align-items:center;padding-bottom:12vh;
  opacity:0;will-change:opacity,transform,filter}
.story-beat .wrap{width:100%}
.story-beat .b-ey{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.3em;
  text-transform:uppercase;color:#E3C889;display:block;margin-bottom:18px;
  text-shadow:0 1px 3px rgba(8,9,11,.9),0 2px 16px rgba(8,9,11,.85)}
.story-beat .b-line{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:1.05;letter-spacing:-.01em;
  color:#F7F4EE;max-width:17ch;text-shadow:0 3px 30px rgba(0,0,0,.55)}

/* the promise — quiet bottom-left from the first frame, the finale at the end */
/* --rise is normally tied to --grow (the finale lifts off the bottom edge). In
   the still states the block stays down where the scrim is strongest — lifting
   it into an unscrimmed mid band is where the text stops being readable. */
.story-promise{position:absolute;left:0;right:0;bottom:46px;z-index:3;
  transform:translate3d(0,calc(var(--rise) * -19vh),0);will-change:transform}
/* the promise travels with --rise, so its readability cannot depend on where
   the page-level scrim happens to be strong. It carries its own feathered band
   (no hard edge, no card) that moves with it. */
/* Two layers that trade places as --pfin (the finale) comes in:
   · the flat band below carries the quiet states (--pfin 0), unchanged at .44;
   · the pool above only exists at the finale, where the block has lifted clear
     of the page scrim and the aurora is at its brightest. It is centred on the
     headline rather than on the left edge — the brightest aurora sits at the
     END of the brass line — and dies out before the right edge, so the aurora
     keeps the top and right of the frame.
   As the pool comes in the flat band steps back (.44 → .22), so the darkest
   pixel under the headline stays ≈.79 combined instead of stacking past .8.
   Measured at 1440×810, finale: brass italic 4.3:1 · cream line 9:1. */
.story-promise::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:0;right:0;top:-3.4rem;bottom:calc(-46px - var(--rise) * 19vh);
  background:
    radial-gradient(69% 102% at 58% 27%,
      rgba(8,9,11,calc(.57 * var(--pfin))) 0%,
      rgba(8,9,11,calc(.55 * var(--pfin))) 49%,
      rgba(8,9,11,calc(.17 * var(--pfin))) 81%,
      rgba(8,9,11,0) 100%),
    linear-gradient(180deg,
      rgba(8,9,11,0) 0%,
      rgba(8,9,11,calc(.34 - var(--pfin) * .17)) 22%,
      rgba(8,9,11,calc(.44 - var(--pfin) * .21)) 55%,
      rgba(8,9,11,calc(.44 - var(--pfin) * .21)) 100%)}
.story-promise .wrap{width:100%}
.story-promise .p-badge{font-family:var(--sans);font-weight:500;
  font-size:calc(.56rem + var(--grow) * .06rem);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(247,244,238,.94);margin-bottom:calc(9px + var(--grow) * 13px);
  display:inline-flex;align-items:center;gap:8px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.story-promise .p-badge .flags{font-size:.95rem;letter-spacing:0}
.story-promise h1{font-family:var(--serif);font-weight:400;
  font-size:calc(clamp(1.02rem,2.3vw,1.3rem) + var(--grow) * clamp(1.15rem,3vw,3.1rem));
  line-height:1.08;letter-spacing:-.01em;color:#F7F4EE;
  max-width:calc(30rem + var(--grow) * 16rem);text-shadow:0 2px 26px rgba(0,0,0,.6)}
.story-promise h1 em{font-style:italic;color:var(--brass-on-dark)}
.story-sub{font-size:1.02rem;color:rgba(245,242,236,.9);max-width:52ch;overflow:hidden;
  opacity:var(--subo);max-height:calc(var(--subo) * 9rem);
  margin-top:calc(var(--subo) * 16px);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.story-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:calc(14px + var(--grow) * 16px)}
.story-ctas .btn{padding:calc(11px + var(--grow) * 4px) calc(19px + var(--grow) * 9px);
  font-size:calc(.62rem + var(--grow) * .08rem);letter-spacing:calc(.13em + var(--grow) * .03em)}

/* scroll cue — the house pill, moved clear of the promise block */
.story .scrollcue.story-cue{left:auto;right:40px;bottom:38px;transform:none;transition:opacity .4s}
.story:not(.on) .scrollcue.story-cue{display:none}

/* nav over the film — app.js flips .nav.scrolled past 60px, which over a 450vh
   film would drop an opaque cream band across every frame. While the stage is
   pinned, story.js adds .nav-over-film and the bar stays in its over-dark look. */
.nav.scrolled.nav-over-film{background:transparent;backdrop-filter:none;box-shadow:none;padding:24px 0}
.nav.scrolled.nav-over-film .nav-logo .wm{color:#F5F2EC;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.nav.scrolled.nav-over-film .mark .cr{stroke:#F5F2EC}
.nav.scrolled.nav-over-film .nav-links a,
.nav.scrolled.nav-over-film .nav-links .drop-lbl{color:rgba(245,242,236,.82);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.nav.scrolled.nav-over-film .nav-links a:hover,.nav.scrolled.nav-over-film .nav-links a.active,
.nav.scrolled.nav-over-film .nav-drop:hover .drop-lbl{color:var(--brass-on-dark)}
.nav.scrolled.nav-over-film .lang-btn,.nav.scrolled.nav-over-film .theme-btn{
  border-color:rgba(245,242,236,.36);background:rgba(255,255,255,.06);color:rgba(245,242,236,.9)}
.nav.scrolled.nav-over-film .hamb span{background:#F5F2EC}

/* loading — one thin brass line, no percentage, no loader screen */
.story-load{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity .5s ease;
  background:linear-gradient(90deg,rgba(198,164,94,0),var(--brass-on-dark))}
.story-load.busy{opacity:.8}

/* still states (no JS yet, failed film, reduced motion): the promise is at full
   size over a static frame, so the scrim has to carry the whole headline, not
   just a bottom-left corner. Peak combined alpha .78 — still no opaque card. */
.story:not(.on){--rise:0}
.story:not(.on) .story-scrim{background:
  linear-gradient(180deg,rgba(8,9,11,.40) 0%,rgba(8,9,11,.10) 17%,rgba(8,9,11,0) 34%),
  linear-gradient(0deg,rgba(8,9,11,.56) 0%,rgba(8,9,11,.48) 22%,rgba(8,9,11,.34) 42%,rgba(8,9,11,.14) 64%,rgba(8,9,11,0) 84%),
  linear-gradient(100deg,rgba(8,9,11,.16) 0%,rgba(8,9,11,.08) 50%,rgba(8,9,11,0) 80%),
  linear-gradient(0deg,rgba(8,9,11,.32),rgba(8,9,11,.32))}
/* the brass italic needs more headroom once it is full size over a static frame */
.story:not(.on) .story-promise h1 em{color:#E3C889}

/* failure / no-JS / reduced motion → the still stays fully usable */
.story.story-fallback{--grow:1;--subo:1;--rise:0}
.story.story-fallback .story-track{height:100vh}
.story.story-fallback .story-canvas,.story.story-fallback .story-beats,
.story.story-fallback .story-load,.story.story-fallback .scrollcue.story-cue{display:none}
.story.story-fallback .story-poster{opacity:1}

@media(max-width:768px){
  .story{--story-scrub:420vh}
  .story-beat{padding-bottom:16vh}
  .story-beat .b-line{max-width:14ch}
  .story-promise{bottom:78px}
  .story-sub{font-size:.96rem}
  .story-ctas .btn{padding:14px 20px;font-size:.64rem}   /* ≥44px tap target */
  .story .scrollcue.story-cue{left:50%;right:auto;transform:translateX(-50%);bottom:18px}
}
@media(max-width:560px){
  /* phones: the promise block is taller (stacked CTAs) and the frame is
     cover-cropped tighter, so the bottom scrim has to reach further up. */
  .story-promise h1 em{color:#DFC287}
  /* portrait crops put the brightest part of the frame right under the block */
  .story-promise::before{top:-5rem;
    background:linear-gradient(180deg,rgba(8,9,11,0) 0%,rgba(8,9,11,.50) 17%,rgba(8,9,11,.56) 45%,rgba(8,9,11,.56) 100%)}
  .story.on .story-scrim{background:
    linear-gradient(180deg,rgba(8,9,11,.50) 0%,rgba(8,9,11,.14) 17%,rgba(8,9,11,0) 34%),
    linear-gradient(0deg,rgba(8,9,11,.46) 0%,rgba(8,9,11,.38) 22%,rgba(8,9,11,.22) 42%,rgba(8,9,11,.06) 60%,rgba(8,9,11,0) 76%),
    linear-gradient(100deg,rgba(8,9,11,.22) 0%,rgba(8,9,11,.10) 50%,rgba(8,9,11,0) 82%)}
}
@media(max-width:400px){
  .story-promise h1{font-size:calc(1rem + var(--grow) * 1.35rem)}
  .story-ctas .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .story,.story.on{--grow:1;--subo:1;--rise:0}
  .story .story-track,.story.on .story-track{height:100vh}
  .story .story-canvas,.story .story-beats,.story .story-load,
  .story .scrollcue.story-cue{display:none}
  .story .story-poster{opacity:1}
}
/* === /HOME STORY FILM === */

/* ============================================================
   ROUND 2 — GLASS + DEPTH (shared layer)
   · nav, dropdowns and language menu become real frosted glass
   · .gcard  = a glass surface for use over imagery / dark scenes
   · .g3d[data-tilt] = pointer tilt with a soft glare (engine in app.js;
     fine pointers only; reduced motion = flat). Opt-in per element, so
     pages that don't use the classes are untouched.
   ============================================================ */
.nav.scrolled{background:color-mix(in srgb,var(--page) 68%,transparent);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 1px 0 color-mix(in srgb,var(--line) 80%,transparent),0 10px 30px -18px var(--shadow),inset 0 -1px 0 rgba(255,255,255,.18)}
:root[data-theme="dark"] .nav.scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.04)}
.nav-menu,.lang-menu{background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-color:color-mix(in srgb,var(--line) 70%,rgba(255,255,255,.3));border-radius:10px;
  box-shadow:0 24px 60px -20px var(--shadow),inset 0 1px 0 rgba(255,255,255,.35)}
:root[data-theme="dark"] .nav-menu,:root[data-theme="dark"] .lang-menu{box-shadow:0 24px 60px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-menu a,.lang-menu button{border-radius:6px}

.gcard{position:relative;border-radius:14px;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 60px -30px rgba(0,0,0,.6)}
.gcard>*{position:relative;z-index:1}

.g3d{--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;--ga:0;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s ease,border-color .4s ease,opacity 1.1s ease,filter 1.1s ease}
.g3d.reveal:not(.in){transform:perspective(1000px) translateY(28px)}
.g3d.is-tilting{transition:transform .14s linear,box-shadow .4s ease,border-color .4s ease,opacity 1.1s ease,filter 1.1s ease}
.g3d::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(255,255,255,.3),rgba(255,255,255,0) 55%);
  opacity:var(--ga);transition:opacity .5s ease;mix-blend-mode:soft-light}
.g3d:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (hover:none){.g3d:active{transform:perspective(1000px) scale(.985)}}
@media(prefers-reduced-motion:reduce){.g3d,.g3d.is-tilting{transform:none!important}.g3d::after{display:none}}
.g3d[data-tilt]:hover{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px)}
@media(prefers-reduced-motion:reduce){.g3d[data-tilt]:hover{transform:translateY(-2px)!important}}