/* Dienstpagina-CSS (ronde 3).
   Staat NIET in styles.css: dat bestand is byte-identiek aan output/styles.css
   en dat blijft zo (spec ronde 2 §4.1). Er is geen scoping-mechanisme, dus elke
   selector hangt met de hand onder .service-* of .hub-*.

   NIET .svc-*: styles.css bezit die prefix al met tien klassen voor de
   homepage-sectie (.svc-list, .svc-row, .svc-num, .svc-name, .svc-tag,
   .svc-thumb, .svc-preview, .svc-stage, .svc-stage-img, .svc-stage-scrim).
   Er is vandaag geen letterlijke botsing, maar een tweede ONGESCOPETE
   stylesheet die dezelfde prefix deelt is een botsing die staat te wachten.

   HERBOUWD (Task 9b). De eerste versie was een artikel van EEN kolom in een
   container die voor twee is ontworpen: 60/54/53% breedtebenutting tegen 84%
   op de homepage, gemeten met scripts/measure-width-usage.mjs. De ontwerpregel
   die dat verklaart staat sinds 2026-07-30 in DESIGN.md §6b: elke sectie van
   deze site is tweezonig. De maten hieronder zijn daarom LETTERLIJK die van
   .news-inner / .news-rail uit styles.css - huisapparatuur, geen nieuw raster.

   Alleen tokens uit DESIGN.md §1: geen losse hex, geen losse ease, radii
   alleen uit {2,3,4,8,10,999}px. */

/* ============================================================ HERO (ink) */
.service-hero {
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--nav-h) + 32px) 0 clamp(48px, 6vw, 72px);
}
/* Huisregel uit styles.css: elke donkere sectie zet de kicker op --grey.
   .kicker staat standaard op --grey-2 (#64646c) en dat haalt op ink maar
   3,37:1 - onder de 4,5:1 die 11,5px tekst nodig heeft. Gemeten, niet geraden. */
.service-hero .kicker { color: var(--grey); }
.service-hero .section-title { margin: 14px 0 0; }
.service-lead {
  max-width: 56ch;
  margin: 24px 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--grey);
}

/* De beeldband onder de herotekst (Task 9b stap C). service.image is hetzelfde
   veld dat Services.astro op de homepage al decoratief rendert (alt="" binnen
   aria-hidden), dus geen schemawijziging en geen alt-veld nodig.

   21/9 op desktop, gekozen na het bekijken van de drie uitersten in hun echte
   crop (1400x1400, 1200x1233 en 1600x649): bij alle drie blijft het onderwerp
   heel - koppen worden niet afgesneden - en de band is 483px in plaats van de
   634px die 16/9 zou kosten, wat de body dichter bij de vouw houdt. Onder 900px
   wordt 21/9 een strook die geen werk doet (zelfde afweging als de contact-hero
   in ronde 2), dus daar 16/9. De verhouding is VAST: een klant die een ander
   beeld uploadt verschuift de layout niet (DESIGN.md §4). */
.service-hero-media { margin-top: clamp(32px, 4vw, 48px); }
.service-band {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: 10px;
  overflow: hidden;
  outline: 1px solid var(--line-w);
}
.service-band img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ============================================================ BODY (paper) */
.service-body {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 8vw, 96px) 0;
}

/* Het twee-zone-raster. Maten letterlijk uit .news-inner (styles.css r.851-855):
   de rail is 0,92fr, de lopende inhoud 2fr. Op 1440px is dat een rail van ~333px
   en een stroomkolom van ~723px binnen een wrap van 1128px. */
.service-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* De rail staat NA de stroom in de DOM en wordt hier links geplaatst. Reden:
   onder 1000px klapt het raster naar een kolom en dan geldt de DOM-orde. Met de
   rail eerst kreeg een mobiele bezoeker tien capability-labels in kapitalen te
   zien vóór de eerste uitleg; nu leest hij eerst het verhaal en daarna de lijst.
   De rail bevat niets aanklikbaars, dus de afwijking tussen DOM-orde en
   visuele orde raakt geen tab-volgorde. */
.service-caps { grid-column: 1; grid-row: 1; }
.service-flow { grid-column: 2; grid-row: 1; }

/* ---- de rail: kicker + kop + de capability-rijen.
   Was in de eerste versie een losse zwarte band onderaan de pagina; die haalde
   50-53% breedte en stond los van de tekst waar hij bij hoort.

   NIET sticky, anders dan .news-rail, en dat is gemeten: met twaalf rijen is
   deze rail 835px hoog terwijl een venster van 900px er onder de nav 802px voor
   heeft. Een sticky element scrollt niet intern, dus de onderste rij zou
   permanent onder de vouw blijven. Een hoogte-poort die dat afvangt
   (min-height ~960px) staat op vrijwel elk scherm uit en is dan dode code -
   hetzelfde soort drift als de --glide-token. Het twee-zone-raster van §6b
   vraagt twee zones, niet per se een plakkende. */
