/* ===========================================================
   ElitePC — Cleaning & Service Studio
   Shared stylesheet (homepage + packages)
   Aesthetic: DARK studio by default — near-black, jewel-teal,
   glass surfaces. Same structure & selectors as the original.
   =========================================================== */

/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Schibsted+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ----- Tokens ----- */
:root{
  --bg:        #070A0B;   /* near-black base */
  --bg-panel:  #0B1011;   /* slightly raised band */
  --bg-card:   #0F1517;   /* elevated card surface */
  --teal-wash: rgba(23,194,205,.10);

  --ink:       #ECF2F2;   /* primary text — AA+ on dark */
  --ink-soft:  #A6B7B9;   /* secondary text — ≥4.5:1 */
  --ink-faint: #6B7E80;   /* tertiary / labels — ≥3:1 */

  --teal:        #17C2CD;   /* brand cyan, tuned for dark */
  --teal-deep:   #0E929D;
  --teal-bright: #46E6EF;
  --teal-line:   rgba(23,194,205,0.34);
  --teal-glow:   rgba(23,194,205,0.50);

  --line:        rgba(255,255,255,0.09);
  --line-soft:   rgba(255,255,255,0.05);
  --line-strong: rgba(255,255,255,0.16);
  --glass:       rgba(255,255,255,0.03);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --rail-w: 200px;

  --shadow: 0 40px 90px -50px rgba(0,0,0,.9);
  --glow:   0 0 0 1px var(--teal-line), 0 14px 50px -16px var(--teal-glow);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----- Reset ----- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); color-scheme:dark; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--teal); color:#04282b; }

/* ----- Type helpers ----- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:500;
}
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--ink);
}
.lede{
  font-size:clamp(18px,2.1vw,22px);
  color:var(--ink-soft);
  max-width:46ch;
  line-height:1.55;
  text-wrap:pretty;
}
em.accent{ color:var(--teal); font-style:italic; }

/* ----- Layout shell ----- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(72px,11vw,150px); }
.section--tight{ padding-block:clamp(56px,8vw,104px); }
.divider{ height:1px; background:var(--line); border:0; }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--gutter);
  background:transparent;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header.is-stuck{
  background:rgba(7,10,11,.72);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  box-shadow:0 1px 0 var(--line-soft);
  padding-block:13px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:26px; width:auto; filter:brightness(0) invert(1); }
.brand .brand-sub{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint); padding-left:13px;
  border-left:1px solid var(--line); line-height:1.2;
}
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-size:14px; color:var(--ink-soft); letter-spacing:.01em;
  position:relative; transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--teal); box-shadow:0 0 8px var(--teal-glow); transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }

.btn{
  --h:44px;
  display:inline-flex; align-items:center; gap:9px; height:var(--h);
  padding:0 22px; border-radius:999px; font-size:14px; font-weight:500;
  letter-spacing:.01em; transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:#06181a; }
.btn-primary:hover{ background:#fff; transform:translateY(-1px); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--teal); color:#fff; transform:translateY(-1px); box-shadow:var(--glow); }
.btn-teal{ background:var(--teal); color:#04282b; font-weight:600; }
.btn-teal:hover{ background:var(--teal-bright); transform:translateY(-1px); box-shadow:0 12px 36px -12px var(--teal-glow); }
.btn svg{ width:15px; height:15px; }

.nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; }
.nav-toggle span{ display:block; width:20px; height:1.4px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:1.4px; background:var(--ink); transition:transform .3s var(--ease); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

/* ===========================================================
   SCROLL RAIL  (desktop)
   =========================================================== */
