/* ==========================================================================
   CHRIS BUILDS
   Alt som normalt skal endres ligger i CONFIG nederst i fila.
   ========================================================================== */

:root{
  /* --- LYST TEMA (standard) --- */
  --paper:#EDF0EA;
  --card:#FCFDFA;
  --card-2:#E2E8DE;
  --ink:#0F1A16;
  --ink-2:#3D4E48;
  --ink-3:#68796F;
  --line:#D2DACD;
  --line-2:#B7C2B3;

  --spruce:#0B6B57;
  --spruce-ink:#064437;
  --spruce-wash:#DCEBE3;
  --ember:#CE4718;
  --ember-wash:#F7E3D8;
  --ember-on-night:#FF8A5B;   /* ember som alltid star pa mork bakgrunn */

  --night:#0B1512;
  --night-fg:#EDF0EA;
  --night-fg-2:#A9B8B0;
  --night-line:rgba(237,240,234,.16);
  --night-card:rgba(237,240,234,.045);

  --on-spruce:#FCFDFA;
  --on-ember:#FFF6F1;
  --focus:#0B6B57;
  --notch:var(--paper);

  --shadow-sm:0 1px 2px rgba(15,26,22,.05);
  --shadow:0 2px 4px rgba(15,26,22,.04), 0 14px 34px -22px rgba(15,26,22,.42);
  --shadow-lg:0 4px 8px rgba(15,26,22,.05), 0 34px 60px -30px rgba(15,26,22,.5);

  /* --- type --- */
  --display:"Bricolage Grotesque","Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-base:1.125rem;
  --t-lg:1.3125rem;
  --t-hero:clamp(2.85rem,8.4vw,5.75rem);
  --t-sec:clamp(2rem,4.8vw,3.1rem);

  --r-sm:6px;
  --r:12px;
  --r-lg:20px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C1512;
    --card:#141F1A;
    --card-2:#1B2822;
    --ink:#E7EDE8;
    --ink-2:#AFBDB6;
    --ink-3:#86958D;
    --line:#26332C;
    --line-2:#37453D;

    --spruce:#4FC9A6;
    --spruce-ink:#8FE3CA;
    --spruce-wash:#0F2E27;
    --ember:#FF8A5B;
    --ember-wash:#331810;

    --night:#070E0C;
    --night-card:rgba(237,240,234,.04);

    --on-spruce:#04211A;
    --on-ember:#2B0E05;
    --focus:#4FC9A6;

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 4px rgba(0,0,0,.4), 0 16px 36px -24px rgba(0,0,0,.9);
    --shadow-lg:0 4px 10px rgba(0,0,0,.45), 0 36px 64px -32px rgba(0,0,0,1);
  }
}

:root[data-theme="dark"]{
  --paper:#0C1512;
  --card:#141F1A;
  --card-2:#1B2822;
  --ink:#E7EDE8;
  --ink-2:#AFBDB6;
  --ink-3:#86958D;
  --line:#26332C;
  --line-2:#37453D;

  --spruce:#4FC9A6;
  --spruce-ink:#8FE3CA;
  --spruce-wash:#0F2E27;
  --ember:#FF8A5B;
  --ember-wash:#331810;

  --night:#070E0C;
  --night-card:rgba(237,240,234,.04);

  --on-spruce:#04211A;
  --on-ember:#2B0E05;
  --focus:#4FC9A6;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 16px 36px -24px rgba(0,0,0,.9);
  --shadow-lg:0 4px 10px rgba(0,0,0,.45), 0 36px 64px -32px rgba(0,0,0,1);
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:750;
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:balance;
  margin:0;
}
p{margin:0;max-width:63ch}
a{color:inherit}
img,svg{max-width:100%}

:where(a,button,summary,input):focus-visible{
  outline:2.5px solid var(--focus);
  outline-offset:3px;
  border-radius:3px;
}

.wrap{width:min(1140px,100% - 2.5rem);margin-inline:auto}
.narrow{width:min(680px,100%);margin-inline:auto}

section{padding-block:clamp(4rem,9vw,7.5rem)}

