/* ============================================================
   EVERMONT × TIFFANY & CO. — components.css
   Krever tokens.css.

   Seksjonsrekkefølgen følger Cullen-analysen (kap. 2.0–2.13).
   Hver komponent er merket med hvilken Cullen-seksjon den dekker.
   ============================================================ */

/* ---------- 0. LAYOUT-PRIMITIVER --------------------------- */
.tf-container {
  max-width: calc(var(--tf-container) + 2 * var(--tf-gutter));
  margin: 0 auto;
  padding: 0 var(--tf-gutter);
}
.tf-container--narrow { max-width: 980px; }

.tf-section     { padding: var(--tf-section-y) 0; background: var(--tf-paper); }
.tf-section--lg { padding: var(--tf-section-y-lg) 0; }
.tf-section--mist { background: var(--tf-mist); }
.tf-section--dark { background: var(--tf-charcoal); color: #fff; }
.tf-section--tint { background: var(--brand-tint); }

.tf-sectionhead { margin-bottom: var(--tf-gap-head); }
.tf-sectionhead .tf-h2 { margin-bottom: 16px; }

/* Innebygde lenker i brødtekst — Cullen 2.4/2.6, intern SEO */
.tf-inline {
  border-bottom: 1px solid var(--tf-rule);
  transition: border-color var(--tf-ease);
}
.tf-inline:hover { border-color: var(--brand-ink); }

/* ---------- 1. ANNOUNCEMENT BAR — Cullen 2.0 ---------------
   [målt] 40px, brandfarge, sentrert 14px tekst. Budskapene roterer
   av seg selv — ingen piler, så teksten har hele bredden minus en
   liten luftmargin. Andre budskap forsvarer prispolitikken. */
.tf-announce {
  position: relative;
  height: var(--tf-announce-h);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tf-t-small);
  font-weight: var(--tf-w-body);
  overflow: hidden;
}
.tf-announce__viewport { position: relative; height: 100%; width: 100%; }
.tf-announce__msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px; text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--tf-ease);
}
.tf-announce__msg.is-active { opacity: 1; visibility: visible; }
.tf-announce__msg a { border-bottom: 1px solid currentColor; }

/* ---------- 2. HEADER — Cullen 2.1 -------------------------
   Split-nav med SENTRERT wordmark: 3 lenker venstre, 3 høyre,
   søk + kurv helt til høyre. Wordmarket er absolutt sentrert
   slik at det står midt på siden uansett lenkebredde. */
.tf-header {
  position: sticky; top: 0; z-index: 90;
  height: var(--tf-header-h);
  background: var(--tf-paper);
  border-bottom: 1px solid var(--tf-rule);
}
.tf-header__inner {
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--tf-gutter); gap: 24px;
}
.tf-header__brand {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--tf-font-display);
  font-size: var(--tf-t-wordmark);
  font-weight: var(--tf-w-display);
  letter-spacing: var(--tf-ls-wordmark);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.tf-nav { display: flex; align-items: center; gap: 28px; }
.tf-nav a {
  font-size: var(--tf-t-nav);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-nav);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--tf-ease);
}
.tf-nav a:hover { border-bottom-color: var(--brand-ink); }
/* Én markert lenke styrer trafikk til booking — Cullen 2.1 */
.tf-nav a.is-accent { color: var(--brand-ink); }
.tf-header__right { display: flex; align-items: center; gap: 28px; }
.tf-header__icons { display: flex; align-items: center; gap: 20px; }
.tf-header__icons button:hover { color: var(--brand-ink); }
.tf-icon { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.tf-header__burger { display: none; align-items: center; }
.tf-header__burger:hover { color: var(--brand-ink); }

/* Trykkmål. Glyffene er 19px, altså under WCAG 2.5.8 (24×24 for
   kontroller som ikke ligger inline i en setning). Flaten utvides
   rundt glyffen — glyffen selv flytter seg ikke.
   Ingen display her: burgeren styres av media-spørringen under. */
.tf-header__burger { width: 24px; height: 24px; justify-content: center; }
.tf-header__icons button {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}

/* Mobildrawer */
.tf-drawer {
  position: fixed; inset: 0 0 0 0; z-index: 95;
  background: var(--tf-paper);
  padding: 24px var(--tf-gutter);
  display: none;
  overflow-y: auto;
}
.tf-drawer.is-open { display: block; }
.tf-drawer__top { display: flex; justify-content: flex-end; margin-bottom: 32px; font-size: 22px; }
/* Lukk-knappen er drawerens eneste vei ut på touch — 44px flate, med
   negativ margin så krysset likevel står optisk i gutterkanten. */
.tf-drawer__close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  margin: -10px -12px -10px 0;
}
.tf-drawer a {
  display: block;
  font-family: var(--tf-font-display);
  font-size: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tf-rule);
}

