/* Hallmark · macrostructure: Photographic · see tokens.css for the full stamp */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; margin: 0; overflow-wrap: anywhere; min-width: 0; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
.muted { color: var(--color-ink-muted); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--color-accent); color: var(--color-ink-dark); padding: var(--space-xs) var(--space-md); z-index: 100; }
.skip:focus { left: var(--space-md); }

/* split text masks */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.w > i { display: inline-block; font-style: normal; will-change: transform; }
.ch { display: inline-block; will-change: transform, opacity; }
.sw { transition: color var(--dur-base) var(--ease-out); color: var(--color-ink-dark-muted); }
.sw.is-on { color: var(--color-ink-dark); }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 60; background: var(--color-paper); display: grid; place-content: center; justify-items: center; gap: var(--space-lg); }
.loader__coin { width: clamp(120px, 22vw, 220px); height: auto; opacity: 0; transform: scale(0.8) rotate(-20deg); }
.loader__word { font-size: var(--text-xs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent-2); opacity: 0; }
.loader__line { width: 120px; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.loader.is-done { display: none; }

/* ---------- Flying coin (hero → intro) ---------- */
.coin-fly { position: fixed; left: 0; top: 0; z-index: 15; width: clamp(150px, 26vw, 420px); aspect-ratio: 1; pointer-events: none; will-change: transform; opacity: 0; }
.coin-fly img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 40px 50px color-mix(in oklch, var(--color-scrim) 75%, transparent)); }
.coin-fly__sweep { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, color-mix(in oklch, white 55%, transparent) 50%, transparent 65%); background-size: 250% 100%; -webkit-mask: url(/img/logo-coin.png) center / contain no-repeat; mask: url(/img/logo-coin.png) center / contain no-repeat; mix-blend-mode: screen; animation: sweep 5s var(--ease-in-out) infinite; }
@keyframes sweep { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -20% 0; } }
.coin.is-waiting img { opacity: 0; }
.hero__frame img { will-change: transform; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; background: var(--color-accent-2); }
.cursor__ring { width: 36px; height: 36px; border: 1px solid var(--color-accent-2); opacity: 0.7; transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; opacity: 0.35; background: color-mix(in oklch, var(--color-accent) 30%, transparent); }
.cursor.is-photo .cursor__ring { width: 80px; height: 80px; opacity: 0.9; mix-blend-mode: difference; }

/* ---------- Nav · N9 edge-aligned ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--page-gutter);
  transition: background var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav.is-scrolled { background: color-mix(in oklch, var(--color-paper) 88%, transparent); backdrop-filter: blur(10px); padding-block: var(--space-xs); }
.nav.is-hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.35em; }
.brand__word b { color: var(--color-accent); font-weight: 800; }
.brand__word i { display: inline-block; width: 1px; height: 0.9em; background: currentColor; opacity: 0.6; }
.brand__word.small { font-size: var(--text-md); }
.nav__right { display: flex; align-items: center; gap: var(--space-lg); }
.lang { display: flex; gap: 2px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); padding: 2px; }
.lang a { text-decoration: none; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; padding: 0.3em 0.65em; border-radius: var(--radius-pill); color: var(--color-ink-muted); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.lang a:hover { color: var(--color-ink); }
.lang a[aria-current="page"] { background: var(--color-accent); color: var(--color-ink-dark); }
.nav__cta, .link-arrow { text-decoration: none; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4em; }
.nav__cta span, .link-arrow span, .btn span, .bar-cta span { transition: transform var(--dur-fast) var(--ease-out); }
.nav__cta:hover span, .link-arrow:hover span, .btn:hover span, .bar-cta:hover span { transform: translateX(4px); }
.nav__cta { border-bottom: var(--rule-hair) solid var(--color-accent); padding-bottom: 2px; }
.link-arrow { justify-self: start; color: var(--color-accent-2); font-size: var(--text-lg); border-bottom: var(--rule-hair) solid currentColor; padding-bottom: 2px; }
[data-magnetic] { will-change: transform; }

/* ---------- Hero · photo gets framed on scroll ---------- */
.hero { position: relative; height: 100svh; display: grid; align-items: end; isolation: isolate; overflow: clip; }
.hero__frame { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(1.12); will-change: transform; }
.hero__border { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__corner { position: absolute; width: 28px; height: 28px; border: 0 solid var(--color-accent); opacity: 0; }
.hero__corner--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero__corner--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero__corner--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero__corner--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hero__tag { position: absolute; left: var(--space-md); bottom: var(--space-md); font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink); opacity: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  linear-gradient(180deg, color-mix(in oklch, var(--color-scrim) 55%, transparent), transparent 30%),
  linear-gradient(90deg, color-mix(in oklch, var(--color-scrim) 88%, transparent) 0%, color-mix(in oklch, var(--color-scrim) 45%, transparent) 50%, transparent 85%),
  linear-gradient(0deg, color-mix(in oklch, var(--color-scrim) 92%, transparent), transparent 55%); }
