/* Home — restrained glassmorphism layer. Loaded after home.css (pages/page-manifest.mjs).
   Calm / precise / editorial: glass only where something sits over a gradient; copy, order and links untouched. */

:root{
  --g-base:#f7f8fa;
  --g-navy:#101828;
  --g-navy-2:#111827;
  --g-ink:#111827;
  --g-ink-2:#4b5563;
  --g-on-dark:#f9fafb;
  --g-cobalt:#1b62ed;           /* same as --blue; the single accent */
  --glass-light:rgba(255,255,255,.66);
  --glass-light-strong:rgba(255,255,255,.78);
  --glass-dark:rgba(255,255,255,.10);
  --glass-dark-hover:rgba(255,255,255,.15);
  --glass-border-light:rgba(15,23,42,.08);
  --glass-border-dark:rgba(255,255,255,.18);
  --glass-blur:blur(16px) saturate(130%);
  --glass-shadow:0 24px 64px -36px rgba(16,24,40,.28);
  --radius-card:24px;
  --radius-btn:12px;
  --g-motion:200ms;
}
@media (max-width:700px){:root{--glass-blur:blur(12px) saturate(130%)}}

body{background:var(--g-base);color:var(--g-ink)}
.work,.methods{background:transparent}
.about{background:#fff}

/* ---------- Header: near-transparent at the top of the hero, glass bar once scrolled ---------- */
.site-header{transition:background-color var(--g-motion) ease,border-color var(--g-motion) ease,color var(--g-motion) ease,box-shadow var(--g-motion) ease}
.site-header[data-surface="dark"]:not([data-scrolled="true"]){background:rgba(16,24,40,.12);border-bottom-color:transparent}
.site-header[data-surface="dark"][data-scrolled="true"]{background:rgba(16,24,40,.62);border-bottom-color:rgba(255,255,255,.14);box-shadow:0 12px 40px -28px rgba(0,0,0,.6)}
.site-header[data-surface="light"]{background:var(--glass-light-strong);border-bottom-color:var(--glass-border-light);box-shadow:0 12px 40px -30px rgba(16,24,40,.35)}
/* The header inquiry button is a shared component (7px on every page); the 12px radius applies to home-only buttons. */
/* Mobile menu: glass panel over a dimmed page. */
.site-header .mobile-menu{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:20px}
.site-header[data-surface="dark"] .mobile-menu{background:rgba(16,24,40,.82);border-color:var(--glass-border-dark)}
.site-header[data-surface="light"] .mobile-menu{background:var(--glass-light-strong);border-color:var(--glass-border-light)}
.site-header.is-mobile-menu-open{overflow:visible}
.site-header.is-mobile-menu-open::after{content:"";position:fixed;inset:var(--header-height) 0 0 0;z-index:-1;background:rgba(16,24,40,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- Hero: navy with two soft blooms; the headline sits directly on it ---------- */
.hero{background:var(--g-navy)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(56rem 34rem at 18% 22%,rgba(27,98,237,.34),transparent 62%),
    radial-gradient(44rem 30rem at 82% 70%,rgba(167,139,250,.22),transparent 64%),
    radial-gradient(30rem 22rem at 55% 100%,rgba(255,255,255,.06),transparent 70%)}
.hero__copy::before{background:radial-gradient(ellipse,rgba(16,24,40,.78) 15%,rgba(16,24,40,.45) 48%,transparent 72%)}
/* Every home-page button shares the 12px radius (the header button is a shared 7px component). */
.hero-inquiry__button,main .motion-cta{border-radius:var(--radius-btn)}
.hero .motion-cta{border-radius:var(--radius-btn);border-color:rgba(255,255,255,.28);background:var(--glass-dark);color:var(--g-on-dark);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:background-color var(--g-motion) ease,border-color var(--g-motion) ease}
.hero .motion-cta:hover,.hero .motion-cta:focus-visible{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff}


/* ---------- Final CTA: navy gradient continues the hero; content on one glass panel ---------- */
.cta-section{position:relative;isolation:isolate;padding-block:120px;background:linear-gradient(180deg,var(--g-navy-2),#0b1220)}
.cta-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48rem 28rem at 20% 20%,rgba(27,98,237,.28),transparent 62%),radial-gradient(40rem 26rem at 85% 85%,rgba(167,139,250,.16),transparent 64%)}
.cta-panel{background:var(--glass-dark);border:1px solid var(--glass-border-dark);border-radius:var(--radius-card);color:var(--g-on-dark);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.cta-panel .eyebrow{color:#bcd3ff}
.cta-panel .motion-cta{border-radius:var(--radius-btn)}
/* Panel keeps the shared hover width growth from static-pages.css; vertical padding trimmed 15% (80/100 → 68/85). */
.cta-panel{padding-top:68px;padding-bottom:85px}
@media (max-width:960px){.cta-panel{padding-top:41px;padding-bottom:41px}}
@media (max-width:700px){.cta-panel{padding-top:34px;padding-bottom:34px}}

/* ---------- Focus, motion, fallbacks ---------- */
.hero .motion-cta:focus-visible,.cta-panel .motion-cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.site-header,.hero .motion-cta{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header[data-surface="dark"][data-scrolled="true"]{background:rgba(16,24,40,.96)}
  .site-header[data-surface="light"]{background:#fff}
  .hero .motion-cta,.cta-panel{background:rgba(16,24,40,.92)}
  .site-header[data-surface="dark"] .mobile-menu{background:#101828}
}

/* ---------- Portfolio: image is the subject; a glass label sits on its lower edge ---------- */
.portfolio-card{border-radius:20px;border-color:var(--glass-border-light);box-shadow:var(--glass-shadow);transition:border-color var(--g-motion) ease}
.portfolio-card:hover,.portfolio-card:focus-visible{transform:none;border-color:rgba(27,98,237,.35)}
.portfolio-card__image{position:relative;aspect-ratio:1/1}
.portfolio-card__image img{transition:transform var(--g-motion) ease}
.portfolio-card:hover .portfolio-card__image img{transform:scale(1.02)}
.portfolio-card .portfolio-brand-cover{background:rgba(12,22,28,.22)}
.portfolio-card__caption{position:absolute;right:12px;bottom:12px;left:12px;z-index:2;min-height:0;align-items:center;gap:12px;padding:14px 18px;border:1px solid rgba(255,255,255,.55);border-radius:14px;
  background:rgba(255,255,255,.72);color:var(--g-ink);transition:background-color var(--g-motion) ease,border-color var(--g-motion) ease}
.portfolio-card__caption h3{font-size:17px;line-height:1.3}
.portfolio-card__label{opacity:1;color:var(--g-ink-2);font-size:11px;font-weight:700;letter-spacing:.02em}
.portfolio-card:hover .portfolio-card__caption{background:rgba(255,255,255,.84);border-color:rgba(255,255,255,.9)}
/* The track translates every frame, so the blur runs only while it is paused (hover/focus) — otherwise 12 blurred regions re-render per frame. */
.portfolio-marquee:hover .portfolio-card__caption,.portfolio-marquee:has(.portfolio-card:focus-visible) .portfolio-card__caption{-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%)}
.portfolio-marquee::before{background:linear-gradient(90deg,var(--g-base),transparent)}
.portfolio-marquee::after{background:linear-gradient(-90deg,var(--g-base),transparent)}
.portfolio-marquee__track{padding-bottom:36px}
@media (prefers-reduced-motion:reduce){.portfolio-card:hover .portfolio-card__image img{transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.portfolio-card__caption{background:rgba(255,255,255,.92)}}

/* ---------- Services: deep navy band with four dark glass cards ---------- */
.services{position:relative;isolation:isolate;background:var(--g-navy);color:var(--g-on-dark)}
.services::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(44rem 26rem at 12% 10%,rgba(27,98,237,.26),transparent 64%),radial-gradient(36rem 24rem at 92% 92%,rgba(167,139,250,.14),transparent 64%)}
.services .eyebrow{background:rgba(255,255,255,.10);color:#bcd3ff}
.services .section-title{color:var(--g-on-dark)}
.services__support{color:rgba(249,250,251,.72)}
.service-card{border:1px solid var(--glass-border-dark);border-radius:var(--radius-card);background:var(--glass-dark);color:var(--g-on-dark);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);
  transition:background-color var(--g-motion) ease,border-color var(--g-motion) ease}
.service-card:hover,.service-card:focus-visible{transform:none;box-shadow:var(--glass-shadow);background:var(--glass-dark-hover);border-color:rgba(255,255,255,.28)}
.service-card__index{color:#bcd3ff}
.service-card h3{color:var(--g-on-dark)}
.service-card p{color:rgba(249,250,251,.74)}
.service-card__more{color:#fff}
.service-card__arrow{transition:transform var(--g-motion) ease}
.service-card:hover .service-card__arrow,.service-card:focus-visible .service-card__arrow{transform:translateX(5px)}
.service-card:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.service-card,.service-card__arrow{transition:none}.service-card:hover .service-card__arrow{transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.service-card{background:rgba(255,255,255,.14)}}

/* ---------- Process: six glass steps on a horizontal timeline; vertical on mobile ---------- */
.process{background:transparent}
.process-track{gap:20px}
.process-track::before{display:block;top:96px;right:8%;left:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(15,23,42,.18) 12%,rgba(15,23,42,.18) 88%,transparent);transform:none}
.reveal-ready .process-track:not(.is-visible)::before{transform:scaleX(0)}
.process-step{padding:22px 16px 26px;border:1px solid var(--glass-border-light);border-radius:20px;background:var(--glass-light);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.process-step__visual{border-radius:12px}
.process-step h3{margin-top:18px;font-size:18px;color:var(--g-ink)}
.process-step p{color:var(--g-ink-2)}
/* The step the cursor is working on reads as "current": cobalt hairline and title. It follows the scene animation (home.js). */
.process-step{transition:border-color var(--g-motion) ease,box-shadow var(--g-motion) ease}
.process-step.is-working{border-color:rgba(27,98,237,.35);box-shadow:0 0 0 1px rgba(27,98,237,.18) inset,var(--glass-shadow)}
.process-step.is-working h3{color:var(--g-cobalt)}
.process-step.is-working .process-step__visual{box-shadow:0 0 0 2px rgba(27,98,237,.35)}
@media (prefers-reduced-motion:reduce){.process-step{transition:none}}
@media (max-width:960px){
  .process-track{gap:16px;padding-left:0}
  .process-track::before{top:24px;bottom:24px;right:auto;left:calc(16px + 56px);width:1px;height:auto;background:linear-gradient(180deg,transparent,rgba(15,23,42,.18) 6%,rgba(15,23,42,.18) 94%,transparent)}
  .reveal-ready .process-track:not(.is-visible)::before{transform:scaleY(0);transform-origin:top center}
  .process-step{padding:16px}
  .process-step h3{margin-top:0}
}
@media (max-width:700px){.process-step{gap:14px;grid-template-columns:96px minmax(0,1fr)}.process-step__visual{width:96px}.process-track::before{left:calc(16px + 48px)}}
@media (prefers-reduced-motion:reduce){.process-track::before{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.process-step{background:#fff}}

/* ---------- About: reading section stays white; proof points become a ruled list with a glass number pill ---------- */
.about-proof{gap:0}
.about-proof__item{padding:22px 4px;border:0;border-radius:0;border-bottom:1px solid var(--glass-border-light);background:transparent;transition:none}
.about-proof__item:first-child{border-top:1px solid var(--glass-border-light)}
.about-proof__item>span{width:34px;height:34px;border:1px solid rgba(27,98,237,.22);border-radius:999px;background:rgba(27,98,237,.06);color:var(--g-cobalt);font-size:12px;font-weight:700}
.about-proof__item:hover>span{background:rgba(27,98,237,.12);color:var(--g-cobalt)}
.about-proof__item strong{color:var(--g-ink)}
.about-proof__item p{color:var(--g-ink-2)}

/* ---------- How we work: the number is the glass; everything else is type and whitespace ---------- */
.method-number{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--glass-border-light);border-radius:999px;
  background:var(--glass-light);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:var(--g-cobalt);font-size:13px;letter-spacing:.12em}
.method-copy h3{color:var(--g-ink)}
.method-copy p{color:var(--g-ink-2)}
.method-media{border-radius:var(--radius-card);box-shadow:var(--glass-shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.method-number{background:#fff}}