.service-caps .kicker { margin-bottom: clamp(16px, 2vw, 22px); }
/* Zelfde maat als .news-rail .section-title (r.862-865): de huismaat voor een
   kop in een smalle kolom. */
.service-caps .section-title {
  font-size: clamp(2.3rem, 4.2vw, 3.7rem);
  margin: 0 0 22px;
}
.service-cap-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-k);
}
.service-cap {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-k);
}
.service-cap .mono { color: var(--ink); line-height: 1.4; }

/* ---- de stroomkolom: proza A, beeld, tweede kop, proza B.
   62ch is de leesbare regellengte die .statement-copy ook aanhoudt; de kolom
   zelf is ~723px, dus de tekst vult hem bijna en de rest is marge, geen gat. */
.service-prose { max-width: 62ch; }
.service-prose p { margin: 0 0 1.15em; line-height: 1.7; }
.service-prose p:last-child { margin-bottom: 0; }
.service-prose strong { font-weight: 700; }

/* De reset in styles.css zet list-style op none en haalt de onderstreping van
   links, dus proza-opsommingen en -links moeten hier terug worden gezet. */
.service-prose ul { margin: 0 0 1.15em; padding: 0; }
.service-prose li { position: relative; padding-left: 20px; margin-bottom: 0.5em; line-height: 1.7; }
.service-prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}
/* Link-kleur erft de tekstkleur; het rood zit in de onderstreping. Een rode
   link op paper haalt 3,54:1 en dat is te weinig voor lopende tekst, terwijl de
   decoratiekleur niet aan die eis gebonden is. */
.service-prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s var(--ease-out);
}
.service-prose a:hover { text-decoration-color: var(--ink); }

/* ---- beeldblok, nu IN de stroomkolom. Rendert niet bij een lege gallery
   (video-digital-marketing heeft nul beelden). Zelfde behandeling als
   .case-media op de homepage: vaste verhouding, radius 10px, haarlijn, cover -
   maar GEEN grayscale-filter, want drie van de dertien beelden zijn in kleur en
   op een pagina over ontwerpwerk is kleur het punt.

   In een kolom van ~723px wordt een enkel beeld 723px en worden twee beelden
   naast elkaar ~351px. Dat lost meteen poort F op: in de eerste versie werd het
   eventbeeld (bron 700x300) over 700px gelegd en 1,31x opgerekt; op deze maten
   wordt geen enkel bronbeeld meer opgerekt. */
.service-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: clamp(36px, 4vw, 52px) 0;
}
.service-gallery.is-single { grid-template-columns: 1fr; }
.service-shot {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  outline: 1px solid var(--line-k);
}
/* Een ENKEL beeld vult de kolom (~723px) en krijgt daarom 21/9 en niet 16/9.
   Gemeten: met 16/9 werd de eventfoto (bron 700x300, een Elementor-thumbnail)
   in een doos van 723x407 gelegd en door object-fit cover 1,36x opgeschaald op
   de hoogte - poort F eist natuurlijk formaat is ongeveer gerenderd formaat.
   21/9 is exact 2,333 en dus precies de verhouding van dat bronbeeld: 1,03x en
   geen crop. De twee andere enkele beelden zijn 1600 en 2000px breed en worden
   hier verkleind, dus die rekken sowieso niet op. */
.service-gallery.is-single .service-shot { aspect-ratio: 21 / 9; }
.service-shot img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* De tweede kop is een CMS-zin en die zijn lang: van 26 tekens ("Is your plan
   crisis-ready?") tot 79 ("Build the investor communications toolkit you need to
   take your company public."). Op de standaardmaat van .section-title (tot
   89,6px) worden dat in een kolom van 723px vijf regels reuzenkapitalen.
   Contextuele verkleining is huisidioom (.news-rail .section-title bestaat om
   dezelfde reden), geen nieuwe token. */
.service-mid { margin: clamp(40px, 5vw, 60px) 0 clamp(20px, 3vw, 30px); }
.service-mid .section-title { font-size: clamp(2.1rem, 3.4vw, 3.2rem); }

/* ============================================================ CONTACT (ink) */
/* Was paper-2 en 27-39% breed - het zwakste blok van de pagina. Nu een echte
   band op ink: links de vraag en de handeling, rechts wie je spreekt. De pagina
   eindigt daarmee op het conversiemoment in plaats van op een lijst, net als de
   donkere contactpanelen op SPOKE's eigen live dienstpagina's. */
