/* STUDIO SEM · tjänstesidan version 2 — ligger i services.html, bakom fliken
 * "Version 2". Ingen egen URL.
 *
 * Layouten är en strukturkopia av jadandco.com/services, band för band:
 *   1. ljust sidhuvud, wordmark vänster, ren nav höger
 *   2. hero: liten mono-etikett + en enda lång serif-mening
 *   3. numrerade tjänsteband, bild till vänster, titel i mitten, brödtext
 *      till höger, Enquire-knapp nere till höger. Banden växlar ljus/mörk.
 *   4. "The Difference" · två stycken utan bild
 *   5. jättesidfot med wordmarken som grafiskt element
 *
 * Färg, typografi och innehåll är vårt eget. Fyra medvetna avvikelser:
 *   · Jad & Co kör varmbrunt/salvia. Vi kör ink + paper + the accent ur
 *     brand-identity.md. Sidfotens dämpade band finns inte i vår palett, så
 *     --stone nedan är härledd ur --grey och kontrastprövad mot cream.
 *   · Förlagans mörka band är en scroll-driven wipe: kanten vandrar och
 *     skär rakt genom rubriken. Snyggt i rörelse, ser ut som en bugg i ett
 *     stillastående läge. Vi tar effektens resultat i stället för dess
 *     mekanik: banden växlar rent, och BILDEN dras upp över kanten så att
 *     varje rad ändå bryter igenom bandet ovanför.
 *   · Förlagan lägger en PDF-ikon vid varje rad som laddar ned deras
 *     prislista. Vi har ingen sådan PDF, och en ikon som inte gör något är
 *     värre än ingen ikon. Utelämnad tills materialet finns.
 *   · Inga em-dash någonstans i copyn (brand-identity.md, hårda regler).
 *     Förlagan använder dem flitigt; vi löser samma paus med komma och kolon.
 *
 * ── ALLT NEDAN ÄR SCOPEAT UNDER .v2 ──────────────────────────────────────
 * Båda versionerna ligger i samma dokument, så den här filen läses ovanpå
 * styles.css. Utan scope skulle de slåss om .wrap, .eyebrow, .media, .dark,
 * .actions, .wordmark och :root-variablerna --gutter och --maxw, som har
 * OLIKA värden i de två designerna. Därför:
 *   · variablerna sätts på .v2, aldrig på :root
 *   · det som i en fristående fil hade legat på body ligger på .v2
 *   · varje selektor bär .v2 först, vilket också lägger den över
 *     styles.css enklassregler utan en enda !important
 * Rörelse, egen markör, skip-länk och box-sizing ärvs från styles.css. De är
 * redan identiska, och två kopior av samma regel är en kopia för mycket.
 */

/* Anton, Cormorant Garamond och EB Garamond laddas redan av styles.css. Ingen andra @font-face här. */

.v2 {
  /* Paletten är densamma som version 1. Ändra i brand-identity.md först.
     Sidfotens dämpade band är det enda tillskottet: förlagan kör salvia, och
     vi har ingen grön. --stone är --grey nedmörkad tills cream på den ger
     5,0:1, alltså AA även för den lilla legal-raden. Ingen ny färgfamilj,
     bara ett djupare steg av en färg vi redan har. */
  /* --stone was a darkened grey for the muted footer band. tokens.css now carries
     --muted for the same job, measured at 5.2:1 on cream. */

  /* Rutnätet är bredare och luftigare än version 1 (104px / 1440px). */
  --gutter: 60px;
  --maxw: 1560px;

  background: var(--cream);
  color: var(--espresso);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
}

.v2 img { max-width: 100%; display: block; }

/* Version 1 håller varje <p> inom en läsbredd (--measure, 34rem). Här styrs
   radlängden av kolumnen stycket står i, precis som i förlagan, så måttet
   släpps. Utan den här raden kapas både eftertexten och sidfotsraderna på
   mitten av en regel som hör till den andra designen. */
.v2 p { max-width: none; }

.v2 .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Version 1 sätter ett litet the accent-streck framför varje eyebrow. Förlagan har
   inget sådant, och strecket skulle vara det enda som skvallrar om att de två
   versionerna delar stilmall. */
.v2 .eyebrow {
  font-family: var(--label);
  font-size: .73rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
  color: var(--muted);
}
.v2 .eyebrow::before { content: none; }

/* ---------- bildplatser ----------
   Basen (gradient, overflow, slot-etikett) ärvs från styles.css. Här ligger
   bara det som skiljer: bilden ska ligga absolut så att bandets aspect-ratio
   styr höjden i stället för bildens egna proportioner. */

