/* ============================================================================
   Beauty for Ashes — brand layer over scrollcraft.css
   ----------------------------------------------------------------------------
   The signature move: the page has no color of its own until a visitor
   chooses one. --tone-h / --tone-c are the only two variables the formula
   dial (teri.js) ever writes. Every role below derives from them at a FIXED
   lightness per scheme, so contrast stays governed by L and is invariant
   under the dial — the dial can only ever move hue and saturation, never
   break a contrast ratio that already passed.

   The default values below (tone-h 35, tone-c 0.14 = "Level 7 · Warm Copper")
   are also the complete no-JS and reduced-motion fallback: this file alone,
   with zero script, renders the full deepened brick/auburn family the
   original page shipped with.
   ========================================================================== */

:root {
  /* --- the tone channel: the ONLY thing teri.js ever writes ------------- */
  --tone-h: 35;
  --tone-c: 0.14;

  /* --- fixed lightness per role, per scheme. Contrast lives here, not in
         the tone channel. Measured against the render in Step 5. --------- */
  --l-canvas-light: 0.955; --l-surface-light: 0.99;  --l-ink-light: 0.20;
  --l-ink-soft-light: 0.44; --l-accent-light: 0.38;  --l-accent-ink-light: 0.98;

  --l-canvas-dark: 0.11;   --l-surface-dark: 0.165;  --l-ink-dark: 0.95;
  --l-ink-soft-dark: 0.73; --l-accent-dark: 0.70;    --l-accent-ink-dark: 0.12;

  /* The flood ground (peak + close): lifted off near-black so the chosen
     hue reads as color, not as a cast. Ink-soft rises with it to keep
     ~8:1; ink and accent are unchanged. */
  --l-canvas-flood: 0.25;  --l-surface-flood: 0.31;  --l-ink-soft-flood: 0.80;

  /* --- light scheme (default) role tokens -------------------------------- */
  --sc-canvas:     oklch(var(--l-canvas-light) calc(var(--tone-c) * 0.35) var(--tone-h));
  --sc-surface:    oklch(var(--l-surface-light) calc(var(--tone-c) * 0.22) var(--tone-h));
  --sc-ink:        oklch(var(--l-ink-light) calc(var(--tone-c) * 0.10) var(--tone-h));
  --sc-ink-soft:   oklch(var(--l-ink-soft-light) calc(var(--tone-c) * 0.22) var(--tone-h));
  --sc-accent:     oklch(var(--l-accent-light) calc(var(--tone-c) * 1.05) var(--tone-h));
  --sc-accent-ink: oklch(var(--l-accent-ink-light) 0.01 var(--tone-h));

  --sc-hairline: color-mix(in oklab, var(--sc-ink) 14%, transparent);

  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Public Sans", system-ui, sans-serif;

  --sc-measure: 34rem;
  --content-max: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sc-canvas:     oklch(var(--l-canvas-dark) calc(var(--tone-c) * 0.35) var(--tone-h));
    --sc-surface:    oklch(var(--l-surface-dark) calc(var(--tone-c) * 0.22) var(--tone-h));
    --sc-ink:        oklch(var(--l-ink-dark) calc(var(--tone-c) * 0.10) var(--tone-h));
    --sc-ink-soft:   oklch(var(--l-ink-soft-dark) calc(var(--tone-c) * 0.22) var(--tone-h));
    --sc-accent:     oklch(var(--l-accent-dark) calc(var(--tone-c) * 1.05) var(--tone-h));
    --sc-accent-ink: oklch(var(--l-accent-ink-dark) 0.01 var(--tone-h));
    --sc-hairline: color-mix(in oklab, var(--sc-ink) 16%, transparent);
  }
}

/* Acts that hard-cut to a dark ground regardless of OS scheme, per taste.md's
   two-stop exception for a page that alternates light and dark grounds: one
   hue (the shared --tone-h), two lightness sets, redefined per ground. Restate
   `color` alongside the token, or inherited text below keeps the wrong ink. */
