/* STUDIO SEM · index-v2.html — hemsida version 2 (A/B-test)
 *
 * Layouten är en strukturkopia av villagemarketing.com, sektion för sektion:
 *   1. mörkt sidhuvud
 *   2. mörk hero: jätterubrik + lutande bildkollage
 *   3. full-bleed foto med centrerad rubrik + karusell
 *   4. ljust tjänsteregister
 *   5. full-bleed foto: OUR WORK → jätterubrik → länk vidare
 *   6. kollagerutnät av klipp
 *   7. kontakt: foto till vänster, formulär med flikar till höger
 *   8. mörk sidfot
 *
 * Allt innehåll och all färg är vårt eget. Tre medvetna avvikelser från
 * förlagan, alla motiverade av brand-identity.md:
 *   · Village runs yellow as its accent. We run air, the blue in the brand book.
 *     We had red here, and before that berry. Both are retired.
 *   · Village kör fet kondenserad grotesk i rubrikerna. Vår display-typ är
 *     Anton, så genomslaget kommer från storlek och en fyllig grotesk
 *     var tidigare satta i the old serif och är omtrimmade för Anton bredare figur.
 *   · Village har en vägg av kundlogotyper. Vi får aldrig namnge kunder
 *     (brand-identity.md, hårda regler), så samma yta bär i stället de
 *     plattformar vi faktiskt arbetar i. Sant, och gör samma visuella jobb.
 *
 * Fristående med flit: den här filen importerar inte styles.css, så v2 kan
 * ändras eller slängas utan att röra den sida som ligger live.
 */

/* Typsnitten är självhostade, aldrig Google Fonts. Skälet står i website/README.md:
   inbäddade Google Fonts skickar besökarens IP till Google. Filerna ligger under
   OFL i assets/fonts/ tillsammans med licensen. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--espresso);
  color: var(--espresso);
  font-family: var(--text);
  /* EB Garamond. Decket satter brodtexten i 300, och 300 ar en
     annan sak an 400 i EB Garamond: den ar markbart luftigare. */
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* ---------- gemensamma typkomponenter ---------- */

/* Jätterubriken. Nu i Anton, alltså samma H1 som i Canva-decket, så
   genomslaget kommer från fetma och skala tillsammans. Line-height under 1 är
   fortfarande poängen: fyra rader versaler ska läsa som ett block.

   Graden är NEDTRIMMAD från 9,2vw/8,4rem. Anton versaler är runt en fjärdedel
   bredare än the old serif vid samma grad, och med det gamla värdet växte rubriken ut
   under telefonkollaget. Spärrningen är också lättad från -.028em: the old serif tål tät
   kerning, Anton geometriska rundlar börjar krocka. */
.mega {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  text-transform: uppercase;
  font-size: clamp(2.3rem, 7.3vw, var(--h1-max));
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
}
.mega .accent { color: var(--accent); }

/* Cormorant Garamond har ersatt Courier har. Den ar en hartunn teckning, sa samma grad
   som forut blev nastan osynlig i .63rem. Graden ar darfor uppdragen ett
   steg: samma etikett, samma sparrning, bara lasbar. */
.eyebrow {
  font-family: var(--label);
  font-size: .73rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  color: var(--muted);
}

.lede {
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
}

/* ---------- bildplatser ----------
   Samma princip som på version 1: en slot ska se avsiktlig ut även innan
   fotot finns, så att sidan aldrig visar ett hål. Se assets/img/BILDER.md. */

.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #D9D1C2 0%, #C6BCA9 48%, #B9AE99 100%);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 70% 28%, rgba(78,147,184,.22), transparent 58%),
    radial-gradient(circle at 22% 78%, rgba(0,0,0,.2), transparent 62%);
}
.media img,
.media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media .slot-label {
  position: relative;
  font-family: var(--label);
  font-size: .58rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(0,0,0,.5);
  padding: 12px 14px;
}

/* Platshållarbild på plats. Bilderna i assets/img/placeholder/ är suddade
   utsnitt ur VÅRA EGNA bilder i assets/img/, nedskalade till 420px. De finns
   bara för att sidan ska gå att bedöma som layout innan de riktiga klippen
   finns. Etiketten är därför inte dekor utan en påminnelse, och den ska bort i
   samma svep som bilderna byts. Se assets/img/BILDER.md.

   Genereras om med scripts/placeholders.py. Ta aldrig platshållare ur en
   skärmdump av någon annans sajt: det som ligger i mappen hamnar publikt vid
   deploy. */