.h2{font-size:var(--t-sec);letter-spacing:-.035em}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.85rem 1.35rem;
  font-family:var(--display);font-weight:700;text-decoration:none;
}
.skip:focus{left:1rem;top:1rem}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--spruce);
  margin:0 0 1.15rem;
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:currentColor;flex:none;
}
.eyebrow.on-night{color:var(--ember-on-night)}

/* ---------- topplinje ---------- */
.progress{
  position:fixed;inset:0 auto auto 0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--ember);z-index:90;
}
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:1rem;min-height:66px;flex-wrap:wrap}
.mark{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:800;font-size:1.1rem;
  letter-spacing:-.03em;text-decoration:none;
}
.mark .glyph{width:28px;height:28px;flex:none}
.marktext{display:flex;flex-direction:column;line-height:1.05}
.marktext b{font-weight:800;letter-spacing:-.03em}
.marktext small{
  font-family:var(--mono);font-size:.5625rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:.15rem;
}
.topnav{display:none;gap:1.6rem;margin-left:auto;font-size:var(--t-sm);font-weight:500}
.topnav a{
  text-decoration:none;color:var(--ink-2);
  padding-block:.3rem;border-bottom:2px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.topnav a:hover{color:var(--ink);border-bottom-color:var(--ember)}
@media(min-width:960px){.topnav{display:flex}}

.lang{
  margin-left:auto;display:flex;
  border:1px solid var(--line-2);border-radius:99px;overflow:hidden;
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;
}
@media(min-width:960px){.lang{margin-left:0}}
.lang button{
  appearance:none;border:0;background:transparent;color:var(--ink-3);
  padding:.4rem .75rem;cursor:pointer;font:inherit;
  transition:background .16s ease,color .16s ease;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------- knapper ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:60px;padding:.85rem 1.7rem;
  font-family:var(--display);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;
  border-radius:var(--r);border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .14s cubic-bezier(.2,.9,.3,1), background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--spruce);color:var(--on-spruce);border-color:var(--spruce);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--spruce-ink);border-color:var(--spruce-ink);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--card)}
.btn-night{background:transparent;color:var(--night-fg);border-color:var(--night-line)}
.btn-night:hover{border-color:var(--ember-on-night);color:var(--ember-on-night)}
.btn svg{flex:none}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,7vw,5rem) clamp(3rem,7vw,5.5rem);position:relative}
.hero-grid{display:grid;gap:clamp(2.75rem,5vw,3.5rem);align-items:start}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.08fr .92fr;align-items:center}}

.hero h1{
  font-size:var(--t-hero);
  font-weight:800;
  letter-spacing:-.042em;
  max-width:13ch;
}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln > span{display:block}
.hero h1 em{font-style:normal;color:var(--spruce)}

.lede{
  font-size:clamp(1.15rem,2.1vw,var(--t-lg));
  color:var(--ink-2);margin-top:1.6rem;max-width:41ch;line-height:1.55;
}
.price-inline{
  color:var(--ink);font-weight:600;white-space:nowrap;
  box-shadow:inset 0 -.42em 0 var(--ember-wash);
}

.reassure{
  margin-top:1.5rem;font-size:var(--t-sm);color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;
}
.reassure span{display:inline-flex;align-items:center;gap:.45rem}
.dot{width:6px;height:6px;border-radius:50%;background:var(--spruce);flex:none}

/* ---------- kvittering ---------- */
.receipt{
  position:relative;
  background:var(--card);
  color:var(--ink);
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.75;
  padding:2.1rem 1.6rem;
  box-shadow:var(--shadow-lg);
  max-width:390px;
}
.receipt::before,.receipt::after{
  content:"";position:absolute;left:0;right:0;height:11px;
  background:radial-gradient(circle at 6px 0, var(--notch) 5.4px, transparent 5.8px) 0 0/12px 11px repeat-x;
}
.receipt::before{top:0}
.receipt::after{bottom:0;transform:scaleY(-1)}

