/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE PAGE — its own sections.

   Same language as the homepage (the drawn rule, Signal Orange on motion
   only, the warm ramp, Inter Tight over Lora) but none of its compositions.
   A visitor who came via the homepage should not meet the same page twice.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── WHERE IT GOES ─────────────────────────────────────────────────────────
   A section through the house, with each kind of addition lit where it
   actually lands. The homepage shows WHAT we build; a service page has to
   show WHERE it attaches, which is the first thing anyone pictures. */
.where { background: var(--g-mid); padding: clamp(60px,9vw,100px) var(--pad); }
/* Capped so the two columns sit together instead of the image being
   stranded at the far side of a 1137px row. */
.where__in { display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr);
  gap: clamp(26px,3.4vw,44px); align-items: start; margin-top: 40px;
  max-inline-size: 940px; }

.where__list { display: flex; flex-direction: column; }
.where__list button { display: flex; align-items: baseline; gap: 14px; width: 100%;
  background: none; border: 0; border-radius: 3px; padding: 12px 14px; cursor: pointer;
  text-align: left; font-family: var(--fh); font-weight: 500; font-size: 17px;
  letter-spacing: -.02em; color: var(--ink-700);
  transition: background .2s, color .2s; }
.where__list button:hover { background: rgba(40,31,26,.04); }
.where__list button em { font-family: var(--fd); font-style: normal; font-size: 12px;
  letter-spacing: .1em; color: var(--ink-400); flex: none; }
.where__list button[aria-selected="true"] { background: var(--accent-tint); color: var(--heading); }
.where__list button[aria-selected="true"] em { color: var(--accent-600); }

/* The note sits under the list, where the eye already is after choosing. */
.where__note { margin-top: 18px; padding: 16px 14px 0; font-size: 15px; line-height: 1.6;
  color: var(--ink-700); border-top: 2px solid var(--accent-500); min-height: 5.6em; }

/* The figure is a PHOTOGRAPH now, not the side-elevation diagram. Rashi,
   2026-10-28: "we do not want the animation anymore... I want actual
   pictures." The old .where__zone / .where__key legend rules went with the
   SVG they described; v2-service.js already guards the zone lookup with
   `if (z)`, so nothing throws and the note under the list still swaps.

   5/7 because the source is 616x972 — a narrow Toronto lot photographed
   head-on. Forcing it into a landscape box showed the gable and nothing
   else, which is why it is not in the 16:9 work strip. */
.where__fig { margin: 0; }
/* Rashi, 2026-10-29: "the width of the image section is too wide, reduce it.
   also, make the images wider, same size but wider definitely."

   Both faults measured at 1280px: the right-hand column was 756px while the
   figure inside it was capped at 420px, leaving 336px of dead space to its
   right — that is the width she was looking at. And the frame was 5/7, a
   PORTRAIT box, while five of the six photographs are landscape, so every
   one of them was being cropped to a tall slot.

   Now the figure fills its column and the column is sized by the grid below,
   so there is no gap beside it; the frame is 3/2, which is the Don Mills
   photograph's own shape. Wider and shorter, same footprint. */
.where__fig--photo { position: relative; }
.where__img { width: 100%; height: auto; display: block; border-radius: 14px; }
.where__cap { margin-top: 12px; font-family: var(--fd); font-style: italic;
  font-size: 14px; color: var(--ink-600); }

/* ── WHAT DECIDES IT ───────────────────────────────────────────────────────
   The five by-law numbers that settle whether an addition is as-of-right.
   Drawn as an annotated sheet, because that is the form the answer takes
   when it arrives from the City. */
.rules { background: var(--g-white); padding: clamp(60px,9vw,100px) var(--pad); }
.rules__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: 26px; margin-top: 40px; }
.rules__item { padding-top: 18px; border-top: 2px solid var(--heading); }
.rules__item:nth-child(odd) { border-top-color: var(--accent-500); }
.rules__item b { display: block; font-family: var(--fh); font-weight: 600; font-size: 17px;
  letter-spacing: -.02em; color: var(--heading); }
.rules__item span { display: block; margin-top: 9px; font-size: 14px; line-height: 1.55;
  color: var(--ink-700); }