.media.tmp .slot-label {
  color: var(--cream);
  background: rgba(0,0,0,.55);
  border-radius: 999px;
  margin: 12px;
  padding: 6px 11px;
}

/* ---------- knappar ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  border: 1px solid var(--accent);
  transition: background .25s ease, color .25s ease;
}
/* --accent-hover, not --accent: the hover state drops the fill, so the label is now
   small accent-coloured text on the section colour. Air on cream is only 3.2:1, which
   fails for text this size; --accent-hover is the darkened step that passes. */
.btn:hover { background: transparent; color: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(253, 249, 240,.35);
}
.btn-ghost:hover { background: var(--cream); color: var(--espresso); border-color: var(--cream); }

/* ---------- 1. sidhuvud ----------
   Village lägger huvudet ovanpå heron utan egen bakgrund. Sticky är vårt
   tillägg: sidan är lång, och CTA:n ska aldrig vara mer än en blick bort. */


/* Colour only. Structure is in nav.css, shared with the other two pages.
   Home and about are cream on espresso; services is espresso on cream. Briefly all
   three were white on 2026-08-05, reverted the same day. */
/* The header's DEFAULT is cream on espresso. The wordmark and the links inherit it
   rather than restating it, which is what lets a surface class change the header
   without a second edit: .surface-white sets colour on the header at (0,2,0) and
   the children follow. Naming the colour again on each child at (0,2,1) beat the
   surface class, so switching the header to white left cream links on white. */
.v2-head { background: var(--espresso); color: var(--cream); }
.v2-head .wordmark { color: inherit; }
.v2-head .site-nav a { color: inherit; }

@media (max-width: 700px) {
  /* Nav spacing is shared, see .site-nav in nav.css. Removed 2026-08-02. */
}

/* ---------- 2. hero ----------
   Delad hero: text till vanster, en bild till hoger.

   Ersatte telefonkollaget 2026-07-29. Kollaget var tre absolutpositionerade
   plattor som drev fram och tillbaka ovanpa rubriken. Det kostade tre saker:
   rubriken maste klamma sig in pa elva tecken for att inte hamna under
   plattorna, plattorna gick inte att peka pa (pointer-events: none), och de
   behovde ett eget installningsverktyg (?tweak) for att alls ga att placera.
   En bild bredvid texten gor samma jobb utan nagon av dem. */