.act-dark {
  --sc-canvas:     oklch(var(--l-canvas-dark) calc(var(--tone-c) * 0.35) var(--tone-h));
  --sc-surface:    oklch(var(--l-surface-dark) calc(var(--tone-c) * 0.22) var(--tone-h));
  --sc-ink:        oklch(var(--l-ink-dark) calc(var(--tone-c) * 0.10) var(--tone-h));
  --sc-ink-soft:   oklch(var(--l-ink-soft-dark) calc(var(--tone-c) * 0.22) var(--tone-h));
  --sc-accent:     oklch(var(--l-accent-dark) calc(var(--tone-c) * 1.05) var(--tone-h));
  --sc-accent-ink: oklch(var(--l-accent-ink-dark) 0.01 var(--tone-h));
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 16%, transparent);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}

/* The flood: the peak and the close are where the visitor's color owns the
   ground, so the first touch of the dial visibly regrades the screen and the
   booking ask sits inside the color they chose. */
.peak, .close {
  /* Chroma kept inside sRGB at L 0.25: above ~0.07 copper and rose clip to
     flat red, and walnut and honey clip to the same brown. */
  --sc-canvas:   oklch(var(--l-canvas-flood) calc(var(--tone-c) * 0.5) var(--tone-h));
  --sc-surface:  oklch(var(--l-surface-flood) calc(var(--tone-c) * 0.4) var(--tone-h));
  --sc-ink-soft: oklch(var(--l-ink-soft-flood) calc(var(--tone-c) * 0.3) var(--tone-h));
}

/* ----------------------------------------------------------------- type -- */
[hidden] { display: none !important; }

.sc-display, .display-hero, .peak__quote, blockquote { font-family: var(--sc-font-display); font-style: italic; font-weight: 500; }
h1, h2, h3, .display-hero { font-style: normal; }

.display-hero {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.3rem + 4.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 20ch;
}
.hero-book { margin: var(--sc-5) 0 0; font-size: var(--sc-t-base); }
.hero-book a {
  white-space: nowrap;
  color: var(--sc-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  text-decoration-color: var(--sc-accent);
}
.hero-book a:hover { color: var(--sc-accent); }
@media (max-width: 700px) {
  .display-hero { font-size: clamp(2rem, 1.6rem + 4vw, 2.8rem); max-width: 14ch; }
}

.sc-label {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-3);
}
/* Caps suit a few words. Captions and the dial's label are sentences, and
   uppercase sentences read slowly. */
figcaption.sc-label, label.sc-label, .hero__text .sc-label {
  text-transform: none; letter-spacing: 0.01em; font-size: var(--sc-t-sm);
}

/* ----------------------------------------------------------------- bar --- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: clamp(0.9rem, 2vw, 1.4rem) clamp(1.25rem, 5vw, 3rem);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wordmark { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink); text-decoration: none; }
/* The script logo (lifted from Teri's card) as a mask, so it is painted from
   the page's own tokens: ink into accent, the way the card runs dark ink into
   gold, and "ashes" follows the dial. The link text stays for screen readers
   and is the fallback where masks are unsupported. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .wordmark {
    display: block;
    width: clamp(8rem, 15vw, 11rem); aspect-ratio: 600 / 251;
    color: transparent; overflow: hidden; white-space: nowrap;
    background: linear-gradient(100deg, var(--sc-ink) 45%, var(--sc-accent) 75%);
    -webkit-mask: url("assets/logo-wordmark.webp") center / contain no-repeat;
            mask: url("assets/logo-wordmark.webp") center / contain no-repeat;
  }
}
.tone-badge {
  display: block;
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.05em;
  color: var(--sc-ink-soft);
}
@media (max-width: 620px) { .tone-badge { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-base); text-decoration: none;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out);
  box-shadow: var(--sc-e1);
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-small { padding: 0.6rem 1.15rem; font-size: var(--sc-t-sm); }

/* -------------------------------------------------------------- act 1 --- */
.stage-composure {
  display: flex; align-items: center; justify-content: center;
  background: var(--sc-canvas);
}