.service-contact {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 7vw, 88px) 0;
}
.service-contact .kicker { color: var(--grey); }
.service-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* Verhouding van .statement-cols (r.460-466). De kop is sjabloonmeubilair en
   staat in de smalle-kolom-maat, want hij deelt de band met de rechterzone. */
.service-contact .section-title {
  font-size: clamp(2.3rem, 4.2vw, 3.7rem);
  margin: 0;
}
.service-contact-lead {
  max-width: 46ch;
  margin: clamp(18px, 2vw, 24px) 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--grey);
}
.service-contact-act {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: clamp(24px, 3vw, 32px) 0 0;
}

/* ---- de rechterzone. Rijen met haarlijnen, dezelfde vorm als de rail links,
   zodat de twee zones van de pagina dezelfde grammatica delen. Rijen over de
   volle kolombreedte en niet naast elkaar: zeven diensten hebben twee
   aanspreekpunten, twee hebben er een, en naast elkaar zou die laatste groep de
   helft van de zone leeg laten. */
.service-who-label {
  color: var(--grey);
  margin: 0 0 14px;
}
.service-people, .service-offices {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-w);
}
.service-person {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-w);
}
/* Zelfde visuele taal als .team-card op de homepage (4/5-verhouding, radius
   10px, naam vet, rol in mono), maar met eigen klassen: .team-card zit in een
   horizontale scrollstrip en die geometrie hoort hier niet. */
.service-person-photo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(96px, 11vw, 128px);
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  outline: 1px solid var(--line-w);
}
.service-person-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.service-person-id { display: grid; gap: 5px; }
.service-person-id strong { font-weight: 700; font-size: clamp(1.02rem, 1.3vw, 1.15rem); }
.service-person-id .mono { color: var(--grey); }

/* Terugval als een dienst geen aanspreekpunt heeft: video-digital-marketing en
   brandinggraphicdesign hebben er nul, want daar noemde de live copy alleen
   Megan en Will, die volgens de scoperegel niet op de site staan. De twee
   kantoren komen uit dezelfde office-documenten die de homepage en de
   contactpagina voeden - echte inhoud, geen opvulling, en de rechterzone blijft
   op alle negen pagina's gevuld. */
.service-office {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-w);
}
.service-office-label { color: var(--grey); margin: 0 0 8px; }
.service-office strong { display: block; font-weight: 700; font-size: 1.05rem; }
.service-office address {
  font-style: normal;
  color: var(--grey);
  margin: 4px 0 8px;
  line-height: 1.55;
}

/* ============================================================ HUB: KOP (ink) */
/* De overzichtspagina. Ink-kop, paper-kaartraster, ink-atlas: hetzelfde
   ink/paper/ink-ritme als de homepage en de negen detailpagina's. */
.hub-head {
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--nav-h) + 40px) 0 clamp(56px, 7vw, 84px);
}
.hub-head .kicker { color: var(--grey); }
.hub-head .section-title { margin: 14px 0 0; }
.hub-lead {
  max-width: 56ch;
  margin: 24px 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--grey);
}

/* Cijfers links, headerbeeld rechts: het raster van .news-inner (0,92fr / 2fr),
   hetzelfde dat de dienstpagina's en de atlasrijen gebruiken. */
.hub-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
  margin-top: clamp(36px, 4vw, 56px);
}
.hub-head-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  outline: 1px solid var(--line-w);
}
.hub-head-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* De cijfers. Zelfde opbouw als .result / .result-fig / .result-lab op de
   homepage (r.819-843), met eigen klassen omdat die band een odometer-animatie
   meebrengt die hier niet hoort. De cijfers worden GETELD uit de data (zie
   ServicesHubHero.astro), dus ze kunnen niet verouderen zoals "Eight ways to be
   heard." dat deed. */
.hub-facts {
  display: grid;
  gap: clamp(20px, 2.5vw, 30px);
  margin: 0;
  padding: 0;
}
.hub-fact { display: grid; gap: 10px; align-content: start; }
.hub-fact-figure {
  font-stretch: 63%;
  font-weight: 840;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 0.9;
  letter-spacing: 0.002em;
  color: var(--white);
}
.hub-fact-lab {
  display: grid;
  gap: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--line-w);
  font-weight: 650;
  font-size: 1.02rem;
}
/* --grey en niet --grey-2 zoals .result-lab .mono: grey-2 haalt op ink 3,37:1. */
.hub-fact-sub { color: var(--grey); }

/* ====================================================== HUB: KAARTEN (paper) */
/* Negen deuren als kaartraster, geen index-lijst: de homepage-sectie IS al de
   index-lijst-uitvoering (spec §4.1). Drie kolommen vullen de breedte per
   constructie, dus dit archetype loopt niet in de val van taak 9. */
