/* ============================================================
   Content Stack Lab ? Landing page styles
   Built strictly on DS tokens (colors / type / spacing).
   ============================================================ */

.dark-theme {
  --surface-page: var(--surface-dark);
  /* Real surface scale on dark: tint/sunken must differ from the page so the
     alternating section rhythm (tint / sunken / page) survives the dark theme. */
  --surface-tint: rgba(98, 111, 255, 0.06);
  --surface-sunken: rgba(255, 255, 255, 0.03);
  --surface-card: rgba(255, 255, 255, 0.04);
  --text-strong: #ffffff;
  --text-body: rgba(255, 255, 255, 0.85);
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-subtle: var(--text-on-dark-subtle); /* 0.62 white — AA on navy for small text */
  --border-subtle: rgba(255, 255, 255, 0.15);
  --border-default: rgba(255, 255, 255, 0.25);
  --border-strong: rgba(255, 255, 255, 0.4);
  background: var(--surface-page);
  color: var(--text-body);
}

/* Page-heading glow: painted on <main> so the hero background runs
   continuously down to the footer instead of cutting off mid-page.
   Percentage-based tint spans main's full height — one seamless surface. */
.services-page-shell main,
.about-page-shell main,
.contact-page-shell main,
.case-page-shell main,
.blog-page-shell main,
.legal-page-shell main {
  background:
    radial-gradient(1200px 760px at 16% 120px, rgba(98, 111, 255, 0.16), transparent 60%),
    radial-gradient(900px 620px at 86% 40px, rgba(98, 111, 255, 0.05), transparent 55%),
    linear-gradient(180deg, rgba(98, 111, 255, 0.10), rgba(98, 111, 255, 0.04) 55%, rgba(98, 111, 255, 0.02) 100%),
    var(--surface-page);
}
/* Sections inside these pages must not paint over the page wash —
   opaque section backgrounds were creating a hard seam under the hero. */
.services-page-shell main .sec--sunken,
.services-page-shell main .sec--tint,
.about-page-shell main .sec--sunken,
.about-page-shell main .sec--tint,
.contact-page-shell main .sec--sunken,
.contact-page-shell main .sec--tint,
.case-page-shell main .sec--sunken,
.case-page-shell main .sec--tint,
.blog-page-shell main .sec--sunken,
.blog-page-shell main .sec--tint,
.legal-page-shell main .sec--sunken,
.legal-page-shell main .sec--tint,
.services-page-shell main .services-cta,
.about-page-shell main .about-card-footer,
.case-page-shell main .case-cta,
.blog-page-shell main .case-cta,
.contact-page-shell main .case-cta,
.case-page-shell main .case-inner-work,
.case-page-shell main .portfolio-tabs-section,
.services-page-shell main .services-hero,
.about-page-shell main .about-hero,
.contact-page-shell main .contact-hero,
.case-page-shell main .case-hero,
.blog-page-shell main .blog-hero,
.blog-page-shell main .article-hero,
.legal-page-shell main .case-hero {
  background: transparent;
}

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis-stopped { overflow: hidden; }
.lenis-scrolling iframe { pointer-events: none; }
body { font-family: var(--font-sans); color: var(--text-body); background: var(--surface-page); overflow-x: hidden; }
.wrap { max-width: var(--container-xl); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--md { max-width: var(--container-lg); }
::selection { background: var(--periwinkle-200); color: var(--ink-950); }

/* ---- boot splash: static markup inside #root, replaced by the React render ---- */
.boot { min-height: 100vh; display: grid; place-items: center; }
.boot img { width: 64px; height: auto; animation: bootpulse 1.1s var(--ease-out) infinite alternate; }
@keyframes bootpulse { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot img { animation: none; } }

/* ---- shared bits ---- */
.eyebrow { display: inline-flex; align-items: center; gap: .55em; font-size: var(--fs-overline);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--brand); margin: 0; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--brand); border-radius: 2px; }
.dot { color: var(--brand); }

/* Keyboard focus: DS Button ships its own ring; these are the custom controls. */
.hdr__burger:focus-visible,
.hdr__menu-link:focus-visible,
.hdr__link:focus-visible,
.svc__btn:focus-visible,
.faq__row-q:focus-visible,
.contact-chip:focus-visible,
.shader__dots button:focus-visible,
.tst__dots button:focus-visible,
.work__nav-btn:focus-visible,
.case-inner-work__nav-btn:focus-visible,
.portfolio-tab__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
  border-radius: var(--radius-md);
}
.sec { --sec-pad-block: clamp(4rem, 8vw, 7.5rem); padding-block: var(--sec-pad-block); position: relative; }
.sec--tint { background: var(--surface-tint); }
.sec--sunken { background: var(--surface-sunken); }
.sec-head { max-width: 760px; }
.sec-head h2 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h2);
  letter-spacing: var(--ls-tighter); color: var(--text-strong); margin: var(--space-3) 0 0; line-height: var(--lh-snug); text-wrap: balance; }
.sec-head p { color: var(--text-muted); font-size: var(--fs-lead); margin-top: var(--space-4); line-height: var(--lh-body); }
.sec-head--center { margin-inline: auto; text-align: center; }

/* reveal on scroll ? opacity stays 1 ALWAYS so content can never be hidden
   by a frozen transition timeline; the entrance is a subtle transform slide
   only. JS adds .pre to offset, then removes it to slide into place. */
.reveal { transition: transform .65s var(--ease-out); will-change: transform; }
.reveal.pre { transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.pre { transform: none; transition: none; } }

/* ===================== HEADER ===================== */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent; transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base); }
.hdr.scrolled { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(0,0,0,0.05); box-shadow: var(--shadow-sm); }
.hdr__in { height: 76px; display: flex; align-items: center; gap: var(--space-6); }
.hdr__logo { height: 32px; width: auto; }
.hdr__nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.hdr__link { font-size: 1.05rem; font-weight: var(--fw-medium); color: var(--text-body); position: relative; padding: 4px 0; transition: color var(--dur-base); }
.hdr__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--brand); border-radius: 2px; transition: width var(--dur-base) var(--ease-out); }
.hdr__link:hover { color: var(--text-strong); }
.hdr__link:hover::after { width: 100%; }
.hdr__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-strong); cursor: pointer; }
@media (max-width: 920px) { .hdr__nav .hdr__link { display: none; } .hdr__burger { display: inline-flex; } }

/* Full-screen mobile menu. Lives inside the fixed header: z-index -1 keeps the
   bar (logo, burger) clickable above it within the header's stacking context. */
.hdr__menu { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center;
  padding: calc(76px + var(--space-6)) var(--gutter) var(--space-7);
  background: var(--surface-inverse); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); }
.hdr__menu.open { opacity: 1; visibility: visible; }
.hdr__menu-link { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.8rem, 8vw, 2.6rem);
  letter-spacing: var(--ls-tight); color: rgba(255, 255, 255, 0.85); padding: var(--space-2) 0; }
