/* ============================================================
   TOKENS   Electric: paper + deep ink-navy + #0B4FD9
   Light theme is default; html[data-theme="dark"] overrides.
   ============================================================ */
:root{
  --blue:#0B4FD9; --blue-strong:#0B4FD9; --blue-deep:#0940AE; --blue-soft:#E7EDFC;
  --accent-text:#0940AE;              /* blue used as text on light */
  --paper:#F7F8FB; --paper-2:#EEF1F8;
  --dark:#0A1330; --dark-2:#111B3E; --dark-3:#182453;
  --text:#161D33; --muted:rgba(22,29,51,.60); --line:rgba(10,19,48,.12);
  --card:#FFFFFF;
  --on-dark-accent:#9DB8F5;           /* light blue text on dark blocks */
  --on-dark-muted:rgba(237,241,250,.62);
  --wa:#25D366; --wa-dark:#1EB85A;
  --display:"Space Grotesk",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --wrap:1180px; --r:18px; --r-sm:12px;
  --shadow:0 1px 2px rgba(10,19,48,.05),0 10px 30px rgba(10,19,48,.07);
  --shadow-lg:0 2px 4px rgba(10,19,48,.06),0 24px 50px rgba(10,19,48,.14);
  --glow:rgba(11,79,217,.14);
  color-scheme:light;
}
html[data-theme="dark"]{
  --blue:#2F66E0; --blue-deep:#7FA3F0; --blue-soft:rgba(47,102,224,.16);
  --accent-text:#7FA3F0;
  --paper:#0A0E1E; --paper-2:#0D1226;
  --dark:#060A18; --dark-2:#0C1330; --dark-3:#14204A;
  --text:#E8ECF6; --muted:rgba(232,236,246,.60); --line:rgba(232,236,246,.10);
  --card:#121A33;
  --on-dark-accent:#9DB8F5;
  --on-dark-muted:rgba(237,241,250,.60);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 50px rgba(0,0,0,.5);
  --glow:rgba(47,102,224,.22);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--dark);color:#fff;padding:8px 12px;z-index:100}.skip:focus{left:8px}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin:0 auto}
.muted{color:var(--muted)} .small{font-size:.9rem} .center{text-align:center;margin-top:2.5rem}

/* Type */
h1,h2,h3,.h4{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.03em;margin:0 0 .5em;color:var(--text)}
h1{font-size:clamp(2.8rem,6.4vw,5.4rem);font-weight:700}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:1.3rem;letter-spacing:-.015em}
.h4{font-size:1.1rem;margin-top:2rem}
h1 em,h2 em,.quote em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent-text);letter-spacing:0;font-size:1.06em;line-height:1;display:inline-block;vertical-align:baseline}
.eyebrow{font-family:var(--body);font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text);margin:0 0 1rem;display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.lede{font-size:1.18rem;max-width:56ch;color:var(--muted)}
p{margin:0 0 1em}
.section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem 4rem;align-items:end;margin-bottom:2.8rem}
.section-head h2{margin-bottom:0}
.section-intro{color:var(--muted);max-width:46ch;margin:0;font-size:1.02rem}
@media(max-width:820px){.section-head{grid-template-columns:1fr}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--display);font-weight:600;font-size:.98rem;padding:.85rem 1.5rem;border-radius:999px;border:1.5px solid transparent;transition:transform .18s,background .18s,color .18s,border-color .18s,box-shadow .18s;white-space:nowrap;cursor:pointer;letter-spacing:-.01em}
.btn svg{width:19px;height:19px;fill:currentColor}
.btn:hover{transform:translateY(-2px)}
/* every WhatsApp button wears WhatsApp green, in both themes and on every
   background, so the action is instantly recognisable */
.btn-wa{background:var(--wa);color:#06301a}
html[data-theme="dark"] .btn-wa{background:var(--wa);color:#06301a}
.btn-wa svg{fill:currentColor}
.btn-wa:hover{background:var(--wa-dark);filter:none;box-shadow:0 12px 30px rgba(37,211,102,.32)}
.btn-outline-light,.btn-ghost{border-color:var(--text);color:var(--text);background:transparent}
.btn-outline-light:hover,.btn-ghost:hover{background:var(--text);color:var(--paper)}
.btn-lg{padding:1.05rem 1.9rem;font-size:1.05rem}
.btn-block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.9rem 0}
/* dark sections need no special case any more: green everywhere */

/* ============================================================ NAV */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 85%,transparent);backdrop-filter:blur(14px);color:var(--text);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s,background .25s}
.nav.is-scrolled{border-color:var(--line);box-shadow:0 8px 24px rgba(10,19,48,.05)}
html[data-theme="dark"] .nav.is-scrolled{box-shadow:0 8px 24px rgba(0,0,0,.4)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.brand-mark{width:28px;height:28px;color:var(--text)}
.brand-logo{height:42px;width:auto;display:block}
html[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1)}
.nav-links{display:flex;gap:1.9rem;font-weight:500;font-size:.94rem}
.nav-links a{position:relative;padding:.3rem 0;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a.is-active{color:var(--text)}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--blue);border-radius:2px}
.nav .btn{padding:.6rem 1.2rem;font-size:.92rem}
.nav-actions{display:flex;align-items:center;gap:.7rem}
@media(max-width:860px){.nav-links{display:none}.nav .btn-wa{display:none}}

/* Theme toggle */
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* Burger + mobile menu */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;padding:0 11px}
.nav-burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){.nav-burger{display:flex}}
.nav-mobile{display:grid;gap:.2rem;padding:0 20px 1.2rem;border-top:1px solid var(--line);background:color-mix(in srgb,var(--paper) 97%,transparent);backdrop-filter:blur(14px)}
.nav-mobile[hidden]{display:none}
.nav-mobile a:not(.btn){padding:.85rem .2rem;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--text);border-bottom:1px solid var(--line)}
.nav-mobile .btn{margin-top:.9rem;display:inline-flex}

/* ============================================================ HERO */
.hero{position:relative;display:grid;align-items:center;color:var(--text);isolation:isolate}
.hero-agency{min-height:82svh}
.hero-agency .hero-grid{grid-template-columns:1fr;max-width:880px}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-gradient{background:var(--paper)}
.hero-gradient::before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 72%)}
.hero-gradient::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 45% at 82% 12%,var(--glow),transparent 65%),
             radial-gradient(ellipse 50% 40% at 8% 92%,var(--glow),transparent 62%)}
.hero-grid{display:grid;gap:3rem;align-items:center;margin:0 auto;width:min(var(--wrap),calc(100% - 40px))}
.hero-copy{padding:5.5rem 0 4rem}
.hero .lede{color:var(--muted)}
@media(max-width:960px){.hero-copy{padding-top:4.5rem}}

