@import url("/scrollcraft/scrollcraft.css") layer(base);

/* ============================================================================
   Homepage (/), built with scroll-craft.

   Only this route links this file, and React drops the <link> on client
   navigation, so nothing here reaches the rest of the site. The engine is
   imported into the base layer so the site's Tailwind utilities (header,
   footer, quote modal) still beat its element rules. Everything below is
   unlayered and scoped to #hv2 unless it themes a browser surface.
   ========================================================================== */

/* Paper is the page default, so the selection, focus ring and scrollbar the
   engine themes at :root match the site's primary blue. */
:root {
  --sc-canvas: #F4F3EF;  --sc-surface: #FFFFFF;
  --sc-ink:    #111214;  --sc-ink-soft: #4B4F57;
  --sc-accent: #1D4ED8;  --sc-accent-ink: #FFFFFF;
  --sc-font-display: var(--font-manrope), system-ui, sans-serif;
  --sc-font-text:    var(--font-inter), system-ui, sans-serif;
  --sc-font-mono:    var(--font-inter), system-ui, sans-serif;
}

/* The engine sizes body type fluidly. Header, footer and the quote modal were
   drawn at the site's 16px, so give them that back and size only #hv2. */
body { font-size: 1rem; line-height: 1.5; letter-spacing: normal; text-rendering: auto; }

#hv2 {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
}
/* The site's base layer colours every heading --color-heading. */
#hv2 :is(h1, h2, h3, h4) { color: inherit; font-family: var(--sc-font-display); }

/* ------------------------------------------------------------- grounds --
   Two grounds, cut hard between acts. The hairlines are mixed from --sc-ink
   at :root, so each ground recomputes its own. */
.hv2-film {
  --sc-canvas: #0C0D0F;  --sc-surface: #15171B;
  --sc-ink:    #F2F1EE;  --sc-ink-soft: #A3A7AE;
  --sc-accent: #7FA4FF;  --sc-accent-ink: #0C0D0F;
  color-scheme: dark;
}
.hv2-paper {
  --sc-canvas: #F4F3EF;  --sc-surface: #FFFFFF;
  --sc-ink:    #111214;  --sc-ink-soft: #4B4F57;
  --sc-accent: #1D4ED8;  --sc-accent-ink: #FFFFFF;
}
.hv2-film, .hv2-paper {
  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}

/* The site header stays sticky and white (its logo needs a light ground), so
   every stage sticks below it instead of behind it. --hdr is measured by
   ScrollCraftMount. */
#hv2 .sc-stage { top: var(--hdr, 101px); height: calc(100svh - var(--hdr, 101px)); }

#hv2 picture.sc-stage__poster { display: block; }
#hv2 picture.sc-stage__poster img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- shared -- */
.hv2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3); }

.hv2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0 var(--sc-5);
  border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out);
}
.hv2-btn--solid { background: var(--sc-accent); color: var(--sc-accent-ink); }
@media (hover: hover) { .hv2-btn--solid:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); } }
.hv2-btn--line { border-color: var(--sc-hairline-strong); color: var(--sc-ink); background: transparent; }
@media (hover: hover) { .hv2-btn--line:hover { border-color: var(--sc-ink); } }

.hv2-link {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-sm);
  text-decoration: underline; text-decoration-color: var(--sc-hairline-strong);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 180ms var(--sc-ease-out);
}
@media (hover: hover) { .hv2-link:hover { text-decoration-color: currentColor; } }

.hv2-head { display: grid; gap: var(--sc-4); align-content: start; }
.hv2-head .sc-body { max-width: 34rem; }

/* ===================================================== A1 hero (scrub) == */
.hv2-hero [data-sc-cue] { opacity: 1; }         /* the H1 is the LCP: paint it before the engine boots */

/* 54vw keeps the copy clear of the prints' column at every desktop width. */
.hv2-hero__copy { display: grid; gap: var(--sc-5); max-width: min(46rem, 54vw); }
.hv2-hero__title { font-size: var(--sc-t-3xl); line-height: 1; }
.hv2-hero__title span { display: block; }
.hv2-hero__title .hv2-soft {
  margin-top: var(--sc-2);
  font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: var(--sc-track-snug);
  color: color-mix(in oklab, var(--sc-ink) 74%, transparent);
}
.hv2-hero .sc-lede { font-size: var(--sc-t-base); line-height: 1.6; color: color-mix(in oklab, var(--sc-ink) 84%, transparent); max-width: 40rem; }
.hv2-hero .sc-label { color: var(--sc-ink); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
/* The orbit swings bright towers behind the label line, so the corner scrim
   reaches a little higher than the engine default. */
.hv2-hero .sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 80%, transparent) 32%,
    color-mix(in oklab, var(--sc-canvas) 44%, transparent) 54%,
    transparent 76%);
}