/* ---------- 3. HERO / SPLITTBÅND — Cullen 2.2 --------------
   [målt] Tiffanys hero er IKKE full-bleed med overlay-tekst.
   Den er 2/3 foto + 1/3 hvit tekstpanel med sentrert tekst.
   Det er systemets viktigste enkeltgrep: null overlay, null
   gradient, ren typografi på papir ved siden av bildet. */
.tf-split {
  display: grid;
  grid-template-columns: var(--tf-hero-split) 1fr;
  min-height: var(--tf-band-h);
  background: var(--tf-paper);
}
.tf-split--reverse { grid-template-columns: 1fr var(--tf-hero-split); }
.tf-split--mist .tf-split__panel { background: var(--tf-mist); }
/* Bildet tas UT av flyten (absolute) med vilje: ellers ville
   bildets eget sideforhold bestemt båndhøyden, og båndene ville
   fått ulik høyde fra bilde til bilde. Pulsen nedover siden skal
   være forutsigbar — alle bånd er --tf-band-h. */
.tf-split__media { position: relative; overflow: hidden; min-height: var(--tf-band-h); }
.tf-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tf-split--reverse .tf-split__media { order: 2; }
.tf-split--reverse .tf-split__panel { order: 1; }
.tf-split__panel {
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  padding: 64px 56px;
}
.tf-split__panel > * { max-width: 380px; }   /* [målt] tekstblokk ~340 */
.tf-split__panel .tf-h1 { margin-bottom: 22px; }
.tf-split__panel .tf-body { margin-bottom: var(--tf-gap-cta); }
.tf-split__ctas { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ---------- 4. UTILITY-STRIPE — Cullen 2.3 -----------------
   Rett under hero. Fanger hasteinnvendingen (lang produksjons-
   tid) FØR brukeren oppdager den. Én understreket lenke.
   Ligger under folden — se 4b: heroen tar første skjerm alene,
   så stripen er det første man møter på vei nedover. */
.tf-utility {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  padding: 34px 0;
  text-align: center;
  font-size: var(--tf-t-body);
}
.tf-utility a { border-bottom: 1px solid currentColor; font-weight: 400; }

/* ---------- 4b. FØRSTE SKJERM ------------------------------
   Heroen fyller første skjerm alene: viewporthøyden minus
   announcement-bar og header. Begge ligger i flyten over heroen
   (sticky header reserverer plassen sin), så det er de eneste to
   som skal trekkes fra.

   Effekten er at NESTE seksjon begynner nøyaktig på skjermkanten.
   Ingenting annet enn heroen møter brukeren ved innlasting.

   svh, ikke vh: på mobil-Chrome er vh den STØRSTE viewporten
   (uten adresselinje), som ville skjøvet folden for langt ned.
   vh først som fallback for eldre nettlesere.

   GJELDER ALLE BREDDER. Dette lå først bare på ≥1081px, med
   antagelsen om at den stablede heroen er høyere enn skjermen
   uansett. Det holder ikke: på nettbrett i portrett (768×1024 og
   834×1112) er stablet hero LAVERE enn skjermen, og stripen tittet
   fram med 47 og 135px ved innlasting. Målt, ikke gjettet.

   min-height slår --tf-band-h (560px) fra .tf-split over. */
.tf-split--fold {
  min-height: calc(100vh - var(--tf-announce-h) - var(--tf-header-h));
  min-height: calc(100svh - var(--tf-announce-h) - var(--tf-header-h));
}
/* Stablet (≤1080) beholder bildet sine egne 380px, og de to auto-radene
   deler overskuddet — bildet krymper aldri. Over 1081 er bildet en
   kolonne og må slippe --tf-band-h, ellers blir 560px gulvet for
   radhøyden og heroen kan ikke krympe på lave vinduer. */
@media (min-width: 1081px) {
  .tf-split--fold .tf-split__media { min-height: 0; }
}

/* ---------- 5. KARUSELL — Cullen 2.4 / 2.6 -----------------
   4 synlige kort av 5–6 → avkuttet kant inviterer til sveip. */
.tf-carousel { position: relative; }
.tf-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--tf-gap-4up)) / 4);
  gap: var(--tf-gap-4up);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.tf-carousel__track::-webkit-scrollbar { display: none; }