.rc-head{text-align:center;padding-bottom:.9rem}
.rc-head b{
  display:block;font-family:var(--display);font-size:1.32rem;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.1;
}
.rc-head span{display:block;font-size:.6875rem;letter-spacing:.14em;color:var(--ink-3);margin-top:.4rem}
.rc-rule{border:0;border-top:1.5px dashed var(--line-2);margin:.85rem 0}
.rc-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-variant-numeric:tabular-nums;
}
.rc-line .k{flex:1;min-width:0}
.rc-line .v{white-space:nowrap;font-weight:500}
.rc-note{color:var(--ink-3);font-size:.75rem;line-height:1.55;display:block}
.rc-sum{font-size:1rem;font-weight:500}
.rc-sum .v{color:var(--ember)}
.rc-stamp{
  text-align:center;letter-spacing:.16em;font-weight:500;
  color:var(--ember);padding-top:.2rem;
}
.rc-sign{text-align:center;font-size:.6875rem;color:var(--ink-3);letter-spacing:.06em;line-height:1.6}
.rc-barcode{
  height:32px;margin-top:1rem;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 14px, var(--ink) 14px 15px, transparent 15px 18px);
  opacity:.7;
}

.hero-receipt{transform:rotate(-1.4deg);margin-inline:auto}
@media(min-width:1000px){.hero-receipt{margin-inline:0 auto}}

/* ---------- faktastripe ---------- */
.factstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.factstrip-in{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.factstrip-in{grid-template-columns:repeat(4,1fr)}}
.fact{
  padding:1.45rem 1.35rem;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:.35rem;
}
@media(min-width:820px){.fact{border-bottom:0}}
.fact:last-child{border-right:0}
@media(max-width:819px){
  .fact:nth-child(2n){border-right:0}
  .fact:nth-last-child(-n+2){border-bottom:0}
}
.fact dt{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.fact dd{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:1.0625rem;letter-spacing:-.015em;line-height:1.25;
}
.fact dd.stengt{color:var(--ember)}
.stengtvarsel{
  margin:1.25rem auto 0;max-width:46ch;
  background:color-mix(in srgb, var(--night) 34%, transparent);
  border:1px solid color-mix(in srgb, var(--on-spruce) 26%, transparent);
  border-radius:var(--r);padding:.85rem 1.2rem;
  font-family:var(--mono);font-size:var(--t-xs);line-height:1.6;color:var(--on-spruce);
}

/* ---------- steg ---------- */
.steps{display:grid;gap:clamp(1.75rem,3vw,2.5rem);margin-top:2.75rem;counter-reset:step}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding-top:2.9rem}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;color:var(--ember);
}
.step::after{content:"";position:absolute;top:1.75rem;left:0;right:0;height:1px;background:var(--line)}
.step h3{font-size:var(--t-lg);margin-bottom:.6rem}
.step p{color:var(--ink-2);font-size:1.0625rem}

/* ---------- steg-illustrasjoner ---------- */
.stepfig{
  margin:0 0 1.5rem;
  background:var(--card);
  border-radius:var(--r);
  padding:.9rem 1rem;
}
.stepfig svg{display:block;width:100%;height:auto}
.sf-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sf-frame{stroke:var(--line-2);stroke-width:2.5}
.sf-item{stroke:var(--line-2);stroke-width:3}
.sf-go{stroke:var(--spruce);stroke-width:3}
.sf-hot{stroke:var(--ember);stroke-width:3}
.sf-fill-hot{fill:var(--ember)}
.sf-fill-go{fill:var(--spruce)}
.sf-label{
  font-family:var(--mono);font-size:15px;fill:var(--ink-3);
  letter-spacing:.08em;
}

.js-anim .sf-draw{stroke-dasharray:100;stroke-dashoffset:100}
.js-anim .step.in .sf-draw{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .6s cubic-bezier(.3,.8,.35,1);
}
.js-anim .step.in .d1{transition-delay:.14s}
.js-anim .step.in .d2{transition-delay:.32s}
.js-anim .step.in .d3{transition-delay:.5s}
.js-anim .step.in .d4{transition-delay:.68s}

.js-anim .sf-van{transform:translateX(0)}
.js-anim .step.in .sf-van{
  transform:translateX(88px);
  transition:transform 1.6s cubic-bezier(.42,.02,.28,1) .45s;
}