.hero__copy { padding: 0 var(--page-gutter) var(--space-2xl); max-width: 60rem; display: grid; gap: var(--space-lg); }
.eyebrow { font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-2); font-weight: 600; }
.hero h1 { font-size: var(--text-display); font-weight: 500; max-width: 16ch; }
.hero__lead { max-width: 44ch; font-size: var(--text-lg); color: var(--color-ink); }
.hero__caption { position: absolute; right: var(--page-gutter); bottom: var(--space-md); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.04em; max-width: 30ch; text-align: right; }
.hero__scroll { position: absolute; left: var(--page-gutter); bottom: var(--space-md); font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted); display: flex; align-items: center; gap: var(--space-xs); }
.hero__scroll span { width: 40px; height: 1px; background: var(--color-accent); transform-origin: left; animation: scrollhint 1.8s var(--ease-in-out) infinite; }
@keyframes scrollhint { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } }

/* ---------- Brand + intro · plaster ---------- */
.brand-intro { background: var(--color-plaster); color: var(--color-ink-dark); padding: var(--space-3xl) var(--page-gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.coin { position: relative; perspective: 1200px; max-width: 30rem; justify-self: center; width: 100%; }
.coin img { width: 100%; height: auto; transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 40px 50px color-mix(in oklch, var(--color-ink-dark) 35%, transparent)); }
.coin__shadow { position: absolute; left: 12%; right: 12%; bottom: -8%; height: 10%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in oklch, var(--color-ink-dark) 30%, transparent), transparent 70%); }
.brand-intro__copy { display: grid; gap: var(--space-lg); }
.brand-intro__copy h2 { font-size: var(--text-3xl); font-weight: 500; max-width: 16ch; }
.brand-intro__body { font-size: var(--text-xl); line-height: 1.4; max-width: 34ch; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.brand-intro__line { font-size: var(--text-sm); color: var(--color-ink-dark-muted); max-width: 40ch; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-light); }

/* ---------- Services · rows + sticky pane ---------- */
.services { padding: var(--space-3xl) var(--page-gutter); }
.services__head, .works__head, .process__head, .coll__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.services__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.services__list { border-top: var(--rule-hair) solid var(--color-rule); }
.svc { border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) 0; display: grid; gap: var(--space-xs); cursor: default; transition: padding-left var(--dur-base) var(--ease-out); }
.svc h3 { font-size: var(--text-2xl); font-weight: 500; color: var(--color-ink-muted); transition: color var(--dur-base) var(--ease-out); }
.svc p { max-width: 48ch; color: var(--color-ink-muted); }
.svc.is-active { padding-left: var(--space-md); }
.svc.is-active h3 { color: var(--color-accent-2); }
.svc.is-active p { color: var(--color-ink); }
.svc__mobile { display: none; }
.services__pane { position: sticky; top: 12vh; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-paper-2); }
.services__pane img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), clip-path var(--dur-slow) var(--ease-out); clip-path: inset(0 0 100% 0); }
.services__pane img.is-on { opacity: 1; clip-path: inset(0); }

