/* MJ Studios — shared stylesheet for service pages.
   Values mirror the design system in index.html. */

/* ============ 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 }
.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 }
/* 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 }

/* ============ 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 } }
/* Dark-background header variant — for pages whose hero is dark imagery */
.site-header.on-dark{ color:#fff }
.site-header.on-dark .wm i{ color:var(--accent-from) }
.site-header.on-dark .nav-glass{ background:rgba(10,10,10,.3); border-color:rgba(255,255,255,.15) }
.site-header.on-dark .nav-btn{ color:#fff }
.site-header.on-dark .nav-dd-panel{ background:rgba(10,10,10,.7); border-color:rgba(255,255,255,.15) }
.site-header.on-dark .nav-dd-panel a{ color:rgba(255,255,255,.75) }
.site-header.on-dark .clock-chip{ background:rgba(10,10,10,.3); border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.7) }
.site-header.on-dark .clock-chip .lbl{ color:rgba(255,255,255,.45) }
.site-header.on-dark .clock-chip .time{ color:#fff }
.site-header.on-dark .clock-chip .sep{ color:rgba(255,255,255,.3) }
.site-header.on-dark .menu-btn{ background:rgba(10,10,10,.3); border-color:rgba(255,255,255,.15); color:#fff }

/* ============ Pills / eyebrow ============ */
.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) }
.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) }

/* ============ Service-page hero ============ */
.sp-hero{ position:relative; overflow:hidden; border-radius:0 0 var(--radius-card) var(--radius-card); background:var(--surface) }
.sp-hero .shell{ display:flex; flex-direction:column; align-items:flex-start; gap:1.75rem; padding:8rem 1.25rem 4rem }
@media (min-width:640px){ .sp-hero .shell{ padding-inline:2rem } }
@media (min-width:1024px){ .sp-hero .shell{ padding:10rem 2rem 5rem } }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.8125rem; font-weight:500; color:rgba(17,17,17,.45) }
.crumbs a{ transition:color .25s ease }
.crumbs .sep{ color:rgba(17,17,17,.25) }
.crumbs [aria-current]{ color:rgba(17,17,17,.8) }
.sp-h1{ max-width:22ch; font-size:2.25rem; font-weight:600; line-height:1; letter-spacing:-.02em }
@media (min-width:640px){ .sp-h1{ font-size:3rem } }
@media (min-width:768px){ .sp-h1{ font-size:3.75rem } }
.sp-sub{ max-width:44rem; font-size:1rem; line-height:1.6; color:rgba(17,17,17,.65) }
@media (min-width:640px){ .sp-sub{ font-size:1.125rem } }
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem }
.sp-proof{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.7) }
.sp-proof .stars{ display:inline-flex; gap:.125rem; color:var(--accent); font-size:1rem }
.sp-proof .dot{ color:rgba(17,17,17,.3) }

/* ============ Mouse-scrub video hero ============ */
.scrub-hero{ position:relative; isolation:isolate; overflow:hidden; min-height:100vh; min-height:100dvh;
  background:var(--ink); border-radius:0 0 var(--radius-card) var(--radius-card) }
.scrub-hero video{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:70% center }
.scrub-shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.55), rgba(10,10,10,0) 55%) }
.scrub-hero .shell{ position:relative; z-index:5; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:100vh; min-height:100dvh; padding:7rem 1.25rem 3rem }
@media (min-width:640px){ .scrub-hero .shell{ padding-inline:2rem } }
@media (min-width:1024px){ .scrub-hero .shell{ padding-bottom:4rem } }
.scrub-content{ display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; max-width:40rem }
.scrub-intro{ pointer-events:none; user-select:none; color:rgba(255,255,255,.75);
  font-size:.9375rem; line-height:1.5; font-weight:500 }
.scrub-h1{ color:#fff; font-size:2.5rem; font-weight:600; line-height:1; letter-spacing:-.02em }
@media (min-width:640px){ .scrub-h1{ font-size:3.5rem } }
@media (min-width:768px){ .scrub-h1{ font-size:4rem } }
.scrub-type{ color:#fff; font-size:clamp(1.0625rem, 2.2vw, 1.5rem); line-height:1.4; min-height:3em; max-width:34rem }
.type-cursor{ display:inline-block; width:2px; height:1.1em; background:#fff; vertical-align:middle; margin-left:2px;
  animation:blink 1s step-end infinite }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:0 } }