.tf-carousel__track > * { scroll-snap-align: start; }
/* grab/grabbing er selve affordansen for at sporet kan dras — uten den
   er dra-funksjonen usynlig for musebrukere. user-select av under draget,
   ellers markeres kortlabelene som tekst mens man drar. */
.tf-carousel__track { cursor: grab; }
.tf-carousel__track.is-grabbing { cursor: grabbing; user-select: none; }
/* Piler med ekte flate. Før var de nakne glyffer, og det fungerte
   ikke: en «‹» uten ramme på hvitt papir leses ikke som en knapp, og
   i disabled-tilstand (opacity .22) forsvant den helt.

   Fire krav styrer utformingen:
     • Synlig affordance — flate + ramme, ikke bare et tegn. En kontroll
       må se ut som en kontroll før den blir brukt.
     • Trykkmål 44×44 (WCAG 2.5.5). Det gamle SYNLIGE målet var ~8px
       bredt selv om knappen målte 40 — oppfattet mål er det som teller.
     • Kontrast ≥3:1 på ramme og glyff (WCAG 1.4.11, ikke-tekst).
     • Disabled skal lese som «du er ved starten», ikke som ødelagt.
       Derfor dempet til --tf-ink-faint (3,1:1 mot hvitt) framfor å
       tones nesten bort.

   Hover og fokus inverterer til fylt ink — samme oppførsel som
   .tf-btn--ghost, så mønsteret er allerede innlært ellers på siden.

   z-index: --prev ligger FØR sporet i DOM og ville ellers blitt malt
   under kortene. */
/* Utseendet er målt på cullenjewellery.com (button.arrow):
     30×40px           — stående rektangel, ikke kvadrat
     rgba(255,255,255,.85) — halvgjennomsiktig hvit brikke
     ingen ramme, ingen skygge, ingen radius
     right/left: 0     — flush med sporkanten, oppå ytterste kort
     z-index 2, transition på opacity + background
     chevron 20px med runde ender

   Nudge oppover fordi brikken skal sentreres på BILDET, ikke på kortet.
   Kortet har label under bildet, så senter av kortet ligger for lavt.
   Cullen løser det likt (translateY(-20px) på toppen av sin egen
   sentrering). --tf-carousel-nudge er halve labelhøyden.

   Verdiene er målt, ikke gjettet: 24px lander pilen på bildesenteret
   når kortet har navn alene, 36px når det også har en meta-linje. */
.tf-carousel { --tf-carousel-nudge: 24px; }
.tf-carousel--meta { --tf-carousel-nudge: 36px; }
.tf-carousel__nav {
  position: absolute; top: 50%;
  transform: translateY(calc(-50% - var(--tf-carousel-nudge)));
  z-index: 2;
  width: 30px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .85);
  border: 0;
  color: var(--tf-ink);
  transition: opacity var(--tf-ease), background var(--tf-ease), color var(--tf-ease);
}
.tf-carousel__nav svg {
  width: 20px; height: 20px;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* Fyllet følger primary, som resten av de gjennomsiktige kontrollene.
   Cullen går til ren hvit her — men brandregelen på denne siden veier
   tyngre enn å kopiere hover-fargen deres. */
.tf-carousel__nav:hover,
.tf-carousel__nav:focus-visible { background: var(--brand-primary); color: var(--brand-on-primary); }
/* Utilgjengelig pil forsvinner helt, som hos Cullen. En rammeløs
   halvgjennomsiktig brikke kan ikke lese som «disabled» — den ville
   bare sett ut som en lys firkant oppå bildet. */
.tf-carousel__nav[disabled] { opacity: 0; pointer-events: none; }
.tf-carousel__nav--prev { left: 0; }
.tf-carousel__nav--next { right: 0; }

/* Kort: kun bilde + navn. Ingen pris, ingen badge — Cullen 2.6 */
.tf-card { text-align: center; }
.tf-card img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  margin-bottom: 20px;
  transition: opacity var(--tf-ease);
}
.tf-card:hover img { opacity: .86; }
.tf-card__name {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--tf-t-card);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
}
.tf-card__name span { transition: transform var(--tf-ease); }
.tf-card:hover .tf-card__name span { transform: translateX(5px); }
.tf-card__meta {
  display: block; margin-top: 8px;
  font-size: var(--tf-t-micro);
  letter-spacing: .4px;
  color: var(--tf-ink-faint);
  text-transform: uppercase;
}