/* ---------- Marquee ---------- */
.marquee { overflow: clip; border-block: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; }
.marquee__track { display: flex; width: max-content; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 300; letter-spacing: 0.02em; color: var(--color-ink-muted); animation: marquee 40s linear infinite; white-space: nowrap; will-change: transform; }
.marquee__track span { padding-right: 0.4em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Works · pinned horizontal ---------- */
.works { position: relative; }
.works__pin { min-height: 100svh; padding: var(--space-2xl) 0; display: grid; gap: var(--space-lg); align-content: center; }
.works__head { padding: 0 var(--page-gutter); margin-bottom: 0; align-items: center; }
.works__progress { flex: 1 1 100%; height: 1px; background: var(--color-rule); position: relative; }
.works__progress i { position: absolute; inset: 0; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }
.strip { padding: 0 var(--page-gutter); display: flex; gap: var(--space-md); will-change: transform; }
.strip li { flex: 0 0 auto; }
.strip figure { display: grid; gap: var(--space-sm); }
.strip img { height: min(58svh, 640px); width: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.strip .tall img { aspect-ratio: 3 / 4; }
.strip figcaption, .coll figcaption { font-size: var(--text-sm); color: var(--color-ink-muted); }
[data-reveal] img { clip-path: inset(0 0 100% 0); transform: scale(1.12); will-change: clip-path, transform; }
[data-reveal].is-in img { clip-path: inset(0); transform: scale(1); transition: clip-path 1.1s var(--ease-out), transform 1.4s var(--ease-out); }

/* ---------- Collections · irregular grid ---------- */
.coll { padding: var(--space-3xl) var(--page-gutter); }
.coll__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md); grid-auto-rows: 9vw; }
.coll__grid li { min-width: 0; }
.coll__grid figure { display: grid; gap: var(--space-sm); height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.coll__grid figure > div { overflow: hidden; min-height: 0; }
.coll__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.coll__grid figure:hover img { transform: scale(1.04); }
.c-a { grid-column: 1 / 8; grid-row: span 4; }
.c-b { grid-column: 8 / 13; grid-row: span 2; }
.c-c { grid-column: 8 / 13; grid-row: span 2; }
.c-d { grid-column: 1 / 5; grid-row: span 3; }
.c-e { grid-column: 5 / 9; grid-row: span 3; }
.c-f { grid-column: 9 / 13; grid-row: span 3; }
.c-g { grid-column: 1 / 7; grid-row: span 3; }
.c-h { grid-column: 7 / 13; grid-row: span 3; }

/* ---------- Light fold ---------- */
.light { position: relative; height: 90svh; overflow: clip; display: grid; align-content: end; padding: var(--space-2xl) var(--page-gutter); isolation: isolate; }
.light__photo { position: absolute; inset: -15% 0; z-index: -1; }
.light__photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in oklch, var(--color-scrim) 85%, transparent), transparent 60%); }
.light__line { font-family: var(--font-display); font-size: var(--text-display); font-weight: 400; line-height: 1; letter-spacing: -0.02em; max-width: 18ch; }
.light__caption { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: 0.04em; }

/* ---------- Process · copper line ---------- */
.process { background: var(--color-plaster); color: var(--color-ink-dark); padding: var(--space-3xl) var(--page-gutter); }
.process .muted { color: var(--color-ink-dark-muted); }
.process__line { width: 100%; height: 2px; display: block; overflow: visible; }
.process__line path { stroke: var(--color-accent); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); margin-top: -7px; }
.steps li { position: relative; padding-top: var(--space-lg); display: grid; gap: var(--space-xs); }
.steps li::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--color-accent); transform: scale(0); transition: transform var(--dur-base) var(--ease-out); }
.steps li.is-in::before { transform: scale(1); }
.steps h3 { font-size: var(--text-xl); }
.steps p { color: var(--color-ink-dark-muted); max-width: 30ch; }