.hub-cards {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 96px);
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
}
.hub-card { display: grid; gap: 0; color: inherit; }
.hub-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  outline: 1px solid var(--line-k);
}
.hub-shot img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.hub-card-body { display: grid; gap: 9px; padding-top: 16px; }
/* --red-deep en niet --red: gemeten haalt #ef3e31 op paper maar 3,56:1 bij
   11,5px, onder de 4,5:1 die DESIGN.md §8 eist. Dat is precies waar de
   red-deep-token voor bestaat. Op ink mag --red wel; de atlas-nummers staan daar
   en die zijn nagemeten. */
.hub-num { color: var(--red-deep); }
/* Het kop-recept (DESIGN.md §2) op kaartmaat. Een bare h2 erft die waarden niet:
   styles.css hangt ze aan .section-title / .statement-title / .contact-title. */
.hub-name {
  font-stretch: 63%;
  font-weight: 840;
  text-transform: uppercase;
  letter-spacing: 0.002em;
  line-height: 1.02;
  font-size: clamp(1.45rem, 2.25vw, 1.84rem);
  margin: 0;
}
.hub-tag { color: var(--grey-2); font-size: 0.98rem; line-height: 1.5; }
/* De rode regel die bij hover uitschuift. Dezelfde gedachte als de rode balk
   over de volle breedte bij .svc-row op de homepage, maar per kaart. Standaard
   0px breed, dus zonder hover en op touch is er niets te missen. */
.hub-rule {
  display: block;
  height: 2px;
  width: 0;
  margin-top: 3px;
  background: var(--red);
  transition: width 0.5s var(--ease-out);
}
.hub-card:focus-visible .hub-rule { width: 100%; }

/* ======================================================= HUB: ATLAS (ink) */
/* Het signature-moment (spec §4.3): alle capability-labels van alle diensten als
   een dichte mono-index. Elke rij gebruikt hetzelfde 0,92fr/2fr-raster als het
   detailsjabloon, dus de hele ronde deelt een raster. */
.hub-atlas {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line-w);
  padding: clamp(64px, 8vw, 96px) 0;
}
.hub-atlas .kicker { color: var(--grey); }
.hub-atlas .section-title {
  font-size: clamp(2.3rem, 4.2vw, 3.7rem);
  margin: 14px 0 clamp(32px, 4vw, 48px);
}
.hub-atlas-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-w);
}
.hub-atlas-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--line-w);
}
.hub-atlas-head { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.hub-atlas-num { color: var(--red); }
.hub-atlas-name {
  font-stretch: 63%;
  font-weight: 840;
  text-transform: uppercase;
  letter-spacing: 0.002em;
  line-height: 1.04;
  font-size: clamp(1.25rem, 1.8vw, 1.62rem);
  text-wrap: pretty;
  color: inherit;
  transition: color 0.3s var(--ease-out);
}
.hub-atlas-caps { margin: 0; color: var(--grey); line-height: 1.95; }
/* De belknop sluit de pagina af, uitgelijnd op de labelkolom van de atlas. */
.hub-atlas-act {
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding-left: calc((0.92 / 2.92) * 100% + clamp(30px, 5vw, 76px));
}
/* De rode punt uit het kicker-patroon als scheidingsteken, op inline-maat. */
.hub-atlas-caps .dot {
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 9px;
  vertical-align: middle;
}

@media (hover: hover) and (pointer: fine) {
  .hub-card:hover .hub-shot img { transform: scale(1.05); }
  .hub-card:hover .hub-rule { width: 100%; }
  .hub-atlas-name:hover { color: var(--red); }
}

@media (max-width: 1023px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  /* = styles.css r.1067: onder 1000px klappen alle twee-koloms varianten naar 1fr. */
  .service-body-grid, .service-contact-grid {
    grid-template-columns: 1fr;
    gap: clamp(26px, 6vw, 40px);
  }
  .service-caps, .service-flow { grid-column: 1; grid-row: auto; }
  .hub-atlas-row { grid-template-columns: 1fr; gap: 12px; }
  .hub-atlas-act { padding-left: 0; }
}

@media (max-width: 1000px) {
  /* Beeld eerst, dan de cijfers: op één kolom leest een 16/9-band boven de
     cijfers als de voortzetting van de kop. */
  .hub-head-grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
  .hub-facts { order: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
  .hub-head-media { order: 1; }
}

@media (max-width: 720px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-facts { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 900px) {
  .service-band { aspect-ratio: 16 / 9; }
  .service-gallery { grid-template-columns: 1fr; }
  .service-shot { aspect-ratio: 16 / 9; }
}