.hdr__menu-link:hover, .hdr__menu-link.active { color: #fff; }
.hdr__menu-cta { margin-top: var(--space-6); }
@media (min-width: 921px) { .hdr__menu { display: none; } }
.hdr.menu-open { background: transparent; box-shadow: none; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hdr.menu-open .hdr__logo { filter: brightness(0) invert(1); }
.hdr.menu-open .hdr__burger { color: #fff; }

/* ===================== HERO ===================== */
.hero { position: relative; overflow: hidden; min-height: min(94vh, 980px); display: flex; align-items: center; cursor: crosshair;
  padding-block: clamp(5rem, 11vh, 8.5rem) clamp(4.5rem, 9vh, 7rem); }
.hero-shader { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--ink-950); }
.hero-shader .shader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-shader .shader__fallback { position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, var(--periwinkle-300), var(--brand) 55%, var(--periwinkle-800)); }
.hero-shader.shader--nogl .shader__canvas { display: none; }
.hero-shader.shader--nogl .shader__fallback { z-index: 0; }

.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__copy { max-width: 100%; cursor: auto; }
.hero h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  line-height: 1.02; letter-spacing: var(--ls-tighter); color: var(--text-strong); margin: var(--space-5) 0 0; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lead { font-size: var(--fs-lead); color: var(--text-muted); margin-top: var(--space-5); max-width: 540px; line-height: var(--lh-body); }
.hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
/* full-bleed hero shader scrim + controls */
.hero-shader__scrim { position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--surface-page) 12%, rgba(255,255,255,.72) 34%, rgba(255,255,255,.18) 56%, rgba(255,255,255,0) 73%); }
.hero__hint { position: absolute; z-index: 3; top: calc(76px + clamp(0.9rem, 3vh, 1.6rem)); right: var(--gutter);
  display: inline-flex; align-items: center; gap: .5em; padding: .45rem .85rem; border-radius: var(--radius-pill);
  background: rgba(10,10,18,.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--white); font-size: var(--fs-xs); font-weight: var(--fw-medium); pointer-events: none; letter-spacing: .01em; }
.hero__hint .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle-300); box-shadow: 0 0 8px var(--periwinkle-300); }
.hero__hud { position: absolute; z-index: 3; bottom: clamp(1.4rem, 4vh, 2.6rem); right: var(--gutter);
  display: inline-flex; align-items: center; gap: var(--space-4); padding: .5rem .6rem .5rem 1.05rem; border-radius: var(--radius-pill);
  background: rgba(10,10,18,.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero__hud .shader__name { color: var(--white); font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); letter-spacing: var(--ls-tight); white-space: nowrap; }
/* Dots stay small visually; the button itself is an enlarged hit area (WCAG 2.5.8). */
.shader__dots { display: flex; }
.shader__dots button { width: 30px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.shader__dots button::after { content: ""; width: 11px; height: 11px; border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,.75);
  transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.shader__dots button:hover::after { background: rgba(255,255,255,.45); }
.shader__dots button.on::after { background: var(--white); width: 26px; border-color: var(--white); }
@media (max-width: 920px) {
  .hero { min-height: auto; cursor: auto; }
  .hero-shader__scrim { background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.52) 44%, rgba(255,255,255,.16) 78%, rgba(255,255,255,0) 100%); }
  .hero__hint { display: none; }
  .hero__hud { right: 50%; transform: translateX(50%); bottom: 1.1rem; }
}

/* ===================== MARQUEE ===================== */
.marq { padding-block: var(--space-8); background: transparent; overflow: hidden; }
.marq__label { text-align: center; color: var(--text-subtle); font-size: 1.1rem; font-weight: var(--fw-medium); margin-bottom: var(--space-6); }
.marq__label b { color: var(--text-body); font-weight: var(--fw-semibold); }
.marq__track { display: flex; width: max-content; gap: clamp(2.5rem, 5vw, 4.5rem); animation: scrollx 42s linear infinite; }
.marq:hover .marq__track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.marq__item { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.4rem; letter-spacing: var(--ls-tight);
  color: var(--ink-300); white-space: nowrap; transition: color var(--dur-base) var(--ease-out); cursor: default; }
.marq__item:hover { color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .marq__track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* ===================== FOUNDER ===================== */
.founder__grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.founder__copy { padding-left: max(var(--gutter), calc((100vw - var(--container-xl)) / 2 + var(--gutter))); padding-right: clamp(2rem, 5vw, 4.5rem); }
.founder__media { position: relative; margin-block: calc(-1 * var(--sec-pad-block)); }
.founder__photo { width: 100%; height: 100%; position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%);
  mask-image: linear-gradient(to left, black 50%, transparent 100%); }
.founder__photo image-slot { width: 100%; height: 100%; display: block; }
.founder__quote { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.18; letter-spacing: var(--ls-tight); color: var(--text-strong); margin: var(--space-4) 0 var(--space-5); text-wrap: balance; }
.founder__body p { color: var(--text-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.founder__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-6) 0; }
.founder__stat { border-left: 2px solid var(--brand-border); padding-left: var(--space-4); }
.founder__stat .n { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 2rem; color: var(--brand); line-height: 1; letter-spacing: var(--ls-tight); }
.founder__stat .l { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; margin-top: .4rem; }
@media (max-width: 860px) { .founder__grid { grid-template-columns: 1fr; } .founder__media { max-width: 360px; margin-block: 0; } .founder__photo { height: auto; aspect-ratio: 5/6; } }

/* ===================== WORK CAROUSEL ===================== */
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.work__nav { display: flex; gap: var(--space-3); }
.work__scroller { display: flex; gap: var(--space-5); overflow-x: auto; padding: var(--space-2) 0 var(--space-5); margin-top: var(--space-7);
  scrollbar-width: none; }
.work__scroller::-webkit-scrollbar { display: none; }
.work__card { flex: 0 0 clamp(290px, 32vw, 400px); cursor: pointer; transition: transform var(--dur-base) var(--ease-out); display: flex; flex-direction: column; gap: var(--space-4); }
.work__card:hover { transform: translateY(-4px); }
.work__thumb { aspect-ratio: 4/5; position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); transition: box-shadow var(--dur-base); }
.work__card:hover .work__thumb { box-shadow: var(--shadow-lg); }
.work__thumb image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.work__info { display: flex; flex-direction: column; gap: var(--space-1); padding-inline: var(--space-2); }
.work__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.6rem; color: var(--text-strong); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); overflow-wrap: anywhere; margin: 0; }
.work__tag { font-size: var(--fs-body); color: var(--text-muted); }

/* ===================== SERVICES ACCORDION ===================== */
.svc { margin-top: var(--space-8); display: flex; flex-direction: column; }
.svc__item { border-bottom: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.svc__item:first-child { border-top: 1px solid rgba(255,255,255,0.1); }
.svc__btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: clamp(1.8rem, 3vw, 2.5rem) 0; font-family: var(--font-sans); }
.svc__titles { display: flex; flex-direction: column; gap: var(--space-1); }
.svc__titles h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-strong); letter-spacing: var(--ls-tight); margin: 0; }
.svc__titles span { color: var(--text-muted); font-size: var(--fs-sm); }
.svc__toggle { flex: none; display: flex; color: var(--text-strong); transition: transform var(--dur-base); opacity: 0.7; }
.svc__item.open .svc__toggle { transform: rotate(180deg); opacity: 1; }
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.svc__item.open .svc__panel { grid-template-rows: 1fr; }
.svc__panel > div { overflow: hidden; }
.svc__panel-in { padding: 0 0 clamp(1.6rem, 2.5vw, 2.2rem) 0; color: var(--text-body); }
.svc__panel-in p { font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: 660px; margin: 0; }
.svc__body { font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: 660px; }
.svc__body p { margin: 0 0 var(--space-3); }
.svc__body p:last-child { margin-bottom: 0; }
.svc__points { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.svc__chip { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--brand-active); background: var(--brand-subtle); border: 1px solid var(--brand-border); border-radius: var(--radius-pill); padding: .45em .95em; }
.svc__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; }
@media (max-width: 640px) { .svc__btn { flex-direction: column; align-items: flex-start; } .svc__toggle { align-self: flex-end; margin-top: -30px; } }

