:root {
  --ivory: oklch(0.965 0.01 85);
  --stone: oklch(0.93 0.012 80);
  --slate: oklch(0.24 0.025 260);
  --slate-2: oklch(0.31 0.028 260);
  --ink: oklch(0.22 0.02 260);
  --muted: oklch(0.47 0.02 260);
  --brass: oklch(0.73 0.1 80);
  --brass-deep: oklch(0.58 0.1 75);
  --rule: oklch(0.22 0.02 260 / 0.14);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: min(1200px, 100% - 2 * clamp(16px, 4vw, 56px));
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { background: var(--ivory); color: var(--ink); font: 400 clamp(15.5px, 0.4vw + 14px, 17px)/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: var(--wrap); margin-inline: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.04; }
h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); text-wrap: balance; }
h1 em, h2 em, blockquote em { font-style: italic; color: var(--brass-deep); }
.over { font: 500 0.74rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.3rem; display: flex; align-items: center; gap: 0.8rem; }
.over::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.head > p:not(.over) { color: var(--muted); max-width: 48ch; margin-top: 1.3rem; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* word reveal */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--wi) * 45ms); }
.in .w > span, [data-split].in .w > span { transform: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; padding: 1.05em 1.7em; font: 500 0.95rem/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.btn-brass { background: var(--brass); color: var(--slate); }
.btn-brass:hover { background: oklch(0.8 0.1 82); }
.btn-line { border-color: oklch(0.96 0.01 85 / 0.5); color: var(--ivory); }
.btn-line:hover { background: var(--ivory); color: var(--slate); }
.btn-wide { width: 100%; }

/* progress + nav */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 80; }
.progress span { display: block; height: 100%; background: var(--brass); transform-origin: 0 50%; transform: scaleX(0); }
.nav { position: fixed; inset: 0 0 auto; z-index: 70; display: flex; align-items: center; gap: 2.4rem; padding: 1.2rem clamp(16px, 4vw, 56px); color: var(--ivory); transition: background 0.4s, color 0.4s, padding 0.4s; }
.nav.solid { background: var(--ivory); color: var(--ink); padding-block: 0.8rem; box-shadow: 0 1px 0 var(--rule); }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; font: 400 1.35rem/1 var(--serif); }
.brand i { color: var(--brass); }
.brand svg { width: 26px; fill: none; stroke: var(--brass); stroke-width: 1.8; }
.nav-links { display: flex; gap: 2rem; margin-left: auto; font-size: 0.9rem; }
.nav-links a { text-decoration: none; opacity: 0.8; }
.nav-links a:hover { opacity: 1; }
.nav-cta { font-size: 0.88rem; text-decoration: none; padding: 0.75em 1.2em; border: 1px solid currentColor; }
.nav.solid .nav-cta { background: var(--slate); color: var(--ivory); border-color: var(--slate); }

/* hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; background: var(--slate); color: var(--ivory); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: slow 18s linear both; }
@keyframes slow { from { transform: scale(1.08); } }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.2 0.025 260 / 0.92) 0%, oklch(0.2 0.025 260 / 0.55) 45%, oklch(0.2 0.025 260 / 0.05) 75%), linear-gradient(0deg, oklch(0.2 0.025 260 / 0.85), transparent 35%); }
.scanline { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; z-index: 2; background: var(--brass); box-shadow: 0 0 24px 4px oklch(0.73 0.1 80 / 0.45); animation: scan 3.4s 0.6s var(--ease) both; }
@keyframes scan { from { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(100vw); opacity: 0; } }
.marks { list-style: none; padding: 0; position: absolute; inset: 0; z-index: 3; }
.marks li { position: absolute; left: calc(var(--x) + 30%); top: var(--y); display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; font-size: 0.78rem; opacity: 0; transform: translateY(8px); animation: mark 0.8s var(--t) var(--ease) forwards; }
.marks li::before { content: ""; grid-row: span 2; width: 11px; height: 11px; margin-top: 0.25rem; border: 1.5px solid var(--brass); border-radius: 50%; box-shadow: 0 0 0 5px oklch(0.73 0.1 80 / 0.18); }
.marks b { font-weight: 600; letter-spacing: 0.02em; }
.marks span { color: oklch(0.9 0.02 85 / 0.8); }
.marks li { background: oklch(0.2 0.025 260 / 0.62); padding: 0.55rem 0.8rem; border-left: 1px solid var(--brass); }
@keyframes mark { to { opacity: 1; transform: none; } }
.hero-copy { position: relative; z-index: 4; align-self: end; width: var(--wrap); margin: 0 auto; padding-top: 8rem; }
h1 { font-size: clamp(3rem, 7vw, 6.6rem); font-weight: 300; line-height: 0.98; max-width: 11ch; }
h1 em { color: var(--brass); }
.hero .lede { max-width: 44ch; margin: 1.6rem 0 2.2rem; color: oklch(0.9 0.015 85 / 0.85); font-size: 1.08em; animation: fade 1s 0.7s var(--ease) both; }
.hero .over { color: var(--brass); animation: fade 1s 0.2s var(--ease) both; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; animation: fade 1s 0.9s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } }
.facts { position: relative; z-index: 4; width: var(--wrap); margin: 3.5rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid oklch(0.96 0.01 85 / 0.18); }
.facts div { padding: 1.3rem 1.2rem 1.6rem 0; opacity: 0; transition: opacity 1s var(--ease); }
.facts div.in { opacity: 1; }
.facts div + div { padding-left: 1.2rem; border-left: 1px solid oklch(0.96 0.01 85 / 0.18); }
.facts dt { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.85 0.02 85 / 0.65); }
.facts dd { font: 300 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--serif); margin-top: 0.4rem; font-variant-numeric: tabular-nums; }

/* plans */
.plans { padding: clamp(5rem, 10vw, 9rem) 0; }
.plans-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.builder { background: var(--stone); padding: clamp(1.5rem, 3vw, 2.6rem); border: 1px solid var(--rule); }
fieldset { border: 0; padding: 0; margin-bottom: 1.6rem; }
legend { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--rule); background: var(--ivory); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 0.85rem 0.5rem; font-size: 0.88rem; transition: background 0.3s, color 0.3s; }
.seg label + label span { border-left: 1px solid var(--rule); }
.seg input:checked + span { background: var(--slate); color: var(--ivory); }
.seg input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: -2px; }
.quote { border-top: 1px solid var(--ink); margin-top: 2rem; padding-top: 1.6rem; }
.price { display: flex; align-items: baseline; font-family: var(--serif); font-weight: 300; }
.price .cur { font-size: 2rem; align-self: flex-start; margin-top: 0.8rem; }
.price [data-price] { font-size: clamp(4.5rem, 9vw, 7rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.price .per { font-size: 1.1rem; color: var(--muted); margin-left: 0.6rem; font-style: italic; }
.quote-sub { font-size: 0.86rem; color: var(--muted); margin: 0.6rem 0 1.4rem; }
.incl { list-style: none; padding: 0; margin-bottom: 1.8rem; display: grid; gap: 0.55rem; }
.incl li { padding-left: 1.6rem; position: relative; font-size: 0.95rem; animation: fade 0.5s var(--ease) both; }
.incl li:nth-child(2) { animation-delay: 60ms; } .incl li:nth-child(3) { animation-delay: 120ms; } .incl li:nth-child(4) { animation-delay: 180ms; }
.incl li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.9rem; height: 1px; background: var(--brass-deep); }

/* year */
.year { background: var(--slate); color: var(--ivory); padding: clamp(5rem, 10vw, 8rem) 0; }
.year .over, .year .head > p { color: oklch(0.8 0.02 85 / 0.7); }
.year h2 em { color: var(--brass); }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.head-row h2 { max-width: 20ch; }
.seasons { display: flex; border: 1px solid oklch(0.96 0.01 85 / 0.2); }
.seasons button { font: 500 0.85rem/1 var(--sans); color: inherit; background: none; border: 0; padding: 0.8rem 1rem; cursor: pointer; }
.seasons button + button { border-left: 1px solid oklch(0.96 0.01 85 / 0.2); }
.seasons [aria-selected=true] { background: var(--brass); color: var(--slate); }
.gantt { --label: clamp(150px, 20vw, 250px); position: relative; }
.months, .row { display: grid; grid-template-columns: var(--label) repeat(12, 1fr); }
.months span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.8 0.02 85 / 0.55); padding-bottom: 0.8rem; }
.row { border-top: 1px solid oklch(0.96 0.01 85 / 0.1); align-items: center; min-height: 48px; }
.task { font-size: 0.9rem; padding-right: 1rem; }
.track { grid-column: 2 / -1; position: relative; height: 100%; min-height: 48px; background-image: repeating-linear-gradient(90deg, oklch(0.96 0.01 85 / 0.06) 0 1px, transparent 1px calc(100% / 12)); }
.seg-bar { position: absolute; top: 50%; height: 12px; margin-top: -6px; left: calc(var(--s) / 12 * 100%); width: calc(var(--l) / 12 * 100% - 4px); background: var(--brass); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease), opacity 0.4s; transition-delay: calc(var(--r) * 70ms + var(--s) * 20ms); }
.gantt.in .seg-bar { transform: none; }
.seg-bar.dim { opacity: 0.14; transition-delay: 0s; }
.today { position: absolute; top: 0; bottom: 0; left: calc(var(--label) + (100% - var(--label)) * var(--today) / 12); width: 1px; background: var(--ivory); opacity: 0.6; }
.today b { position: absolute; bottom: 100%; transform: translate(-50%, -1.6rem); font: 500 0.7rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); white-space: nowrap; }

