/* Selvhostede fonter, fra ~/.claude/assets/fonts */
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'General Sans';src:url('../assets/fonts/general-sans-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Gambetta';src:url('../assets/fonts/gambetta-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('../assets/fonts/sentient-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('../assets/fonts/familjen-grotesk-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* Design DNA (preset dobbel-stemme, målt 02.10.2026 @1440):
   display lh 1,00 og tracking -3 % fra twofoldny.com og therapyin.london,
   grotesk + serif i samme linje fra twofoldny.com,
   asymmetrisk display venstre / ingress høyre fra therapyin.london,
   rust-aksent fra kundens egen #743213 og høstfotoet. Ingen skygger, ingen radius. */
:root{
  --c-papir:#F6F0E6;
  --c-papir-2:#EDE4D6;
  --c-blekk:#2A2222;
  --c-dempet:#5E524B;
  --c-linje:#D9CDB8;
  --c-aksent:#7A3517;
  --c-aksent-tekst:#FBF6EE;
  --c-fokus:#7A3517;

  --f-sans:'General Sans',system-ui,sans-serif;
  --f-serif:'Fraunces',Georgia,serif;
  --f-brod:var(--f-sans);
  --serif-vekt:300;

  --fs-display:clamp(3.25rem,1.2rem + 7.6vw,8.5rem);
  --fs-h2:clamp(2.25rem,1.4rem + 3vw,4.25rem);
  --fs-ingress:clamp(1.125rem,0.95rem + 0.7vw,1.6rem);
  --fs-brod:1.0625rem;
  --fs-liten:0.875rem;
  --lh-display:1;
  --spor-display:-0.03em;
  --lh-brod:1.65;

  --rom-1:8px;--rom-2:16px;--rom-3:24px;--rom-4:40px;--rom-5:64px;--rom-6:120px;
  --kant:clamp(20px,4.4vw,64px);
  --tekstbredde:30rem;
  --ease:cubic-bezier(.22,1,.36,1);

  --z-dekor:1;--z-sticky:100;--z-dokk:200;--z-overlay:300;--z-panel:400;--z-varsel:500;
}
html[data-palette="2"]{--c-papir:#F2F1EA;--c-papir-2:#E3E5DC;--c-linje:#C9CEC2;--c-aksent:#355B5C;--c-fokus:#355B5C;--c-dempet:#4F5552}
html[data-palette="3"]{--c-papir:#F8F2E2;--c-papir-2:#EFE3C4;--c-linje:#DCCB9E;--c-aksent:#6E5200;--c-fokus:#6E5200;--c-dempet:#5C5240}
html[data-font="2"]{--f-sans:'Switzer',system-ui,sans-serif;--f-serif:'Gambetta',Georgia,serif;--serif-vekt:400}
html[data-font="3"]{--f-sans:'Familjen Grotesk',system-ui,sans-serif;--f-serif:'Sentient',Georgia,serif;--serif-vekt:400}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-papir);color:var(--c-blekk);font:400 var(--fs-brod)/var(--lh-brod) var(--f-brod);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--c-fokus);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:var(--kant);top:-60px;background:var(--c-blekk);color:var(--c-papir);padding:12px 16px;z-index:var(--z-varsel)}
.skip:focus{top:12px}

/* Typografi */
.display{font-family:var(--f-sans);font-weight:400;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--spor-display)}
.s-serif{font-family:var(--f-serif);font-style:italic;font-weight:var(--serif-vekt);letter-spacing:-0.02em}
.h2{font-family:var(--f-sans);font-weight:400;font-size:var(--fs-h2);line-height:1;letter-spacing:var(--spor-display)}
.linje{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.linje>span{display:inline-block}

.knapp{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--rom-3);background:var(--c-aksent);color:var(--c-aksent-tekst);text-decoration:none;font-weight:500;transition:background-color .2s var(--ease)}
.knapp:hover{background:var(--c-blekk)}
.knapp--lys{background:var(--c-papir);color:var(--c-blekk)}
.knapp--lys:hover{background:var(--c-aksent);color:var(--c-aksent-tekst)}

/* Topp */
.topp{position:absolute;inset:0 0 auto;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--rom-4);padding:var(--rom-3) var(--kant);color:var(--c-papir)}
html[data-hero="2"] .topp{color:var(--c-blekk)}
.merke{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;letter-spacing:-0.01em;min-height:44px}
.merke__ikon{width:44px;height:auto}
.merke__navn{font-size:1.0625rem;white-space:nowrap}
.merke__liv{font-weight:600;letter-spacing:.02em}
.topp__nav{display:flex;gap:var(--rom-3);margin-left:auto}
.topp__nav a,.topp__ring{position:relative;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.topp__nav a::after,.topp__ring::after{content:'';position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.topp__ring{font-weight:500}

/* Hero, felles */
.hero{position:relative;min-height:100svh;display:flex}
.hero[hidden]{display:none}
.hero__innhold{position:relative;z-index:var(--z-dekor);width:100%;padding:0 var(--kant) var(--rom-5)}
.hero__ingress{font-size:var(--fs-ingress);line-height:1.4;max-width:26ch}

/* Hero 1: foto */
.hero--foto{align-items:flex-end;color:var(--c-papir);background:var(--c-blekk);overflow:hidden}
.hero__bilde{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero__slor{position:absolute;inset:0;background:linear-gradient(to right,rgba(28,20,16,.5) 0%,rgba(28,20,16,0) 65%),linear-gradient(to top,rgba(28,20,16,.85) 0%,rgba(28,20,16,.5) 50%,rgba(28,20,16,.3) 100%)}
.hero--foto .hero__innhold{padding-bottom:230px;display:grid;grid-template-columns:1.25fr 1fr;align-items:end;gap:var(--rom-5)}
.hero--foto .hero__under{display:grid;gap:var(--rom-3);justify-items:start;padding-bottom:.6em}

/* Hero 2: typografisk */
.hero--typo{align-items:center;padding-top:96px}
.hero--typo .hero__innhold{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--rom-5);align-items:end;padding-bottom:230px}
.hero--typo .hero__tittel{font-size:calc(var(--fs-display) * 1.12)}
.hero--typo .s-serif{color:var(--c-aksent)}
.hero__side{display:grid;gap:var(--rom-3);justify-items:start;border-top:1px solid var(--c-linje);padding-top:var(--rom-3)}
.hero__fakta{color:var(--c-dempet);font-size:var(--fs-liten)}

/* Tjenester */
.tjenester{padding:var(--rom-6) var(--kant)}
.tjenester__hode{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--rom-5);align-items:end;margin-bottom:var(--rom-5)}
.tjenester__intro{max-width:var(--tekstbredde);color:var(--c-dempet)}
.tjenester__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--rom-5);align-items:start}
.tjenester__bilde{position:sticky;top:var(--rom-4);aspect-ratio:4/5;overflow:hidden;background:var(--c-papir-2)}
.tjenester__bilde img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.tj{border-top:1px solid var(--c-linje);padding:var(--rom-4) 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--rom-2) var(--rom-4)}
.tj:last-child{border-bottom:1px solid var(--c-linje)}
.tj__knapp{all:unset;display:grid;gap:6px;align-content:start;cursor:default}
.tj__ikon{width:40px;height:40px;fill:none;stroke:var(--c-aksent);stroke-width:1.6;margin-bottom:var(--rom-1)}
.tj__navn{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.25rem);line-height:1.05;letter-spacing:-0.02em;hyphens:manual}
.tj__ord{font-size:var(--fs-liten);color:var(--c-dempet)}
.tj__tekst{max-width:var(--tekstbredde);padding-top:56px}

