/* ==========================================================
   RISKFOLD
   Built on the brand guide (v2.0) and the logo system.
   Near black canvas, ivory type, steel for what steps back.
   DM Sans throughout: Light for headlines and body, Regular for the wordmark and UI.
   Two tones throughout, the same move as the wordmark: the lead
   in ivory, the continuation set back in steel. Burnt orange once
   a page, on the call to action. Stealth over flash.
   ========================================================== */

@font-face{
  font-family:'DM Sans';
  src:url('fonts/dm-sans.woff2') format('woff2');
  font-weight:100 1000;font-style:normal;font-display:swap;
}

:root{
  /* Light theme: the guide's "dark on light" pairing for print and documents. */
  --bg:#F4F2EE;
  --surface:#EAE7E1;
  --ink:#0A0C12;
  --trail:#5A6570;
  --body:#2E323A;
  --muted:#5A6570;
  --line:#D9D5CE;
  --line-strong:#B7B2AA;
  --accent:#DB5227;
  --accent-text:#B8431F;
  --on-accent:#0A0C12;
  --navy:#023661;
  --on-navy:#F4F2EE;
  --navy-trail:#A9B8C8;

  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Web type scale from the guide: hero 56 to 72, section headings
     36 to 48, sub-headings 20 to 24, body 16 to 18. Fluid from 360px
     to 1440px, with phones stepping below the guide's desktop floor. */
  /* Hero 40 to 72, page titles and statements 34 to 54, section headings
     28 to 40: about 1.35x between each step on desktop. */
  --fs-display:clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);
  --fs-h1:clamp(2.125rem, 1.708rem + 1.852vw, 3.375rem);
  --fs-h2:clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);
  --fs-h3:clamp(1.25rem, 1.167rem + 0.370vw, 1.5rem);
  --fs-lead:clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);
  --fs-body:clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
  --fs-small:0.9375rem;
  --fs-label:0.75rem;
  --fs-button:0.9375rem;
  --fs-button-sm:0.875rem;
  --fs-wordmark:1.25rem;

  /* Four line heights, nothing in between. */
  --lh-display:1.06;
  --lh-heading:1.12;
  --lh-sub:1.3;
  --lh-body:1.6;

  --track-caps:0.18em;

  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px;
  --space-5:64px; --space-6:104px; --space-7:clamp(96px, 11vw, 168px);

  --gutter:clamp(20px, 5vw, 88px);
  --maxw:1360px;

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
}

[data-theme="dark"]{
  /* Primary: light on dark. */
  --bg:#0A0C12;
  --surface:#12151C;
  --ink:#F4F2EE;
  --trail:#76828E;
  --body:#C9C8C4;
  --muted:#8A949E;
  --line:#3F3A42;
  --line-strong:#57525A;
  --accent-text:#DB5227;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:92px;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:300;line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;font-kerning:normal;
}
h1,h2,h3{hyphens:manual;overflow-wrap:break-word;font-weight:400;}
p,li,dd{text-wrap:pretty;}
strong,b{font-weight:400;color:var(--ink);}
/* Norwegian compounds get long in narrow columns: hyphenate body copy on phones only. */
@media (max-width:560px){
  html[lang="nb"] p{hyphens:auto;hyphenate-limit-chars:10 4 4;}
}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.lead{color:var(--ink);}
.trail{color:var(--trail);}

/* Headlines in DM Sans Light, the wordmark's own family, drawn at
   display optical size and tracked in. One family across the site. */
.hero h1,.page-head h1,.statement,.section-title,.outcome h3,
.offer-head h2,.who h2,.booking-head h2,.contact-info h2{
  font-weight:300;letter-spacing:0;font-optical-sizing:auto;
}
.offer-name{font-weight:400;letter-spacing:-0.01em;}