/* services */
.services { padding: clamp(5rem, 10vw, 9rem) 0; }
.svc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.sticky { position: sticky; top: 110px; }
.svc-peek { margin-top: 2.4rem; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.svc-peek img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s var(--ease), transform 0.9s var(--ease); }
.svc-peek.swap img { opacity: 0; transform: scale(1.04); }
.svc { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.svc li { display: grid; grid-template-columns: 3.2rem 1fr; padding: 2rem 0; border-bottom: 1px solid var(--rule); cursor: default; outline: none; opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.svc li.in { opacity: 1; transform: none; }
.svc li > span { font: italic 300 1.1rem/1.6 var(--serif); color: var(--muted); grid-row: span 2; }
.svc h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); transition: color 0.3s, transform 0.5s var(--ease); }
.svc p { color: var(--muted); margin-top: 0.4rem; max-width: 46ch; }
.svc li.act h3 { color: var(--brass-deep); transform: translateX(8px); }

/* record */
.record { background: var(--stone); padding: clamp(5rem, 10vw, 8rem) 0; border-block: 1px solid var(--rule); }
.record-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.doc { background: var(--ivory); border: 1px solid var(--rule); box-shadow: 0 40px 80px -40px oklch(0.24 0.025 260 / 0.35); transform: translateY(30px) rotate(1deg); opacity: 0; transition: transform 1.2s var(--ease), opacity 1s var(--ease); }
.doc.in { transform: none; opacity: 1; }
.doc-head, .doc-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.6rem; font-size: 0.8rem; color: var(--muted); }
.doc-head { border-bottom: 1px solid var(--rule); align-items: end; }
.doc-head b { display: block; font: 400 1.6rem/1.1 var(--serif); color: var(--ink); }
.doc-tech b { color: var(--ink); font-weight: 600; }
.doc-foot { border-top: 1px solid var(--ink); }
.doc-list { list-style: none; padding: 0.4rem 1.6rem; }
.doc-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 0.9rem; align-items: start; padding: 0.95rem 0; border-bottom: 1px dashed var(--rule); }
.doc-list li:last-child { border-bottom: 0; }
.doc-list i { width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--ink); position: relative; transition: background 0.3s; }
.doc-list i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--ivory); border-width: 0 2px 2px 0; rotate: 45deg; scale: 0; transition: scale 0.4s var(--ease); }
.doc.in li i { background: var(--slate); transition-delay: calc(0.6s + var(--n) * 0.35s); }
.doc.in li i::after { scale: 1; transition-delay: calc(0.7s + var(--n) * 0.35s); }
.doc-list li:nth-child(1) { --n: 0; } .doc-list li:nth-child(2) { --n: 1; } .doc-list li:nth-child(3) { --n: 2; } .doc-list li:nth-child(4) { --n: 3; } .doc-list li:nth-child(5) { --n: 4; }
.doc-list li.flag i { border-color: var(--brass-deep); }
.doc.in li.flag i { background: var(--brass); }
.doc.in li.flag i::after { border: 0; width: 2px; height: 8px; left: 7px; top: 3px; background: var(--slate); rotate: 0deg; }
.doc-list b { font-weight: 600; font-size: 0.95rem; }
.doc-list span { display: block; font-size: 0.82rem; color: var(--muted); }
.doc-list em { font: italic 400 0.95rem/1.4 var(--serif); color: var(--muted); }
.doc-list .flag b { color: var(--brass-deep); }

/* testimony */
.testimony { padding: clamp(5rem, 10vw, 9rem) 0; }
blockquote p { font: 300 clamp(1.7rem, 3.4vw, 3rem)/1.2 var(--serif); letter-spacing: -0.01em; max-width: 28ch; }
blockquote cite { display: block; margin-top: 2rem; font-style: normal; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--muted); }