/* ---------- 6. DOBBELBANNER 50/50 — Cullen 2.7 -------------
   To ulike konverteringsmål side om side: lead-fangst venstre,
   direkte salg høyre. Venstrejustert tekst NEDERST — brudd med
   sidens sentrerte norm, gjør seksjonen redaksjonell. */
.tf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tf-gap-2up); }
.tf-duo__cell {
  position: relative;
  min-height: var(--tf-band-h-sm);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.tf-duo__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tf-duo__text { position: relative; padding: 48px 44px; max-width: 460px; }
.tf-duo__text .tf-h3 { margin-bottom: 12px; }
.tf-duo__text .tf-body { margin-bottom: 24px; }
.tf-duo__cell--dark .tf-duo__text { color: #fff; }

/* ---------- 7. AKKORDEON (FAQ) — Cullen 2.9 ----------------
   Venstrejustert, alle lukket, chevron VENSTRE for teksten.
   Rekkefølgen er innvendingshåndtering, ikke alfabetisk. */
.tf-acc { border-top: 1px solid var(--tf-rule); }
.tf-acc details { border-bottom: 1px solid var(--tf-rule); }
.tf-acc summary {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 22px 0; cursor: pointer;
  font-size: var(--tf-t-body); font-weight: 400;
  line-height: 1.5;
  --tf-acc-lh: calc(var(--tf-t-body) * 1.5);   /* høyden på FØRSTE tekstlinje */
  list-style: none;
}
.tf-acc summary::marker { content: ''; }

/* Chevronen midtstilles på første tekstlinje, ikke på hele summary.
   Den er 13px mot tekstens 16px, så flex-start alene ville stilt
   toppen av to ulike linjebokser mot hverandre og lagt pilen et par
   piksler for høyt. Løsningen er å gi chevronen tekstlinjens egen
   høyde (--tf-acc-lh) og sentrere glyffen inne i den: da treffer den
   midt på linjen uansett skriftstørrelse, og spørsmål som brekker
   over to linjer holder pilen ved den ØVERSTE — ikke midt i blokken.
   Sentrert glyf gjør også at 90°-rotasjonen ved åpning dreier om sitt
   eget midtpunkt. Panelet i 2.10 setter --tf-acc-lh på nytt fordi
   summary der er 24px. */
.tf-acc__chev {
  flex: 0 0 12px;
  height: var(--tf-acc-lh);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  transition: transform var(--tf-ease);
}
.tf-acc details[open] .tf-acc__chev { transform: rotate(90deg); }
.tf-acc__answer {
  padding: 0 0 26px 30px;
  max-width: 78ch;
  font-size: var(--tf-t-small);
  color: var(--tf-ink-soft);
  line-height: 1.65;
}
.tf-acc__answer a { border-bottom: 1px solid var(--tf-rule); }
.tf-acc__answer a:hover { border-color: var(--brand-ink); }

/* ---------- 8. INITIATIVER — Cullen 2.10 -------------------
   50/50: atmosfærisk foto venstre, mørkt panel med akkordeon
   høyre. Bærekraft kommer ETTER FAQ = merkevareverdi, ikke
   salgsargument. */
.tf-initiatives { display: grid; grid-template-columns: 1fr 1fr; }
.tf-initiatives__media { position: relative; min-height: 680px; overflow: hidden; }
.tf-initiatives__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tf-initiatives__panel {
  background: var(--tf-charcoal); color: #fff;
  padding: 88px 72px;
  display: flex; flex-direction: column; justify-content: center;
}
.tf-initiatives__panel .tf-acc,
.tf-initiatives__panel .tf-acc details { border-color: var(--tf-rule-dark); }
.tf-initiatives__panel .tf-acc summary {
  font-family: var(--tf-font-display);
  font-size: var(--tf-t-display-sm);
  padding: 26px 0;
  --tf-acc-lh: calc(var(--tf-t-display-sm) * 1.5);
}
.tf-initiatives__panel .tf-acc__answer { color: rgba(255,255,255,.72); }
.tf-initiatives__panel .tf-acc__answer a { border-color: rgba(255,255,255,.4); }

/* ---------- 9. INSTAGRAM — Cullen 2.11 -------------------- */
.tf-ig { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tf-gap-4up); }
.tf-ig a { position: relative; display: block; }
.tf-ig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity var(--tf-ease); }
.tf-ig a:hover img { opacity: .85; }
.tf-ig__badge {
  position: absolute; top: 14px; right: 14px;
  color: #fff; font-size: 13px;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* ---------- 10. NYHETSBREV — Cullen 2.13 ------------------
   Sidens eneste tonede flate utenom brandfargebåndene. */
.tf-newsletter { text-align: center; }
.tf-newsletter__form {
  display: flex; justify-content: center; gap: 0;
  margin-top: var(--tf-gap-cta);
}
.tf-newsletter__form input {
  width: 340px; height: var(--tf-input-h);
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--tf-ink);
  font-family: var(--tf-font-sans);
  font-size: var(--tf-t-small);
  font-weight: var(--tf-w-body);
  color: var(--tf-ink);
}
.tf-newsletter__form input::placeholder { color: var(--tf-ink-faint); }
.tf-newsletter__note { margin-top: 18px; font-size: var(--tf-t-micro); color: var(--tf-ink-soft); }

