/* Wakeel design system
   One stylesheet for every page. Change it here, it changes everywhere.
   Sections: tokens, header, hero, finder, intro, matters, band, advocates, verify, guide, footer, motion */

:root{
  --sand:#EFE9DF;        /* warm, desaturated beige, page background */
  --sand-deep:#E4DCCE;   /* second beige for banding */
  --white:#FFFFFF;
  --ink:#16161A;         /* near-black */
  --ink-2:#55534E;
  --ink-3:#807C74;
  --navy:#1B2A44;        /* structure, dark sections */
  --navy-2:#23406E;      /* interactive: links, buttons */
  --navy-tint:#DEE4EE;
  --line:rgba(22,22,26,.13);
  --line-soft:rgba(22,22,26,.08);
  --serif:"Petrona",Georgia,serif;
  --sans:"Manrope",system-ui,sans-serif;
  --urdu:"Noto Nastaliq Urdu",serif;
  --pad:clamp(1.25rem,5vw,5rem);
  /* Sidens målebredde. 1400 er taket: over det får .matters-rutenettet
     (auto-fit minmax 290px) plass til en fjerde kolonne på 1440 px skjerm,
     og de seks kortene brekker 4+2 i stedet for 3+3. Målt, ikke gjettet. */
  --wrap:1400px;
  /* Hvor langt søkefeltet legger seg opp over hero. Hero-flatens
     bunnpolstring regnes ut fra denne, så de to ikke kan gli fra
     hverandre når teksten blir høyere — urdu har 2.1 i linjeavstand
     og kolliderte med feltet da tallene sto hver for seg. */
  --finder-overlap:4.25rem;
  --e:cubic-bezier(.16,1,.3,1);

  /* Typeskala. Sju trinn, ikke tolv. Målt på guidesidene før dette lå
     17, 16, 15, 14, 13, 12 og 11 px oppå hverandre; ingen av spranga var
     over 1,1, så alt i den enden leste som samme størrelse. Nå er
     minste sprang 1,27 og største 1,8. */
  --t-hero:  clamp(2.6rem, 6.2vw, 4.8rem);
  --t-fig:   clamp(3.5rem, 9vw, 7rem);
  --t-h2:    clamp(1.75rem, 3.1vw, 2.6rem);
  --t-lead:  clamp(1.12rem, 1.4vw, 1.25rem);
  --t-h3:    clamp(1.25rem, 1.9vw, 1.6rem);
  --t-body:  1.0625rem;
  --t-small: .93rem;
  --t-label: .78rem;

  /* Loddrett rytme. Tre nivåer avledet av ett tall, så de ikke kan gli
     fra hverandre. Målt før dette: seksjonsgapet var 112 px overalt,
     mens overskrift-til-kort varierte 22, 26, 68 og 108 px uten system.
     Da leser alt som samme nivå. */
  --sec:      clamp(2.5rem, 6vw, 4.5rem);   /* seksjon mot seksjon      */
  --sec-head: calc(var(--sec) * .4);        /* overskrift mot kort      */
  --sec-card: calc(var(--sec) * .25);       /* inni samme seksjon       */

  /* Hvor langt ned et ankermål lander. Menylinja er 60 px på
     guidesidene i begge tilstander; 88 px-tilstanden finnes bare over
     hero, og de sidene har ingen innholdsfortegnelse. Med de gamle
     76 px sto overskrifta 16 px under bjelken, altså praktisk talt
     inntil den. Klaringa følger nå sidas egen rytme. */
  --anchor-offset: calc(60px + var(--sec-head));
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;margin:0;text-wrap:balance;line-height:1.1}
p{margin:0;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy-2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kicker{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* ---------- header: two-state sticky ---------- */
.skip{position:fixed;inset-inline-start:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;
  padding:.8rem 1.3rem;text-decoration:none;font-weight:600}
.skip:focus{inset-inline-start:.75rem;top:.75rem}

.top{position:fixed;inset:0 0 auto;z-index:50;color:#fff;
  transition:background .18s var(--e),color .18s var(--e),box-shadow .18s var(--e)}
/* local scrim: guarantees link contrast over any photo, without darkening the whole hero */
.top::before{content:"";position:absolute;inset:0 0 auto;height:200%;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,16,28,.78) 0%,rgba(10,16,28,.34) 55%,rgba(10,16,28,0) 100%);
  transition:opacity .18s var(--e)}
.top .wrap{position:relative;display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.25rem);
  height:88px;transition:height .18s var(--e)}
.top.solid{background:var(--sand);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.top.solid::before{opacity:0}
.top.solid .wrap{height:60px}

.brand{font-family:var(--serif);font-size:1.6rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.brand i{font-style:normal;opacity:.7;font-size:1rem;margin-inline-start:.5rem;font-family:var(--sans);letter-spacing:.1em;text-transform:uppercase}

.nav{margin-inline-start:auto;display:flex;gap:clamp(1rem,2.2vw,2rem);font-size:.95rem}
.nav a{text-decoration:none;font-weight:500;padding:.55rem 0;border-bottom:2px solid transparent;transition:border-color .2s var(--e)}
.nav a:hover,.nav a:focus-visible{border-bottom-color:currentColor}
.top:not(.solid) :focus-visible{outline-color:#fff}

.lang{display:flex;align-items:center;gap:.15rem;padding:3px;border-radius:999px;
  border:1px solid rgba(255,255,255,.42);font-size:.8rem}
.top.solid .lang{border-color:var(--line)}
.lang a,.lang .cur{padding:.3rem .72rem;border-radius:999px;text-decoration:none;line-height:1.5}
.lang a:hover{background:rgba(255,255,255,.16)}
.top.solid .lang a:hover{background:rgba(22,22,26,.07)}
.lang .cur{background:#fff;color:var(--navy);font-weight:600}
.top.solid .lang .cur{background:var(--navy);color:#fff}
.lang .ur{font-family:var(--urdu);font-size:.95rem;padding-block:.15rem}

.head-cta{background:#fff;color:var(--navy);text-decoration:none;font-weight:600;font-size:.9rem;
  padding:.62rem 1.15rem;border-radius:999px;white-space:nowrap;transition:.18s var(--e)}
.head-cta:hover{background:var(--sand)}
.top.solid .head-cta{background:var(--navy-2);color:#fff}
.top.solid .head-cta:hover{background:var(--navy)}

.burger{display:none;margin-inline-start:auto;align-items:center;gap:.55rem;cursor:pointer;
  background:none;color:inherit;font:inherit;font-size:.85rem;font-weight:600;
  border:1px solid currentColor;border-radius:999px;padding:.5rem .9rem}
.burger .bars{display:grid;gap:3px}
.burger .bars i{display:block;width:16px;height:1.5px;background:currentColor}
.panel{display:none}

@media(max-width:1040px){
  .nav,.head-cta{display:none}
  .burger{display:inline-flex}
  .lang{order:3}
  .top.open{background:var(--sand);color:var(--ink)}
  .top.open::before{opacity:0}
  .panel{display:block;position:absolute;top:100%;inset-inline:0;background:var(--sand);
    border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .26s var(--e)}
  .top.open .panel{max-height:70vh;overflow:auto}
  .panel ul{list-style:none;margin:0;padding:.25rem var(--pad) 1.5rem}
  .panel a{display:block;padding:1rem 0;text-decoration:none;color:var(--ink);
    border-bottom:1px solid var(--line-soft);font-size:1.08rem}
  .panel .cta{margin-top:1.25rem;background:var(--navy-2);color:#fff;text-align:center;
    border:0;border-radius:999px;padding:1rem;font-weight:600}
}
@media(prefers-reduced-motion:reduce){.panel{transition:none}}

section[id]{scroll-margin-top:var(--anchor-offset)}

/* Myk rulling til anker. Ligger i no-preference og ikke i en
   reduce-blokk som slår den av igjen, så standarden er «ingen
   animasjon» for den som har bedt om det.
   Merk: produktkoden ruller ikke selv noe sted i dag. Regelen under
   gjelder også for scrollTo() med behavior:'auto', som er standard, så
   JS-rulling arver den. Skal en JS-rulling hoppe uten animasjon, må den
   sende behavior:'instant' eksplisitt. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(94vh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);animation:reveal 1.6s var(--e) .1s forwards}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,36,.62) 0%,rgba(15,22,36,.30) 38%,rgba(15,22,36,.72) 100%)}
/* .hero er display:flex, så .wrap blir et flex-item. Uten width:100%
   krymper den til innholdet (826 px av 1280) og margin:0 auto sentrerer
   den krympede boksen — hero-teksten havnet da 227 px lenger inn enn
   alle andre seksjoner på siden. Det var derfor blokken svevde.

   Hero holder samme kolonne som alle andre seksjoner. Et forsøk på å la
   den bre seg ut mot ytterkanten ble forkastet: ingressen stakk da 131 px
   forbi høyrekanten på søkefeltet rett under, og det leser som en glipp
   framfor et valg. Plassen tas i bruk innenfor kolonnen i stedet, ved å
   dele den i to felt. */
.hero .wrap{width:100%;position:relative;z-index:2;color:#fff;
  padding-block:clamp(6rem,14vh,9rem) calc(var(--finder-overlap) + clamp(1.5rem,3vh,2.5rem));
  display:grid;align-items:end;row-gap:1.6rem}

/* Fra 1400 px har kolonnen plass til to felt. Overskriften blir stående
   der den alltid har stått, ingressen flytter opp ved siden av den og
   deler grunnlinje med den. Tomrommet mellom dem er da et felt i
   rutenettet og ikke noe som er til overs — det er forskjellen på
   aktivt og dødt areal. Under grensen stables de som før. */
@media (min-width:1400px){
  .hero .wrap{
    /* Overskriften får akkurat den bredden de harde linjeskiftene
       krever, ingressen tar resten. Da holder oppdelingen seg selv
       om en oversettelse brekker annerledes. minmax(0,…) gjør at
       ingenting flyter utenfor hvis den blir for lang. */
    grid-template-columns:minmax(0,max-content) minmax(0,1fr);
    column-gap:clamp(2rem,3vw,3.5rem);
    row-gap:0;
  }
  .hero .sub{margin-top:0;padding-bottom:.4rem;max-width:none}
}

/* Display-type, ikke brødtekst. Måleregelen på 45-75 tegn gjelder
   løpende lesing i tekststørrelse og sier ingenting om overskrifter;
   her styrer de harde linjeskiftene i teksten bredden uansett.
   max-width står bare som sikkerhetsnett for oversettelsene, som
   brekker på andre steder enn engelsk. Klammen er bevisst ikke hevet:
   å blåse opp overskriften fyller flaten, men gjør den ikke mer
   lesbar. Bredden tas i bruk med et felt til, ikke med større type. */
.hero h1{font-size:clamp(2.7rem,6.4vw,5.4rem);font-weight:300;max-width:20ch;line-height:1.03}
.hero h1 em{font-style:italic}

/* Ingressen er brødtekst og holdes innenfor det leselige spennet.
   46ch lå helt i nedre kant av Bringhursts 45-75 og bidro til at
   blokken leste som en smal søyle; 52ch ligger nærmere midten,
   godt under WCAG AAA sin grense på 80. Den er bevisst smalere enn
   overskriften — det er trinnet som gjør komposisjonen asymmetrisk. */
.hero .sub{margin-top:1.6rem;max-width:52ch;font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.65;color:rgba(255,255,255,.88)}
.credit{position:absolute;inset-inline-end:var(--pad);bottom:1rem;z-index:2;font-size:.7rem;letter-spacing:.06em;color:rgba(255,255,255,.5)}

/* ---------- search ---------- */
.finder{background:var(--white);position:relative;z-index:4}
.finder .inner{display:grid;grid-template-columns:1fr 1fr auto;gap:0}
@media(max-width:840px){.finder .inner{grid-template-columns:1fr}}

/* variant: overlaps the bottom edge of a hero */
.finder--overlap{margin-top:calc(var(--finder-overlap) * -1);box-shadow:0 24px 60px -30px rgba(22,30,48,.4)}
@media(max-width:840px){:root{--finder-overlap:2rem}}

/* variant: sits inside a normal section */
.finder--inline{margin-block:0;border:1px solid var(--line);box-shadow:none}
/* Søkefeltet i avslutningskortet: begge flater er hvite, og
   .finder--inline setter box-shadow:none, så ramma er det eneste
   som skiller dem. Målt sto den til 1,31:1 mot kortet, under 3:1.
   Sandfarget bunn i feltet ble regnet ut og forkastet: 1,21:1, altså
   svakere enn ramma. Ramma er derfor mørknet i akkurat denne
   sammenhengen i stedet. */
.find .finder--inline{border-color:rgba(22,22,26,.5)}

/* variant: interior pages, shorter and quieter */
.finder--compact .field{padding-block:1rem}
.finder--compact .field select,.finder--compact .field select button{font-size:1.12rem}
.finder--compact .foot{display:none}
.field{padding:1.5rem clamp(1.25rem,3vw,2.25rem);border-inline-end:1px solid var(--line-soft)}
@media(max-width:840px){.field{border-inline-end:0;border-bottom:1px solid var(--line-soft)}}
/* ----- the dropdown: customizable select, with native fallback ----- */
:root{interpolate-size:allow-keywords}
.field{position:relative}
.field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.45rem}

/* fallback state (browsers without base-select) */
.field select{appearance:none;width:100%;border:0;background:transparent;font-family:var(--serif);
  font-size:1.35rem;color:var(--ink);cursor:pointer;padding-block:0;padding-inline:0 2rem;line-height:1.35;
  text-align:start;border-radius:0}
.field select:focus-visible{outline-offset:6px}

/* chevron: lives on .control so it centres on the select's own line, in both modes */
.control{position:relative;display:block}
.control::after{content:"";position:absolute;inset-inline-end:0;top:50%;
  width:.46rem;height:.46rem;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  translate:0 -68%;rotate:45deg;pointer-events:none;
  transition:rotate .2s var(--e),translate .2s var(--e),border-color .2s var(--e)}
.control:has(select:open)::after{rotate:-135deg;translate:0 -28%;border-color:var(--navy-2)}

/* opt in to the customizable select */
.field select,.field select::picker(select){appearance:base-select}
.field select::picker-icon{display:none}
.field select button{all:unset;display:flex;width:100%;align-items:baseline;cursor:pointer;
  font-family:var(--serif);font-size:1.35rem;color:var(--ink);line-height:1.35;padding-inline-end:2rem}

.field select::picker(select){
  appearance:base-select;
  margin-block-start:.9rem;
  min-inline-size:anchor-size(width);
  border:1px solid var(--line);
  background:var(--white);
  padding:.4rem;
  box-shadow:0 30px 70px -34px rgba(22,30,48,.55);
  max-height:22rem;
  opacity:0;translate:0 -8px;
  transition:opacity .2s var(--e),translate .22s var(--e),
             display .22s allow-discrete,overlay .22s allow-discrete;
}
.field select:open::picker(select){opacity:1;translate:0 0}
@starting-style{.field select:open::picker(select){opacity:0;translate:0 -8px}}

.field select option{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--serif);font-size:1.08rem;line-height:1.45;color:var(--ink);
  padding:.82rem 1rem;background:var(--white);cursor:pointer;
  transition:background .14s var(--e),color .14s var(--e);
}
.field select option:not(:last-child){box-shadow:inset 0 -1px 0 var(--line-soft)}
.field select option:hover,
.field select option:focus{background:var(--sand);outline:0}
.field select option:checked{color:var(--navy);font-weight:500;background:var(--navy-tint)}
.field select option::checkmark{
  order:1;margin-inline-start:auto;content:"";
  width:.42rem;height:.72rem;border:solid var(--navy-2);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translateY(-2px);
}
.field select option:not(:checked)::checkmark{visibility:hidden}

@media(prefers-reduced-motion:reduce){
  .field select::picker(select){transition:display .01s allow-discrete,overlay .01s allow-discrete;translate:none}
  .control::after{transition:none}
}
.submit{border:0;background:var(--navy-2);color:#fff;font-family:var(--sans);font-weight:600;
  font-size:1rem;padding:0 clamp(2rem,4vw,3.5rem);cursor:pointer;transition:background .2s var(--e)}
.submit:hover{background:var(--navy)}
@media(max-width:840px){.submit{padding-block:1.15rem}}
.finder .foot{border-top:1px solid var(--line-soft);padding:.85rem clamp(1.25rem,3vw,2.25rem);
  display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;font-size:.86rem;color:var(--ink-2)}
.finder .foot b{color:var(--navy-2);font-weight:600}

/* ---------- intro ---------- */
.intro{padding-block:clamp(4rem,9vw,7.5rem)}
.intro .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start}
@media(max-width:880px){.intro .wrap{grid-template-columns:1fr;gap:1.5rem}}
.intro h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:300;max-width:16ch}
.intro p{color:var(--ink-2);font-size:1.09rem;max-width:60ch}
.intro p+p{margin-top:1.15rem}

/* ---------- matters ---------- */
.matters{padding-bottom:clamp(4rem,9vw,7rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(1.5rem,3vw,2.75rem)}
.matter{display:block;text-decoration:none}
.shot{overflow:hidden;background:var(--sand-deep);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.matter h3{font-size:1.4rem;margin-top:1.25rem;font-weight:400}
.matter p{margin-top:.6rem;color:var(--ink-2);font-size:.98rem;line-height:1.65}
.matter .meta{margin-top:.9rem;font-size:.83rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-2);font-weight:600}
/* CTA under kortene: tekst og knapp på én linje, hårstrek over. Knappen
   arver .btn og .btn--solid; margin-top nullstilles fordi raden selv
   har avstanden. */
.more-topics{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.more-topics p{margin:0;color:var(--ink-2);max-width:52ch}
.more-topics .btn{margin-top:0}

/* ---------- statement band ---------- */
.band{position:relative;min-height:clamp(380px,52vh,560px);display:grid;place-items:center;overflow:hidden;background:var(--navy)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:rgba(18,26,42,.6)}
.band .wrap{position:relative;z-index:2;text-align:center;color:#fff;padding-block:4rem}
.band blockquote{margin:0;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.28;max-width:20ch;margin-inline:auto}
.band .who{margin-top:1.5rem;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.68)}

/* ---------- advocates ---------- */
.advocates{background:var(--white);padding-block:clamp(4rem,8vw,6.5rem)}
.head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:end;justify-content:space-between}
.head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:300;max-width:18ch}
.head .note{font-size:.95rem;color:var(--ink-2);max-width:36ch}
/* <wakeel-find>: samme seksjon som forsidens advokatliste, med søkefeltet
   rett under overskriften. Brukes over bunnteksten på alle guidesider. */
wakeel-find{display:block}
.advocates .head + wakeel-finder{display:block;margin-top:clamp(1.4rem,3vw,2.25rem)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.25rem}
.chip{font-size:.86rem;padding:.45rem .85rem;border:1px solid var(--line);background:var(--white);color:var(--ink-2);white-space:nowrap}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}
.chip span{opacity:.6;margin-inline-start:.35rem}
.list{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line-soft);padding-block:1.75rem;display:grid;
  grid-template-columns:3.4rem minmax(0,1fr) auto;gap:1.4rem;align-items:start}