/* ---------- pris ---------- */
.band{background:var(--card-2)}
.band .receipt{--notch:var(--card-2)}
.pris-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:940px){.pris-grid{grid-template-columns:.95fr 1.05fr}}
.pris-grid .receipt{margin-inline:auto}
.bignum{
  font-family:var(--display);font-weight:800;
  font-size:clamp(4.5rem,13vw,8rem);line-height:.86;letter-spacing:-.055em;
  display:flex;align-items:baseline;gap:.5rem;color:var(--ember);
  font-variant-numeric:tabular-nums;
}
.bignum .u{font-size:.26em;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.pris-sub{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);margin-top:1rem;letter-spacing:.02em}
.plainlist{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.05rem}
.plainlist li{display:flex;gap:.85rem;align-items:flex-start;color:var(--ink-2);font-size:1.0625rem}
.tick{flex:none;margin-top:.42em}
.plainlist b{color:var(--ink)}

/* ---------- sløyfa ---------- */
.loop-wrap{display:grid;gap:clamp(2.5rem,5vw,3.75rem);align-items:center}
@media(min-width:960px){.loop-wrap{grid-template-columns:1fr 1fr}}
.loopfig{margin:0;display:none}
@media(min-width:960px){.loopfig{display:block}}
.loopfig svg{width:100%;height:auto;overflow:visible}
.loop-node-label{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em}
.loop-center-a{font-family:var(--display);font-size:24px;font-weight:800;fill:var(--ink);letter-spacing:-.02em}
.loop-center-b{font-family:var(--mono);font-size:12.5px;fill:var(--ink-3);letter-spacing:.05em}
.loop-mobile{display:grid;gap:1.35rem}
@media(min-width:960px){.loop-mobile{display:none}}
.loop-row{display:flex;gap:1rem;align-items:flex-start}
.loop-badge{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--spruce);color:var(--on-spruce);
  font-family:var(--mono);font-size:.8125rem;font-weight:500;
}
.loop-badge.build{background:var(--ember);color:var(--on-ember)}
.loop-row h3{font-size:1.0625rem;margin-bottom:.15rem}
.loop-row p{font-size:var(--t-sm);color:var(--ink-2)}
.prose{display:grid;gap:1.1rem;color:var(--ink-2);margin-top:1.5rem}
.prose p{font-size:1.0625rem}

/* ---------- byggekassa ---------- */
.build{background:var(--night);color:var(--night-fg)}
.build h2,.build h3{color:var(--night-fg)}
.build p{color:var(--night-fg-2)}
.build .eyebrow{color:var(--ember-on-night)}
.build-grid{display:grid;gap:clamp(2.75rem,5vw,4rem);align-items:center}
@media(min-width:960px){.build-grid{grid-template-columns:.9fr 1.1fr}}

.wall{
  border:1px solid var(--night-line);
  border-radius:var(--r-lg);
  background:var(--night-card);
  padding:clamp(1.35rem,3vw,2rem);
}
.wall-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.wall-head .lbl{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-on-night);
}
.wall-head h3{font-size:var(--t-lg);margin-top:.45rem;letter-spacing:-.025em}
.wall-head .meta{font-family:var(--mono);font-size:var(--t-xs);color:var(--night-fg-2);margin-top:.35rem}
.wall-pct{
  font-family:var(--display);font-weight:800;font-size:2.75rem;line-height:1;
  letter-spacing:-.045em;color:var(--ember-on-night);font-variant-numeric:tabular-nums;
}
.wall-pct small{font-size:.4em;font-weight:700}

