/* Homepage adaptation. Shared components live in editorial-sections.css. */
.home-editorial .container, .home-editorial .container--wide {
  width: min(100% - var(--ed-gutter) * 2, var(--ed-container)); max-width: var(--ed-container); padding-inline: 0;
}
.home-editorial .announcement-bar { background: var(--ed-ink); }
.home-editorial .navbar { border-bottom: 1px solid var(--ed-line); }
.home-editorial .navbar__mobile { max-height: calc(100dvh - 5rem); overflow-y: auto; }
/* Only the panel and the card are surfaces. The transparent menu container
   used to carry a rounded shadow of its own, which painted a ghost slab under
   the menu (Hulusi, 16 Sept). */
.home-editorial .navbar__mega-panel, .home-editorial .estimator-card { border-radius: var(--ed-radius-lg); }
/* The hero sits a step inside the column on desktop, Hulusi 15 Sept. */
.home-editorial .hero__inner { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); align-items: center; gap: 3rem; padding-block: 4.5rem 5.5rem; padding-inline: clamp(0rem, 2vw, 2rem); }
.home-editorial .hero__body { gap: 1.75rem; }
.home-editorial .hero__proof { gap: .75rem; }
.home-editorial .hero__chip { background: none; padding: 0; gap: .3rem; border-radius: 0; }
.home-editorial .hero__chip:not(:last-child) { padding-right: .75rem; border-right: 1px solid var(--ed-line); }
.home-editorial .hero__chip-value { font-size: var(--ed-label); line-height: 1.4; }
.home-editorial .hero__chip-label { font-size: var(--ed-label); line-height: 1.4; color: var(--ed-muted); }
.home-editorial .hero__stars { gap: 1px; }
.home-editorial .hero__stars svg { width: .7rem; height: .7rem; fill: var(--brand); color: var(--brand); }
/* Ratings show their number honestly: four full stars and a fifth filled to the
   decimal, via a grey base star with the brand star clipped over it. The
   aria-label on the group carries the value and the source; the stars are
   decoration. */
.home-editorial .hero__star-part { position: relative; display: inline-grid; width: .7rem; height: .7rem; }
.home-editorial .hero__star-part svg { position: absolute; inset: 0; }
.home-editorial .hero__stars .hero__star-base { fill: var(--ed-line); color: var(--ed-line); }
.home-editorial .hero__star-fill { clip-path: inset(0 calc(100% - var(--fill, 100%)) 0 0); }
/* The rating opens with Google's G icon (Hulusi, 15 Sept), at the height of the label text. */
.home-editorial .hero__chip-logo { height: 1rem; width: auto; }
.home-editorial .hero__title { font-size: var(--ed-display); line-height: 1.04; font-weight: 500; letter-spacing: -.045em; }
.home-editorial .hero__accent { color: var(--brand); }
.home-editorial .hero__promise { gap: 1.5rem; }
.home-editorial .hero__lede { font-size: var(--ed-lede); line-height: 1.5; color: var(--ed-muted); max-width: 33rem; }
/* Logos a step larger, Hulusi 15 Sept: 1.1rem read as a footnote next to the buttons. */
.home-editorial .hero__clients { column-gap: 1.75rem; row-gap: 1.125rem; max-width: 36rem; padding-block: .5rem; }
/* Client logos are sized by shape, not one height: stacked lockups (two lines,
   a symbol over a wordmark) run taller and wide wordmarks shorter, so the row
   reads as one weight. The strips elsewhere do the same through width and
   height attributes; the hero forces heights in CSS, so it mirrors them here. */
.home-editorial .hero__client-logo { height: 1.45rem; max-width: 10rem; }
.home-editorial .hero__client-logo--stacked { height: 2rem; }
.home-editorial .hero__client-logo--wide { height: 1.2rem; }
.home-editorial .hero__actions { flex-flow: row wrap; gap: .75rem; }
/* 30.25rem: the 33.5rem box minus the 3.25rem the caption row used to take.
   Portrait heights are re-expressed so their pixel sizes and overlap are unchanged. */