/* ===================== RECOGNITION ===================== */
.rec__box { border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 4rem); background: rgba(255,255,255,0.02); }
.rec__box-title { text-align: center; color: var(--text-muted); font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: var(--ls-overline); text-transform: uppercase; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); font-weight: var(--fw-semibold); }
.rec__logos { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 3vw, 3rem); flex-wrap: wrap; }
.rec__logo { flex: 1 1 140px; min-width: 120px; height: 86px; display: flex; align-items: center; justify-content: center; opacity: 0.72; transition: opacity var(--dur-base), transform var(--dur-base); }
.rec__logo:hover { opacity: 1; transform: translateY(-2px); }
.rec__logo-img { display: block; width: 100%; max-width: 150px; max-height: 70px; object-fit: contain; filter: none; }
.rec__logo-img--white { filter: grayscale(1) brightness(0) invert(1); }

.why__grid { display: flex; justify-content: center; gap: clamp(0.5rem, 1.5vw, var(--space-4)); margin-top: var(--space-8); padding: var(--space-6) 0; flex-wrap: nowrap; perspective: 1000px; }
.why__card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-base), border-color var(--dur-base); flex: 1 1 0; min-width: 0; max-width: 290px; min-height: 360px; display: flex; flex-direction: column; justify-content: center; }
.why__card:nth-child(1) { transform: rotate(0deg); z-index: 1; }
.why__card:nth-child(2) { transform: rotate(3deg) translateY(10px); z-index: 2; }
.why__card:nth-child(3) { transform: rotate(-2deg) translateY(4px); z-index: 3; }
.why__card:nth-child(4) { transform: rotate(4deg) translateY(12px); z-index: 4; }
.why__card:nth-child(5) { transform: rotate(-3deg) translateY(2px); z-index: 5; }
.why__card:hover { transform: translateY(-15px) rotate(0) scale(1.02); box-shadow: var(--shadow-xl); border-color: var(--brand-border); z-index: 10 !important; }
.why__ic { width: 64px; height: 64px; border-radius: var(--radius-md); color: #fff; display: grid; place-items: center; margin-bottom: var(--space-5); box-shadow: var(--shadow-sm); }
/* One accent, graded — the brand's "one color does the heavy lifting" rule. */
.why__card:nth-child(1) .why__ic { background: #2e9bf6; }
.why__card:nth-child(2) .why__ic { background: #a87cf0; }
.why__card:nth-child(3) .why__ic { background: #96b41e; }
.why__card:nth-child(4) .why__ic { background: #f050be; }
.why__card:nth-child(5) .why__ic { background: #e5a23f; }
.why__card h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.2rem, 1.5vw, var(--fs-h4)); color: var(--text-strong); letter-spacing: var(--ls-tight); margin: 0 0 var(--space-3); }
.why__card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-body); margin: 0; flex: 1; }
@media (max-width: 1024px) { .why__grid { flex-wrap: wrap; padding: 0; } .why__card { transform: none !important; flex: 1 1 280px; } }

/* ===================== STEPS ===================== */
.steps__list { display: flex; flex-direction: column; }
.step-row { display: grid; grid-template-columns: 80px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--border-subtle); }
.step-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.step-row__num { display: flex; align-items: center; justify-content: center; }
.step-row__n { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(4rem, 8vw, 6rem); line-height: 1; letter-spacing: var(--ls-tighter); color: transparent; -webkit-text-stroke: 1.5px var(--brand-border); opacity: 0.8; }
.step-row__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-strong); letter-spacing: var(--ls-tight); margin: 0 0 var(--space-3); }
.step-row__body { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin: 0; }
@media (max-width: 640px) { .step-row { grid-template-columns: 60px 1fr; gap: var(--space-4); } }

/* ===================== TESTIMONIALS ===================== */
.tst { position: relative; }
.tst__stage { position: relative; min-height: 1px; }
.tst__card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); padding: clamp(2.2rem, 5vw, 4rem);
  box-shadow: var(--shadow-sm); display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.tst__qmark { color: var(--brand); opacity: .9; }
.tst__quote { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.4; letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0; text-wrap: pretty; }
.tst__by { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.tst__ava { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.1rem; background: linear-gradient(140deg, var(--brand), var(--periwinkle-700)); }
.tst__name { font-weight: var(--fw-bold); color: var(--text-strong); }
.tst__co { color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.tst__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-6); }
/* Dots stay small visually; the button itself is an enlarged hit area (WCAG 2.5.8). */
.tst__dots { display: flex; }
.tst__dots button { width: 30px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.tst__dots button::after { content: ""; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--border-strong);
  transition: background var(--dur-base), width var(--dur-base); }
.tst__dots button.on::after { background: var(--brand); width: 26px; }
@media (max-width: 680px) { .tst__card { grid-template-columns: 1fr; } }

/* ===================== FAQ ===================== */
.faq-split { display: grid; grid-template-columns: 1fr 350px; gap: clamp(4rem, 8vw, 8rem); align-items: flex-start; margin-top: var(--space-8); }
.faq__row { border-bottom: 1px solid rgba(255,255,255,0.1); }
.faq__row-q { width: 100%; text-align: left; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-strong); }
.faq__row-q .ic { transition: transform var(--dur-base); opacity: 0.7; display: flex; }
.faq__row.open .faq__row-q .ic { transform: rotate(180deg); opacity: 1; }
.faq__row-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.faq__row.open .faq__row-a { grid-template-rows: 1fr; }
.faq__row-a > div { overflow: hidden; }
.faq__row-a p { padding-bottom: var(--space-5); color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin: 0; max-width: 680px; }