.scroll-rail{
  position:fixed; left:max(20px, calc((100vw - var(--maxw))/2 + 4px));
  top:50%; transform:translateY(-50%); z-index:40;
  width:var(--rail-w); pointer-events:none;
}
.rail-track{ position:relative; height:62vh; max-height:560px; width:1px; background:var(--line); margin-left:5px; }
.rail-progress{ position:absolute; left:0; top:0; width:1px; background:var(--teal); box-shadow:0 0 10px var(--teal-glow); height:0; }
.rail-thumb{
  position:absolute; left:-3.5px; top:0; width:8px; height:8px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 0 4px var(--bg), 0 0 12px var(--teal-glow);
  transition:top .12s linear;
}
.rail-marks{ position:absolute; inset:0; }
.rail-mark{
  position:absolute; left:5px; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:14px; pointer-events:auto;
}
.rail-dot{ width:6px; height:6px; border-radius:50%; background:var(--bg-card); border:1px solid var(--ink-faint); transition:all .3s var(--ease); flex:0 0 auto; }
.rail-label{ display:flex; align-items:baseline; gap:9px; opacity:.45; transition:opacity .3s var(--ease), transform .3s var(--ease); transform:translateX(-2px); white-space:nowrap; }
.rail-num{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:.1em; }
.rail-name{ font-size:12.5px; color:var(--ink-soft); letter-spacing:.02em; }
.rail-mark.is-active .rail-dot{ background:var(--teal); border-color:var(--teal); transform:scale(1.25); box-shadow:0 0 10px var(--teal-glow); }
.rail-mark.is-active .rail-label{ opacity:1; transform:translateX(0); }
.rail-mark.is-active .rail-name{ color:var(--ink); }
.rail-mark.is-active .rail-num{ color:var(--teal); }

/* mobile-only chrome — hidden on desktop, shown in the mobile media query */
.mini-progress,
.mini-index,
.mobile-menu,
.m-cta{ display:none; }

/* ===========================================================
   HERO  (legacy/packages helpers)
   =========================================================== */
.hero{ position:relative; padding-top:clamp(124px,17vh,200px); padding-bottom:clamp(40px,6vw,72px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.hero-eyebrow .tick{ width:26px; height:1px; background:var(--teal-line); }
.hero h1{ font-size:clamp(48px,8.2vw,108px); }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:block; }
.hero p.lede{ margin-top:30px; }
.hero-cta{ display:flex; align-items:center; gap:16px; margin-top:38px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:18px 40px; margin-top:50px; flex-wrap:wrap; }
.hero-meta .stat{ flex:0 0 auto; }
.hero-meta .stat .k{ font-family:var(--serif); font-size:clamp(23px,2.3vw,31px); line-height:1; white-space:nowrap; }
.hero-meta .stat .l{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:9px; }

/* ===========================================================
   SECTION HEADERS
   =========================================================== */
.shead{ display:grid; grid-template-columns:auto 1fr; gap:18px 26px; align-items:end; margin-bottom:clamp(40px,5vw,68px); }
.shead .snum{ font-family:var(--mono); font-size:12px; color:var(--teal); letter-spacing:.1em; padding-top:10px; }
.shead h2{ font-size:clamp(32px,5vw,62px); grid-column:2; color:var(--ink); }
.shead .sintro{ grid-column:2; max-width:54ch; color:var(--ink-soft); font-size:clamp(16px,1.7vw,18px); text-wrap:pretty; }

/* ===========================================================
   KNOWN FOR
   =========================================================== */
.known{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.known .item{ padding:42px 30px 38px 0; border-right:1px solid var(--line); position:relative; }
.known .item:last-child{ border-right:0; padding-right:0; }
.known .item .kn-i{ font-family:var(--mono); font-size:11px; color:var(--teal); letter-spacing:.16em; }
.known .item h3{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,31px); line-height:1.12; margin:20px 0 14px; color:var(--ink); }
.known .item p{ color:var(--ink-soft); font-size:15.5px; line-height:1.6; max-width:34ch; }
.known .item p a{ color:var(--teal); border-bottom:1px solid var(--teal-line); }
.known .item .kn-tag{ display:inline-block; margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-faint); border:1px solid var(--line); padding:5px 9px; border-radius:2px; }

/* ===========================================================
   SERVICES
   =========================================================== */