/* Near plane: two contact prints over the skyline, moving faster than it. */
.hv2-prints { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hv2-print {
  position: absolute; margin: 0;
  padding: 6px; background: #F4F3EF; border-radius: 2px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.hv2-print img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1px; }
.hv2-print--a { right: calc(var(--sc-gutter) + 9vw); bottom: 26%; width: clamp(12rem, 20vw, 21rem); }
.hv2-print--b { right: var(--sc-gutter); bottom: 9%; width: clamp(10rem, 15vw, 16rem); }

/* ================================================ A2 services (flow) == */
.hv2-services__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8); align-items: start; }
.hv2-services__list { border-top: 1px solid var(--sc-hairline-strong); }
.hv2-services__list li { border-bottom: 1px solid var(--sc-hairline); }
.hv2-service {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-2) var(--sc-6);
  padding-block: var(--sc-6); text-decoration: none; color: inherit;
}
.hv2-service h3 { font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: var(--sc-track-snug); line-height: 1.2; }
.hv2-service p { grid-column: 1; color: var(--sc-ink-soft); max-width: 40rem; }
.hv2-service__arrow {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  color: var(--sc-ink-soft); transition: transform 220ms var(--sc-ease-out), color 220ms var(--sc-ease-out);
}
@media (hover: hover) { .hv2-service:hover .hv2-service__arrow { transform: translateX(4px); color: var(--sc-accent); } }
@media (hover: hover) { .hv2-service:hover h3 { color: var(--sc-accent); } }

/* =============================================== A3 peak (scrub) ==
   Regrade & Reframe. One state machine off the act's --sc-p:
   --g  regrade wipe, p .08 → .38
   --r1 2.39:1 → 16:9, p .44 → .58
   --r2 16:9 → 9:16,  p .66 → .82                                         */
.hv2-peak {
  --g:  clamp(0, (var(--sc-p, 0) - 0.08) / 0.30, 1);
  --r1: clamp(0, (var(--sc-p, 0) - 0.44) / 0.14, 1);
  --r2: clamp(0, (var(--sc-p, 0) - 0.66) / 0.16, 1);
  --a:  calc(2.39 - 0.6122 * var(--r1) - 1.2153 * var(--r2));
}
.hv2-peak__frame { position: absolute; inset: 0; container-type: size; }

/* The flat look is a simulation of log footage and the page says so.
   A plain grey veil, not backdrop-filter or mix-blend-mode: Safari reads a
   seeking video's pixels from an older frame for both, so the flat half showed
   a different shot than the graded half. Mixing toward grey drops contrast and
   colour by the same factor and lifts the blacks, which is what log looks like. */
.hv2-peak__flat {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgb(168 168 168 / 0.42);
  clip-path: inset(0 0 0 calc(var(--g) * 100%));
}
.hv2-peak__gradeline {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  left: calc(var(--g) * 100%); width: 2px; margin-left: -1px;
  background: var(--sc-accent);
  opacity: clamp(0, min(var(--g), 1 - var(--g)) * 30, 1);
}
.hv2-peak__window {
  position: absolute; z-index: 3; left: 50%; top: 42%;
  width:  min(80cqw, calc(62cqh * var(--a)));
  height: min(calc(80cqw / var(--a)), 62cqh);
  translate: -50% -50%;
  box-shadow: 0 0 0 100vmax rgba(12, 13, 15, 0.92);
  outline: 1px solid color-mix(in oklab, var(--sc-ink) 34%, transparent);
  pointer-events: none;
}
/* Labels sit just outside the window on the dark mask, like slate notes on a
   monitor's frame lines. Inside it they land on bright sky and wash out. */
.hv2-peak__aspect, .hv2-peak__tag {
  position: absolute; margin: 0;
  color: var(--sc-ink); white-space: nowrap;
}
.hv2-peak__aspect { bottom: calc(100% + var(--sc-2)); left: 0; }
.hv2-peak__tag { top: calc(100% + var(--sc-2)); }
.hv2-peak__tag--graded { left: 0; }
.hv2-peak__tag--flat { right: 0; color: var(--sc-ink-soft); }