@media(max-width:720px){.row{grid-template-columns:3.4rem minmax(0,1fr)}.row .side{grid-column:2;text-align:start;align-items:start}}
.row.featured{background:var(--sand);margin-inline:calc(var(--pad)*-.4);padding-inline:calc(var(--pad)*.4)}
.av{width:3.4rem;height:3.4rem;border-radius:50%;background:var(--navy-tint);color:var(--navy);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem}
.row h3{font-size:1.25rem;font-weight:400;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.tag{font-family:var(--sans);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;padding:.2rem .5rem;border:1px solid var(--line);color:var(--ink-3)}
.row .firm{font-size:.95rem;color:var(--ink-2);margin-top:.2rem}
.can{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .95rem;margin:.85rem 0 0;padding:0;font-size:.89rem;color:var(--navy)}
.can li::before{content:"✓";margin-inline-end:.4rem;color:var(--navy-2)}
.side{display:grid;gap:.6rem;justify-items:end;text-align:end}
.side .fee{font-size:.86rem;color:var(--ink-3)}
.side a{font-size:.92rem;font-weight:600;text-decoration:none;color:var(--navy-2);border-bottom:1px solid currentColor;padding-bottom:1px}
.advocates .fine{margin-top:1.5rem;font-size:.86rem;color:var(--ink-3);max-width:62ch}

/* ---------- verify ---------- */
.verify{background:var(--navy);color:#fff;padding-block:clamp(3.5rem,7vw,6rem)}
.verify .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2rem,5vw,5rem)}
.verify h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:300;color:#fff;max-width:15ch}
.verify > .wrap > div > p{margin-top:1.1rem;color:rgba(255,255,255,.78);max-width:48ch}

/* De tre linjene. Tallet kommer fra en CSS-teller, så 01, 02 og 03
   ikke trenger å ligge i markup eller i i18n.js. */
.checks{list-style:none;margin:var(--sec-head) 0 0;padding:0;align-content:center;counter-reset:check;
  container:checks / inline-size}
.checks li{counter-increment:check;border-top:1px solid rgba(255,255,255,.22);
  padding-block:1.15rem;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:1rem;row-gap:.3rem;align-items:baseline}
.checks li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.checks li::before{content:counter(check,decimal-leading-zero);
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.checks h3{font-family:var(--sans);font-size:.95rem;font-weight:600;color:#fff;
  letter-spacing:0}
.checks p{grid-column:2;margin:0;font-size:.95rem;color:rgba(255,255,255,.7)}
/* Navn og forklaring står side om side når spalten er bred nok, ellers
   legger forklaringen seg under navnet. Målt på spalten og ikke på vinduet:
   .checks er halve bredden, så et vindusmål på 62rem ga en forklaringsspalte
   på 234 px og tre linjebrekk per punkt. */
@container checks (min-width:32rem){
  .checks li{grid-template-columns:auto 8.5rem minmax(0,1fr)}
  .checks p{grid-column:3;grid-row:1}
}
.btn{display:inline-block;margin-top:1.9rem;background:#fff;color:var(--navy);text-decoration:none;
  font-weight:600;font-size:var(--t-body);padding:.9rem 1.7rem;transition:.2s var(--e)}
.btn:hover{background:var(--sand)}

/* ---------- guide: innholdsside ---------- */
/* Hvor langt bildet faller ned forbi kanten av beigefeltet. Feltets
   bunnpolstring og artikkelens topp regnes ut fra den, så de tre ikke kan
   gli fra hverandre. Samme konstruksjon som --finder-overlap. */
:root{--fig-drop:clamp(2rem,5vw,4.5rem)}

/* Siden har ikke hero, så teksten må starte under headerens høye
   tilstand (88 px), ikke under den sammenkrympede (60 px). */
.guide-top{background:var(--sand-deep);
  padding-block:calc(88px + clamp(2.5rem,5vw,4rem)) var(--fig-drop)}
.guide-top .wrap{display:grid;gap:clamp(2rem,4vw,3rem)}
/* Fra 1200 px står bildet ved siden av tittelen. Under det stables de,
   og bildet kommer etter teksten slik det står i kilden.

   Bildet er ankeret. Begge kolonner starter på samme linje (kicker og
   bildekant), og «Where this applies» skyves ned til bildets nedre
   feltkant. Tittelen skalerer med kolonnebredden (cqi), ikke med
   vinduet, så den brekker likt på alle skjermbredder. Da får alle
   guidesidene samme høyde og samme bildeplassering, uansett hvor lang
   tittelen, ingressen eller «Where this applies» er.

   Målt 11.09.2026 på alle 11 guidesider, engelsk, 1200–2560 px: teksten
   er alltid lavere enn bildet, med 12 px å gå på ved 1200 og 50–65 px
   fra 1440 og opp. Den lengste sida er divorce-abroad (tre linjer tittel
   og tre «where»-setninger). Under 1200 px fikk ikke teksten plass ved
   siden av bildet på de lengste sidene, derfor stables det der. */
@media(min-width:1200px){
  .guide-top .wrap{grid-template-columns:1fr 1fr;
    column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .guide-intro{display:flex;flex-direction:column;align-self:stretch;container-type:inline-size}
  .guide-intro .lead{margin-bottom:1.9rem}
  .guide-intro .where{margin-top:auto}
}
.guide-top .kicker{color:var(--ink-2)}
/* Mindre enn forsidens hero, og uten 15ch-taket: titlene brekker der
   <br> står, ikke i tillegg på kolonnebredden. */
.guide-top h1{margin-top:1.1rem;font-size:clamp(2.4rem,5.2vw,3.9rem);font-weight:300;
  line-height:1.02;letter-spacing:-.022em}
/* Står etter regelen over, så den vinner. Ti prosent av kolonnebredden:
   ved 1200 px er det 50 px, fra 1440 px 59 px. */
@media(min-width:1200px){.guide-top h1{font-size:clamp(2.2rem,10cqi,4.2rem)}}
.guide-top h1 em{font-style:italic;color:var(--ink-2)}
.guide-top .lead{margin-top:1.5rem;font-size:var(--t-lead);line-height:1.55;
  max-width:46ch;color:var(--ink)}
.where{margin-top:1.9rem;padding-top:1.05rem;border-top:1px solid var(--line);
  max-width:46ch;display:grid;gap:.45rem;font-size:var(--t-small);color:var(--ink-2)}

/* Kilden er 3:4. Bildet står i samme format, så ingenting beskjæres, og
   faller ned forbi feltkanten og inn i den lyse flaten under.
   Ved siden av teksten er det kolonnebredden alene som styrer høyden;
   et max-height her gjorde bildet ulikt fra skjerm til skjerm.
   Plassen til bildeteksten (2rem) er reservert også på sidene som ikke
   har kreditering, så bildet og feltet ender på samme sted overalt. */
.guide-figure{margin:0 0 calc(-2 * var(--fig-drop));
  display:grid;grid-template-rows:auto minmax(2rem,auto)}
.guide-figure img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  background:var(--sand)}
/* height:auto fordi bildene nå har width/height-attributter (CLS); uten den
   ville height="1600" vunnet over aspect-ratio. */
/* Stablet (under 1200 px) er bildet like bredt som teksten; uten et tak
   ville det blitt over 1000 px høyt på et nettbrett. */
@media(max-width:1199px){.guide-figure img{max-height:78vh}}
/* .credit er absolutt posisjonert for hero. Her står den i flyten
   under bildet, men beholder samme skriftgrad. */
.guide-figure .credit{position:static;margin-top:.7rem;align-self:start;font-size:var(--t-label);color:var(--ink-3)}

.guide{padding-block:calc(2 * var(--fig-drop) + clamp(2.5rem,5vw,4rem)) clamp(4rem,8vw,7rem)}
.guide .wrap{display:grid;gap:clamp(2.25rem,4vw,3.5rem)}
/* Innholdsfortegnelsen legger seg til venstre og blir stående ved scroll
   først når kolonnen faktisk har plass til den ved siden av teksten. */
@media(min-width:1100px){
  .guide .wrap{grid-template-columns:14rem minmax(0,1fr);
    column-gap:clamp(3rem,6vw,7rem);align-items:start}
  .rail{position:sticky;top:84px}
}

/* Tre små versal-etiketter over hverandre («Guide», «On this page»,
   «Where this applies») leser som stillas, ikke som stemme. Kickeren
   øverst får være den ene som er sperret; disse to er vanlig tekst. */
.rail-h{margin:0;font-family:var(--sans);font-size:var(--t-small);font-weight:600;color:var(--ink)}
.where-label{font-family:var(--sans);font-size:var(--t-small);font-weight:600;color:var(--ink)}
/* De to siste linjene i «Where this applies» er ting som ligger UTENFOR
   siden. De står lysere enn den første, som er det siden faktisk dekker,
   så avgrensningen leses som avgrensning og ikke som mer innhold. */
.where-out{color:var(--ink-3)}
/* Skinna. Hårstreken ligger på lista, det aktive segmentet tegnes av
   lenkas ::before oppå den. Logiske egenskaper hele veien: urdu speiler
   hele oppsettet. */
.rail ol{list-style:none;margin:.9rem 0 0;padding:0 0 0 0;counter-reset:rail;
  font-size:var(--t-small);border-inline-start:1px solid var(--line)}
.rail li{counter-increment:rail;position:relative}
.rail a{display:grid;grid-template-columns:1.7rem minmax(0,1fr);align-items:baseline;
  padding-block:.42rem;padding-inline-start:1rem;
  text-decoration:none;color:var(--ink-3);transition:color .18s var(--e)}
/* Segmentet dekker hårstreken på nøyaktig denne lenkas høyde. */
.rail a::after{content:"";position:absolute;inset-block:0;
  inset-inline-start:-1px;width:2px;background:transparent;
  transition:background .18s var(--e)}
.rail a::before{content:counter(rail,decimal-leading-zero);font-size:var(--t-label);
  font-variant-numeric:tabular-nums;color:var(--ink-3);
  transition:color .18s var(--e)}
.rail a:hover{color:var(--ink)}

/* Tre tilstander. Lest står mellom de to andre: mørkere enn det hun
   ikke har sett, lysere enn det hun står i. */
.rail a[data-read="true"]{color:var(--ink-2)}
.rail a[data-read="true"]::before{color:var(--ink-3)}

/* Aktiv tilstand. Malingen har én kilde: [aria-current], satt av
   observatøren i components.js.

   :target-current er prøvd og forkastet som malingskilde, ikke glemt.
   Målt i Chrome, der scroll-target-group støttes: den nativen velger
   samme lenke som observatøren overalt unntatt i siste seksjon, som den
   ikke kan velge fordi seksjonens topp aldri når merkelinja når siden
   er kortere enn ett vindu forbi den. Observatøren håndterer det
   tilfellet. To malingskilder som er uenige nettopp der lista slutter
   er verre enn én som er riktig hele veien.

   scroll-target-group blir stående: den gir nettleseren grupperingen,
   og gjør at :target-current kan overta som eneste kilde den dagen den
   også treffer siste element. Da fjernes reglene under. */
@supports (scroll-target-group: auto){
  .rail ol{scroll-target-group:auto}
}
.rail a[aria-current="true"]{color:var(--ink)}
.rail a[aria-current="true"]::before{color:var(--navy-2)}
.rail a[aria-current="true"]::after{background:var(--navy-2)}
/* Tillitsblokka. Står ett sted om gangen: i skinna når den er framme,
   ellers nederst i artikkelen. */
.trust{display:block;margin-top:1.6rem;padding-top:1.1rem;
  border-top:1px solid var(--line)}
.trust-h{margin:0;display:flex;align-items:center;gap:.45rem;
  font-family:var(--sans);font-size:var(--t-label);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy-2)}