.v2 .media img,
.v2 .media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Version 1 sveper undan en pappersfärgad gardin när en bildplats kommer in.
   Över ett mörkt band lyser den gardinen som en blixt, så där byter den färg. */
.v2 .svc.dark .media.reveal::before { background: var(--espresso); }

/* ---------- 1. sidhuvud ----------
   Förlagan lägger huvudet stilla överst utan bakgrund. Sticky är vårt tillägg:
   sidan är åtta band lång och navigationen ska aldrig vara mer än en blick
   bort. Bakgrunden är därför satt, annars läser den mot mörka band. */

/* Colour only. Structure is in nav.css, shared with the other two pages. */

/* Förlagans nav är ren grotesk i versal-gemen, inte mono-versaler som version
   1. Vi följer förlagan här: det är den blick som skiljer sidorna åt. */
/* Layout and spacing for this nav live in nav.css under .site-nav, so the three
   pages match. This rule used to set its own gap: 2.2rem, and because .v2 .jc-nav
   is two classes deep it beat .site-nav no matter which file loaded last. That is
   why the menu was tighter on the services page than on home and about. Noras
   reported it 2026-08-02. Only colour belongs here now. */
.v2 .jc-nav a {
  color: var(--espresso);
  text-decoration: none;
  text-underline-offset: 6px;
}
.v2 .jc-head { background: var(--cream); color: var(--espresso); }
.v2 .jc-head .wordmark { color: var(--espresso); }
.v2 .jc-head .site-nav a { color: var(--espresso); }
.v2 .jc-nav a:hover { text-decoration: underline; }
.v2 .jc-nav a[aria-current="page"] { text-decoration: underline; }

/* ---------- 2. hero ----------
   En enda mening, satt stort. Ingen bild, ingen knapp, ingen underrubrik:
   förlagan låter påståendet stå ensamt och det är hela poängen. */

.v2 .jc-hero { padding: 3rem 0 5.5rem; }   /* top cut, same reason as .v2-hero */

/* Bredden är satt så att meningen landar på två eller tre rader, som i
   förlagan. Smalare och den läser som ett stycke i stället för ett påstående. */
.v2 .jc-lede {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.75rem, 3.5vw, var(--h1-max));
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--espresso);
  /* Version 1 sätter alla h1 i versaler. Förlagans mening är versal-gemen och
     ska vara det: versaler gör den till en rubrik, och den ska läsa som en
     mening. */
  text-transform: none;
  max-width: 24em;
  margin: 0;
}
.v2 .jc-lede .accent { color: var(--accent); }

/* Etiketten över heron är förlagans enda dunkla punkt: satt i så låg kontrast
   att den knappt syns. Vår mono-grå på paper hamnade ännu lägre, så den här
   raden går i brödtextens färg i stället. */
.v2 .jc-hero .eyebrow { color: var(--espresso); }

/* ---------- 3. tjänstebanden ----------
   Rutnätet: bild ≈ en tredjedel till vänster, titel i mitten, brödtext till
   höger, allt inne i .wrap. Enquire-knappen ligger på egen rad längst ned,
   högerställd, precis som i förlagan. */

.v2 .svc {
  position: relative;
  padding: 3rem 0 3rem;
}
.v2 .svc-grid {
  display: grid;
  /* 33% was sized for a photograph. The tile block needs a little more room so a
     six letter word holds one line, and centre rather than start because the two
     columns are now similar heights: aligned to the top, a short tile block left
     a hole beside a tall text column. */
  grid-template-columns: 38% 1fr;
  column-gap: 4.5%;
  align-items: center;
}

/* Bilden dras upp över bandets överkant. Det är den detalj som gör förlagan:
   varje bild bryter igenom fältet ovanför i stället för att sitta snällt inne
   i sitt eget. z-index behövs för att den ska måla ovanpå bandet innan. */
.v2 .svc-figure {
  position: relative;
  z-index: 1;
  margin: 0;
}
.v2 .svc-figure .media { aspect-ratio: 6 / 5; }

/* Texten foljer bilden en bit upp. Bilden dras -3.4rem over bandets overkant
   men texten stod kvar vid kanten, och tillsammans med etikettens och
   brodtextens egna avstand hamnade forsta raden nastan 100px under bildens
   overkant. Det last som att de tva spalterna horde till olika band.

   -2rem och inte -3.4rem: texten ska folja med upp, inte ligga i linje. Det ar
   forskjutningen mellan spalterna som gor uppslaget, den ska bara vara mindre
   an den var. */