/* Teri first. Portrait beside the claim on wide screens, above it on narrow
   ones. The arch is a frame, not a cutout: the photo keeps its own edges,
   and a hairline in the accent echoes the frame a few px outside it. */
.hero { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); text-align: left; max-width: min(92vw, 66rem); width: max-content; }
.hero__text { max-width: 34rem; }
.hero__portrait { position: relative; margin: 0; flex: none; }
.hero__portrait img {
  display: block;
  width: clamp(13rem, 23vw, 18.5rem); height: auto; aspect-ratio: 5 / 6;
  object-fit: cover; object-position: 50% 38%;
  border-radius: 999px 999px var(--sc-r-sm) var(--sc-r-sm);
  box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.55);
}
.hero__portrait::after {
  content: ""; position: absolute; inset: -0.6rem; pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent);
  border-radius: 999px 999px calc(var(--sc-r-sm) + 0.6rem) calc(var(--sc-r-sm) + 0.6rem);
}
@media (max-width: 860px) {
  .hero { flex-direction: column; text-align: center; gap: var(--sc-5); width: auto; }
  .hero__portrait img { width: clamp(8.5rem, 34vw, 11rem); }
  .hero__portrait::after { inset: -0.45rem; }
}
.field { position: absolute; inset: 0; pointer-events: none; }
.field--rear {
  background: radial-gradient(60% 55% at 70% 30%,
    color-mix(in oklab, var(--sc-accent) 26%, transparent), transparent 70%);
}
.field--fore {
  clip-path: polygon(38% 0, 62% 0, 30% 100%, 6% 100%);
  /* A dark plane, not a bright slab: close in lightness to the canvas so it
     reads as shadow/architecture sweeping past, per the low-key world. An
     accent-lightness fill here washed out against the dark hero and thinned
     the headline's contrast wherever the sweep crossed it. */
  background: color-mix(in oklab, var(--sc-surface) 70%, var(--sc-canvas) 30%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 35%, transparent);
  transform: translateX(calc((var(--sc-p, 0) - 0.5) * 160vw));
  will-change: transform;
}

