/* ==========================================================================
   Umbak Technologies — Shared design system
   Palette: near-white / ink black + brand accents (lime, orange)
   Type: Onest
   ========================================================================== */

/* ===================== Reset / base ===================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; -webkit-font-smoothing:antialiased; text-size-adjust:100%; }
body{
  background:#ffffff; color:#111111; font-family:'Onest',system-ui,sans-serif;
  overflow-x:hidden; line-height:1.5; font-optical-sizing:auto;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Reduced motion: keep short opacity cross-fades, drop transform-driven motion (Apple HIG) */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
  .reveal, .reveal-scale, .reveal-panel, .line-inner, .word,
  .hero-eyebrow, .hero-rating, .hero-ctas, #home .hero-card, .hero-partners, .hero-watermark,
  .about-globe-note, .about-footer-row, .create-band li, .works-grid li, .service-row-item, .stat-item{
    transition:opacity .25s ease !important;
    transform:none !important;
  }
  #page-loader{ transition:opacity .25s ease !important; transform:none !important; }
  .loader-center{ transition:opacity .2s ease !important; transform:none !important; }
  .modal-panel{ transition:opacity .2s ease !important; transform:none !important; }
  .nav-menu-list li button{ transition:opacity .2s ease !important; transform:none !important; }
  .work-card.is-tilting{ transform:none !important; }
}
@media (prefers-reduced-transparency: reduce){
  #site-header.is-scrolled, .clock-chip, .menu-btn, #home .hero-card, .modal-backdrop, .modal-panel{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  #site-header.is-scrolled{ background:#fff !important; }
  #home .hero-card{ background:#fff !important; }
  .clock-chip, .menu-btn{ background:#fff !important; }
  .modal-panel{ background:#121216 !important; }
}
@media (prefers-contrast: more){
  .pill-btn.outline, .clock-chip, .menu-btn, .work-card, .modal-panel{
    border:2px solid currentColor;
  }
  .hero-title{ text-shadow:none; }
}

/* ===================== Adaptive rem grid ===================== */
@media (max-width:1920px){ html{ font-size:0.833333vw; } }
@media (max-width:1440px){ html{ font-size:1.111111vw; } }
@media (max-width:1024px){ html{ font-size:1.5625vw; } }
@media (max-width:640px){  html{ font-size:4.444444vw; } }

/* ===================== Tokens ===================== */
:root{
  --background:#ffffff; --foreground:#111111;
  --ink:#0a0a0a;
  --muted:#8d8d8d; --subtle:#b6b6b6;
  --line:#e6e5e2;
  --surface:#f1f0ee; --surface-2:#e3e2df;
  /* Brand: orange primary accent, lime secondary highlight */
  --accent:#FF5C34; --accent-from:#FF5C34; --accent-to:#E9F056;
  --accent-lime:#E9F056; --accent-orange:#FF5C34;
  --hero-from:#ecebe9; --hero-to:#c9c9c9;
  --radius-pill:9999px; --radius-card:2rem; --radius-card-sm:1.25rem; --radius-control:0.875rem;
  --text-watermark:13rem;
  --container-shell:88rem;
  --ease-out-cubic: cubic-bezier(.215,.61,.355,1);
  --ease-out-quart: cubic-bezier(.165,.84,.44,1);
  --ease-spring-soft: cubic-bezier(.22,1,.36,1);
  --ease-spring-med: cubic-bezier(.16,1,.3,1);
  --ease-spring-snap: cubic-bezier(.2,.8,.2,1);
  --spring-response:0.4s;
  --press-scale:0.97;
  --hit-padding:10px;
}

.shell{ max-width:var(--container-shell); margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:640px){ .shell{ padding-inline:2rem; } }

/* ===================== Skip link ===================== */
.skip-link{ position:absolute; left:-999px; top:auto; z-index:200; border-radius:.875rem; background:#0a0a0a; padding:.5rem 1rem; font-size:.875rem; color:#fff; }
.skip-link:focus{ left:1rem; top:1rem; }

/* ===================== Reveal primitives ===================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-spring-med), transform .7s var(--ease-spring-med); }
.reveal.is-in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:translateY(16px) scale(.96); transition:opacity .7s var(--ease-spring-med), transform .7s var(--ease-spring-med); }
.reveal-scale.is-in{ opacity:1; transform:translateY(0) scale(1); }
.reveal-panel{ opacity:0; transform:translateY(40px) scale(.99); transition:opacity .8s var(--ease-spring-soft), transform .8s var(--ease-spring-soft); }
.reveal-panel.is-in{ opacity:1; transform:translateY(0) scale(1); }

.line-wrap{ display:block; overflow:hidden; }
.line-inner{ display:block; transform:translateY(100%); opacity:0; transition:transform .9s var(--ease-out-cubic), opacity .9s var(--ease-out-cubic); }
.line-wrap.is-in .line-inner{ transform:translateY(0); opacity:1; }

.word{ display:inline-block; transform:translateY(24px); opacity:0; transition:transform .7s var(--ease-out-quart), opacity .7s var(--ease-out-quart); }
.word-wrap.is-in .word{ transform:translateY(0); opacity:1; }

/* ===================== Shared components ===================== */
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; }
.eyebrow::before{ content:''; width:.375rem; height:.375rem; border-radius:9999px; flex-shrink:0; background:var(--accent); }
.eyebrow.dark{ color:rgba(17,17,17,.7); }
.eyebrow.light{ color:rgba(255,255,255,.7); }
.eyebrow.bordered{ border:1px solid var(--line); border-radius:9999px; padding:.375rem 1rem; }

.tag-chip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:9999px; padding:.5rem 1rem; font-size:.875rem; }

.animated-link{ display:inline-flex; }
.animated-link span{ display:inline-block; transition:transform .35s var(--ease-spring-snap), opacity .35s var(--ease-spring-snap); opacity:.65; }
@media (hover:hover) and (pointer:fine){ .animated-link:hover span{ transform:translateX(4px); opacity:1; } }
.legal-link span{ opacity:.7; }
@media (hover:hover) and (pointer:fine){ .legal-link:hover span{ transform:translateX(3px); opacity:1; } }

.icon{ display:inline-block; width:1em; height:1em; vertical-align:-0.125em; }
.icon svg{ width:100%; height:100%; display:block; }

/* Pill button (real <button>/<a> elements — see markup) */
.pill-btn{
  display:inline-flex; cursor:pointer; align-items:center; gap:.75rem; border-radius:9999px;
  font-size:.875rem; font-weight:500; letter-spacing:.01em;
  transition:transform .35s var(--ease-spring-snap), opacity .15s ease-out; border:none;
  touch-action:manipulation; position:relative;
}
.pill-btn::before{
  content:''; position:absolute; inset:calc(var(--hit-padding) * -1); border-radius:inherit;
}
@media (hover:hover) and (pointer:fine){ .pill-btn:hover{ transform:scale(1.04); } }
.pill-btn.is-pressing, .pill-btn:active{ transform:scale(var(--press-scale)); transition-duration:80ms; }
.pill-btn.with-arrow{ padding:.375rem .375rem .375rem 1.5rem; }
.pill-btn:not(.with-arrow){ padding:.875rem 1.75rem; }
.pill-btn.dark{ background:#0a0a0a; color:#fff; }
.pill-btn.light{ background:var(--surface); color:#111; }
.pill-btn.outline{ border:1px solid var(--line); background:transparent; color:#111; }
.pill-badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:1rem; flex-shrink:0; transition:transform .35s var(--ease-spring-snap); }
.pill-btn.dark .pill-badge{ background:#fff; color:#0a0a0a; }
.pill-btn.light .pill-badge, .pill-btn.outline .pill-badge{ background:#0a0a0a; color:#fff; }
@media (hover:hover) and (pointer:fine){
  .pill-btn:hover .pill-badge.arrow-right{ transform:translateX(3px); }
  .pill-btn:hover .pill-badge.arrow-up-right{ transform:translate(2px,-2px); }
}

/* ===================== Page loader ===================== */
#page-loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; background:#0a0a0a; color:#fff; border-radius:0 0 2rem 2rem; transition:transform .7s var(--ease-spring-soft); }
#page-loader.is-exiting{ transform:translateY(-100%); }
.loader-center{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; transition:opacity .5s var(--ease-spring-med), transform .5s var(--ease-spring-med); }
#page-loader.is-exiting .loader-center{ opacity:0; transform:translateY(-12px); }
.loader-brand{ display:flex; align-items:center; }
.loader-brand img{ height:1.75rem; width:auto; }
.loader-tagline{ max-width:24ch; font-size:.875rem; color:rgba(255,255,255,.55); }
.loader-progress{ width:min(22rem,72vw); display:flex; flex-direction:column; gap:.75rem; }
.loader-track{ height:1px; background:rgba(255,255,255,.15); }
.loader-fill{ height:100%; background:var(--accent-orange); width:0%; transition:width .1s ease-out; }
.loader-meta{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45); }
.loader-count{ color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums; }

/* ===================== Header ===================== */
/* Fixed + translucent-on-scroll so navigation stays reachable everywhere (wayfinding) */
#site-header{ position:fixed; inset-inline:0; top:0; z-index:50; opacity:0; transform:translateY(-14px); transition:opacity .7s var(--ease-spring-med) .15s, transform .7s var(--ease-spring-med) .15s, background .4s var(--ease-spring-med), border-color .4s var(--ease-spring-med), box-shadow .4s var(--ease-spring-med); border-bottom:1px solid transparent; }
#site-header.is-in{ opacity:1; transform:translateY(0); }
#site-header.is-scrolled{
  background:rgba(255,255,255,.72); backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8); border-color:transparent;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
#site-header.is-scrolled::after{
  content:''; position:absolute; left:0; right:0; bottom:-1.25rem; height:1.25rem; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), transparent);
}
.page-body{ padding-top:5.25rem; }
@media (min-width:640px){ .page-body{ padding-top:5.75rem; } }
.header-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem; }
@media (min-width:640px){ .header-inner{ padding:1.5rem 2rem; } }
.brand-btn{ display:flex; align-items:center; transition:transform .35s var(--ease-spring-snap); }
@media (hover:hover) and (pointer:fine){ .brand-btn:hover{ transform:scale(1.04); } }
.brand-btn img{ height:2.25rem; width:auto; display:block; }