.trust-i{inline-size:.95rem;block-size:.95rem;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.trust-date{margin:.5rem 0 0;font-family:var(--sans);font-size:var(--t-small);
  font-weight:600;color:var(--ink)}
/* Jurisdiksjonen på egen linje: hvor det gjelder er en annen opplysning
   enn når det ble sjekket, og skal ikke leses som del av datoen. */
.trust-where{margin:.15rem 0 0;font-size:var(--t-label);color:var(--ink-3)}

.rail .trust{display:none}
/* Barnevelger for å slå .guide-body p, som ellers vinner på
   spesifisitet og la --sec-card oppå gapet. */
.guide-body > .trust{margin-block-start:0}
@media(min-width:1100px){
  .rail .trust{display:block}
  .guide-body > .trust{display:none}
}

/* Avstanden mellom seksjonene er større enn avstanden fra en overskrift
   ned til det den gjelder for. Uten den forskjellen flyter en overskrift
   like mye sammen med seksjonen under som med sin egen. */
.guide-body{display:grid;gap:var(--sec);align-content:start;counter-reset:sec}
/* Ingen seksjon har egne tall. Første og siste barn nullstilles, så det
   bare er gapet som teller og lufta ikke kan ligge to steder samtidig. */
.guide-body > * > :first-child{margin-block-start:0}
.guide-body > * > :last-child{margin-block-end:0}
/* Målebåndet ligger på seksjonen, ikke på komponenten: et element kan
   ikke spørre sin egen container. Spalten er halve sidebredden når
   innholdsfortegnelsen er framme, så vindusbredde ville løyet. */
.guide-body,
.guide-body > section{container:guide / inline-size}

/* Barnevelger: en seksjon nøstet inne i en annen (spørsmålspanelet på
   talaq-siden) skal verken telle opp eller få et nummer. */
.guide-body > section{counter-increment:sec}
/* Seksjonsnummeret svarer til nummeret i innholdsfortegnelsen. */
.guide-body > section > h2::before{content:counter(sec,decimal-leading-zero);display:block;
  font-family:var(--sans);font-size:var(--t-label);letter-spacing:.14em;font-weight:600;
  color:var(--ink-3);margin-bottom:.85rem}
.guide-body h2{font-size:var(--t-h2);font-weight:300;max-width:22ch;letter-spacing:-.018em}

/* Mellomtittel inne i en seksjon, over et kort. Barnevelger, så den ikke
   treffer h3 inne i .topics, .fork eller stegkortet, som har sine egne
   størrelser.

   Luften er --sec-head, samme avstand som overskrift mot kort ellers på
   siden, så det tredje nivået faller inn i rytmen i stedet for å lage
   sitt eget. Den er ikke nummerert: telleren hører til h2. */
.guide-body > section > h3{margin-top:var(--sec-head);
  font-size:var(--t-h3);font-weight:400;color:var(--ink);max-width:32ch}
.guide-body p{margin-top:var(--sec-card);color:var(--ink-2);max-width:58ch}

/* Gaffelen: to gjensidig utelukkende veier, som ÉN ting.
   Innholdet har to forskjellige relasjoner, og de skal ikke se like ut.
   Talaq/khula og special/general POA er enten-eller. NADRA-registrering og
   anerkjennelse er trinn som følger uansett hvilken vei hun gikk. Denne
   komponenten er bare for det første: én ramme, én delelinje, ett «or».
   Rammen er det som gjør at overskriften over eier begge halvdelene. */
.fork{position:relative;margin-top:var(--sec-head);background:var(--white);
  border:1px solid var(--line)}
.fork-side{display:block;padding:clamp(1.5rem,3vw,2.25rem);
  text-decoration:none;color:inherit}
/* Delelinjen står vannrett når rammen er smal, loddrett når den er bred.
   Målt på rammen og ikke på vinduet: den står i en spalte som er halve
   sidebredden når innholdsfortegnelsen er framme. */
.fork-side ~ .fork-side{border-top:1px solid var(--line)}
@container guide (min-width:34rem){
  .fork{display:grid;grid-template-columns:1fr 1fr}
  .fork-side ~ .fork-side{border-top:0;border-inline-start:1px solid var(--line)}
}
/* «or» sitter oppå delelinjen og bryter den. Det er hele poenget med
   seksjonen sagt med ett ord, så det skal stå i krysset og ikke i prosa. */
/* Fysisk left, ikke inset-inline-start: delelinjen står geometrisk midt
   på rammen i begge leseretninger, så en logisk egenskap ville flyttet
   merket bort fra linjen i urdu. Målt: 30 px av senter før dette. */
.fork-or{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:1;
  background:var(--white);padding:.5rem .35rem;
  font-family:var(--sans);font-size:var(--t-label);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fork h3{font-size:var(--t-h3);font-weight:400}
/* Hvem som gjør hva er det leseren skiller de to på, så den linjen står
   over navnet og ikke under det. */
.fork .who{font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  color:var(--navy-2);margin-bottom:.5rem}
.fork p{margin-top:.75rem;font-size:var(--t-small);color:var(--ink-2);max-width:38ch}
.fork .more{display:inline-block;margin-top:1.1rem;font-family:var(--sans);
  font-size:var(--t-small);font-weight:600;color:var(--navy-2)}
.fork .more::after{content:"→";margin-inline-start:.4rem;display:inline-block;
  transition:transform .18s var(--e)}
html[dir="rtl"] .fork .more::after{content:"←"}
a.fork-side:hover{background:var(--sand)}
a.fork-side:hover .more::after{transform:translateX(.25rem)}
html[dir="rtl"] a.fork-side:hover .more::after{transform:translateX(-.25rem)}

/* Stegene står på hvitt, så de leses som en egen enhet i den beige
   spalten.

   Én sammenhengende hårstrek, ikke sirkler på en brutt linje. Dette er
   én sekvens der hvert steg forutsetter det forrige, og en linje som
   stopper for hvert nummer sier det motsatte. Tallet står derfor i
   margen til venstre for streken, ikke oppå den.

   Streken tegnes av hvert punkts ::after over hele punktets høyde,
   polstringen medregnet. Punktene støter mot hverandre, så segmentene
   møtes og leses som én strek. */
.steps-card{margin-top:var(--sec-head);background:var(--white);border:1px solid var(--line-soft);
  padding:clamp(1.5rem,3vw,2.4rem);
  --steg-marg:2.1rem;      /* margen der numrene og etiketten står */
  --steg-gap:clamp(1.1rem,2.5vw,1.75rem)}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{counter-increment:step;position:relative;
  display:grid;grid-template-columns:var(--steg-marg) minmax(0,1fr);
  column-gap:var(--steg-gap);
  /* Grunnlinje, ikke topp: tallet og tittelen skal stå på samme linje,
     og de har forskjellig skriftgrad. */
  align-items:baseline;
  padding-bottom:1.7rem}
.steps li:last-child{padding-bottom:0}
.steps li h3{grid-column:2;grid-row:1}
.steps li p{grid-column:2;grid-row:2}
.steps li::before{content:counter(step,decimal-leading-zero);
  grid-column:1;grid-row:1;text-align:end;
  font-family:var(--sans);font-size:var(--t-label);font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.steps li::after{content:"";position:absolute;inset-block:0;
  inset-inline-start:calc(var(--steg-marg) + var(--steg-gap) / 2);
  width:1px;background:var(--line)}
.steps h3{font-family:var(--sans);font-size:var(--t-body);font-weight:600;letter-spacing:0}
.steps p{margin-top:.5rem;font-size:var(--t-small)}

/* Notisen hører til sekvensen og står derfor inne i kortet, under en
   hårstrek. Etiketten står i samme marg som numrene, så margen betyr
   én ting hele veien ned. Samme mønster som datoen i margen på
   fullmaktssiden. */
.steps-note{margin:1.7rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:var(--steg-marg) minmax(0,1fr);
  column-gap:var(--steg-gap);align-items:baseline}
.steps-note b{text-align:end;font-family:var(--sans);font-size:var(--t-label);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.steps-note span{color:var(--ink-2);font-size:var(--t-small);max-width:54ch}

/* På smal skjerm spiser margen for mye av tekstbredden. Den krymper,
   teksten får plassen, og streken følger med av seg selv fordi den er
   regnet ut fra de samme to tallene. */
@media(max-width:560px){
  .steps-card{padding:1.15rem;--steg-marg:1.6rem;--steg-gap:.85rem}
}

/* Datoen er nyheten i denne seksjonen, så den settes som tall og ikke
   gjemmes inne i avsnittet. */
.apostille{margin-top:var(--sec-head);display:grid;gap:1.3rem}
@media(min-width:640px){
  .apostille{grid-template-columns:minmax(0,7rem) minmax(0,1fr);
    column-gap:clamp(1.5rem,3vw,2.75rem);align-items:start}
}
.apostille .date{margin:0;font-family:var(--serif);font-weight:300;color:var(--ink);
  font-size:var(--t-h2);line-height:1.05;
  border-top:2px solid var(--ink);padding-top:.85rem}
.apostille p+p{margin-top:var(--sec-card)}

.ask{background:var(--navy);color:#fff;padding:clamp(1.75rem,3.5vw,2.75rem)}
.ask h2{color:#fff;max-width:20ch}
.ask h2::before{color:rgba(255,255,255,.5)}
.ask ul{list-style:none;margin:var(--sec-head) 0 0;padding:0}
.ask li{border-top:1px solid rgba(255,255,255,.2);padding-block:.95rem;
  color:rgba(255,255,255,.82);font-size:var(--t-small);max-width:64ch}
.ask li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}

/* Hvitt, ikke det andre beigefeltet: bunnteksten rett under er beige,
   og to like flater etter hverandre leser som én. */
/* Slutten er det siste hun ser og hele grunnen til at siden finnes.
   Den skal veie noe. */
.find{background:var(--white);border:1px solid var(--line);
  padding:clamp(2rem,4.5vw,3.5rem)}
.find .btn{margin-top:var(--sec-head);padding:1.05rem 2.1rem}
/* Overskrift og ingress står på én linje der det er plass. Målt på
   1440: kortet har 792 px innhold, overskrifta trenger 725 og
   ingressen 611, mens 22ch og 58ch kappet begge til 601 og brøt dem
   i tre og to linjer. Ingen nowrap: på smalere skjerm MÅ de bryte,
   ellers får sida vannrett overflyt. */
.find h2{max-width:none}
.find > p{max-width:none}

.btn--solid{background:var(--navy-2);color:#fff}
.btn--solid:hover{background:var(--navy)}

/* Hub-siden: temaene i «After the divorce». Dette er trinn som følger
   uansett hvilken vei hun gikk, ikke et valg, så de deler én flate i
   stedet for å stå som to like kort. Samme logikk som gaffelen: én ramme
   rundt det som hører sammen.
   «Les mer» sto før i egen høyrespalte og havnet 100 px fra teksten den
   gjaldt. Den står nå rett under, så hver rad er én blokk. */
.topics{list-style:none;margin:var(--sec-head) 0 0;padding:0;
  background:var(--white);border:1px solid var(--line)}
.topics a{display:grid;padding:clamp(1.4rem,2.8vw,2rem);
  text-decoration:none;color:inherit;transition:background .18s var(--e)}
/* Er raden bred nok, står «les mer» på linje med overskriften i stedet
   for å flyte midt i et tomt høyrefelt. Under det legger den seg under
   teksten. Målt på panelet, ikke på vinduet. */
@container guide (min-width:40rem){
  .topics a{grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .topics .more{grid-column:2;grid-row:1;margin-top:.35rem;white-space:nowrap}
}
.topics li + li a{border-top:1px solid var(--line)}
.topics a:hover{background:var(--sand)}
.topics h3{font-size:var(--t-h3);font-weight:400}
.topics .sub{margin-top:.35rem;font-family:var(--sans);font-size:var(--t-small);
  font-weight:600;color:var(--ink)}
.topics p{margin-top:.6rem;color:var(--ink-2);font-size:var(--t-small);max-width:58ch}
.topics .more{display:inline-block;margin-top:1rem;font-family:var(--sans);
  font-size:var(--t-small);font-weight:600;color:var(--navy-2)}
.topics .more::after{content:"→";margin-inline-start:.45rem;display:inline-block;
  transition:transform .18s var(--e)}
html[dir="rtl"] .topics .more::after{content:"←"}
.topics a:hover .more::after{transform:translateX(.25rem)}
html[dir="rtl"] .topics a:hover .more::after{transform:translateX(-.25rem)}

/* Tallbåndet. Sida gikk 1152 px uten en eneste visuell hendelse, og
   nittidagersregelen, som er det hun faktisk venter på, lå gjemt midt i
   et avsnitt. Den er flyttet ut og satt som tall. Ett tall, én setning,
   ingen støttetall og ingen gradient: dette er en pull-figur fra
   redaksjonell sats, ikke et nøkkeltall-panel.
   Merk at regelen gjelder talaq alene, og etiketten sier det. */
/* Tallbåndet, <wakeel-figure-band>. Verten er selve båndet, så
   komponenten setter klassen på seg selv i stedet for å legge en
   wrapper til.

   Lufta over er --sec-head og under --sec: blokka hører til seksjonen
   over seg. Symmetrisk luft ville latt den flyte fritt mellom to
   seksjoner uten å høre til noen. Den negative margen trekker fra
   gapet i rutenettet. */
/* clip, ikke hidden: ingen rulleboks. Ordet er flyttet så det ligger
   innenfor av seg selv (målt til 5 px klaring), men et lengre ord på
   en senere side skal ikke kunne renne ut på sandflata utenfor. */
.figure-band{display:grid;overflow:clip;margin-top:calc(var(--sec-head) - var(--sec));
  background:var(--navy);color:#fff;
  padding:clamp(2rem,4.5vw,3.5rem);gap:clamp(1.25rem,3vw,2.5rem)}
/* Tallkolonna får et eget felt i stedet for å klemme seg rundt tallet.
   Målt før dette: kolonna var 114 px i et bånd på 904, mens ~300 px sto
   tomt til høyre for brødteksten. Vannmerket hadde da ingen flate å
   leses på, og 40 % av det lå rett under de opake sifrene. */
@container guide (min-width:34rem){
  .figure-band{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
    align-items:center;column-gap:clamp(2rem,5vw,4rem)}
  .fig-figure{width:auto}
}
/* Vannmerket ligger inne i tallkolonna og er absolutt plassert der.
   Det holder det bak tallet og utenfor brødteksten, uten at teksten
   må vite at vannmerket finnes. */
/* max-content, så kolonna alltid klemmer seg rundt tallet. Da er den
   også ankeret for vannmerket når båndet stables på smal skjerm. */
.fig-figure{position:relative;isolation:isolate;width:max-content}
.figure-band .n{position:relative;z-index:1;margin:0;color:#fff;
  font-family:var(--serif);font-weight:300;
  font-size:var(--t-fig);line-height:.82;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.figure-band .n span{font-size:.26em;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--sans);font-weight:600;display:block;margin-top:.9em;
  color:rgba(255,255,255,.6)}

/* Nastaliq har diagonal grunnlinje: ordet faller nedover mot venstre.
   Plasseringen er derfor forskjøvet opp og mot høyre, så halen ikke
   legger seg oppå enheten under tallet. Målt, ikke anslått. */
/* Vannmerket ligger nå i spørsmålspanelet, ikke i tallbåndet. Panelet
   står på hver innholdsside; båndet gjør ikke det.

   Sentrert, ikke forankret i en kant: da står ordet likt uansett hvor
   langt det er, og uten en egen RTL-variant, fordi midten er midten.
   Ikke logiske egenskaper her. Elementet har dir="rtl" på seg selv, så
   inset-inline-end ville løst seg opp til VENSTRE. Målt, ikke antatt.

   Tomt ord gir ingen boks: :empty slår den av, så mønsteret kan stå i
   markup før ordet er valgt. */
.ask{position:relative;overflow:clip}
.fig-word{position:absolute;z-index:0;pointer-events:none;user-select:none;
  top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--urdu);font-weight:400;line-height:1;
  font-size:clamp(5rem,14vw,11rem);color:rgba(255,255,255,.055);
  white-space:nowrap}
.fig-word:empty{display:none}
/* Spørsmålene skal ligge over ordet, ikke under det. */
.ask h2,.ask ul{position:relative;z-index:1}

.figure-band .lab{margin:0 0 .55rem;font-family:var(--sans);font-size:var(--t-label);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.figure-band p:not(.lab):not(.n){margin:0;color:rgba(255,255,255,.85);
  font-size:var(--t-lead);line-height:1.5;max-width:42ch}
html[lang="ur"] .figure-band p:not(.lab):not(.n){line-height:2.05}

/* Tema vi ikke har kilde på ennå. En åpen ramme uten fyll: det leser som
   en plass som står tom, ikke som et ferdig kort. (En farget stripe langs
   kanten ville vært det opplagte grepet, og det er nettopp derfor ikke.) */
/* .topics uten lenker: punkter å se etter, ikke steder å gå. Samme
   rader, men uten treffflate, pil og hover. */
.topics--plain li{padding:clamp(1.4rem,2.8vw,2rem)}
.topics--plain li + li{border-top:1px solid var(--line)}
/* Kriterieradene er ikke lenker. De får en lesetilstand og ikke en
   klikktilstand: bakgrunnstone som viser hvor raden begynner og
   slutter når blikket flytter seg nedover lista, men ingen løft,
   ingen pil og ingen pekerendring. Løftet i .topics a betyr «denne
   fører et sted», og det skal fortsette å bety bare det. */
.topics--plain li{transition:background .18s var(--e)}
.topics--plain li:hover{background:var(--sand)}
.topics--plain h3{font-size:var(--t-h3);font-weight:400}
.topics--plain p{margin-top:.6rem;color:var(--ink-2);font-size:var(--t-small);
  max-width:58ch}

/* Tilbake til oversikten. Understreket, fordi den står midt i prosa
   og ikke i en liste der plasseringen alene sier at det er en lenke. */
.backlink{color:var(--navy-2);font-weight:600;
  text-decoration-color:rgba(35,64,110,.35);text-underline-offset:.22em}
.backlink:hover{text-decoration-color:currentColor}

/* Brødsmuler øverst i toppfeltet på temasidene: Wakeel › What we cover ›
   gruppa › sida. Nåværende side sist, uten lenke. Spenner begge kolonner.
   På mobil vises bare nærmeste nivå over, så lista ikke bryter i flere
   linjer (NN/g). */
.crumbs{grid-column:1/-1;font-family:var(--sans);font-size:var(--t-small);color:var(--ink-3);margin-bottom:.4rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.crumbs li+li::before{content:"\203A";margin-inline-end:.5rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-color:currentColor}
.crumbs [aria-current]{color:var(--ink-3)}
@media(max-width:640px){.crumbs li:not(:nth-last-child(2)){display:none}.crumbs li:nth-last-child(2)::before{content:"\2039";margin-inline-end:.4rem}}
/* «More in …» før ordboksen: ett neste-kort med bilde, så rader med
   miniatyr (valgt 11.09.2026, variant A i LES-VIDERE-RESEARCH.md).
   Neste side i gruppa som kort, tre til og inntil to beslektede som
   rader. Hvitt kort med hårstrek, ingen skygge; bildene er sidenes egne
   og skiller radene fra hverandre. */
.more-in h3{margin-top:var(--sec-head);font-family:var(--sans);font-size:var(--t-small);font-weight:600;color:var(--ink)}
.more-in .all{margin-top:var(--sec-card);font-family:var(--sans);font-size:var(--t-small)}
.more-in .all a{color:var(--navy-2);font-weight:600;text-decoration:underline;text-decoration-color:rgba(35,64,110,.35);text-underline-offset:.22em}
.more-in .all a:hover{text-decoration-color:currentColor}
.next-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:clamp(1.1rem,2.5vw,1.75rem);
  margin-top:var(--sec-head);background:var(--white);border:1px solid var(--line);text-decoration:none;color:inherit}
/* Bildet fyller kortets høyde uansett hvor lang teksten er; 3:4 er bare
   minstemålet. object-fit beskjærer i stedet for å strekke. */
.next-card img{display:block;width:120px;height:100%;min-height:160px;object-fit:cover;align-self:stretch}
.next-body{display:flex;flex-direction:column;justify-content:center;padding:1.1rem 1.25rem 1.1rem 0;min-width:0}
.next-kicker{font-family:var(--sans);font-size:var(--t-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.next-title{font-family:var(--serif);font-size:1.35rem;line-height:1.25;color:var(--ink);margin-top:.35rem}
.next-text{font-size:var(--t-small);color:var(--ink-2);margin-top:.45rem;max-width:48ch}
.next-card .more{display:inline-block;margin-top:.9rem;font-family:var(--sans);font-size:var(--t-small);font-weight:600;color:var(--navy-2)}
.next-card .more::after{content:"→";margin-inline-start:.4rem;display:inline-block;transition:transform .18s var(--e)}
html[dir="rtl"] .next-card .more::after{content:"←"}
a.next-card:hover{background:var(--sand)}
a.next-card:hover .more::after{transform:translateX(.25rem)}
a.next-card:focus-visible{outline:2px solid var(--navy-2);outline-offset:2px}
@media(max-width:480px){.next-card{grid-template-columns:96px minmax(0,1fr)}.next-card img{width:96px;min-height:128px}.next-title{font-size:1.15rem}}
.read-on{list-style:none;margin:var(--sec-card) 0 0;padding:0;border-top:1px solid var(--line)}
.read-on li{border-bottom:1px solid var(--line)}
/* Radene markeres som kortet: sandfarget flate ved hover, litt utenfor
   teksten så bildet og ordene ligger inne i flaten. */
.read-on a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:1rem;align-items:center;padding:.7rem .75rem;margin:0 -.75rem;text-decoration:none;color:inherit}
.read-on a:hover{background:var(--sand)}
.read-on img{display:block;width:56px;height:56px;object-fit:cover}
.read-on b{display:block;font-family:var(--serif);font-weight:400;font-size:1.08rem;line-height:1.3;color:var(--ink)}
.read-on small{display:block;font-family:var(--sans);font-size:var(--t-label);color:var(--ink-3);margin-top:.15rem;letter-spacing:.04em}
.read-on a:hover b{color:var(--navy-2)}
.read-on a:focus-visible{outline:2px solid var(--navy-2);outline-offset:2px}

/* «Words you will meet»: ordene sida bruker, med det folk skriver i
   stedet. Hvit boks med hårstreker, som stegkortet. dt er ordet, dd
   forklaringen. Under 640 px stables de. Se SOKEFELT-RESEARCH.md. */
/* Punktlister i guideteksten (temasidene): samme farge og bredde som
   avsnittene, liten luft mellom punktene. */
.guide-body ul.list{margin:var(--sec-card) 0 0;padding-inline-start:1.15rem;color:var(--ink-2);max-width:58ch;display:grid;gap:.45rem}
.guide-body ul.list li::marker{color:var(--ink-3)}
.sources p,.related p{font-size:var(--t-small)}
.sources ul.list{font-size:var(--t-small)}
.sources a,.related a{color:var(--navy-2);font-weight:600;text-decoration:underline;text-decoration-color:rgba(35,64,110,.35);text-underline-offset:.22em}
.sources a:hover,.related a:hover{text-decoration-color:currentColor}
.words dl{margin:var(--sec-head) 0 0;background:var(--white);border:1px solid var(--line-soft)}
.words dl > div{display:grid;grid-template-columns:minmax(9rem,13rem) minmax(0,1fr);gap:.4rem 1.5rem;
  padding:1.05rem clamp(1.25rem,2.6vw,1.75rem)}
.words dl > div + div{border-top:1px solid var(--line-soft)}
.words dt{font-family:var(--serif);font-size:var(--t-h3);font-weight:400;line-height:1.25}
.words dd{margin:0;color:var(--ink-2);font-size:var(--t-small);max-width:52ch}
@media(max-width:640px){.words dl > div{grid-template-columns:1fr}}

/* Hårstrek, ikke stiplet. Stiplet leser som «her mangler det noe», og
   det er en redaksjonell beskjed, ikke informasjon for leseren. Se I9. */
.pending{margin-top:var(--sec-head);padding:clamp(1.4rem,2.8vw,2rem);
  border:1px solid var(--line);color:var(--ink-2);max-width:54ch;font-size:var(--t-small)}
.pending p{margin:0}

/* ---------- løft ved peking ---------- */
/* Bare på det som faktisk er klikkbart. Å løfte tekst som ikke er en
   lenke lover en handling som ikke finnes.

   To former, fordi elementene sitter forskjellig:

   Frittstående kort får en flate bak seg som vokser 20 px utover på
   alle sider. Innholdet står stille: flaten er et ::before med negativ
   inset, og kortet har sin egen stabel (isolation) så flaten ligger bak
   bildet og teksten, men over sida. Hvit flate med hårstrek, ikke skygge.
   Under 720 px er utsettet 16 px, fordi sidemargen er 20 px ved 390 og
   20 px utsett ville stukket utenfor kanten. Tastaturfokus får samme
   flate, med en 2 px kant i --navy-2 i stedet for nettleserens ring.
   Selve tilstanden står utenfor mediespørringen; bare overgangen ligger
   bak prefers-reduced-motion. Bare a.matter: kort uten lenke lover ingen
   handling og får ingen flate.

   Rader og gaffelhalvdeler ligger inne i én ramme med hårstreker mellom
   seg. Løftes boksen der, slipper den ramma, streken blir dobbel og
   panelet ser ødelagt ut. Innholdet løftes i stedet, mens raden blir
   liggende. Det er også det som faktisk ble bedt om: at teksten heves.

   transform, ikke top eller margin: layout-egenskaper skal ikke
   animeres. Kurven er --e, en ease-out uten tilbakesprett. */
:root{--card-out:20px}
@media(max-width:720px){:root{--card-out:16px}}
.matter{position:relative;isolation:isolate}
.matter::before{content:"";position:absolute;inset:calc(var(--card-out) * -1);z-index:-1;
  background:var(--white);border:1px solid var(--line);opacity:0;pointer-events:none}
a.matter:hover::before,
a.matter:focus-visible::before{opacity:1}
a.matter:focus-visible{outline:none}
a.matter:focus-visible::before{border:2px solid var(--navy-2)}

@media (prefers-reduced-motion: no-preference){
  .matter::before{transition:opacity .2s var(--e)}

  .topics a > div,
  .topics a > .more,
  a.fork-side > *{transition:transform .24s var(--e)}
  .topics a:hover > div,
  .topics a:hover > .more,
  a.fork-side:hover > *{transform:translateY(-2px)}
}

/* ---------- footer ---------- */
footer{background:var(--sand-deep);padding-block:clamp(3rem,6vw,4.5rem) 3rem;font-size:.92rem;color:var(--ink-2)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem}
footer h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0 0 .9rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
footer a{text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{border-color:var(--ink-2)}
.legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--ink-3);max-width:78ch}

/* ---------- motion ---------- */
@keyframes reveal{to{opacity:1;transform:scale(1)}}
.up{opacity:0;transform:translateY(18px);animation:up .9s var(--e) forwards}
.u2{animation-delay:.5s}.u3{animation-delay:.66s}.u4{animation-delay:.82s}
@keyframes up{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .up,.hero>img{animation:none;opacity:1;transform:none}
  .matter:hover .shot img{transform:none}
  /* Løftet ligger i en no-preference-blokk og slår aldri inn her, men
     transform nullstilles for sikkerhets skyld hvis en regel flyttes. */
  .matter:hover,
  .topics a:hover > div,
  .topics a:hover > .more,
  a.fork-side:hover > *{transform:none;box-shadow:none}
}

/* ============================================================
   URDU OG HØYRE-TIL-VENSTRE
   ------------------------------------------------------------
   Layouten speiles av seg selv: arket bruker logiske egenskaper
   (inline-start/end), så dir="rtl" på <html> er nok. Det som
   må sies eksplisitt er typografien — nastaliq oppfører seg
   ikke som en latinsk skrift.

   Nastaliq skriver diagonalt nedover fra høyre. Bokstavene
   henger langt under grunnlinjen, og med vanlig linjeavstand
   kolliderer linjene. W3C anbefaler minst 2.0; vi bruker 2.1
   for brødtekst og litt strammere for overskrifter, som har
   færre linjer å kollidere med.
   ============================================================ */

:root{ --urdu:"Noto Nastaliq Urdu", serif; }

/* Ordmerket i toppen sto før med var(--urdu). Det ga to ulike merker
   i samme nettsted: Nastaliq på sidene som lastet fonten for
   vannmerket, reservefonten alle andre steder. Målt, ikke antatt.

   Nå står merket likt overalt. Vannmerkefonten er dessuten subsatt til
   ti tegn, og ک og ل er ikke blant dem: med var(--urdu) her ville
   merket blitt tegnet med to fonter inne i ett ord. De to tegnene
   koster 19 KB, og det er en pris vi betaler for et 25 px ordmerke
   bare hvis noen bestemmer det.

   På ekte urdu-sider hentes hele fonten, og der setter
   html[lang="ur"] alt --serif til --urdu, så merket følger med
   av seg selv. Ingen egen regel trengs for det. */
.brand .ur,.lang .ur{font-family:var(--serif)}
.lang .ur{font-size:.95rem;padding-block:.15rem;line-height:1.9}

html[lang="ur"]{
  --serif:var(--urdu);
  --sans:var(--urdu);
}

html[lang="ur"] body{
  font-size:1.05rem;
  line-height:2.1;              /* nastaliq trenger luft */
  letter-spacing:normal;         /* sperring ødelegger sammenbindingen */
}

/* Overskrifter: nastaliq er allerede høy, så vi demper
   størrelsene noe og gir dem plass i stedet. */
html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3{
  line-height:1.75;
  letter-spacing:normal;
  font-weight:400;
}
html[lang="ur"] .hero h1{font-size:clamp(1.7rem,3.6vw,3rem);line-height:2.05;
  max-width:30ch}
/* ingressen: nastaliq trenger luft også i mindre grader */
html[lang="ur"] .hero .sub{line-height:2.15;max-width:52ch;font-size:clamp(1rem,1.3vw,1.1rem)}
html[lang="ur"] .intro p,
html[lang="ur"] .matter p,
html[lang="ur"] .verify p,
html[lang="ur"] .guide-body p,
html[lang="ur"] .guide-top .lead,
html[lang="ur"] .topics p,
html[lang="ur"] .ask li,
html[lang="ur"] .note,
html[lang="ur"] .fine,
html[lang="ur"] .legal{line-height:2.15}
/* kort og lister: litt strammere, de har korte linjer */
html[lang="ur"] .can,
html[lang="ur"] .chip,
html[lang="ur"] .finder .foot{line-height:1.95}
html[lang="ur"] .intro h2,
html[lang="ur"] .advocates h2,
html[lang="ur"] .guide-top h1,
html[lang="ur"] .guide-body h2,
html[lang="ur"] .verify h2{line-height:1.8}

/* Versaler finnes ikke i urdu; text-transform gir bare rot,
   og sperring bryter den kursive sammenbindingen. */
html[lang="ur"] .kicker,
html[lang="ur"] .tag,
html[lang="ur"] .credit,
html[lang="ur"] .guide-body > section > h2::before,
html[lang="ur"] .where b{text-transform:none;letter-spacing:normal}

/* Linjer med tall og latinske egennavn midt i urdu-tekst:
   la nettleseren håndtere blandingen selv. */
html[lang="ur"] .row .firm,
html[lang="ur"] .side .fee,
html[lang="ur"] .finder .foot span{unicode-bidi:plaintext}

/* Nastaliq har ingen halvfet som fungerer; simulert fet skrift
   smører glyfene. Vi markerer med farge i stedet. */
html[lang="ur"] b,
html[lang="ur"] strong{font-weight:400;color:var(--navy-2)}

/* Sitatet i båndet står i kursiv på latin; nastaliq har ikke
   kursiv, så vi lar det stå oppreist. */
html[lang="ur"] blockquote,
html[lang="ur"] em{font-style:normal}

/* RTL: det fåtallet reglene som ikke er logiske alt.
   Chevronen er en rotert firkant og peker ned i begge
   retninger, så den trenger ingen speiling. */
[dir="rtl"] .up{transform:translateY(18px)}

/* ---------- driftsopplysning i bunnen ---------- */
.legal--operator{
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line-soft);
  color:var(--ink-2);
  font-weight:500;
}
.legal--operator + .legal{
  margin-top:.85rem;
  padding-top:0;
  border-top:0;
}

/* «Most important»: det viktigste på en temaside i én setning, rett
   etter første avsnitt. Hvitt kort med hårstrek som steg-kortet, pluss
   en mørkeblå kant i innerkanten så øyet stopper der. Teksten kommer fra
   bokser.py. */
.key{margin-top:var(--sec-card);background:var(--white);border:1px solid var(--line-soft);
  border-inline-start:3px solid var(--navy-2);
  padding:clamp(1.25rem,2.5vw,1.75rem) clamp(1.4rem,3vw,2rem)}
.key .key-label{margin:0 0 .55rem;font-family:var(--sans);font-size:var(--t-label);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy-2)}
.key .key-text{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--ink);
  max-width:40ch;text-wrap:pretty}
/* Steg-kortet brukes også for «What has to be in place» på temasidene,
   der punktene bare har en tittel og ingen forklaring. */
.steps li h3:only-child{grid-row:1 / span 2}

/* ---------- profil: advokat- og firmasider ---------- */
/* Skrevet av lag-profiler.py. Alle klasser har pf- foran seg, så de ikke
   kolliderer med .chip, .filters, .side, .grid og .ask fra resten av
   stilarket. Toppen er identisk på alle fanene til en profil, så
   ingenting flytter seg når leseren bytter fane. */
.pf{padding-top:60px;background:var(--sand)}
.pf .wrap>.pf-crumbs{padding:.9rem 0 .6rem;font-size:.82rem;color:var(--ink-3)}
.pf-crumbs a{color:var(--ink-3)}
.pf-crumbs [aria-current]{color:var(--ink-2)}
.pf-frame{max-width:var(--wrap);margin:0 auto var(--sec);background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:clip}
@media(max-width:1440px){.pf-frame{margin-inline:var(--pad)}}
.pf-label{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.pf-fine{font-size:.85rem;color:var(--ink-3);margin-top:.6rem}
.pf-muted{color:var(--ink-3);font-size:.85rem}
.pf a{color:var(--navy-2);text-decoration-thickness:1px;text-underline-offset:3px}
.pf-tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1D7BD9;color:#fff;font-size:.62rem;font-weight:700;font-style:normal;vertical-align:-3px;margin-inline-start:.35rem;flex:none}
.pf-tick.sm{width:15px;height:15px;font-size:.55rem;margin-inline-start:.25rem}

/* topp */
.pf-cover{position:relative;height:210px;overflow:hidden;background:var(--sand-deep)}
.pf-cover.short{height:180px}
.pf-cover img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.pf-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.42))}
.pf-cover .hint{position:absolute;inset-inline-end:1rem;bottom:.8rem;z-index:1;font-size:.72rem;color:rgba(255,255,255,.85);border:1px dashed rgba(255,255,255,.5);padding:.2rem .55rem;border-radius:4px}
.pf-idhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.6rem;align-items:start;padding:0 1.6rem 1.4rem;min-height:190px}
.pf-logo{width:168px;height:168px;margin-top:-96px;border-radius:12px;background:var(--white);border:5px solid var(--white);box-shadow:0 4px 18px rgba(0,0,0,.18);display:grid;place-items:center;font-family:var(--serif);font-size:2.6rem;color:var(--navy-2);overflow:hidden;position:relative;z-index:1}
.pf-logo.mono{background:var(--navy);color:#fff;font-size:2.2rem;letter-spacing:.02em}
.pf-logo.person{border-radius:50%}
.pf-logo img{width:100%;height:100%;object-fit:cover}
.pf-idtext h1{font-size:clamp(1.7rem,3vw,2.35rem);margin-top:.9rem;font-weight:400;line-height:1.12}
.pf-idtext .sub{color:var(--ink-2);margin-top:.35rem;font-size:1.02rem}
.pf-idtext .one{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink-2);margin-top:.55rem;max-width:56ch;line-height:1.4}
.pf-verified{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.86rem;color:var(--ink-2);margin-top:.8rem}
.pf-verified .pf-tick{margin:0}
.pf-verified a{color:var(--ink-3)}
.pf-acts{display:flex;flex-direction:column;gap:.55rem;min-width:230px;padding-top:1rem}
.pf-acts .resp{font-size:.8rem;color:var(--ink-3);text-align:center}
.pf-btn{display:inline-block;font:inherit;font-weight:600;font-size:.94rem;padding:.75rem 1.1rem;border-radius:6px;border:1px solid var(--navy-2);background:var(--navy-2);color:#fff !important;text-align:center;text-decoration:none;cursor:pointer;margin:0;transition:.2s var(--e)}
.pf-btn:hover{background:var(--navy)}
.pf-btn.ghost{background:transparent;color:var(--navy-2) !important}
.pf-btn.ghost:hover{background:var(--navy-tint)}
.pf-btn.block{display:block}
.pf-factbar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--sand)}
.pf-factbar li{padding:.85rem 1.2rem;border-inline-start:1px solid var(--line-soft);min-width:0}
.pf-factbar li:first-child{border-inline-start:0}
.pf-factbar .pf-label{display:block;font-size:.66rem;margin-bottom:.1rem}
.pf-factbar b{font-weight:600;font-size:.96rem;display:block;overflow-wrap:anywhere}
.pf-factbar b.ok{color:#2F6B4F}
.pf-stabs{display:flex;gap:1.75rem;padding:0 1.6rem;border-bottom:1px solid var(--line);font-size:.93rem;font-weight:600;overflow-x:auto}
.pf-stabs a{padding:.95rem 0;white-space:nowrap;text-decoration:none;color:var(--ink-3)}
.pf-stabs a[aria-current]{color:var(--ink);border-bottom:2px solid var(--navy-2)}
.pf-onpage{position:sticky;top:60px;z-index:5;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;padding:.6rem 1.6rem;background:var(--white);border-bottom:1px solid var(--line);font-size:.84rem;min-height:2.9rem}
.pf-onpage .pf-label{margin-inline-end:.4rem}
.pf-onpage a{text-decoration:none;color:var(--ink-2);padding:.3rem .7rem;border-radius:999px;border:1px solid transparent}
.pf-onpage a.cur{color:var(--navy-2);border-color:var(--navy-2);background:var(--navy-tint)}
.pf-mbar{display:none}

/* to spalter, seksjoner i rammer */
.pf-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:1.6rem;padding:1.6rem;align-items:start;background:var(--sand)}
.pf-sec{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:1.15rem 1.4rem 1.3rem}
/* Ankerlanding: fast topp 60px + «On this page» + luft. Egen regel med
   høyere spesifisitet enn den globale scroll-margin-top på section. */