.faq-split__right { display: flex; flex-direction: column; gap: var(--space-5); }
.faq-card { border-radius: var(--radius-2xl); padding: clamp(1.5rem, 5vw, var(--space-7)); display: flex; flex-direction: column; box-sizing: border-box; }
.faq-card--primary { background: linear-gradient(140deg, var(--brand), var(--periwinkle-700)); color: #fff; box-shadow: var(--shadow-lg); }
.faq-card--primary {
  width: min(100%, 350px);
  min-height: 510px;
  padding: 36px;
}
.faq-card__ava { width: clamp(60px, 15vw, 64px); height: clamp(60px, 15vw, 64px); border-radius: 50%; overflow: hidden; margin-bottom: 28px; }
.faq-card__ava image-slot { width: 100%; height: 100%; display: block; }
.faq-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.08; margin: 0 0 26px; text-wrap: balance; letter-spacing: var(--ls-tight); }
/* DS Button (variant="inverse" block) carries the visual style; this only slots it into the card. */
.faq-card__btn { margin-bottom: 22px; }
.faq-card__foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); line-height: 1.3; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; margin-top: auto; }
.faq-card__foot a { color: #fff; text-decoration: none; font-weight: var(--fw-bold); }
.faq-card__foot .arr { display: flex; flex: none; }

.faq-card--secondary { background: transparent; border: 1px solid rgba(255,255,255,0.1); }
.faq-card__title-sm { font-family: var(--font-sans); font-size: 1.4rem; font-weight: var(--fw-semibold); color: #fff; margin: 0 0 var(--space-2); }
.faq-card__desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--space-6); }
.faq-form { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: var(--space-3); }
.faq-form__input { flex: 1; background: none; border: none; color: #fff; font-size: var(--fs-sm); outline: none; }
.faq-form__input::placeholder { color: rgba(255,255,255,0.3); }
.faq-form__btn { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; padding: 0; line-height: 1; }
@media (max-width: 980px) { .faq-split { grid-template-columns: 1fr; } .faq-split__right { max-width: 500px; margin: 0 auto; width: 100%; } }

/* ===================== CTA + FOOTER (dark) ===================== */
.closer { background: var(--surface-inverse); color: #fff; position: relative; overflow: hidden; }
.closer__glow { position: absolute; inset: 0; pointer-events: none; }
.closer__glow::before { content: ""; position: absolute; left: 50%; top: -10%; transform: translateX(-50%); width: 760px; height: 560px; background: radial-gradient(closest-side, rgba(98,111,255,.5), transparent 70%); filter: blur(20px); }
.cta { position: relative; z-index: 1; text-align: center; padding-block: clamp(4.5rem, 9vw, 8rem); }
.cta .eyebrow { color: var(--periwinkle-300); justify-content: center; }
.cta .eyebrow::before { background: var(--periwinkle-300); }
.cta h2 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: var(--ls-tighter); line-height: 1.05; margin: var(--space-4) auto 0; max-width: 16ch; text-wrap: balance; }
.cta p { color: var(--text-on-dark-muted); font-size: var(--fs-lead); margin: var(--space-5) auto var(--space-7); max-width: 540px; line-height: var(--lh-body); }
.cta__row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.cta__mail { margin-top: var(--space-6); color: var(--text-on-dark-muted); font-size: var(--fs-sm); }
.cta__mail a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }

.ftr { background: var(--surface-inverse-2); color: var(--text-on-dark-muted); border-top: 1px solid rgba(255,255,255,.08); position: relative; z-index: 1; }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); padding-block: clamp(3rem, 6vw, 5rem) var(--space-8); }
.ftr__logo { height: 26px; margin-bottom: var(--space-4); }
.ftr__about { font-size: var(--fs-sm); line-height: var(--lh-body); max-width: 340px; }
.ftr__col h4 { color: #fff; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; margin: 0 0 var(--space-4); }
.ftr__col a { display: block; color: var(--text-on-dark-muted); font-size: var(--fs-sm); padding: .35rem 0; transition: color var(--dur-base); }
.ftr__col a:hover { color: #fff; }
.ftr__bot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-5); border-top: 1px solid rgba(255,255,255,.08); font-size: var(--fs-xs); }
.ftr__bot a { color: var(--text-on-dark-muted); }
.ftr__bot a:hover { color: #fff; }
@media (max-width: 760px) { .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }

/* ============================================================
   SERVICES PAGE STYLING
   ============================================================ */
.hdr__link.active { color: var(--text-strong); }
.hdr__link.active::after { width: 100%; }
/* ---- Dark page shells: one shared header treatment ----
   Every inner page is dark, so header content stays white at all times;
   scrolling only adds a dark translucent background (no light-bar flash). */
.services-page-shell .hdr .hdr__logo,
.about-page-shell .hdr .hdr__logo,
.contact-page-shell .hdr .hdr__logo,
.case-page-shell .hdr .hdr__logo,
.blog-page-shell .hdr .hdr__logo,
.legal-page-shell .hdr .hdr__logo,
.error-page-shell .hdr .hdr__logo {
  filter: brightness(0) invert(1);
}
.services-page-shell .hdr .hdr__link,
.about-page-shell .hdr .hdr__link,
.contact-page-shell .hdr .hdr__link,
.case-page-shell .hdr .hdr__link,
.blog-page-shell .hdr .hdr__link,
.legal-page-shell .hdr .hdr__link,
.error-page-shell .hdr .hdr__link {
  color: rgba(255, 255, 255, 0.82);
}
.services-page-shell .hdr .hdr__link:hover,
.services-page-shell .hdr .hdr__link.active,
.about-page-shell .hdr .hdr__link:hover,
.about-page-shell .hdr .hdr__link.active,
.contact-page-shell .hdr .hdr__link:hover,
.case-page-shell .hdr .hdr__link:hover,
.case-page-shell .hdr .hdr__link.active,
.blog-page-shell .hdr .hdr__link:hover,
.blog-page-shell .hdr .hdr__link.active,
.legal-page-shell .hdr .hdr__link:hover,
.error-page-shell .hdr .hdr__link:hover {
  color: #fff;
}
.services-page-shell .hdr .csl-btn,
.about-page-shell .hdr .csl-btn,
.contact-page-shell .hdr .csl-btn,
.case-page-shell .hdr .csl-btn,
.blog-page-shell .hdr .csl-btn,
.legal-page-shell .hdr .csl-btn,
.error-page-shell .hdr .csl-btn {
  --_bg: #fff;
  --_fg: var(--ink-950);
  --_sh: none;
}
.services-page-shell .hdr .hdr__burger,
.about-page-shell .hdr .hdr__burger,
.contact-page-shell .hdr .hdr__burger,
.case-page-shell .hdr .hdr__burger,
.blog-page-shell .hdr .hdr__burger,
.legal-page-shell .hdr .hdr__burger,
.error-page-shell .hdr .hdr__burger {
  color: #fff;
}
.services-page-shell .hdr.scrolled,
.about-page-shell .hdr.scrolled,
.contact-page-shell .hdr.scrolled,
.case-page-shell .hdr.scrolled,
.blog-page-shell .hdr.scrolled,
.legal-page-shell .hdr.scrolled,
.error-page-shell .hdr.scrolled {
  background: rgba(7, 9, 43, 0.62);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.services-hero {
  min-height: min(48vh, 520px);
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 12vh, 9rem) clamp(3.5rem, 7vh, 5rem);
  position: relative;
}
.services-hero__inner {
  max-width: 980px;
}
.services-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.0;
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
  margin-top: var(--space-4);
  text-wrap: balance;
}
.services-hero__lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin-top: var(--space-5);
  line-height: var(--lh-body);
  max-width: 720px;
}
.services-hero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.services-hero__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.services-hero__nav a:hover {
  background: var(--brand-subtle);
  border-color: var(--brand-border);
  color: var(--brand-active);
}