/* Trust strip: always deep ink-navy in both themes */
.trust{background:var(--dark-2);color:#EDF1FA}
.trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.4rem 0}
.trust-item{display:flex;flex-direction:column;padding:.3rem 1.2rem;border-left:1px solid rgba(237,241,250,.14)}
.trust-item:first-child{border-left:0;padding-left:0}
.trust-item strong{font-family:var(--display);font-size:1.2rem;font-weight:600;line-height:1.15;color:var(--on-dark-accent)}
.trust-item span{font-size:.84rem;color:var(--on-dark-muted)}
@media(max-width:860px){.trust-inner{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(3){border-left:0;padding-left:0}}

/* ============================================================ SECTIONS */
.section{position:relative;z-index:1;padding:clamp(4.5rem,8vw,7.5rem) 0;background:var(--paper)}
.section-mist{background:var(--paper-2)}
.section-ocean{background:var(--dark-2);color:#EDF1FA}
.section-ocean::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 85% 0%,rgba(11,79,217,.30),transparent 60%)}
.section-ocean h2,.section-ocean h3{color:#fff}
.section-ocean h2 em{color:var(--on-dark-accent)}
.section-ocean .section-intro{color:var(--on-dark-muted)}
.section-ocean .eyebrow{color:var(--on-dark-accent)}
.section-ocean .wrap{position:relative}

/* Portfolio */
.work-list{display:grid;gap:2rem}
.work{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.work:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.work:nth-child(even){grid-template-columns:.85fr 1.15fr}
.work:nth-child(even) .work-shot{order:2}
.work-shot{position:relative;display:block;background:var(--paper-2);min-height:300px;overflow:hidden}
.work-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.work:hover .work-shot img{transform:scale(1.03)}
.shot-fallback{display:none;position:absolute;inset:0;place-items:center;font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--muted);background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 12px,var(--card) 12px,var(--card) 24px)}
.shot-missing img{display:none}.shot-missing .shot-fallback{display:grid}
.work-info{padding:2.2rem 2.4rem;display:flex;flex-direction:column;justify-content:center}
.work-kind{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);background:var(--blue-soft);padding:.32rem .7rem;border-radius:999px;margin-bottom:1rem}
.work-info h3{font-size:1.6rem}
.work-info>p{color:var(--muted)}
.work-points{list-style:none;padding:0;margin:0 0 1.3rem;display:flex;flex-wrap:wrap;gap:.5rem}
.work-points li{font-size:.8rem;font-weight:500;color:var(--text);background:var(--paper);border:1px solid var(--line);padding:.3rem .7rem;border-radius:999px}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.92rem;font-weight:600;color:var(--accent-text)}
.link-arrow svg{width:17px;height:17px;transition:transform .2s}
.work:hover .link-arrow svg,.card:hover .link-arrow svg{transform:translateX(4px)}
@media(max-width:860px){.work,.work:nth-child(even){grid-template-columns:1fr}.work:nth-child(even) .work-shot{order:0}.work-shot{min-height:220px}.work-info{padding:1.7rem}}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card-meta{display:flex;gap:.5rem;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.card-body p{margin:0;color:var(--muted);font-size:.95rem}
.card-foot{margin-top:auto;padding-top:1rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line)}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

/* Packages */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2rem 1.8rem;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.plan-featured{border:2px solid var(--blue);box-shadow:var(--shadow-lg)}
.plan-tag{position:absolute;top:-13px;left:1.6rem;background:var(--dark-2);color:#EDF1FA;font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px}
.plan-featured .plan-tag{background:var(--blue);color:#fff}
.plan h3{font-size:1.4rem;margin:.6rem 0 .2rem}
.plan-price{font-family:var(--display);font-weight:700;font-size:2.5rem;color:var(--text);margin:0;letter-spacing:-.03em}
.plan-unit{font-size:.95rem;font-weight:500;color:var(--muted)}
.plan-monthly{margin:.1rem 0 .8rem;font-weight:600;color:var(--accent-text)}
.plan-blurb{color:var(--muted);margin-bottom:1rem}
.plan .check{margin-bottom:1.5rem}
.plan .btn{margin-top:auto}
.plan-foot{margin:.9rem 0 0;font-size:.8rem;color:var(--muted)}
@media(max-width:920px){.plans{grid-template-columns:1fr}}

/* Check lists */
.check{list-style:none;padding:0;margin:0}
.check li{padding:.5rem 0 .5rem 1.8rem;position:relative;border-top:1px solid var(--line)}
.check li:first-child{border-top:0}
.check li::before{content:"";position:absolute;left:0;top:.95rem;width:15px;height:15px;border-radius:50%;background:var(--blue);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5 11-11' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5 11-11' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Rate card */
.rates{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 2.6rem}
.rate-group{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.8rem;box-shadow:var(--shadow)}
.rate-group h3{font-size:1.1rem;padding-bottom:.7rem;border-bottom:1.5px solid var(--blue);margin-bottom:.2rem}
.rate-table{width:100%;border-collapse:collapse}
.rate-table tr{border-bottom:1px solid var(--line)}
.rate-table tr:last-child{border-bottom:0}
.rate-table th{text-align:left;padding:.85rem .8rem .85rem 0;font-weight:400}
.rate-table td{text-align:right;padding:.85rem 0;vertical-align:top;white-space:nowrap}
.rate-name{display:block;font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--text)}
.rate-note{display:block;font-size:.84rem;color:var(--muted);margin-top:.15rem}
.rate-price{font-family:var(--display);font-weight:700;color:var(--text);font-size:1.02rem}
.rate-unit{display:block;font-size:.76rem;color:var(--muted)}
.price{font-family:var(--display);font-weight:600;color:var(--text)}
.price-lg{font-size:1.5rem;margin:.3rem 0 .2rem}
@media(max-width:820px){.rates{grid-template-columns:1fr}}

/* Steps */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.steps li{position:relative;padding:2rem 1.8rem 1.8rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.step-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--dark-2);color:var(--on-dark-accent);font-family:var(--display);font-weight:600;margin-bottom:1.1rem}
.steps h3{font-size:1.25rem} .steps p{margin:0;color:var(--muted)}
.steps-ocean li{background:rgba(237,241,250,.05);border-color:rgba(237,241,250,.14)}
.steps-ocean h3{color:#fff}
.steps-ocean p{color:var(--on-dark-muted)}
.steps-ocean .step-n{background:var(--blue);color:#fff}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.quote{margin:4.5rem auto 0;max-width:820px;text-align:center}
.quote p{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25;color:var(--text);letter-spacing:-.02em}
.quote cite{font-style:normal;font-size:.9rem;color:var(--muted)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.3rem;margin-bottom:.7rem;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.35rem;line-height:1;color:var(--accent-text);width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--blue-soft);flex:none;transition:transform .2s}
.faq details[open] summary::after{content:"–";transform:rotate(180deg)}
.faq details p{margin:.8rem 0 .2rem;color:var(--muted)}

/* CTA */
.cta{position:relative;z-index:1;padding:clamp(4.5rem,8vw,7rem) 0;background:var(--dark-2);color:#EDF1FA;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 15% 100%,rgba(11,79,217,.32),transparent 60%)}
.cta-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;position:relative}
.cta h2{color:#fff} .cta h2 em{color:var(--on-dark-accent)} .cta p{color:var(--on-dark-muted)}
.cta-card{background:rgba(237,241,250,.05);border:1px solid rgba(237,241,250,.16);border-radius:var(--r);padding:1.7rem 1.8rem}
.cta-card p{color:rgba(237,241,250,.8)}
.panel-title{font-family:var(--display);font-size:1.1rem;font-weight:600;margin:0 0 .5rem;color:#fff}
.cta .check li{border-color:rgba(237,241,250,.12)}
.cta .check li::before{background:var(--wa)}
@media(max-width:860px){.cta-inner{grid-template-columns:1fr}}

/* ============================================================ FOOTER + FLOATERS */
.footer{background:var(--dark-2);color:rgba(237,241,250,.8);padding:3.5rem 0 2rem;border-top:1px solid rgba(237,241,250,.1)}
.footer .brand{color:#fff} .footer .muted{color:rgba(237,241,250,.5)}
.footer .brand-logo{height:48px;filter:brightness(0) invert(1)}
.footer-inner{display:grid;gap:1.2rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1.4rem;font-weight:500;font-size:.94rem}
.footer-links a:hover{color:var(--on-dark-accent)}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.4);transition:transform .15s}
.wa-float:hover{transform:scale(1.06)} .wa-float svg{width:29px;height:29px;fill:#fff}
.totop{position:fixed;right:18px;bottom:84px;z-index:60;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop svg{width:20px;height:20px}

.crumbs{font-size:.88rem;padding:1.4rem 0 0;color:var(--muted)}
.gallery-main img,.thumb img{width:100%;height:100%;object-fit:cover}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease var(--d,0ms),transform .55s ease var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   FUTURIST LAYER  (same palette, more machine-age detailing)
   ============================================================ */
:root{--mono:"JetBrains Mono",ui-monospace,monospace}

/* Eyebrows become terminal-style readouts */
.eyebrow{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.22em}
.eyebrow::before{display:none}
.eyebrow .idx{color:var(--muted);background:var(--blue-soft);border:1px solid var(--line);border-radius:6px;padding:.15rem .45rem;font-size:.68rem;letter-spacing:.05em;color:var(--accent-text)}

/* Hero: slow-breathing glow + sweeping beam over the grid */
.hero-gradient::after{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1.35}}
.hero-gradient .beam,.hero-gradient::marker{display:none}
.hero-agency .hero-copy{position:relative}
.hero-agency h1{position:relative}
.statusline{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.45rem .95rem;margin:.4rem 0 0}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--wa);position:relative}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--wa);opacity:.6;animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}