/* ---------- Contact ---------- */
.contact { padding: var(--space-3xl) var(--page-gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.contact__copy { display: grid; gap: var(--space-lg); align-content: start; }
.contact__copy p { color: var(--color-ink-muted); max-width: 40ch; font-size: var(--text-lg); }
.contact__meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); }
.contact__meta dt { color: var(--color-ink-muted); }
.contact__meta dd { margin: 0; }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-content: start; }
.form label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-muted); }
.form .full, .form .btn, .form__note, .form__sent { grid-column: 1 / -1; }
.form input, .form textarea { font: inherit; color: var(--color-ink); background: transparent; border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-xs) 0; border-radius: 0; transition: border-color var(--dur-fast) var(--ease-out); }
.form input:hover, .form textarea:hover { border-color: var(--color-ink-muted); }
.form input:focus-visible, .form textarea:focus-visible { outline: none; border-color: var(--color-accent); }
.form input:user-invalid, .form textarea:user-invalid { border-color: oklch(62% 0.18 25); }
.form textarea { resize: vertical; }
.btn { justify-self: start; font: inherit; font-weight: 600; background: var(--color-accent); color: var(--color-ink-dark); border: 0; padding: var(--space-sm) var(--space-lg); display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: progress; }
.form__note { font-size: var(--text-xs); max-width: 60ch; }
.form__sent { color: var(--color-accent-2); font-weight: 600; }
.form__sent:not([hidden]) { display: block; }

/* ---------- Footer · Ft5 statement ---------- */
.foot { padding: var(--space-3xl) var(--page-gutter) var(--space-xl); display: grid; gap: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot__line { font-family: var(--font-display); font-size: var(--text-display); font-weight: 300; line-height: 1; letter-spacing: -0.02em; max-width: 18ch; overflow-wrap: anywhere; }
.foot__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); flex-wrap: wrap; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }

/* ---------- WhatsApp ---------- */
.wa { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 21; display: inline-flex; align-items: center; gap: 0.5em; height: 52px; padding: 0 18px 0 13px; border-radius: var(--radius-pill); background: var(--color-wa); color: var(--color-plaster); text-decoration: none; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; box-shadow: 0 12px 30px color-mix(in oklch, var(--color-scrim) 55%, transparent); transition: background var(--dur-fast) var(--ease-out); }
.wa:hover { background: var(--color-wa-2); }
.wa svg { flex: 0 0 auto; }
@media (max-width: 640px) { .wa { bottom: calc(var(--space-md) + 3.6rem); right: var(--space-md); width: 52px; padding: 0; justify-content: center; } .wa span { display: none; } }