.tier-sec {
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: transparent;
  color: var(--text-subtle);
  border: 0;
  border-radius: 0;
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  padding: 0;
  letter-spacing: var(--ls-overline);
  margin-bottom: var(--space-4);
}
.tier-badge::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
.tier-content h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-2);
  line-height: 1.08;
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
  margin: var(--space-3) 0 0;
  text-wrap: balance;
}
.tier-tagline {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  margin-top: var(--space-4);
  line-height: var(--lh-body);
  letter-spacing: 0;
}
.tier-desc {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-4);
}
.tier-cta-btn {
  margin-top: var(--space-6);
}
.tier-highlights {
  margin-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.highlight-box {
  background: var(--surface-card);
  border-left: 3px solid var(--brand);
  padding: var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.highlight-box strong {
  color: var(--text-strong);
}

.tier-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.tier-grid--reverse {
  grid-template-columns: 0.85fr 1.15fr;
}
.tier-visual {
  width: 100%;
}
.tier-card-panel {
  position: sticky;
  top: 108px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tier-card-panel:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-lg);
}
.tier-card-panel .panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0 0 var(--space-5);
  letter-spacing: var(--ls-tight);
}
.included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.included-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.included-list li span {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-snug);
}
.included-list a,
.included-list a:visited {
  color: #fff;
}
.svc-check-icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--brand);
}
.panel-visual-placeholder {
  margin-top: var(--space-6);
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.panel-visual-placeholder image-slot,
.panel-visual-img {
  width: 100%;
  height: 100%;
  display: block;
}
.panel-visual-img { object-fit: cover; }
.project-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.project-link {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-3);
  align-items: start;
  color: var(--text-body);
  transition: color var(--dur-base), transform var(--dur-fast);
}
.project-link:hover {
  color: var(--text-strong);
  transform: translateY(-1px);
}
.project-link__check {
  color: var(--periwinkle-400);
  line-height: 1;
  padding-top: 0.18em;
}
.project-link__title {
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

/* Strategic Projects Grid */
.tier2-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.project-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, var(--space-7));
  display: grid;
  grid-template-columns: minmax(56px, 0.12fr) minmax(0, 0.9fr) minmax(280px, 1fr);
  gap: clamp(1rem, 3vw, var(--space-7));
  align-items: start;
  transition: transform var(--dur-slow) var(--ease-spring), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-border);
  box-shadow: var(--shadow-xl);
}
.project-card__num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 2.2rem;
  color: var(--brand);
  opacity: 0.9;
  margin-bottom: 0;
  line-height: 1;
}
.project-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-2);
  line-height: var(--lh-snug);
}
.project-card__tagline {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--periwinkle-300);
  margin-bottom: var(--space-4);
  line-height: var(--lh-snug);
}
.project-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin: var(--space-3) 0 0;
}
.project-card__included {
  border-top: 0;
  border-left: 1px solid var(--border-subtle);
  padding: 0 0 0 var(--space-5);
  margin-bottom: 0;
}
.project-card__included h4 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.project-card__included ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.project-card__included li {
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.project-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: 6px;
}
.project-card__actions {
  grid-column: 2 / 4;
  margin-top: 0;
  padding-top: 0;
}

/* Duplicated FAQ callout layout at bottom */
.services-cta {
  padding-block: clamp(4rem, 8vw, 7.5rem);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
}
.services-cta__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.services-cta__left h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.12;
  color: var(--text-strong);
  margin-top: var(--space-3);
  letter-spacing: var(--ls-tight);
}
.services-cta__desc {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin-top: var(--space-5);
  line-height: var(--lh-body);
}
.inline-card {
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.services-consultation-card {
  margin-left: auto;
}

/* Media Queries for Services Layouts */
@media (max-width: 1024px) {
  .project-card {
    grid-template-columns: 64px 1fr;
  }
  .project-card__included,
  .project-card__actions {
    grid-column: 2;
  }
}
@media (max-width: 768px) {
  .tier-grid, .tier-grid--reverse, .services-cta__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .services-consultation-card {
    max-width: 500px;
    margin-left: 0;
  }
  .tier-grid--reverse .tier-visual {
    order: 2;
  }
  .tier-cta-btn {
    margin-top: var(--space-5);
  }
  .tier-card-panel {
    position: static;
  }
  .project-card {
    grid-template-columns: 1fr;
  }
  .project-card__included {
    grid-column: auto;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4) 0 0;
  }
  .project-card__actions {
    grid-column: auto;
  }
}

/* ============================================================
   ABOUT PAGE STYLING
   ============================================================ */
.about-hero {
  min-height: min(46vh, 500px);
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 12vh, 9rem) clamp(3.5rem, 7vh, 5rem);
}
.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.about-hero__copy {
  max-width: 920px;
}
.about-hero h1,
.about-hero h1 * {
  background: transparent !important;
}
.about-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.0;
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
  text-wrap: balance;
}
.about-hero p:not(.eyebrow) {
  max-width: 740px;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  margin-top: var(--space-5);
}
.about-hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-7);
}
.about-hero__cta .csl-btn--secondary {
  --_bg: transparent;
  --_fg: #fff;
  --_bd: rgba(255, 255, 255, 0.62);
  --_bgh: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.62);
}
.about-hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow-lg);
}
.about-hero__media image-slot {
  width: 100%;
  height: 100%;
  display: block;
}
.about-split {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.about-copy p,
.about-story__body p,
.about-markets {
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-4);
}
.about-copy .csl-btn {
  margin-top: var(--space-4);
}
.about-why-work {
  overflow: hidden;
}
.about-why-work .sec-head {
  max-width: 760px;
}
.about-why-work__grid {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 1.5vw, var(--space-4));
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: var(--space-6) 0;
  perspective: 1200px;
}
.about-why-work__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 0;
  min-width: 0;
  max-width: 290px;
  min-height: 360px;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-spring), border-color var(--dur-base), box-shadow var(--dur-base);
}
.about-why-work__card:nth-child(1) { transform: rotate(0deg); }
.about-why-work__card:nth-child(2) { transform: rotate(3deg) translateY(10px); }
.about-why-work__card:nth-child(3) { transform: rotate(-2deg) translateY(4px); }
.about-why-work__card:nth-child(4) { transform: rotate(4deg) translateY(12px); }
.about-why-work__card:nth-child(5) { transform: rotate(-3deg) translateY(2px); }
.about-why-work__card:hover {
  transform: translateY(-14px) rotate(0) scale(1.02);
  border-color: var(--brand-border);
  box-shadow: var(--shadow-xl);
}
.about-why-work__icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--radius-md);
  color: #fff;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.about-why-work__card h3 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.2rem, 1.5vw, var(--fs-h4));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
}
.about-why-work__card p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0;
}
.about-story {
  display: grid;
  gap: var(--space-8);
}
.about-story__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.about-story__body {
  max-width: 760px;
}
.about-story__body p {
  break-inside: avoid;
}
.about-story__media {
  position: sticky;
  top: 108px;
  width: 420px;
  height: 650px;
  max-width: 100%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow-lg);
}
.about-story__media image-slot {
  width: 100%;
  height: 100%;
  display: block;
}
.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 920px;
}
.about-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.about-markets strong {
  color: var(--text-strong);
}
.about-timeline {
  display: grid;
  gap: var(--space-8);
}
.about-list {
  border-top: 1px solid var(--border-subtle);
}
.about-list__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.about-list__year {
  color: var(--brand);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}