.v2-hero {
  background: var(--espresso);
  color: var(--cream);
  /* Top padding cut from 76px, Noras 2026-08-05: the masthead already ends in
     air, so a further 76px left a visible hole between the nav and the H1. */
  padding: 28px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero-cols {
  display: grid;
  /* Texten far den storre halvan. En jamn delning gor att rubriken bryter pa
     fel stallen och att bilden blir storre an det den faktiskt visar. */
  /* Was 1.06/.94 with a gap up to 5.5rem. Noor asked for a heavier first
     impression, so both columns grew: the gap gives back the width instead of
     one column taking it off the other. The text still holds the larger share,
     which is the point of Noras's original split. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 3.4vw, 3.6rem);
  /* start, not center, Noras 2026-08-05. Centred, the text column floated halfway
     down a tall image and left a hole under the masthead; the headline should start
     where the image starts.

     stretch, not start, 2026-08-25. Noor asked for the text to fill the same
     vertical space as the image. stretch keeps her rule intact rather than
     undoing it: the headline still begins level with the top of the image,
     because .hero-copy distributes from the top. It is centring that caused the
     hole, and this is not centring. */
  align-items: stretch;
}

/* Markoren ovanfor rubriken. Village har sitt v-marke har; vi har en ensam rod
   prick. Den satt tidigare i wordmarken som the accent-punkt; den nya logotypen ar
   skrivet skript utan punkt, sa pricken lever bara kvar har. Ingen ritad ikon,
   enligt brand-identity.md. */
.hero-mark {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 0 34px;
}

/* Rak text, inte jatteversaler. Rubriken star i versalgemen och i samma grad
   som en vanlig h1: bredvid en bild behover den inte skrika for att bara
   sidan, och den slipper brytas pa elva tecken. .mega finns kvar for banden
   langre ned, dar rubriken star ensam over ett foto. */
/* Versaler och stort. Stod ett tag i versalgemen, men bredvid en bild behover
   rubriken bara halva sidan sjalv, och versaler i Anton gor det utan
   att bli reklamiga.

   Radhojden gar ned till .98 och spärrningen till -.02em nar den ar versal:
   versaler har inga underhang, sa samma radavstand som i versalgemen lamnar ett
   glapp mellan raderna. Bredden ar 13ch i stallet for 18: versaler ar bredare,
   och utan den skulle raderna bli for langa mot bilden. */
.hero-title {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(2.9rem, 7.7vw, 7.4rem);
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  max-width: 17ch;
}

.v2-hero .lede {
  margin: 30px 0 0;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  color: rgba(253, 249, 240,.72);
  max-width: 62ch;
  font-size: 1rem;
}

.v2-hero .actions {
  margin-top: 34px;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

/* Bilden. Star staende, som klippen den visar. */
/* The text column starts into the upper third of the image, not level with its top
   edge and not floating at its centre. Both extremes were tried on 2026-08-05:
   centred left a hole under the masthead, flush-top read as cramped against the nav.
   A fraction of the viewport width, so it scales with the image beside it. */
/* The copy column is a flex column so its three blocks spread across the full
   height of the image beside it: headline at the top, buttons at the bottom,
   lede between. Without this the text ended around two thirds of the way down
   and the band read as one tall picture with a caption next to it. */
.hero-cols > .hero-copy,
.hero-cols > div:first-child {
  padding-top: clamp(.5rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}

.hero-figure { position: relative; }
.hero-figure .media {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  width: 100%;
}
.hero-figure .media img,
.hero-figure .media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .hero-cols { grid-template-columns: 1fr; gap: 2.4rem; }
  /* Bilden under texten, aldrig over: pa en telefon ska rubriken mota
     besokaren forst. */
  .hero-figure { order: 2; }
  .hero-title { max-width: none; }
  .hero-figure .media { aspect-ratio: 3 / 2; }
}

/* ---------- 3. bildband med karusell ----------
   Full-bleed foto, centrerad rubrik i vitt, underrad, och en rad som byts med
   pilar. Village visar partnerbadges där. Vi hittar inte på badges vi inte
   har: raden bär i stället tre sanna påståenden om hur vi arbetar. */

.v2-banner {
  position: relative;
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 96px var(--gutter);
  color: #fff;
  overflow: hidden;
  background: var(--espresso);
}
.v2-banner .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.v2-banner .bg img,
.v2-banner .bg video { width: 100%; height: 100%; object-fit: cover; }
/* Utan mörkläggning blir vit text på foto oläsbar så fort motivet är ljust.
   Våra egna bilder ÄR ljusa (papper, cream, hud), till skillnad från förlagans
   mörka gatufoto, så scrimen måste vara betydligt tyngre än hos dem. Testad mot
   services-band.jpg, som är sidans ljusaste motiv. */
.v2-banner .bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.74) 45%, rgba(0,0,0,.66) 100%);
}
.v2-banner .inner { position: relative; z-index: 1; width: 100%; max-width: 1100px; }
.v2-banner .mega { color: #fff; }
.v2-banner .lede { margin: 30px auto 0; color: rgba(255,255,255,.9); max-width: 76ch; }

/* Karusellraden. Pilarna är the accent-cirklar där Village har gula. */
.carousel {
  margin-top: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
.car-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.car-btn:hover { transform: scale(1.08); background: var(--accent-hover); }

.car-window { flex: 1; max-width: 620px; min-height: 116px; position: relative; }
/* Etiketten ligger ÖVER texten, inte bredvid den. Sida vid sida blev de två
   fristående fragment som svävade mitt på ett foto, och eftersom texten bryter
   på två rader hamnade pillret dessutom i höjd med ingenting. Staplat och
   centrerat läser de som en enhet, vilket är vad de är. */
.car-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
}
.car-slide[data-on] { opacity: 1; visibility: visible; }
.car-slide .tag {
  font-family: var(--label);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  padding: .5rem .9rem;
  white-space: nowrap;
}
.car-slide p {
  margin: 0;
  font-size: .92rem;
  color: rgba(255,255,255,.9);
  text-align: center;
  max-width: 59ch;
}
@media (max-width: 700px) {
  .car-window { min-height: 140px; }
  .carousel { gap: 1rem; }
}

/* ---------- 4. work- och servicebandet ----------
   Uppslaget följer förlagan rakt av: vänsterställt på foto, liten etikett,
   jätterubrik, ordet SERVICES i accentfärg, och tjänsteraden längs
   underkanten.

   Låg ett tag som två band, ett vitt tjänsteregister och ett mörkt work-band.
   Två band för en sak tog en halv skärm extra och sa inget mer, så de är
   slagna ihop igen. Ett band, som i förlagan.

   Kolumn och inte rad: rubrikblocket ligger överst, raden längst ned, och
   justify-content: flex-end trycker paret mot underkanten oavsett hur högt
   bandet blir. */

.v2-services {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 108px 0 0;
  overflow: hidden;
  background: var(--cream);
}
/* Rubrik till vanster, dragspel till hoger, som i forlagan. */
.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 7%;
  align-items: start;
}
/* width: 100% pa varje .wrap som ar direkt flex-barn. .wrap bar margin: 0 auto,
   och en flex-item med auto-marginal i tvarriktningen strackes inte ut: den
   krymper till sitt innehall och centreras. Utan raden hamnar SERVICES mitt i
   bandet i stallet for vid vanstermarginalen. */