/* ---------- 11. TRUST-IKONRAD — Cullen 2.12 ---------------
   Fire løfter som fjerner RISIKO, ikke legger til verdi.
   Siste ord før footer. */
.tf-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tf-gap-3up); }
.tf-trust__item { text-align: center; }
.tf-trust__glyph { display: block; margin: 0 auto 16px; width: 28px; height: 28px; stroke: var(--tf-ink); fill: none; stroke-width: 1.2; }
.tf-trust__label {
  font-size: var(--tf-t-micro);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
  line-height: 1.7;
}

/* ---------- 12. FOOTER — Cullen 2.13 ----------------------
   Lys footer (Tiffany), 5 lenkekolonner. SERVICE AREAS som
   egen kolonne er ren lokal SEO. */
.tf-footer { background: var(--tf-paper); border-top: 1px solid var(--tf-rule); padding: 72px 0 40px; }
.tf-footer__cols {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 40px; margin-bottom: 64px;
}
.tf-footer__h {
  font-size: var(--tf-t-micro);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
  margin-bottom: 20px;
}
/* margin ned fra 12 til 6px fordi lenkene nå bærer 4px padding hver —
   den visuelle radavstanden er uendret, men trykkflaten er større. */
.tf-footer__cols li + li { margin-top: 6px; }
.tf-footer__cols a, .tf-footer__cols li {
  font-size: var(--tf-t-small);
  color: var(--tf-ink-soft);
  line-height: 1.5;
}
/* Footer-lenkene var 20px høye. De står i en liste, ikke inline i en
   setning, så unntaket i WCAG 2.5.8 gjelder ikke — de er egne mål og
   må være 24px. inline-block for at padding skal gi høyde. */
.tf-footer__cols a {
  display: inline-block;
  padding: 4px 0;
}
.tf-footer__cols a:hover { color: var(--brand-ink); }
.tf-footer__badges {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 40px; padding: 36px 0;
  border-top: 1px solid var(--tf-rule);
  border-bottom: 1px solid var(--tf-rule);
}
.tf-footer__badge {
  font-size: var(--tf-t-micro);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
  color: var(--tf-ink-faint);
  text-align: center;
}
/* flex-wrap: uten den sprakk «YouTube» 7px ut av viewporten på 320px
   og ga vannrett skroll på hele siden. Målt på iPhone SE-bredde. */
.tf-footer__social {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 32px; padding: 32px 0 28px;
}
/* Samme grunn som lenkene i footer-kolonnene: egne mål i en rad, ikke
   inline i tekst — 17px var for lavt, padding løfter til 25. */
.tf-footer__social a {
  display: inline-block; padding: 4px 0;
  font-size: var(--tf-t-micro); letter-spacing: var(--tf-ls-label); text-transform: uppercase;
}
.tf-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  font-size: var(--tf-t-micro); color: var(--tf-ink-faint);
}
.tf-footer__legal a:hover { color: var(--brand-ink); }