/* Buttons: charged hover ring */
.btn-wa{position:relative}
.btn-wa:hover{box-shadow:0 0 0 3px rgba(37,211,102,.28),0 12px 30px rgba(37,211,102,.32)}

/* HUD corner brackets on hero-level cards */
.work,.plan-featured{position:relative}
.work::before,.work::after,.plan-featured::before,.plan-featured::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--blue);opacity:0;transition:opacity .25s;pointer-events:none;z-index:2}
.work::before{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.work::after{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.plan-featured::before{top:8px;left:8px;border-right:0;border-bottom:0;border-radius:4px 0 0 0;opacity:.9}
.plan-featured::after{bottom:8px;right:8px;border-left:0;border-top:0;border-radius:0 0 4px 0;opacity:.9}
.work:hover::before,.work:hover::after{opacity:.9}

/* Card hover: hairline turns electric */
.work:hover,.card:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}

/* Numbers and prices read as instrumentation */
.trust-item strong,.plan-price,.rate-price,.step-n{font-family:var(--mono);letter-spacing:-.01em}
.plan-price{font-weight:700}
.trust{position:relative;overflow:hidden}
.trust::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(237,241,250,.05) 1px,transparent 1px);background-size:64px 100%;pointer-events:none}

/* Section dividers: thin charged line between light sections */
.section + .section:not(.section-ocean){border-top:1px solid var(--line)}

