/* ============ Reset / base ============ */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:#ffffff; color:#111111; font-family:'Onest',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
.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 #b15f2c; outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ============ 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;
  --accent:#b15f2c; --accent-from:#cf8047; --accent-to:#97501f;
  --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-spring:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --ease-hover:cubic-bezier(.2,.8,.2,1);
  --ease-line:cubic-bezier(.215,.61,.355,1);
  --ease-word:cubic-bezier(.165,.84,.44,1);
}
.shell{ max-width:var(--container-shell); margin-inline:auto }
.icon{ width:1em; height:1em; display:block; flex:none }

/* Wordmark */
.wm{ font-weight:800; letter-spacing:-.04em }
.wm i{ font-style:normal; color:var(--accent) }
.wm.on-dark i{ color:var(--accent-from) }
.brand-lockup{ display:inline-flex; align-items:baseline; gap:.4rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em }
.brand-lockup .wm{ font-size:1.2em }

/* ============ Reveal helpers ============ */
.rv{ opacity:0; transform:translateY(var(--rv-y,14px)) scale(var(--rv-s,1));
  transition:opacity .8s var(--ease-soft) var(--rv-d,0ms), transform .8s var(--ease-soft) var(--rv-d,0ms) }
.rv.in{ opacity:1; transform:none }
.rv-dim{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease-soft) var(--rv-d,0ms), transform .9s var(--ease-soft) var(--rv-d,0ms) }
.rv-dim.in{ opacity:.4; transform:none }

/* padding-bottom keeps descenders (g, y, j) inside the clip box; negative margin cancels the layout shift */
.lr .ln{ display:block; overflow:hidden; padding-bottom:.15em; margin-bottom:-.15em }
.lr .ln>span{ display:block; transform:translateY(120%); opacity:0;
  transition:transform .9s var(--ease-line) calc(var(--base,0ms) + var(--i,0)*var(--stag,120ms)),
             opacity   .9s var(--ease-line) calc(var(--base,0ms) + var(--i,0)*var(--stag,120ms)) }
.lr.in .ln>span{ transform:translateY(0); opacity:1 }

.wr .w{ display:inline-block; transform:translateY(24px); opacity:0;
  transition:transform .7s var(--ease-word) calc(var(--i,0)*35ms), opacity .7s var(--ease-word) calc(var(--i,0)*35ms) }
.wr.in .w{ transform:none; opacity:1 }

/* ============ Skip link ============ */
.skip-link{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
.skip-link:focus{ position:fixed; left:1rem; top:1rem; z-index:60; width:auto; height:auto; clip:auto; overflow:visible;
  border-radius:var(--radius-control); background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:#fff }

/* ============ Loader ============ */
.loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem; background:var(--ink); color:#fff; border-radius:0 0 var(--radius-card) var(--radius-card);
  transition:transform .7s var(--ease-spring) }
.loader.exit{ transform:translateY(-100%) }
.loader-center{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; opacity:1;
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft) }
.loader.exit .loader-center{ opacity:0; transform:translateY(-12px) }
.loader-brand{ display:flex; align-items:baseline; gap:.5rem; font-weight:600; font-size:1.5rem }
.loader-brand .wm{ font-size:1.875rem }
.loader-center p{ max-width:24ch; font-size:.875rem; color:rgba(255,255,255,.55) }
.loader-progress{ display:flex; flex-direction:column; width:min(22rem,72vw); gap:.75rem }
.loader-track{ height:1px; background:rgba(255,255,255,.15) }
.loader-fill{ height:100%; width:0%; background:var(--accent-from); 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-meta .count{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.8) }
@media (min-width:640px){ .loader-brand{ font-size:1.875rem } }

/* ============ Header ============ */
.site-header{ position:fixed; inset-inline:0; top:0; z-index:80 }
.site-header.scrolled .nav-glass,
.site-header.scrolled .clock-chip,
.site-header.scrolled .menu-btn{ background:rgba(255,255,255,.65) }
.header-inner{ 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; padding:.5rem 1rem; margin-left:-1rem; border-radius:var(--radius-pill);
  border:1px solid transparent; transition:background .35s var(--ease-hover), border-color .35s var(--ease-hover) }