.scrub-pills{ display:flex; flex-wrap:wrap; gap:.5rem; opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease }
.scrub-pills.show{ opacity:1; transform:none }
.scrub-pill{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:rgba(255,255,255,.82); color:#111; border:1px solid rgba(255,255,255,.4); border-radius:var(--radius-pill);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.8125rem; font-weight:500; padding:.55em 1.25em; white-space:nowrap; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease }
@media (min-width:640px){ .scrub-pill{ font-size:.9375rem } }
.scrub-pill.outline{ background:rgba(10,10,10,.25); color:#fff; border-color:rgba(255,255,255,.6) }
.scrub-pill.outline u{ text-underline-offset:2px }
@media (hover:hover){
  .scrub-pill:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }
  .scrub-pill.outline:hover{ background:#fff; color:#111; border-color:#fff }
}

/* ============ Cursor-spotlight hero ============ */
.spotlight-hero{ position:relative; isolation:isolate; overflow:hidden; min-height:100vh; min-height:100dvh;
  background:var(--ink); border-radius:0 0 var(--radius-card) var(--radius-card) }
.sl-base, .sl-reveal{ position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat }
.sl-base{ z-index:1 }
.sl-reveal{ z-index:2; pointer-events:none }
.sl-heading{ position:absolute; top:14%; left:0; right:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; text-align:center; padding-inline:1.25rem; pointer-events:none }
.sl-heading .crumbs{ pointer-events:auto; margin-bottom:1.25rem; justify-content:center }
.sl-heading h1{ color:#fff; line-height:.95 }
.sl-heading .l1{ display:block; font-weight:400; font-size:3rem; letter-spacing:-.03em }
.sl-heading .l2{ display:block; font-weight:600; font-size:3rem; letter-spacing:-.04em; margin-top:-.125rem }
@media (min-width:640px){ .sl-heading .l1, .sl-heading .l2{ font-size:4.5rem } }
@media (min-width:768px){ .sl-heading .l1, .sl-heading .l2{ font-size:5.5rem } }
.sl-bottom{ position:absolute; z-index:5; bottom:2rem; left:1.25rem; right:1.25rem; display:flex; justify-content:center }
@media (min-width:640px){ .sl-bottom{ bottom:2.5rem } }
.sl-panel{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.25rem; max-width:38rem;
  background:linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%), rgba(12,12,14,.42);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card-sm); padding:1.5rem 1.5rem;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 24px 60px -28px rgba(0,0,0,.7) }
@media (min-width:640px){ .sl-panel{ padding:1.75rem 2.25rem } }
.sl-panel p{ font-size:.8125rem; color:rgba(255,255,255,.85); line-height:1.65 }
@media (min-width:640px){ .sl-panel p{ font-size:.9375rem } }
.pill.accent .pill-inner{ background:linear-gradient(to bottom right, var(--accent-from), var(--accent-to)); color:#fff }
.pill.accent .pill-badge{ background:#fff; color:var(--ink) }
/* entrance animations */
@keyframes slReveal{ 0%{ opacity:0; transform:translateY(28px); filter:blur(12px) } 100%{ opacity:1; transform:translateY(0); filter:blur(0) } }
@keyframes slFadeUp{ 0%{ opacity:0; transform:translateY(20px) } 100%{ opacity:1; transform:translateY(0) } }
@keyframes slZoom{ 0%{ transform:scale(1.12) } 100%{ transform:scale(1) } }
.sl-anim{ opacity:0; animation-fill-mode:forwards; animation-timing-function:cubic-bezier(.16,1,.3,1) }
.sl-anim.reveal{ animation-name:slReveal; animation-duration:1.1s }
.sl-anim.fade{ animation-name:slFadeUp; animation-duration:1s }
.sl-zoom{ animation:slZoom 1.8s cubic-bezier(.16,1,.3,1) forwards }
@media (prefers-reduced-motion: reduce){ .sl-anim{ opacity:1 } }

/* ============ Full-screen video hero ============ */
.video-hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 var(--radius-card) var(--radius-card); background:var(--ink) }
.video-hero video{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:80% center }
@media (min-width:768px){ .video-hero video{ object-position:right center } }
@media (min-width:1024px){ .video-hero video{ object-position:center center } }
.video-hero .shell{ position:relative; z-index:10; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:100vh; min-height:100lvh; padding:7rem 1.25rem 2rem }
@media (min-width:640px){ .video-hero .shell{ padding-inline:2rem; padding-bottom:3rem } }
@media (min-width:1024px){ .video-hero .shell{ padding-bottom:4rem } }
.vh-grid{ display:flex; flex-direction:column; gap:1.5rem }
@media (min-width:640px){ .vh-grid{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:2rem } }
.vh-left{ display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem }
.crumbs.on-video{ color:rgba(255,255,255,.6) }
.crumbs.on-video .sep{ color:rgba(255,255,255,.35) }
.crumbs.on-video [aria-current]{ color:rgba(255,255,255,.92) }
@media (hover:hover){ .crumbs.on-video a:hover{ color:#fff } }
.vh-h1{ color:#fff; font-size:2.25rem; font-weight:600; line-height:1.05; letter-spacing:-.02em; max-width:44rem }
@media (min-width:640px){ .vh-h1{ font-size:3.5rem } }
@media (min-width:768px){ .vh-h1{ font-size:4.5rem } }
@media (min-width:1024px){ .vh-h1{ font-size:5rem } }
.vh-sub{ color:rgba(255,255,255,.7); font-size:.875rem; line-height:1.6; max-width:32.5rem }
@media (min-width:640px){ .vh-sub{ font-size:1rem } }
@media (min-width:768px){ .vh-sub{ font-size:1.125rem } }
.vh-pills{ display:flex; flex-wrap:wrap; gap:.5rem }
.vh-pills.right{ display:none }
@media (min-width:640px){
  .vh-pills.mobile{ display:none }
  .vh-pills.right{ display:flex; flex-direction:column; align-items:flex-end; flex-wrap:nowrap; align-self:flex-end }
}
/* ---- App hero (fullscreen video, top/bottom split) ---- */
.app-hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 var(--radius-card) var(--radius-card); background:var(--ink) }
.app-hero video{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:70% center }
.app-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.06) 42%, rgba(0,0,0,.05) 58%, rgba(0,0,0,.5)) }
.app-hero .shell{ position:relative; z-index:10; display:flex; flex-direction:column; justify-content:space-between;
  min-height:100vh; min-height:100svh; padding:7rem 1.25rem 2.5rem; gap:2rem }
@media (min-width:640px){ .app-hero .shell{ padding-inline:2rem; padding-bottom:3rem } }
@media (min-width:1024px){ .app-hero .shell{ padding-bottom:4rem } }
.ah-top{ display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; max-width:48rem }
.ah-badge{ display:inline-flex; align-items:center; background:rgba(0,0,0,.3); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-pill); padding:.4rem .9rem;
  color:rgba(255,255,255,.9); font-size:.75rem }