/* Spaced capitals: the guide's voice for labels and navigation. */
.sec-label,.nav-links a,.lang-switch button,.offer-time,.offer-head .tag,
.facts dt,.foot-meta,.contact-list span,.legal-updated{
  font-family:var(--sans);font-size:var(--fs-label);font-weight:400;
  letter-spacing:var(--track-caps);text-transform:uppercase;
}

/* ---------- wordmark (logo system C1.3, Airy) ----------
   DM Sans Light, all caps, optical size 40, tracking 38% of the cap
   size. RISK in ivory, FOLD set back in steel. The trailing space after
   the D is taken back so the mark sits on its left edge. Airy is the
   weakest variant when small, so it never drops below 16px here. */
.wordmark{
  display:inline-flex;flex:none;text-decoration:none;
  font-family:var(--sans);font-weight:300;font-variation-settings:"opsz" 40;
  font-size:var(--fs-wordmark);letter-spacing:0.38em;margin-inline-end:-0.38em;line-height:1;
}
@media (max-width:900px){ :root{--fs-wordmark:1.125rem;} }
@media (max-width:420px){ :root{--fs-wordmark:1rem;} }
.wm-risk{color:var(--ink);}
.wm-fold{color:var(--trail);}

/* ---------- buttons: square-cut, precise ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:2px;
  font-family:var(--sans);font-size:var(--fs-button);font-weight:400;letter-spacing:0.02em;
  line-height:1;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s var(--ease-out);
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--ink);color:var(--bg);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
/* The one orange moment on every page. */
.btn-accent{background:var(--accent);color:var(--on-accent);}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--body);}
  .btn-ghost:hover{border-color:var(--ink);}
  .btn-accent:hover{background:#E4683F;}
}

.text-link{
  color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-color:var(--line-strong);
  transition:text-decoration-color .15s ease;
}
@media (hover:hover) and (pointer:fine){ .text-link:hover{text-decoration-color:var(--ink);} }

/* ==========================================================
   HEADER
   ========================================================== */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid transparent;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:76px;}

.nav-links{display:flex;gap:var(--space-4);}
.nav-links a{color:var(--muted);text-decoration:none;transition:color .15s ease;}
.nav-links a[aria-current="page"]{color:var(--ink);}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{color:var(--ink);} }

.nav-tools{display:flex;align-items:center;gap:var(--space-2);flex:none;}
.lang-switch{display:flex;gap:2px;}
.lang-switch button{
  background:none;border:none;cursor:pointer;color:var(--muted);
  min-width:36px;height:32px;transition:color .15s ease;
}
.lang-switch button[aria-pressed="true"]{color:var(--ink);}
.theme-btn{
  width:32px;height:32px;border:none;background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--muted);transition:color .15s ease;
}
.theme-btn svg{width:16px;height:16px;}
.theme-btn .icon-sun{display:none;}
[data-theme="dark"] .theme-btn .icon-moon{display:none;}
[data-theme="dark"] .theme-btn .icon-sun{display:block;}
@media (hover:hover) and (pointer:fine){
  .lang-switch button:hover,.theme-btn:hover{color:var(--ink);}
}
.nav-cta{min-height:40px;padding:0 18px;font-size:var(--fs-button-sm);}

.nav-toggle{
  display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.nav-toggle span{display:block;width:20px;height:1px;background:var(--ink);transition:transform .2s var(--ease-out), opacity .2s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  position:fixed;top:76px;inset-inline:0;z-index:99;
  max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  padding:var(--space-2) var(--gutter) var(--space-4);
  background:var(--bg);border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear .2s;
}
.mobile-menu.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);}
.mobile-menu a{font-weight:300;font-size:var(--fs-h2);line-height:var(--lh-heading);padding:8px 0;text-decoration:none;color:var(--muted);}
.mobile-menu a[aria-current="page"]{color:var(--ink);}
.mobile-menu .btn{margin-top:var(--space-3);letter-spacing:0.02em;font-size:var(--fs-button);align-self:stretch;color:var(--on-accent);font-weight:400;}