a.credit { color: var(--color-ink-muted); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
a.credit:hover { color: var(--color-accent-2); border-color: var(--color-accent); }

/* ---------- Sticky bottom CTA (mobile only) ---------- */
.bar-cta { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .brand-intro, .contact, .services__grid { grid-template-columns: minmax(0, 1fr); }
  .coin { max-width: 18rem; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__line { display: none; }
  .steps { margin-top: 0; }
  .services__pane { display: none; }
  .svc__mobile { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: var(--space-sm); }
  .svc { padding-left: 0 !important; }
  .svc h3, .svc p { color: var(--color-ink); }
  .works__pin { padding-top: var(--space-2xl); }
  .strip { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .strip img { height: min(48svh, 420px); }
  .works__pin { min-height: 0; }
  .strip li { scroll-snap-align: start; }
  .works__progress { display: none; }
  .coll__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .coll__grid figure > div { aspect-ratio: 4 / 5; }
  .c-a figure > div, .c-h figure > div { aspect-ratio: 16 / 10; }
  .coll__grid li { grid-column: auto !important; grid-row: auto !important; }
  .c-a, .c-h { grid-column: 1 / -1 !important; }
  .light { height: 70svh; }
}
@media (max-width: 640px) {
  .nav__cta { display: none; }
  .brand__word { display: none; }
  .hero__scrim { background: linear-gradient(180deg, color-mix(in oklch, var(--color-scrim) 50%, transparent), transparent 28%), linear-gradient(0deg, color-mix(in oklch, var(--color-scrim) 96%, transparent) 0%, color-mix(in oklch, var(--color-scrim) 80%, transparent) 45%, transparent 75%); }
  .hero__caption { display: none; }
  .hero__copy { padding-bottom: var(--space-3xl); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .coll__grid { grid-template-columns: minmax(0, 1fr); }
  .bar-cta { display: inline-flex; position: fixed; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); z-index: 20; justify-content: center; align-items: center; gap: 0.4em; background: var(--color-accent); color: var(--color-ink-dark); font-weight: 600; text-decoration: none; padding: var(--space-sm) var(--space-lg); white-space: nowrap; box-shadow: 0 10px 30px color-mix(in oklch, var(--color-scrim) 60%, transparent); transition: transform var(--dur-base) var(--ease-out); }
  .bar-cta.is-hidden { transform: translateY(150%); }
  body { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .coin-fly { display: none; }
  .coin.is-waiting img { opacity: 1; }
  .cursor { display: none; }
  .marquee__track, .hero__scroll span { animation: none; }
  .hero__frame img { transform: none; }
  .w > i, .ch { transform: none !important; opacity: 1 !important; }
  .sw { color: inherit; }
  [data-reveal] img { clip-path: none; transform: none; }
  .steps li::before { transform: scale(1); }
  .services__pane img, .svc, .nav, .bar-cta { transition-duration: 120ms; }
}

/* ---------- Service pages ---------- */
.svc h3 a { text-decoration: none; color: inherit; }
.svc__more { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-2); text-decoration: none; display: inline-flex; gap: 0.4em; align-items: center; justify-self: start; opacity: 0; transform: translateY(4px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.svc.is-active .svc__more, .svc__more:focus-visible { opacity: 1; transform: none; }
@media (max-width: 900px) { .svc__more { opacity: 1; transform: none; } }
.foot__index { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); }
.foot__index a { color: var(--color-ink-muted); text-decoration: none; border-bottom: var(--rule-hair) solid transparent; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.foot__index a:hover { color: var(--color-ink); border-color: var(--color-accent); }
.page-service .nav.is-scrolled { background: color-mix(in oklch, var(--color-paper) 88%, transparent); }
.shero { padding: calc(var(--space-3xl) + 2rem) var(--page-gutter) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: end; }
.shero__copy { display: grid; gap: var(--space-lg); }
.crumbs { display: flex; gap: var(--space-xs); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--color-accent-2); }
.shero h1 { font-size: var(--text-display); font-weight: 500; max-width: 14ch; }
.shero__lead { font-size: var(--text-lg); max-width: 44ch; color: var(--color-ink-muted); }
.shero__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.shero__photo img { width: 100%; height: 100%; object-fit: cover; }
.sbody { background: var(--color-plaster); color: var(--color-ink-dark); padding: var(--space-3xl) var(--page-gutter); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.sbody__text { display: grid; gap: var(--space-lg); font-size: var(--text-lg); line-height: 1.6; max-width: 62ch; }
.sbody__aside { position: sticky; top: 6rem; display: grid; gap: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-light); }
.sbody__aside h2 { font-size: var(--text-xl); }
.checks { display: grid; gap: var(--space-sm); color: var(--color-ink-dark); }
.checks li { position: relative; padding-left: 1.4em; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }
.sphoto figure { aspect-ratio: 21 / 9; overflow: hidden; }
.sphoto img { width: 100%; height: 100%; object-fit: cover; }
.sfaq { padding: var(--space-3xl) var(--page-gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
.faq { border-top: var(--rule-hair) solid var(--color-rule); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { cursor: pointer; list-style: none; padding: var(--space-lg) 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent-2); font-weight: 300; font-size: 1.4em; line-height: 1; transition: transform var(--dur-base) var(--ease-out); flex: 0 0 auto; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--space-lg); color: var(--color-ink-muted); max-width: 60ch; }
.related { padding: 0 var(--page-gutter) var(--space-3xl); display: grid; gap: var(--space-xl); }
.related h2 { font-size: var(--text-2xl); }
.related__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); }
.related__list a { display: grid; gap: var(--space-sm); text-decoration: none; color: var(--color-ink-muted); font-size: var(--text-sm); }
.related__list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.related__list a:hover img { transform: scale(1.04); }
.related__list a:hover { color: var(--color-ink); }
@media (max-width: 900px) {
  .shero, .sbody, .sfaq { grid-template-columns: minmax(0, 1fr); }
  .shero { padding-top: calc(var(--space-2xl) + 3rem); }
  .sbody__aside { position: static; }
  .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related__list li:last-child { grid-column: 1 / -1; }
  .related__list li:last-child img { aspect-ratio: 16 / 9; }
}