.v2-services > .wrap { width: 100%; }

/* ---------- dragspelet ---------- */

.acc details {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0;
}
.acc details:last-of-type { border-bottom: 1px solid var(--line); }

.acc summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1.2;
  color: var(--espresso);
  /* Forlagan har versal-gemen har, inte versaler. */
  text-transform: none;
}
/* Safari ritar en egen triangel som inte gar att na med list-style. */
.acc summary::-webkit-details-marker { display: none; }

/* Plus som blir minus. Tva streck: det lodrata doljs nar raden ar oppen. */
.acc summary::after {
  content: '';
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: .3em;
  background:
    linear-gradient(var(--espresso), var(--espresso)) center/17px 1px no-repeat,
    linear-gradient(var(--espresso), var(--espresso)) center/1px 17px no-repeat;
  transition: transform .25s ease;
}
.acc details[open] summary::after {
  background: linear-gradient(var(--espresso), var(--espresso)) center/17px 1px no-repeat;
  transform: rotate(180deg);
}
.acc summary:hover { color: var(--accent); }

.acc details p {
  margin: .9rem 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--espresso);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .acc-grid { grid-template-columns: 1fr; row-gap: 2.4rem; }
}
.v2-services .eyebrow { color: var(--muted); }
/* Ett steg under heron. Förlagan sätter rubriken i ungefär 7vw. Vår Anton
   ligger närmare deras kondenserade grotesk än the old serif gjorde, men är bredare, så
   graden hålls nere. */
/* Mindre an tidigare: rubriken delar nu rad med dragspelet i stallet for att
   sta ensam over ett foto, och 6vw i en halv spalt blev fem rader versaler. */
.v2-services .mega {
  color: var(--espresso);
  max-width: 16ch;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
}
/* Ett ord i rott, nagot storre an resten. Ett ord och inte fler: accenten ar
   en viskning (brand-identity.md), och tva betonade ord betonar ingenting.
   Rott mot cream ar 3,8:1, alltsa bara giltigt i den har graden och uppat. */
.v2-services .mega .accent {
  color: var(--accent);
  font-size: 1.18em;
}

/* ---------- tjänsteraden ----------
   EN rad som driver åt vänster, aldrig radbrytning. Nio piller på en rad är
   bredare än vilken skärm som helst, och en rad som rör sig säger att den
   fortsätter i stället för att se avhuggen ut.

   text-align: left nollställer eventuell centrering: spåret är inline-flex och
   skulle annars starta mitt i ytan i stället för vid vänsterkanten. */

.svc-rail {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: left;
  margin-top: 44px;
  padding-bottom: 34px;
}
.svc-rail-track {
  display: inline-flex;
  animation: svc-rail-slide 46s linear infinite;
  will-change: transform;
}
/* Pausar under pekaren. Pillren är länkar, och en länk som glider undan medan
   man siktar på den är en länk man klickar fel på. */
.svc-rail:hover .svc-rail-track { animation-play-state: paused; }

.svc-rail-set {
  display: flex;
  gap: .7rem;
  padding-right: .7rem;
}
.svc-rail a {
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--espresso);
  /* Kontur i stallet for fylld: cream-pillren var gjorda for ett foto att sta
     emot. Mot paper hade de nastan forsvunnit. */
  background: transparent;
  border: 1px solid var(--line);
  text-decoration: none;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.svc-rail a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

@keyframes svc-rail-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Utan rörelse blir raden en vanlig rad som får skrollas för hand. */
@media (prefers-reduced-motion: reduce) {
  .svc-rail-track { animation: none; }
  .svc-rail { overflow-x: auto; }
}