@media (max-width:900px){
  .nav-links,.nav-cta{display:none;}
  .nav-toggle{display:flex;}
}
@media (min-width:901px){ .mobile-menu{display:none;} }

/* ==========================================================
   EDITORIAL GRID (brand deck): label left, content right
   ========================================================== */
.sec{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--space-4);}
.sec-label{color:var(--trail);padding-top:0.9em;}
.sec-body{min-width:0;}
@media (max-width:860px){
  .sec{grid-template-columns:1fr;row-gap:var(--space-3);}
  .sec-label{padding-top:0;}
  span.sec-label{display:none;}
}

.section{padding-block:var(--space-7);}
.section + .section:not(.panel-navy){padding-top:0;}
.section.panel-navy + .section{padding-top:var(--space-7);}

/* ==========================================================
   HERO: the headline sits low in the first screen, like the
   closing slide of the brand deck.
   ========================================================== */
.hero{padding-block:clamp(64px, 12vh, 140px) var(--space-6);}
@media (min-width:901px){
  .hero{min-height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:flex-end;}
}
.hero > .wrap{width:100%;}
.hero h1 .lead{display:block;}
.hero h1{
  font-size:var(--fs-display);line-height:var(--lh-display);text-wrap:balance;
}
.hero-foot{
  margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-4) var(--space-5);align-items:end;
}
.hero-lede{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--body);max-width:46ch;}
.hero-side{display:grid;gap:var(--space-2);justify-items:end;text-align:end;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.hero-note{font-size:var(--fs-small);color:var(--muted);max-width:40ch;}
@media (max-width:860px){
  .hero-foot{grid-template-columns:1fr;}
  .hero-side{justify-items:start;text-align:start;}
}

.page-head{padding-block:clamp(64px, 11vh, 136px) var(--space-5);}
.page-head + .section{padding-top:var(--space-4);}
.page-head h1{font-size:var(--fs-h1);line-height:var(--lh-display);max-width:20ch;}
.page-sub{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--body);max-width:52ch;}

/* ==========================================================
   SECTIONS
   ========================================================== */
.statement{font-size:var(--fs-h1);line-height:var(--lh-heading);max-width:24ch;}
.section-title{font-size:var(--fs-h2);line-height:var(--lh-heading);max-width:22ch;text-wrap:balance;}
.section-intro{margin-top:var(--space-3);font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--body);max-width:52ch;}

/* Navy carries the philosophy, the way the tagline slide does in the deck. */
.panel-navy{background:var(--navy);color:var(--on-navy);}
.panel-navy .lead{color:var(--on-navy);}
.panel-navy .trail,.panel-navy .sec-label{color:var(--navy-trail);}

/* ---------- outcomes ---------- */
.outcomes{margin-top:var(--space-5);border-top:1px solid var(--line);}
.outcome{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-2) var(--space-4);
  align-items:baseline;padding-block:var(--space-4);border-bottom:1px solid var(--line);
}
.outcome h3{font-size:var(--fs-h2);line-height:var(--lh-heading);}
.outcome p{color:var(--body);max-width:52ch;}
@media (max-width:760px){ .outcome{grid-template-columns:1fr;} }

/* ---------- the road there (a real sequence, so numbered) ---------- */
.steps{margin-top:var(--space-5);list-style:none;counter-reset:step;border-top:1px solid var(--line);}
.steps li{
  display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,6fr);gap:var(--space-1) var(--space-4);
  align-items:baseline;padding-block:var(--space-3);border-bottom:1px solid var(--line);
}
.steps li::before{
  counter-increment:step;content:counter(step, decimal-leading-zero);
  font-size:var(--fs-label);letter-spacing:var(--track-caps);font-variant-numeric:tabular-nums;color:var(--trail);
}
.steps h3{font-size:var(--fs-h3);font-weight:300;line-height:var(--lh-sub);}
.steps p{color:var(--body);max-width:52ch;}
@media (max-width:860px){ .steps li{grid-template-columns:40px minmax(0,1fr);} .steps li p{grid-column:2;} }