.rules__item i { display: block; margin-top: 12px; font-family: var(--fd); font-style: italic;
  font-size: 13px; color: var(--ink-500); }

/* ── HOW LONG ──────────────────────────────────────────────────────────────
   Real durations from the content, as bars rather than a list. The homepage
   has a vertical process rail; this is the same information as time.

   ⚠ The bars are VISIBLE by default. An earlier version set scaleX(0) and
   waited for an .is-in class that never arrived, because .gantt is not a
   .section and the shared observer never saw it — the whole chart rendered
   as empty space under two labels. Anything that hides an element must be
   the same thing that reveals it, so the hiding now comes from .anim, which
   only JavaScript adds. */
.gantt { background: var(--g-beige); padding: clamp(60px,9vw,100px) var(--pad); }
.gantt__chart { margin-top: 40px; position: relative;
  border-top: 1px solid var(--ink-200); padding-top: 14px; }
.gantt__scale { display: grid; grid-template-columns: repeat(14,1fr);
  font-size: 11px; letter-spacing: .14em; color: var(--ink-500); }
.gantt__scale span { position: relative; padding-bottom: 10px; }
.gantt__scale span::before { content: ""; position: absolute; inset-block-start: -15px;
  inset-inline-start: 0; inline-size: 1px; block-size: 9px; background: var(--ink-300); }

.gantt__row { margin-top: 26px; }
.gantt__row > b { display: block; font-family: var(--fh); font-weight: 600;
  font-size: 16px; letter-spacing: -.02em; color: var(--heading); margin-bottom: 10px; }
.gantt__track { display: grid; grid-template-columns: repeat(14,1fr); gap: 2px;
  background: linear-gradient(90deg, var(--ink-200) 1px, transparent 1px) 0 0 / calc(100%/14) 100%; }
.gantt__bar { block-size: 38px; display: flex; align-items: center;
  padding-inline: 13px; font-size: 12px; white-space: nowrap; color: var(--heading);
  transform-origin: left; }