.wall-rows{display:flex;flex-direction:column;gap:9px}
.wall-row{display:flex;align-items:center;gap:12px}
.wall-row .bricks{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;flex:1}
.wall-row .axis{
  flex:none;width:4.4em;text-align:right;
  font-family:var(--mono);font-size:.6875rem;color:var(--night-fg-2);
  font-variant-numeric:tabular-nums;opacity:.65;
}
.brick{
  position:relative;aspect-ratio:2/1;border-radius:4px;
  color:rgba(237,240,234,.20);
  border:1.5px solid currentColor;
  background:transparent;
  transition:color .4s cubic-bezier(.2,.9,.3,1), background-color .4s cubic-bezier(.2,.9,.3,1);
}
.brick::before,.brick::after{
  content:"";position:absolute;top:-5px;height:6px;width:24%;
  border-radius:3px 3px 0 0;background:currentColor;opacity:.85;
}
.brick::before{left:15%}
.brick::after{right:15%}
.brick.on{color:var(--ember-on-night);background:var(--ember-on-night)}
.brick.next{color:var(--ember-on-night);border-style:dashed;animation:nextpulse 2.6s ease-in-out infinite}
.brick.next::before,.brick.next::after{opacity:.4}
@keyframes nextpulse{0%,100%{opacity:.45}50%{opacity:1}}

.wall-foot{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.4rem;padding-top:1.15rem;border-top:1px solid var(--night-line);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--night-fg-2);
  font-variant-numeric:tabular-nums;
}
.wall-foot b{color:var(--night-fg);font-weight:500}
.notdonation{
  margin-top:1.7rem;border-left:2px solid var(--ember-on-night);
  padding:.15rem 0 .15rem 1.05rem;
  font-size:var(--t-sm);color:var(--night-fg-2);line-height:1.6;
}

/* ---------- chris ---------- */
.chris{display:grid;gap:clamp(2.5rem,5vw,3.75rem);align-items:start}
@media(min-width:960px){.chris{grid-template-columns:1fr 1fr}}
.quote{
  margin:0 0 2rem;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.1vw,2.05rem);line-height:1.2;letter-spacing:-.03em;
  text-wrap:balance;
}
.quote cite{
  display:block;margin-top:1rem;
  font-family:var(--mono);font-style:normal;font-size:var(--t-xs);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
.note{background:var(--spruce-wash);border-radius:var(--r);padding:1.5rem 1.6rem;display:grid;gap:.8rem}
.note-lbl{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--spruce);
}
.note p{font-size:1.0625rem;color:var(--ink-2)}

/* ---------- trygghet ---------- */
.safe-grid{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid var(--line)}
@media(min-width:820px){.safe-grid{grid-template-columns:repeat(2,1fr)}}
.safe-item{padding:1.75rem 0;border-bottom:1px solid var(--line)}
@media(min-width:820px){
  .safe-item{padding:1.85rem 2rem 1.85rem 0}
  .safe-item:nth-child(2n){padding-left:2rem;padding-right:0;border-left:1px solid var(--line)}
}
.safe-item h3{font-size:1.0625rem;margin-bottom:.45rem}
.safe-item p{font-size:var(--t-sm);color:var(--ink-2)}

/* ---------- bestill ---------- */
.order{text-align:center;background:var(--spruce);color:var(--on-spruce)}
.order h2{color:var(--on-spruce)}
.order .eyebrow{color:var(--on-spruce);opacity:.75;justify-content:center}
.order p{color:var(--on-spruce);margin-inline:auto}
.order .cta-row{justify-content:center}
.order .btn-primary{background:var(--on-spruce);color:var(--spruce-ink);border-color:var(--on-spruce)}
.order .btn-primary:hover{background:var(--card);border-color:var(--card)}
.order .btn-ghost{color:var(--on-spruce);border-color:color-mix(in srgb,var(--on-spruce) 45%, transparent)}
.order .btn-ghost:hover{background:color-mix(in srgb,var(--on-spruce) 14%, transparent);border-color:var(--on-spruce)}
.order .tel-link{color:var(--on-spruce);font-weight:700;text-underline-offset:3px}
.msgpreview{
  margin:2.5rem auto 0;max-width:470px;text-align:left;
  background:color-mix(in srgb, var(--night) 32%, transparent);
  border:1px solid color-mix(in srgb,var(--on-spruce) 24%, transparent);
  border-radius:var(--r);
  padding:1.2rem 1.35rem;
  font-family:var(--mono);font-size:var(--t-xs);line-height:1.7;
  color:var(--on-spruce);
}
.msgpreview strong{
  display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;margin-bottom:.7rem;font-weight:500;
}
.msgpreview span{white-space:pre-wrap}