/* Dark sections get the grid texture too */
.section-ocean::after,.cta::after{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(237,241,250,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(237,241,250,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%)}
.section-ocean .wrap,.cta .wrap{z-index:1}

/* Work capability chips + kinds in mono */
.work-kind,.card-meta,.plan-tag,.work-points li,.rate-unit,.plan-unit{font-family:var(--mono);letter-spacing:.04em}
.work-kind{border:1px solid color-mix(in srgb,var(--blue) 30%,transparent)}

/* Scroll-spy underline gets a glow */
.nav-links a.is-active::after{box-shadow:0 0 8px var(--blue)}

/* Footer: terminal sign-off */
.footer .muted{font-family:var(--mono);font-size:.8rem}

/* Reveal: slightly springier */
.reveal{transform:translateY(20px) scale(.995)}

/* ============================================================
   SHOWROOM LAYER  (image 1 hero, image 3 bento, pill nav)
   ============================================================ */
:root{--r:24px}

/* Pill nav (active item fills electric, like the reference) */
.nav-links{gap:.4rem}
.nav-links a{padding:.5rem 1rem;border-radius:999px;color:var(--muted)}
.nav-links a:hover{color:var(--text);background:var(--paper-2)}
.nav-links a.is-active{color:#fff;background:var(--blue)}
.nav-links a.is-active::after{display:none}

/* Dark showcase hero: three seamed panels with dot texture */
.hero-show{position:relative;background:var(--dark-2);color:#EDF1FA;isolation:isolate;padding:5rem 0 4.5rem;overflow:hidden}
html[data-theme="dark"] .hero-show{background:var(--paper-2)}
.hero-panels{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;z-index:-1}
.hero-panels span{background:
  radial-gradient(rgba(237,241,250,.07) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(180deg,rgba(11,79,217,.10),transparent 55%),
  var(--dark-2)}
html[data-theme="dark"] .hero-panels span{background:
  radial-gradient(rgba(237,241,250,.06) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(180deg,rgba(47,102,224,.12),transparent 55%),
  var(--paper-2)}
.hero-panels span:nth-child(2){box-shadow:inset 0 0 120px rgba(11,79,217,.14)}
.hero-inner{text-align:center;padding:2.5rem 0 0}
.hero-inner .lede{margin-left:auto;margin-right:auto}
.hero-inner .cta-row{justify-content:center}
.hero-show .eyebrow{color:var(--on-dark-accent)}
.hero-show .eyebrow .idx{background:rgba(237,241,250,.08);border-color:rgba(237,241,250,.15);color:var(--on-dark-accent)}

/* The spread wordmark */
.hero-word{display:flex;justify-content:space-between;align-items:baseline;width:100%;max-width:1100px;margin:1.2rem auto .6rem;font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,9.5vw,7.2rem);line-height:1;color:#F2F5FC;letter-spacing:0;user-select:none}
html[data-theme="dark"] .hero-word{color:#EDF1FA}
.hero-word span{flex:0 0 auto}
.hero-sub{font-size:clamp(1.5rem,3.2vw,2.4rem);color:#fff;max-width:26ch;margin:0 auto .5rem;font-weight:600;line-height:1.18}
/* the italic word drops to its own line, a touch larger, for a two-line lockup */
.hero-sub em{display:block;color:var(--on-dark-accent);font-size:1.22em;line-height:1.05;margin-top:.12em}
html[data-theme="dark"] .hero-sub{color:var(--text)}
.hero-show .lede{color:var(--on-dark-muted)}
html[data-theme="dark"] .hero-show .lede{color:var(--muted)}
.hero-show .statusline{background:rgba(237,241,250,.06);border-color:rgba(237,241,250,.15);color:var(--on-dark-muted)}
.btn-outline-dark{border-color:rgba(237,241,250,.5);color:#EDF1FA;background:transparent}
.btn-outline-dark:hover{background:#EDF1FA;color:var(--dark-2)}
html[data-theme="dark"] .btn-outline-dark{border-color:var(--text);color:var(--text)}
html[data-theme="dark"] .btn-outline-dark:hover{background:var(--text);color:var(--paper)}
@media(max-width:700px){.hero-panels{grid-template-columns:1fr}.hero-word{max-width:100%}}

/* Bento grid */
.bento-section{padding-top:2.2rem;padding-bottom:2.2rem}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.b-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:1.6rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem;justify-content:space-between;min-height:170px;transition:transform .25s,box-shadow .25s}
.b-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.b-card strong{display:block;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--text);letter-spacing:-.01em}
.b-card span{display:block;font-size:.88rem;color:var(--muted);margin-top:.2rem}
.b-blue{background:var(--blue);border:0;color:#fff}
.b-blue strong{color:#fff;font-family:var(--mono);font-size:2rem;letter-spacing:-.02em}
.b-blue span{color:rgba(255,255,255,.85)}
.b-ring{flex-direction:row;align-items:center;gap:1.1rem}
.ring{width:74px;height:74px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--line);stroke-width:8}
.ring .val{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:var(--p);stroke-dashoffset:var(--p);transition:stroke-dashoffset 1.2s ease .3s}
.reveal.in .ring .val,.in .ring .val{stroke-dashoffset:var(--o)}
.b-bars{flex-direction:row;align-items:center;gap:1.1rem}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px;flex:none}
.bars i{width:10px;border-radius:5px;background:var(--blue-soft);position:relative;height:100%;overflow:hidden}
.bars i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h);background:var(--blue);border-radius:5px;transform:scaleY(0);transform-origin:bottom;transition:transform .9s ease .25s}
.reveal.in .bars i::after{transform:scaleY(1)}
.b-ico{width:40px;height:40px;color:var(--accent-text);background:var(--blue-soft);border-radius:12px;padding:8px}
@media(max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.b-card{min-height:0}}

/* Softer, rounder cards everywhere to match the bento */
.work,.plan,.rate-group,.faq details,.steps li,.cta-card{border-radius:26px}
.section + .section:not(.section-ocean){border-top:0}


/* ============================================================
   BENTO HOVER: replay the entrance animation once per hover
   (JS adds .replay on mouseenter, removes it on animationend)
   ============================================================ */
.b-card{will-change:transform}
.b-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}

/* Entrance uses transitions on .reveal.in; the replay uses keyframes
   that reproduce the same motion, run exactly once. */
@keyframes ringfill{from{stroke-dashoffset:var(--p)}to{stroke-dashoffset:var(--o)}}
.b-card.replay .ring .val{animation:ringfill 1.2s ease 1 both}

@keyframes bargrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.b-card.replay .bars i::after{animation:bargrow .9s ease 1 both;transform-origin:bottom}
.b-card.replay .bars i:nth-child(2)::after{animation-delay:.06s}
.b-card.replay .bars i:nth-child(3)::after{animation-delay:.12s}
.b-card.replay .bars i:nth-child(4)::after{animation-delay:.18s}
.b-card.replay .bars i:nth-child(5)::after{animation-delay:.24s}

/* Cards without a chart replay their reveal rise */
@keyframes riseonce{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
.b-card.replay .replay-body{animation:riseonce .55s ease 1 both}

/* Right-hand bento cards: bring back their signature moves,
   still one clean cycle per hover (uses the same .replay mechanism) */

/* Blue "1 chat" card: sheen sweep + number pop, once */
.b-blue{position:relative;overflow:hidden}
.b-blue::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
.b-blue.replay::after{animation:sheen 1s ease 1 both}
@keyframes sheen{0%{left:-60%;opacity:0}15%{opacity:1}100%{left:130%;opacity:0}}
.b-blue.replay strong{animation:pop .6s cubic-bezier(.34,1.56,.64,1) 1;display:inline-block;transform-origin:left bottom}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
/* the blue card doesn't need the generic rise as well */
.b-blue.replay .replay-body{animation:none}

/* Key card: wiggle only, colours stay put */
.b-card.replay .b-ico{animation:wiggle .7s ease 1}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-11deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}

/* ============================================================
   PACKAGE CARDS: hover lift, matching the bento behaviour
   ============================================================ */
.plan{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;will-change:transform}
.plan:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.plan-featured:hover{box-shadow:var(--shadow-lg),0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent),0 18px 44px var(--glow)}
/* tag tips forward slightly while hovered */
.plan-tag{transition:transform .25s}
.plan:hover .plan-tag{transform:translateY(-2px) rotate(-2deg)}

/* ============================================================
   RATE CARD GROUPS: hover lift, same language as the rest
   ============================================================ */
.rate-group{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;will-change:transform}
.rate-group:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
/* the blue heading rule brightens with it */
.rate-group h3{transition:border-color .25s}
.rate-group:hover h3{border-bottom-color:color-mix(in srgb,var(--blue) 75%,#7FA3F0)}

/* ============================================================
   HOW-IT-WORKS STEPS: edges light up on hover
   ============================================================ */
.steps li{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.steps li:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent),0 14px 34px var(--glow);transform:translateY(-4px)}
/* on the dark section the edge glows a touch brighter */
.steps-ocean li:hover{border-color:color-mix(in srgb,var(--on-dark-accent) 65%,rgba(237,241,250,.14));box-shadow:0 0 0 1px color-mix(in srgb,var(--on-dark-accent) 40%,transparent),0 14px 34px color-mix(in srgb,var(--blue) 45%,transparent)}

/* ============================================================
   UNIFIED HOVER: every interactive box gets the same edge light
   (ring + glow + lift). Overrides the earlier per-section styles.
   ============================================================ */
.b-card:hover,
.work:hover,
.card:hover,
.plan:hover,
.rate-group:hover,
.steps li:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent),0 14px 34px var(--glow)}
/* featured plan keeps a slightly stronger charge */
.plan-featured:hover{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 50%,transparent),0 18px 44px var(--glow)}
/* blue bento card: ring reads white-blue on the solid fill */
.b-blue:hover{
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 14px 40px rgba(11,79,217,.4)}
/* dark-section steps stay on the brighter periwinkle */
/* the step cards sit on the dark panel in both themes, so their glow follows
   the theme accent (coral by day, electric blue at night) rather than a
   hardcoded blue that clashed with the coral step badges in day mode */
.steps-ocean li:hover{
  border-color:color-mix(in srgb,var(--on-dark-accent) 65%,rgba(237,241,250,.14));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-dark-accent) 40%,transparent),
             0 14px 34px color-mix(in srgb,var(--blue) 45%,transparent)}