.hv2-peak__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(1.25rem, 5cqh, 3rem);
  display: grid; justify-items: center; text-align: center;
}
.hv2-peak__copy > * { grid-area: 1 / 1; align-self: end; max-width: 40rem; margin: 0; }
.hv2-peak__copy h2, .hv2-peak__line {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500;
  line-height: 1.15; letter-spacing: var(--sc-track-snug); text-wrap: balance;
}
.hv2-peak__copy h2 + p { margin-top: var(--sc-2); color: var(--sc-ink-soft); }

/* ================================================== A4 work (pan) == */
.hv2-work .sc-stage {
  container-type: size;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sc-7);
}
.hv2-work__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-4) var(--sc-8); align-items: end; }
.hv2-work__head .sc-body { max-width: 30rem; }

.hv2-rail {
  --ph: min(46cqh, 28rem);
  gap: var(--sc-6); align-items: flex-start;
  padding-left: var(--sc-gutter);
}
.hv2-card { flex: 0 0 auto; width: min(calc(var(--ph) * 16 / 9), 84cqw); display: grid; gap: var(--sc-2); text-decoration: none; color: inherit; }
.hv2-card--portrait { width: calc(var(--ph) * 3 / 4); }
.hv2-card__media { margin: 0 0 var(--sc-2); overflow: hidden; border-radius: var(--sc-r-sm); background: #E6E4DE; }
.hv2-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: scale 600ms var(--sc-ease-out); }
.hv2-card--portrait .hv2-card__media img { aspect-ratio: 3 / 4; }
@media (hover: hover) { .hv2-card:hover .hv2-card__media img { scale: 1.03; } }
.hv2-card h3 { font-size: var(--sc-t-base); font-weight: 600; line-height: 1.3; letter-spacing: var(--sc-track-snug); }
@media (hover: hover) { .hv2-card:hover h3 { color: var(--sc-accent); } }
.hv2-rail__end { flex: 0 0 auto; align-self: center; margin-left: var(--sc-4); }
.hv2-rail__tail { flex: 0 0 var(--sc-gutter); align-self: stretch; }

/* ============================================== A5 reviews (pin) == */
.hv2-reviews .sc-stage { display: flex; align-items: center; }
.hv2-reviews__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-9); align-items: center; }
.hv2-reviews__text { display: grid; gap: var(--sc-6); }
.hv2-reviews__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-2) var(--sc-4); }
.hv2-reviews__meta h2 { font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0; }
.hv2-quote { margin: 0; display: grid; gap: var(--sc-4); }
.hv2-quote__text { font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: var(--sc-track-snug); max-width: 22ch; }
.hv2-quote__by { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hv2-reviews__more { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.hv2-reviews__more blockquote { margin: 0; display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); line-height: 1.6; }
.hv2-reviews__more p { color: color-mix(in oklab, var(--sc-ink) 86%, transparent); }
.hv2-reviews__photo { margin: 0; border-radius: var(--sc-r-sm); overflow: hidden; }
.hv2-reviews__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ============================================== A6 details (flow) == */
.hv2-block {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-7) var(--sc-8);
  padding-block: var(--sc-section); border-top: 1px solid var(--sc-hairline);
}
.hv2-block:first-child { border-top: 0; }
.hv2-block--wide { grid-template-columns: minmax(0, 1fr); }
.hv2-block--wide .hv2-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sc-8); align-items: end; }
.hv2-block--wide .hv2-head > .sc-label { grid-column: 1 / -1; }

.hv2-rates { border-top: 1px solid var(--sc-hairline-strong); }
.hv2-rates li { border-bottom: 1px solid var(--sc-hairline); }
.hv2-rate { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sc-2) var(--sc-6); padding-block: var(--sc-5); color: inherit; text-decoration: none; }
.hv2-rate__name { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: var(--sc-track-snug); }
.hv2-rate__price { color: var(--sc-ink-soft); }
a.hv2-rate .hv2-rate__price { color: var(--sc-accent); font-weight: 600; }
@media (hover: hover) { a.hv2-rate:hover .hv2-rate__name { color: var(--sc-accent); } }

.hv2-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-6); }
.hv2-steps li { display: grid; gap: var(--sc-3); align-content: start; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.hv2-steps h3 { font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: var(--sc-track-snug); }
.hv2-steps p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }

.hv2-faq { border-top: 1px solid var(--sc-hairline-strong); }
.hv2-faq details { border-bottom: 1px solid var(--sc-hairline); }
.hv2-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sc-5);
  padding-block: var(--sc-5); cursor: pointer; list-style: none;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: var(--sc-track-snug); line-height: 1.3;
}
.hv2-faq summary::-webkit-details-marker { display: none; }
.hv2-faq summary::after {
  content: ""; flex: 0 0 auto; width: 0.75rem; height: 0.75rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--sc-ink-soft);
  transition: rotate 220ms var(--sc-ease-out);
}
.hv2-faq details[open] summary::after { rotate: 45deg; }
.hv2-faq details p { padding-bottom: var(--sc-5); color: var(--sc-ink-soft); max-width: 40rem; }
.hv2-faq + .hv2-link { margin-top: var(--sc-6); }