.about-list__row h3 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-2);
}
.about-list__row p {
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin: 0;
}
.about-card-footer {
  background: var(--surface-sunken);
  position: relative;
  overflow: hidden;
}
.about-card-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.75fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  padding-block: clamp(5.5rem, 10vw, 9rem);
}
.about-card-footer .sec-head {
  max-width: 760px;
}
@media (max-width: 900px) {
  .about-hero__grid,
  .about-split,
  .about-card-footer__inner {
    grid-template-columns: 1fr;
  }
  .about-hero__media {
    max-width: 420px;
  }
  .about-story__body {
    columns: 1;
  }
  .about-story__content {
    grid-template-columns: 1fr;
  }
  .about-story__media {
    position: relative;
    top: auto;
    width: min(100%, 420px);
  }
  .about-why-work__grid {
    flex-wrap: wrap;
    margin-top: var(--space-8);
  }
  .about-why-work__card {
    transform: none !important;
    flex: 1 1 280px;
    min-height: 300px;
  }
}
@media (max-width: 620px) {
  .about-list__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .about-why-work__card {
    flex-basis: 100%;
    max-width: none;
  }
}

/* ============================================================
   CONTACT PAGE STYLING
   ============================================================ */
.contact-hero {
  min-height: min(48vh, 520px);
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 12vh, 9rem) clamp(3.5rem, 7vh, 5rem);
}
.contact-hero__inner {
  max-width: 920px;
}
.contact-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.0;
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
  text-wrap: balance;
}
.contact-hero p:not(.eyebrow) {
  max-width: 680px;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  margin-top: var(--space-5);
}
.contact-main-sec {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
.contact-grid {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.contact-panel {
  padding-top: var(--space-2);
}
.contact-panel__head h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
  margin: 0;
  text-transform: uppercase;
}
.contact-panel__head p {
  color: var(--text-body);
  font-size: var(--fs-lead);
  margin: var(--space-4) 0 0;
}
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-5);
  margin-top: var(--space-8);
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-field--full,
.contact-form__actions {
  grid-column: 1 / -1;
}
.contact-field label {
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.contact-field .req { color: var(--periwinkle-300); }
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  background: transparent;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  padding: 0.85rem 0 0.95rem;
  outline: none;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.contact-field textarea {
  resize: vertical;
  min-height: 150px;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--text-subtle);
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--brand);
  box-shadow: none;
}
.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
}
.contact-form__actions {
  margin-top: var(--space-2);
}
.contact-form__status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.contact-interest {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-interest__label {
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.contact-interest__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}
.contact-chip span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}
.contact-chip.active,
.contact-chip:hover {
  border-color: var(--brand-border);
  background: rgba(98, 111, 255, 0.12);
  color: var(--text-strong);
}
.contact-chip.active span {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 2px var(--surface-page);
}
.contact-form__actions .csl-btn { min-width: 180px; }
.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: 108px;
}
.contact-side .faq-card {
  border-radius: var(--radius-lg);
}
@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-side {
    position: static;
  }
}
@media (max-width: 680px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CASE STUDIES PAGE STYLING
   ============================================================ */
.case-hero {
  min-height: min(46vh, 500px);
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 12vh, 9rem) clamp(3.5rem, 7vh, 5rem);
}
.case-hero__inner {
  max-width: 920px;
}
.case-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.0;
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}
.case-hero p:not(.eyebrow) {
  max-width: 740px;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  margin-top: var(--space-5);
}
.portfolio-page-shell .case-hero p:not(.eyebrow) {
  margin-top: clamp(1.0rem, 1vw, 1.5rem);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, var(--space-6));
}
.case-card {
  display: grid;
  grid-template-rows: auto auto;
  min-height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-body);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.case-card:hover {
  transform: translateY(-6px);
}
.case-card__media {
  aspect-ratio: 4 / 5.3;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
}
.case-card__media image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.case-card__body {
  padding: var(--space-4) 0 0;
}
.case-card__body h2 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  overflow-wrap: anywhere;
  margin: 0;
}
.case-card__body p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: var(--space-1) 0 0;
}
.case-cta {
  background: var(--surface-page);
}
.case-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 350px);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.case-cta__actions {
  margin-top: var(--space-7);
}
@media (max-width: 860px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .case-cta__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .case-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PORTFOLIO PAGE ? BENTO GRID
   ============================================================ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(200px, 23vw, 270px);
  grid-auto-flow: dense;
  gap: clamp(1rem, 1.6vw, var(--space-5));
}
.bento-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-strong);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--dur-slow) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.bento-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-brand);
}
/* size variants */
.bento-card--lg   { grid-column: span 2; grid-row: span 2; }
.bento-card--wide { grid-column: span 2; }
.bento-card--tall { grid-row: span 2; }

.bento-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.bento-card__media image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* hover-reveal caption */
.bento-card__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 9, 43, 0) 35%, rgba(7, 9, 43, 0.55) 70%, rgba(7, 9, 43, 0.9));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.bento-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.3rem, 2vw, var(--space-6));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.bento-card__caption h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.bento-card:hover .bento-card__overlay,
.bento-card:focus-within .bento-card__overlay {
  opacity: 1;
}
.bento-card:hover .bento-card__caption,
.bento-card:focus-within .bento-card__caption {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  /* no hover available ? keep titles visible */
  .bento-card__overlay { opacity: 1; }
  .bento-card__caption { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(190px, 40vw, 240px);
  }
  .bento-card--lg { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-card--lg,
  .bento-card--wide { grid-column: span 1; }
}

/* ============================================================
   ARTICLE, BLOG, AND LEGAL PAGES
   ============================================================ */
.blog-hero,
.article-hero {
  min-height: min(46vh, 500px);
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 12vh, 9rem) clamp(3.5rem, 7vh, 5rem);
}
.blog-hero__inner,
.article-hero__inner {
  max-width: 920px;
}
.blog-hero h1,
.article-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.0;
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
  text-wrap: balance;
}
.blog-hero p:not(.eyebrow),
.article-hero p:not(.eyebrow) {
  max-width: 760px;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  margin-top: var(--space-5);
}
.article-hero--narrow {
  min-height: min(34vh, 380px);
  padding-block: clamp(6rem, 10vh, 7.5rem) clamp(2.5rem, 5vh, 3.5rem);
}
.article-hero--narrow .article-hero__inner { max-width: 760px; }
.article-hero p.legal-effective {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--periwinkle-300);
  margin-top: var(--space-4);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, var(--space-6));
}
.blog-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.8vw, var(--space-6));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  color: var(--text-body);
  transition: transform var(--dur-slow) var(--ease-spring), border-color var(--dur-base), box-shadow var(--dur-base);
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-border);
  box-shadow: var(--shadow-lg);
}
.blog-card__tag {
  width: fit-content;
  color: var(--periwinkle-300);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
}
.blog-card h2 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: var(--lh-snug);
  margin: var(--space-4) 0 var(--space-3);
  letter-spacing: var(--ls-tight);
}
.blog-card p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0;
}
.blog-card__read {
  margin-top: auto;
  padding-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  color: #fff;
  font-weight: var(--fw-semibold);
}
.article-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.article-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}
.article-visual image-slot {
  width: 100%;
  height: 100%;
  display: block;
}
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.article-meta-row span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  background: rgba(255,255,255,0.04);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.38fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.article-single {
  max-width: 860px;
}
.article-aside {
  position: sticky;
  top: 108px;
  display: grid;
  gap: var(--space-3);
}
.article-fact {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.035);
}
.article-fact span {
  display: block;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  margin-bottom: var(--space-2);
}
.article-fact strong {
  color: var(--text-strong);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.article-body {
  max-width: 820px;
}
.article-body h2 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: var(--space-8) 0 var(--space-4);
}
.article-body h2:first-child {
  margin-top: 0;
}
.article-body p,
.article-body li {
  color: var(--text-body);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.8;
}
.article-body ul {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.2rem;
}
.article-overview {
  margin-bottom: var(--space-7);
}
.article-lead {
  color: var(--text-strong);
  font-style: italic;
  font-weight: var(--fw-medium);
}
/* Bold toggle wraps text in <b>; break it out of the lead's italic so the
   admin Bold button reads as bold, not bold-italic. */