.home-editorial .hero__media { width: 100%; height: 30.25rem; }
.home-editorial .hero__portrait { --cut-unit: clamp(1.125rem, 2.1vw, 1.75rem); width: 73%; border-radius: 6px; box-shadow: none; }
.home-editorial .hero__portrait--back { height: 75.2%; top: 0; right: 0; object-position: 56% 35%; }
.home-editorial .hero__portrait--front { height: 64.3%; bottom: 0; left: 0; border: 6px solid var(--ed-canvas); border-left: 0; border-bottom: 0; box-shadow: none; object-position: 52% 45%; }
.home-editorial .popup-frame { border-radius: var(--ed-radius-xl); }
.home-editorial .popup__input { border-radius: var(--ed-radius-sm); }
.home-editorial .popup__submit { border-radius: var(--ed-radius-pill); }
.home-editorial .popup-frame { border: .75rem solid var(--ed-frame); background: var(--surface); color: var(--ed-ink); }
.home-editorial .popup__title, .home-editorial .popup__proof, .home-editorial .popup__question { color: var(--ed-ink); }
.home-editorial .popup__availability, .home-editorial .popup__lede, .home-editorial .popup__proof-label, .home-editorial .popup__ladder { color: var(--ed-muted); }
.home-editorial .popup__title-accent { color: var(--brand); }
.home-editorial .popup__answer { border-radius: var(--ed-radius-pill); }
.home-editorial .popup__answer--no { color: var(--ed-ink); background: var(--ed-frame); border-color: var(--ed-line); }
.home-editorial .popup__input { color: var(--ed-ink); background: var(--ed-canvas); border-color: var(--ed-line); }
.home-editorial .popup__input::placeholder { color: var(--ed-muted); }
.home-editorial .popup-frame__close { border-radius: 50%; background: var(--ed-frame); color: var(--ed-ink); }
.home-editorial .popup__input { min-height: 3rem; font-size: var(--ed-body); }
@media (max-width:1100px) {
.home-editorial .hero__inner { gap: 2rem; grid-template-columns: 1.5fr 1fr; }
}
@media (max-width:1023px) {
.home-editorial .hero__inner { grid-template-columns: 1fr; padding-block: 3.5rem; padding-inline: 0; }
.home-editorial .hero__body { max-width: 40rem; }
.home-editorial .hero__media { display: none; }
}
@media (max-width:639px) {
.home-editorial .announcement-bar { font-size: var(--ed-label); }
.home-editorial .hero__inner { padding-block: 2.5rem 3rem; }
.home-editorial .hero__proof { gap: .75rem; }
.home-editorial .hero__chip:not(:last-child) { padding-right: .75rem; }
.home-editorial .hero__chip:last-child { display: none; }
.home-editorial .hero__chip:nth-child(2) { border-right: 0; padding-right: 0; }
.home-editorial .hero__stars { display: none; }
.home-editorial .hero__title { font-size: var(--ed-display); }
.home-editorial .hero__clients { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; width: 100%; }
.home-editorial .hero__clients li { display: flex; align-items: center; min-width: 0; }
.home-editorial .hero__client-logo { height: auto; width: auto; max-height: 1.25rem; max-width: 100%; }
.home-editorial .hero__client-logo--stacked { max-height: 1.75rem; }
.home-editorial .hero__client-logo--wide { max-height: 1rem; }
.home-editorial .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
.home-editorial .hero__actions .ed-button { width: 100%; }
}

/* The showreel stays directly below the hero, even while its film is pending. */
.home-editorial .showreel[data-media-pending="true"] .showreel__control,
.home-editorial .showreel[data-media-pending="true"] .showreel__catcher { display: none; }
.home-editorial .showreel__poster { display: none; width: 100%; height: 100%; object-fit: cover; }
.home-editorial .showreel[data-media-pending="true"] .showreel__poster { display: block; }
.home-editorial .showreel[data-media-pending="true"] .showreel__video { display: none; }