.aside-note{
  margin-top:var(--space-6);padding-top:var(--space-3);border-top:1px solid var(--line);
  max-width:64ch;color:var(--body);
}
.aside-note strong{color:var(--ink);}

/* ---------- offer list (home): the rows from deck slide 05 ---------- */
.offer-list{margin-top:var(--space-5);list-style:none;border-top:1px solid var(--line);}
.offer-list a{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2) var(--space-4);
  align-items:baseline;padding-block:var(--space-3);border-bottom:1px solid var(--line);text-decoration:none;
}
.offer-id{display:grid;gap:6px;}
.offer-name{font-size:var(--fs-h3);line-height:var(--lh-sub);transition:transform .2s var(--ease-out);display:inline-block;}
.offer-time{color:var(--trail);}
.offer-outcome{color:var(--body);}
@media (hover:hover) and (pointer:fine){
  .offer-list a:hover .offer-name{transform:translateX(6px);}
}
@media (max-width:760px){ .offer-list a{grid-template-columns:1fr;} }

/* ---------- closing ---------- */
.closing{padding-block:var(--space-7);border-top:1px solid var(--line);}
.closing-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;}
.closing .statement{max-width:20ch;}

/* ==========================================================
   SERVICES
   ========================================================== */
.offers-sec{padding-top:0;}
.offers{display:grid;gap:0;border-top:1px solid var(--line);}
.offer{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-4) var(--space-5);
  padding-block:var(--space-5);border-bottom:1px solid var(--line);
}
.offer-head h2{font-size:var(--fs-h2);line-height:var(--lh-heading);}
.offer-head .tag{display:block;margin-bottom:var(--space-2);color:var(--trail);}
.offer-head .promise{margin-top:var(--space-2);font-size:var(--fs-h3);line-height:var(--lh-sub)5;color:var(--trail);}
.offer-head p.desc{margin-top:var(--space-3);color:var(--body);max-width:56ch;}
.facts{align-self:start;padding-top:12px;display:grid;gap:var(--space-3);}
.facts div{display:grid;gap:6px;}
.facts dt{color:var(--trail);}
.facts dd{color:var(--ink);}
@media (max-width:860px){ .offer{grid-template-columns:1fr;} }

/* ==========================================================
   APPROACH
   ========================================================== */
.timeline{list-style:none;counter-reset:step;border-top:1px solid var(--line);}
.timeline li{
  display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,6fr);gap:var(--space-2) var(--space-4);
  align-items:baseline;padding-block:var(--space-4);border-bottom:1px solid var(--line);
}
.timeline li::before{
  counter-increment:step;content:counter(step, decimal-leading-zero);
  font-size:var(--fs-label);letter-spacing:var(--track-caps);font-variant-numeric:tabular-nums;color:var(--trail);
}
.timeline h3{font-size:var(--fs-h3);font-weight:300;line-height:var(--lh-sub);}
.timeline p{color:var(--body);max-width:56ch;}
@media (max-width:860px){ .timeline li{grid-template-columns:40px minmax(0,1fr);} .timeline li p{grid-column:2;} }

.who{display:grid;gap:var(--space-3);}
.who h2{font-size:var(--fs-h2);line-height:var(--lh-heading);}
.who p{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--body);max-width:56ch;}

/* ==========================================================
   ABOUT
   ========================================================== */
.bio{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-5) var(--space-5);}
.bio-text p{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--body);max-width:52ch;}
.bio-text p + p{margin-top:var(--space-3);}
.creds{list-style:none;display:grid;align-content:start;border-top:1px solid var(--line);}
.creds li{display:grid;gap:4px;padding-block:var(--space-2);border-bottom:1px solid var(--line);}
.creds b{font-weight:400;color:var(--ink);}
.creds span{color:var(--muted);font-size:var(--fs-small);}
@media (max-width:980px){ .bio{grid-template-columns:1fr;} }