.v2 .svc-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 6%;
  align-content: start;
  margin-top: 0;
}
.v2 .svc-no {
  grid-column: 1 / -1;
  font-family: var(--label);
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--espresso);
  margin: 0 0 1.5rem;
}
.v2 .svc-title {
  grid-column: 1;
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0;
  /* Titeln ska bryta på två rader som i förlagan, inte breda ut sig. */
  max-width: 11em;
}
/* Brödtexten startar i höjd med titelns andra rad, inte vid dess överkant.
   Det är den lilla förskjutningen som gör att kolumnerna läser som ett
   uppslag och inte som en tabell. */
.v2 .svc-copy {
  grid-column: 2;
  padding-top: 1.2rem;
  max-width: 56ch;
}
.v2 .svc-copy p {
  font-size: .93rem;
  line-height: 1.62;
  margin: 0 0 1.3rem;
}
.v2 .svc-copy p:last-child { margin-bottom: 0; }

/* "Best if"-raderna som stod har togs bort 2026-08-01, samma dag de kom in.
   De gjorde varje band langre utan att saga nagot bandet inte redan sagt, och
   atta likadana etiketter i rad blev sin egen mall. */

.v2 .svc .actions {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 3.4rem;
}

/* Enquire. Förlagans knapp är en tunn rektangel i brödtypsnittet, inte vår
   vanliga mono-pill. Vi följer förlagan här; the accent kommer in på hover. */
.v2 .btn-enquire {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 15px 44px;
  font-family: var(--text);
  font-size: .9rem;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1;
  text-decoration: none;
  color: var(--espresso);
  background: transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.v2 .btn-enquire:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

/* Mörkt band. Klassen .dark plockas också upp av cursor.js, som vänder
   markören till cream över de här sektionerna. */
.v2 .svc.dark {
  background: var(--espresso);
  color: rgba(253, 249, 240,.84);
}
.v2 .svc.dark .svc-title { color: var(--cream); }
.v2 .svc.dark .svc-no { color: rgba(253, 249, 240,.72); }
.v2 .svc.dark .btn-enquire { color: var(--cream); }
.v2 .svc.dark .btn-enquire:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--espresso);
}

/* ---------- 4. The Difference ----------
   Förlagan bryter rytmen här: ingen bild, ingen siffra, ingen knapp. Bara en
   rubrik och två stycken som går nästan hela sidbredden.

   Förlagan sätter också en hårfin linje ovanför. Vårt sista band är mörkt, och
   en linje mot en mörk kant syns inte: bandets egen underkant gör jobbet. */

.v2 .difference { padding: 6rem 0 6.5rem; }
.v2 .difference h2 {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0 0 1.8rem;
}
/* Radlängden är avsiktligt lång, precis som i förlagan: stycket ska läsa som
   en eftertext till sidan, inte som ännu en tjänstekolumn. */
.v2 .difference p {
  font-size: .95rem;
  line-height: 1.7;
  margin: 0 0 1.6rem;
}
.v2 .difference p:last-child { margin-bottom: 0; }

/* Sidfoten bor nu i assets/footer.css, delad av alla sidor. Reglerna som
   lag har ar borttagna sa att de inte kan glida isar fran den. */

/* ---------- responsivt ----------
   Under 1180px faller texten i en spalt i stället för två, och under 860px
   staplas allt. Den upplyfta bilden nollställs samtidigt: en negativ marginal
   som var en effekt på bredden blir bara ett hack när banden ligger på rad. */

@media (max-width: 1180px) {
  .v2 { --gutter: 40px; }
  .v2 .svc-text { grid-template-columns: 1fr; }
  .v2 .svc-title { grid-column: 1; max-width: 14em; }
  .v2 .svc-copy {
    grid-column: 1;
    padding-top: 1.8rem;
    max-width: 70ch;
  }
}

@media (max-width: 860px) {
  .v2 { --gutter: 24px; font-size: 16px; }
  .v2 .jc-hero { padding: 4rem 0 3.5rem; }
  .v2 .jc-lede { max-width: none; }

  .v2 .svc { padding: 3rem 0 2.6rem; }
  .v2 .svc-grid { grid-template-columns: 1fr; row-gap: 2.2rem; }
  .v2 .svc-figure { margin-top: 0; }
  .v2 .svc-figure .media { aspect-ratio: 3 / 2; }
  .v2 .svc-no { margin-bottom: 1.4rem; }
  .v2 .svc .actions { justify-self: start; margin-top: 2.4rem; }

  .v2 .difference { padding: 4rem 0 4.5rem; margin-top: 2rem; }

}


/* ═══════════════════════════════════════════════════════════════════════
   VERSIONSVÄLJAREN — TILLFÄLLIG, SKA BORT NÄR NI VALT
   ═══════════════════════════════════════════════════════════════════════
   En flytande pill nere till höger som byter mellan de två versionerna i
   samma dokument. Den hör inte till någon av designerna: den är verktyget ni
   väljer med. När beslutet är taget raderas den här blocket, taggarna i
   services.html och den version som inte vann.

   Flytande och inte en flikrad överst av en anledning: båda versionerna har
   ett eget sticky sidhuvud, och en flikrad i sidflödet hade antingen knuffat
   ned dem eller lagt sig över dem. Nere i hörnet rör den ingenting. */




