/* Fixmara atelier: warm editorial, dark full-bleed bands alternating with cream. */

:root {
  --ink:        #17181a;
  --ink-soft:   #4b4f55;
  --sand:       #f5f2ed;
  --paper:      #ffffff;
  --line:       #e2ddd4;
  --brand:      #1f5fbf;
  --brand-deep: #17488f;
  --brand-lite: #57b6f5;
  --hero-accent: #1c7ec2;
  --dark:       #14161a;
  --on-dark:    #f4f2ee;
  --on-dark-soft: #b3b7bd;
  --on-photo:   #e8e5df;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --sec: clamp(4.5rem, 11vw, 10rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must beat any display we set later, or the drawer leaks onto desktop. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* Precision Focus: one native animated cursor, with a fixed centre hotspot. */
.precision-cursor, .precision-cursor__ripple { display: none !important; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.has-focus-cursor, html.has-focus-cursor * { cursor: var(--focus-cursor, auto) !important; }
  html.has-focus-cursor :is(input, textarea, select, option, video[controls], iframe, [contenteditable]:not([contenteditable="false"])),
  html.has-focus-cursor [contenteditable]:not([contenteditable="false"]) * { cursor: auto !important; }
  html.has-focus-cursor :is(:disabled, [aria-disabled="true"]),
  html.has-focus-cursor [aria-disabled="true"] * { cursor: not-allowed !important; }
}

.wrap { width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: var(--gutter); }

.display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.02; margin: 0; }
.display--xl { font-size: clamp(2.9rem, 7.4vw, 6.4rem); }
.display--lg { font-size: clamp(2.15rem, 4.8vw, 4.1rem); }

.eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-lite);
}
.lede { max-width: 46ch; margin: 1.4rem 0 0; color: var(--on-photo); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.lede--ink { color: var(--ink-soft); }

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 200;
  padding: .7rem 1rem; border-radius: 999px;
  background: var(--brand); color: #fff; text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms var(--ease);
}
.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;
}
.skip-link:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--brand-lite); outline-offset: 3px; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: .7rem 1.4rem;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap;
  transition: transform 260ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.pill:active { transform: scale(.975); transition-duration: 70ms, 160ms, 160ms; }
.pill--brand { background: var(--brand); color: #fff; }
.pill--brand:hover { background: var(--brand-deep); }
.pill--lg { min-height: 3.3rem; padding-inline: 1.7rem; font-size: 1rem; }
.pill--xl { min-height: 3.8rem; padding-inline: 2.2rem; font-size: 1.05rem; margin-top: 2.4rem; }

.textlink {
  display: inline-block; margin-top: 1.6rem;
  color: var(--brand); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .85rem var(--gutter);
  transition: background-color 260ms var(--ease), border-color 260ms var(--ease);
  border-bottom: 1px solid transparent;
}
.bar::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 240%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(20 22 26 / .72) 0%, rgb(20 22 26 / .34) 52%, transparent 100%);
  transition: opacity 260ms var(--ease);
}
.bar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  pointer-events: none;
  background: var(--brand-lite);
  transform: scaleX(var(--page-p, 0));
  transform-origin: left center;
}
.bar.is-stuck::before, .bar.is-light::before { opacity: 0; }
.bar.is-stuck { background: rgb(20 22 26 / .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: rgb(246 241 232 / .12); }
.bar.is-light.is-stuck { background: rgb(250 247 241 / .82); border-bottom-color: var(--line); }

.bar__brand { display: block; flex: 0 0 auto; line-height: 0; }
.bar__logo { width: clamp(7.5rem, 12vw, 10.5rem); height: auto; }
.bar__logo--dark { display: none; }
.bar.is-light .bar__logo--light { display: none; }
.bar.is-light .bar__logo--dark { display: block; }

.bar__nav { display: flex; gap: clamp(1.1rem, 2.4vw, 2.2rem); margin-left: auto; }
.bar__nav a { color: var(--on-dark); text-decoration: none; font-size: .92rem; font-weight: 500; opacity: .85; transition: opacity 160ms var(--ease), color 160ms var(--ease); }
.bar__nav a:hover { opacity: 1; }
.bar.is-light .bar__nav a { color: var(--ink); }

.bar__toggle { display: none; }

/* ---------- mobile drawer ---------- */
.drawer {
  position: fixed; inset: 3.9rem .75rem auto; z-index: 99;
  max-height: calc(100dvh - 4.65rem - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid; gap: .3rem; padding: .8rem;
  border-radius: 1.1rem; border: 1px solid rgb(246 241 232 / .14);
  background: rgb(20 22 26 / .96);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1.4rem 3rem rgb(0 0 0 / .45);
}
.drawer a { padding: .85rem 1rem; border-radius: .8rem; color: var(--on-dark); text-decoration: none; font-weight: 500; }
.drawer a:hover { background: rgb(246 241 232 / .1); }
.drawer .pill { margin-top: .35rem; }

@media (min-width: 861px) { .drawer { display: none !important; } }

/* ---------- scroll-world opening ---------- */
.world-intro {
  position: relative;
  height: 640svh;
  background: #0c0f12;
}
.world-intro__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: #0c0f12;
  isolation: isolate;
}
.world-intro__scene,
.world-intro__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.world-intro__scene {
  overflow: hidden;
  opacity: var(--scene-a, 0);
  will-change: opacity;
}
.world-intro__scene:first-child { --scene-a: 1; }
.world-intro__media {
  object-fit: cover;
  object-position: center;
  transform: scale(var(--scene-scale, 1.025));
  transform-origin: 62% 48%;
  will-change: transform;
}
.world-intro__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(5 8 11 / .78) 0%, rgb(5 8 11 / .42) 38%, transparent 72%);
}
.world-intro__copy {
  position: absolute;
  z-index: 1;
  inset: auto 0 clamp(4rem, 10vh, 7.5rem);
  color: var(--on-dark);
  pointer-events: none;
  transform: translate3d(0, calc(var(--scene-local, 0) * -12px), 0);
  will-change: transform;
}
.world-intro__step { margin: 0 0 1rem; color: #9fd5fa; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.world-intro__title {
  max-width: 12ch;
  margin: 0;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(3.4rem, 8.2vw, 8.1rem);
  font-weight: 850;
  font-style: normal;
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
  text-shadow: 0 3px 28px rgb(0 0 0 / .38);
}
.world-intro__title em {
  color: transparent;
  font: inherit;
  -webkit-text-stroke: clamp(1px, .11vw, 2px) rgb(255 255 255 / .88);
  text-shadow: none;
}
.world-intro__text { max-width: 37ch; margin: 1.4rem 0 0; color: rgb(255 255 255 / .84); font-size: clamp(.92rem, 1.3vw, 1.08rem); line-height: 1.55; text-shadow: 0 2px 16px rgb(0 0 0 / .48); }