/* One composition: a restrained sky, the film in front, the ASCII silhouette
   oversized and cropped by the viewport on the right. Preserve image proportions. */
.home-editorial {
  /* The film's frame: 95vw, Hulusi 14 Sept. Capped by viewport height so the
     pinned film always fits under the navbar; on a short viewport it shrinks
     and the 80/95 shares shrink with it. */
  /* The pinned film keeps a margin under the navbar (Hulusi, 14 Sept) and the
     same margin above the viewport's bottom edge, which is what the height cap
     below leaves free. Navbar is 80px on this page, same as --method-pin-top. */
  --showreel-pin-gap: 1.5rem;
  --showreel-pin-top: calc(80px + var(--showreel-pin-gap));
  --showreel-frame-w: min(95vw, calc((100svh - var(--showreel-pin-top) - var(--showreel-pin-gap)) * 16 / 9));
  /* How much film may sit above the fold in the first viewport: a tenth of it. */
  --showreel-peek: calc(var(--showreel-frame-w) * 9 / 16 * .1);
  /* Announcement bar 44 + navbar 81. No token exists for this yet. */
  --home-header-h: 125px;
}
.home-editorial .showreel {
  --showreel-tail: clamp(8rem, 12vw, 11rem);
  /* Pinned distance: the film sticks under the navbar for this much scroll
     while the crop opens, then releases and the horse band follows. */
  --showreel-travel: 40svh;
  /* Starting size, Hulusi 14 Sept: 80vw of film visible at rest, the full
     95vw frame once open. The window crops 7.5vw a side at rest, 7.5/95 of
     the frame, so the share holds when the frame is height-capped. */
  --crop: calc(var(--showreel-frame-w) * 7.5 / 95);
  background: var(--ed-canvas);
  height: auto;
  padding-block: 0 var(--showreel-tail);
}
/* Sticky travel has to be room inside the parent's content box: padding does
   not count, and a margin on the stage eats its own room (the constraint
   applies to the stage's margin box). An in-flow spacer after the stage adds
   exactly the travel, with no viewport arithmetic. The band stays as padding,
   outside the constraint, so the film releases before the horse. */