/* ---------- faq ---------- */
.faq{margin-top:2.25rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding-block:1.3rem;
  font-family:var(--display);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;
  display:flex;justify-content:space-between;align-items:center;gap:1.25rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--ember);border-bottom:2px solid var(--ember);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq p{padding-bottom:1.4rem;color:var(--ink-2);font-size:1.0625rem;max-width:70ch}

/* ---------- footer ---------- */
footer{background:var(--night);color:var(--night-fg);padding-block:clamp(3rem,6vw,4.5rem) 2.5rem}
.footgrid{display:grid;gap:2.25rem}
@media(min-width:760px){.footgrid{grid-template-columns:1.4fr 1fr 1fr}}
footer .mark{color:var(--night-fg)}
footer h4{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-on-night);margin:0 0 .85rem;font-weight:500;
}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:var(--t-sm)}
footer a{color:var(--night-fg);text-decoration:none;text-underline-offset:3px}
footer a:hover{text-decoration:underline;color:var(--ember-on-night)}
footer li{color:var(--night-fg-2)}
.foottag{font-size:var(--t-sm);color:var(--night-fg-2);margin-top:.5rem}
.legal{
  margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--night-line);
  display:grid;gap:.85rem;
  font-size:.75rem;line-height:1.65;color:var(--night-fg-2);max-width:none;
}
.legal b{color:var(--night-fg);font-weight:600}

/* ---------- reveal ---------- */
.js-anim [data-rev]{opacity:0;transform:translateY(14px)}
.js-anim [data-rev].in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.js-anim .hero h1 .ln > span{transform:translateY(105%)}
.js-anim .hero h1.in .ln > span{transform:none;transition:transform .82s cubic-bezier(.16,.84,.28,1)}
.js-anim .hero h1.in .ln:nth-child(2) > span{transition-delay:.07s}
.js-anim .hero h1.in .ln:nth-child(3) > span{transition-delay:.14s}

.loop-arc{stroke-dasharray:var(--len);stroke-dashoffset:0}
.js-anim .loop-arc{stroke-dashoffset:var(--len)}
.js-anim .loopfig.in .loop-arc{stroke-dashoffset:0;transition:stroke-dashoffset .85s cubic-bezier(.3,.7,.3,1)}
.js-anim .loop-node{transform:scale(.68);transform-origin:center;transform-box:fill-box}
.js-anim .loopfig.in .loop-node{transform:none;transition:transform .55s cubic-bezier(.3,1.35,.5,1)}

/* nar GSAP er aktiv eier den disse egenskapene - CSS skal ikke ease i tillegg */
.gsap-on .loop-arc,
.gsap-on .loop-node{transition:none !important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js-anim [data-rev],
  .js-anim .hero h1 .ln > span,
  .js-anim .loop-node{opacity:1 !important;transform:none !important}
  .js-anim .loop-arc,
  .js-anim .sf-draw{stroke-dashoffset:0 !important}
  .js-anim .sf-van{transform:none !important}
  .progress{display:none}
  .brick.next{animation:none}
}

/* ---------- ideliste paa Chris Builds-sida ---------- */
.ideliste{
  display:grid;gap:0;margin-top:2.75rem;
  border-top:1px solid var(--night-line);
}
@media(min-width:820px){.ideliste{grid-template-columns:repeat(2,1fr)}}
.ide{padding:1.9rem 0;border-bottom:1px solid var(--night-line)}
@media(min-width:820px){
  .ide{padding:2rem 2.25rem 2rem 0}
  .ide:nth-child(2n){padding-left:2.25rem;padding-right:0;border-left:1px solid var(--night-line)}
}
.ide-merke{
  display:inline-block;margin-bottom:.85rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-on-night);
  border:1px solid var(--ember-on-night);border-radius:99px;
  padding:.25rem .7rem;
}
.ide h3{font-size:var(--t-lg);margin-bottom:.7rem;letter-spacing:-.025em}
.ide p{font-size:1.0625rem;color:var(--night-fg-2)}
.idefot{
  margin-top:1.9rem;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--night-fg-2);
}