/* Bryggen Tannklinikk. Materialverden: porselen, bein, petrol, kobber. */
:root{
  --bg:#F8F5EF; --bg-2:#EFE8DC; --bg-3:#E4DBCB;
  --fg:#1B2321; --fg-2:#46524F; --fg-3:#6B7674;
  --petrol:#0F4A48; --petrol-2:#0B3937; --petrol-soft:#D9E6E3; --petrol-ink:#0C3E3C;
  --kobber:#B5744B; --kobber-soft:#F1E2D6;
  --line:#D6CCBC; --line-2:#C4B8A5;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --r:8px; --r-2:14px;
  --sh-1:0 1px 2px rgba(27,35,33,.06), 0 8px 24px -12px rgba(27,35,33,.18);
  --sh-2:0 2px 4px rgba(27,35,33,.06), 0 24px 48px -20px rgba(15,74,72,.35);
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:74rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;font-feature-settings:"ss01";accent-color:var(--petrol);caret-color:var(--petrol)}
::selection{background:var(--petrol);color:#fff}
html{scrollbar-color:var(--petrol) var(--bg-2)}
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bg-2)}::-webkit-scrollbar-thumb{background:var(--petrol);border-radius:8px;border:3px solid var(--bg-2)}
:focus-visible{outline:2px solid var(--kobber);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
a{color:var(--petrol-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0;text-wrap:balance;font-variation-settings:"opsz" 72}
h1{font-size:clamp(2.6rem,5.6vw,4.9rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.55rem);font-variation-settings:"opsz" 36}
p{margin:0}
.lede{font-size:1.2rem;color:var(--fg-2);max-width:38rem;text-wrap:pretty}
.stor{font-size:clamp(1.3rem,2vw,1.6rem);font-family:var(--serif);font-weight:400;line-height:1.35;text-wrap:pretty}
.num,.pris,.mono{font-variant-numeric:tabular-nums}
.wrap{width:min(var(--wrap),calc(100% - 2.5rem));margin-inline:auto}
.sek{padding-block:clamp(4rem,9vw,7.5rem)}
.sek--tett{padding-block:clamp(3rem,6vw,5rem)}
.sek--bein{background:var(--bg-2)}
.sek--petrol{background:var(--petrol);color:#fff}
.sek--petrol .lede{color:#CFE0DC}
.sek--petrol a{color:#fff}
.tekst{max-width:64ch;text-wrap:pretty}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.stack{display:grid;gap:1.1rem}
.stack--l{gap:1.8rem}
.rad{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knapper */
.knapp{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.75rem 1.4rem;border-radius:999px;background:var(--petrol);color:#fff;text-decoration:none;font-weight:500;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:600;transition:background .2s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.knapp:hover{background:var(--petrol-2);box-shadow:var(--sh-2)}
.knapp:active{transform:translateY(1px)}
.knapp--lys{background:transparent;color:var(--petrol-ink);border-color:var(--line-2)}
.knapp--lys:hover{background:var(--petrol-soft);box-shadow:none}
.sek--petrol .knapp{background:#fff;color:var(--petrol-ink)}
.sek--petrol .knapp:hover{background:var(--bg-2)}
.sek--petrol .knapp--lys{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.sek--petrol .knapp--lys:hover{background:rgba(255,255,255,.1)}
.knapp svg{width:1.05em;height:1.05em}
.lenke{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;text-decoration:none;color:var(--petrol-ink)}
.lenke svg{width:1em;height:1em;transition:transform .3s var(--ease)}
.lenke:hover svg{transform:translateX(3px)}
.lenke:hover{text-decoration:underline}

/* Topp */
.topp{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topp__i{display:flex;align-items:center;justify-content:space-between;min-height:4.25rem;gap:1rem}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--fg);font-family:var(--serif);font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.logo svg{width:2rem;height:2rem;flex:none}
.logo small{display:block;font-family:var(--sans);font-size:.72rem;color:var(--fg-3);letter-spacing:.02em;font-weight:500;margin-top:-.15rem}
.meny{display:flex;gap:.25rem;align-items:center;list-style:none;margin:0;padding:0}
.meny a{display:inline-block;padding:.55rem .85rem;border-radius:999px;text-decoration:none;color:var(--fg-2);font-weight:500;font-size:.98rem;transition:background .2s,color .2s}
.meny a:hover{background:var(--bg-2);color:var(--fg)}
.meny a[aria-current=page]{color:var(--petrol-ink);background:var(--petrol-soft)}
.meny .knapp{min-height:2.6rem;padding:.5rem 1.1rem;margin-left:.6rem;color:#fff}
.meny .knapp:hover{color:#fff;background:var(--petrol-2)}
.burger{display:none;width:2.75rem;height:2.75rem;border:1px solid var(--line-2);background:transparent;border-radius:999px;cursor:pointer;place-items:center;color:var(--fg)}
.burger svg{width:1.3rem;height:1.3rem}
.topp__tlf{display:flex;align-items:center;gap:.5rem;color:var(--fg-2);text-decoration:none;font-weight:500;font-variant-numeric:tabular-nums}
.topp__tlf svg{width:1rem;height:1rem;color:var(--kobber)}
@media(max-width:900px){
  .meny{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:.75rem 1.25rem 1.25rem;gap:.15rem;box-shadow:var(--sh-2)}
  .meny.open{display:flex}
  .meny a{padding:.85rem .9rem;font-size:1.1rem}
  .meny .knapp{margin:.6rem 0 0;justify-content:center}
  .burger{display:grid}
  .topp__tlf{display:none}
}

/* Hero med Journalen */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem);overflow:hidden}
.hero__i{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero h1 em{font-style:italic;color:var(--petrol-ink);font-variation-settings:"opsz" 72}
.hero__fakta{display:flex;gap:1.75rem;flex-wrap:wrap;color:var(--fg-2);font-size:.95rem;border-top:1px solid var(--line);padding-top:1.2rem}
.hero__fakta b{display:block;color:var(--fg);font-weight:600}

.journal{background:#fff;border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--sh-2);padding:1.4rem 1.4rem 1.2rem;position:relative}
.journal__topp{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.journal__topp h2{font-size:1.15rem;font-variation-settings:"opsz" 24}
.journal__hint{font-size:.85rem;color:var(--fg-3);display:block;margin:-.3rem 0 .4rem}
.journal > svg{width:100%;height:auto;display:block}
.tann{fill:#F3EEE4;stroke:#C9BEAB;stroke-width:1.1;cursor:pointer;transition:fill .25s,stroke .25s,transform .35s var(--ease);transform-box:fill-box;transform-origin:center}
.tann:hover{fill:var(--petrol-soft);stroke:var(--petrol)}
.tann[aria-pressed=true]{fill:var(--petrol);stroke:var(--petrol-2);transform:scale(1.08)}
.tann:focus-visible{outline:none;stroke:var(--kobber);stroke-width:2.5}
.tann--pulse{animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{fill:#F3EEE4}50%{fill:var(--petrol-soft)}}
.journal__kjeve{font-family:var(--sans);font-size:11px;fill:var(--fg-3);letter-spacing:.06em;text-transform:uppercase}
.journal__ut{margin-top:.9rem;border-top:1px dashed var(--line-2);padding-top:.9rem;display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:start;min-height:6.2rem}
.journal__ut h3{font-size:1.15rem;grid-column:1}
.journal__ut p{grid-column:1;color:var(--fg-2);font-size:.95rem}
.journal__pris{grid-column:2;grid-row:1/span 2;text-align:right;font-family:var(--serif);font-size:1.55rem;color:var(--petrol-ink);font-variant-numeric:tabular-nums;line-height:1.1;font-variation-settings:"opsz" 48}
.journal__pris small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--fg-3);margin-top:.15rem}
.journal__ut .lenke{grid-column:1/-1;font-size:.95rem;justify-self:start;margin-top:.2rem}
.journal__nr{font-size:.82rem;color:var(--petrol-ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:900px){.hero__i{grid-template-columns:1fr}.journal{padding:1.1rem}}

/* Bilder */
.bilde{border-radius:var(--r-2);overflow:hidden;background:var(--bg-3)}
.bilde img{width:100%;height:100%;object-fit:cover}
.bilde--h{aspect-ratio:4/5}
.bilde--b{aspect-ratio:16/9}
.bilde--k{aspect-ratio:3/2}
.figur{display:grid;gap:.6rem}
.figur figcaption{font-size:.88rem;color:var(--fg-3)}

/* Behandlinger-liste (ikke kort-grid): en definisjonsliste med linjer */
.liste{border-top:1px solid var(--line)}
.liste__rad{display:grid;grid-template-columns:1.2fr 2fr auto;gap:1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.liste__rad h3{font-size:1.3rem}
.liste__rad p{color:var(--fg-2)}
.liste__pris{font-family:var(--serif);font-size:1.35rem;color:var(--petrol-ink);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.liste__pris small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--fg-3);font-weight:500}
.liste__rad a{text-decoration:none;color:inherit}
.liste__rad a:hover h3{color:var(--petrol-ink)}
@media(max-width:760px){.liste__rad{grid-template-columns:1fr auto;gap:.4rem 1rem}.liste__rad p{grid-column:1/-1}}

/* Prisliste tabell */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.85rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;font-size:.9rem;color:var(--fg-3);letter-spacing:.01em}
td:last-child,th:last-child{text-align:right;white-space:nowrap}
tbody tr:hover{background:#fff}
tbody th{color:var(--fg);font-weight:500;font-size:1rem}
.tab-wrap{overflow-x:auto}
.helfo{border:1px solid var(--line-2);border-radius:var(--r-2);padding:1.4rem 1.6rem;background:#fff;display:grid;gap:.6rem}
.helfo svg{width:1.6rem;height:1.6rem;color:var(--kobber)}

/* Forløpet (ekte sekvens) */
.forlop{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.25)}
.forlop li{padding:1.6rem 1.4rem 0 0;border-right:1px solid rgba(255,255,255,.18);display:grid;gap:.5rem;align-content:start}
.forlop li:last-child{border-right:0}
.forlop li:not(:first-child){padding-left:1.4rem}
.forlop b{font-family:var(--serif);font-size:2.4rem;font-weight:400;color:#CFE0DC;line-height:1;font-variant-numeric:tabular-nums}
.forlop h3{color:#fff}
.forlop p{color:#CFE0DC;font-size:.98rem}
.forlop small{color:#fff;font-weight:500;font-size:.88rem}
@media(max-width:900px){.forlop{grid-template-columns:1fr 1fr}.forlop li{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding:1.4rem 0!important}}
@media(max-width:520px){.forlop{grid-template-columns:1fr}}

/* Sitat */
.sitat{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;max-width:52rem}
.sitat svg{width:2.4rem;height:2.4rem;color:var(--kobber)}
.sitat blockquote{margin:0}
.sitat cite{display:block;font-style:normal;color:var(--fg-3);font-size:.95rem;margin-top:.9rem}

/* Team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}
.team article{display:grid;gap:.7rem}
.team h3{font-size:1.25rem}
.team p{color:var(--fg-2);font-size:.95rem}
.team .rolle{color:var(--petrol-ink);font-weight:600;font-size:.9rem}
@media(max-width:900px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.team{grid-template-columns:1fr}}

/* Åpningstider */
.tider{display:grid;gap:.35rem;max-width:22rem}
.tider div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:.45rem 0;font-variant-numeric:tabular-nums}
.tider span:last-child{font-weight:500}

/* Skjema */
.skjema{display:grid;gap:1.1rem;max-width:36rem}
.felt{display:grid;gap:.35rem}
.felt label{font-weight:600;font-size:.95rem}
.felt input,.felt select,.felt textarea{font:inherit;padding:.8rem .95rem;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--fg);min-height:3rem;width:100%}
.felt input::placeholder,.felt textarea::placeholder{color:#7A8482}
.felt input:focus,.felt select:focus,.felt textarea:focus{outline:2px solid var(--petrol);outline-offset:0;border-color:var(--petrol)}
.felt [aria-invalid=true]{border-color:#A23B2A;outline-color:#A23B2A}
.felt__feil{color:#A23B2A;font-size:.9rem;display:none}
.felt.feil .felt__feil{display:block}
.felt small{color:var(--fg-3);font-size:.85rem}
.skjema__rad{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.skjema__rad{grid-template-columns:1fr}}
.kvitt{display:none;border:1px solid var(--petrol);background:var(--petrol-soft);border-radius:var(--r-2);padding:1.6rem;gap:.6rem;max-width:36rem}
.kvitt.vis{display:grid}
.kvitt svg{width:2rem;height:2rem;color:var(--petrol)}
.kvitt h3{color:var(--petrol-ink)}
.kvitt dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:.5rem 0 0;font-size:.95rem}
.kvitt dt{color:var(--fg-3)}
.kvitt dd{margin:0;font-weight:500}

/* Skrekk-siden: lav terskel */
.trygg{display:grid;gap:0;border-top:1px solid var(--line)}
.trygg li{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--line);align-items:start}
.trygg svg{width:1.6rem;height:1.6rem;color:var(--kobber);margin-top:.2rem}
.trygg h3{font-size:1.2rem;margin-bottom:.3rem}
.trygg p{color:var(--fg-2)}
.trygg ul{margin:0;padding:0;list-style:none}

/* Akutt-stripe */
.akutt{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:space-between;border:1px solid var(--kobber);background:var(--kobber-soft);border-radius:var(--r-2);padding:1.1rem 1.4rem}
.akutt b{font-weight:600}
.akutt a{white-space:nowrap}

/* Sidehode */
.hode{padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem)}
.hode .lede{margin-top:1rem}

/* Bunn */
.bunn{background:var(--fg);color:#C9CFCD;padding-block:3.5rem 2rem;font-size:.95rem}
.bunn a{color:#fff}
.bunn__i{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.bunn h3{color:#fff;font-size:1rem;font-family:var(--sans);font-weight:600;margin-bottom:.6rem}
.bunn ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.bunn .logo{color:#fff}
.bunn .logo small{color:#9AA5A2}
.bunn__lin{border-top:1px solid #333B39;margin-top:2.5rem;padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#8F9997;font-size:.85rem}
@media(max-width:800px){.bunn__i{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.bunn__i{grid-template-columns:1fr}}

/* Én autorert bevegelse: Journalen «skrives inn» ved last */
@media(prefers-reduced-motion:no-preference){
  .journal{animation:inn .9s var(--ease) both}
  .journal .tann{animation:tann-inn .6s var(--ease) both}
  @keyframes inn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes tann-inn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
}
@media(max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  h1{font-size:clamp(2.3rem,9vw,3.2rem)}
}