@media (min-width:640px){ .ah-badge{ font-size:.875rem } }
.ah-h1{ color:#fff; font-size:2.25rem; font-weight:600; line-height:1.1; letter-spacing:-.02em }
@media (min-width:640px){ .ah-h1{ font-size:3.5rem } }
@media (min-width:768px){ .ah-h1{ font-size:4.25rem } }
@media (min-width:1024px){ .ah-h1{ font-size:4.75rem } }
.ah-bottom{ display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem }
.ah-sub{ color:rgba(255,255,255,.68); font-size:.875rem; line-height:1.65; max-width:26rem }
@media (min-width:640px){ .ah-sub{ font-size:1rem; max-width:32rem } }
@media (min-width:768px){ .ah-sub{ font-size:1.125rem } }
/* glass pill for use on video/dark heroes */
.pill.ghost .pill-inner{ border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.25); color:#fff;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }

.vh-pill{ display:inline-flex; background:rgba(0,0,0,.3); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:#fff; font-size:.75rem; padding:.5rem 1rem; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.1) }
@media (min-width:640px){ .vh-pill{ font-size:.875rem } }

/* ============ Generic page sections ============ */
.sp-section{ background:#fff }
.sp-section .shell{ padding:4rem 1.25rem }
@media (min-width:640px){ .sp-section .shell{ padding-inline:2rem } }
@media (min-width:1024px){ .sp-section .shell{ padding-block:5.5rem } }
.sp-section.tight .shell{ padding-block:2.5rem }
.sp-h2{ margin:1.25rem 0 2.5rem; max-width:24ch; font-size:1.875rem; font-weight:600; letter-spacing:-.02em }
@media (min-width:640px){ .sp-h2{ font-size:2.25rem; margin-bottom:3rem } }

/* Outcome cards */
.oc-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media (min-width:768px){ .oc-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .oc-grid{ grid-template-columns:repeat(4,1fr) } }
.oc-card{ display:flex; flex-direction:column; gap:.75rem; border-radius:var(--radius-card-sm); background:var(--surface); padding:1.75rem;
  transition:transform .4s var(--ease-hover), background .4s var(--ease-hover) }
.oc-card h3{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em; transition:color .3s ease }
.oc-card p{ font-size:.875rem; line-height:1.55; color:rgba(17,17,17,.6); transition:color .3s ease }
.oc-card .oc-num{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); transition:color .3s ease }

/* Deliverable rows (services-row style, description always visible) */
.svc-li{ border-top:1px solid var(--line) }
.svc-li:first-child{ border-top:none }
.svc-row{ display:flex; align-items:flex-start; 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:1.75rem; align-items:center } }
.svc-idx{ width:1.75rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.4); flex:none; padding-top:.25rem }
@media (min-width:640px){ .svc-idx{ width:2.5rem; padding-top:0 } }
.svc-main{ flex:1; display:flex; flex-direction:column; gap:.375rem }
@media (min-width:1024px){ .svc-main{ flex-direction:row; align-items:center; justify-content:space-between; gap:2rem } }
.svc-row h3{ font-size:1.25rem; font-weight:500; letter-spacing:-.01em }
@media (min-width:640px){ .svc-row h3{ font-size:1.5rem } }
.svc-desc{ max-width:30rem; font-size:.875rem; line-height:1.55; color:rgba(17,17,17,.55) }