.pf .pf-sec{scroll-margin-top:calc(60px + 4.6rem)}
.pf-sec+.pf-sec{margin-top:1rem}
.pf-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-soft)}
.pf-sec h2{font-size:1.35rem;font-weight:400;margin:0;line-height:1.15}
.pf-sec h3,.pf-cols2 h3{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin:0 0 .7rem}
.pf-sec h3.gap{margin-top:1.1rem}
.pf-sec p{max-width:64ch;color:var(--ink-2)}
.pf-src{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .55rem;border-radius:4px;white-space:nowrap}
.pf-src.self{color:var(--ink-3);background:var(--sand)}
.pf-src.counted{color:var(--navy-2);background:var(--navy-tint)}
.pf-cols2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.pf-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.pf-chip{display:inline-block;font-size:.9rem;font-weight:600;padding:.48rem .9rem;border-radius:999px;background:var(--navy-tint);color:var(--navy-2);text-decoration:none}
.pf-chip.sub{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.pf-chipgroup+.pf-chipgroup{margin-top:.9rem}
.pf-chipgroup .pf-label{display:block;margin-bottom:.4rem}
.pf-fees{width:100%;border-collapse:collapse;font-size:.95rem}
.pf-fees th,.pf-fees td{text-align:start;padding:.7rem .2rem;border-top:1px solid var(--line-soft);vertical-align:top}
.pf-fees tr:first-child th,.pf-fees tr:first-child td{border-top:0}
.pf-fees th{font-weight:500;color:var(--ink-3);width:38%}
.pf-fees td{font-weight:500;font-variant-numeric:tabular-nums}
.pf-fees td small{display:block;font-weight:400;color:var(--ink-3);font-size:.84rem}
.pf-abroad{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pf-abroad div{background:var(--white);padding:.8rem 1rem}
.pf-abroad .pf-label{display:block;font-size:.68rem;margin-bottom:.25rem}
.pf-abroad p{font-size:.92rem;color:var(--ink)}
.pf-tl{position:relative;padding-inline-start:1.4rem;list-style:none;margin:0}
.pf-tl::before{content:"";position:absolute;inset-inline-start:5px;top:.5rem;bottom:.5rem;width:2px;background:var(--line)}
.pf-tl li{position:relative;padding:.1rem 0 .8rem}
.pf-tl li::before{content:"";position:absolute;inset-inline-start:-1.4rem;top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--white);border:2px solid var(--navy-2)}
.pf-tl li.now::before{background:var(--navy-2)}
.pf-tl .yrs{font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pf-tl b{display:block;font-weight:600;font-size:1.02rem}
.pf-tl .d{color:var(--ink-2);font-size:.93rem}
.pf-rows{list-style:none;margin:0;padding:0}
.pf-rows li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-top:1px solid var(--line-soft);font-size:.95rem;align-items:baseline}
.pf-rows li:first-child{border-top:0;padding-top:0}
.pf-rows b{font-weight:600}
.pf-rows .d{display:block;color:var(--ink-2);font-size:.88rem}
.pf-rows .yr{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.88rem}
.pf-prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.8rem 0;border-top:1px solid var(--line-soft);text-decoration:none;color:inherit !important}
.pf-prow:first-child{border-top:0;padding-top:0}
.pf-prow b{font-family:var(--serif);font-size:1.15rem;font-weight:400}
.pf-prow .d{display:block;color:var(--ink-2);font-size:.9rem}
.pf-prow .m{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.3rem;font-size:.82rem;color:var(--ink-3);align-items:center}
.pf-prow .go{color:var(--navy-2);font-weight:600;white-space:nowrap}
.pf-prow[hidden]{display:none}
.pf-dir .pf-prow{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:10px;background:var(--white);margin-top:.8rem}
.pf-dir .pf-prow:first-child{margin-top:0}
.pf-ava{width:42px;height:42px;border-radius:50%;background:var(--sand-deep);overflow:hidden;flex:none;display:grid;place-items:center;font-family:var(--serif);color:var(--navy-2);text-decoration:none}
.pf-ava img{width:100%;height:100%;object-fit:cover}
.pf-ava.sq{border-radius:7px;background:var(--navy);color:#fff !important;font-size:.8rem;font-family:var(--sans);font-weight:600}
.pf-prow .pf-ava{width:60px;height:60px}
.pf-posts{display:grid;gap:1rem}
.pf-post{display:grid;grid-template-columns:160px minmax(0,1fr);gap:1.1rem;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit !important}
.pf-post .th{height:100%;min-height:104px;background:var(--sand-deep)}
.pf-post .th img{width:100%;height:100%;object-fit:cover}
.pf-post .tx{padding:.8rem 1rem .8rem 0}
.pf-post h3{font-family:var(--serif);font-size:1.15rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.pf-post .tag{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
.pf-post .pf-muted{display:block;margin-top:.25rem}
.pf-post[hidden]{display:none}
.pf-disclaim{display:flex;gap:.7rem;align-items:flex-start;border-inline-start:3px solid #D9C89A;background:#FBF6E6;padding:.75rem .95rem;font-size:.86rem;color:var(--ink-2);border-radius:0 6px 6px 0;max-width:none;margin-top:1rem}
.pf-disclaim .i{flex:none;width:20px;height:20px;border-radius:50%;background:#D9C89A;color:#3A3010;font-weight:700;font-size:.75rem;display:grid;place-items:center;margin-top:.1rem}
.pf-sec .pf-disclaim:first-child{margin-top:0;margin-bottom:1rem}
.pf-disclaim[hidden],.pf-sent[hidden],.pf-prow[hidden],.pf-post[hidden]{display:none}
.pf-ask{background:var(--navy);color:#fff;border-color:var(--navy)}
.pf-ask h2{color:#fff;font-size:1.35rem;margin-bottom:.55rem}
.pf-ask ul{list-style:none;margin:0;padding:0}
.pf-ask li{padding:.45rem 0;border-top:1px solid rgba(255,255,255,.14);font-size:.95rem}
.pf-ask li:first-child{border-top:0}
.pf-ask p{color:rgba(255,255,255,.72);font-size:.85rem;margin-top:.6rem;max-width:none}
.pf-filters{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem}
.pf-filters button{font:inherit;font-size:.88rem;font-weight:600;padding:.42rem .9rem;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:transparent;cursor:pointer}
.pf-filters button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* høyrespalten */
.pf-side{display:flex;flex-direction:column;gap:1rem;position:sticky;top:6.6rem}
.pf-box{border:1px solid var(--line);border-radius:8px;padding:1.15rem 1.25rem;overflow:hidden;background:var(--white)}
.pf-box h3{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin:0 0 .75rem}
.pf-box h3+h3,.pf-box ul+h3{margin-top:1rem}
.pf-box p{font-size:.93rem;color:var(--ink-2)}
.pf-box.photo{padding:0}
.pf-box.photo img{width:100%;height:160px;object-fit:cover}
.pf-box.photo .in{padding:1rem 1.25rem}
.pf-box.contact{box-shadow:0 10px 30px rgba(27,42,68,.08);border-color:var(--navy-tint);padding:1.25rem 1.3rem}
.pf-box.contact .cta{display:grid;gap:.5rem;margin:.2rem 0 1rem}
.pf-box.official{border-color:#8C6D2F;background:#FBF8F1}
.pf-box.official h3{color:#8C6D2F}
.pf-box.official .foot{font-size:.8rem;color:var(--ink-3);margin-top:.8rem;padding-top:.65rem;border-top:1px dashed var(--line)}
.pf-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1rem;font-size:.9rem;margin:0}
.pf-kv dt{color:var(--ink-3)}
.pf-kv dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.pf-sublist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;font-size:.93rem}
.pf-sublist li{display:flex;gap:.7rem;align-items:center}
.pf-sublist a{text-decoration:none}
.pf-clock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .9rem;align-items:center;margin-top:1rem;padding:.85rem 1rem;border-radius:8px;background:var(--sand);border:1px solid var(--line-soft)}
.pf-clock .t{font-family:var(--serif);font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums;grid-row:span 2}
.pf-clock .c{font-size:.78rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.pf-clock .s{font-size:.88rem;color:var(--ink-2)}
.pf-clock .s::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);margin-inline-end:.4rem;vertical-align:1px}
.pf-clock.open .s::before{background:#2F6B4F}
.pf-hours{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
.pf-hours td{padding:.38rem 0;border-top:1px solid var(--line-soft);vertical-align:top}
.pf-hours tr:first-child td{border-top:0}
.pf-hours td:first-child{color:var(--ink-3);width:38%}
.pf-hours tr.today td{font-weight:600;color:var(--ink)}
.pf-hours tr.today td:first-child::after{content:" · today";font-weight:500;color:#2F6B4F}

/* artikkel, katalog, skjema */
.pf-hero{height:340px;overflow:hidden;background:var(--sand-deep)}
.pf-hero.sm{height:180px;border-radius:8px}
.pf-hero img{width:100%;height:100%;object-fit:cover}
.pf-article{max-width:68ch;padding:1.4rem 1.6rem 3rem}
.pf-article h1{font-size:clamp(1.7rem,3vw,2.2rem);margin:.4rem 0 .9rem;font-weight:400}
.pf-article .pf-lede,.pf-lede{font-size:1.15rem;color:var(--ink-2);max-width:60ch}
.pf-article .byline{display:flex;gap:.75rem;align-items:center;font-size:.92rem;color:var(--ink-2);margin-bottom:1.1rem}
.pf-article p{color:var(--ink-2);margin-top:.9rem;line-height:1.75}
.pf-article h2{font-size:1.35rem;margin-top:1.7rem;font-weight:400}
.pf-article ul{list-style:disc;padding-inline-start:1.2rem;color:var(--ink-2);margin-top:.5rem}
.pf-article li{margin-block:.25rem}
.pf-article .end{margin-top:1.7rem;padding-top:1rem;border-top:1px solid var(--line)}
.pf-pad{padding:1.6rem}
.pf-h1{font-size:clamp(1.7rem,3vw,2.2rem);margin:.4rem 0 .6rem;font-weight:400}
.pf-search{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.2rem 0}
.pf-search label{display:grid;gap:.3rem;font-size:.85rem;font-weight:600;color:var(--ink-2);flex:1;min-width:200px}
.pf-search select,.pf-form input,.pf-form select,.pf-form textarea{font:inherit;padding:.72rem .95rem;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);width:100%}
.pf-form{display:grid;gap:.95rem;max-width:560px}
.pf-form label{display:grid;gap:.3rem;font-size:.9rem;font-weight:600}
.pf-form textarea{min-height:120px;resize:vertical}
.pf-sent{padding:1rem 1.1rem;border-radius:6px;background:#E3EFE8;color:#2F6B4F;font-weight:600}
.pf-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.pf-opt{border:1px solid var(--line);border-radius:10px;padding:1.25rem;text-decoration:none;color:inherit !important;display:block;background:var(--white)}
.pf-opt h3{font-family:var(--serif);font-size:1.3rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 .4rem}
.pf-opt p{color:var(--ink-2);font-size:.95rem}
.pf-scroll{overflow-x:auto}
.pf-schema{width:100%;border-collapse:collapse;font-size:.88rem;min-width:720px}
.pf-schema th,.pf-schema td{text-align:start;padding:.55rem .6rem;border-top:1px solid var(--line-soft);vertical-align:top}
.pf-schema th{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-top:0}
.pf-schema td:first-child{font-weight:600}
.pf-schema code,.pf-list code{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;color:var(--navy-2)}
.pf-list{list-style:disc;padding-inline-start:1.2rem;color:var(--ink-2);margin:0}
.pf-list li{margin-block:.3rem}
.pf-pad .pf-sec{margin-top:1rem}

@media(max-width:840px){
  .pf-grid{grid-template-columns:1fr;gap:1rem;padding:1rem}
  .pf-side{position:static}
  .pf-idhead{grid-template-columns:auto minmax(0,1fr);min-height:0}
  .pf-acts{display:none}
  .pf-logo{width:104px;height:104px;margin-top:-56px;font-size:1.8rem}
  .pf-cover,.pf-cover.short{height:150px}
  .pf-factbar{grid-template-columns:1fr 1fr}
  .pf-onpage{display:none}
  .pf-cols2{grid-template-columns:1fr}
  .pf-post{grid-template-columns:110px minmax(0,1fr)}
  .pf-hero{height:210px}
  .pf-prow{grid-template-columns:auto minmax(0,1fr)}
  .pf-prow .go{display:none}
  .pf-mbar{display:flex;gap:.5rem;position:fixed;inset-inline:0;bottom:0;z-index:40;padding:.6rem 16px calc(.6rem + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08)}
  .pf-mbar .pf-btn{flex:1}
  .pf{padding-bottom:5rem}
}

/* profil: uverifiserte oppføringer fra firmaenes nettsider */
.pf-cover.plain{background:linear-gradient(135deg,var(--sand-deep),var(--sand))}
.pf-cover.plain::after{display:none}
.pf-cover.plain .hint{color:var(--ink-3);border-color:var(--line)}
.pf-logo.ini,.pf-ava.ini{background:var(--navy-tint);color:var(--navy);font-family:var(--serif)}
.pf-logo.ini .ini{font-size:2.6rem;letter-spacing:.02em}
.pf-verified.unv{color:var(--ink-3)}
.pf-unv{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--sand-deep);color:var(--ink-2);font-size:.7rem;font-weight:700;font-style:normal;flex:none}
.pf-box.unverified{border-style:dashed;background:var(--sand)}
.pf-box.unverified h3{color:var(--ink-3)}
.pf-box.unverified .foot{font-size:.8rem;color:var(--ink-3);margin-top:.8rem;padding-top:.65rem;border-top:1px dashed var(--line)}
.pf-rank{margin-inline-end:.2rem}

/* profil: katalogen «Find an advocate» */
.pf-dirhead{padding:1.6rem 1.6rem 1.2rem;border-bottom:1px solid var(--line)}
.pf-starts{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:1rem}
.pf-starts .pf-label{margin-inline-end:.3rem}
.pf-start{font-size:.88rem;font-weight:600;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--line);color:var(--navy-2) !important;text-decoration:none;background:var(--white)}
.pf-start:hover{background:var(--navy-tint)}
.pf-dirbody{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.6rem;padding:1.6rem;background:var(--sand);align-items:start}
.pf-fcol{position:sticky;top:5rem;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem}
.pf-fhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.pf-x{display:none;font:inherit;font-size:1.4rem;line-height:1;background:none;border:0;color:var(--ink-2);cursor:pointer}
.pf-fform{display:grid;gap:1rem}
.pf-ffield{border:0;margin:0;padding:0 0 1rem;border-bottom:1px solid var(--line-soft);min-width:0}
.pf-ffield:last-of-type{border-bottom:0}
.pf-ffield>label:not(.pf-radio):not(.pf-check),.pf-ffield legend{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin-bottom:.45rem}
.pf-ffield select{font:inherit;width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink)}
.pf-ffield small{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.4rem;line-height:1.4}
.pf-radio,.pf-check{display:flex;gap:.55rem;align-items:flex-start;font-size:.93rem;padding:.28rem 0;cursor:pointer}
.pf-radio input,.pf-check input{margin:.3rem 0 0;accent-color:var(--navy-2);flex:none}
.pf-check small{margin-top:.1rem}
.pf-factions{display:none;gap:.5rem;padding-top:.4rem}
.pf-results{min-width:0;min-height:70vh}
.pf-resbar{display:flex;flex-wrap:wrap;gap:.75rem 1.2rem;align-items:center;margin-bottom:.9rem}
.pf-resbar b{font-family:var(--serif);font-size:1.3rem;font-weight:400}
.pf-sort{margin-inline-start:auto;font-size:.88rem;color:var(--ink-2);display:flex;gap:.5rem;align-items:center}
.pf-sort select{font:inherit;padding:.45rem .7rem;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink)}
#openfilters{display:none}
.pf-fcount{background:var(--navy);color:#fff;border-radius:999px;padding:0 .45rem;font-size:.75rem;margin-inline-start:.3rem}
.pf-btn.small{padding:.5rem .85rem;font-size:.86rem}
.pf-applied{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.9rem;min-height:2.3rem}
.pf-applied[hidden]{display:none}
.pf-applied .pf-label{margin-inline-end:.3rem}
.pf-tagx{font:inherit;font-size:.84rem;font-weight:600;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--navy-2);background:var(--navy-tint);color:var(--navy-2);cursor:pointer}
.pf-tagx::after{content:" ×";opacity:.7}
.pf-tagx.clear{background:transparent;border-color:var(--line);color:var(--ink-2)}
.pf-firmhits{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--white);margin-bottom:.9rem}
.pf-firmhits[hidden]{display:none}
.pf-firmhit{display:inline-flex;gap:.5rem;align-items:center;text-decoration:none;color:inherit !important;font-size:.9rem;padding:.3rem .6rem .3rem .3rem;border:1px solid var(--line);border-radius:999px}
.pf-firmhit .pf-ava{width:28px;height:28px;font-size:.6rem}
.pf-firmhit[hidden]{display:none}
/* overflow-anchor: Chrome flytter ellers rullingen når radene bytter
   rekkefølge, og kjemper mot rullingen til toppen av lista. */
.pf-dirlist{display:grid;gap:.75rem;overflow-anchor:none}
.pf-results{overflow-anchor:none}
.pf-drow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.1rem;align-items:center;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.pf-drow[hidden]{display:none}
.pf-drow .pf-ava{width:64px;height:64px;font-size:1.2rem}
.pf-drow h3{font-family:var(--serif);font-size:1.25rem;font-weight:400;margin:0;display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline}
.pf-drow h3 a{color:var(--ink) !important;text-decoration:none}
.pf-drow h3 a:hover{text-decoration:underline}
.pf-drow .d{color:var(--ink-2);font-size:.92rem;margin:.1rem 0 0}
.pf-drow .m{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:.4rem 0 0;font-size:.84rem;color:var(--ink-3);align-items:center}
.pf-drow .pf-topics{display:flex;flex-wrap:wrap;gap:.3rem;margin:.55rem 0 0}
.pf-chip.mini{font-size:.76rem;padding:.25rem .6rem}
.pf-court{font-weight:600;color:var(--ink-2);padding:.15rem .5rem;border-radius:4px;background:var(--sand)}
.pf-court.c2{background:var(--navy);color:#fff}
.pf-court.c1{background:var(--navy-tint);color:var(--navy)}
.pf-drow .side{display:grid;gap:.45rem;justify-items:end;text-align:end;min-width:150px}
.pf-drow .fee{font-size:.82rem;color:var(--ink-3)}
.pf-upd{font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.pf-upd::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);margin-inline-end:.4rem;vertical-align:1px;opacity:.6}
.pf-upd.t0{color:#2F6B4F}.pf-upd.t0::before{background:#2F6B4F;opacity:1}
.pf-upd.t1::before{background:#B8860B}
.pf-rankslot .pf-src{font-size:.66rem;vertical-align:middle}
.pf-empty{padding:2rem 1.5rem;border:1px dashed var(--line);border-radius:10px;background:var(--white);text-align:center}
.pf-empty[hidden]{display:none}
.pf-empty h2{font-size:1.4rem;font-weight:400;margin-bottom:.4rem}
.pf-empty p{color:var(--ink-2);max-width:48ch;margin:0 auto}
.pf-emptyacts{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:1rem}
@media(max-width:960px){
  .pf-dirbody{grid-template-columns:1fr;padding:1rem}
  #openfilters{display:inline-block}
  .pf-fcol{position:fixed;inset:0;z-index:60;border-radius:0;transform:translateY(100%);transition:transform .25s var(--e);overflow:auto;padding-bottom:6rem}
  .pf-help::after{left:auto;right:-1rem}
  body.pf-fopen .pf-fcol{transform:none}
  .pf-x{display:block}
  .pf-factions{display:flex;position:fixed;inset-inline:0;bottom:0;padding:.75rem 1.2rem calc(.75rem + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line)}
  .pf-factions .pf-btn{flex:1}
  .pf-drow{grid-template-columns:auto minmax(0,1fr)}
  .pf-drow .side{grid-column:1/-1;grid-auto-flow:column;justify-content:start;justify-items:start;text-align:start;align-items:center;gap:.8rem;min-width:0}
  .pf-drow .side .pf-btn{margin-inline-start:auto}
}
@media(prefers-reduced-motion:reduce){.pf-fcol{transition:none}}

.pf-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pf-seg label{position:relative;cursor:pointer;display:flex}
.pf-seg input{position:absolute;opacity:0;inset:0;margin:0}
.pf-seg span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.86rem;font-weight:600;padding:.5rem .3rem;color:var(--ink-2);border-inline-start:1px solid var(--line-soft);line-height:1.25}
.pf-seg label:first-child span{border-inline-start:0}
.pf-seg input:checked+span{background:var(--navy);color:#fff}
.pf-seg input:focus-visible+span{outline:2px solid var(--navy-2);outline-offset:-2px}
.pf-help{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line);font-size:.68rem;color:var(--ink-3);cursor:help;text-transform:none;letter-spacing:0;vertical-align:1px;position:relative}
.pf-help::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + .5rem);z-index:30;width:min(300px,70vw);padding:.7rem .85rem;border-radius:8px;background:var(--navy);color:#fff;font-size:.82rem;font-weight:400;line-height:1.5;text-align:start;text-transform:none;letter-spacing:0;box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s var(--e),transform .15s var(--e),visibility 0s .15s;pointer-events:none}
.pf-help::before{content:"";position:absolute;left:4px;top:calc(100% + .1rem);border:5px solid transparent;border-bottom-color:var(--navy);opacity:0;visibility:hidden;transition:opacity .15s var(--e),visibility 0s .15s}
.pf-help:hover::after,.pf-help:focus-visible::after,.pf-help.open::after,.pf-help:hover::before,.pf-help:focus-visible::before,.pf-help.open::before{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pf-help:hover,.pf-help:focus-visible,.pf-help.open{border-color:var(--navy-2);color:var(--navy-2)}
@media(prefers-reduced-motion:reduce){.pf-help::after,.pf-help::before{transition:none}}
.pf-toggles .pf-check{font-size:.95rem;padding:.35rem 0}
.pf-active{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2F6B4F;background:#E3EFE8;padding:.2rem .5rem;border-radius:4px;vertical-align:middle}
.pf-drow .side{min-width:120px}

.pf-court.cf{background:var(--navy-tint);color:var(--navy)}
.pf-drow.firm .pf-ava{width:64px;height:64px;font-size:1rem}

.pf-ffield.off{opacity:.4;pointer-events:none}
.pf-ffield.off legend::after,.pf-ffield.off>label::after{content:" · advocates only";font-weight:400;letter-spacing:0;text-transform:none}

/* byfeltet: skriv eller velg */
.pf-combo{position:relative}
.pf-combo input[type=text]{font:inherit;width:100%;padding:.6rem 2.2rem .6rem .8rem;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink)}
.pf-combo input[type=text]:focus{outline:2px solid var(--navy-2);outline-offset:1px}
.pf-combo-x{position:absolute;inset-inline-end:.3rem;top:.35rem;width:1.7rem;height:1.7rem;border:0;border-radius:50%;background:transparent;color:var(--ink-3);font-size:1.1rem;line-height:1;cursor:pointer}
.pf-combo-x:hover{background:var(--sand)}
.pf-combo-x[hidden]{display:none}
.pf-combo-list{list-style:none;margin:.3rem 0 0;padding:.3rem;position:absolute;inset-inline:0;z-index:40;max-height:14rem;overflow:auto;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(27,42,68,.12)}
.pf-combo-list[hidden]{display:none}
.pf-combo-list li{padding:.5rem .7rem;border-radius:6px;cursor:pointer;font-size:.95rem}
.pf-combo-list li:hover,.pf-combo-list li.active{background:var(--navy-tint);color:var(--navy)}
.pf-combo-list li[aria-selected=true]{font-weight:600}
.pf-combo-list li.none{color:var(--ink-3);cursor:default;font-size:.88rem}

.pf-combo-list li.group{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);cursor:default;padding:.6rem .7rem .2rem;font-weight:600}
.pf-combo-list li.group:hover{background:transparent;color:var(--ink-3)}
.pf-combo-list li small{display:block;font-size:.76rem;color:var(--ink-3);font-weight:400}
.pf-combo-list li.active small,.pf-combo-list li:hover small{color:var(--navy-2)}
.pf-combo-list{max-height:18rem}

.pf-combo-list li{display:grid;grid-template-columns:1fr auto;column-gap:.6rem;align-items:baseline}
.pf-combo-list li small{grid-column:1/-1}
.pf-combo-list li .n{font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.pf-combo-list li.zero{color:var(--ink-3)}
.pf-combo-list li.group,.pf-combo-list li.none{display:block}

/* katalogens topp: forsidens hero, men lav. Samme bilde-, gradient- og
   typografiregler som .hero, bare mindre plass. */
.hero--short{min-height:clamp(300px,40vh,420px)}
.hero--short .wrap{padding-block:calc(60px + clamp(2rem,5vh,3.5rem)) clamp(1.6rem,3.5vh,2.4rem);row-gap:.4rem}
.hero--short .kicker{color:rgba(255,255,255,.72)}
.hero--short h1{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-top:.6rem}
.hero--short .sub{margin-top:.7rem;font-size:clamp(1rem,1.3vw,1.12rem)}
@media (min-width:1400px){.hero--short .wrap{grid-template-columns:1fr;row-gap:.4rem}.hero--short .sub{max-width:52ch}}
.pf-dirpage{padding-top:0}
.pf-dirpage .wrap>.pf-crumbs{padding-top:1rem}
.pf-dirhead.compact{padding:.9rem 1.6rem}
.pf-dirhead.compact .pf-starts{margin-top:0}

/* ---------- klientanmeldelser ---------- */
:root{--star:#C98D1F}
.pf-stars{position:relative;display:inline-block;font-size:1rem;line-height:1;letter-spacing:.06em;white-space:nowrap;vertical-align:middle;font-family:var(--sans)}
.pf-stars::before,.pf-stars::after{content:"★★★★★"}
.pf-stars::before{color:rgba(22,22,26,.16)}
.pf-stars::after{position:absolute;inset-inline-start:0;top:0;width:calc(var(--v,0)/5*100%);overflow:hidden;color:var(--star)}
.pf-stars.sm{font-size:.8rem}
.pf-src.clients{color:#7A5A12;background:#F4E9CF}
.pf-rating{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;font-size:.9rem;color:var(--ink-2);text-decoration:none}
.pf-rating b{color:var(--ink);font-variant-numeric:tabular-nums}
.pf-rating:hover span{text-decoration:underline}
.pf-rmeta{display:inline-flex;align-items:center;gap:.3rem}
.pf-rmeta b{font-variant-numeric:tabular-nums}
.pf-rv-sum{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 2.2rem;align-items:center;padding:1.25rem 1.4rem;border:1px solid var(--line);border-radius:8px;background:var(--white)}
.pf-rv-sum .big{display:grid;justify-items:center;gap:.3rem;min-width:9rem}
.pf-rv-sum .big b{font-family:var(--serif);font-size:3.2rem;line-height:1;font-weight:400;font-variant-numeric:tabular-nums}
.pf-rv-sum .big .pf-stars{font-size:1.15rem}
.pf-rv-sum .big span{font-size:.85rem;color:var(--ink-2);text-align:center}
.pf-rv-bars{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.85rem}
.pf-rv-bars li{display:grid;grid-template-columns:5.4rem 1fr 1.6rem;align-items:center;gap:.6rem}
.pf-rv-bars i{display:block;height:.5rem;border-radius:99px;background:var(--sand-deep);overflow:hidden}
.pf-rv-bars b{display:block;height:100%;background:var(--star);border-radius:99px}
.pf-rv-bars .n{text-align:end;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pf-rv-critsum{list-style:none;margin:0;padding:1rem 0 0;grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.4rem 1.6rem;font-size:.88rem;border-top:1px solid var(--line-soft)}
.pf-rv-critsum li{display:flex;align-items:center;gap:.5rem}
.pf-rv-critsum li span{flex:1}
.pf-rv-critsum li b{font-variant-numeric:tabular-nums;min-width:1.8rem;text-align:end}
.pf-rv-sum .cta{grid-column:1/-1;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:1rem}
.pf-rv-sum .cta .pf-fine,.pf-rv-empty .pf-fine{margin:0}
.pf-rv-empty{padding:1.25rem 1.4rem;border:1px dashed var(--line);border-radius:8px;display:grid;gap:.8rem;justify-items:start}
.pf-rv-empty p{margin:0}
.pf-rv-list{margin-top:1.2rem}
.pf-rv{padding:1.3rem 0;border-top:1px solid var(--line-soft)}
.pf-rv[hidden]{display:none}
.pf-rv header{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.pf-rv header b{display:block}
.pf-rv header .pf-muted{font-size:.82rem}
.pf-ava.rv{width:40px;height:40px;font-size:.9rem;flex:none}
.pf-rv h3{font-family:var(--serif);font-weight:500;font-size:1.2rem;margin:0 0 .3rem}
.pf-rv-score{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;flex-wrap:wrap}
.pf-rv-score b{font-variant-numeric:tabular-nums}
.pf-rv>p{margin:0 0 .8rem}
.pf-rv-crit{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.25rem 1.4rem;margin:0;font-size:.82rem;color:var(--ink-2)}
.pf-rv-crit div{display:flex;align-items:center;gap:.4rem}
.pf-rv-crit dt{flex:1;margin:0;font-weight:400}
.pf-rv-crit dd{margin:0;display:flex;align-items:center;gap:.35rem}
.pf-rv-crit dd b{min-width:1.6rem;text-align:end;font-variant-numeric:tabular-nums}
.pf-rv-more{margin-top:.4rem}
.pf-rv-more[hidden]{display:none}
/* popupen */
.pf-rvdlg{border:0;border-radius:12px;padding:0;width:min(560px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);background:var(--white);color:var(--ink);box-shadow:0 30px 80px rgba(27,42,68,.3)}
.pf-rvdlg:not([open]){display:none}
.pf-rvdlg::backdrop{background:rgba(22,22,26,.55)}
.pf-noscroll{overflow:hidden}
.pf-rvform{position:relative;padding:1.8rem 1.9rem 1.6rem;display:grid;gap:1rem;margin:0}
.pf-rvform section{padding:0;margin:0;display:grid;gap:.9rem;justify-items:start}
.pf-rvform section>*{max-width:100%}
.pf-rvform section>label,.pf-rvform .pf-rv-rows,.pf-rvform .pf-rv-two{justify-self:stretch}
.pf-rvform section[hidden],.pf-rvform [hidden]{display:none}
.pf-rvform h2{font-family:var(--serif);font-weight:400;font-size:1.65rem;margin:0;line-height:1.2;outline:none;text-wrap:balance}
.pf-rvform p{margin:0}
.pf-rvform .x{position:absolute;top:.7rem;inset-inline-end:.7rem;width:2.2rem;height:2.2rem;border:0;border-radius:50%;background:transparent;font-size:1.4rem;line-height:1;color:var(--ink-3);cursor:pointer;padding:0}
.pf-rvform .x:hover{background:var(--sand)}
.pf-rv-signin{display:grid;gap:.7rem;justify-self:stretch}
.pf-rv-signin .pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1rem;color:var(--ink) !important;border-color:var(--line)}
.pf-rv-signin .pf-btn:hover{background:var(--sand)}
.pf-starin{display:inline-flex;align-items:center;gap:0;flex-wrap:wrap}
.pf-starin label{position:relative;cursor:pointer;font-size:2.6rem;line-height:1;color:rgba(22,22,26,.18);transition:color .12s,transform .12s;padding:0 .08rem;font-family:var(--sans)}
.pf-starin label.on{color:var(--star)}
.pf-starin label:hover{transform:scale(1.1)}
.pf-starin input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pf-starin input:focus-visible+span{outline:2px solid var(--navy-2);outline-offset:2px;border-radius:4px}
.pf-starin .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pf-starin output{font-size:.9rem;color:var(--ink-2);margin-inline-start:.7rem;min-width:5.5rem}
.pf-rv-rows{display:grid}
.pf-rv-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;flex-wrap:wrap}
.pf-rv-row .pf-starin label{font-size:1.6rem}
.pf-rv-row .pf-starin output{min-width:4.8rem;font-size:.8rem}
.pf-rvform section>label,.pf-rv-two label{display:grid;gap:.3rem;font-size:.9rem;font-weight:600}
.pf-rvform input[type=text],.pf-rvform input[type=email],.pf-rvform select,.pf-rvform textarea{font:inherit;font-weight:400;padding:.72rem .95rem;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);width:100%}
.pf-rvform textarea{min-height:130px;resize:vertical}
.pf-rvform .bad{border-color:#B3261E}
.pf-rvform small{font-weight:400;color:var(--ink-3);font-size:.8rem}
.pf-rvform .err{color:#B3261E;font-size:.88rem;font-weight:600}
.pf-rv-two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.pf-rvform footer.pf-rvnav{display:flex;justify-content:flex-end;gap:.8rem;padding-top:.4rem;border-top:1px solid var(--line-soft)}
.pf-rvform footer.pf-rvnav [data-prev]{margin-inline-end:auto}
@media (max-width:640px){
  .pf-rv-sum{grid-template-columns:1fr;justify-items:stretch}
  .pf-rv-two{grid-template-columns:1fr}
  .pf-rvform{padding:1.4rem 1.2rem}
  .pf-rvdlg{width:calc(100vw - 1rem);max-height:calc(100vh - 1rem)}
  .pf-starin label{font-size:2.2rem}
}

/* anmeldelsens tittel er en setning, ikke en etikett: overstyrer den globale h3-en med versaler */
.pf .pf-rv h3{text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--ink)}
/* skjulte knapper og bunnrad i popupen: attributtet må vinne over display:flex/inline-block */
.pf-rvform [hidden]{display:none !important}
/* bunnraden i popupen arver ellers sidens globale footer-stil (beige flate, polstring) */
.pf-rvform footer.pf-rvnav{background:transparent;padding:.6rem 0 0;margin:0;color:inherit;font-size:inherit;border-radius:0}
.pf-rvform input.bad,.pf-rvform textarea.bad,.pf-rvform select.bad{border-color:#B3261E}
/* avkryssing: vil du at advokaten skal vite hvem du er? (Khurram 13.09.2026) */
.pf-rvform section>label.pf-rv-check{display:flex;gap:.7rem;align-items:flex-start;font-weight:500;padding:.9rem 1rem;border:1px solid var(--line);border-radius:6px;background:var(--sand);cursor:pointer}
.pf-rv-check input{margin:.2rem 0 0;width:1.1rem;height:1.1rem;flex:none;accent-color:var(--navy-2)}
.pf-rv-check small{display:block;margin-top:.2rem;line-height:1.45}
@media (max-width:640px){.pf-rv-row{flex-direction:column;align-items:flex-start;gap:.15rem}}

/* ---------- deling ---------- */
.pf-sharebtn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.pf-sharebtn svg{width:16px;height:16px}
.pf-mbar .pf-sharebtn.icon{flex:0 0 auto;padding:.75rem .85rem;position:relative}
.pf-mbar .pf-sharebtn.icon span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pf-sharedlg{width:min(480px,calc(100vw - 2rem))}
.pf-sharebox{gap:.9rem}
.pf-sharelist{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%}
.pf-shareitem{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font:inherit;font-weight:600;font-size:.92rem;text-decoration:none;cursor:pointer;text-align:start;margin:0}
.pf-shareitem:hover{background:var(--sand)}
.pf-shareitem svg{width:20px;height:20px;flex:none}
.pf-shareitem.done{border-color:#2F6B4F;color:#2F6B4F}
.pf-sharelink{width:100%}
.pf-sharelink input{font:inherit;font-size:.85rem;width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:6px;background:var(--sand);color:var(--ink-2)}
@media (max-width:420px){.pf-sharelist{grid-template-columns:1fr}}
/* anmeldelsene som striper, så én anmeldelse skilles fra den neste (Khurram 13.09.2026) */
.pf-rv-list{margin-top:1.2rem;display:grid;gap:.3rem}
.pf-rv{padding:1.3rem 1.25rem;border:0;border-radius:8px;background:transparent}
.pf-rv:nth-child(even){background:var(--sand)}

/* ---------- For advocates og registrering (13.09.2026) ----------
   Sidene under /en/for-advocates/: informasjonssida, start, skjemaene
   for advokat og firma, claim, artikkelredigering. Klassene heter reg-*.
   Skjemaet står i én kolonne (Baymard), ett steg om gangen, valgfrie
   felt merkes «(optional)» (GOV.UK), feil ved feltet og oppsummering
   øverst i steget. Se REGISTRERING.md. */
.fa-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:end;padding:2rem 1.6rem 1.6rem}
.fa-hero .pf-h1{font-size:clamp(2rem,4vw,3rem);max-width:16ch;line-height:1.05}
.fa-hero .pf-lede{font-size:1.2rem}
.fa-hero-img{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--sand-deep)}
.fa-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.fa-ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}
.fa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.fa-card{border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.25rem;background:var(--white)}
.fa-card h3{font-family:var(--serif);font-size:1.25rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 .4rem}
.fa-card p{color:var(--ink-2);font-size:.95rem;margin:0}
.fa-card .n{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-2);font-weight:600;display:block;margin-bottom:.5rem}
.fa-steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fa-steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;gap:.8rem;align-items:start;padding:.9rem 1rem;border:1px solid var(--line-soft);border-radius:8px;background:var(--white)}
.fa-steps li::before{content:counter(s);width:2.2rem;height:2.2rem;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--sans);font-weight:600;font-size:.9rem}
.fa-steps b{display:block;font-weight:600}
.fa-steps li>span{grid-column:2;color:var(--ink-2);font-size:.93rem}
.fa-rule{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;padding:1rem 0;border-top:1px solid var(--line-soft)}
.fa-rule:first-child{border-top:0;padding-top:0}
.fa-rule .k{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-2);font-weight:600;padding:.35rem .6rem;border:1px solid var(--navy-tint);border-radius:999px;background:var(--navy-tint);white-space:nowrap;margin-top:.1rem}
.fa-rule p{margin:0;color:var(--ink-2)}
.fa-rule b{color:var(--ink)}
.fa-ready{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem 1.4rem;margin:0;padding:0;list-style:none}
.fa-ready li{padding:.5rem 0 .5rem 1.6rem;position:relative;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.fa-ready li::before{content:"";position:absolute;left:.1rem;top:.95rem;width:.7rem;height:.7rem;border:2px solid var(--navy-2);border-radius:3px}
.fa-band{background:var(--navy);color:#fff;padding:1.6rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.fa-band h2{color:#fff;font-size:1.5rem;font-weight:400;margin:0 0 .3rem}
.fa-band p{color:rgba(255,255,255,.8);margin:0;max-width:60ch}
.fa-band .pf-btn{background:#fff;color:var(--navy) !important;border-color:#fff}
@media (max-width:900px){.fa-hero{grid-template-columns:1fr}.fa-hero-img{aspect-ratio:16/9}.fa-band{grid-template-columns:1fr}}

/* start: velg rolle, logg inn */
.reg-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.reg-role{border:1px solid var(--line);border-radius:10px;padding:1.25rem;background:var(--white);display:grid;gap:.5rem;text-decoration:none;color:inherit !important;position:relative}
.reg-role:hover,.reg-role:focus-visible{border-color:var(--navy-2)}
.reg-role h3{font-family:var(--serif);font-size:1.3rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.reg-role p{color:var(--ink-2);font-size:.95rem;margin:0}
.reg-role .t{font-family:var(--sans);font-size:.78rem;color:var(--ink-3)}
.reg-role .go{color:var(--navy-2);font-weight:600;font-size:.92rem}
.reg-signin{max-width:520px;display:grid;gap:.7rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line-soft)}
.reg-signin[hidden],.reg-form[hidden],.reg-step[hidden],.reg-done[hidden]{display:none}
.reg-sso{display:flex;align-items:center;justify-content:center;gap:.7rem;font:inherit;font-weight:600;font-size:.98rem;padding:.8rem 1rem;border-radius:6px;border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;width:100%;text-decoration:none}
.reg-sso:hover{border-color:var(--ink-3)}
.reg-sso.apple{background:#000;color:#fff;border-color:#000}
.reg-sso svg{width:20px;height:20px;flex:none}
.reg-signed{display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.88rem;color:var(--ink-2);padding:.6rem .9rem;border:1px solid var(--line-soft);border-radius:6px;background:var(--sand);margin-bottom:1rem}
.reg-signed a{color:var(--navy-2)}

/* skjemaets ramme */
.reg-wrap{display:grid;grid-template-columns:240px 1fr;gap:2rem;align-items:start}
.reg-nav{position:sticky;top:76px;display:grid;gap:.15rem;font-size:.9rem}
.reg-nav a{display:grid;grid-template-columns:1.6rem 1fr;gap:.5rem;align-items:center;padding:.5rem .6rem;border-radius:6px;color:var(--ink-2);text-decoration:none}
.reg-nav a i{font-style:normal;width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.75rem;font-family:var(--sans);font-weight:600}
.reg-nav a.cur{background:var(--navy-tint);color:var(--navy-2)}
.reg-nav a.cur i{background:var(--navy-2);color:#fff;border-color:var(--navy-2)}
.reg-nav a.done i{background:var(--navy);color:#fff;border-color:var(--navy)}
.reg-nav a.done i::before{content:"\2713"}
.reg-nav a.done i span{display:none}
.reg-progress{height:6px;border-radius:999px;background:var(--sand-deep);overflow:hidden;margin:.4rem 0 1.2rem}
.reg-progress::before{content:"";display:block;height:100%;width:var(--p,0%);background:var(--navy-2);transition:width .3s var(--e)}
.reg-form{display:block;max-width:none}
.reg-step{max-width:640px}
.reg-step h2{font-size:1.6rem;font-weight:400;margin:0 0 .3rem}
.reg-step .lede{color:var(--ink-2);margin:0 0 1.2rem}
.reg-step .pf-fine{margin-top:.3rem}
.reg-fields{display:grid;gap:1rem}
.reg-fields label,.reg-field{display:grid;gap:.3rem;font-size:.92rem;font-weight:600}
.reg-fields label span.h,.reg-field span.h{font-weight:400;color:var(--ink-3);font-size:.85rem}
.reg-fields input,.reg-fields select,.reg-fields textarea{font:inherit;padding:.72rem .95rem;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);width:100%}
.reg-fields textarea{min-height:130px;resize:vertical}
.reg-fields .bad input,.reg-fields .bad select,.reg-fields .bad textarea,label.bad input,label.bad textarea,label.bad select{border-color:#B3261E;box-shadow:0 0 0 2px rgba(179,38,30,.15)}
.reg-err{color:#B3261E;font-weight:600;font-size:.85rem}
.reg-err:empty{display:none}
.reg-ok{color:#2F6B4F;font-weight:600;font-size:.85rem}
.reg-ok:empty{display:none}
.reg-count{color:var(--ink-3);font-weight:400;font-size:.8rem}
.reg-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.reg-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}
@media (max-width:560px){.reg-row,.reg-row3{grid-template-columns:1fr}}
.reg-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.4rem .8rem}
.reg-picks label{display:flex;gap:.55rem;align-items:flex-start;font-weight:400;font-size:.9rem;padding:.35rem 0}
.reg-picks input{width:auto;margin-top:.2rem}
.reg-picks input:disabled+span{color:var(--ink-3)}
.reg-group{display:grid;gap:.5rem;padding:1rem 1.1rem;border:1px solid var(--line-soft);border-radius:8px;background:var(--white)}
.reg-group>b{font-size:.92rem}
.reg-group.bad{border-color:#B3261E}
.reg-hours{width:100%;border-collapse:collapse;font-size:.9rem}
.reg-hours td{padding:.35rem .3rem;vertical-align:middle}
.reg-hours td:first-child{font-weight:600;width:7.5rem}
.reg-hours input{padding:.5rem .6rem}
.reg-hours .closed{display:flex;gap:.4rem;align-items:center;font-weight:400;font-size:.85rem;white-space:nowrap}
.reg-hours .closed input{width:auto}
.reg-upload{border:1.5px dashed var(--line);border-radius:10px;padding:1.1rem;background:var(--white);display:grid;gap:.6rem}
.reg-upload.bad{border-color:#B3261E}
.reg-upload[data-ok]{border-style:solid;border-color:#2F6B4F}
.reg-upload input[type=file]{padding:.4rem 0;border:0;background:transparent}
.reg-upload .rules{font-weight:400;color:var(--ink-2);font-size:.88rem;margin:0;padding-inline-start:1.1rem}
.reg-upload .rules li{margin:.15rem 0}
.reg-preview:empty{display:none}
.reg-preview img{max-width:100%;max-height:260px;border-radius:6px;display:block;border:1px solid var(--line-soft)}
.reg-preview.round img{width:180px;height:180px;object-fit:cover;border-radius:50%}
.reg-acts{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)}
.reg-acts .sp{flex:1}
.reg-acts .pf-fine{margin:0}
.reg-summary dl{display:grid;gap:.4rem;margin:0}
.reg-summary dl>div{display:grid;grid-template-columns:200px 1fr;gap:.8rem;padding:.5rem 0;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.reg-summary dt{color:var(--ink-3);font-weight:600}
.reg-summary dd{margin:0;color:var(--ink)}
@media (max-width:560px){.reg-summary dl>div{grid-template-columns:1fr}}
.reg-done{padding:1.5rem;border:1px solid #2F6B4F;border-radius:10px;background:#E3EFE8}
.reg-done h2{font-size:1.5rem;font-weight:400;margin:0 0 .5rem}
.reg-done p{margin:.3rem 0;color:var(--ink-2)}
.reg-note{border-inline-start:3px solid var(--navy-2);background:var(--navy-tint);padding:.8rem 1rem;border-radius:0 6px 6px 0;font-size:.9rem;color:var(--ink-2);margin:0 0 1rem}
.reg-note b{color:var(--ink)}
@media (max-width:900px){.reg-wrap{grid-template-columns:1fr}.reg-nav{position:static;display:flex;flex-wrap:wrap;gap:.3rem}.reg-nav a{grid-template-columns:auto;padding:.35rem .6rem;border:1px solid var(--line-soft)}.reg-nav a span{display:none}.reg-nav a i{width:1.4rem;height:1.4rem}}

/* artikkelredigering */
.reg-editor{display:grid;grid-template-columns:1fr 300px;gap:1.6rem;align-items:start}
.reg-editor textarea[name=body]{min-height:420px;font-family:ui-monospace,Consolas,monospace;font-size:.9rem;line-height:1.6}
.reg-side{position:sticky;top:76px;display:grid;gap:1rem}
.reg-checks{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.88rem}
.reg-checks li{padding:.4rem .6rem .4rem 1.8rem;position:relative;border-radius:6px}
.reg-checks li::before{position:absolute;left:.55rem;top:.4rem;font-weight:700}
.reg-checks li.ok{background:#E3EFE8;color:#2F6B4F}.reg-checks li.ok::before{content:"\2713"}
.reg-checks li.no{background:#F9E5E3;color:#8A1C16}.reg-checks li.no::before{content:"\00d7"}
.reg-checks li.warn{background:#FBF6E6;color:#6B5A1C}.reg-checks li.warn::before{content:"!"}
.reg-serp{display:grid;gap:.15rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:8px;background:var(--white);font-family:Arial,system-ui,sans-serif}
.reg-serp-url{font-size:.78rem;color:#202124;word-break:break-all}
.reg-serp-title{font-size:1.1rem;color:#1a0dab;line-height:1.3}
.reg-serp-desc{font-size:.85rem;color:#4d5156;line-height:1.45}
@media (max-width:900px){.reg-editor{grid-template-columns:1fr}.reg-side{position:static}}

/* ---------- For advocates: oppfrisking 13.09.2026, andre økt ----------
   Samme oppsett som før (hvit ramme, kort per tema), men tre grep etter
   tilbakemeldingen «for hvitt, ingen deling mellom temaene, teksten tett
   inn til kantene»: 1) mer polstring i ramma, i hero og i kortene,
   2) en sandfarget flate (.fa-body) bak kortene, så hvert tema står
   som et hvitt kort på sand i stedet for hvitt på hvitt, 3) det samme
   i skjemaene: skjemaet er en sandflate, det aktive steget et hvitt
   kort, grupper inne i steget på sand. Reglene under overstyrer
   blokka over; ingenting der er fjernet. */
.reg-pad{--rp:clamp(1.75rem,3.5vw,3rem)}
.pf-pad.reg-pad{padding:var(--rp)}
.fa-hero{padding:clamp(2rem,4vw,3rem) clamp(1.75rem,3.5vw,3rem) clamp(1.75rem,3vw,2.5rem);gap:clamp(2rem,4vw,3.5rem)}
.fa-hero .pf-lede{margin-top:.6rem;line-height:1.55}
.fa-ctas{margin-top:1.6rem}
.pf-onpage{padding:.7rem clamp(1.75rem,3.5vw,3rem)}
.fa-body{background:var(--sand);padding:clamp(1.5rem,3vw,2.5rem);display:grid;gap:clamp(1.25rem,2.5vw,1.75rem)}
.reg-pad .fa-body{margin:1.75rem calc(-1 * var(--rp)) calc(-1 * var(--rp))}
.fa-body .pf-sec{margin:0;padding:clamp(1.5rem,3vw,2.25rem);border-radius:12px}
.fa-body .pf-sec-head{margin-bottom:1.25rem;padding-bottom:.9rem}
.fa-body .pf-sec h2{font-size:clamp(1.4rem,2.2vw,1.65rem)}
.fa-body .pf-sec>p{line-height:1.7}
.fa-grid{gap:1.1rem;margin-top:1.4rem !important}
.fa-card{background:var(--sand);border:0;border-radius:10px;padding:1.4rem 1.5rem 1.5rem}
.fa-card h3{margin-bottom:.55rem}
.fa-card p{font-size:.97rem;line-height:1.6}
.fa-steps{gap:.8rem}
.fa-steps li{background:var(--sand);border:0;border-radius:10px;padding:1.1rem 1.3rem;gap:.9rem 1rem}
.fa-steps li>span{line-height:1.6}
.fa-ready{gap:.4rem 2rem}
.fa-ready li{padding:.7rem 0 .7rem 1.8rem;line-height:1.5}
.fa-ready li::before{top:1.15rem}
.pf-sec h3.gap{margin-top:1.6rem}
.fa-rule{padding:1.3rem 0;gap:.9rem 1.25rem}
.fa-rule:first-child{padding-top:.2rem}
.fa-rule:last-child{padding-bottom:.2rem}
.fa-rule p{max-width:62ch;line-height:1.65}
.reg-note{padding:1rem 1.2rem;margin-bottom:1.4rem;line-height:1.6}
.fa-band{padding:clamp(1.75rem,3.5vw,2.5rem) clamp(1.75rem,3.5vw,3rem)}

/* start */
.reg-roles{margin-top:1.75rem !important;gap:1.1rem}
.reg-role{background:var(--sand);border-color:transparent;padding:1.5rem;gap:.6rem;transition:background .18s var(--e),border-color .18s var(--e)}
.reg-role:hover,.reg-role:focus-visible{background:var(--white);border-color:var(--navy-2)}
.reg-role p{line-height:1.6}

/* innlogging og skjema */
.reg-signin{background:var(--sand);border:0;border-radius:12px;padding:clamp(1.5rem,3vw,2rem);margin-top:1.75rem;max-width:560px;gap:.8rem}
.reg-signin .pf-lede{line-height:1.6}
.reg-form{background:var(--sand);border-radius:12px;padding:clamp(1.25rem,2.5vw,2rem);margin-top:1.75rem}
.reg-signed{background:var(--white);border-color:transparent;padding:.7rem 1rem}
.reg-nav{top:84px;gap:.2rem}
.reg-nav a{color:var(--ink-2);padding:.55rem .7rem}
.reg-nav a.cur{background:var(--white);color:var(--navy-2)}
.reg-nav a i{background:var(--white)}
.reg-progress{margin:0 0 1.4rem;background:var(--white)}
.reg-step{max-width:none;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:clamp(1.4rem,2.8vw,2.25rem)}
.reg-step h2{font-size:clamp(1.45rem,2.2vw,1.75rem);margin:.4rem 0 .5rem}
.reg-step .lede{max-width:60ch;line-height:1.65;margin-bottom:1.6rem}
.reg-fields{gap:1.25rem;max-width:640px}
.reg-fields input,.reg-fields select,.reg-fields textarea{padding:.78rem 1rem}
.reg-group{background:var(--sand);border-color:transparent;padding:1.1rem 1.25rem;gap:.7rem}
.reg-group input,.reg-group select,.reg-group textarea{background:var(--white)}
.reg-upload{padding:1.2rem 1.3rem}
.reg-acts{margin-top:2rem;padding-top:1.4rem}
.reg-done{border-radius:12px}
.reg-editor .reg-fields{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:clamp(1.4rem,2.8vw,2.25rem);max-width:none}
.reg-editor .reg-note{margin-bottom:0}
@media (max-width:900px){
  .reg-form,.reg-signin{padding:1rem;border-radius:10px}
  .reg-nav a{background:var(--white)}
  .reg-nav a.cur{border-color:var(--navy-2)}
  .fa-body{padding:1rem;gap:1rem}
  .fa-body .pf-sec{padding:1.25rem}
}
/* Fire kort i «Why list here» ble 3 + 1 på 1280 px; to og to leser bedre.
   Sjekklista sto i fire smale spalter; tre er nok. */
@media(min-width:700px){.fa-grid{grid-template-columns:1fr 1fr}}
.fa-ready{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}


/* ---------- For advocates: illustrasjoner (13.09.2026, andre økt) ----------
   Sju illustrasjoner fra unDraw (img/undraw/, se LISENS.md der), lagt
   inn i sida av registrering.py. Fargen settes her, så de følger
   paletten. Én illustrasjon per tema, ved siden av innledningen, og tre
   i flyten under hero. Ingen småikoner. */
:root{--primary-svg-color:var(--navy-2)}
.fa-und{display:block}
.fa-und svg{display:block;width:100%;height:auto}
.fa-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;padding:0 clamp(1.75rem,3.5vw,3rem) clamp(1.5rem,3vw,2.25rem)}
.fa-flow>div{display:grid;gap:.25rem;align-content:start;padding:1.4rem 1.5rem 1.5rem;background:var(--sand);border-radius:12px;position:relative}
.fa-flow .fa-und{height:150px;display:grid;place-items:center;margin-bottom:.9rem}
.fa-flow .fa-und svg{max-height:150px;width:auto;max-width:100%}
.fa-flow b{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.2}
.fa-flow span{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.fa-flow>div+div::before{content:"→";position:absolute;left:-1rem;top:5.3rem;color:var(--ink-3);font-size:1.2rem;background:var(--white);padding:0 .1rem}
@media(max-width:900px){.fa-flow{grid-template-columns:1fr;gap:.8rem}.fa-flow>div+div::before{content:"↓";left:50%;top:-1.1rem;transform:translateX(-50%)}}
/* Innledning med illustrasjon til høyre, før kortene i temaet. */
.fa-intro{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,26%,260px);gap:clamp(1.5rem,3vw,2.5rem);align-items:center;margin-bottom:1.4rem}
.fa-intro p{margin:0}
.fa-intro b{color:var(--ink)}
@media(max-width:640px){.fa-intro{grid-template-columns:1fr}.fa-intro .fa-und{max-width:220px;margin:0 auto}}

/* ---------- For advocates: «Setting up your page» (13.09.2026) ----------
   To lister: det som må til for å gå live (fylt hake) og det som viser
   hva advokaten er god for (åpen ring med pluss). Hver rad sier hva
   klienten får ut av det, ikke hva feltet heter i skjemaet. */
.fa-checks{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:.4rem}
@media(max-width:760px){.fa-checks{grid-template-columns:1fr}}
.fa-checks>div{background:var(--sand);border-radius:10px;padding:1.3rem 1.4rem 1.1rem}
.fa-checks h3{margin-bottom:.8rem}
.fa-check{list-style:none;margin:0;padding:0}
.fa-check li{display:grid;grid-template-columns:1.4rem 1fr;gap:.05rem .8rem;padding:.7rem 0;border-top:1px solid var(--line);align-items:start}
.fa-check li:first-child{border-top:0;padding-top:.1rem}
.fa-check li::before{grid-row:span 2;width:1.4rem;height:1.4rem;border-radius:50%;margin-top:.15rem;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:.8rem;line-height:1}
.fa-check.req li::before{content:"\2713";background:var(--navy-2);color:#fff}
.fa-check.opt li::before{content:"+";background:var(--white);color:var(--navy-2);border:1.5px solid var(--navy-2);font-size:1rem}
.fa-check b{font-weight:600;font-size:.98rem;color:var(--ink)}
.fa-check span{color:var(--ink-2);font-size:.9rem;line-height:1.45}
.fa-savenote{margin-top:1.1rem}
.fa-advice{margin-top:1.2rem;background:var(--navy-tint);border-radius:8px;padding:.9rem 1.1rem;color:var(--ink-2)}
.fa-advice b{color:var(--ink)}
.pf-sec .fa-advice{max-width:none;white-space:normal}
/* Rådet under sjekklistene: én linje, gul lyspære så det fanger blikket. */
.pf-sec .fa-advice{display:flex;align-items:center;gap:.75rem;max-width:none;margin-top:1.2rem;padding:.8rem 1.1rem;border-radius:8px;background:#FFF6D6;border:1px solid #F0D98A;color:var(--ink-2)}
.fa-advice .fa-bulb{width:1.7rem;height:1.7rem;flex:none}
.fa-advice b{color:var(--ink)}
@media(min-width:900px){.fa-advice span{white-space:nowrap}}
/* Etikettene i «Making the most of your page» får fast bredde, så teksten starter på samme linje i alle rader. */
.fa-rule{grid-template-columns:7.2rem minmax(0,1fr)}
.fa-rule .k{text-align:center}
@media(max-width:560px){.fa-rule{grid-template-columns:1fr}}

/* ---------- For advocates: Start (13.09.2026) ----------
   Tre veier inn som hvite kort på sand, illustrasjon til venstre, tekst
   og én knapp til høyre. Hele kortet er lenken. */
.fa-pad{padding:clamp(1.75rem,3.5vw,3rem) clamp(1.75rem,3.5vw,3rem) clamp(1.25rem,2.5vw,2rem)}
.fa-ways{display:grid;gap:1.1rem}
.fa-way{display:grid;grid-template-columns:clamp(160px,24%,240px) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:clamp(1.4rem,2.8vw,2.2rem);text-decoration:none;color:inherit !important;
  transition:border-color .18s var(--e),box-shadow .18s var(--e)}
.fa-way:hover,.fa-way:focus-visible{border-color:var(--navy-2);box-shadow:0 10px 30px rgba(27,42,68,.08)}
.fa-way .fa-und{max-width:240px}
.fa-way .n{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-2);font-weight:600;display:block;margin-bottom:.45rem}
.fa-way h2{font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:400;margin:0 0 .5rem}
.fa-way p{color:var(--ink-2);margin:0;max-width:56ch}
.fa-way .t{display:block;margin:.8rem 0 1rem;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.fa-way .pf-btn{display:inline-block}
.fa-ways .fa-advice{margin-top:.4rem}
@media(max-width:640px){.fa-way{grid-template-columns:1fr}.fa-way .fa-und{max-width:200px;margin:0 auto}}
/* Rådet (lyspæra) skal se likt ut også utenfor .pf-sec, som på Start. */
.fa-advice{display:flex;align-items:center;gap:.75rem;max-width:none;padding:.8rem 1.1rem;border-radius:8px;background:#FFF6D6;border:1px solid #F0D98A;color:var(--ink-2)}
/* Start: tre kort side om side fra 900 px, bildet øverst, knappen nederst
   på samme linje i alle tre. Sida blir én skjerm i stedet for tre. */
@media(min-width:900px){
  .fa-ways{grid-template-columns:repeat(3,1fr);gap:1.1rem}
  .fa-ways .fa-advice{grid-column:1/-1}
  .fa-way{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:1rem;align-items:start;padding:1.5rem 1.6rem 1.6rem}
  .fa-way .fa-und{max-width:none;height:150px;display:grid;place-items:center}
  .fa-way .fa-und svg{max-height:150px;width:auto;max-width:100%}
  .fa-way>div{display:flex;flex-direction:column;height:100%}
  .fa-way h2{font-size:1.45rem}
  .fa-way p{font-size:.95rem;flex:1}
  .fa-way .t{margin:.9rem 0 .9rem}
}
.fa-pad{padding-bottom:clamp(1rem,2vw,1.5rem)}