/* ============================================================
   FAQ: subtle hover only; full edge light reserved for open items
   ============================================================ */
.faq details{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.faq details:not([open]):hover{
  background:color-mix(in srgb,var(--blue) 4%,var(--card));
  border-color:color-mix(in srgb,var(--blue) 25%,var(--line));
  transform:none;box-shadow:none}
.faq details[open]{
  border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent),0 14px 34px var(--glow)}
.faq summary::after{transition:transform .2s,background .2s,color .2s}
.faq details:not([open]):hover summary::after{background:var(--blue);color:#fff}

/* ============================================================
   TASTE PASS  (audited against Emil Kowalski's design-eng skill)
   ============================================================ */
:root{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out for entrances */
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);  /* strong in-out for on-screen movement */
}

/* Buttons must feel responsive: press feedback on every pressable */
.btn:active,.theme-toggle:active,.nav-burger:active,.totop:active,.wa-float:active{transform:scale(0.97)}
.btn{transition:transform 160ms var(--ease-out),background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(-1px) scale(0.97)}

/* Entrances use the strong ease-out, tightened durations */
.reveal{transition:opacity .5s var(--ease-out) var(--d,0ms),transform .5s var(--ease-out) var(--d,0ms)}
@keyframes riseonce{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
.b-card.replay .replay-body{animation-timing-function:var(--ease-out)}
.b-card.replay .ring .val{animation-timing-function:var(--ease-out)}
.b-card.replay .bars i::after{animation-timing-function:var(--ease-out)}

/* Card lifts: transform on the strong curve, colors on plain ease */
.b-card,.work,.card,.plan,.rate-group,.steps li{
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .2s ease,background .2s ease}

/* Mobile menu + FAQ answers enter with the same voice */
.nav-mobile{animation:menuIn .18s var(--ease-out)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq details[open] p{animation:faqIn .2s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Theme switch is a frequent action: no transition circus, quick fade only */
html[data-theme] body{transition:background .15s ease,color .15s ease}

/* ============================================================
   PORTFOLIO CARDS: mouse-tracked edge glow instead of lift+ring
   ============================================================ */
/* undo the unified hover for these two cards */
.work:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow)}
/* and the HUD corner brackets from the futurist layer */
.work::before,.work::after{display:none}

/* the glow: a gradient ring, revealed only near the cursor */
.work,.cta-card{position:relative}
.work .edge-glow,.cta-card .edge-glow{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;
  padding:2px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    var(--blue-deep) 0%,var(--blue) 35%,#7FA3F0 55%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s ease}
.work:hover .edge-glow,.cta-card:hover .edge-glow{opacity:1}

/* ============================================================
   FUN LAYER: progress line, playful wordmark, spinning steps
   ============================================================ */
/* scroll progress line */
.progress{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:100;
  background:linear-gradient(90deg,var(--blue),#7FA3F0);
  transform:scaleX(0);transform-origin:left;pointer-events:none}

/* MERIDIAN letters: pop on hover, wave on load and on click.
   Each letter carries an invisible padded hitbox so the hover
   triggers near the letter, not only on its exact strokes. */
.hero-word{cursor:pointer}
.hero-word span{position:relative;transition:transform .35s var(--ease-out),color .28s ease,text-shadow .28s ease}
/* generous invisible catch area around each letter */
/* The active letter is chosen in JS from zones measured while the letters sit
   at rest, so lifting one can never move its own catch area. No :hover here,
   which is what finally kills the edge flicker. */
.hero-word span{pointer-events:none}
.hero-word span.hot{transform:translateY(-12px);color:#FFFFFF;
  text-shadow:0 0 24px rgba(157,184,245,.75),0 0 56px rgba(47,102,224,.55)}
/* light spilling onto the letters either side, weaker further out */
.hero-word span.wave{animation:letterjump .55s var(--ease-out)}
@keyframes letterjump{35%{transform:translateY(-16px)}100%{transform:none}}

/* step numbers spin once as you hover their card */
.step-n{transition:transform .55s var(--ease-out)}
.steps li:hover .step-n{transform:rotate(360deg)}

/* FAQ plus badge gives a little quarter-turn on hover */
.faq details:not([open]):hover summary::after{transform:rotate(90deg)}

/* magnetic buttons snap back smoothly */
.btn-lg,.nav .btn-wa{transition:transform .25s var(--ease-out),background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;will-change:transform}

/* ============================================================
   SAFFRON-STYLE CHOREOGRAPHY: word reveals, marquee, depth
   ============================================================ */
/* headings assemble word by word as they enter the viewport */
h2.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
h2.split .w>span{display:inline-block;transform:translateY(115%);transition:transform .65s var(--ease-out) calc(var(--i,0)*50ms)}
h2.split.in .w>span{transform:none}

/* services marquee: continuous drift, never pauses; the top and bottom
   rules light up under the cursor while the mouse is inside */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--paper-2);padding:.9rem 0;position:relative;z-index:1}
.marquee-track{display:inline-flex;align-items:center;gap:2.2rem;white-space:nowrap;will-change:transform;animation:drift 26s linear infinite;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--muted)}
.marquee-track i{font-style:normal;color:var(--blue)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* hero panels get a will-change for the parallax drift */
.hero-panels span{will-change:transform}

/* ============================================================
   FULL CHOREOGRAPHY PASS: cinematic entrances, scroll depth,
   smart nav, cursor ring
   ============================================================ */
/* entrances: rise + sharpen from a slight blur (the "expensive" fade) */
.reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px);
  transition:opacity .6s var(--ease-out) var(--d,0ms),transform .6s var(--ease-out) var(--d,0ms),filter .6s var(--ease-out) var(--d,0ms)}
.reveal.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.reveal{filter:none!important}}

/* nav slides away when reading down, returns the moment you scroll up */
.nav{transition:transform .35s var(--ease-out),border-color .25s,box-shadow .25s,background .25s}
.nav.nav-hidden{transform:translateY(-100%)}