/* ---------- original hero, retained as the second scroll chapter ---------- */
.hero { position: relative; height: 380svh; background: var(--dark); } /* Black-shirt technician, then the original leaf/white-shirt scene. */
.hero__pin {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  display: flex; align-items: stretch;
}
.hero__poster, .hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero__video { opacity: 0; transition: opacity 420ms var(--ease); }
.hero__video.is-ready { opacity: 1; }
.scrub-activate {
  position: absolute; z-index: 4; right: var(--gutter);
  top: 50%; transform: translateY(-50%);
  min-height: 44px; max-width: calc(100% - 2 * var(--gutter));
  padding: .7rem 1rem; border: 1px solid var(--brand-lite); border-radius: 999px;
  background: #14161a; color: #fff; font: 600 .82rem var(--sans);
  cursor: pointer; touch-action: manipulation;
}
.scrub-activate:focus-visible { outline: 3px solid var(--brand-lite); outline-offset: 4px; }
.scrub-activate:active { background: var(--brand-deep); }
.hero__veil {
  position: absolute; inset: 0;
  opacity: var(--hero-copy-a, 1);
  background:
    linear-gradient(90deg, rgb(5 8 11 / .88), rgb(5 8 11 / .7) 26%, rgb(5 8 11 / .23) 49%, transparent 65%),
    linear-gradient(to top, rgb(9 12 16 / .45), transparent 40%);
}
.hero__copy {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-width: none;
  padding-block: 6rem clamp(3rem, 9svh, 7rem);
  color: var(--on-dark);
  will-change: opacity, transform;
}
.hero__title { margin: 0; font-family: var(--sans); font-weight: 850; font-size: clamp(2.6rem, 4.9vw, 6rem); font-style: normal; line-height: .96; letter-spacing: -.035em; text-transform: uppercase; text-align: left; color: #fff; text-shadow: 0 3px 28px rgb(5 8 12 / .38); }
.hero__copy .lede { margin: 0; max-width: min(38ch, 40vw); color: var(--on-dark); text-shadow: 0 2px 16px rgb(5 8 12 / .5); }
.hero__copy .eyebrow { max-width: 42rem; color: #9fd5fa; text-shadow: 0 2px 14px rgb(5 8 12 / .45); }
.hero__title-b { display: block; white-space: nowrap; color: transparent; -webkit-text-stroke: clamp(1px, .11vw, 2px) var(--brand-lite); text-shadow: none; }
.hero__bottom { padding-top: 1.6rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
@media (max-width: 860px) {
  .hero__poster, .hero__video { object-fit: contain; object-position: center; }
  .hero__copy { justify-content: flex-start; padding-block: 5.2rem 2rem; }
  .hero__veil { background: linear-gradient(to bottom, rgb(20 22 26 / .94), rgb(20 22 26 / .7) 24%, transparent 40%, transparent 56%, rgb(9 12 16 / .86) 78%, rgb(9 12 16 / .95)); }
  .hero__title { font-size: clamp(2rem, 9.8vw, 4.5rem); }
  .hero__copy .eyebrow { font-size: .62rem; max-width: 30ch; }
  .hero__bottom { margin-top: auto; padding: 1rem 0 0; }
  .hero__copy .lede { font-size: .95rem; max-width: 42ch; }
  .hero__actions { margin-top: 1rem; }
  .hero__actions .pill { min-height: 2.8rem; padding-block: .55rem; font-size: .9rem; }
}
@media (max-height: 600px) and (min-width: 861px) {
  .hero__copy { padding-top: 4.5rem; padding-bottom: 1rem; }
  .hero__title { font-size: min(4.9vw, 13svh); }
}
@media (max-height: 700px) and (max-width: 860px) {
  .hero__title { font-size: clamp(2rem, 9.4vw, 3rem); }
}
.pill--ghost { border-color: rgb(255 255 255 / .52); color: var(--on-dark); background: rgb(10 14 19 / .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pill--ghost:hover { background: rgb(10 14 19 / .32); }

/* the opening is dark; light/dark section detection takes over after load */
.bar::before { background: linear-gradient(to bottom, rgb(12 15 18 / .82) 0%, rgb(12 15 18 / .38) 55%, transparent 100%); }

/* ---------- facts ---------- */
.facts { background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.fact strong { display: block; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.05; }
.fact span { display: block; margin-top: .5rem; color: var(--ink-soft); font-size: .92rem; max-width: 26ch; }

/* ---------- services ---------- */
.services { background: var(--sand); padding-block: var(--sec); }
.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head .eyebrow { color: var(--brand); }
.cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.8rem);
  align-items: start;
}
.card--wide { grid-column: span 7; }
.card--offset { grid-column: span 5; margin-top: clamp(3rem, 8vw, 7rem); }
.card--compact { grid-column: 1 / span 5; margin-top: 1.5rem; }
.card--lift { grid-column: 6 / -1; margin-top: clamp(-4rem, -4vw, -2rem); }
.card { color: inherit; text-decoration: none; }
.card figure { margin: 0 0 1.1rem; overflow: hidden; border-radius: .9rem; background: var(--line); }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 700ms var(--ease); }
.card--wide img { aspect-ratio: 16/10; }
.card--offset img { aspect-ratio: 4/5; }
.card--lift img { aspect-ratio: 16/9; }
.card:hover img { transform: scale(1.035); }
.card h3 { margin: 0 0 .4rem; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.card__link { display: inline-block; width: fit-content; margin-top: .75rem; padding-bottom: .16rem; border-bottom: 1px solid currentColor; color: var(--brand); font-size: .72rem; font-weight: 700; }
.services__more { margin: clamp(2.2rem, 4vw, 3.5rem) 0 0; max-width: 52ch; color: var(--ink-soft); }
.services__more p { margin: 0 0 .75rem; }
.services__links { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; }
.services__links .textlink { margin-top: 0; }

/* ---------- transparent starting prices ---------- */
.pricing { padding-block: var(--sec); background: var(--paper); }
.pricing__grid { display: grid; grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.pricing__head { position: sticky; top: 7.5rem; }
.pricing__head .eyebrow { color: var(--brand); }
.pricing__head .lede { margin-bottom: 1.5rem; }
.pricing__list { border-top: 1px solid var(--ink); }
.pricing__list article { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.pricing__list article:nth-child(2n) { padding-left: clamp(0rem, 5vw, 4rem); }
.pricing__list span { display: block; margin-bottom: .25rem; color: var(--brand); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pricing__list h3 { margin: 0; font: 400 clamp(1.25rem, 2vw, 1.65rem)/1.1 var(--serif); }
.pricing__list p { flex: 0 0 auto; margin: 0; color: var(--ink-soft); font-size: .74rem; text-align: right; }
.pricing__list strong { display: block; margin-top: .18rem; color: var(--ink); font: 400 clamp(1.15rem, 1.8vw, 1.45rem)/1 var(--serif); }

/* ---------- repair reel: two supplied films become one scroll-led chapter ---------- */
.repair-reel { position: relative; height: 340svh; background: var(--dark); }
.repair-reel__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--dark);
}
.repair-reel__scene,
.repair-reel__scene > :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.repair-reel__scene { will-change: opacity, transform; }
.repair-reel__poster--mobile { display: none; }
.repair-reel__scene--space { transform: scale(var(--reel-space-scale, 1)); }
.repair-reel__scene--craft {
  opacity: var(--reel-cross, 0);
  transform: scale(var(--reel-craft-scale, .985));
}
.repair-reel__scene > :is(img, video) { object-fit: cover; object-position: center; }
.repair-reel__scene video { opacity: 0; transition: opacity 360ms var(--ease); }
.repair-reel__scene video.is-ready { opacity: 1; }
.repair-reel__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(7 10 14 / .74) 0%, rgb(7 10 14 / .42) 33%, transparent 68%);
}
.repair-reel__copy {
  position: relative;
  height: 100%;
  color: var(--on-dark);
  pointer-events: none;
}
.repair-reel__copy .display { color: var(--on-dark); }
.repair-reel__line {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  max-width: min(36rem, 72vw);
  opacity: var(--reel-intro-a, 1);
  transform: translate3d(0, var(--reel-intro-y, 0), 0);
  will-change: opacity, transform;
}
.repair-reel__line--detail {
  opacity: var(--reel-detail-a, 0);
  transform: translate3d(0, var(--reel-detail-y, 18px), 0);
  max-width: 34ch;
  color: var(--on-dark);
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
  line-height: 1.25;
}
.repair-reel__meter {
  position: absolute;
  left: var(--gutter);
  bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  width: min(18rem, calc(100vw - 2 * var(--gutter)));
}
.repair-reel__meter span {
  height: 2px;
  overflow: hidden;
  background: rgb(255 255 255 / .24);
}
.repair-reel__meter span::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-lite);
  transform: scaleX(var(--reel-meter-a, 0));
  transform-origin: left center;
}
.repair-reel__meter span + span::after { transform: scaleX(var(--reel-meter-b, 0)); }

/* ---------- MacBook display story: four stills scrubbed by scroll ---------- */
.mac-story {
  position: relative;
  height: 520svh;
  background: #080b0f;
}
.mac-story__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
  background: #080b0f;
}
.mac-story__scene,
.mac-story__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mac-story__scene {
  overflow: hidden;
  opacity: var(--story-a, 0);
  will-change: opacity;
}
.mac-story__scene:first-child { --story-a: 1; }
/* Keep the subject below navigation; only the photo framing changes, not the copy. */
.mac-story__scene > picture {
  position: absolute;
  inset: 4.5rem 0 0;
  overflow: hidden;
}
.mac-story__media {
  object-fit: cover;
  object-position: center top;
  transform: translateY(var(--story-shift, 0%)) scale(var(--story-scale, 1.015));
  transform-origin: 63% top;
  will-change: transform;
}
.mac-story__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(4 7 11 / .88) 0%, rgb(4 7 11 / .56) 36%, rgb(4 7 11 / .08) 70%),
    linear-gradient(to top, rgb(4 7 11 / .44), transparent 38%);
}
.mac-story__copy {
  position: absolute;
  z-index: 1;
  inset: auto 0 clamp(4.8rem, 11vh, 8rem);
  color: var(--on-dark);
  pointer-events: none;
  opacity: var(--story-copy-a, 1);
  transform: translate3d(0, calc(var(--story-local, 0) * -12px), 0);
  will-change: transform;
}
.mac-story__step {
  margin: 0 0 1rem;
  color: #67c7ff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.mac-story__title {
  max-width: 14ch;
  margin: 0;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(3.1rem, 6.9vw, 7.1rem);
  font-weight: 850;
  font-style: normal;
  line-height: .84;
  letter-spacing: -.065em;
  text-transform: uppercase;
  text-shadow: 0 3px 28px rgb(0 0 0 / .42);
}
.mac-story__title em {
  color: transparent;
  font: inherit;
  -webkit-text-stroke: clamp(1px, .11vw, 2px) rgb(255 255 255 / .9);
  text-shadow: none;
}
.mac-story__text {
  max-width: 39ch;
  margin: 1.35rem 0 0;
  color: rgb(255 255 255 / .82);
  font-size: clamp(.9rem, 1.2vw, 1.04rem);
  line-height: 1.55;
  text-shadow: 0 2px 16px rgb(0 0 0 / .55);
}
.mac-story__rail {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 2.25rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .42rem;
  width: min(22rem, 40vw);
}
.mac-story__rail span {
  height: 2px;
  overflow: hidden;
  background: rgb(255 255 255 / .22);
}
.mac-story__rail span::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #67c7ff;
  transform: scaleX(var(--story-meter, 0));
  transform-origin: left center;
}