/* ---------- 6. kollagerutnät ----------
   Village staplar klipp i fyra kolumner med olika höjd och tomma luckor.
   grid-auto-flow: dense låter korta plattor fylla hål som höga lämnat efter
   sig, vilket är det som gör rutnätet oregelbundet utan att bli trasigt. */

/* Ink och inte vitt: mellanrummen i rutnätet blir då samma färg som bandet
   ovanför, och rubriken och klippen läser som ett stycke sida i stället för
   som två sektioner som råkat hamna intill varandra. */
.v2-collage {
  background: var(--espresso);
  padding: 0;
}
.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 15vw;
  gap: 14px;
  padding: 14px;
}
.collage .media { border-radius: 2px; }
.collage .t-tall { grid-row: span 2; }
.collage .t-wide { grid-column: span 2; }
.collage .t-big  { grid-row: span 2; grid-column: span 2; }
@media (max-width: 900px) {
  .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 32vw; }
  .collage .t-big { grid-column: span 2; }
}

/* ---------- 7. värderingarna ----------
   Flyttad hit fran about.css 2026-08-01. Samma uppslag som work-bandet: rubrik
   till vanster, dragspel till hoger. Dragspelet ateranvander .acc ovanfor, sa
   det enda som behovs har ar bandet, rubriken och ringen.

   Ljus yta mellan det morka kollaget och kontaktbandet. Kollaget slutar i ink,
   sa oversidan behover ingen linje; undersidan far sin av .v2-contact, som bar
   border-top. */

.values {
  background: var(--white);
  color: var(--espresso);
  padding: 6.5rem 0 7rem;
}
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 7%;
  align-items: start;
}

/* Flipped: the list on the left, the heading on the right. Noras 2026-08-05.
   Source order is unchanged, so the heading is still read first by a screen reader
   and is still first on mobile, where the grid collapses to one column.

   grid-row: 1 on BOTH is required, not tidiness. Placing the heading into column 2
   advances the auto-placement cursor past column 1, so the list no longer fits on
   row 1 and drops to row 2, sitting under the heading with the height of the
   heading as blank space above it. That exact bug cost a round on the clinics
   page; do not remove either grid-row. */
.values-flip .values-grid > *:first-child { grid-column: 2; grid-row: 1; }
.values-flip .values-grid > .acc { grid-column: 1; grid-row: 1; }
.values h2 {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.8rem, 3.4vw, var(--h2-max));
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0;
}

/* Ringen runt ett ord. Forlagan ritar den for hand i accentfargen; en ellips i
   bakgrunden gor samma sak, foljer ordet nar raden bryter och behover ingen
   bild. Ett ord, aldrig fler: the accent ar en viskning (brand-identity.md). */
.values .circled {
  position: relative;
  display: inline-block;
  padding: 0 .18em;
}
.values .circled::after {
  content: '';
  position: absolute;
  inset: -18% -6%;
  border: 2px solid var(--accent-hover);
  border-radius: 50%;
  transform: rotate(-3deg);
  pointer-events: none;
}

/* Systermeningen under rubriken. Smal spalt: den ska läsas som en anteckning
   vid sidan av löftena, inte som ännu ett påstående i samma grad som dem. */
.values-note {
  margin: 1.6rem 0 0;
  max-width: 46ch;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--espresso);
}

@media (max-width: 900px) {
  .values { padding: 4rem 0 4.5rem; }
  .values-grid { grid-template-columns: 1fr; row-gap: 2.4rem; }
}

/* ---------- 8. nästa steg ----------
   Tre steg mellan löftena och formuläret. Samma cream som banden omkring, så
   det här läser som upptakten till kontakten och inte som en egen sektion. En
   hårfin linje uppåt är hela avgränsningen som behövs.

   Siffrorna kommer ur en CSS-räknare och inte ur markupen. De kan då aldrig
   hamna ur synk med raderna om ett steg läggs till eller tas bort, och en
   skärmläsare läser <ol> som en ordnad lista ändå. */

.next-steps {
  background: var(--white);
  color: var(--espresso);
  padding: 4.5rem 0 5rem;
  border-top: 1px solid var(--line);
}
.next-steps h2 {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: .4rem 0 2.8rem;
}
.next-steps .eyebrow { color: var(--muted); }

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 6%;
}
.steps li {
  counter-increment: step;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
/* Siffran ar grafik och inte brodtext, darfor far den vara rod: 3,8:1 mot cream
   racker for grafiska element (3:1) och for stor text. Den ligger i 1,35rem av
   just det skalet. I .7rem, som den forst satt i, var den bade oläslig och
   under kontrastgransen. */
.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: .7rem;
}
.steps h3 {
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.25;
  color: var(--espresso);
  margin: 0 0 .5rem;
  text-transform: none;
}
.steps p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--espresso);
  max-width: 43ch;
}