.gantt.anim .gantt__bar { transform: scaleX(0); transition: transform .8s var(--draw); }
.gantt.anim.is-in .gantt__bar { transform: scaleX(1); }
.gantt.anim .gantt__bar:nth-child(2) { transition-delay: .12s }
.gantt.anim .gantt__bar:nth-child(3) { transition-delay: .24s }
.gantt__bar--design { background: var(--ink-200); }
.gantt__bar--permit { background: var(--ink-300); }
.gantt__bar--build  { background: var(--accent-500); color: #000; font-weight: 700; }

.gantt__key { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px;
  font-size: 12px; color: var(--ink-600); }
.gantt__key span { display: flex; align-items: center; gap: 9px; }
.gantt__key i { inline-size: 22px; block-size: 10px; flex: none; }
.gantt__note { margin-top: 22px; font-family: var(--fd); font-style: italic;
  font-size: 16px; color: var(--ink-600); max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .gantt.anim .gantt__bar { transform: none; transition: none; }
}

/* ── WHAT MOVES THE NUMBER ─────────────────────────────────────────────────
   Two columns, up and down. The homepage argues fixed price; this answers
   the question that comes straight after it. */
.drivers { background: var(--g-white); padding: clamp(60px,9vw,100px) var(--pad); }
.drivers__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(26px,4vw,56px); margin-top: 40px; }
.drivers h3 { display: flex; align-items: center; gap: 12px; font-family: var(--fb);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-600); }
.drivers h3 svg { flex: none; }
.drivers ul { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.drivers li { font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.drivers li b { color: var(--heading); font-weight: 700; }
/* ── UP AND DOWN HAVE TO LOOK DIFFERENT ────────────────────────────────────
   Rashi, 2026-10-28: "the pushes it up and pulls it down. You can't tell. In
   the mobile version, it's like just paragraphs after paragraphs."

   She is right, and it was not only a mobile fault. Two unboxed lists side by
   side rely entirely on the small uppercase h3 to carry the contrast, and
   once they stack that h3 is the only thing between ten near-identical
   paragraphs. So: each side becomes a card, the "up" side tinted, and each
   driver's bold lead goes on its own line with a rule above it, so the list
   reads as five separate things rather than one block of prose.

   Applied at every width on purpose — the desktop version had the same
   weakness, just with the columns doing the separating. */
.drivers__grid > div { padding: clamp(22px,3vw,30px) clamp(20px,2.6vw,28px);
  border-radius: 14px; border: 1px solid rgba(40,31,26,.10); background: var(--g-beige); }
.drivers__grid > div:first-child { background: var(--accent-tint);
  border-color: rgba(203,115,25,.22); }
.drivers ul { margin-top: 18px; gap: 0; }
.drivers li { padding-block: 14px; border-block-start: 1px solid rgba(40,31,26,.09); }
.drivers li:first-child { border-block-start: 0; padding-block-start: 0; }
.drivers li:last-child { padding-block-end: 0; }
.drivers li b { display: block; margin-block-end: 3px; }

@media (max-width: 52rem) {
  .where__in, .drivers__grid { grid-template-columns: 1fr; }

  /* ── THE GANTT, UNGRIDDED ───────────────────────────────────────────────
     Rashi, 2026-10-28: "the how long section is looking botched up... the
     time frames are looking like a mess" — mobile only.

     The old rule here set `.gantt__row` to 7 columns, but .gantt__row is not
     a grid; .gantt__track is. So it changed nothing and the chart stayed at
     14 columns inside 375px — roughly 26px per month, with "Construction, 4
     to 6 months" crushed into six of them. That is the mess.

     A fourteen-month horizontal scale cannot work on a phone, so below 52rem
     the chart stops being a chart: the track becomes a stack of full-width
     bars, each naming its phase and its months. The inline `grid-column` on
     every bar is simply ignored once the track is flex, so the markup stays
     one structure for both layouts. The month span comes from data-mo, added
     to the markup for exactly this. */
  .gantt__scale { display: none; }
  .gantt__chart { margin-top: 28px; }
  .gantt__track { display: flex; flex-direction: column; gap: 6px; }
  .gantt__bar { block-size: auto; min-block-size: 44px; padding: 11px 15px;
    justify-content: space-between; gap: 14px; border-radius: 3px; }
  .gantt__bar::after { content: attr(data-mo); font-family: var(--fd);
    font-style: italic; font-size: 12px; opacity: .85; white-space: nowrap; }
  .gantt__row { margin-top: 24px; }
  .gantt__row > b { font-size: 15px; }
}

/* ── THE WHERE FIGURE ON MOBILE ────────────────────────────────────────────
   v2-home.css sets `body.v2 .where__in` to
   `minmax(0,1fr) clamp(132px,22vw,190px)` below 760px, and again for
   761px-52rem. That was right when the second column held a small SCHEMATIC
   DIAGRAM beside the type list. It is wrong now that the column holds a
   PHOTOGRAPH: measured at 375px it rendered the Brock photo 132px wide,
   right-aligned, as a thumbnail.

   The plain `.where__in` rule in the block above cannot win — `body.v2
   .where__in` is (0,2,1) against its (0,1,0) — so this carries the same
   prefix. One column below 52rem: the list, then the photograph under it. */
@media (max-width: 52rem) {
  body.v2 .where__in { grid-template-columns: 1fr; gap: clamp(22px,4vw,30px); }
  /* The template alone was not enough: v2-home.css also PLACES the children
     (`.where__list` col 1, `.where__fig` col 2, `.where__note` spanning), so
     the figure pulled a second implicit column into being and the one-column
     template changed nothing — measured, grid-template-columns computed to
     two tracks with grid-auto-flow still `row`. Reset the placements too. */
  body.v2 .where__list,
  body.v2 .where__fig { grid-column: 1 / -1; grid-row: auto; }
  body.v2 .where__fig--photo { max-inline-size: 420px; }
}

/* The per-type photograph. .where__frame is the positioning context for the
   cross-fade ghost; without it the clone would be placed against the page.
   Fixed aspect so swapping between a tall street shot and a wide interior
   does not make the column jump. */
.where__frame { position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 3 / 2; background: var(--g-beige,#faf5f0); }
.where__frame .where__img { position: absolute; inset: 0; inline-size: 100%;
  block-size: 100%; object-fit: cover; border-radius: 0; }
.where__ghost { z-index: 1; transition: opacity .5s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .where__ghost { transition: none; } }