/* faq */
.faq { padding: 0 0 clamp(5rem, 10vw, 8rem); }
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 6rem); border-top: 1px solid var(--ink); padding-top: 3rem; }
details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; font: 400 1.35rem/1.3 var(--serif); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: 0.5rem; border-right: 1.5px solid; border-bottom: 1.5px solid; rotate: 45deg; transition: rotate 0.4s var(--ease); }
details[open] summary::after { rotate: 225deg; }
details p { color: var(--muted); padding-bottom: 1.4rem; max-width: 60ch; }

/* book */
.book { background: var(--slate); color: var(--ivory); padding: clamp(5rem, 10vw, 8rem) 0; }
.book .over { color: var(--brass); }
.book h2 em { color: var(--brass); }
.book .head > p { color: oklch(0.85 0.02 85 / 0.75); }
.book-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); }
.form { display: grid; gap: 1rem; }
.form-lab, .form label { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.85 0.02 85 / 0.6); }
.form > label { display: grid; gap: 0.45rem; }
.form input:not([type=radio]) { font: 400 1rem/1.4 var(--sans); color: var(--ivory); background: transparent; border: 0; border-bottom: 1px solid oklch(0.96 0.01 85 / 0.3); padding: 0.6rem 0; letter-spacing: 0; text-transform: none; }
.form input:not([type=radio]):focus { outline: none; border-color: var(--brass); }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.days label, .half label { position: relative; cursor: pointer; }
.days input { position: absolute; opacity: 0; }
.days span { display: grid; place-items: center; padding: 0.6rem 0; border: 1px solid oklch(0.96 0.01 85 / 0.2); font: 300 1.5rem/1.1 var(--serif); color: var(--ivory); letter-spacing: 0; text-transform: none; transition: background 0.3s, border-color 0.3s; }
.days small { font: 500 0.64rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.days input:checked + span { background: var(--brass); color: var(--slate); border-color: var(--brass); }
.days input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.half { background: transparent; border-color: oklch(0.96 0.01 85 / 0.2); }
.half span { color: var(--ivory); text-transform: none; letter-spacing: 0; }
.half label + label span { border-color: oklch(0.96 0.01 85 / 0.2); }
.half input:checked + span { background: var(--ivory); color: var(--slate); }
.ok { font: italic 400 1.2rem/1.4 var(--serif); color: var(--brass); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; padding: 1.6rem 0; font-size: 0.8rem; color: var(--muted); }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .plans-grid, .svc-grid, .record-grid, .faq-grid, .book-grid { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .svc-peek { display: none; }
  .marks li { left: calc(var(--x) + 8%); }
  .hero-media::after { background: linear-gradient(0deg, oklch(0.2 0.025 260 / 0.95) 20%, oklch(0.2 0.025 260 / 0.35) 70%, oklch(0.2 0.025 260 / 0.1)); }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid oklch(0.96 0.01 85 / 0.18); }
}
@media (max-width: 640px) {
  .brand span { font-size: 1.1rem; }
  .nav-cta { font-size: 0.78rem; padding: 0.6em 0.8em; }
  .hero { display: block; min-height: 0; }
  .hero-media { position: relative; height: 58svh; }
  .hero-media::after { background: linear-gradient(0deg, var(--slate) 2%, transparent 40%), linear-gradient(180deg, oklch(0.2 0.025 260 / 0.7), transparent 30%); }
  .hero-copy { padding-top: 0.5rem; margin-top: -2.5rem; }
  .marks li:nth-child(n+3) { display: none; }
  .marks li { font-size: 0.72rem; }
  .marks li:nth-child(1) { top: 24%; left: 34%; } .marks li:nth-child(2) { top: 46%; left: 6%; }
  .gantt { --label: 0px; }
  .months, .row { grid-template-columns: repeat(12, 1fr); }
  .months span:first-child { display: none; }
  .months span { font-size: 0.6rem; letter-spacing: 0.04em; }
  .task { grid-column: 1 / -1; padding-top: 0.7rem; font-size: 0.82rem; }
  .track { grid-column: 1 / -1; min-height: 30px; }
  .today { display: none; }
  .seasons { width: 100%; }
  .seasons button { flex: 1; padding: 0.8rem 0.3rem; font-size: 0.78rem; }
  .days { grid-template-columns: repeat(5, 1fr); }
  .doc-head, .doc-foot, .doc-list { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .w > span, .svc li, .doc, .facts div, .marks li { transform: none; opacity: 1; }
  .seg-bar { transform: none; }
  .scanline { display: none; }
}