/* glass chip appears once sticky so the logo never sinks into dark sections */
.site-header.scrolled .brand-btn{ background:rgba(255,255,255,.65); border-color:rgba(230,229,226,.8);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.brand-btn .brand-lockup{ transition:transform .35s var(--ease-hover) }
.primary-nav{ display:none }
@media (min-width:1024px){ .primary-nav{ display:flex } }
.primary-nav ul{ display:flex; align-items:center; gap:2rem; font-size:.875rem; font-weight:500 }
.primary-nav ul.nav-glass{ gap:1.75rem; border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:var(--radius-pill); padding:.625rem 1.5rem }
/* dropdown lives OUTSIDE the blurred ul so its own backdrop blur can sample the page */
.primary-nav{ position:relative }
.nav-dd{ position:absolute; left:50%; top:100%; z-index:60; transform:translateX(-50%) translateY(6px);
  padding-top:.625rem; opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease-hover) .12s, transform .25s var(--ease-hover) .12s, visibility 0s .45s }
/* hover bridge: keeps the trigger "hovered" while the pointer crosses the gap to the panel.
   Only exists while Services is already hovered, so it can't hijack clicks on neighbor items. */
.has-dd{ position:relative }
.has-dd:hover::after{ content:""; position:absolute; left:0; right:0; top:100%; height:1.75rem }
.primary-nav:has(.has-dd:hover) .nav-dd,
.primary-nav:has(.nav-dd:hover) .nav-dd,
/* keyboard: open only when the Services trigger or the panel itself holds focus,
   NOT when any other nav link is focused/clicked */
.primary-nav:has(.has-dd:focus-within) .nav-dd,
.nav-dd:focus-within{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition-delay:0s }
.nav-dd-panel{ display:flex; flex-direction:column; gap:.125rem; min-width:14rem;
  border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.75);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:1rem; padding:.5rem;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.25) }
.nav-dd-panel a{ border-radius:.625rem; padding:.55rem .875rem; font-size:.8125rem; font-weight:500;
  color:rgba(17,17,17,.75); white-space:nowrap; transition:background .2s ease, color .2s ease }
@media (hover:hover){ .nav-dd-panel a:hover{ background:rgba(241,240,238,.9); color:#111 } }
.nav-btn .lbl{ display:inline-flex; align-items:center; gap:.25rem; opacity:.8; transition:transform .35s var(--ease-hover), opacity .35s var(--ease-hover) }
.nav-btn[aria-current="page"] .lbl{ opacity:1 }
.nav-btn .caret{ font-size:.75rem; opacity:.6 }
.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(10px); -webkit-backdrop-filter:blur(10px); border-radius:var(--radius-control); padding:.5rem .75rem;
  font-size:.75rem; color:rgba(17,17,17,.7) }
@media (min-width:768px){ .clock-chip{ display:flex } }
.clock-chip .lbl{ color:rgba(17,17,17,.45) }
.clock-chip .time{ min-width:3.5rem; font-variant-numeric:tabular-nums; font-weight:500; color:#111 }
.clock-chip .sep{ color:rgba(17,17,17,.3) }
.clock-chip .date{ font-weight:500 }
.menu-btn{ border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:var(--radius-control); transition:background .3s var(--ease-hover) }
.menu-btn>span{ display:inline-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-hover) }
.menu-btn .menu-word{ display:none }
@media (min-width:640px){ .menu-btn .menu-word{ display:inline } }

/* ============ Hero ============ */
.hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 var(--radius-card) var(--radius-card); background:var(--hero-to) }
.liquid{ position:absolute; inset:0; z-index:0 }
.liquid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.liquid 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); letter-spacing:-.02em; white-space:nowrap }
.hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem; padding:7rem 1.25rem 5rem }
@media (min-width:640px){ .hero-grid{ padding-inline:2rem } }
@media (min-width:1024px){
  .hero-grid{ display:grid; min-height:100vh; min-height:100lvh; grid-template-columns:repeat(12,1fr); gap:2.5rem; padding:9rem 2rem 7rem }
}
.hero-left{ display:flex; flex-direction:column; gap:1.75rem }
@media (min-width:1024px){ .hero-left{ grid-column:span 7 } }
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.7) }
.eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:var(--radius-pill); background:rgba(17,17,17,.5) }
.eyebrow.light{ color:rgba(255,255,255,.7) }
.eyebrow.light::before{ background:rgba(255,255,255,.6) }
.hero-h1{ max-width:20ch; font-size:2.25rem; font-weight:600; line-height:.98; letter-spacing:-.02em }
@media (min-width:640px){ .hero-h1{ font-size:3rem } }
@media (min-width:768px){ .hero-h1{ font-size:3.75rem } }
.rating-row{ display:flex; align-items:center; gap:.75rem }
.rating-stars{ display:inline-flex; gap:.125rem; color:var(--accent); font-size:1rem }
.rating-row p{ font-size:.875rem; font-weight:500; color:rgba(17,17,17,.7) }
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem }
.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 */
.hero-card{ width:100%; max-width:24rem; border-radius:var(--radius-card-sm); background:rgba(255,255,255,.7); padding:.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(230,229,226,.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px) }
@media (min-width:1024px){ .hero-card{ width:19rem } }
.hc-row{ display:flex; gap:.5rem; cursor:pointer; border-radius:var(--radius-control); width:100% }
.hc-tile{ aspect-ratio:1; width:6rem; display:grid; place-items:center; border-radius:var(--radius-control); background:var(--ink); color:#fff }
.hc-tile .wm{ font-size:1.875rem }
.hc-panel{ flex:1; border-radius:var(--radius-control); background:rgba(241,240,238,.7); padding:.75rem; display:flex; flex-direction:column; justify-content:space-between; text-align:left }
.hc-slot{ position:relative; min-height:3.25rem }
.hc-slide{ position:absolute; inset:0; opacity:0; pointer-events:none }
.hc-cap{ font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45) }
.hc-title{ max-width:8rem; font-size:.875rem; font-weight:500; line-height:1.35 }
.hc-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem }
.hc-dots{ display:flex; gap:.375rem; align-items:center }
.hc-dots span{ height:.25rem; width:.375rem; border-radius:var(--radius-pill); background:rgba(17,17,17,.2); transition:all .3s ease }
.hc-dots span.active{ width:1rem; background:rgba(17,17,17,.7) }
.hc-btns{ display:flex; gap:.375rem }
.hc-btn{ width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:var(--radius-pill); background:#fff;
  color:rgba(17,17,17,.7); box-shadow:0 0 0 1px var(--line); font-size:.8rem; transition:color .25s ease }