/* -------------------------------------------------------------- act 2 --- */
.services__head { max-width: 40rem; margin-bottom: var(--sc-8); }
.services__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.services__list li {
  display: flex; align-items: baseline; gap: var(--sc-3);
  padding: clamp(1rem, 2.6vw, 1.4rem) 0;
  border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl);
}
.services__note { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.services__hint { margin: var(--sc-3) 0 0; color: var(--sc-ink); font-size: var(--sc-t-base); }

/* JS turns each row into a toggle (teri.js). The row keeps its look; the
   choice shows as the name taking the accent and a drawn check at the end. */
.services__list li:has(.services__pick) { padding: 0; }
.services__pick {
  display: flex; align-items: baseline; gap: var(--sc-3); width: 100%;
  padding: clamp(1rem, 2.6vw, 1.4rem) 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.services__pick::after {
  content: ""; flex: none; align-self: center; margin-left: auto;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1.5px solid var(--sc-hairline);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.services__pick:hover::after { border-color: var(--sc-ink-soft); }
.services__pick[aria-pressed="true"] .services__name { color: var(--sc-accent); }
.services__pick[aria-pressed="true"]::after { border-color: var(--sc-accent); background: var(--sc-accent); }
/* The check, masked so it takes --sc-accent-ink in either scheme. */
.services__pick { position: relative; }
.services__pick[aria-pressed="true"]::before {
  content: ""; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  width: 1.5rem; height: 1.5rem;
  background: var(--sc-accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.3 3.3L17 9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.3 3.3L17 9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------- story --- */
.story { display: grid; gap: var(--sc-8); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.story__figure { margin: 0; }
.story__figure img { display: block; width: min(100%, 24rem); height: auto; border-radius: var(--sc-r-sm); }
.story__figure figcaption { margin: var(--sc-3) 0 0; }
.story__copy { max-width: 32rem; }

/* --------------------------------------------------------------- press --- */
.press { display: grid; gap: var(--sc-8); }
.press__head { max-width: 40rem; }
.press__figure, .press__video { margin: 0; }
.press__figure img { display: block; width: min(100%, 38rem); height: auto; border-radius: var(--sc-r-sm); }
.press__figure figcaption, .press__video figcaption { margin: var(--sc-3) 0 0; }
.press__videos { display: grid; gap: var(--sc-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.press__frame { aspect-ratio: 16 / 9; border-radius: var(--sc-r-sm); overflow: hidden; background: var(--sc-surface); }
.press__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------- act 3 --- */
.quiet {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.quiet__frame { margin: 0; padding: var(--sc-gutter); }
.quiet__line {
  font-family: var(--sc-font-display); font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
  color: var(--sc-ink-soft);
  max-width: 24ch; margin: 0 auto;
  text-wrap: balance;
}

/* -------------------------------------------------------------- act 4 --- */
.peak__stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(2rem, 6vw, 4rem);
  text-align: center;
  padding: var(--sc-gutter);
}
/* .sc-copy--center sets `translate: -50% -50%` for its absolute-centering
   scheme. Unlike left/top, the translate PROPERTY still applies to a
   position:static element, so overriding position alone leaves the box
   shifted by half its own width off-screen. Reset translate too. */
.peak__copy { position: static; translate: none; max-width: 42rem; }
.peak__quote { margin: 0; }
.peak__quote p {
  font-size: clamp(1.5rem, 1.1rem + 2.6vw, 2.6rem);
  line-height: 1.3;
  color: var(--sc-ink);
  margin: 0;
}
.peak__quote p::before { content: "\201C"; }
.peak__quote p::after { content: "\201D"; }
.peak__copy cite {
  display: block; margin-top: var(--sc-4);
  font-style: normal; color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
}

.dial-panel { width: min(34rem, 100%); }
.dial-panel .sc-label { text-align: center; }
.dial-readout { display: block; min-height: 1.5em; text-align: center; font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink); }
.dial-hint { max-width: 34ch; margin: var(--sc-4) auto 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-align: center; }

#tone-dial {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2.5rem; background: transparent; cursor: pointer;
}
#tone-dial::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--sc-r-pill);
  background: linear-gradient(to right,
    oklch(0.62 0.06 225), oklch(0.66 0.07 55), oklch(0.52 0.13 35),
    oklch(0.62 0.12 80), oklch(0.5 0.13 15), oklch(0.85 0.04 95));
}
#tone-dial::-moz-range-track {
  height: 6px; border-radius: var(--sc-r-pill);
  background: linear-gradient(to right,
    oklch(0.62 0.06 225), oklch(0.66 0.07 55), oklch(0.52 0.13 35),
    oklch(0.62 0.12 80), oklch(0.5 0.13 15), oklch(0.85 0.04 95));
}
#tone-dial::-webkit-slider-thumb {
  -webkit-appearance: none; margin-top: -9px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sc-surface); border: 3px solid var(--sc-accent);
  box-shadow: var(--sc-e2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
#tone-dial::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--sc-accent);
  background: var(--sc-surface); box-shadow: var(--sc-e2);
}
#tone-dial:active::-webkit-slider-thumb { transform: scale(1.08); }
#tone-dial:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
#tone-dial:focus-visible::-moz-range-thumb { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* -------------------------------------------------------------- act 5 --- */
/* The pinned peak ends on a fractional pixel (320vh), which left a 1px line of
   the near-black body showing between two flood grounds. Overlap it. */
.close { padding-block: var(--sc-section) var(--sc-8); margin-top: -1px; }
.close .sc-wrap { max-width: 40rem; text-align: center; margin-inline: auto; }
.close__portrait {
  display: block; width: clamp(7rem, 22vw, 9.5rem); height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 50%; margin-inline: auto;
  box-shadow: 0 0 0 1px var(--sc-hairline), var(--sc-e2);
}
.composer { width: 100%; margin-top: var(--sc-4); text-align: left; }
.composer__label { display: block; margin-bottom: var(--sc-2); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.composer__draft {
  display: block; width: 100%; resize: vertical; min-height: 7.5rem;
  padding: var(--sc-4);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent);
  border-radius: var(--sc-r-sm);
  background: var(--sc-surface); color: var(--sc-ink);
  font: inherit; font-size: var(--sc-t-base); line-height: 1.5;
}
.composer__draft:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.composer__hint { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.copy-btn {
  display: none; /* shown once .has-js is present, see teri.js */
  margin-left: var(--sc-2);
  border: 1px solid var(--sc-hairline-strong, var(--sc-hairline));
  background: transparent; color: var(--sc-ink-soft);
  border-radius: var(--sc-r-sm);
  padding: 0.2rem 0.65rem;
  font-size: var(--sc-t-xs); cursor: pointer;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.has-js .copy-btn { display: inline-flex; align-items: center; }
.copy-btn:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }

.cta-btn { margin-top: var(--sc-5); font-size: var(--sc-t-lg); padding: 1rem 1.9rem; }
.cta-how { margin: var(--sc-4) auto 0; max-width: 34ch; color: var(--sc-ink); font-size: var(--sc-t-base); }
.cta-alt { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.cta-alt a { color: var(--sc-ink); }

.site-footer {
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); justify-content: center;
  margin-top: var(--sc-9);
  padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- tray --
   Docked at the bottom (the thumb zone), full width on phones, a floating
   card on wide screens. Off state is translated away and visibility:hidden,
   so it leaves the tab order and the accessibility tree, not just the eye. */
.tray {
  position: fixed; z-index: var(--sc-z-chrome);
  inset: auto 0 0 0;
  display: flex; align-items: center; gap: var(--sc-3);
  padding: var(--sc-3) clamp(1rem, 4vw, 1.25rem) calc(var(--sc-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in oklab, var(--sc-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--sc-hairline);
  box-shadow: 0 -0.75rem 2rem -1rem rgb(0 0 0 / 0.5);
  color: var(--sc-ink);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--sc-d-slow, 320ms) var(--sc-ease-out), visibility 0s linear var(--sc-d-slow, 320ms);
}
.tray.tray--on { transform: none; visibility: visible; transition-delay: 0s; }
.tray__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tray__label { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
/* Two lines, not an ellipsis: a test participant read "Color & F…" as a sign
   the message itself was cut short. */
.tray__summary {
  font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-base); line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.tray__edit { flex: none; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); padding: 0.6rem 0.25rem; }
.tray__edit:hover { color: var(--sc-ink); }
.tray__send { flex: none; padding: 0.7rem 1.4rem; }
@media (min-width: 861px) {
  .tray {
    inset: auto 50% 1.25rem auto; translate: 50% 0;
    width: min(40rem, calc(100vw - 2.5rem));
    border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm);
    transform: translateY(calc(100% + 2rem));
  }
}

/* -------------------------------------------------------- reduced motion --
   The engine already neutralises kinetic split, parallax and reveal
   transforms. The bespoke foreground wedge is driven the same way (a raw
   transform reading --sc-p), so it needs its own opt-out here. */
@media (prefers-reduced-motion: reduce) {
  .field--fore { transform: none; opacity: 0.5; }
  .tray { transition: none; }
}

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  /* scrollcraft.css's own mobile rule sets `inset-inline: var(--sc-gutter)`
     on .sc-copy at this same breakpoint, and inset-inline is the left+right
     shorthand: it resets `left` to a value on both sides, which fights
     .sc-copy--center's `left: 50%; translate: -50%` centering (the exact
     "inset-inline after left:50%" gotcha from taste.md, here via a media
     query rather than adjacent rules). Loaded after scrollcraft.css, so this
     re-assertion at equal specificity wins and restores the centering. */
  .sc-copy--center { inset-inline: auto; left: 50%; max-width: min(90vw, 28rem); }
}
@media (max-width: 700px) {
  .services__list li { font-size: var(--sc-t-lg); }
  .peak__quote p { font-size: clamp(1.35rem, 1.1rem + 3vw, 1.8rem); }
  .peak__copy { max-width: 100%; }
  .dial-panel { width: 100%; }
}