/* ---------- interactive repair lens ---------- */
.band { position: relative; display: flex; align-items: center; min-height: clamp(31rem, 76vh, 49rem); overflow: hidden; background: var(--dark); }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__veil {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(to right, rgb(20 22 26 / .96) 0%, rgb(20 22 26 / .87) 39%, rgb(20 22 26 / .24) 74%, rgb(20 22 26 / .08) 100%);
  pointer-events: none;
}
.band__copy { position: relative; z-index: 4; color: var(--on-dark); padding-block: var(--sec); pointer-events: none; }
.band__copy .display { color: var(--on-dark); }
.band__copy .eyebrow { color: #67c7ff; }
.band__copy .lede { max-width: 43ch; color: var(--on-dark-soft); }
.repair-lens { --lens-p: 52%; isolation: isolate; }
.repair-lens__media { position: absolute; z-index: 1; inset: 0; }
.repair-lens__overview { filter: saturate(.72) contrast(.92); }
.repair-lens__detail { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 var(--lens-p)); }
.repair-lens__detail .band__img { filter: contrast(1.04) saturate(1.04); }
.repair-lens__tag {
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vw, 2rem);
  padding: .5rem .72rem;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: 999px;
  background: rgb(12 16 22 / .42);
  color: #fff;
  font: 650 .62rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.repair-lens__divider {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: var(--lens-p);
  width: 1px;
  background: linear-gradient(transparent 6%, rgb(103 199 255 / .9) 28%, rgb(103 199 255 / .9) 72%, transparent 94%);
  box-shadow: 0 0 1.4rem rgb(103 199 255 / .34);
  transform: translateX(-50%);
}
.repair-lens__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .65rem;
  height: .65rem;
  border: 1px solid rgb(255 255 255 / .86);
  border-radius: 50%;
  background: #67c7ff;
  box-shadow: 0 0 0 .55rem rgb(103 199 255 / .15), 0 0 2rem rgb(103 199 255 / .35);
  transform: translate(-50%, -50%);
}
.repair-lens__control { width: min(23rem, 82vw); margin-top: 2rem; pointer-events: auto; }
.repair-lens__control label { display: block; margin-bottom: .7rem; color: #fff; font-size: .72rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.repair-lens__control input {
  width: 100%;
  height: 1.5rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.repair-lens__control input::-webkit-slider-runnable-track { height: 1px; background: rgb(255 255 255 / .48); }
.repair-lens__control input::-moz-range-track { height: 1px; background: rgb(255 255 255 / .48); }
.repair-lens__control input::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -.47rem; appearance: none; -webkit-appearance: none; border: 2px solid #fff; border-radius: 50%; background: #67c7ff; box-shadow: 0 0 0 .4rem rgb(103 199 255 / .16); }
.repair-lens__control input::-moz-range-thumb { width: .9rem; height: .9rem; border: 2px solid #fff; border-radius: 50%; background: #67c7ff; box-shadow: 0 0 0 .4rem rgb(103 199 255 / .16); }
.repair-lens__control > span { display: flex; justify-content: space-between; margin-top: .25rem; color: rgb(255 255 255 / .62); font-size: .66rem; }
.repair-lens__screen-lift { display: none; }

@supports (animation-timeline: view()) {
  .repair-lens__screen-lift {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: block;
    border: 1px solid rgb(103 199 255 / .18);
    background: linear-gradient(145deg, rgb(26 31 38 / .98), rgb(6 8 11 / .96));
    box-shadow: 0 2rem 5rem rgb(0 0 0 / .48);
    pointer-events: none;
    transform-origin: 50% 0;
    animation: repair-screen-lift linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  .repair-lens__screen-lift span { position: absolute; top: 1.1rem; left: 50%; width: 4rem; height: .25rem; border-radius: 999px; background: rgb(255 255 255 / .18); transform: translateX(-50%); }
}
@keyframes repair-screen-lift {
  from { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); }
  70%, to { opacity: 0; transform: translate3d(0, -104%, 0) rotateX(7deg); }
}

/* ---------- look around ---------- */
.look { background: var(--paper); padding-block: var(--sec); }
.look__stage {
  position: relative; margin: 0;
  overflow: hidden; border-radius: 1rem;
  background: var(--line);
  aspect-ratio: 16 / 9;
}
.look__poster, .look__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.look__video { opacity: 0; transition: opacity 420ms var(--ease); }
.look__video.is-ready { opacity: 1; }
.look__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .85rem;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  color: #fff;
  font: 600 .95rem/1 var(--sans);
  background: linear-gradient(to top, rgb(8 10 13 / .46), rgb(8 10 13 / .08) 65%);
  transition: opacity 240ms var(--ease), background-color 240ms var(--ease);
}
.look__play:hover { background-color: rgb(8 10 13 / .12); }
.look__play.is-gone { opacity: 0; pointer-events: none; }

/* ---------- shop invitation ---------- */
.shop-intro { background: var(--sand); padding-block: var(--sec); }
.shop-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.shop-intro__body .eyebrow { color: var(--brand); }
.shop-intro__body .pill { margin-top: 2rem; }
.shop-intro__visual {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  color: #fff;
  background: var(--dark);
}
.shop-intro__visual img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 700ms var(--ease); }
.shop-intro__visual[data-product-float] { background: transparent; overflow: visible; }
.shop-intro__visual[data-product-float] > img { border-radius: 1rem; }
.shop-intro__visual.is-floating > img { transition: none; }
.shop-intro__visual:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .shop-intro__visual[data-product-float] > img { transform: none !important; transition: none !important; }
}
.shop-intro__visual span {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  color: var(--ink);
  background: rgb(255 255 255 / .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .86rem;
  font-weight: 650;
}


/* ---------- brand film ---------- */
.film { background: var(--dark); color: var(--on-dark); padding-block: var(--sec); }
.film__head { position: absolute; z-index: 2; top: 50%; left: clamp(1.5rem, 7vw, 8rem); width: min(76rem, calc(100% - 3rem)); transform: translateY(-50%); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.film__head .lede { max-width: 42ch; color: var(--on-photo); }
.film__title { margin: 0; color: #fff; font-family: "Arial Black", "Helvetica Neue", var(--sans); font-size: clamp(3.2rem, 7vw, 7.6rem); font-weight: 900; line-height: .84; letter-spacing: -.065em; text-transform: uppercase; }
.film__title span { display: block; }
.film__title span:last-child { color: transparent; -webkit-text-stroke: clamp(1.5px, .14vw, 2.5px) rgb(255 255 255 / .92); }
.film__stage { position: relative; width: min(110rem, calc(100% - 2 * var(--gutter))); margin: 0 auto; overflow: hidden; border-radius: 1rem; background: #000; isolation: isolate; }
.film__video { display: block; width: 100%; min-height: min(76svh, 52rem); aspect-ratio: 16/9; object-fit: cover; background: #000; }
.film__shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(7 10 14 / .86) 0%, rgb(7 10 14 / .58) 42%, rgb(7 10 14 / .08) 72%), linear-gradient(0deg, rgb(7 10 14 / .32), transparent 45%); transition: opacity 420ms var(--ease); pointer-events: none; }
.film__play {
  position: absolute; z-index: 3; right: clamp(1.25rem, 3vw, 3rem); bottom: clamp(1.25rem, 3vw, 3rem);
  display: flex; align-items: center; gap: .8rem; width: auto; height: auto; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: #fff; transition: opacity 260ms var(--ease), transform 220ms var(--ease);
}
.film__play:hover { transform: translateY(-.2rem); }
.film__play.is-gone { opacity: 0; pointer-events: none; }
.film__tri {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: rgb(255 255 255 / .92);
  display: grid; place-items: center;
}
.film__tri::after {
  content: ""; width: 0; height: 0; margin-left: .28rem;
  border-left: 1.15rem solid var(--dark);
  border-top: .72rem solid transparent;
  border-bottom: .72rem solid transparent;
}
.film__label { font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
.film__stage.is-playing .film__head { opacity: 0; transform: translateY(calc(-50% + 1rem)); pointer-events: none; }
.film__stage.is-playing .film__shade { opacity: 0; }

/* ---------- trust ---------- */
.trust { background: var(--sand); padding-block: var(--sec); }
.trust__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.trust__photo { margin: 0; }
.trust__photo img { width: 100%; border-radius: 1rem; aspect-ratio: 4/3; object-fit: cover; }
.trust__photo figcaption { margin-top: .8rem; font-size: .72rem; color: var(--ink-soft); }
.trust__photo a, .proof a { color: inherit; text-underline-offset: .2em; }
.trust__heading { margin-bottom: 2.5rem; }
.trust__heading .display { font-size: clamp(3rem, 5.1vw, 5.1rem); line-height: 1.08; }
.trust__heading .lede { font-size: 1rem; max-width: 60ch; margin-top: 1.1rem; }
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.5rem; margin: 0 0 1.8rem; }
.proof div { display: grid; gap: .18rem; }
.proof dt { font-weight: 700; font-size: .94rem; }
.proof dd { margin: 0; color: var(--ink-soft); font-size: .85rem; max-width: 32ch; }
.trust__visit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.trust__visit address { font-style: normal; font-size: .86rem; font-weight: 600; }
.trust__visit p { margin: 0; color: var(--ink-soft); font-size: .82rem; }
.trust__actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }
.trust__actions .pill { font-size: .86rem; padding: .85rem 1.4rem; }
.trust__actions .textlink { margin: 0; font-size: .85rem; }
.trust__independent { margin: 1.25rem 0 0; color: var(--ink-soft); font-size: .72rem; max-width: 58ch; }
@media (max-width: 767px) {
  .trust__grid { grid-template-columns: 1fr; gap: 2rem; }
  .trust__photo img { aspect-ratio: 4/3; }
  .trust__heading { margin-bottom: 1.75rem; }
  .trust__heading .display { font-size: clamp(3rem, 11vw, 4.4rem); }
}
@media (max-width: 380px) {
  .proof, .trust__visit { grid-template-columns: 1fr; }
}

/* ---------- bilingual review preview ---------- */
.reviews { padding-block: var(--sec); background: var(--paper); }
.reviews__grid { display: grid; grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.reviews__intro { align-self: start; }
.reviews__label { margin: 0 0 1rem; color: var(--brand); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.reviews__intro h2 { max-width: 10ch; }
.reviews__intro > p:not(.reviews__label) { max-width: 37ch; margin: 1.25rem 0 0; color: var(--ink-soft); }
.reviews__intro .textlink { margin-top: 1.5rem; }
.review-deck { min-height: clamp(24rem, 40vw, 31rem); padding: clamp(1.5rem, 4vw, 3.25rem); display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--line); border-radius: 1rem; background: #f8f8f6; box-shadow: 0 1.6rem 4rem rgb(37 47 58 / .08); }
.review-deck__top, .review-deck__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-deck__top { color: #6e747c; font-size: .68rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.review-card { align-self: center; margin: 2rem 0; }
.review-card[hidden] { display: none; }
.review-card blockquote { max-width: 20ch; margin: 0; font: 400 clamp(2rem, 4.1vw, 4.1rem)/1.04 var(--serif); letter-spacing: -.035em; }
.review-card figcaption { display: grid; gap: .55rem; max-width: 42ch; margin-top: 1.5rem; color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.review-card figcaption small { color: #747a82; font-size: .66rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.review-deck__controls { justify-content: flex-end; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.review-deck__controls button { min-width: 5.7rem; padding: .7rem .9rem; border: 1px solid #c9ced4; border-radius: 999px; background: transparent; color: var(--ink); font: 700 .72rem/1 var(--sans); cursor: pointer; transition: color 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease); }
.review-deck__controls button:hover, .review-deck__controls button:focus-visible { border-color: var(--brand); background: var(--brand); color: #fff; }
.review-deck__controls button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) { .review-card:not([hidden]) { animation: review-card-in 300ms var(--ease) both; } }
@keyframes review-card-in { from { opacity: 0; transform: translateY(.45rem); } to { opacity: 1; transform: none; } }

/* ---------- faq ---------- */
.faq { background: var(--paper); padding-block: var(--sec); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding-block: 1.35rem; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.35rem; line-height: 1; color: var(--brand); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding-bottom: 1.35rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- close ---------- */
.close {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: min(90svh, 58rem);
  align-items: center;
  overflow: hidden;
  background: #000;
  color: var(--on-dark);
  padding: clamp(5rem, 13vw, 11rem) 0 clamp(4rem, 8vw, 7rem);
  text-align: center;
}
.close::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgb(0 0 0 / .2) 0 16%, transparent 58%);
}
.close .display { color: var(--on-dark); }
.close .lede { margin-inline: auto; }
.close__ornament {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .92;
}
.close__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.close__title-line { display: block; overflow: hidden; }
.close__title-line > span { display: block; }
.close__cta-shell { margin-top: 2.4rem; }
.close__cta { position: relative; gap: .65rem; margin-top: 0; transform-origin: 50% 50%; }
.close__cta::after { content: "\2197"; font-size: .9em; transition: transform 240ms var(--ease); }
.close__cta:hover { transform: translateY(-3px) scale(1.012); }
.close__cta:hover::after { transform: translate(2px, -2px); }
.close__cta:active { transform: scale(.965); transition-duration: 90ms; }
.close__status { margin-top: 1.2rem; color: var(--on-dark-soft); font-size: .78rem; text-underline-offset: .25rem; }
.close__status:hover { color: var(--on-dark); }

.js .close__eyebrow,
.js .close__lede,
.js .close__cta-shell,
.js .close__status { opacity: 0; transform: translateY(18px); }
.js .close__title-line > span { transform: translateY(108%); }
.js .close__eyebrow,
.js .close__lede,
.js .close__cta-shell,
.js .close__status,
.js .close__title-line > span { transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.js .close.is-active .close__eyebrow,
.js .close.is-active .close__lede,
.js .close.is-active .close__cta-shell,
.js .close.is-active .close__status { opacity: 1; transform: none; }
.js .close.is-active .close__title-line > span { transform: none; }
.js .close.is-active .close__title-line:nth-child(2) > span { transition-delay: 60ms; }
.js .close.is-active .close__lede { transition-delay: 130ms; }
.js .close.is-active .close__cta-shell { transition-delay: 210ms; }
.js .close.is-active .close__status { transition-delay: 260ms; }

/* ---------- footer ---------- */
.foot { background: #000; color: var(--on-dark-soft); border-top: 1px solid rgb(246 241 232 / .12); font-size: .88rem; }
.foot__main { display: grid; grid-template-columns: 1.35fr .72fr 1fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4rem, 8vw, 7rem); }
.js .foot__main > * { opacity: 0; transform: translateY(12px); transition: opacity 480ms var(--ease), transform 540ms var(--ease); }
.js .foot.is-active .foot__main > * { opacity: 1; transform: none; }
.js .foot.is-active .foot__main > :nth-child(2) { transition-delay: 55ms; }
.js .foot.is-active .foot__main > :nth-child(3) { transition-delay: 110ms; }
.js .foot.is-active .foot__main > :nth-child(4) { transition-delay: 165ms; }
.foot__brand { display: grid; align-content: start; gap: 1.35rem; }
.foot__brand > p { max-width: 31ch; }
.foot__logo { width: clamp(9.5rem, 14vw, 12rem); height: auto; }
.foot__socials { display: flex; flex-wrap: wrap; gap: .55rem; }
.foot__social { display: inline-flex; width: fit-content; min-height: 2.55rem; padding: .65rem .8rem; align-items: center; gap: .6rem; border: 1px solid rgb(246 241 232 / .16); border-radius: .7rem; background: #0b0d10; color: var(--on-dark); font-weight: 650; transition: border-color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease); }
.foot__social img { width: 1rem; height: 1rem; opacity: 1; }
.foot__social:hover, .foot__social:focus-visible { border-color: rgb(87 182 245 / .68); background: rgb(87 182 245 / .1); transform: translateY(-1px); }
.foot__social:active { transform: translateY(1px); }
.foot h3 { margin: 0 0 1.25rem; color: var(--on-dark); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.foot__nav { display: grid; align-content: start; gap: .75rem; }
.foot__contact address { margin: 0 0 1.25rem; font-style: normal; }
.foot__contact > p { margin-top: 1.25rem; }
.foot__hours { display: grid; gap: .45rem; margin: 1.35rem 0 0; padding-top: 1rem; border-top: 1px solid rgb(246 241 232 / .12); }
.foot__hours div { display: flex; justify-content: space-between; gap: 1rem; }
.foot__hours dt { color: var(--on-dark-soft); }
.foot__hours dd { margin: 0; color: var(--on-dark); }
.foot__payments { margin-top: 1.75rem; }
.foot__payments h4 { margin: 0 0 .75rem; color: var(--on-dark); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.foot__paymarks { display: flex; flex-wrap: wrap; gap: .4rem; }
.foot__paymarks > span { display: grid; min-width: 3.5rem; height: 2rem; padding: .3rem .55rem; place-items: center; border-radius: .4rem; background: #f7f7f5; }
.foot__paymarks img { width: auto; max-width: 3rem; max-height: 1.25rem; }
.foot__paymarks .foot__paymark--crypto { background: #e83d46; color: #fff; font-size: .68rem; font-weight: 750; }
.foot__crypto { margin-top: .8rem; }
.foot__crypto summary { width: fit-content; color: var(--on-dark); font-size: .75rem; font-weight: 650; cursor: pointer; }
.foot__crypto > div { width: min(15rem, 100%); margin-top: .8rem; padding: .75rem; border-radius: .7rem; background: #f7f7f5; color: var(--ink); }
.foot__crypto img { width: 100%; border-radius: .35rem; }
.foot__crypto p { margin-top: .55rem; color: var(--ink-soft); font-size: .66rem; line-height: 1.45; }
.foot__disclosure { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: 1.5rem; border-top: 1px solid rgb(246 241 232 / .12); }
.foot__disclosure p { max-width: 78ch; font-size: .75rem; }
.foot__bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.4rem 2.2rem; border-top: 1px solid rgb(246 241 232 / .12); font-size: .75rem; }
.foot__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot p { margin: 0; }
.foot strong { color: var(--on-dark); }
.foot a { color: var(--on-dark-soft); text-decoration: none; }
.foot a:hover { color: var(--on-dark); }

/* ---------- sticky CTA (phone) ---------- */
.sticky-cta, .sticky-dock { display: none; }

/* ---------- social contact rail ---------- */
.social-rail {
  position: fixed;
  z-index: 88;
  top: auto;
  right: clamp(.85rem, 2vw, 1.5rem);
  bottom: clamp(1.25rem, 2vw, 2rem);
  display: flex;
  gap: .15rem;
  padding: .32rem;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 999px;
  background: rgb(20 22 26 / .88);
  box-shadow: 0 .75rem 2rem rgb(20 22 26 / .22), inset 0 1px 0 rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
.social-rail__link {
  position: relative;
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}
.social-rail__link img { width: 1.25rem; height: 1.25rem; opacity: 1; transition: filter 180ms var(--ease), transform 180ms var(--ease); }
.social-rail__link > span {
  position: absolute;
  right: calc(100% + .7rem);
  padding: .48rem .68rem;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: .55rem;
  background: var(--dark);
  color: var(--on-dark);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(.4rem);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  white-space: nowrap;
}
.social-rail__link:hover,
.social-rail__link:focus-visible {
  transform: translateY(-1px);
  background: rgb(87 182 245 / .18);
}
.social-rail__link:hover img,
.social-rail__link:focus-visible img { filter: drop-shadow(0 0 .35rem rgb(255 255 255 / .2)); transform: scale(1.06); }
.social-rail__link:hover > span,
.social-rail__link:focus-visible > span { opacity: 1; transform: none; }
.social-rail__link:active { transform: scale(.96); }


/* ---------- depth: parallax drift and a shallow tilt on the cards ---------- */
[data-parallax] { will-change: transform; }
[data-tilt] { perspective: 1400px; }
[data-tilt] .card figure { transform-style: preserve-3d; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-parallax], [data-tilt] .card figure { transform: none !important; }
  .repair-reel { height: auto; }
  .repair-reel__pin { position: relative; height: auto; min-height: 100svh; }
  .repair-reel__scene--space { position: relative; min-height: 100svh; }
  .repair-reel__copy { position: absolute; inset: 0; height: auto; }
  .repair-reel__scene--craft, .repair-reel__line--detail, .repair-reel__meter { display: none; }
  .repair-reel__line { opacity: 1; transform: translateY(-50%); }
  .mac-story { height: auto; }
  .mac-story__pin { position: relative; height: auto; min-height: 0; }
  .mac-story__scene { position: relative; min-height: 100svh; opacity: 1 !important; }
  .mac-story__media { transform: none !important; }
  .mac-story__copy { opacity: 1 !important; transform: none !important; }
  .mac-story__rail { display: none; }
  .repair-lens__screen-lift { display: none !important; }
}

.analytics-consent {
  position: fixed; z-index: 500;
  inset: auto var(--gutter) max(1rem, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem; align-items: center;
  width: min(46rem, calc(100% - 2 * var(--gutter)));
  margin-inline: auto 0; padding: 1rem 1.1rem;
  border: 1px solid rgb(255 255 255 / .13); border-radius: .85rem;
  background: #14191f; color: #f4f6f8;
  box-shadow: 0 1rem 3rem rgb(13 21 30 / .25);
}
.analytics-consent p { margin: 0; color: #c3c8cf; font-size: .76rem; line-height: 1.45; }
.analytics-consent__actions { display: flex; gap: .55rem; }
.analytics-consent button {
  min-height: 2.35rem; padding: .55rem .85rem;
  border: 1px solid #727a84; border-radius: 999px;
  background: transparent; color: #fff;
  font: 650 .72rem/1 var(--sans); cursor: pointer;
}
.analytics-consent button[data-consent="accept"] { border-color: var(--brand); background: var(--brand); }

@media (max-width: 600px) {
  .analytics-consent { grid-template-columns: 1fr; width: calc(100% - 2 * var(--gutter)); margin: 0 auto; }
}

/* ---------- reveal ----------
   Visible by default so a JS failure never blanks the page; only a live script
   arms the hidden start state. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js [data-section-motion="shop"] .reveal {
  transition-duration: 420ms;
}
.js [data-section-motion="quiet"] .reveal {
  transform: translateY(8px);
  transition-duration: 380ms;
}
.js [data-section-motion="cinematic"] .reveal {
  transition-duration: 650ms;
}
.js [data-section-motion] .reveal.is-in,
.js [data-section-motion] .reveal:focus-within { opacity: 1; transform: none; }
/* A restrained, reversible dissolve at visual-chapter boundaries; copy stays legible. */
.has-section-handoff > :is(.world-intro__pin, .hero__pin, .mac-story__pin, .repair-reel__pin)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #14161a;
  opacity: calc(var(--section-handoff, 0) * .3);
}

@media (prefers-reduced-motion: reduce) {
  .social-rail__link, .social-rail__link > span { transition: none; }
  .has-section-handoff > :is(.world-intro__pin, .hero__pin, .mac-story__pin, .repair-reel__pin)::after { display: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .close__eyebrow,
  .js .close__lede,
  .js .close__cta-shell,
  .js .close__title-line > span,
  .js .foot__main > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card img { transition: none; }
  .pill, .bar, .textlink { transition: none; }
}

/* No script: show every repair step in normal document order. */
html:not(.js) .mac-story { height: auto; }
html:not(.js) .mac-story__pin { position: relative; height: auto; min-height: 0; }
html:not(.js) .mac-story__scene { position: relative; min-height: 100svh; opacity: 1; }
html:not(.js) .mac-story__media { transform: none; }
html:not(.js) .mac-story__rail { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--wide, .card--offset, .card--compact, .card--lift { grid-column: auto; margin-top: 0; }
  .card--wide img, .card--offset img, .card--compact img, .card--lift img { aspect-ratio: 4/3; }
  .trust__grid, .reviews__grid, .faq__grid, .pricing__grid { grid-template-columns: 1fr; }
  .reviews__intro { position: static; }
  .pricing__head { position: static; }
  .foot__main { grid-template-columns: 1.2fr .8fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .bar__nav, .bar__cta { display: none; }
  .bar__toggle {
    display: grid; place-items: center; margin-left: auto;
    width: 2.75rem; height: 2.75rem; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .bar__bars, .bar__bars::before, .bar__bars::after {
    display: block; width: 1.3rem; height: 2px; border-radius: 2px; background: var(--on-dark);
    transition: transform 200ms var(--ease), opacity 200ms var(--ease), background-color 200ms var(--ease);
  }
  .bar__bars { position: relative; }
  .bar__bars::before, .bar__bars::after { content: ""; position: absolute; left: 0; }
  .bar__bars::before { top: -7px; }
  .bar__bars::after { top: 7px; }
  .bar.is-light .bar__bars, .bar.is-light .bar__bars::before, .bar.is-light .bar__bars::after { background: var(--dark); }
  .bar.is-open .bar__bars { background: transparent; }
  .bar.is-open .bar__bars::before { top: 0; transform: rotate(45deg); }
  .bar.is-open .bar__bars::after { top: 0; transform: rotate(-45deg); }

  .world-intro { height: 560svh; }
  .world-intro__media { object-position: 70% center; transform-origin: 70% 48%; }
  .world-intro__shade { background: linear-gradient(to top, rgb(5 8 11 / .82) 0%, rgb(5 8 11 / .42) 44%, transparent 72%); }
  .world-intro__copy { inset: auto 0 clamp(4.8rem, 10vh, 6.5rem); }
  .world-intro__title { max-width: 9.5ch; font-size: clamp(3.2rem, 16vw, 5.4rem); }
  .world-intro__text { max-width: min(32ch, 86vw); }
  .hero { height: 330svh; }
  .film__head { left: 1.25rem; width: calc(100% - 2.5rem); }
  .film__title { font-size: clamp(2.15rem, 10.5vw, 3.2rem); letter-spacing: -.055em; }
  .film__head .lede { max-width: 31ch; font-size: .9rem; }
  .film__tri { width: 3.4rem; height: 3.4rem; }
  .repair-reel { height: 300svh; }
  .repair-reel__poster--desktop { display: none; }
  .repair-reel__poster--mobile { display: block; }
  .repair-reel__scrim {
    background: linear-gradient(to top, rgb(7 10 14 / .76) 0%, rgb(7 10 14 / .42) 35%, transparent 66%);
  }
  .repair-reel__line { top: auto; bottom: 7rem; max-width: calc(100% - 2 * var(--gutter)); }
  .repair-reel__meter { display: none; }
  .mac-story { height: 480svh; }
  .mac-story__media { object-position: 68% top; transform-origin: 68% top; }
  .mac-story__shade {
    background: linear-gradient(to top, rgb(4 7 11 / .9) 0%, rgb(4 7 11 / .52) 43%, transparent 74%);
  }
  .mac-story__copy { inset: auto 0 clamp(5.2rem, 11vh, 7rem); }
  .mac-story__title { max-width: 10.5ch; font-size: clamp(3rem, 14vw, 5.1rem); }
  .mac-story__text { max-width: min(34ch, 88vw); }
  .mac-story__rail { left: var(--gutter); right: auto; bottom: 2.2rem; width: calc(100% - 2 * var(--gutter)); }
  .shop-intro__grid { grid-template-columns: 1fr; }
  .foot__main { grid-template-columns: 1fr 1fr; }
  .foot__contact { grid-column: 1 / -1; }
  .foot__disclosure { grid-template-columns: 1fr; gap: .5rem; }

  .sticky-dock {
    display: block; position: fixed; z-index: 89;
    inset: auto 0 0; height: calc(env(safe-area-inset-bottom, 0px) + 7rem);
    pointer-events: none;
    background: linear-gradient(to top, var(--dark) 14%, rgb(20 22 26 / .68) 50%, transparent 100%);
    transition: opacity 240ms var(--ease), background 240ms var(--ease);
  }
  .sticky-dock.is-light {
    background: linear-gradient(to top, var(--sand) 14%, rgb(245 242 237 / .72) 50%, transparent 100%);
  }
  .sticky-dock.is-hidden { opacity: 0; }
  .sticky-cta {
    display: flex; position: fixed; z-index: 90;
    inset: auto var(--gutter) calc(env(safe-area-inset-bottom, 0px) + .9rem);
    min-height: 3.25rem; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--brand); color: #fff;
    font-weight: 600; text-decoration: none;
    box-shadow: 0 .8rem 1.8rem rgb(20 22 26 / .38);
    transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  }
  .sticky-cta.is-hidden { opacity: 0; transform: translateY(150%); pointer-events: none; }

  .social-rail { display: none; }
}

/* Portrait artwork has its own centered composition; desktop framing stays intact. */
@media (max-width: 860px) and (orientation: portrait) {
  .world-intro__media { object-position: center; transform-origin: center; }
  .mac-story__media { object-position: center top; transform-origin: center top; }
}

@media (max-width: 560px) {
  .facts__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .foot { padding-bottom: 6rem; }
  .shop-page .foot { padding-bottom: 4.5rem; }
  .foot__main { grid-template-columns: 1fr; }
  .foot__brand, .foot__contact { grid-column: auto; }
  .foot__bottom { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .hero__actions .pill { flex: 1 1 100%; }
  .review-deck { min-height: 26rem; }
}

@media (prefers-reduced-motion: reduce) {
  .world-intro, .hero, .repair-reel, .mac-story { height: auto; }
  .world-intro__pin { position: relative; height: auto; min-height: 0; }
  .hero__pin, .repair-reel__pin { position: relative; min-height: 100svh; }
  .world-intro__scene { position: relative; min-height: 100svh; opacity: 1 !important; }
  .world-intro__media { transform: none !important; }
}