.article-lead b,
.article-lead strong {
  font-style: normal;
  font-weight: var(--fw-bold);
}
.article-body li strong {
  color: var(--text-strong);
}
.article-cta {
  margin-top: var(--space-8);
  padding: clamp(1.5rem, 3vw, var(--space-7));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.045);
}
.article-cta h3 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-5);
}
.case-inner-work {
  background: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
}
.case-inner-work .work__head {
  flex-direction: column;
  align-items: flex-start;
}
.case-inner-work__slider {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding: var(--space-2) 0 var(--space-5);
  margin-top: var(--space-7);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.case-inner-work__slider::-webkit-scrollbar {
  display: none;
}
.case-inner-work__card {
  flex: 0 0 clamp(320px, 42vw, 460px);
  scroll-snap-align: start;
  color: var(--text-body);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.case-inner-work__nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.work__nav-btn,
.case-inner-work__nav-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast);
}
.work__nav-btn:hover,
.case-inner-work__nav-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--brand-border);
  transform: translateY(-1px);
}
.case-inner-work__card:hover {
  transform: translateY(-6px);
}
.case-inner-work__media {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.case-inner-work__media image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.case-inner-work__body {
  padding-top: var(--space-4);
}
.case-inner-work__body .work__title {
  font-size: 1.6rem;
}
.case-inner-work__body .work__tag {
  font-size: var(--fs-body);
}
@media (max-width: 980px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .article-hero__grid,
  .article-layout {
    grid-template-columns: 1fr;
  }
  .article-aside {
    position: static;
  }
  .article-visual {
    max-width: 420px;
  }
}
@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .case-inner-work__nav {
    width: 100%;
  }
}

/* ===================== PROJECTS SUB-OFFERINGS ===================== */
.projects-sub-hero .services-hero__inner {
  max-width: 1120px;
}
.projects-sub-nav {
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 980px;
}
.projects-sub-nav a {
  white-space: normal;
  text-align: left;
}
.project-offering {
  scroll-margin-top: 110px;
}
.project-offering__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.project-offering__main h2 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: var(--space-4) 0 var(--space-3);
  overflow-wrap: anywhere;
}
.project-offering__tagline {
  color: var(--text-strong);
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  font-style: italic;
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-5);
  max-width: 760px;
}
.project-offering__body {
  color: var(--text-body);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.85;
  max-width: 820px;
  margin: 0 0 var(--space-6);
}
.project-offering__included {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.035);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  position: sticky;
  top: 110px;
}
.project-offering__included h3 {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  margin: 0 0 var(--space-5);
}
.project-offering__included ul {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.project-offering__included li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}
@media (max-width: 860px) {
  .project-offering__grid {
    grid-template-columns: 1fr;
  }
  .project-offering__included {
    position: static;
  }
}
/* ===================== BLOG ARTICLE REFERENCE LAYOUT ===================== */
.blog-post-hero {
  min-height: min(52vh, 560px);
}
.blog-post-hero h1 {
  max-width: 980px;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.0;
}
.blog-article-sec {
  padding-top: clamp(4rem, 8vw, 7rem);
}
.blog-article-wrap {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(300px, 370px);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.blog-article-body {
  max-width: 760px;
  margin: 0;
}
.blog-article-body h2 {
  position: relative;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: var(--lh-snug);
  margin: clamp(2.4rem, 4vw, 3.2rem) 0 var(--space-3);
}
.blog-article-body h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
  margin-bottom: var(--space-3);
}
.blog-article-body h2:first-child {
  margin-top: 0;
}
.blog-article-body p,
.blog-article-body li {
  font-size: clamp(.98rem, 1.1vw, 1.06rem);
}
.blog-article-body p {
  margin: 0 0 var(--space-5);
}
.blog-article-body p:last-child {
  margin-bottom: 0;
}
.blog-article-body ul {
  margin: var(--space-4) 0 clamp(1.8rem, 3vw, 2.4rem);
}
.blog-article-body li p {
  margin: 0;
}
.blog-article-lead {
  color: var(--text-strong);
  font-size: clamp(1.04rem, 1.2vw, 1.14rem) !important;
}
.blog-source-line {
  margin-top: .35rem !important;
  font-size: var(--fs-sm) !important;
  overflow-wrap: anywhere;
}
.blog-booking {
  max-width: 370px;
  position: sticky;
  top: 112px;
  margin: 0;
}
.blog-booking .faq-card {
  width: 100%;
}
@media (max-width: 940px) {
  .blog-article-wrap {
    grid-template-columns: 1fr;
    max-width: 820px;
  }
  .blog-booking {
    position: static;
    max-width: 390px;
    margin: clamp(2rem, 6vw, 4rem) auto 0;
  }
}
@media (max-width: 640px) {
  .blog-post-hero h1 {
    font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  }
  .blog-booking {
    max-width: 100%;
  }
}
/* ===================== 404 PAGE ===================== */
.not-found-hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding-block: clamp(7rem, 13vh, 10rem) clamp(4rem, 8vh, 6rem);
  background:
    radial-gradient(circle at 82% 28%, rgba(143, 154, 255, 0.2), transparent 30rem),
    linear-gradient(145deg, var(--ink-950), #101348 58%, var(--surface-dark));
}

.not-found-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.not-found-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: var(--fw-black);
  line-height: 1.0;
  color: var(--white);
  margin: var(--space-4) 0 0;
  text-wrap: balance;
}

.not-found-hero p:not(.eyebrow) {
  max-width: 600px;
  margin-top: var(--space-5);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.not-found-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.not-found-hero__code {
  position: absolute;
  right: max(var(--gutter), 5vw);
  bottom: clamp(2rem, 7vw, 6rem);
  display: flex;
  gap: clamp(0.25rem, 1.2vw, 1rem);
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 18rem);
  font-weight: var(--fw-black);
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}

.not-found-hero__code span:nth-child(2) {
  color: rgba(143, 154, 255, 0.16);
}

@media (max-width: 760px) {
  .not-found-hero {
    align-items: start;
    padding-top: 8.5rem;
  }

  .not-found-hero__code {
    right: var(--gutter);
    bottom: 2rem;
    font-size: clamp(5rem, 28vw, 9rem);
  }
}

.blog-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.blog-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: var(--text-body);
  font-size: var(--fs-sm);
}

.blog-table th,
.blog-table td {
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-body);
}