/* ---------- 13. CHAT-WIDGET -------------------------------
   [målt] Tiffany har den nede til høyre — og der ligger den her
   også, stablet i samme høyrekolonne som brand-switcheren:
   switcher øverst, chat nederst mot hjørnet.

   Høyden er låst i --tf-chat-h fordi switcheren forskyves med
   nøyaktig den verdien. Endrer du teksten til tre linjer, må
   tokenet opp — ellers overlapper de to. */
.tf-chat {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: flex; align-items: stretch;
  height: var(--tf-chat-h);
  background: var(--tf-mist);
  border: 1px solid var(--tf-rule);
  max-width: 330px;
}
.tf-chat__bubble {
  flex: 0 0 58px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary); color: var(--brand-on-primary);
}
/* Litt større enn header-ikonene (19px): dette er widgetens
   eneste affordance, headerens ikoner står i en rad med flere. */
.tf-chat__bubble .tf-icon { width: 22px; height: 22px; }
.tf-chat__text { padding: 14px 18px; font-size: var(--tf-t-small); line-height: 1.4; }
.tf-chat__text a { border-bottom: 1px solid currentColor; }
.tf-chat__close {
  align-self: flex-start;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--tf-ink-faint);
}

/* ---------- 14. BRAND-SWITCHER (demo-verktøy) -------------
   Ikke en del av designsystemet. Bytter merkenavn og primary-
   farge i sanntid. Kontrastfarge PÅ primary regnes ut av JS. */
/* Løftet over chat-widgeten så de to deler høyrekolonnen. */
.tf-switch {
  position: fixed; right: 24px; z-index: 120;
  bottom: calc(24px + var(--tf-chat-h) + 14px);
  font-family: var(--tf-font-sans);
}
/* Liten med vilje: dette er et demo-verktøy og skal ikke konkurrere
   med sidens egne CTA-er. Bærer valgt primærfarge, med --brand-on-primary
   på ikonet — den regnes ut av JS på høyest kontrast, så glyffen holder
   seg lesbar uansett hvilken farge som velges.

   Skyggen er ikke pynt: på en lys primary (Blush, Tiffany Blue) mot hvitt
   papir er det den som gir knappen en kant. */
.tf-switch__fab {
  width: 34px; height: 34px; border-radius: 50% !important;
  background: var(--brand-primary); color: var(--brand-on-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.20) !important;
  margin-left: auto;
  transition: transform var(--tf-ease);
}
.tf-switch__fab svg { width: 15px; height: 15px; }
.tf-switch__fab:hover { transform: translateY(-1px); }
.tf-switch__panel {
  display: none;
  width: 300px; margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--tf-ink);
  padding: 22px 22px 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.16) !important;
}
.tf-switch.is-open .tf-switch__panel { display: block; }
.tf-switch__title {
  font-size: var(--tf-t-micro);
  font-weight: var(--tf-w-label);
  letter-spacing: var(--tf-ls-label);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.tf-switch__label {
  display: block; margin-bottom: 8px;
  font-size: var(--tf-t-micro); color: var(--tf-ink-soft);
  letter-spacing: .6px; text-transform: uppercase;
}
.tf-switch input[type="text"] {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--tf-rule);
  font-family: var(--tf-font-display); font-size: 16px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--tf-ink); background: #fff;
}
.tf-switch__swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tf-switch__sw {
  width: 30px; height: 30px; border-radius: 50% !important;
  border: 1px solid var(--tf-rule);
  position: relative;
}
.tf-switch__sw[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: -4px;
  border: 1px solid var(--tf-ink); border-radius: 50% !important;
}
.tf-switch__row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.tf-switch__row input[type="color"] { width: 44px; height: 32px; border: 1px solid var(--tf-rule); background: none; padding: 2px; }
.tf-switch__hex { font-size: var(--tf-t-micro); color: var(--tf-ink-soft); letter-spacing: 1px; }
.tf-switch__field { margin-bottom: 18px; }
.tf-switch__reset {
  font-size: var(--tf-t-micro); letter-spacing: var(--tf-ls-label);
  text-transform: uppercase; color: var(--tf-ink-soft);
  border-bottom: 1px solid var(--tf-rule);
}
.tf-switch__reset:hover { color: var(--tf-ink); border-color: var(--tf-ink); }