/* Process steps */
.steps{ display:grid; grid-template-columns:1fr; gap:1.25rem; counter-reset:step }
@media (min-width:768px){ .steps{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .steps{ grid-template-columns:repeat(4,1fr) } }
.step{ display:flex; flex-direction:column; gap:.75rem; border-radius:var(--radius-card-sm); border:1px solid var(--line); padding:1.75rem;
  transition:transform .4s var(--ease-hover), background .4s var(--ease-hover), border-color .4s var(--ease-hover) }
.step .num{ font-size:2rem; font-weight:600; letter-spacing:-.02em; color:var(--accent); transition:color .3s ease }
.step h3{ font-size:1.125rem; font-weight:600; letter-spacing:-.01em; transition:color .3s ease }
.step p{ font-size:.875rem; line-height:1.55; color:rgba(17,17,17,.6); transition:color .3s ease }

/* Craft panel (ink) */
.craft-panel{ border-radius:var(--radius-card); background:var(--ink); color:#fff; padding:3rem 1.5rem }
@media (min-width:640px){ .craft-panel{ padding:4rem 2rem } }
@media (min-width:768px){ .craft-panel{ padding-inline:4rem } }
.craft-panel .statement{ margin-top:1.25rem; max-width:38ch; font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em }
@media (min-width:640px){ .craft-panel .statement{ font-size:1.875rem } }
.craft-panel .statement .muted-part{ color:rgba(255,255,255,.45) }
.craft-panel .craft-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.1); padding-top:1.25rem; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) }

/* FAQ */
.faq-list{ border-top:1px solid var(--line) }
.faq-item{ border-bottom:1px solid var(--line) }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; cursor:pointer; list-style:none;
  padding:1.375rem .25rem; font-size:1.0625rem; font-weight:500; letter-spacing:-.01em }
@media (min-width:640px){ .faq-item summary{ font-size:1.25rem } }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{ content:"+"; flex:none; width:2rem; height:2rem; display:grid; place-items:center;
  border-radius:var(--radius-pill); background:var(--surface); color:rgba(17,17,17,.7); font-weight:400; transition:transform .3s var(--ease-hover) }
.faq-item[open] summary::after{ content:"–"; transform:rotate(180deg) }
.faq-item .faq-a{ padding:0 .25rem 1.5rem; max-width:46rem; font-size:.9375rem; line-height:1.65; color:rgba(17,17,17,.6) }

/* More services */
.more-services{ display:flex; flex-wrap:wrap; gap:.75rem }

/* ============ Footer ============ */
.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 }