.blog-table th {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   PORTFOLIO TABBED EXPERIENCE
   ============================================================ */
.portfolio-tabs-section {
  background: var(--surface-dark);
  padding-block: clamp(1rem, 3vw, 2.25rem) clamp(4rem, 8vw, 7rem);
}

.portfolio-tabs {
  display: grid;
  gap: 0;
}

.portfolio-tab {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.portfolio-tab:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.portfolio-tab__trigger {
  width: 100%;
  min-height: clamp(5.4rem, 8vw, 7.2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(1.25rem, 2.4vw, 2.2rem) 0;
  border: 0;
  background: transparent;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}

.portfolio-tab__trigger span {
  display: grid;
  gap: 0.35rem;
}

.portfolio-tab__trigger strong {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.35vw, 2.55rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: 0;
}

.portfolio-tab__trigger em {
  color: rgba(255, 255, 255, 0.64);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-style: normal;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.portfolio-tab__trigger i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-right: 2.5px solid rgba(255, 255, 255, 0.68);
  border-bottom: 2.5px solid rgba(255, 255, 255, 0.68);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}

.portfolio-tab.active .portfolio-tab__trigger i {
  transform: rotate(225deg);
  border-color: var(--periwinkle-300);
}

.portfolio-tab__panel {
  padding: 0 0 clamp(1.75rem, 3.5vw, 3rem);
}

.portfolio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.portfolio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 34px;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--periwinkle-600);
  font-size: clamp(0.84rem, 1vw, 0.98rem);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.portfolio-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--periwinkle-400);
  flex: 0 0 auto;
}

.portfolio-bento {
  display: block;
  column-count: 3;
  column-gap: clamp(1rem, 1.6vw, 1.4rem);
}

.portfolio-tile {
  border-radius: 22px;
  min-height: 0;
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}
.portfolio-tile .bento-card__media {
  position: static;
  z-index: auto;
}
.portfolio-tile .portfolio-tile__empty {
  position: static;
  aspect-ratio: 4 / 3;
}

.portfolio-tile .bento-card__caption {
  opacity: 1;
  transform: none;
}

.portfolio-tile .bento-card__overlay {
  opacity: 1;
  background: linear-gradient(180deg, rgba(7, 9, 43, 0.06), rgba(7, 9, 43, 0.76));
}

.portfolio-tile .bento-card__caption h2 {
  max-width: 80%;
  font-size: clamp(1rem, 1.35vw, 1.35rem);
}

@media (max-width: 920px) {
  .portfolio-tab__trigger {
    min-height: auto;
  }

  .portfolio-bento {
    column-count: 2;
  }
}

@media (max-width: 620px) {
.portfolio-tab__trigger {
    align-items: flex-start;
  }

  .portfolio-tab__trigger strong {
    font-size: clamp(1.7rem, 9vw, 2.8rem);
  }

  .portfolio-pills {
    gap: 0.35rem;
  }

  .portfolio-pill {
    width: 100%;
    justify-content: flex-start;
  }

  .portfolio-bento {
    column-count: 1;
  }
}

/* CSL admin comment fixes */
.hero__copy { max-width: min(980px, 100%); }
.hero h1 { max-width: 100%; text-wrap: balance; }
.case-hero__inner,
.blog-hero__inner,
.article-hero__inner,
.portfolio-hero__inner,
.services-hero__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
}
.article-rich { display: grid; gap: var(--space-4); }
.article-rich p { margin: 0; }
.article-rich ul,
.article-rich ol { margin: 0; display: grid; gap: var(--space-3); padding-left: 1.2rem; }
.article-rich em,
.article-note { font-style: italic; color: var(--text-strong); }
.blog-card { min-height: 230px; padding: clamp(1.1rem, 2vw, 1.6rem); }
.blog-card p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-grid { gap: clamp(.9rem, 1.6vw, 1.25rem); }
@media (max-width: 760px) { .hero h1 { max-width: 100%; } }
.portfolio-tile__img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
}
.portfolio-tile__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.45);
  font-weight: var(--fw-semibold);
}
.portfolio-tile__link {
  display: contents;
  color: inherit;
}
/* Rich CMS heading support */
.hero-rich-heading {
  max-width: 100%;
  text-wrap: balance;
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: var(--ls-tighter);
  color: var(--text-strong);
}
.hero-rich-heading p,
.hero-rich-heading h1,
.hero-rich-heading h2 {
  margin: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.hero-rich-heading em { font-style: normal; color: var(--brand); }
.hero-rich-heading strong { font-weight: inherit; }
@media (max-width: 760px) { .hero-rich-heading { max-width: 100%; } }

/* 404 action button guard */
.not-found-hero__actions .csl-btn {
  min-height: 56px;
  padding-inline: clamp(1.25rem, 2.5vw, 1.65rem);
  font-size: 1rem;
  text-decoration: none;
}
@media (max-width: 520px) {
  .not-found-hero__actions { width: 100%; }
  .not-found-hero__actions .csl-btn { width: 100%; justify-content: center; }
}
.not-found-hero__actions .csl-btn--secondary {
  --_bg: #fff;
  --_fg: var(--ink-950);
  --_bd: rgba(255,255,255,.72);
  --_bgh: var(--ink-100);
  color: var(--ink-950) !important;
}
.not-found-hero__actions .csl-btn--secondary *,
.not-found-hero__actions .csl-btn--secondary .csl-btn__icon {
  color: var(--ink-950) !important;
}

/* ===== Inner-page hero alignment ==================================
   Every inner-page hero (.case-hero / .services-hero / .about-hero /
   .contact-hero / .blog-hero / .article-hero) is a flex container with
   align-items:center. A flex item with no explicit width shrink-wraps to
   its text, and the .wrap margin:auto then centres that shrunk block —
   which is why headings looked centred. width:100% makes the inner fill
   the container-xl wrap so its content left-aligns with the grid below,
   exactly like the homepage hero (.hero__inner{width:100%}). */
.case-hero__inner,
.services-hero__inner,
.contact-hero__inner,
.blog-hero__inner,
.article-hero__inner,
.about-hero__grid {
  width: 100%;
  max-width: var(--container-xl) !important;
  margin-inline: auto !important;
  text-align: left !important;
}
.case-hero__inner > *,
.services-hero__inner > *,
.contact-hero__inner > *,
.blog-hero__inner > *,
.article-hero__inner > *,
.about-hero__copy > * {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.about-hero__copy { max-width: 920px; margin-inline: 0 !important; }
.services-hero__nav { justify-content: flex-start !important; }

/* ===== Inner-page hero inset ========================================
   Hero text only: same container as the content below, plus a fixed
   left inset (~200px right of the content edge at desktop width,
   scaling down with the viewport). Applies to portfolio, case studies,
   services, strategic projects, about, blog, and contact heroes. */
@media (min-width: 761px) {
  .case-page-shell .case-hero__inner,
  .services-page-shell .services-hero__inner,
  .about-page-shell .about-hero__grid,
  .blog-page-shell .blog-hero__inner,
  .contact-page-shell .contact-hero__inner,
  .legal-page-shell .article-hero__inner {
    padding-left: calc(var(--gutter) + clamp(3rem, 12.5vw, 12.5rem));
  }
}

/* Blog post page: hero shares the article body's centered 1180px
   container so the heading starts on the same line as the paragraphs. */
.blog-page-shell .blog-post-hero .article-hero__inner {
  max-width: 1180px !important;
  width: 100%;
  margin-inline: auto !important;
}