/* ==========================================================
   CONTACT
   ========================================================== */
.booking-head{display:grid;gap:var(--space-1);margin-bottom:var(--space-4);}
.booking-head h2{font-size:var(--fs-h2);line-height:var(--lh-heading);}
.booking-head p{color:var(--muted);}
#my-cal-inline{width:100%;height:950px;border:1px solid var(--line);overflow:hidden;background:var(--surface);}

.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-5) var(--space-5);}
.contact-info h2{font-size:var(--fs-h2);line-height:var(--lh-heading);text-wrap:balance;}
.contact-info > p{margin-top:var(--space-2);color:var(--body);max-width:40ch;}
.contact-list{list-style:none;margin-top:var(--space-4);display:grid;gap:var(--space-3);}
.contact-list li{display:grid;gap:6px;}
.contact-list span{color:var(--trail);}
.contact-list a{font-size:var(--fs-lead);width:fit-content;}
@media (max-width:980px){ .contact-grid{grid-template-columns:1fr;} }

.form-group{display:grid;gap:8px;margin-bottom:var(--space-3);}
.form-group label{font-size:var(--fs-small);font-weight:400;color:var(--ink);}
.form-group input,.form-group textarea,.form-group select{
  width:100%;font:inherit;font-weight:300;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:2px;padding:14px 16px;
  transition:border-color .15s ease;
}
.form-group input:hover,.form-group textarea:hover,.form-group select:hover{border-color:var(--line-strong);}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--ink);}
.form-group textarea{min-height:140px;resize:vertical;line-height:var(--lh-body);}
.form-group textarea::placeholder{color:var(--muted);}
.select-wrap{position:relative;}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-inline-end:44px;cursor:pointer;}
.select-wrap::after{
  content:"";position:absolute;inset-inline-end:18px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-inline-end:1px solid var(--trail);border-bottom:1px solid var(--trail);transform:rotate(45deg);pointer-events:none;
}
.form-note{margin-top:var(--space-2);font-size:var(--fs-small);color:var(--muted);max-width:52ch;}
.contact-form .btn{margin-top:var(--space-1);}

/* ==========================================================
   PRIVACY
   ========================================================== */
.legal{padding-bottom:var(--space-7);}
.legal-updated{color:var(--trail);margin-bottom:var(--space-5);}
.legal-section{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-2) var(--space-5);padding-block:var(--space-4);border-top:1px solid var(--line);}
.legal-section h2{font-weight:400;font-size:var(--fs-h3);line-height:var(--lh-sub);}
.legal-body{max-width:64ch;color:var(--body);}
.legal-body p + p,.legal-body p + ul,.legal-body ul + p{margin-top:var(--space-2);}
.legal-body ul{padding-inline-start:1.1em;display:grid;gap:8px;}
@media (max-width:760px){ .legal-section{grid-template-columns:1fr;} }

/* ==========================================================
   FOOTER: the deck's bottom strip
   ========================================================== */
.site-footer{padding-block:var(--space-5) var(--space-4);border-top:1px solid var(--line);}
.site-footer .wrap{display:grid;grid-template-columns:1fr auto;gap:var(--space-4) var(--space-4);align-items:start;}
.foot-brand{display:grid;gap:var(--space-2);}
.foot-brand > span{font-size:var(--fs-small);color:var(--muted);}
.foot-links{display:flex;gap:var(--space-2) var(--space-4);flex-wrap:wrap;list-style:none;font-size:var(--fs-small);}
.foot-links a,.foot-links button{color:var(--muted);text-decoration:none;background:none;border:none;cursor:pointer;padding:0;font-weight:300;transition:color .15s ease;}
@media (hover:hover) and (pointer:fine){ .foot-links a:hover,.foot-links button:hover{color:var(--ink);} }
.foot-meta{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);
  padding-top:var(--space-3);border-top:1px solid var(--line);color:var(--trail);
}
@media (max-width:640px){ .site-footer .wrap{grid-template-columns:1fr;} }