/* ============ Menu 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 }

/* ============ 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 }
.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) }
  .site-header.on-dark .menu-btn:hover{ background:rgba(10,10,10,.5) }
  .site-header.on-dark .nav-dd-panel a:hover{ background:rgba(255,255,255,.12); color:#fff }
  .menu-btn:hover>span{ transform:scale(1.05) }
  .crumbs a:hover{ color:#111 }
  .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) }
  .oc-card:hover{ transform:translateY(-6px); background:var(--ink) }
  .oc-card:hover h3{ color:#fff }
  .oc-card:hover p{ color:rgba(255,255,255,.6) }
  .oc-card:hover .oc-num{ color:var(--accent-from) }
  .step:hover{ transform:translateY(-6px); background:var(--ink); border-color:var(--ink) }
  .step:hover h3{ color:#fff }
  .step:hover p{ color:rgba(255,255,255,.6) }
  .step:hover .num{ color:var(--accent-from) }
  .svc-row:hover{ background:rgba(241,240,238,1); padding-left:2rem; padding-right:1.25rem }
  .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 }
}

/* on-dark header returns to light once scrolled past the dark hero */
.site-header.on-dark.scrolled{ color:#111 }
.site-header.on-dark.scrolled .wm i{ color:var(--accent) }
.site-header.on-dark.scrolled .nav-glass{ background:rgba(255,255,255,.65); border-color:rgba(230,229,226,.8) }
.site-header.on-dark.scrolled .nav-btn{ color:#111 }
.site-header.on-dark.scrolled .nav-dd-panel{ background:rgba(255,255,255,.75); border-color:rgba(230,229,226,.8) }
.site-header.on-dark.scrolled .nav-dd-panel a{ color:rgba(17,17,17,.75) }
.site-header.on-dark.scrolled .clock-chip{ background:rgba(255,255,255,.65); border-color:rgba(230,229,226,.8); color:rgba(17,17,17,.7) }
.site-header.on-dark.scrolled .clock-chip .lbl{ color:rgba(17,17,17,.45) }
.site-header.on-dark.scrolled .clock-chip .time{ color:#111 }
.site-header.on-dark.scrolled .clock-chip .sep{ color:rgba(17,17,17,.3) }
.site-header.on-dark.scrolled .menu-btn{ background:rgba(255,255,255,.65); border-color:rgba(230,229,226,.8); color:#111 }

/* ============ 404 page (full-screen video) ============ */
.e404{ position:relative; height:100vh; height:100svh; overflow:hidden; isolation:isolate;
  background:linear-gradient(to bottom, #f1e7da, #fbf8f4) }
/* giant tonal "404" watermark, vertically stretched by JS, faded out at the bottom */
/* layers stack by DOM order (number, glow, fox video, footer) within .e404 */
.e404-bg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 40%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 40%, transparent 92%) }
.e404-num{ font-weight:800; line-height:1; letter-spacing:-.05em; white-space:nowrap;
  font-size:clamp(200px, 48vw, 760px); color:var(--accent); opacity:.32;
  transform:scale(1.15,1); transform-origin:center }
/* soft copper glow lifts the mascot off the cream */
.e404-glow{ position:absolute; top:46%; left:50%; width:clamp(150px,28vw,480px); height:48vh;
  transform:translate(-50%,-50%); border-radius:9999px; pointer-events:none; filter:blur(12px);
  background:radial-gradient(ellipse at center, rgba(207,128,71,.30), rgba(207,128,71,0) 70%) }
/* mascot video, centered and nudged up; multiply drops its white backdrop into the cream */
.e404-video-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; margin-top:calc(-6vh - 40px) }
.e404-video-box{ width:120vw; height:82svh }
@media (min-width:640px){ .e404-video-box{ width:70vw; height:70svh } }
@media (min-width:1024px){ .e404-video-box{ width:60vw; height:78svh } }
.e404-video{ width:100%; height:100%; object-fit:contain; pointer-events:none }
/* bottom content */
.e404-foot{ position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 1.25rem 2.25rem; gap:1.125rem }
@media (min-width:640px){ .e404-foot{ padding-bottom:3.5rem } }
.e404-foot h1{ color:var(--ink); font-size:1.125rem; font-weight:500; letter-spacing:-.01em }
@media (min-width:768px){ .e404-foot h1{ font-size:1.5rem } }
.e404-foot .pill .icon{ width:1.05em; height:1.05em }