.hc-btn.prev .icon{ transform:rotate(180deg) }

/* Partners */
.partners{ width:100%; max-width:24rem }
@media (min-width:1024px){ .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(3,1fr); column-gap:1rem; row-gap:.75rem }
.partner{ display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:rgba(17,17,17,.7); opacity:.7;
  transition:transform .35s var(--ease-hover), opacity .35s var(--ease-hover) }
.partner .icon{ font-size:.875rem; color:rgba(17,17,17,.4) }

/* Hero status bar */
.hero-status{ position:relative; z-index:20 }
.hero-status{ background:rgba(255,255,255,.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.hero-status .inner{ 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) }
@media (min-width:640px){ .hero-status .inner{ padding-inline:2rem } }
.hero-status .mid{ display:none }
@media (min-width:640px){ .hero-status .mid{ display:block } }
.hero-status .scroll-cue{ display:inline-flex; align-items:center; gap:.5rem }

/* ============ Pill buttons ============ */
.pill{ display:inline-block }
.pill-inner{ display:inline-flex; align-items:center; gap:.75rem; border-radius:var(--radius-pill); font-size:.875rem; font-weight:500;
  transition:transform .35s var(--ease-hover) }
.pill.dark .pill-inner{ background:var(--ink); color:#fff }
.pill.light .pill-inner{ background:var(--surface); color:#111 }
.pill.outline .pill-inner{ border:1px solid var(--line); background:rgba(255,255,255,.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#111 }
.pill.has-arrow .pill-inner{ padding:.375rem .375rem .375rem 1.5rem }
.pill.no-arrow .pill-inner{ padding:.875rem 1.75rem }
.pill-badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:var(--radius-pill); font-size:1rem }
.pill.dark .pill-badge{ background:#fff; color:var(--ink) }
.pill.light .pill-badge, .pill.outline .pill-badge{ background:var(--ink); color:#fff }
.pill-badge .icon{ transition:transform .35s var(--ease-hover) }

/* ============ About ============ */
.about .shell{ padding:5rem 1.25rem }
@media (min-width:640px){ .about .shell{ padding-inline:2rem } }
@media (min-width:1024px){ .about .shell{ padding-block:7rem } }
.about-panel{ display:grid; grid-template-columns:1fr; align-items:center; gap:2.5rem;
  border-radius:var(--radius-card); background:var(--surface); padding:2rem }
@media (min-width:640px){ .about-panel{ padding:3rem } }
@media (min-width:1024px){ .about-panel{ grid-template-columns:5fr 7fr; gap:4rem; padding:4rem } }
.about-media{ order:2 }
.about-right{ order:1; display:flex; flex-direction:column; align-items:flex-start; gap:1.75rem }
@media (min-width:1024px){ .about-media{ order:0 } .about-right{ order:0 } }
/* Studio card — ink tile with live world clocks */
.studio-card{ position:relative; overflow:hidden; width:100%; border-radius:var(--radius-card-sm);
  background:var(--ink); color:#fff; padding:1.75rem; display:flex; flex-direction:column; gap:1.25rem }
@media (min-width:640px){ .studio-card{ padding:2rem } }
.studio-card .globe-bg{ position:absolute; right:-3rem; bottom:-4rem; font-size:16rem; color:rgba(255,255,255,.05); pointer-events:none }
.studio-head{ position:relative; display:flex; align-items:center; gap:.75rem }
.studio-head .icon{ font-size:1.75rem; color:var(--accent-from) }
.studio-head h3{ font-size:1.25rem; font-weight:500; letter-spacing:-.01em }
.studio-card>p{ position:relative; font-size:.875rem; color:rgba(255,255,255,.55); max-width:22rem }
.tz-list{ position:relative; display:flex; flex-direction:column; gap:.5rem; margin-top:.25rem }
.tz-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-radius:var(--radius-control); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:.625rem 1rem; font-size:.8125rem }
.tz-row .city{ color:rgba(255,255,255,.65) }
.tz-row .t{ font-variant-numeric:tabular-nums; font-weight:500 }
.studio-since{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(255,255,255,.1); padding-top:1rem; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) }
.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-part{ color:var(--muted) }
.chip .glyph, .chip .icon{ transition:transform .35s var(--ease-hover) }
.chip .glyph{ font-weight:700 }

/* ============ CreateBand ============ */
.create-band ul{ display:flex; flex-direction:column; gap:.75rem; padding:2.5rem 1.25rem }
@media (min-width:640px){ .create-band ul{ flex-direction:row; gap:1rem; padding-inline:2rem } }
.create-band li{ flex:1 }
.create-tile{ display:grid; place-items:center; height:6rem; border-radius:var(--radius-pill); font-size:1.875rem; font-weight:500;
  transition:transform .4s var(--ease-hover) }
@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:#fff }
.create-tile.dark{ background:var(--ink); color:#fff }
.create-tile.ghost{ background:rgba(241,240,238,.6); color:rgba(17,17,17,.35) }
.create-tile .icon{ font-size:2.25rem }
@media (min-width:640px){ .create-tile .icon{ font-size:3rem } }

/* ============ Portfolio ============ */
.portfolio .shell{ padding:2.5rem 1.25rem 5rem }
@media (min-width:640px){ .portfolio .shell{ padding-inline:2rem } }
@media (min-width:1024px){ .portfolio .shell{ padding-bottom:7rem } }
.pf-head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin-bottom:3rem; text-align:center }
.eyebrow.pill-eyebrow{ border:1px solid var(--line); border-radius:var(--radius-pill); padding:.375rem 1rem;
  background:rgba(255,255,255,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.pf-h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; width:fit-content }
@media (min-width:640px){ .pf-h2{ font-size:3rem } }
.pf-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
@media (min-width:768px){ .pf-grid{ grid-template-columns:1fr 1fr } }
.pf-link{ display:block; height:100% }
.pf-card{ display:flex; flex-direction:column; height:100%; border-radius:var(--radius-card); background:var(--surface);
  padding:.625rem; transition:transform .4s var(--ease-hover), background .4s var(--ease-hover) }
.pf-foot h3, .pf-foot p{ transition:color .3s ease }
.pf-media{ position:relative; overflow:hidden; border-radius:calc(var(--radius-card) - .625rem); background:var(--surface-2) }
.pf-img{ display:block; width:100%; height:auto }
.pf-foot{ display:flex; flex-direction:column; gap:.375rem; padding:1.125rem .875rem .75rem }
.pf-foot h3{ font-size:1.25rem; font-weight:500; letter-spacing:-.01em }
@media (min-width:640px){ .pf-foot h3{ font-size:1.5rem } }
.pf-foot p{ font-size:.875rem; color:rgba(17,17,17,.55); max-width:34rem }
.pf-tags{ margin-top:.625rem; display:flex; flex-wrap:wrap; gap:.5rem }
.tag-chip{ display:inline-flex; background:#fff; border:1px solid var(--surface-2); color:rgba(17,17,17,.7);
  border-radius:var(--radius-pill); padding:.375rem .875rem; font-size:.8125rem }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:118; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:rgba(10,10,10,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; transition:opacity .45s var(--ease-spring) }
.lightbox.open{ opacity:1 }
.lightbox figure{ display:flex; flex-direction:column; align-items:center; gap:.75rem; max-width:min(92vw, 80rem) }
.lb-frame{ border-radius:var(--radius-card-sm); box-shadow:0 25px 60px -15px rgba(0,0,0,.6); overflow:hidden }
.lightbox img{ display:block; max-width:min(92vw, 80rem); max-height:80vh; width:auto; height:auto }
/* Tall pages: readable width, scroll inside the frame */
.lightbox.scroll .lb-frame{ overflow-y:auto; max-height:82vh; overscroll-behavior:contain }
.lightbox.scroll img{ width:min(88vw, 56rem); max-width:none; max-height:none; height:auto }
.lightbox video{ display:block; max-width:min(92vw, 80rem); max-height:80vh; width:auto; height:auto }
.lightbox figcaption{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.55) }
.lightbox-close{ position:absolute; right:1.25rem; top:1.25rem; width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.1); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .25s ease }
@media (hover:hover){ .lightbox-close:hover{ background:rgba(255,255,255,.22) } }

/* ============ Services ============ */
.services .shell{ padding:5rem 1.25rem }
@media (min-width:640px){ .services .shell{ padding-inline:2rem } }
@media (min-width:1024px){ .services .shell{ padding-block:7rem } }
.svc-h2{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
@media (min-width:640px){ .svc-h2{ margin-bottom:3.5rem; font-size:3rem } }
.svc-li{ border-top:1px solid var(--line) }
.svc-li:first-child{ border-top:none }
.svc-row{ display:flex; align-items:center; gap:1rem; border-radius:var(--radius-card-sm); padding:1.5rem 1.5rem;
  background:rgba(241,240,238,0); transition:background .45s var(--ease-hover), padding .45s var(--ease-hover) }
@media (min-width:640px){ .svc-row{ gap:1.5rem; padding-block:2rem } }
.svc-idx{ width:1.75rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.4); flex:none }
@media (min-width:640px){ .svc-idx{ width:2.5rem } }
.svc-row h3{ flex:1; font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
@media (min-width:640px){ .svc-row h3{ font-size:1.875rem } }
@media (min-width:768px){ .svc-row h3{ font-size:2.25rem } }
.svc-desc{ display:none; max-width:20rem; font-size:.875rem; color:rgba(17,17,17,.55) }
@media (min-width:1024px){ .svc-desc{ display:block } }
.svc-badge{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:var(--radius-pill); background:var(--ink); color:#fff;
  flex:none; transition:transform .4s var(--ease-hover) }
@media (min-width:640px){ .svc-badge{ width:3rem; height:3rem } }
/* Service hover preview: a cursor-following card with a looping work clip (built in home.js).
   Fixed + pointer-events:none so it never blocks the row; hidden on touch/small screens. */
.svc-preview{ position:fixed; top:0; left:0; z-index:70; width:clamp(300px, 26vw, 400px); aspect-ratio:4/3;
  border-radius:var(--radius-card-sm); overflow:hidden; pointer-events:none;
  background:var(--ink); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55);
  opacity:0; transform:translate(-50%,calc(-100% - 14px)) scale(.9) rotate(-3deg);
  transition:opacity .28s var(--ease-hover), transform .28s var(--ease-hover);
  will-change:left,top,transform,opacity }
.svc-preview.show{ opacity:1; transform:translate(-50%,calc(-100% - 14px)) scale(1) rotate(-3deg) }
.svc-preview video{ width:100%; height:100%; object-fit:cover; display:block }
.svc-preview img{ width:100%; height:100%; object-fit:contain; display:none }
/* character stills (Careers mascots) use a portrait card and show the whole character */
.svc-preview.char{ aspect-ratio:3/4; width:clamp(240px, 19vw, 320px) }
@media (max-width:1023px){ .svc-preview{ display:none } }

/* ============ Stats ============ */
.stats .shell{ padding:0 1.25rem 5rem }
@media (min-width:640px){ .stats .shell{ padding-inline:2rem } }
@media (min-width:1024px){ .stats .shell{ padding-bottom:7rem } }
.stats-panel{ border-radius:var(--radius-card); 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-h2{ margin-top:1rem; max-width:20ch; font-size:1.875rem; font-weight:500; letter-spacing:-.01em }
@media (min-width:768px){ .stats-h2{ 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-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) }

/* ============ 'ooter ============ */
.site-footer{ position:relative; overflow:hidden; border-radius:var(--radius-card) var(--radius-card) 0 0; background:var(--ink); color:#fff }
.site-footer .shell{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
@media (min-width:640px){ .site-footer .shell{ padding-inline:2rem } }
@media (min-width:1024px){ .site-footer .shell{ 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-h2{ max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
@media (min-width:640px){ .footer-h2{ font-size:3rem } }
@media (min-width:768px){ .footer-h2{ font-size:3.75rem } }
.footer-cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
@media (min-width:768px){ .footer-cols{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .footer-cols{ grid-template-columns:repeat(3,1fr) } }
.footer-brand-col .brand-lockup{ margin-bottom:1rem }
.footer-brand-col p{ max-width:20rem; font-size:.875rem; color:rgba(255,255,255,.55) }
.footer-col h4{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4); margin-bottom:1.25rem }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; font-size:.875rem }
.alink{ display:inline-flex }
.alink span{ display:inline-block; opacity:.65; transition:transform .35s var(--ease-hover), opacity .35s var(--ease-hover) }
.footer-legal{ 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){ .footer-legal{ flex-direction:row } }
.footer-legal .links{ display:flex; gap:1.5rem }
.alink.legal span{ opacity:.7 }
.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); letter-spacing:-.02em; white-space:nowrap }

/* ============ NavMenu overlay ============ */
.menu-overlay{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column;
  background:rgba(10,10,10,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:#fff; opacity:0; transition:opacity .45s var(--ease-spring) }
.menu-overlay.open{ opacity:1 }
.menu-top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
@media (min-width:640px){ .menu-top{ padding:1.5rem 2rem } }
.menu-close{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-control);
  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 ease, color .3s ease }
.menu-close .icon{ font-size:.875rem }
.menu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center }
.menu-nav ul{ display:flex; flex-direction:column; gap:.25rem }
.m-item{ display:flex; align-items:baseline; gap:1rem; width:100%; padding-block:.5rem; text-align:left;
  font-size:2.25rem; font-weight:600; letter-spacing:-.02em;
  transform:translateY(1rem); opacity:0; transition:all .5s ease-out; transition-delay:calc(var(--i,0)*45ms + 80ms) }
@media (min-width:640px){ .m-item{ font-size:3.75rem } }
.menu-overlay.open .m-item{ transform:translateY(0); opacity:1 }
.m-idx{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s ease }
.m-lbl{ color:rgba(255,255,255,.7); transition:color .3s ease }
.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){ .menu-bottom{ flex-direction:row; align-items:center; justify-content:space-between; padding-inline:2rem } }
.menu-start{ color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.025em; font-size:.75rem; text-align:left }

/* ============ Request modal ============ */
.modal-backdrop{ position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem;
  background:rgba(17,17,17,.3); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transition:opacity .4s var(--ease-spring) }
@media (min-width:640px){ .modal-backdrop{ align-items:center } }
.modal-backdrop.open{ opacity:1 }
.modal-panel{ position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:var(--radius-card);
  background:rgba(255,255,255,.88); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:1.5rem; box-shadow:0 25px 50px -12px rgba(0,0,0,.25), 0 0 0 1px var(--line);
  transform:translateY(28px); opacity:0; transition:transform .45s var(--ease-spring), opacity .45s var(--ease-spring) }
@media (min-width:640px){ .modal-panel{ padding:2rem } }
.modal-backdrop.open .modal-panel{ transform:translateY(0); opacity:1 }
.modal-backdrop.closing .modal-panel{ transform:translateY(18px); opacity:0 }
.modal-close{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:var(--surface); color:rgba(17,17,17,.6); transition:background .25s ease, color .25s ease }
.modal-head{ display:flex; flex-direction:column; gap:.375rem; margin-bottom:1.5rem }
.modal-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.6) }
.modal-eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:var(--radius-pill); background:var(--accent) }
.modal-head h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
@media (min-width:640px){ .modal-head h2{ font-size:1.875rem } }
.modal-form{ display:flex; flex-direction:column; gap:1rem }
.modal-form label{ display:flex; flex-direction:column; gap:.375rem }
.modal-form .cap{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(17,17,17,.5) }
.modal-form .cap .opt{ text-transform:none; letter-spacing:0; color:rgba(17,17,17,.35) }
.modal-form input, .modal-form textarea, .modal-form select{ width:100%; border:1px solid rgba(17,17,17,.16); background-color:rgba(255,255,255,.55);
  border-radius:var(--radius-control); padding:.75rem 1rem; font-size:.875rem; font-family:inherit; color:#111; outline:none;
  box-shadow:inset 0 1px 2px rgba(17,17,17,.05), 0 1px 0 rgba(255,255,255,.7);
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease }
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus{ border-color:rgba(17,17,17,.35); background-color:#fff;
  box-shadow:0 0 0 3px rgba(17,17,17,.06) }
.modal-form textarea{ resize:none }
.modal-form select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:.75rem }
.ts-slot{ min-height:65px; margin-top:.25rem }
.ts-slot:empty{ min-height:0; margin:0 }
.modal-foot{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.modal-foot .note{ font-size:.75rem; color:rgba(17,17,17,.45) }
.modal-success{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding-block:2rem }
.modal-success .badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:var(--radius-pill); background:var(--ink); color:var(--accent-from) }
.modal-success .badge .wm{ font-size:1.125rem }
.modal-success h2{ font-size:1.5rem; font-weight:600 }
.modal-success p{ max-width:32ch; font-size:.875rem; color:rgba(17,17,17,.6) }
[hidden]{ display:none !important }

/* ============ Hover interactions (desktop only) ============ */
@media (hover:hover){
  .brand-btn:hover .brand-lockup{ transform:scale(1.04) }
  .nav-btn:hover .lbl{ transform:translateY(-2px); opacity:1 }
  .menu-btn:hover{ background:rgba(255,255,255,.7) }
  .menu-btn:hover>span{ transform:scale(1.05) }
  .hc-btn:hover{ color:#111 }
  .partner:hover{ transform:translateY(-2px); opacity:1 }
  .pill:hover .pill-inner{ transform:scale(1.04) }
  .pill.arrow-right:hover .pill-badge .icon{ transform:translate(3px,0) }
  .pill.arrow-up-right:hover .pill-badge .icon{ transform:translate(2px,-2px) }
  .create-tile:hover{ transform:scale(1.03) }
  .pf-card:hover{ transform:translateY(-6px); background:var(--ink) }
  .pf-card:hover .pf-foot h3{ color:#fff }
  .pf-card:hover .pf-foot p{ color:rgba(255,255,255,.6) }
  .svc-row:hover{ background:rgba(241,240,238,1); padding-left:2rem; padding-right:1.25rem }
  .svc-row:hover .svc-badge{ transform:translateX(5px) }
  .alink:hover span{ transform:translateX(4px); opacity:1 }
  .alink.legal:hover span{ transform:translateX(3px); opacity:1 }
  .m-item:hover .m-idx{ color:var(--accent-from) }
  .m-item:hover .m-lbl{ color:#fff }
  .menu-close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
  .menu-start:hover{ color:#fff; text-decoration:underline }
  .modal-close:hover{ background:var(--surface-2); color:#111 }
}

/* ============ Mobile refinements ============ */
@media (max-width:639px){
  .svc-row{ flex-wrap:wrap }
  .svc-row .pill{ margin-left:2.75rem }
  .modal-panel{ max-height:90vh; overflow-y:auto }
}