.primary-nav{ display:none; }
@media (min-width:1024px){ .primary-nav{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; } }
.primary-nav ul{ display:flex; gap:2rem; font-size:.875rem; font-weight:500; }
.primary-nav button, .primary-nav a{ display:inline-flex; align-items:center; gap:.25rem; transition:transform .35s var(--ease-spring-snap), opacity .35s var(--ease-spring-snap), color .3s; opacity:.85; position:relative; }
@media (hover:hover) and (pointer:fine){ .primary-nav button:hover, .primary-nav a:hover{ transform:translateY(-2px); opacity:1; } }
.primary-nav .caret{ font-size:.75rem; opacity:.6; }
.primary-nav a[aria-current="page"], .primary-nav button[aria-current="page"]{ opacity:1; color:var(--accent); }
.primary-nav a[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--accent); }

/* Services dropdown in primary nav (desktop only — primary-nav is hidden < 1024px) */
.primary-nav li.has-dropdown{ position:relative; }
/* Invisible bridge: keeps :hover alive when mouse moves from link → dropdown across the gap */
.primary-nav li.has-dropdown::after{
  content:''; position:absolute; top:100%; left:0; right:0; height:0.75rem; z-index:0;
}
.primary-nav .has-dropdown > a{ gap:.35rem; }
.primary-nav .dd-caret{ display:inline-flex; font-size:.7rem; opacity:.55; transition:transform .3s var(--ease-spring-snap); }
.primary-nav .dropdown{
  position:absolute; top:calc(100% + .7rem); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:14rem; padding:.5rem; border-radius:.875rem; background:#fff;
  border:1px solid rgba(230,229,226,.9); box-shadow:0 20px 44px rgba(15,23,42,.14);
  opacity:0; visibility:hidden; pointer-events:none; z-index:10;
  transition:opacity .25s var(--ease-spring-med), transform .3s var(--ease-spring-snap), visibility .3s .1s;
}
.primary-nav .has-dropdown:hover .dropdown,
.primary-nav .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); transition-delay:0s; }
.primary-nav .has-dropdown:hover .dd-caret,
.primary-nav .has-dropdown:focus-within .dd-caret{ transform:rotate(180deg); }
.primary-nav .dropdown a{
  display:flex; align-items:center; gap:.6rem; width:100%; padding:.55rem .75rem; border-radius:.5rem;
  font-size:.875rem; font-weight:500; color:#111; opacity:1; transform:none; white-space:nowrap;
}
.primary-nav .dropdown a::after{ display:none; }
.primary-nav .dropdown a .dd-num{ font-size:.7rem; color:rgba(17,17,17,.45); font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine){ .primary-nav .dropdown a:hover{ background:rgba(15,23,42,.05); color:var(--accent); transform:none; opacity:1; } }
.primary-nav .dropdown a[aria-current="page"]{ color:var(--accent); }

.header-right{ display:flex; align-items:center; gap:.75rem; }
.clock-chip{ display:none; align-items:center; gap:.75rem; border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.4); backdrop-filter:blur(4px); border-radius:.875rem; padding:.5rem .75rem; font-size:.75rem; color:rgba(17,17,17,.7); }
@media (min-width:768px){ .clock-chip{ display:flex; } }
.clock-label{ color:rgba(17,17,17,.45); }
.clock-time{ min-width:3.5rem; font-variant-numeric:tabular-nums; font-weight:500; color:#111; }
.clock-sep{ color:rgba(17,17,17,.3); }
.clock-date{ font-weight:500; }

.menu-btn{ border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.55); backdrop-filter:blur(12px) saturate(1.5); -webkit-backdrop-filter:blur(12px) saturate(1.5); border-radius:.875rem; transition:background .3s, transform .35s var(--ease-spring-snap); min-height:44px; min-width:44px; touch-action:manipulation; position:relative; }
.menu-btn::before{ content:''; position:absolute; inset:-8px; border-radius:inherit; }
@media (hover:hover) and (pointer:fine){ .menu-btn:hover{ background:rgba(255,255,255,.7); } }
.menu-btn.is-pressing, .menu-btn:active{ transform:scale(.96); transition-duration:80ms; }
.menu-btn-inner{ display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; transition:transform .35s var(--ease-spring-snap); }
@media (hover:hover) and (pointer:fine){ .menu-btn:hover .menu-btn-inner{ transform:scale(1.05); } }
.menu-btn-label{ display:none; }
@media (min-width:640px){ .menu-btn-label{ display:inline; } }

/* ===================== Hero ===================== */
#home{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 2rem 2rem; background:var(--hero-to); margin-top:-5.25rem; }
@media (min-width:640px){ #home{ margin-top:-5.75rem; } }
.liquid-reveal{ position:absolute; inset:0; z-index:0; }
.liquid-reveal img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.liquid-reveal canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.35), transparent, rgba(255,255,255,.35)); }
.hero-watermark{ pointer-events:none; position:absolute; inset-inline:0; bottom:7rem; z-index:1; text-align:center; user-select:none; font-weight:700; line-height:1; font-size:var(--text-watermark); color:rgba(255,255,255,.4); opacity:0; transform:translateY(20px); transition:opacity 1s var(--ease-spring-soft) .3s, transform 1s var(--ease-spring-soft) .3s; }
.hero-watermark.is-in{ opacity:.4; transform:translateY(0); }

.hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem; padding:9.5rem 1.25rem 4rem; padding-top:calc(9.5rem + env(safe-area-inset-top)); }
@media (min-width:640px){ .hero-grid{ padding-inline:2rem; } }
@media (min-width:1024px){ .hero-grid{ display:grid; min-height:100lvh; grid-template-columns:repeat(12,1fr); gap:2.5rem; padding:14rem 2rem 7rem; } }

.hero-left{ display:flex; flex-direction:column; gap:1.75rem; }
@media (min-width:1024px){ .hero-left{ grid-column:span 7; } }

.hero-eyebrow{ opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease-spring-med) .2s, transform .7s var(--ease-spring-med) .2s; }
.hero-eyebrow.is-in{ opacity:1; transform:translateY(0); }

.hero-title{ max-width:18ch; font-size:2.25rem; font-weight:600; line-height:1.02; letter-spacing:-.025em; color:var(--ink); text-shadow:0 1px 24px rgba(255,255,255,.35); font-optical-sizing:auto; }
@media (min-width:640px){ .hero-title{ font-size:3rem; } }
@media (min-width:768px){ .hero-title{ font-size:3.75rem; } }