@media (max-width: 900px) {
  .next-steps { padding: 3.2rem 0 3.6rem; }
  .steps { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- 9. kontakt ----------
   Ljust, tyst och luftigt. Sektionen lag tidigare som ett suddat foto med en
   mork tonig over och formularet ovanpa. Motivet gjorde ingen nytta bakom ett
   formular: det gick inte att se, och det tvingade fram en tung sloja for att
   texten alls skulle ga att lasa. En ren yta ar bade lugnare och lattare att
   fylla i.

   Cream och inte svart, trots att bade heron och sidfoten ar morka. Sektionen
   ligger mellan tva morka band och behover vara andrummet, inte ett tredje
   mork yta i rad. */

.v2-contact {
  background: var(--cream);
  color: var(--espresso);
  padding: clamp(72px, 9vw, 132px) 0 clamp(80px, 10vw, 150px);
  border-top: 1px solid var(--line);
}

.contact-grid {
  display: grid;
  /* Introt ar smalare an formularet: det ar en ingang, inte en spalt att lasa
     lange i. */
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}

.contact-title {
  font-family: var(--display);
  font-weight: var(--h1-weight);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  text-transform: uppercase;
  color: var(--espresso);
  margin: 0 0 1.1rem;
  max-width: 12ch;
}

.contact-lede {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 51ch;
  margin: 0;
}

/* Kontaktvagarna som en liten definitionslista. Alla vill inte fylla i ett
   formular, och den som hellre mejlar ska slippa leta efter adressen. */
.contact-direct {
  margin: 2.6rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem 1.6rem;
  align-items: baseline;
  font-size: .92rem;
}
.contact-direct dt {
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-direct dd { margin: 0; }
.contact-direct a {
  color: var(--espresso);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.contact-direct a:hover { border-bottom-color: var(--espresso); }

/* Flikarna ar text med en linje under den aktiva, inte piller. Tre piller
   overst i ett formular tar mer uppmarksamhet an valet forjanar. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin: 0 0 2.6rem;
  border-bottom: 1px solid var(--line);
}
.tab {
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: 0 0 .9rem;
  border: 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.tab:hover { color: var(--espresso); }
.tab[aria-selected="true"] { color: var(--espresso); border-bottom-color: var(--accent); }

.tab-note {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--espresso);
  margin: 0 0 2.4rem;
  max-width: 62ch;
}

.v2-form { display: grid; gap: 1.9rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.9rem; }

/* Understrukna falt, inte inramade. Rutor ger en vagg av kanter; en linje
   racker for att saga skriv har, och halller sektionen tyst. */
.v2-form input,
.v2-form textarea {
  width: 100%;
  font-family: var(--text);
  font-size: 1rem;
  color: var(--espresso);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .5rem 0;
  transition: border-color .2s ease;
}
.v2-form textarea { min-height: 96px; resize: vertical; }

/* Gemener i brodtextens grad. Sparrade sma versaler i ett falt laser som en
   rubrik och gor det svarare att se vad man sjalv skrivit. */
.v2-form input::placeholder,
.v2-form textarea::placeholder {
  color: var(--muted);
  font-family: var(--text);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
.v2-form input:focus,
.v2-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--espresso);
}

/* Svart och inte rod knapp. Cream mot rott ar 3,8:1, och knapptexten ar 11px
   sparrad versal, alltsa langt under 4,5:1 som kravs i den graden. Svart ger
   21:1 och laser dessutom lugnare i en ljus sektion. Rott finns kvar som
   accent pa den aktiva fliken, dar det ar en linje och inte text. */
.v2-form button[type="submit"] {
  justify-self: start;
  margin-top: .4rem;
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--espresso);
  color: var(--cream);
  border: 1px solid var(--espresso);
  border-radius: 999px;
  padding: 1.05rem 2.6rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.v2-form button[type="submit"]:hover { background: transparent; color: var(--espresso); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .contact-title { max-width: none; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- 10. sidfot ---------- */

.v2-foot {
  background: var(--espresso);
  color: rgba(253, 249, 240,.65);
  padding: 54px 0 40px;
  border-top: 1px solid rgba(253, 249, 240,.12);
}
.v2-foot .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.v2-foot .wordmark {
  font-family: var(--wide);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--cream);
  text-decoration: none;
}
.foot-links {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.foot-links a { color: rgba(253, 249, 240,.7); text-decoration: none; }
.foot-links a:hover { color: var(--cream); }
.foot-legal { font-family: var(--label); font-size: .62rem; letter-spacing: .1em; margin: 0; }

/* ---------- rörelse ----------
   Identisk med version 1: klassen .reveal sätts av assets/reveal.js först när
   JS kör, så utan JS syns allt direkt. */

/* Langre och mjukare an forut: 18px pa .7s las som att nagot snappade pa
   plats. 34px pa 1.05s med en kurva som bromsar sent las som att sidan andas.
   Det ar hela skillnaden mot referensen, som inte kapar scrollen alls utan bara
   later saker stiga in langsamt. */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.05s cubic-bezier(.16,.8,.28,1),
              transform 1.05s cubic-bezier(.16,.8,.28,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Riktningar. Sätts med data-reveal i markupen, som referensens revealFromTop
   och revealFromRight. Utan attribut stiger elementet underifran som forut. */
.reveal[data-reveal="right"] { transform: translateX(46px); }
.reveal[data-reveal="left"]  { transform: translateX(-46px); }
.reveal[data-reveal="top"]   { transform: translateY(-30px); }
.reveal[data-reveal="scale"] { transform: scale(.94); }
.reveal[data-reveal].is-in   { transform: none; }

/* Barn efter varandra i stallet for allt pa en gang. Steget ar litet med flit:
   over ungefar 90ms borjar det kannas som att sidan laddar segt. */
.reveal-seq > *      { transition-delay: 0ms; }
.reveal-seq > *:nth-child(2) { transition-delay: 70ms; }
.reveal-seq > *:nth-child(3) { transition-delay: 140ms; }
.reveal-seq > *:nth-child(4) { transition-delay: 210ms; }
.reveal-seq > *:nth-child(5) { transition-delay: 280ms; }
.reveal-seq > *:nth-child(n+6) { transition-delay: 350ms; }

/* Parallax. Elementet flyttas av assets/reveal.js via --par, som ar rena
   pixlar. Egen variabel och inte transform direkt, sa att .reveal och parallax
   kan sitta pa samma element utan att skriva over varandra. */
[data-parallax] { will-change: transform; }
[data-parallax] > img,
[data-parallax] > video {
  transform: translate3d(0, var(--par, 0px), 0) scale(1.12);
  transition: none;
}
.media.reveal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- tillgänglighet ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Etiketter till formulärfälten. Fälten visar sin ledtext i placeholder precis
   som i förlagan, men en placeholder är inte en etikett: den försvinner när
   någon börjar skriva och en del skärmläsare läser den inte alls. Etiketterna
   finns därför på riktigt, bara inte synligt. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- varumärkesbandet ---------- */
/* Bandet ligger sist före sidfoten och bär bara filmen. Inget innehåll ovanpå,
   se markupen i index.html.

   aspect-ratio och inte fast höjd: filmen är klippt i 1920x732, och en fast
   höjd hade tvingat object-fit att beskära om den på smala skärmar. Med
   kvoten behåller bandet klippbeskärningen hela vägen ned.

   line-height: 0 på sektionen tar bort raden med tomrum som annars uppstår
   under ett video-element, eftersom video är inline och sitter på baslinjen. */
.v2-brandband {
  background: var(--white);
  line-height: 0;
}
.v2-brandband video {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 732;
  object-fit: cover;
}

/* Femton sekunder oavbruten rörelse är precis vad inställningen finns för.
   Affischbilden bär motivet vidare, så bandet försvinner inte. */
@media (prefers-reduced-motion: reduce) {
  .v2-brandband video { display: none; }
  .v2-brandband {
    aspect-ratio: 1920 / 732;
    background: var(--white) url('img/brand-banner.jpg') center / cover no-repeat;
  }
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--cream); color: var(--espresso);
  padding: .7rem 1.1rem; text-decoration: none;
}

@media (max-width: 700px) {
  :root { --gutter: 22px; }
  .v2-banner, .v2-services { min-height: 76vh; }
}


/* ---------- the breaker ----------
   Edge to edge and short on purpose. The band between "how the work runs" and
   "where the ideas come from" is a pause, not a chapter: at a screen tall it
   read as a section in its own right while carrying no information, which is
   what Noor caught. Roughly a third of the viewport is enough to change the
   subject without asking the reader to stop.

   It escapes .wrap with 100vw rather than by living outside the section, so the
   surrounding bands keep the page's 60px measure and only this one breaks it.
   The negative margin is half the difference between the viewport and the
   element's own width, which is what centres a full-bleed child inside a
   constrained parent without horizontal scroll. */
.breaker {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(260px, 34vh, 420px);
}

.section-break {
  border: 0;
  height: 1px;
  background: var(--line);
  max-width: var(--maxw);
  margin: clamp(3rem, 7vw, 6rem) auto 0;
}


/* ---------- the pointer answer ----------
   Lifted from .lp-batch in lp.css, where Noor liked it on the clinic page, and
   applied to the two pictures the home page has left. Same numbers on purpose:
   one gesture that behaves identically wherever it appears is a system, two
   that differ by a tenth of a second is a bug nobody can name.

   It is affordable. transform is composited on the GPU, so it neither reflows
   the page nor repaints anything around it, and there is no JavaScript behind
   it. .media already sets overflow: hidden, which is what keeps the scaled
   image inside its frame.

   The reduced-motion guard is not optional. Some people get motion sick from
   exactly this, and the site's other movement is already behind the same query. */
@media (prefers-reduced-motion: no-preference) {
  .v2-hero .media img,
  .v2-collage .solo img { transition: transform .5s ease; }
  .v2-hero .media:hover img,
  .v2-collage .solo:hover img { transform: scale(1.05); }
}


/* ---------- the hero picture matches the text ----------
   Noor asked for the text to fill the same vertical space as the image. The
   column was already stretching, but .hero-figure .media carried an inline
   aspect-ratio: 1.31/1, and a fixed ratio pins the height however tall the
   column grows. So the text ran past the picture by nearly 200px at 1440.

   The ratio is gone from the markup and the frame now takes its height from
   the row instead. The two columns end level, whatever the headline wraps to.
   Below 861px the grid is a single column and the 3/2 rule in the breakpoint
   still governs, which is why this is scoped rather than global. */
@media (min-width: 861px) {
  .hero-figure { display: flex; }
  .hero-figure .media { flex: 1 1 auto; min-height: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   HERO — one picture, the words laid into it
   ═══════════════════════════════════════════════════════════════════════
   Two columns until 2026-08-25. Noor wanted the founders to carry the first
   view and the type to sit inside the frame rather than beside it.

   The scrim earns its place. Cream type straight onto this photograph fails
   wherever the plywood blows out, and that is most of the top right. Two
   gradients rather than one: a bottom ramp that carries the block, and a left
   wedge so the first words of each line never land on a bright patch. Under the
   deepest stop the ground is effectively espresso, where cream measures 16.35:1.
   That is what makes the text safe on ANY frame dropped into this slot, which a
   hand-tuned overlay for one photograph would not be. */
.hero-frame {
  position: relative;
  isolation: isolate;
  border-radius: 2px;
  overflow: hidden;
}
.hero-frame .media {
  height: clamp(540px, 80vh, 840px);
  background: var(--espresso);
}
.hero-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top,  rgba(37,24,24,.80) 0%, rgba(37,24,24,.68) 30%, rgba(37,24,24,.24) 58%, rgba(37,24,24,0) 80%),
    linear-gradient(to right, rgba(37,24,24,.58) 0%, rgba(37,24,24,.12) 48%, rgba(37,24,24,0) 70%);
}
.hero-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding: clamp(1.6rem, 4.4vw, 4rem);
  color: var(--cream);
}
.hero-overlay .hero-title {
  color: var(--cream);
  max-width: 15ch;
  margin: 0;
}
.hero-overlay .lede {
  color: rgba(253,249,240,.86);
  max-width: 54ch;
  margin: clamp(.9rem, 1.6vw, 1.5rem) 0 0;
}
.hero-overlay .actions { margin-top: clamp(1.2rem, 2.2vw, 2rem); }
/* Every property is restated rather than inherited. Sitting on a photograph,
   a button that borrows even one value from a lighter context is a button that
   disappears on the next frame dropped into this slot. Clay carries white at
   4.71:1; the ghost is cream on the scrim. */
.hero-overlay .btn {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--white);
  opacity: 1;
}
.hero-overlay .btn-ghost {
  background: rgba(37,24,24,.28);
  border-color: var(--cream);
  color: var(--cream);
  opacity: 1;
}
.hero-overlay .btn-ghost:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--espresso);
}

@media (max-width: 860px) {
  .hero-frame .media { height: clamp(460px, 74vh, 620px); }
  .hero-overlay .hero-title { max-width: 12ch; }
  .hero-overlay .lede { display: none; }
}