.services-band{ background:var(--bg-panel); }
.svc-list{ border-top:1px solid var(--line); }
.svc-row{
  display:grid; grid-template-columns:64px 1.1fr 1.4fr auto; gap:26px; align-items:center;
  padding:30px 0; border-bottom:1px solid var(--line); position:relative; transition:background .3s var(--ease);
}
.svc-row .svc-num{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); letter-spacing:.08em; }
.svc-row h3{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.8vw,34px); line-height:1.05; color:var(--ink); transition:transform .35s var(--ease), color .35s var(--ease); }
.svc-row p{ color:var(--ink-soft); font-size:15.5px; max-width:42ch; text-wrap:pretty; }
.svc-row .svc-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); text-align:right; white-space:nowrap; }
.svc-row:hover h3{ transform:translateX(10px); color:#fff; }
.svc-row::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--teal); box-shadow:0 0 8px var(--teal-glow); transition:width .4s var(--ease); }
.svc-row:hover::after{ width:100%; }
.svc-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:42px; flex-wrap:wrap; }
.svc-note{ color:var(--ink-soft); font-size:14.5px; max-width:48ch; }
.svc-note b{ color:var(--ink); font-weight:600; }
.btn-pricing{
  --h:52px; padding:0 26px; font-size:14px; letter-spacing:.02em;
  box-shadow:0 12px 30px -14px var(--teal-glow);
}
.btn-pricing svg{ transition:transform .3s var(--ease); }
.btn-pricing:hover{ box-shadow:0 16px 38px -14px var(--teal-glow); }
.btn-pricing:hover svg{ transform:translateX(4px); }

/* ===========================================================
   PROCESS / TURNAROUND
   =========================================================== */
.proc-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; }
.steps{ counter-reset:step; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); align-items:start; }
.step:first-child{ border-top:0; padding-top:0; }
.step .st-n{ font-family:var(--mono); font-size:12px; color:var(--teal); letter-spacing:.1em; padding-top:7px; }
.step h3{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.4vw,28px); line-height:1.1; color:var(--ink); }
.step p{ color:var(--ink-soft); font-size:15px; margin-top:8px; max-width:40ch; }
.turn-card{ background:var(--glass); border:1px solid var(--line); border-radius:6px; padding:clamp(24px,2.6vw,32px); position:sticky; top:108px; backdrop-filter:blur(8px); box-shadow:var(--shadow); }
.turn-card h4{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.turn-row{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:20px 0; border-bottom:1px solid var(--line-soft); }
.turn-row:last-child{ border-bottom:0; }
.turn-row .tr-svc{ font-family:var(--serif); font-size:clamp(19px,2vw,23px); font-weight:500; white-space:nowrap; color:var(--ink); }
.turn-row .tr-time{ font-family:var(--mono); font-size:13px; color:var(--teal); letter-spacing:.04em; text-align:right; white-space:nowrap; }
.turn-foot{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.turn-foot .tf{ display:flex; gap:12px; align-items:baseline; font-size:13px; color:var(--ink-soft); }
.turn-foot .tf b{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink); min-width:96px; flex:0 0 auto; }
.turn-foot .tf span{ flex:1 1 auto; white-space:nowrap; }
.turn-note{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; line-height:1.55; color:var(--ink-soft); text-wrap:pretty; }

/* ===========================================================
   BOOKING  (Calendly embed)
   =========================================================== */
.booking .shead{ margin-bottom:clamp(34px,4vw,52px); }
.bk-embed{
  position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--bg-card); box-shadow:var(--shadow);
}
.bk-embed .calendly-inline-widget{ min-width:320px; height:700px; position:relative; z-index:1; }
.bk-embed .bk-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  pointer-events:none;
}
.bk-embed .bk-loading .spin{ width:16px; height:16px; border:2px solid var(--line-strong); border-top-color:var(--teal); border-radius:50%; animation:bkspin .8s linear infinite; }
@keyframes bkspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .bk-embed .bk-loading .spin{ animation:none; } }
.bk-fallback{ display:flex; align-items:center; gap:16px 18px; flex-wrap:wrap; margin-top:20px; font-size:14px; color:var(--ink-soft); }
.bk-fallback .btn{ height:50px; }

/* ===========================================================
   TESTIMONIALS  (auto-scroll)
   =========================================================== */