/* ==========================================================
   COOKIE CONSENT
   ========================================================== */
.cookie-banner{
  position:fixed;inset-inline:var(--space-2);bottom:var(--space-2);z-index:200;
  max-width:760px;margin-inline:auto;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:var(--space-3);
  transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;
  transition:transform .4s var(--ease-drawer), opacity .25s ease;
}
.cookie-banner.visible{transform:none;opacity:1;pointer-events:auto;}
.cookie-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;}
.cookie-text{font-size:var(--fs-small);line-height:var(--lh-body);max-width:48ch;color:var(--body);}
.cookie-text a{color:inherit;text-underline-offset:3px;}
.cookie-actions{display:flex;gap:8px;flex:none;}
.cookie-banner .btn{min-height:40px;font-size:var(--fs-button-sm);padding:0 18px;}
@media (max-width:560px){ .cookie-actions{width:100%;} .cookie-actions .btn{flex:1;} }

/* ==========================================================
   MOTION: unhurried. One entrance per page, and the statements reveal once as they are reached.
   ========================================================== */
@keyframes rise{
  from{opacity:0;transform:translateY(0.4em);}
  to{opacity:1;transform:none;}
}
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.enter{animation:rise .9s var(--ease-out) both;animation-delay:calc(var(--i, 0) * 80ms + 60ms);}

/* Word reveal for headlines and statements (motion.js). Each word
   rises out of its own line. The clip reaches past the word box so the
   ring on å and the descenders on j and g are never cut. Hidden only
   when JS is running; the failsafe shows text if the script never does. */
.js .split:not(.split-ready){visibility:hidden;}
.split-failsafe .split{visibility:visible;}
.split-ready .w{display:inline-block;clip-path:inset(-0.35em -0.15em -0.3em -0.15em);}
.split-ready .wi{
  display:inline-block;transform:translateY(calc(100% + 0.35em));
  transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--w, 0) * 32ms);
}
.split-ready.is-in .wi{transform:none;}

/* Nav: a hairline draws in from the left on hover and leaves to the right. */
.nav-links a{position:relative;}
.nav-links a::after{
  content:"";position:absolute;inset-inline:0;bottom:-6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out);
}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}
}

/* Page to page: a short crossfade, header held still. */
@view-transition{navigation:auto;}
.site-header{view-transition-name:site-header;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s;}

/* Theme switch: the new theme opens as a circle from the button (nav.js). */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal;}
html.theme-vt .site-header{view-transition-name:none;}

@media (prefers-reduced-motion:reduce){
  .enter{animation:fade .3s ease both;animation-delay:0s;}
  .split-ready .wi{transform:none;transition:none;}
  .nav-links a::after{transition:none;}
  .btn:active{transform:none;}
  .offer-list a:hover .offer-name{transform:none;}
  .mobile-menu,.mobile-menu.open{transform:none;}
  .cookie-banner{transform:none;transition:opacity .2s ease;}
}

/* ==========================================================
   SKIP LINK, HERO NOTE, FAQ, 404
   ========================================================== */
.skip-link{
  position:absolute;inset-inline-start:var(--space-2);top:var(--space-2);z-index:100;
  padding:10px 16px;background:var(--ink);color:var(--bg);
  text-decoration:none;font-size:var(--fs-small);font-weight:400;
  transform:translateY(-200%);
}
.skip-link:focus-visible{transform:none;}
main:focus{outline:none;}


.faq-list{margin-top:var(--space-5);border-bottom:1px solid var(--line);}
.faq-item{border-top:1px solid var(--line);}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding-block:var(--space-3);cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:focus-visible{outline-offset:6px;}
.faq-item h3{font-size:var(--fs-h3);font-weight:400;line-height:var(--lh-sub);text-wrap:balance;max-width:34ch;}
@media (hover:hover) and (pointer:fine){
  .faq-item summary h3{transition:color .15s ease;}
  .faq-item summary:hover h3{color:var(--trail);}
}