.hv2-resources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6); }
.hv2-resource {
  display: grid; gap: var(--sc-3); align-content: start; height: 100%;
  padding: var(--sc-6); background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md);
  color: inherit; text-decoration: none;
  transition: border-color 180ms var(--sc-ease-out);
}
@media (hover: hover) { .hv2-resource:hover { border-color: var(--sc-ink); } }
.hv2-resource h3 { font-size: var(--sc-t-lg); font-weight: 600; line-height: 1.25; letter-spacing: var(--sc-track-snug); }
.hv2-resource p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }

/* ============================================== A7 close (pin) == */
/* The interior is bright, so it is dimmed and the band reaches higher than the
   engine default: the copy block is tall and the H2 sits near its top. */
.hv2-close__ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72); }
.hv2-close .sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 38%,
    color-mix(in oklab, var(--sc-canvas) 55%, transparent) 62%,
    transparent 86%);
}
.hv2-close__copy { left: var(--sc-gutter); bottom: clamp(2.5rem, 9cqh, 6rem); display: grid; gap: var(--sc-5); max-width: min(52rem, 84vw); }
.hv2-close .sc-stage { container-type: size; }
.hv2-close h2 { font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: var(--sc-track-tight); max-width: 20ch; }
.hv2-close .sc-lede { font-size: var(--sc-t-base); color: color-mix(in oklab, var(--sc-ink) 86%, transparent); }
.hv2-close__contact { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); font-size: var(--sc-t-sm); }
.hv2-close__contact a { color: var(--sc-ink); text-underline-offset: 0.3em; text-decoration-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.hv2-close .sc-label { color: color-mix(in oklab, var(--sc-ink) 78%, transparent); }

/* ============================================================ phone == */
@media (max-width: 860px) {
  .hv2-hero__copy { max-width: none; }
  .hv2-hero__title { font-size: clamp(2.25rem, 9.5vw, 3rem); }
  .hv2-hero__title .hv2-soft { font-size: var(--sc-t-lg); }
  .hv2-hero .sc-copy--lead { bottom: var(--sc-6); }
  .hv2-hero .sc-scrim--lead { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 40%, color-mix(in oklab, var(--sc-canvas) 20%, transparent) 66%, transparent 80%); }
  .hv2-print--b { display: none; }
  .hv2-print--a { top: var(--sc-5); bottom: auto; right: var(--sc-gutter); width: 42vw; }

  .hv2-services__grid, .hv2-work__head, .hv2-block, .hv2-block--wide .hv2-head { grid-template-columns: minmax(0, 1fr); }
  .hv2-services__grid { gap: var(--sc-6); }

  .hv2-peak__window { width: min(88cqw, calc(60cqh * var(--a))); height: min(calc(88cqw / var(--a)), 60cqh); top: 40%; }

  .hv2-work .sc-stage { gap: var(--sc-5); }
  .hv2-rail { --ph: 38cqh; gap: var(--sc-5); }

  .hv2-reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .hv2-reviews__photo { display: none; }
  .hv2-quote__text { font-size: clamp(1.6rem, 7vw, 2rem); }
  .hv2-reviews__more { grid-template-columns: minmax(0, 1fr); gap: var(--sc-4); }

  /* A short name fit beside its price and broke the column; always stack. */
  .hv2-rate { flex-direction: column; align-items: flex-start; gap: var(--sc-1); }
  /* Stacked, the last row's rule sat just above the next section's rule and read as an empty row. */
  .hv2-rates li:last-child { border-bottom: 0; }

  .hv2-steps, .hv2-resources { grid-template-columns: minmax(0, 1fr); }
  .hv2-close h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
}

/* ====================================================== no engine ==
   Before the engine mounts (or if it never does), show everything settled.
   The peak's later states only make sense in motion, so they stay hidden. */
html:not(.hv2) #hv2 :is([data-sc-cue], [data-sc-in], [data-sc-stagger] > *),
.hv2-fallback #hv2 :is([data-sc-cue], [data-sc-in], [data-sc-stagger] > *) { opacity: 1; transform: none; }
html:not(.hv2) #hv2 .hv2-later,
.hv2-fallback #hv2 .hv2-later { opacity: 0; }