/* ═══════════════════════════════════════════════════════════════════════
   KEYCAPS — the nine bands, set as type instead of photographs
   ═══════════════════════════════════════════════════════════════════════

   Until 2026-08-25 every band carried an image. Four were 1080x1080 PNGs with
   a keycap word composited over a stock scene (a vintage office behind UGC, a
   payphone behind SEARCH) and the other five were placeholders that had never
   been shot. Noor kept the keycap idea and dropped everything under it.

   The word is now real text on flat tiles, standing on the band's own colour.
   Consequences worth knowing:

   - services.html loaded 4994 KB of images, the heaviest page on the site.
     It now loads none. The weight item on the roadmap is answered here.
   - The letters are text, so they scale to any viewport, stay sharp on retina
     and can be edited in the html. No rebuild, no export.
   - The stale alt texts went with the images. Three of the four PNGs described
     a scene that was not in them ("a ring light reflected in a glass bottle"
     on an image of the letters U G C).

   The keys invert with the ground, the same way the accent does elsewhere:
   espresso keys on the white bands, cream keys on the espresso ones. Both
   directions measure 16.35:1, so the word holds at any tile size. Checked with
   scripts/contrast.py. */

.v2 .keycaps {
  /* aspect-ratio: 6/5 until 2026-08-25. That box was inherited from the 1080x1080
     photograph the tiles replaced, so at 1512 it was 460x383 holding a single 82px
     row: 21% vertical fill, and the reason every band read as mostly empty.
     Measured in content/benchmarks/website-benchmark.md. A word set in tiles is
     as tall as the tiles are; the box now follows the content instead of a
     photograph that is no longer there. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.4rem, .9vw, .8rem);
  padding: 0;
}

.v2 .key {
  --key:     var(--espresso);
  --key-ink: var(--cream);
  display: grid;
  place-items: center;
  width: clamp(52px, 7vw, 108px);
  aspect-ratio: 1;
  border-radius: clamp(8px, 1vw, 16px);
  background: var(--key);
  color: var(--key-ink);
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.2vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.v2 .svc.dark .key {
  --key:     var(--cream);
  --key-ink: var(--espresso);
}

/* The quirk. A five step cycle rather than three, because a three step tilt
   reads as a pattern the moment a word is six letters long, and half of these
   words are. Nothing here animates: it is a fixed nudge, so a long word still
   sits on a readable line. */
.v2 .key:nth-child(5n+1) { transform: translateY(-.5rem)  rotate(-3.5deg); }
.v2 .key:nth-child(5n+2) { transform: translateY(.42rem)  rotate(2deg); }
.v2 .key:nth-child(5n+3) { transform: translateY(-.22rem) rotate(4deg); }
.v2 .key:nth-child(5n+4) { transform: translateY(.55rem)  rotate(-1.5deg); }
.v2 .key:nth-child(5n+5) { transform: translateY(-.34rem) rotate(2.8deg); }

/* Mirrors the existing 860px step, which flattens .svc-grid to one column and
   re-proportions the figure. This block sits after that media query in the
   file, so it has to restate the change rather than rely on it. */
@media (max-width: 860px) {
  .v2 .keycaps { padding: 0; justify-content: flex-start; }
  .v2 .key { width: clamp(46px, 13vw, 82px); font-size: clamp(1.4rem, 5.2vw, 2.6rem); }
}


/* ---------- hierarchy: one display heading, nine subordinate titles ----------
   brand-identity.md: "Display | Impact | Caps. Headings, covers, section titles.
   **Once per page**". This page used the display face nine times and had no h1
   at all, so nothing on it was more important than anything else. That is what
   made it read as a list rather than a page, and no amount of tile-sizing was
   going to fix it.

   The h1 in .jc-hero is now the page's one display moment. The nine band titles
   step down to Cormorant Garamond, which is the book's Detail face, set in caps
   with tracking. It is a real level rather than a smaller version of the same
   thing: the eye reads face and case before it reads size, so a different face
   subordinates more cleanly than a smaller Anton ever would.

   The keycaps carry the weight in each band now, which is what they are for. */
.v2 .svc-title {
  font-family: var(--detail);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* The line under the page heading. Body face, so it reads as something to read
   rather than as a second heading competing with the first. */
.v2 .jc-sub {
  font-family: var(--text);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
  margin: 1.4rem 0 0;
}