.hero-rating{ display:flex; align-items:center; gap:.75rem; opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease-spring-med) .65s, transform .7s var(--ease-spring-med) .65s; }
.hero-rating.is-in{ opacity:1; transform:translateY(0); }
.hero-rating .icon{ font-size:1.125rem; color:var(--accent); }
.hero-rating span.txt{ font-size:.875rem; font-weight:500; color:rgba(17,17,17,.7); }

.hero-ctas{ display:flex; flex-wrap:wrap; gap:.75rem; opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease-spring-med) .75s, transform .7s var(--ease-spring-med) .75s; }
.hero-ctas.is-in{ opacity:1; transform:translateY(0); }

.hero-right{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem; }
@media (min-width:1024px){ .hero-right{ grid-column:span 5; align-items:flex-end; } }

/* Hero card / carousel */
#home .hero-card{ width:100%; max-width:24rem; border-radius:1.25rem; background:rgba(255,255,255,.7); padding:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.06), inset 0 0 0 1px rgba(230,229,226,.7); backdrop-filter:blur(12px); opacity:0; transform:translateY(16px) scale(.96); transition:opacity .7s var(--ease-spring-med) .4s, transform .7s var(--ease-spring-med) .4s; }
#home .hero-card.is-in{ opacity:1; transform:translateY(0) scale(1); }
@media (min-width:1024px){ #home .hero-card{ width:19rem; } }
.hero-card-row{ display:flex; gap:.5rem; cursor:grab; border-radius:.875rem; touch-action:pan-y; user-select:none; }
.hero-card-row:active{ cursor:grabbing; }
.hero-card-tile{ aspect-ratio:1; width:6rem; display:grid; place-items:center; border-radius:.875rem; background:#0a0a0a; font-size:1.875rem; color:#fff; flex-shrink:0; }
.hero-card-tile .icon{ color:var(--accent-lime); }
.hero-card-panel{ flex:1; border-radius:.875rem; background:rgba(241,240,238,.7); padding:.75rem; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.hero-card-slot{ position:relative; min-height:3.25rem; will-change:transform; transition:transform 80ms linear; }
.hero-card-caption{ font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45); }
.hero-card-title{ max-width:8rem; font-size:.875rem; font-weight:500; line-height:1.35; will-change:transform,opacity; }
.hero-card-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
.hero-card-dots{ display:flex; gap:.25rem; }
.hero-card-dots span{ height:.25rem; border-radius:9999px; background:rgba(17,17,17,.2); width:.375rem; transition:all .3s; }
.hero-card-dots span.active{ width:1rem; background:rgba(17,17,17,.7); }
.hero-card-nav{ display:flex; gap:.375rem; }
.hero-card-nav button{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px; background:#fff; color:rgba(17,17,17,.7); box-shadow:inset 0 0 0 1px var(--line); transition:color .2s, transform .35s var(--ease-spring-snap); touch-action:manipulation; position:relative; }
.hero-card-nav button::before{ content:''; position:absolute; inset:-10px; border-radius:inherit; }
@media (hover:hover) and (pointer:fine){ .hero-card-nav button:hover{ color:#111; } }
.hero-card-nav button.is-pressing, .hero-card-nav button:active{ transform:scale(.92); transition-duration:80ms; }
.hero-card-nav .icon{ font-size:.8rem; }
.hero-card-nav .prev .icon{ transform:rotate(180deg); }

/* Partners */
.hero-partners{ width:100%; max-width:24rem; opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-spring-med) .55s, transform .7s var(--ease-spring-med) .55s; }
.hero-partners.is-in{ opacity:1; transform:translateY(0); }
@media (min-width:1024px){ .hero-partners{ width:19rem; } }
.partners-label{ margin-bottom:.75rem; font-size:.75rem; font-weight:500; color:rgba(17,17,17,.45); text-align:left; }
@media (min-width:1024px){ .partners-label{ text-align:right; } }
.partners-grid{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:1rem; row-gap:.75rem; }
@media (min-width:640px){ .partners-grid{ grid-template-columns:repeat(4,1fr); } }
.partners-grid span{ display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:rgba(17,17,17,.7); transition:transform .35s var(--ease-spring-snap), opacity .35s var(--ease-spring-snap); opacity:.75; }
@media (hover:hover) and (pointer:fine){ .partners-grid span:hover{ transform:translateY(-2px); opacity:1; } }
.partners-grid .icon{ font-size:.875rem; color:rgba(17,17,17,.4); }

/* Status bar */
.hero-status{ opacity:0; transition:opacity 1s var(--ease-spring-med) .9s; }
.hero-status.is-in{ opacity:1; }
.hero-status .shell{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid rgba(17,17,17,.1); padding:1.25rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(17,17,17,.6); }
.hero-status .mid{ display:none; }
@media (min-width:640px){ .hero-status .mid{ display:inline; } }
.hero-status .right{ display:inline-flex; align-items:center; gap:.5rem; }

/* ===================== Page hero (interior pages) ===================== */
.page-hero{ padding:5rem 0 3.5rem; background:var(--surface); position:relative; overflow:hidden; }
@media (min-width:1024px){ .page-hero{ padding:6.5rem 0 4.5rem; } }
.breadcrumb{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--muted); margin-bottom:1rem; }
@media (hover:hover) and (pointer:fine){ .breadcrumb a:hover{ color:var(--accent); } }
.page-hero h1{ max-width:20ch; }
.page-hero .lede{ max-width:60ch; margin-top:1rem; font-size:1.125rem; color:var(--muted); }

/* ===================== About ===================== */
#about{ background:#fff; }
.about-grid{ padding-block:5rem; display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; }
@media (min-width:1024px){ .about-grid{ grid-template-columns:1fr 1fr; padding-block:7rem; } }
.about-globe{ position:relative; min-height:14rem; }
@media (min-width:1024px){ .about-globe{ min-height:20rem; } }
.about-globe .icon{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%); font-size:12rem; color:rgba(17,17,17,.1); }
@media (min-width:640px){ .about-globe .icon{ font-size:16rem; } }
@media (min-width:1024px){ .about-globe .icon{ left:-1.5rem; font-size:20rem; } }
.about-globe-note{ position:relative; margin-top:9rem; display:flex; align-items:center; gap:.75rem; font-size:.875rem; color:rgba(17,17,17,.7); opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease-spring-med), transform .7s var(--ease-spring-med); }
.about-globe-note.is-in{ opacity:1; transform:translateY(0); }
.about-globe-note .icon{ position:static; font-size:1.5rem; color:#111; }
.about-globe-note span{ max-width:14rem; display:block; }

.about-right{ display:flex; flex-direction:column; gap:2.5rem; }
.about-statement{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em; }
@media (min-width:640px){ .about-statement{ font-size:1.875rem; } }
.about-statement .muted{ color:var(--muted); }
.about-footer-row{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease-spring-med) .2s, transform .7s var(--ease-spring-med) .2s; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.about-footer-row.is-in{ opacity:1; transform:translateY(0); }
.find-us-label{ font-size:.875rem; color:rgba(17,17,17,.45); margin-bottom:.5rem; }
.social-row{ display:flex; gap:.5rem; }
.social-chip{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px; font-size:.875rem; transition:transform .35s var(--ease-spring-snap); }
.social-chip.accent-fill{ background:var(--accent); color:#fff; }
.social-chip.neutral-fill{ background:var(--surface); color:rgba(17,17,17,.7); }
.social-chip .icon{ transition:transform .35s var(--ease-spring-snap); }
.social-chip:active{ transform:scale(.92); transition-duration:80ms; }
@media (hover:hover) and (pointer:fine){ .social-chip:hover .icon{ transform:scale(1.18); } }

/* ===================== Values / feature cards (interior pages) ===================== */
.value-card{ background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:2rem; transition:transform .4s var(--ease-spring-med), box-shadow .4s var(--ease-spring-med); }
@media (hover:hover) and (pointer:fine){ .value-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(15,23,42,.08); } }
.value-icon{ width:3rem; height:3rem; border-radius:.875rem; background:var(--surface); display:grid; place-items:center; margin-bottom:1.25rem; }
.value-icon .icon{ font-size:1.5rem; color:var(--accent); }
.value-card h3{ font-size:1.15rem; font-weight:600; margin-bottom:.5rem; }
.value-card p{ font-size:.9rem; color:var(--muted); }

.stat-tile{ background:var(--ink); border-radius:1.25rem; padding:1.75rem; color:#fff; }
.stat-tile .stat-value{ font-size:2.25rem; }
.stat-tile .stat-label{ color:rgba(255,255,255,.55); }

/* ===================== Create band ===================== */
.create-band{ background:#fff; }
.create-band .shell ul{ display:flex; flex-direction:column; gap:.75rem; padding-block:2.5rem; }
@media (min-width:640px){ .create-band .shell ul{ flex-direction:row; gap:1rem; } }
.create-band li{ flex:1; opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-spring-med), transform .7s var(--ease-spring-med); }
.create-band li.is-in{ opacity:1; transform:translateY(0); }
.create-tile{ display:grid; place-items:center; height:6rem; border-radius:9999px; font-size:1.875rem; font-weight:500; transition:transform .35s var(--ease-spring-snap); }
@media (hover:hover) and (pointer:fine){ .create-tile:hover{ transform:scale(1.03); } }
@media (min-width:640px){ .create-tile{ height:10rem; font-size:2.25rem; } }
.create-tile.light{ background:var(--surface); color:#111; }
.create-tile.accent{ background:linear-gradient(to bottom right, var(--accent-from), var(--accent-to)); color:#111; }
.create-tile.dark{ background:var(--ink); color:#fff; }
.create-tile.dark .icon{ font-size:2.25rem; }
@media (min-width:640px){ .create-tile.dark .icon{ font-size:3rem; } }
.create-tile.ghost{ background:rgba(241,240,238,.6); color:rgba(17,17,17,.35); }

/* ===================== Portfolio ===================== */
#works{ background:#fff; }
.works-wrap{ padding:2.5rem 0 5rem; }
@media (min-width:1024px){ .works-wrap{ padding-bottom:7rem; } }
/* Legacy centered section-title — retained for services.html */
.section-eyebrow-wrap{ text-align:center; margin-bottom:1.25rem; }
.section-title{ text-align:center; width:fit-content; margin-inline:auto; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; margin-bottom:3rem; }
@media (min-width:640px){ .section-title{ font-size:3rem; } }

/* Asymmetric section head — title left, index + note right */
.works-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:3rem; }
.works-title{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.02; margin-top:.5rem; }
@media (min-width:640px){ .works-title{ font-size:3rem; } }
.works-head-right{ display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.works-count{ font-size:.875rem; font-weight:500; font-variant-numeric:tabular-nums; color:rgba(17,17,17,.7); }
.works-count b{ font-weight:700; color:var(--accent); }
.works-note{ max-width:32ch; font-size:.875rem; line-height:1.5; color:var(--muted); }
@media (min-width:1024px){ .works-head-right{ align-items:flex-end; text-align:right; } }

/* Bento grid — 12-col, flagship 2×2 + tall phone + two half-width */
.works-grid{
  display:grid; grid-template-columns:1fr; gap:1.25rem; grid-auto-rows:auto;
  grid-template-areas:"a" "b" "c" "d";
}
.works-grid li:nth-child(1){ grid-area:a; }
.works-grid li:nth-child(2){ grid-area:b; }
.works-grid li:nth-child(3){ grid-area:c; }
.works-grid li:nth-child(4){ grid-area:d; }

@media (min-width:768px){
  .works-grid{ grid-template-columns:repeat(12,1fr); grid-auto-rows:auto; gap:1.25rem;
    grid-template-areas:
      "a a a a a a a a a a a a"
      "b b b b b b c c c c c c"
      "d d d d d d d d d d d d"; }
}
@media (min-width:1024px){
  .works-grid{ grid-template-rows:auto auto auto; gap:1.25rem;
    grid-template-areas:
      "a a a a a a a a b b b b"
      "a a a a a a a a b b b b"
      "c c c c c c d d d d d d"; }
}
.works-grid li{ opacity:0; transform:translateY(32px); transition:opacity .7s var(--ease-spring-med), transform .7s var(--ease-spring-med); }
.works-grid li.is-in{ opacity:1; transform:translateY(0); }
.works-grid li:nth-child(2).is-in{ transition-delay:.08s; }
.works-grid li:nth-child(3).is-in{ transition-delay:.16s; }
.works-grid li:nth-child(4).is-in{ transition-delay:.24s; }

/* Card — flex column so visual fills the middle, text pinned bottom */
.work-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  min-height:24rem; border-radius:1.5rem; background:var(--ink); padding:1.5rem; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(0) scale(1);
  transition:transform .45s var(--ease-spring-med), box-shadow .45s var(--ease-spring-med), background .45s ease;
  will-change:transform; touch-action:manipulation;
}
@media (hover:hover) and (pointer:fine){
  .work-card:hover, .work-card.is-tilting{
    transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-6px) scale(1.01);
    box-shadow:0 20px 48px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.08);
  }
}
.work-card.is-pressing{ transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(.985) !important; transition-duration:80ms; }
@media (min-width:640px){ .work-card{ min-height:28rem; padding:2rem; } }
@media (min-width:1024px){
  .works-grid li:nth-child(1) .work-card,
  .works-grid li:nth-child(2) .work-card{ min-height:100%; }
  .works-grid li:nth-child(3) .work-card,
  .works-grid li:nth-child(4) .work-card{ min-height:22rem; }
}

/* Per-variant accent glow (z-index 0, behind content) */
.work-card.card-orange{ background:#111; }
.work-card.card-orange::before{
  content:''; position:absolute; top:-35%; right:-12%; width:58%; height:100%;
  background:radial-gradient(ellipse, rgba(255,92,52,.16) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.work-card.card-lime{ background:#111; }
.work-card.card-lime::before{
  content:''; position:absolute; top:-30%; right:-20%; width:62%; height:100%;
  background:radial-gradient(ellipse, rgba(233,240,86,.12) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.work-card.card-purple{ background:#0c0c18; }
.work-card.card-purple::before{
  content:''; position:absolute; top:-40%; right:-25%; width:60%; height:100%;
  background:radial-gradient(ellipse, rgba(168,85,247,.12) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.work-card.card-teal{ background:#0a1412; }
.work-card.card-teal::before{
  content:''; position:absolute; top:-40%; right:-25%; width:60%; height:100%;
  background:radial-gradient(ellipse, rgba(20,184,166,.12) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}

/* Cursor-tracked spotlight border — 1px ring lit at the pointer (--mx/--my from site.js) */
.work-card .spotlight{
  position:absolute; inset:0; border-radius:inherit; z-index:1; opacity:0; pointer-events:none;
  transition:opacity .3s ease; padding:1px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}
@media (hover:hover) and (pointer:fine){ .work-card:hover .spotlight{ opacity:1; } }

.work-card-num{
  position:absolute; top:.25rem; right:1.25rem; font-size:4.5rem; font-weight:700;
  line-height:1; letter-spacing:-.04em; color:rgba(255,255,255,.05);
  user-select:none; pointer-events:none; z-index:1; transition:color .4s ease;
}
@media (hover:hover) and (pointer:fine){ .work-card:hover .work-card-num{ color:rgba(255,255,255,.08); } }
.work-card.flagship .work-card-num{ font-size:7rem; }

.work-meta{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:.75rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.5); }
.work-live{ display:inline-flex; align-items:center; gap:.45rem; font-weight:500; color:rgba(255,255,255,.65); }
.pulse{ width:.5rem; height:.5rem; border-radius:9999px; background:var(--accent-lime); box-shadow:0 0 0 0 rgba(233,240,86,.45); animation:pulse 2.4s var(--ease-spring-soft) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(233,240,86,.45);} 70%{ box-shadow:0 0 0 .5rem rgba(233,240,86,0);} 100%{ box-shadow:0 0 0 0 rgba(233,240,86,0);} }

/* Product mockups — the visual that gives each case study its identity */
.work-visual{ position:relative; z-index:2; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding-block:1.5rem; }
.flagship .work-visual{ justify-content:flex-end; }
.card-teal .work-visual{ justify-content:flex-start; }
.card-purple .work-visual{ justify-content:flex-end; }

.till-screen{ position:relative; overflow:hidden; width:100%; max-width:30rem; border-radius:1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:1rem; box-shadow:0 20px 40px rgba(0,0,0,.35); }
.till-screen::after{ content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%; transform:skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation:sheen 6s var(--ease-spring-med) infinite; pointer-events:none; }
@keyframes sheen{ 0%{ left:-60%; } 60%,100%{ left:140%; } }
.till-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:.75rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:.75rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.5); }
.till-total{ font-size:1.1rem; font-weight:700; letter-spacing:0; color:#fff; }
.till-rows{ display:flex; flex-direction:column; gap:.35rem; }
.till-row{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; padding:.35rem .5rem; border-radius:.5rem; color:rgba(255,255,255,.75); animation:tillCycle 7s var(--ease-spring-med) infinite; }
.till-row span{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.till-row b{ font-weight:500; color:rgba(255,255,255,.55); }
.till-row i{ font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; width:3.5rem; text-align:right; color:#fff; }
.till-row:nth-child(2){ animation-delay:1.4s; }
.till-row:nth-child(3){ animation-delay:2.8s; }
.till-row:nth-child(4){ animation-delay:4.2s; }
.till-row:nth-child(5){ animation-delay:5.6s; }
@keyframes tillCycle{ 0%,8%{ background:transparent;} 14%,22%{ background:rgba(233,240,86,.12);} 28%,100%{ background:transparent;} }

.phone{ width:9rem; border-radius:1.4rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); padding:1rem .7rem .9rem; box-shadow:0 20px 40px rgba(0,0,0,.35); }
.phone-notch{ width:3rem; height:.3rem; border-radius:9999px; background:rgba(255,255,255,.18); margin:0 auto .9rem; }
.phone-row{ display:flex; align-items:flex-start; gap:.5rem; padding:.4rem; }
.phone-row i{ width:.5rem; height:.5rem; border-radius:9999px; background:var(--accent-lime); margin-top:.35rem; flex-shrink:0; }
.phone-row b{ display:block; font-size:.72rem; font-weight:600; color:#fff; }
.phone-row span{ display:block; font-size:.62rem; color:rgba(255,255,255,.5); }

.cc{ width:100%; max-width:15rem; border-radius:1rem; background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); padding:1rem 1.1rem; box-shadow:0 20px 40px rgba(0,0,0,.3); }
.cc-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.8rem; color:rgba(255,255,255,.7); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.cc-check{ width:1.4rem; height:1.4rem; display:grid; place-items:center; border-radius:9999px; background:rgba(233,240,86,.18); color:var(--accent-lime); font-size:.75rem; letter-spacing:0; }
.cc-num{ margin-top:1rem; font-size:.85rem; font-weight:500; color:#fff; }
.cc-foot{ margin-top:1rem; display:flex; justify-content:space-between; font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.5); }

.browser{ width:100%; max-width:20rem; border-radius:1rem; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 40px rgba(0,0,0,.3); }
.browser-bar{ display:flex; align-items:center; gap:.3rem; padding:.5rem .75rem; border-bottom:1px solid rgba(255,255,255,.08); }
.browser-bar .bdot{ width:.4rem; height:.4rem; border-radius:9999px; background:rgba(255,255,255,.25); }
.browser-bar .url{ flex:1; text-align:center; font-size:.6rem; color:rgba(255,255,255,.5); }
.browser-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; padding:.6rem; }
.prod{ display:flex; flex-direction:column; gap:.3rem; }
.prod b{ aspect-ratio:1/1; border-radius:.4rem; background:rgba(255,255,255,.1); }
.prod i{ height:.35rem; border-radius:9999px; background:rgba(255,255,255,.08); }
.prod i:last-child{ width:60%; }

.work-bottom{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.work-bottom h3{ font-size:1.5rem; font-weight:500; letter-spacing:-.01em; line-height:1.1; }
@media (min-width:640px){ .work-bottom h3{ font-size:1.875rem; } }
.work-bottom p{ margin-top:.5rem; max-width:30rem; font-size:.875rem; color:rgba(255,255,255,.55); }
.work-tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.work-cta{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; font-size:.8rem; font-weight:500; color:rgba(255,255,255,.7); transition:color .3s; padding-bottom:.25rem; }
.work-cta .icon{ font-size:.8rem; transition:transform .35s var(--ease-spring-snap); }
@media (hover:hover) and (pointer:fine){
  .work-card:hover .work-cta{ color:#fff; }
  .work-card:hover .work-cta .icon{ transform:translate(2px,-2px); }
}

@media (prefers-reduced-motion: reduce){
  .pulse, .till-screen::after, .till-row{ animation:none !important; }
}

/* ===================== Services ===================== */
#services{ background:#fff; }
.services-wrap{ padding-block:5rem; }
@media (min-width:1024px){ .services-wrap{ padding-block:7rem; } }
.services-title{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; }
@media (min-width:640px){ .services-title{ margin-bottom:3.5rem; font-size:3rem; } }
.service-row-item{ border-top:1px solid var(--line); opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-spring-med), transform .7s var(--ease-spring-med); }
.service-row-item:first-child{ border-top:none; }
.service-row-item.is-in{ opacity:1; transform:translateY(0); }
.service-row{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding-block:1.5rem; padding-inline:0; transition:background .4s var(--ease-spring-med), padding .4s var(--ease-spring-med); }
@media (min-width:640px){ .service-row{ gap:1.5rem; padding-block:2rem; } }
@media (hover:hover) and (pointer:fine){
  .service-row:hover{ background:rgba(241,240,238,1); padding-inline:1.25rem; }
  @media (min-width:640px){ .service-row:hover{ padding-left:2rem; padding-right:1.25rem; } }
}
.service-index{ width:1.75rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.4); flex-shrink:0; }
@media (min-width:640px){ .service-index{ width:2.5rem; } }
.service-row h3{ flex:1; font-size:1.5rem; font-weight:500; letter-spacing:-.01em; }
@media (min-width:640px){ .service-row h3{ font-size:1.875rem; } }
@media (min-width:768px){ .service-row h3{ font-size:2.25rem; } }
.service-desc{ display:block; max-width:20rem; font-size:.8rem; line-height:1.45; letter-spacing:.01em; color:rgba(17,17,17,.55); margin-top:.35rem; }
@media (min-width:1024px){ .service-desc{ margin-top:0; font-size:.875rem; } }
.service-row{ touch-action:manipulation; }
.service-row.is-pressing{ transform:scale(.995); transition-duration:80ms; }
/* service-desc visible at all breakpoints — see above */
.service-arrow{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px; background:var(--ink); color:#fff; flex-shrink:0; transition:transform .4s var(--ease-spring-snap); }
@media (min-width:640px){ .service-arrow{ width:3rem; height:3rem; } }
@media (hover:hover) and (pointer:fine){ .service-row:hover .service-arrow{ transform:translateX(5px); } }

/* Detailed service section (services.html) */
.service-detail{ padding-block:4rem; }
@media (min-width:1024px){ .service-detail{ padding-block:5rem; } }
.service-detail-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:1024px){ .service-detail-grid{ grid-template-columns:1fr 1fr; gap:4rem; } }
.service-detail-num{ font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:.05em; }
.service-detail h2{ margin-top:.5rem; font-size:1.875rem; font-weight:600; letter-spacing:-.01em; }
@media (min-width:640px){ .service-detail h2{ font-size:2.5rem; } }
.service-feature-list{ margin-top:1.5rem; display:grid; gap:.75rem; }
.service-feature-list li{ display:flex; align-items:flex-start; gap:.65rem; font-size:.95rem; color:var(--foreground); }
.service-feature-list .icon{ color:var(--accent); flex-shrink:0; margin-top:2px; }
.service-visual{ border-radius:1.5rem; background:var(--ink); padding:2rem; min-height:18rem; display:flex; align-items:center; justify-content:center; }

/* ===================== Stats ===================== */
.stats-wrap{ padding:0 0 5rem; }
@media (min-width:1024px){ .stats-wrap{ padding-bottom:7rem; } }
.stats-panel{ border-radius:2rem; background:var(--ink); padding:3rem 1.5rem; color:#fff; }
@media (min-width:640px){ .stats-panel{ padding:4rem 2rem; } }
@media (min-width:768px){ .stats-panel{ padding-inline:4rem; } }
.stats-title{ margin-top:1rem; max-width:20ch; font-size:1.875rem; font-weight:500; letter-spacing:-.01em; }
@media (min-width:768px){ .stats-title{ font-size:2.25rem; } }
.stats-grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:3rem; }
@media (min-width:1024px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-item{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-spring-med), transform .7s var(--ease-spring-med); }
.stat-item.is-in{ opacity:1; transform:translateY(0); }
.stat-value{ font-size:3rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
@media (min-width:640px){ .stat-value{ font-size:3.75rem; } }
@media (min-width:768px){ .stat-value{ font-size:4.5rem; } }
.stat-label{ margin-top:.75rem; font-size:.875rem; color:rgba(255,255,255,.55); }

/* ===================== Footer ===================== */
#site-footer{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:var(--ink); color:#fff; }
.footer-inner{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem; }
@media (min-width:640px){ .footer-inner{ padding-inline:2rem; } }
@media (min-width:1024px){ .footer-inner{ padding-top:6rem; } }
.footer-cta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem; }
@media (min-width:1024px){ .footer-cta{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }
.footer-cta-title{ max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; }
@media (min-width:640px){ .footer-cta-title{ font-size:3rem; } }
@media (min-width:768px){ .footer-cta-title{ font-size:3.75rem; } }

.footer-columns{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem; }
@media (min-width:768px){ .footer-columns{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .footer-columns{ grid-template-columns:repeat(4,1fr); } }
.footer-brand{ display:flex; align-items:center; margin-bottom:.9rem; }
.footer-brand img{ height:1.5rem; width:auto; }
.footer-tagline{ max-width:20rem; font-size:.875rem; color:rgba(255,255,255,.55); }
.footer-col-title{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4); margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; font-size:.875rem; }

.legal-bar{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.45); }
@media (min-width:640px){ .legal-bar{ flex-direction:row; } }
.legal-links{ display:flex; gap:1.5rem; }

.footer-watermark{ position:absolute; inset-inline:0; bottom:-1.5rem; z-index:0; text-align:center; pointer-events:none; user-select:none; font-weight:700; line-height:1; font-size:var(--text-watermark); color:rgba(255,255,255,.05); }

/* ===================== Nav overlay ===================== */
.nav-menu{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:var(--ink); color:#fff; opacity:0; pointer-events:none; transform:translateY(-2%); transition:opacity .45s var(--ease-spring-med), transform .45s var(--ease-spring-med); }
.nav-menu.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav-menu-top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem; }
@media (min-width:640px){ .nav-menu-top{ padding:1.5rem 2rem; } }
.nav-menu-brand{ display:flex; align-items:center; }
.nav-menu-brand img{ height:1.5rem; width:auto; }
.nav-close{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:.875rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7); transition:border-color .3s, color .3s, transform .1s; min-height:44px; }
@media (hover:hover) and (pointer:fine){ .nav-close:hover{ border-color:rgba(255,255,255,.4); color:#fff; } }
.nav-close:active{ transform:scale(.95); }

.nav-menu-list{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.nav-menu-list ul{ display:flex; flex-direction:column; gap:.25rem; }
.nav-menu-list li button{ width:100%; display:flex; gap:1rem; padding-block:.5rem; text-align:left; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; transition:all .5s ease-out; transform:translateY(1rem); opacity:0; }
@media (min-width:640px){ .nav-menu-list li button{ font-size:3.75rem; } }
.nav-menu.is-open .nav-menu-list li button{ transform:translateY(0); opacity:1; }
.nav-menu-list .idx{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s; }
.nav-menu-list .label{ color:rgba(255,255,255,.7); transition:color .3s; }
@media (hover:hover) and (pointer:fine){
  .nav-menu-list li button:hover .idx{ color:var(--accent-lime); }
  .nav-menu-list li button:hover .label{ color:#fff; }
}
.nav-menu-list li button[aria-current="page"] .label{ color:var(--accent-lime); }

.nav-menu-bottom{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 1.25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45); }
@media (min-width:640px){ .nav-menu-bottom{ flex-direction:row; justify-content:space-between; padding:1.5rem 2rem; } }
.nav-menu-bottom button{ color:rgba(255,255,255,.7); transition:color .3s; min-height:44px; }
@media (hover:hover) and (pointer:fine){ .nav-menu-bottom button:hover{ color:#fff; text-decoration:underline; } }

/* ===================== Modal ===================== */
.modal-backdrop{ position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem; padding-bottom:calc(1rem + env(safe-area-inset-bottom)); background:rgba(17,17,17,.35); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); opacity:0; pointer-events:none; transition:opacity .45s var(--ease-spring-med), backdrop-filter .45s var(--ease-spring-med); }
@media (min-width:640px){ .modal-backdrop{ align-items:center; } }
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
/* Dark liquid-glass card — refraction/backdrop is applied by liquid-glass.js; this owns the tint, sheen, depth, and glare. */
.modal-panel{
  position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:2rem;
  background:rgba(18,18,22,.65); color:#fff; padding:1.5rem;
  box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    0 16px 40px rgba(0,0,0,.32),
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.14);
  transform:translateY(28px) scale(.97); opacity:0; filter:blur(6px);
  transition:transform .5s var(--ease-spring-soft), opacity .4s var(--ease-spring-med), filter .5s var(--ease-spring-soft);
  transform-origin:center bottom; will-change:transform;
}
/* Cursor-tracked specular glare — position driven by --gx/--gy (site.js) */
.modal-panel::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(
    340px circle at var(--gx, 50%) var(--gy, 15%),
    rgba(255,255,255,.16), rgba(255,255,255,.045) 42%, transparent 68%
  );
}
@media (min-width:640px){ .modal-panel{ padding:2rem; } }
.modal-backdrop.is-open .modal-panel{ transform:translateY(0) scale(1); opacity:1; filter:blur(0); }
.modal-close{ position:absolute; right:1rem; top:1rem; width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); transition:background .3s, color .3s, transform .1s; }
@media (hover:hover) and (pointer:fine){ .modal-close:hover{ background:rgba(255,255,255,.18); color:#fff; } }
.modal-close:active{ transform:scale(.92); }
.modal-heading{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.375rem; }
.modal-kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(255,255,255,.7); }
.modal-kicker::before{ content:''; width:.375rem; height:.375rem; border-radius:9999px; background:var(--accent); }
.modal-heading h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em; color:#fff; }
@media (min-width:640px){ .modal-heading h2{ font-size:1.875rem; } }
.modal-form{ display:flex; flex-direction:column; gap:1rem; }
.modal-form label{ display:flex; flex-direction:column; gap:.4rem; }
.modal-form .cap{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.7); }
.modal-form input, .modal-form textarea, .modal-form select{
  width:100%; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.07);
  border-radius:.875rem; padding:.75rem 1rem; font-size:.875rem; outline:none; font-family:inherit;
  color:#fff; box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.modal-form input::placeholder, .modal-form textarea::placeholder, .modal-form select::placeholder{ color:rgba(255,255,255,.4); }
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus{
  border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); color:#fff;
  box-shadow:0 0 16px rgba(255,255,255,.2);
}
.modal-form textarea{ resize:none; }
.modal-bottom-row{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.modal-note{ font-size:.75rem; color:rgba(255,255,255,.7); }
.modal-success{ display:none; text-align:center; padding-block:2rem; flex-direction:column; align-items:center; gap:1rem; }
.modal-success.is-visible{ display:flex; }
.modal-form.is-hidden{ display:none; }
.modal-success-badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px; background:rgba(255,255,255,.1); color:var(--accent-lime); font-size:1.5rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.modal-success h2{ font-size:1.5rem; font-weight:600; color:#fff; }
.modal-success p{ max-width:32ch; font-size:.875rem; color:rgba(255,255,255,.6); }
/* Submit + success close — glassy translucent pill that matches the dark panel */
.modal-panel .pill-btn.dark{
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28), 0 12px 32px rgba(0,0,0,.35);
  backdrop-filter:blur(10px) saturate(1.4); -webkit-backdrop-filter:blur(10px) saturate(1.4);
}
@media (hover:hover) and (pointer:fine){ .modal-panel .pill-btn.dark:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45); } }
.modal-panel .pill-btn.dark .pill-badge{ background:#fff; color:#0a0a0a; }

/* ===================== Full-page contact form (contact.html) ===================== */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem; align-items:start; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:1.1fr .9fr; padding-block:5rem; } }
.contact-form-card{ background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:2rem; }
.contact-detail{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.contact-detail .value-icon{ margin-bottom:0; flex-shrink:0; }
.contact-detail h4{ font-size:1rem; font-weight:600; margin-bottom:.25rem; }
.contact-detail p, .contact-detail a{ font-size:.9rem; color:var(--muted); }
@media (hover:hover) and (pointer:fine){ .contact-detail a:hover{ color:var(--accent); } }

/* ===================== Apple press states (global) ===================== */
.is-pressing{ transition-duration:80ms !important; }
.brand-btn.is-pressing, .nav-close.is-pressing, .social-chip.is-pressing, .create-tile.is-pressing{ transform:scale(.96); }
.nav-menu-list li button.is-pressing .label{ color:#fff; }

/* Service rows — mobile stack for descriptions */
@media (max-width:1023px){
  .service-row{ flex-wrap:wrap; align-items:flex-start; padding-block:1.25rem; }
  .service-row h3{ flex:1 1 calc(100% - 5rem); font-size:1.35rem; }
  .service-desc{ flex:1 1 100%; padding-left:2.75rem; max-width:none; }
  .service-arrow{ margin-left:auto; }
}

@media (prefers-reduced-motion: reduce){
  .modal-panel{ filter:none !important; transform:none !important; opacity:1 !important; }
  .modal-backdrop .modal-panel{ opacity:0; }
  .modal-backdrop.is-open .modal-panel{ opacity:1; }
  .nav-menu{ transform:none !important; }
}

/* ===================== Interior pages (services / about) ===================== */
.page-hero h1{ font-size:2.25rem; font-weight:600; line-height:1.05; letter-spacing:-.02em; }
@media (min-width:640px){ .page-hero h1{ font-size:3rem; } }
@media (min-width:1024px){ .page-hero h1{ font-size:3.75rem; } }

.page-section{ padding-block:5rem; }
@media (min-width:1024px){ .page-section{ padding-block:7rem; } }
.page-section--tint{ background:var(--surface); }
.page-section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.5rem; }
.page-section-title{ max-width:18ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.05; }
@media (min-width:640px){ .page-section-title{ font-size:3rem; } }
.page-section-sub{ max-width:48ch; font-size:.95rem; color:var(--muted); }

/* Values / feature card grid */
.values-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:768px){ .values-grid{ grid-template-columns:1fr 1fr; } }

/* Alternate service rows — reversed visual/body for variety */
.service-detail-grid.flip .service-visual{ order:-1; }
@media (min-width:1024px){ .service-detail-grid.flip .service-visual{ order:2; } }

/* Studio timeline (about.html) */
.steps{ display:grid; gap:1.5rem; }
@media (min-width:768px){ .steps{ grid-template-columns:1fr 1fr; } }
.step{ position:relative; border:1px solid var(--line); border-radius:1.25rem; padding:2rem; background:#fff; }
.step-num{ font-size:.85rem; font-weight:600; color:var(--accent); letter-spacing:.05em; }
.step h3{ margin-top:.5rem; font-size:1.15rem; font-weight:600; }
.step p{ margin-top:.5rem; font-size:.9rem; color:var(--muted); max-width:42ch; }

/* ===================== Dedicated service pages ===================== */
/* Intro visual: big icon + tech-stack chips on the dark panel */
.service-visual{ flex-direction:column; gap:2rem; }
.service-visual .stack-mark{ font-size:4.5rem; }
.tech-stack{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.tech-stack .tag-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); }

/* Dark full-width tech panel */
.stack-panel{ border-radius:2rem; background:var(--ink); color:#fff; padding:3rem 1.5rem; text-align:center; }
@media (min-width:640px){ .stack-panel{ padding:4rem 2rem; } }
.stack-panel .eyebrow{ justify-content:center; }
.stack-panel h3{ margin:1rem auto 1.5rem; max-width:22ch; font-size:1.875rem; font-weight:600; letter-spacing:-.01em; }
@media (min-width:768px){ .stack-panel h3{ font-size:2.25rem; } }
.stack-panel .tech-stack{ max-width:44rem; margin-inline:auto; }
.stack-panel .tech-stack .tag-chip{ font-size:.875rem; }

/* FAQ accordion (native <details>) */
.faq{ border-top:1px solid var(--line); max-width:60rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none; padding:1.25rem 0; font-weight:500; font-size:1.05rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:1.5rem; font-weight:400; line-height:1; color:var(--muted); transition:transform .3s var(--ease-spring-snap); flex-shrink:0; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details[open] summary{ color:var(--accent); }
.faq details p{ padding:0 0 1.5rem; max-width:60ch; color:var(--muted); font-size:.95rem; }

/* Next-service banner */
.next-service{ display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--line); border-radius:1.5rem; padding:2rem; background:#fff; transition:transform .4s var(--ease-spring-med), box-shadow .4s var(--ease-spring-med); }
@media (hover:hover) and (pointer:fine){ .next-service:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(15,23,42,.08); } }
.next-service .idx{ font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:.05em; }
.next-service h3{ font-size:1.5rem; font-weight:600; margin-top:.35rem; letter-spacing:-.01em; }
@media (min-width:640px){ .next-service h3{ font-size:1.875rem; } }
.next-service .service-arrow{ background:var(--ink); color:#fff; width:3rem; height:3rem; display:grid; place-items:center; border-radius:9999px; flex-shrink:0; transition:transform .4s var(--ease-spring-snap); }
@media (hover:hover) and (pointer:fine){ .next-service:hover .service-arrow{ transform:translateX(5px); } }

/* ===================== Feature Carousel ===================== */
.feature-carousel{
  width:100%; max-width:80rem; margin:0 auto; padding:0 1rem;
}
@media (min-width:768px){ .feature-carousel{ padding:0 2rem; } }

.fc-wrap{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border-radius:2rem; border:1px solid var(--line);
  min-height:600px;
}
@media (min-width:768px){ .fc-wrap{ border-radius:2.5rem; } }
@media (min-width:1024px){ .fc-wrap{ flex-direction:row; border-radius:3rem; aspect-ratio:16/9; } }

/* ---------- Left panel (label list) ---------- */
.fc-labels{
  position:relative; z-index:30; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
  width:100%; min-height:320px; padding:2rem;
  background:var(--accent-orange);
}
@media (min-width:768px){ .fc-labels{ min-height:400px; padding:2rem 3rem; } }
@media (min-width:1024px){ .fc-labels{ width:40%; min-height:auto; height:100%; padding:2rem 2.5rem; align-items:flex-start; } }

.fc-labels::before, .fc-labels::after{
  content:''; position:absolute; left:0; right:0; z-index:40; pointer-events:none;
}
.fc-labels::before{ top:0; height:3rem; background:linear-gradient(to bottom, var(--accent-orange), transparent); }
.fc-labels::after{ bottom:0; height:3rem; background:linear-gradient(to top, var(--accent-orange), transparent); }
@media (min-width:768px){
  .fc-labels::before{ height:4rem; }
  .fc-labels::after{ height:4rem; }
}

.fc-label-track{
  position:relative; width:100%; height:100%; display:flex;
  align-items:center; justify-content:center; z-index:20;
}
@media (min-width:1024px){ .fc-label-track{ justify-content:flex-start; } }

.fc-chip{
  position:absolute; display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1.5rem; border-radius:9999px; border:1px solid rgba(255,255,255,.2);
  background:transparent; color:rgba(255,255,255,.55); white-space:nowrap;
  font-size:.8rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em;
  cursor:pointer; transition:background .5s, color .5s, border-color .5s, transform .55s cubic-bezier(.34,1.56,.64,1), opacity .55s ease;
  height:3.5rem;
}
@media (min-width:768px){ .fc-chip{ padding:.875rem 2rem; font-size:.85rem; height:4rem; } }

.fc-chip.is-active{
  background:#fff; color:var(--accent-orange); border-color:#fff; z-index:10;
}
@media (hover:hover) and (pointer:fine){
  .fc-chip:not(.is-active):hover{ border-color:rgba(255,255,255,.5); color:#fff; }
}
.fc-chip:active{ transform:scale(.96) translateY(var(--y)) !important; }

.fc-chip-icon{ display:flex; align-items:center; justify-content:center; width:1.125rem; height:1.125rem; flex-shrink:0; }
.fc-chip-icon .icon{ width:1.125rem; height:1.125rem; }
.fc-chip.is-active .fc-chip-icon{ color:var(--accent-orange); }

/* ---------- Right panel (card stack) ---------- */
.fc-cards{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  min-height:440px; padding:3rem 1.5rem;
  background:rgba(0,0,0,.02); overflow:hidden;
  border-top:1px solid var(--line);
}
@media (min-width:768px){ .fc-cards{ min-height:520px; padding:4rem 3rem; } }
@media (min-width:1024px){ .fc-cards{ min-height:auto; height:100%; border-top:none; border-left:1px solid var(--line); padding:3rem 2.5rem; } }

.fc-card-stack{
  position:relative; width:100%; max-width:360px; aspect-ratio:4/5;
}

.fc-card{
  position:absolute; inset:0; border-radius:1.75rem; overflow:hidden;
  border:5px solid #fff; background:#fff;
  transform-origin:center center;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
  will-change:transform, opacity;
}
@media (min-width:768px){ .fc-card{ border-width:7px; border-radius:2.25rem; } }

.fc-card[data-status="active"]{ transform:translateX(0) scale(1) rotate(0deg); opacity:1; z-index:20; }
.fc-card[data-status="prev"]{ transform:translateX(-80px) scale(.85) rotate(-3deg); opacity:.4; z-index:10; pointer-events:none; }
.fc-card[data-status="next"]{ transform:translateX(80px) scale(.85) rotate(3deg); opacity:.4; z-index:10; pointer-events:none; }
.fc-card[data-status="hidden"]{ transform:translateX(0) scale(.7) rotate(0deg); opacity:0; z-index:0; pointer-events:none; }

.fc-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:filter .6s ease;
}
.fc-card[data-status="active"] img{ filter:grayscale(0) blur(0); }
.fc-card:not([data-status="active"]) img{ filter:grayscale(1) blur(2px) brightness(.75); }

/* Overlay caption */
.fc-card-overlay{
  position:absolute; inset-inline:0; bottom:0; padding:2rem 1.5rem; padding-top:6rem;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.3) 60%, transparent);
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  opacity:0; transform:translateY(12px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.fc-card[data-status="active"] .fc-card-overlay{ opacity:1; transform:translateY(0); }

.fc-card-badge{
  display:inline-flex; align-self:flex-start; padding:.35rem .75rem;
  border-radius:9999px; background:#fff; color:var(--ink);
  font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.15em;
  border:1px solid var(--line);
}

.fc-card-desc{
  color:#fff; font-size:1.125rem; font-weight:500; line-height:1.3;
  letter-spacing:-.01em;
}
@media (min-width:768px){ .fc-card-desc{ font-size:1.35rem; } }

/* Live dot */
.fc-card-live{
  position:absolute; top:1.25rem; left:1.25rem; display:flex; align-items:center; gap:.5rem;
  opacity:0; transition:opacity .3s ease;
}
.fc-card[data-status="active"] .fc-card-live{ opacity:1; }
.fc-card-live-dot{
  width:.5rem; height:.5rem; border-radius:9999px; background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.8);
}
.fc-card-live-label{
  color:rgba(255,255,255,.75); font-size:.6rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; font-family:monospace;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .fc-chip, .fc-card{ transition-duration:0s !important; }
}

/* ===================== Path Marquee ===================== */
.path-marquee{
  position:relative; width:100%; overflow:hidden;
  padding:0;
  cursor:default;
}
.path-marquee.is-draggable{ cursor:grab; }
.path-marquee.is-dragging{ cursor:grabbing; }

.path-marquee-container{
  position:relative; width:100%; margin:0 auto;
}

.path-marquee svg.pm-svg{
  width:100%; height:auto; display:block;
}

.pm-item{
  position:absolute; top:0; left:0;
  will-change:offset-distance;
  backface-visibility:hidden;
  transition:transform .3s ease;
}
.pm-item:hover{ transform:scale(1.35); z-index:50 !important; }

.pm-item img{
  width:3.5rem; height:3.5rem; object-fit:cover; border-radius:.75rem;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  pointer-events:none; user-select:none;
  border:2px solid #fff;
}
@media (min-width:640px){
  .pm-item img{ width:4.5rem; height:4.5rem; border-radius:1rem; }
}
@media (min-width:1024px){
  .pm-item img{ width:5rem; height:5rem; }
}

@media (prefers-reduced-motion:reduce){
  .pm-item{ transition:none !important; }
}

/* ===== Portfolio page ===== */
.portfolio-hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100dvh; padding:8rem 1.5rem 4rem; text-align:center;
  background:var(--surface, #f5f5f0);
}
.portfolio-hero-text{ max-width:36rem; margin-bottom:2rem; }
.portfolio-hero-text h1{
  font-size:clamp(2.5rem,6vw,5rem); font-weight:700; letter-spacing:-.03em;
  line-height:1.05; margin:.5rem 0 .75rem;
}
.portfolio-hero-sub{
  font-size:1rem; color:#666; max-width:28rem; margin:0 auto;
}
.portfolio-hero .path-marquee{
  width:100%; max-width:72rem; transform:scale(1.05);
}

/* Services strip below marquee */
.portfolio-services{ padding:5rem 0; }
.portfolio-services-grid{
  display:grid; grid-template-columns:1fr; gap:1rem;
}
@media (min-width:640px){
  .portfolio-services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .portfolio-services-grid{ grid-template-columns:repeat(4,1fr); }
}
.portfolio-service-card{
  display:flex; flex-direction:column; gap:.5rem;
  padding:2rem 1.5rem; border-radius:1rem;
  border:1px solid rgba(0,0,0,.08); background:#fff;
  text-decoration:none; color:var(--ink,#0a0a0a);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.portfolio-service-card:hover{
  border-color:var(--accent-orange,#FF5C34);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  transform:translateY(-4px);
}
.portfolio-service-num{
  font-size:.75rem; font-weight:600; color:#999; letter-spacing:.06em;
}
.portfolio-service-card h3{
  font-size:1.125rem; font-weight:600; margin:0;
}
.portfolio-service-card p{
  font-size:.875rem; color:#666; line-height:1.5; margin:0; flex:1;
}
.portfolio-service-arrow{
  font-size:1.25rem; color:var(--accent-orange,#FF5C34);
  align-self:flex-end; opacity:0; transition:opacity .25s;
}
.portfolio-service-card:hover .portfolio-service-arrow{ opacity:1; }

/* ===================== Contact page ===================== */
.contact-section{ padding-block:2rem 4rem; }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:768px){ .contact-grid{ grid-template-columns:1fr 20rem; gap:4rem; } }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:1fr 24rem; } }
.contact-form{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-form label{ display:flex; flex-direction:column; gap:.5rem; }
.contact-form .cap{ font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; padding:.875rem 1rem; border:1px solid var(--line); border-radius:var(--radius-control);
  font:inherit; font-size:.9375rem; background:var(--surface); color:var(--foreground);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,92,52,.12);
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--subtle); }
.contact-form select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%238d8d8d' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; background-size:1rem; padding-right:2.5rem; }
.contact-success{ text-align:center; padding:3rem 1rem; }
.contact-success h2{ margin:.75rem 0 .5rem; font-size:1.5rem; font-weight:600; }
.contact-success p{ color:var(--muted); }
.contact-details{ display:flex; flex-direction:column; gap:2rem; }
.contact-detail-block p{ margin-top:.25rem; font-size:.9375rem; }
.contact-note{ font-size:.8125rem; color:var(--muted); margin-top:.25rem; }

/* ===================== Process section (services page) ===================== */
.process-section{ padding-block:4rem 2rem; }
.process-grid{ display:grid; grid-template-columns:1fr; gap:2rem; margin-top:2.5rem; }
@media (min-width:640px){ .process-grid{ grid-template-columns:repeat(2,1fr); gap:2.5rem; } }
@media (min-width:1024px){ .process-grid{ grid-template-columns:repeat(4,1fr); } }
.process-step{ padding:2rem 1.5rem; border-radius:var(--radius-card-sm); background:var(--surface); transition:transform .35s var(--ease-spring-snap), box-shadow .35s ease; }
@media (hover:hover) and (pointer:fine){ .process-step:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.06); } }
.process-num{ display:block; font-size:.75rem; font-weight:600; color:var(--accent); letter-spacing:.05em; margin-bottom:1rem; }
.process-step h3{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.75rem; }
.process-step p{ font-size:.875rem; color:var(--muted); line-height:1.6; }