/* Om */
.om{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--rom-5);padding:var(--rom-6) var(--kant);background:var(--c-papir-2);align-items:center}
.om__bilde{max-width:440px;justify-self:center;width:100%}
.om__bilde img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.om__tekst{display:grid;gap:var(--rom-3);max-width:36rem}
.om__sert{display:grid;gap:4px;font-family:var(--f-serif);font-style:italic;font-weight:var(--serif-vekt);font-size:var(--fs-ingress);line-height:1.25;color:var(--c-aksent)}

/* Kontakt: aksenten dekker flaten */
.kontakt{--c-linje:rgba(251,246,238,.28);--c-dempet:rgba(251,246,238,.82);--c-fokus:var(--c-aksent-tekst);display:grid;grid-template-columns:1.25fr 1fr;background:var(--c-aksent);color:var(--c-aksent-tekst)}
.kontakt__innhold{padding:var(--rom-6) var(--kant);display:grid;gap:var(--rom-3);align-content:center}
.kontakt__tittel{font-size:calc(var(--fs-display) * .85)}
.kontakt__ingress{font-size:var(--fs-ingress);line-height:1.4;max-width:24ch}
.kontakt__tlf{font-size:clamp(2rem,1.4rem + 2.4vw,3.5rem);letter-spacing:-0.02em;text-decoration:none;min-height:48px;justify-self:start;border-bottom:1px solid var(--c-linje);transition:border-color .2s var(--ease)}
.kontakt__fakta{display:grid;gap:var(--rom-2);margin-top:var(--rom-2)}
.kontakt__fakta div{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--rom-2);border-top:1px solid var(--c-linje);padding-top:var(--rom-2)}
.kontakt__fakta dt{color:var(--c-dempet);font-size:var(--fs-liten);padding-top:3px}
.kontakt__fakta a{display:inline-flex;min-height:44px;align-items:flex-start}
.kontakt__bilde{min-height:100%;overflow:hidden}
.kontakt__bilde img{width:100%;height:100%;object-fit:cover}