/* ============================================================
   TRYKKMÅL PÅ TOUCH

   pointer: coarse framfor en breddegrense — det er inndataenheten
   som avgjør hvor stort et mål må være, ikke skjermbredden. En
   1024px-nettbrett trenger 44px; et 900px vindu med mus gjør ikke.
   44px er WCAG 2.5.5.
   ============================================================ */
@media (pointer: coarse) {
  .tf-header__burger,
  .tf-header__icons button { width: 44px; height: 44px; }
  /* Gapet nulles fordi flaten nå bærer avstanden: 20px gap + 2×12px
     luft inne i knappene ville gitt 45px mellom glyffene. */
  .tf-header__icons { gap: 0; }

  /* Switcher-FAB-en er 34px på desktop etter bestilling. På touch er
     den for liten som eneste flytende kontroll — chatten er skjult. */
  .tf-switch__fab { width: 44px; height: 44px; }
  .tf-switch__fab svg { width: 18px; height: 18px; }

  .tf-chat__close { width: 40px; height: 40px; padding: 0; }
  /* Akkordeon-rader: 22px padding gir ~66px, allerede over 44 — men
     summary må ha peker-oppførsel for at iOS skal behandle den som mål. */
  .tf-acc summary { cursor: pointer; }
}

/* ============================================================
   RESPONSIVT
   [målt på kilden] mobil: hamburger + sentrert logo + kurv.
   ============================================================ */

@media (max-width: 1280px) {
  :root { --tf-t-wordmark: 34px; --tf-gutter: 28px; }
  .tf-nav { gap: 20px; }
  .tf-header__right { gap: 20px; }
}

@media (max-width: 1080px) {
  :root {
    --tf-header-h: 88px;
    --tf-band-h: 480px;
    --tf-t-hero: 30px;
    --tf-t-section: 27px;
  }
  /* Hamburger venstre — sentrert wordmark — søk + kurv høyre */
  .tf-header__burger { display: flex; }
  .tf-header__inner > .tf-nav { display: none; }
  .tf-header__right .tf-nav { display: none; }
  .tf-split, .tf-split--reverse { grid-template-columns: 1fr; }
  .tf-split--reverse .tf-split__media { order: 0; }
  .tf-split--reverse .tf-split__panel { order: 0; }
  .tf-split__media { min-height: 380px; }
  .tf-split__panel { padding: 56px 32px; }
  .tf-carousel__track { grid-auto-columns: calc((100% - 2 * var(--tf-gap-4up)) / 2.4); }
  .tf-initiatives { grid-template-columns: 1fr; }
  .tf-initiatives__media { min-height: 380px; }
  .tf-initiatives__panel { padding: 64px 32px; }
  .tf-footer__cols { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .tf-ig { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root {
    --tf-band-h: 420px;
    --tf-band-h-sm: 380px;
    --tf-t-wordmark: 26px;
    --tf-t-hero: 26px;
    --tf-t-section: 23px;
    --tf-t-display-sm: 20px;
    --tf-section-y: 56px;
    --tf-section-y-lg: 64px;
    --tf-gutter: 20px;
  }
  .tf-announce { height: auto; min-height: 44px; }
  .tf-announce__msg { position: relative; padding: 10px 20px; font-size: 13px; }
  .tf-announce__msg:not(.is-active) { display: none; }
  .tf-duo { grid-template-columns: 1fr; }
  .tf-duo__text { padding: 32px 24px; }
  .tf-trust { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .tf-ig { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tf-footer__cols { grid-template-columns: 1fr 1fr; }
  .tf-footer__badges { gap: 20px; }
  .tf-carousel__track { grid-auto-columns: calc(100% - 48px); }
  /* Piler bort på touch: sveip er den innebygde interaksjonen, og det
     avkuttede kortet i høyre kant er affordansen. Knapper her ville
     dekket 44px av et kort som nesten fyller bredden. */
  .tf-carousel__nav { display: none; }
  .tf-newsletter__form { flex-direction: column; align-items: center; gap: 12px; }
  .tf-newsletter__form input { width: 100%; max-width: 340px; }
  .tf-chat { display: none; }             /* gir plass til switcheren */
  .tf-switch { bottom: 24px; }            /* chatten er borte — ned i hjørnet igjen */
  .tf-switch__panel { width: min(300px, calc(100vw - 48px)); }
}