.testi{ overflow:hidden; }
.testi .shead{ margin-bottom:46px; }
.marquee{ position:relative; display:flex; flex-direction:column; gap:22px; }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:13vw; max-width:200px; z-index:3; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.track{ display:flex; gap:22px; width:max-content; will-change:transform; }
.track.rev{ animation-direction:reverse; }
.t-row1 .track{ animation:marq 64s linear infinite; }
.t-row2 .track{ animation:marq 78s linear infinite reverse; }
.marquee:hover .track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .track{ animation:none !important; } }

.tcard{
  width:clamp(310px,30vw,392px); flex:0 0 auto; background:var(--glass);
  border:1px solid var(--line); border-radius:6px; padding:28px 28px 24px;
  display:flex; flex-direction:column; gap:16px; backdrop-filter:blur(6px); transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.tcard:hover{ border-color:var(--teal-line); transform:translateY(-3px); }
.tcard .quote{ font-family:var(--serif); font-size:20px; line-height:1.4; color:var(--ink); font-weight:400; text-wrap:pretty; }
.tcard .who{ display:flex; align-items:center; gap:13px; margin-top:auto; }
.tcard .av{ width:38px; height:38px; border-radius:50%; background:var(--teal-wash); color:var(--teal); display:grid; place-items:center; font-family:var(--mono); font-size:13px; font-weight:500; border:1px solid var(--teal-line); flex:0 0 auto; }
.tcard .who .nm{ display:block; font-size:14px; font-weight:600; color:var(--ink); }
.tcard .who .role{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
.tcard .stars{ display:flex; gap:3px; }
.tcard .stars i{ width:12px; height:12px; display:block; background:var(--teal); filter:drop-shadow(0 0 4px var(--teal-glow)); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }

/* ===========================================================
   CTA STRIP
   =========================================================== */
.cta-strip{ position:relative; }
.cta-inner{ display:grid; grid-template-columns:1fr auto; gap:34px; align-items:end; padding-block:clamp(56px,8vw,96px); border-top:1px solid var(--line); }
.cta-inner h2{ font-family:var(--serif); font-weight:500; font-size:clamp(36px,6vw,76px); line-height:1.02; letter-spacing:-.01em; color:var(--ink); }
.cta-inner p{ color:var(--ink-soft); margin-top:18px; max-width:40ch; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background:#05080A; color:#C2C9CB; padding-block:clamp(56px,7vw,88px) 30px; border-top:1px solid var(--line); }
.site-footer a{ color:#C2C9CB; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px 30px; }
.foot-brand img{ height:30px; filter:brightness(0) invert(1); }
.foot-brand p{ color:var(--ink-faint); font-size:14px; margin-top:18px; max-width:30ch; line-height:1.6; }
.foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.foot-col li{ font-size:14.5px; color:var(--ink-soft); }
.foot-col a:hover{ color:var(--teal); }
.foot-hours .fh{ display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.foot-hours .fh:last-child{ border-bottom:0; }
.foot-hours .fh b{ font-family:var(--mono); font-size:12px; color:var(--ink); font-weight:500; letter-spacing:.02em; white-space:nowrap; }
.foot-hours .fh.closed b{ color:var(--ink-faint); }
.foot-qr{ display:flex; gap:14px; align-items:center; margin-top:6px; }
.foot-qr img{ width:74px; height:74px; border-radius:4px; background:#fff; padding:5px; }
.foot-qr .qr-cap{ font-size:13px; color:var(--ink-faint); line-height:1.45; }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid rgba(255,255,255,.09); flex-wrap:wrap; }
.foot-bottom span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint); }
.foot-social{ display:flex; gap:22px; }
.foot-social a{ font-size:13px; color:var(--ink-soft); letter-spacing:.02em; }
.foot-social a:hover{ color:var(--teal); }

/* ===========================================================
   REVEAL ANIMATION
   =========================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ===========================================================
   RESPONSIVE  —  tablet
   =========================================================== */
@media (max-width:1100px){
  .scroll-rail{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }
  .proc-grid{ grid-template-columns:1fr; }
  .turn-card{ position:static; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

/* ===========================================================
   RESPONSIVE  —  mobile  (designed, not shrunk)
   =========================================================== */
@media (max-width:680px){
  body{ font-size:16px; }
  :root{ --gutter:22px; }
  .nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }

  /* mobile menu sheet */
  .mobile-menu{
    position:fixed; inset:0; z-index:70; background:rgba(7,10,11,.97);
    transform:translateY(-100%); transition:transform .5s var(--ease); display:flex; flex-direction:column;
    padding:84px var(--gutter) 40px; pointer-events:none; backdrop-filter:blur(10px);
  }
  .mobile-menu.open{ transform:none; pointer-events:auto; }
  .mobile-menu a{ font-family:var(--serif); font-size:34px; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink); }
  .mobile-menu a .mm-n{ font-family:var(--mono); font-size:12px; color:var(--teal); margin-right:14px; }
  .mobile-menu .mm-foot{ margin-top:auto; display:flex; flex-direction:column; gap:14px; }
  .mm-close{ position:absolute; top:22px; right:18px; width:42px; height:42px; }
  .mm-close::before,.mm-close::after{ content:""; position:absolute; left:11px; top:20px; width:20px; height:1.5px; background:var(--ink); }
  .mm-close::before{ transform:rotate(45deg); } .mm-close::after{ transform:rotate(-45deg); }

  /* mobile top progress */
  .mini-progress{
    display:flex; align-items:center; gap:10px;
    position:fixed; left:0; right:0; top:0; z-index:65; height:3px; background:transparent; pointer-events:none;
  }
  .mini-progress .mp-bar{ position:absolute; left:0; top:0; height:3px; width:0; background:var(--teal); box-shadow:0 0 8px var(--teal-glow); }
  .mini-index{
    position:fixed; right:14px; bottom:84px; z-index:45;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-soft);
    background:rgba(11,16,17,.92); border:1px solid var(--line); border-radius:999px;
    padding:7px 13px; backdrop-filter:blur(8px); display:flex; gap:8px; align-items:center; pointer-events:none;
  }
  .mini-index b{ color:var(--teal); font-weight:500; }
  .mini-index .mi-name{ color:var(--ink); font-weight:500; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* sticky message bar */
  .m-cta{
    position:fixed; left:14px; right:14px; bottom:14px; z-index:50;
    display:flex; gap:10px;
  }
  .m-cta .btn{ flex:1; justify-content:center; height:50px; box-shadow:0 14px 34px -16px rgba(0,0,0,.7); }
  .m-cta .btn-ghost{ background:rgba(11,16,17,.85); backdrop-filter:blur(8px); }

  .hero{ padding-top:120px; }
  .hero h1{ font-size:clamp(46px,15vw,68px); }
  .hero-meta{ gap:26px 32px; margin-top:42px; }

  .shead{ grid-template-columns:1fr; gap:12px; }
  .shead .snum{ padding-top:0; }
  .shead h2,.shead .sintro{ grid-column:1; }

  .known{ grid-template-columns:1fr; }
  .known .item{ padding:30px 0; border-right:0; border-bottom:1px solid var(--line); }
  .known .item:last-child{ border-bottom:0; }
  .known .item p{ max-width:48ch; }

  .svc-row{ grid-template-columns:1fr; gap:9px; padding:26px 0; }
  .svc-row .svc-num{ display:none; }
  .svc-row .svc-meta{ text-align:left; }
  .svc-row:hover h3{ transform:none; }

  .step{ grid-template-columns:1fr; gap:6px; }
  .step .st-n{ padding-top:0; }

  .bk-embed .calendly-inline-widget{ height:640px; }

  .cta-inner{ grid-template-columns:1fr; gap:26px; align-items:start; }

  .foot-grid{ grid-template-columns:1fr; gap:34px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }

  .tcard{ width:80vw; }
  .marquee::before,.marquee::after{ width:40px; }
  .site-footer{ padding-bottom:90px; }
}

@media (max-width:680px){
  .t-row1 .track{ animation-duration:42s; }
  .t-row2{ display:none; }
}