.home-editorial .showreel::after { content: ""; display: block; height: var(--showreel-travel); }
.home-editorial .showreel[data-expanded="true"] { --crop: 0px; }
.home-editorial .showreel__stage {
  position: sticky;
  top: var(--showreel-pin-top);
  height: auto;
  align-items: flex-start;
  padding-top: 0;
  overflow: visible;
  z-index: 1;
}
.home-editorial .showreel__frame {
  width: var(--showreel-frame-w);
  max-height: none;
  max-width: none;
}
.home-editorial .showreel__window {
  box-shadow: 0 12px 40px rgb(31 61 105 / .1);
}
.home-editorial .showreel__atmosphere {
  inset: 0;
  mask-image: linear-gradient(transparent, #000 12%, #000 96%, transparent);
}
.home-editorial .showreel__clouds {
  inset: 0;
  background-position: center 64%;
  opacity: .36;
  filter: saturate(.45);
  mask-image: linear-gradient(transparent 5%, #000 40%, #000 92%, transparent);
}
.home-editorial .showreel__horse {
  position: absolute;
  top: auto;
  left: auto;
  right: -10vw;
  bottom: -4rem;
  transform: none;
  width: min(98vw, 84rem);
  height: auto;
  min-height: 0;
  opacity: .9;
  mask-image: linear-gradient(#000 88%, transparent 100%);
}
.home-editorial .showreel__sculpture,
.home-editorial .showreel__reflections {
  object-fit: contain;
  object-position: center;
}
.home-editorial .showreel__horse[data-rendered="true"] .showreel__sculpture {
  opacity: .28;
  filter: saturate(.55);
}
@media (max-width: 639px) {
  .home-editorial .showreel {
    --showreel-tail: 15rem;
    --showreel-travel: 24svh;
  }
  .home-editorial { --showreel-pin-top: calc(72px + var(--showreel-pin-gap)); --showreel-frame-w: calc(100vw - 2rem); --home-header-h: 73px; }
  .home-editorial .showreel__stage { height: auto; }
  .home-editorial .showreel__frame { width: calc(100% - 2rem); }
  .home-editorial .showreel__horse { width: 42rem; max-width: none; right: -28vw; bottom: -2.5rem; opacity: .84; }
  .home-editorial .showreel__clouds { opacity: .28; }
}


/* One spacing rhythm per section boundary, rather than two full paddings. */
/* The boundary keeps scaling on wide screens (Hulusi, 14 Sept: 96px read
   tight against a 1200px block on a 3700px monitor). 8rem is reached at
   2133px; nothing changes at or below 1600. */
.home-editorial { --home-section-gap: clamp(3.5rem, 6vw, 8rem); --home-heading-gap: clamp(1.75rem, 3vw, 2.5rem); }
.home-editorial .ed-section { padding-block: calc(var(--home-section-gap) / 2); }
/* The showcase heading follows the capabilities frame, the heaviest surface on
   the page, and Hulusi read the halved budget there as too close twice (14
   Sept, laptop and monitor). It keeps a full gap above it: the boundary is one
   and a half times an ordinary one, 129px at 1440, and scales with the token. */
.home-editorial #realisations { padding-top: var(--home-section-gap); }
.home-editorial .ed-heading { margin-bottom: var(--home-heading-gap); }
/* The showcase heading's lede column is taller than its one-line headline on
   wide screens; bottom-aligning them dropped the headline 93px below the lede
   and made the boundary read as two different distances. Tops align now.
   client-stories keeps end alignment: its aside is a single link. */
.home-editorial .case-showcase .ed-heading { align-items: start; }
/* Hero air and the film's resting height, Hulusi 14 Sept: more room around
   the hero content, and only about a tenth of the film above the fold on a
   1440x900 viewport. The section rhythm on both sides; measured 67px of film
   showing, 9.9% of its height. */
.home-editorial .hero__inner {
  padding-block: var(--home-section-gap);
  min-height: calc(100svh - var(--home-header-h) - var(--showreel-peek));
}
@media (max-width: 639px) {
  .home-editorial .hero__inner { padding-block: 2.5rem 3rem; }
}
/* The reveal keeps opening on the sides and the bottom, but the top edge no
   longer insets: at rest the film starts exactly where the hero's join ends,
   instead of 64px lower and sliding up on scroll. Same counter-inset pairing
   as the base rule, so the video still fills the outer box. */
.home-editorial .showreel__window { inset: 0 var(--crop) var(--crop); }
.home-editorial .showreel__inner { inset: 0 calc(-1 * var(--crop)) calc(-1 * var(--crop)); }
/* The FAQ takes a full section gap above it as well as below, Hulusi 16 Sept:
   it sat too close to the contact form on the shared half-and-half boundary.
   Same treatment as #realisations, one and a half budget. */
.home-editorial #questions { padding-top: var(--home-section-gap); padding-bottom: var(--home-section-gap); }


/* Scroll thread, Hulusi 15 Sept: one line behind the sections that draws with
   the scroll, crossing the page from side to side and touching each heading.
   Route and drawing: scroll-thread.js. Behind everything: main isolates its
   stacking context and the overlay sits at z-index -1, so content paints
   over the line and only the canvas shows through. The showreel section
   loses its own canvas fill for the same reason: the body already paints it. */
.home-editorial main { position: relative; isolation: isolate; }
.home-editorial .showreel, .home-editorial #methode.method-scroll, .home-editorial #methode.method-scroll .method-scroll__stage { background: transparent; }
.home-editorial .thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.home-editorial .thread__path { fill: none; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; }
/* The front copy: over the content, only inside the ring window, and it
   multiplies like marker ink so it sits on a photo rather than on top of it. */
.home-editorial .thread--front { z-index: 2; mix-blend-mode: multiply; }
.home-editorial .thread--front .thread__path { stroke-width: 12; }
@media (max-width: 1023px) { .home-editorial .thread { display: none; } }