/* portfolio images drift inside their frames as you scroll */
.work-shot img{transform:translateY(var(--py,0px)) scale(1.08);transition:transform .35s var(--ease-out)}
.work:hover .work-shot img{transform:translateY(var(--py,0px)) scale(1.12)}



/* ============================================================
   LIVING BACKGROUND: drifting dots, breathing glows, aurora
   ============================================================ */
/* hero dot texture slowly rises, like slow rain in reverse */
.hero-panels span{animation:dotdrift 46s linear infinite}
@keyframes dotdrift{from{background-position:0 0,0 0,0 0}to{background-position:0 -220px,0 0,0 0}}
/* centre panel breathes */
.hero-panels span:nth-child(2){animation:dotdrift 46s linear infinite,panelbreathe 7s ease-in-out infinite}
@keyframes panelbreathe{0%,100%{box-shadow:inset 0 0 120px rgba(11,79,217,.14)}50%{box-shadow:inset 0 0 170px rgba(11,79,217,.28)}}

/* two soft aurora blobs wander behind the hero content */
.hero-aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-aurora i{position:absolute;width:46vw;height:46vw;min-width:340px;min-height:340px;border-radius:50%;filter:blur(90px)}
.hero-aurora i:first-child{left:2%;top:-16%;background:radial-gradient(circle,rgba(11,79,217,.34),transparent 65%);animation:aur1 17s ease-in-out infinite alternate}
.hero-aurora i:last-child{right:-6%;bottom:-24%;background:radial-gradient(circle,rgba(127,163,240,.22),transparent 65%);animation:aur2 21s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(9vw,6vh) scale(1.18)}}
@keyframes aur2{to{transform:translate(-8vw,-5vh) scale(1.12)}}
html[data-theme="dark"] .hero-aurora i:first-child{background:radial-gradient(circle,rgba(47,102,224,.30),transparent 65%)}

/* dark sections: their glow slowly wanders and swells */
.section-ocean::before{animation:glowdrift 18s ease-in-out infinite alternate}
.cta::before{animation:glowdrift 21s ease-in-out infinite alternate-reverse}
@keyframes glowdrift{from{transform:translateX(0) scale(1)}to{transform:translateX(-6%) scale(1.1)}}

/* ============================================================
   HOVER FIX: entrance styling was overriding card lifts.
   Cards with a reveal entrance fade+sharpen in place (no rise),
   and their hover lift is re-asserted here, last in the file.
   ============================================================ */
.b-card.reveal,.card.reveal,.plan.reveal,.rate-group.reveal,.steps li.reveal{
  transform:none;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .2s ease,background .2s ease,
    opacity .6s var(--ease-out) var(--d,0ms),filter .6s var(--ease-out) var(--d,0ms)}
.b-card.reveal:hover,.card.reveal:hover,.plan.reveal:hover,.rate-group.reveal:hover,.steps li.reveal:hover{transform:translateY(-5px)}

/* ============================================================
   ALIVE, GENTLY: ambient tints, micro-reactions, no noise
   ============================================================ */
/* light sections get a barely-there drifting blue tint */
.section:not(.section-ocean){position:relative}
.section:not(.section-ocean)::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 42% at 18% 15%,var(--glow),transparent 65%);
  opacity:.3;animation:tintdrift 26s ease-in-out infinite alternate}
.section>.wrap{position:relative;z-index:1}
@keyframes tintdrift{to{transform:translate(12%,10%) scale(1.18)}}

/* WhatsApp float: quick friendly wiggle every few seconds (icon only,
   so the button's own hover scale stays intact) */
.wa-float svg{animation:waNudge 9s ease-in-out infinite 4s;transform-origin:50% 60%}
@keyframes waNudge{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-9deg)}92%{transform:rotate(7deg)}95%{transform:rotate(-4deg)}}

/* theme toggle: the icon does a little spin as you press it */
.theme-toggle svg{transition:transform .45s var(--ease-out)}
.theme-toggle:active svg{transform:rotate(150deg) scale(.85)}

/* section number chips ping once as their section arrives */
.eyebrow .idx{position:relative}
.eyebrow.ping .idx{animation:idxping .9s var(--ease-out) 1}
@keyframes idxping{0%{box-shadow:0 0 0 0 rgba(11,79,217,.45)}100%{box-shadow:0 0 0 14px rgba(11,79,217,0)}}