/* Plus that turns into a cross: two bars, the vertical one rotates flat. */
.faq-icon{position:relative;flex:none;width:18px;height:18px;}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;inset-inline-start:0;top:50%;width:18px;height:1.5px;
  margin-top:-0.75px;background:currentColor;border-radius:1px;
  transition:transform .25s var(--ease-out);
}
.faq-icon::after{transform:rotate(90deg);}
.faq-item[open] .faq-icon::after{transform:rotate(0deg);}

.faq-answer{padding-bottom:var(--space-4);}
.faq-answer p{color:var(--body);max-width:62ch;}

/* Height animates where the browser allows it (Chrome 131+);
   elsewhere the answer simply appears. */
@supports (interpolate-size: allow-keywords){
  .faq{interpolate-size:allow-keywords;}
  .faq-item::details-content{
    height:0;opacity:0;overflow:clip;
    transition:height .3s var(--ease-out),opacity .2s ease,content-visibility .3s allow-discrete;
  }
  .faq-item[open]::details-content{height:auto;opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .faq-item::details-content{transition:opacity .2s ease;}
  .faq-icon::before,.faq-icon::after{transition:none;}
}

.notfound-actions{padding-top:0;}

/* The philosophy statement is a full paragraph. On phones the statement
   size stacks it past a screen, so it steps down to read as one thought. */
@media (max-width:560px){
  .statement.philosophy{font-size:var(--fs-h2);line-height:var(--lh-heading);max-width:none;}
}

/* Small type never goes Light: at 15px and under, Light in steel on near
   black gets too faint on ordinary laptop screens. */
.hero-note,.form-note,.foot-brand > span,.foot-links a,.foot-links button,
.creds span,.booking-head p,.cookie-text,.field-error,.form-status{font-weight:400;}

/* Form feedback, in place. */
.field-error{font-size:var(--fs-small);color:var(--accent-text);}
.form-group input[aria-invalid="true"],.form-group textarea[aria-invalid="true"]{border-bottom-color:var(--accent);}
.form-status{margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--line);font-size:var(--fs-lead);max-width:44ch;}
.form-status.is-sent{color:var(--ink);}
.form-status.is-failed{color:var(--accent-text);}
.contact-form .btn[disabled]{opacity:.6;cursor:progress;}

/* Narrow phones (320 to 380px): the airy wordmark, language switch, theme
   button and menu button share one row. Tighten the gaps before anything
   gets pushed past the edge. */
@media (max-width:380px){
  .site-header .wrap{gap:var(--space-2);}
  .nav-tools{gap:6px;}
  .lang-switch button{min-width:30px;}
}

/* Contact: say up front that there are two ways in, and jump to each. */
.page-actions{margin-top:var(--space-4);display:flex;gap:12px;flex-wrap:wrap;}
#kalender,#skriv{scroll-margin-top:92px;}

/* Services: a quiet way to act right after reading about an offer. */
.offer-cta{display:inline-block;margin-top:var(--space-3);}

/* On phones the form comes straight after the heading; direct contact
   details follow as the alternative. */
@media (max-width:980px){
  .contact-info{display:contents;}
  .contact-info h2{order:1;}
  .contact-form{order:2;}
  .contact-info > p{order:3;margin-top:var(--space-3);}
  .contact-list{order:4;margin-top:0;}
  .contact-grid{row-gap:var(--space-3);}
}

/* Principles: three columns, a different shape from the outcome rows below. */
.principles{margin-top:var(--space-5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
.principle{padding-top:var(--space-3);border-top:1px solid var(--line);display:grid;align-content:start;gap:var(--space-2);}
.principle h3{font-size:var(--fs-h3);font-weight:300;line-height:var(--lh-sub);}
.principle p{color:var(--body);}
@media (max-width:1100px){ .principles{grid-template-columns:1fr;gap:var(--space-3);} }