/* Bunn */
.bunn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--rom-2);padding:var(--rom-4) var(--kant) calc(var(--rom-4) + 56px);font-size:var(--fs-liten);color:var(--c-dempet)}
.footer__credit a{display:inline-flex;min-height:44px;align-items:center}

/* Ringeknapp på mobil */
.dokk{display:none}

/* Design Lab */
.lab{position:fixed;left:16px;bottom:16px;z-index:var(--z-panel);font:500 13px/1 var(--f-sans);color:var(--c-blekk)}
.lab__aapne{display:none}
.lab__panel{display:grid;gap:8px;padding:12px 14px;background:rgba(246,240,230,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(42,34,34,.12)}
.lab__rad{display:flex;align-items:center;gap:6px}
.lab__rad span{width:22px}
.lab__rad button{width:30px;height:30px;border:1px solid rgba(42,34,34,.25);background:transparent;color:inherit;font:inherit;cursor:pointer}
.lab__rad button[aria-pressed="true"]{background:var(--c-blekk);color:var(--c-papir);border-color:var(--c-blekk)}
.lab__sign{font-size:10px;letter-spacing:.02em;opacity:.7;margin-top:2px}

@media (hover:hover) and (pointer:fine){
  .topp__nav a:hover::after,.topp__ring:hover::after{transform:scaleX(1)}
  .knapp:hover{background:var(--c-blekk)}
  .knapp--lys:hover{background:var(--c-aksent);color:var(--c-aksent-tekst)}
  .kontakt__tlf:hover{border-color:currentColor}
}

/* Animasjon: skjul-tilstand kun under .anim (satt av inline-skript) */
.anim .hero:not([hidden]) .linje>span{transform:translateY(110%)}
.anim .hero:not([hidden]) .hero__under,.anim .hero:not([hidden]) .hero__side{opacity:0}
.anim .reveal{opacity:0;transform:translateY(24px)}

/* Mobil: ruter i stedet for å ramse opp */
@media (max-width:900px){
  .topp__nav{display:none}
  .topp__ring{display:none}
  .hero--foto .hero__innhold,.hero--typo .hero__innhold,.tjenester__hode,.tjenester__grid,.om,.kontakt{grid-template-columns:1fr}
  .hero{min-height:88svh}
  .hero--foto .hero__innhold{gap:var(--rom-3);padding-bottom:var(--rom-4)}
  .hero--typo{padding-top:88px}
  .hero--typo .hero__innhold{gap:var(--rom-4);padding-bottom:var(--rom-4)}
  .tjenester,.om{padding:var(--rom-5) var(--kant)}
  .tjenester__hode{gap:var(--rom-2);margin-bottom:var(--rom-3)}
  .tjenester__bilde{display:none}
  .tjenester__liste{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--c-linje);border:1px solid var(--c-linje)}
  .tj,.tj:last-child{display:block;padding:0;border:0;background:var(--c-papir)}
  .tj__knapp{cursor:pointer;padding:var(--rom-2);min-height:44px;width:100%;box-sizing:border-box}
  .tj__navn{font-size:1.15rem}
  .tj__ikon{width:32px;height:32px}
  .tj__tekst{display:none;padding:0 var(--rom-2) var(--rom-2);font-size:.95rem}
  .tj.aapen{grid-column:1/-1}
  .tj.aapen .tj__tekst{display:block}
  .om{gap:var(--rom-3)}
  .om__bilde{max-width:160px;justify-self:start}
  .om__brod--ekstra{display:none}
  .kontakt__innhold{padding:var(--rom-5) var(--kant)}
  .kontakt__bilde{display:none}
  .bunn{flex-direction:column;padding-bottom:96px}
  .dokk{display:grid;place-items:center;position:fixed;right:16px;bottom:16px;z-index:var(--z-dokk);width:56px;height:56px;border-radius:50%;background:var(--c-aksent);color:var(--c-aksent-tekst)}
  .dokk svg{width:24px;height:24px}
  .lab__aapne{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid rgba(42,34,34,.2);background:rgba(246,240,230,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:inherit;font:inherit;cursor:pointer}
  .lab__panel{display:none;margin-bottom:8px}
  .lab.aapen .lab__panel{display:grid}
  .lab{display:flex;flex-direction:column-reverse;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .topp__nav a::after,.topp__ring::after{transition:none}
}