/* selecting text is on-brand too */
::selection{background:var(--blue);color:#fff}

/* ============================================================
   LIGHT MODE GRADIENT: same blue palette, the page now sits on
   a soft blue-tinted gradient instead of flat paper.
   Dark mode is untouched.
   ============================================================ */
html:not([data-theme="dark"]) body{
  background:linear-gradient(165deg,#F9FBFF 0%,#EDF2FD 28%,#F7F8FB 52%,#E8EFFC 78%,#F4F7FE 100%);
  background-attachment:fixed}
html:not([data-theme="dark"]) .section:not(.section-ocean){background:transparent}
html:not([data-theme="dark"]) .section-mist{background:rgba(235,240,250,.5)}
html:not([data-theme="dark"]) .marquee{background:rgba(235,240,250,.55)}
html:not([data-theme="dark"]) .nav{background:rgba(247,249,253,.78)}

/* ============================================================
   BREATHING BACKGROUND: fixed gradient layers under the whole
   site, slowly drifting and swelling in both themes.
   Content, cards and dark panels are untouched.
   ============================================================ */
/* base wash (static) */
body{position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(165deg,#F9FBFF 0%,#EDF2FD 28%,#F7F8FB 52%,#E8EFFC 78%,#F4F7FE 100%)}
html[data-theme="dark"] body::before{
  background:linear-gradient(180deg,#0A0E1E 0%,#0B1126 42%,#090D1C 100%)}

/* breathing glow layer (animated: transform + opacity only) */
body::after{content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;will-change:transform,opacity;
  background:
    radial-gradient(ellipse 42% 34% at 16% 18%,rgba(11,79,217,.10),transparent 70%),
    radial-gradient(ellipse 36% 30% at 84% 32%,rgba(127,163,240,.12),transparent 70%),
    radial-gradient(ellipse 48% 36% at 50% 88%,rgba(11,79,217,.08),transparent 70%);
  animation:bgbreathe 19s ease-in-out infinite alternate}
html[data-theme="dark"] body::after{
  background:
    radial-gradient(ellipse 42% 34% at 18% 14%,rgba(47,102,224,.17),transparent 70%),
    radial-gradient(ellipse 36% 30% at 82% 36%,rgba(11,79,217,.15),transparent 70%),
    radial-gradient(ellipse 48% 36% at 50% 90%,rgba(127,163,240,.09),transparent 70%)}
@keyframes bgbreathe{
  from{transform:translate(0,0) scale(1);opacity:.75}
  to{transform:translate(2.5%,-2%) scale(1.07);opacity:1}}

/* let the breathing layer show through the light sections in BOTH themes */
.section:not(.section-ocean){background:transparent}
.section-mist{background:color-mix(in srgb,var(--paper-2) 55%,transparent)}
.marquee{background:color-mix(in srgb,var(--paper-2) 60%,transparent)}
html:not([data-theme="dark"]) body{background:var(--paper)}

/* ============================================================
   DAY MODE = SUNSET  (#F9957F peach -> #F2F5D0 cream)
   Every light-mode token and effect goes warm.
   Dark mode below is untouched: html[data-theme="dark"] keeps
   all of its own token overrides and stays electric blue.
   ============================================================ */
html:not([data-theme="dark"]){
  --blue:#F07A5A;            /* accent fills */
  --blue-strong:#D95B38;     /* solid buttons, active pill */
  --blue-deep:#C24E2B;       /* accent text on light */
  --blue-soft:#FBEBDD;       /* soft chips */
  --accent-text:#C24E2B;
  --paper:#FBF6EC; --paper-2:#F4EDDB;
  --text:#2A211B; --muted:rgba(42,33,27,.60); --line:rgba(120,70,40,.15);
  --on-dark-accent:#F9BCA6;  /* warm accents inside the dark panels */
  --on-dark-muted:rgba(250,242,235,.62);
  --glow:rgba(249,149,127,.20);
  --shadow:0 1px 2px rgba(120,60,30,.06),0 10px 30px rgba(120,60,30,.08);
  --shadow-lg:0 2px 4px rgba(120,60,30,.07),0 24px 50px rgba(120,60,30,.16);
}
/* base wash + breathing glows go sunset */
html:not([data-theme="dark"]) body::before{
  background:linear-gradient(160deg,#FCEFE4 0%,#FAD9C6 26%,#F8EFDA 55%,#F2F5D0 82%,#FBF3E2 100%)}
html:not([data-theme="dark"]) body::after{
  background:
    radial-gradient(ellipse 42% 34% at 16% 18%,rgba(249,149,127,.18),transparent 70%),
    radial-gradient(ellipse 36% 30% at 84% 32%,rgba(244,205,120,.14),transparent 70%),
    radial-gradient(ellipse 48% 36% at 50% 88%,rgba(249,149,127,.12),transparent 70%)}
/* dark hero + dark sections keep their navy, but their glows warm up */
html:not([data-theme="dark"]) .hero-panels span{background:
  radial-gradient(rgba(250,242,235,.07) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(180deg,rgba(249,149,127,.12),transparent 55%),
  var(--dark-2)}
html:not([data-theme="dark"]) .hero-panels span:nth-child(2){animation:dotdrift 46s linear infinite,panelbreatheW 7s ease-in-out infinite}
@keyframes panelbreatheW{0%,100%{box-shadow:inset 0 0 120px rgba(249,149,127,.15)}50%{box-shadow:inset 0 0 170px rgba(249,149,127,.30)}}
html:not([data-theme="dark"]) .hero-aurora i:first-child{background:radial-gradient(circle,rgba(249,149,127,.36),transparent 65%)}
html:not([data-theme="dark"]) .hero-aurora i:last-child{background:radial-gradient(circle,rgba(242,245,208,.30),transparent 65%)}
html:not([data-theme="dark"]) .hero-word span.hot{color:#FFFFFF;
  text-shadow:0 0 24px rgba(249,149,127,.8),0 0 56px rgba(217,91,56,.5)}
html:not([data-theme="dark"]) .section-ocean::before{background:radial-gradient(ellipse 55% 50% at 85% 0%,rgba(249,149,127,.26),transparent 60%)}
html:not([data-theme="dark"]) .cta::before{background:radial-gradient(ellipse 55% 60% at 15% 100%,rgba(249,149,127,.28),transparent 60%)}
/* effect details */
html:not([data-theme="dark"]) .work .edge-glow,
html:not([data-theme="dark"]) .cta-card .edge-glow{
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    var(--blue-deep) 0%,var(--blue) 35%,#F9CDB6 55%,transparent 72%)}
html:not([data-theme="dark"]) .progress{background:linear-gradient(90deg,#D95B38,#F9957F)}
html:not([data-theme="dark"]) .nav-links a.is-active{background:var(--blue-strong)}
html:not([data-theme="dark"]) .eyebrow.ping .idx{animation:idxpingW .9s var(--ease-out) 1}
@keyframes idxpingW{0%{box-shadow:0 0 0 0 rgba(217,91,56,.45)}100%{box-shadow:0 0 0 14px rgba(217,91,56,0)}}

/* ============================================================
   PORTFOLIO SHOTS: shown whole, never cropped, never zooming.
   Contain instead of cover, a white mat behind the image, and
   the hover/base scale removed on every layout width.
   ============================================================ */
.work-shot{background:#fff}
.work-shot img{object-fit:contain;object-position:center;padding:5%;
  transform:translateY(var(--py,0px));transition:transform .35s var(--ease-out)}
.work:hover .work-shot img{transform:translateY(var(--py,0px))}

/* ============================================================
   PORTFOLIO PANELS: the badge sits flat on a clean rounded panel.
   Day: navy badge on warm cream. Night: white badge on deep navy.
   ============================================================ */
.work-shot{background:#F2ECDD}
html[data-theme="dark"] .work-shot{background:#0E1734}
html[data-theme="dark"] img.shot-garage-surf{filter:brightness(0) invert(1)}
img.shot-idt-arch,img.shot-vds{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:cover;object-position:center}

/* cards with a night artwork swap by theme */
html:not([data-theme="dark"]) .work-shot img.shot-night{display:none}
html[data-theme="dark"] .work-shot img.shot-day{display:none}

/* brand swirl mark */
.brand-mark-img{width:34px;height:34px;object-fit:contain;display:inline-block}
.footer .brand-mark-img{width:38px;height:38px;vertical-align:middle;margin-right:.2rem}

/* The mark now carries true transparency, so it needs no blend tricks.
   Blend modes were what made its (formerly faint) square edge visible. */
.brand-mark-img{mix-blend-mode:normal}

/* ============================================================
   PORTFOLIO CAROUSEL: auto-rotates, arrows + dots for manual
   ============================================================ */
.work-carousel{position:relative;overflow:hidden;border-radius:var(--r)}
.work-track{display:block}
.work-track{position:relative}
.work-track .work{position:absolute;left:50%;top:0;width:66%;margin:0;cursor:pointer;
  transform:translateX(-50%);will-change:transform,filter,opacity;
  transition:border-color .2s ease,box-shadow .22s var(--ease-out)}
.work-track .work.is-active{cursor:auto}
.work-track .work:not(.is-active) .edge-glow{opacity:0!important}
@media(max-width:900px){.work-track .work{width:86%}}
.work-track .work+.work{margin-top:0}
/* carousel arrows.
   At rest: no disc at all, just an open compass ring with a gap, a hairline
   tick on each side and a thin chevron, so the control reads as a drawn mark.
   On approach it materialises into a glass disc with a sweeping accent ring. */
.car-btn{position:absolute;top:50%;z-index:3;width:52px;height:52px;border-radius:50%;
  border:0;background:transparent;color:color-mix(in srgb,var(--text) 52%,transparent);
  display:grid;place-items:center;cursor:pointer;overflow:visible;
  --tx:0px;--ty:0px;--s:1;
  transform:translate(var(--tx),calc(-50% + var(--ty))) scale(var(--s));
  transition:transform .28s var(--ease-out),background .3s ease,color .3s ease,
    box-shadow .35s var(--ease-out),backdrop-filter .3s ease}
.car-btn svg{width:19px;height:19px;position:relative;z-index:2;stroke-width:1.6;
  transition:transform .3s var(--ease-out),stroke-width .3s ease}
/* the ring: a broken arc at rest, a chasing accent arc on hover */
.car-btn::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.4px;
  background:conic-gradient(from -60deg,transparent 0deg,currentColor 34deg,currentColor 140deg,transparent 168deg,
    transparent 180deg,currentColor 214deg,currentColor 320deg,transparent 348deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;transition:opacity .3s ease,inset .3s var(--ease-out),padding .3s ease}
/* two hairline ticks that sit in the ring's gaps, like a dial */
.car-btn::after{content:"";position:absolute;inset:-9px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 32%,transparent),transparent 68%);
  transition:opacity .35s ease}
.car-btn:hover,.car-btn:focus-visible{color:var(--blue);--s:1.09;
  background:color-mix(in srgb,var(--card) 72%,transparent);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 10px 26px color-mix(in srgb,var(--blue) 20%,transparent)}
.car-btn:hover::before,.car-btn:focus-visible::before{
  inset:-3px;padding:2px;opacity:1;
  background:conic-gradient(from 0deg,transparent 0deg,var(--blue) 90deg,color-mix(in srgb,var(--blue) 25%,transparent) 200deg,transparent 320deg);
  animation:carring 3.4s linear infinite}
@keyframes carring{to{transform:rotate(1turn)}}
.car-btn:hover::after,.car-btn:focus-visible::after{opacity:1}
.car-btn:hover svg,.car-btn:focus-visible svg{stroke-width:2}
.car-next:hover svg{transform:translateX(3px)}
.car-prev:hover svg{transform:translateX(-3px)}
.car-btn:active{--s:.93}
.car-next:active svg{transform:translateX(7px)}
.car-prev:active svg{transform:translateX(-7px)}
.car-btn:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){.car-btn:hover::before{animation:none}}
.car-prev{left:14px}.car-next{right:14px}
@media(max-width:640px){.car-btn{width:40px;height:40px}.car-prev{left:8px}.car-next{right:8px}}

/* the striped placeholder only exists for missing screenshots;
   never let its stripes peek out from behind a fitted cover */
.work-shot:not(.shot-missing) .shot-fallback{display:none}

@media(max-width:820px){.work .work-shot{aspect-ratio:4/3;min-height:0;height:auto}}
@media(hover:none){.edge-glow{display:none!important}}

/* marquee edge highlight follows the mouse on both rules */
.marquee::before,.marquee::after{content:"";position:absolute;left:0;right:0;height:2px;pointer-events:none;opacity:0;transition:opacity .35s var(--ease-out);
  background:radial-gradient(150px 4px at var(--mx,50%) 50%,var(--blue) 0%,color-mix(in srgb,var(--blue) 45%,transparent) 55%,transparent 80%)}
.marquee::before{top:-1px}
.marquee::after{bottom:-1px}
.marquee:hover::before,.marquee:hover::after{opacity:1}

/* The accent bento card had no visible hover glow: the shared rule tints the
   border and drops an accent halo, but both were lost against its own accent
   fill. It now gets the same coloured halo as its neighbours, with a light
   inner ring so the edge still reads on top of the fill. */
.b-card.b-blue:hover{
  border:0;
  box-shadow:0 0 0 1px color-mix(in srgb,#fff 50%,transparent),
             0 16px 44px color-mix(in srgb,var(--blue) 62%,transparent)}

/* footer AI disclosure sits quietly above the copyright line */
.footer-note{max-width:62ch;opacity:.75;line-height:1.55;margin-bottom:.5rem}

/* ============================================================
   INNER PAGES: service, location and case-study layouts
   ============================================================ */
.page-hero{position:relative;padding:7.5rem 0 3rem;text-align:left}
.page-hero .wrap{position:relative;z-index:1}
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:.6rem;align-items:center;margin-bottom:1.2rem}
.crumbs a{color:var(--accent-text)}
.crumbs a:hover{text-decoration:underline}
.page-hero h1{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2.1rem,5vw,3.6rem);margin:0 0 1rem;max-width:18ch}
.page-lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:56ch;margin:0 0 1.4rem;line-height:1.55}
.page-price{font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--text);margin:0 0 .2rem}
.page-price-note{font-size:.92rem;color:var(--muted);margin:0 0 1.6rem}
.prose{max-width:74ch}
.page-intro{font-size:1.12rem;line-height:1.7;color:var(--text);margin:0 0 2.6rem}
.prose-block{margin-bottom:2.6rem}
.prose-block h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.35rem,2.4vw,1.75rem);margin:0 0 .7rem}
.prose-block p{color:var(--muted);line-height:1.75;margin:0 0 1rem}
.prose-block .check{margin-top:.4rem}
.related-links{display:flex;flex-wrap:wrap;gap:.6rem}
.related-links a{font-size:.92rem;font-weight:500;padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;color:var(--text);transition:border-color .2s ease,background .2s ease}
.related-links a:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));background:var(--blue-soft)}
@media(max-width:700px){.page-hero{padding:6rem 0 2rem}}

/* services index grid + the new in-page service links */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.svc-card{display:flex;flex-direction:column;gap:.6rem;padding:1.7rem 1.6rem;border-radius:26px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .22s var(--ease-out),border-color .2s ease,box-shadow .22s var(--ease-out)}
.svc-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent),0 14px 34px var(--glow)}
.svc-card h2{font-family:var(--display);font-size:1.2rem;margin:0}
.svc-card p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0;flex:1}
.svc-price{font-family:var(--mono);font-weight:700;color:var(--text);font-size:.98rem}
.svc-more{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;color:var(--accent-text)}
.svc-card:hover .svc-more svg{transform:translateX(3px)}
.svc-more svg{transition:transform .25s var(--ease-out)}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr}}
.work-actions{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center}
.link-arrow.subtle{color:var(--muted);font-weight:500}
.link-arrow.subtle:hover{color:var(--text)}

/* section anchors clear the sticky nav when jumped to directly */
#work,#packages,#rates,#process,#faq,#contact{scroll-margin-top:88px}