/* WowMyDesign - the look for every page (forside + landingssider).
   Colours: cream paper, ink, one gold accent. Fonts: Newsreader + Assistant (as aycasse.no). */
:root {
  --paper:#f5f1e9; --paper-2:#ebe4d7; --white:#fffdf8; --ink:#141311; --ink-2:#3a362f; --muted:#7c756a;
  --line:rgba(20,19,17,.13); --accent:#8a6d3b; --gold:#d9bf8c;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-lg:0px; --r-md:0px; --gut:clamp(16px, 4vw, 48px);
  --ease:cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img { display:block; max-width:100%; }
a { color:inherit; }
::selection { background:var(--ink); color:var(--paper); }
.wrap { max-width:1360px; margin:0 auto; padding:0 var(--gut); }
section[id] { scroll-margin-top:76px; }

/* paper grain baked into the background (static - no fixed blend layer, cheap on phones) */
body { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .07  0 0 0 0 .06  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.draft { background:var(--ink); color:var(--paper); text-align:center; font-size:10.5px; font-weight:450; letter-spacing:.24em; text-transform:uppercase; padding:6px 16px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.02em; text-wrap:balance; }
p { text-wrap:pretty; }
h2 { font-size:clamp(44px, 6.4vw, 100px); line-height:.94; }
h3 { font-size:clamp(25px, 2.1vw, 31px); line-height:1.1; letter-spacing:-.01em; }
h1 em, h2 em, h3 em { font-style:italic; color:var(--accent); }
.label { display:flex; align-items:center; gap:12px; margin:0 0 24px; font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.label::before { content:""; width:24px; height:1px; background:currentColor; }
.sub { max-width:400px; margin:0; color:var(--ink-2); }

/* ---------- buttons ---------- */
.btn { --h:54px; display:inline-flex; align-items:center; justify-content:center; gap:12px; height:var(--h); padding:0 28px; border-radius:0; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font:600 12px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .3s, color .3s, transform .5s var(--ease); }
.btn .arr { display:grid; place-items:center; flex:none; }
.btn .arr svg { width:15px; height:15px; transition:transform .5s var(--ease); }
.btn:hover .arr svg { transform:rotate(-45deg); }
.btn.ghost { background:transparent; color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--paper); }
.btn.sm { --h:42px; padding:0 18px; font-size:11px; gap:10px; }

.btn.block { width:100%; }
.btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- header ---------- */
header.top { position:sticky; top:env(safe-area-inset-top, 0px); z-index:60; transition:transform .55s var(--ease), background .3s, box-shadow .3s; }
header.top.scrolled { background:rgba(245,241,233,.8); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); box-shadow:0 1px 0 var(--line); }
header.top.hide { transform:translateY(-100%); }
.bar { display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; }
.logo { font-family:var(--serif); font-weight:500; font-size:28px; line-height:1; letter-spacing:.01em; text-decoration:none; }
.logo i { color:var(--accent); }
nav.links { display:flex; gap:30px; }
nav.links a { padding:6px 0; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); transition:color .25s; }
nav.links a:hover { color:var(--accent); }

/* ---------- hero ---------- */
.hero { padding-top:clamp(20px, 4vw, 52px); }
.hero-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; }
.meta { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.meta span { display:inline-flex; align-items:center; gap:9px; height:32px; padding:0 14px; border-radius:999px; border:1px solid var(--line); font-size:13px; color:var(--ink-2); background:rgba(255,253,248,.5); }
.meta .live i { width:7px; height:7px; border-radius:50%; background:#5f8a5a; box-shadow:0 0 0 0 rgba(95,138,90,.5); animation:live 2.4s ease-out infinite; }
@keyframes live { 70% { box-shadow:0 0 0 8px rgba(95,138,90,0); } 100% { box-shadow:0 0 0 0 rgba(95,138,90,0); } }
.title { grid-column:1 / -1; position:relative; margin:clamp(22px, 3vw, 40px) 0 clamp(28px, 4vw, 56px); }
.display { font-size:clamp(60px, 11.2vw, 184px); line-height:.86; letter-spacing:-.04em; }
.display .ln { display:block; overflow:hidden; padding:0 .04em .07em 0; margin-bottom:-.07em; }
.display .ln > span { display:block; animation:rise 1.25s var(--ease) both; }
.display .ln:nth-child(2) > span { animation-delay:.09s; }
.display .ln:nth-child(3) > span { animation-delay:.18s; }
.display .ln.ind { padding-left:clamp(0px, 12vw, 220px); }
@keyframes rise { from { transform:translateY(108%); } }
.rot { display:inline-block; transition:opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease); }
.rot.out { opacity:0; transform:translateY(.22em); filter:blur(8px); }

.seal { position:absolute; right:0; top:0; width:clamp(88px, 9vw, 132px); aspect-ratio:1; display:grid; place-items:center; color:var(--ink); text-decoration:none; }
.seal svg { position:absolute; inset:0; width:100%; height:100%; animation:spin 22s linear infinite; }
.seal text { font:500 9.6px var(--sans); letter-spacing:.16em; text-transform:uppercase; fill:currentColor; }
.seal b { font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(26px, 2.6vw, 38px); letter-spacing:-.02em; color:var(--accent); }
@keyframes spin { to { transform:rotate(360deg); } }

.hero-grid { align-items:center; row-gap:28px; }
.hero-text { grid-column:1 / 6; }
.hero-text > * { animation:fadeUp .9s var(--ease) both; }
.hero-text > :nth-child(2) { animation-delay:.06s; } .hero-text > :nth-child(3) { animation-delay:.12s; } .hero-text > :nth-child(4) { animation-delay:.18s; } .hero-text > :nth-child(5) { animation-delay:.24s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } }
.h1 { font-size:clamp(40px, 4.9vw, 78px); line-height:1.02; letter-spacing:-.02em; margin:0 0 22px; }
.how { list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px; margin:26px 0 0; padding:18px 0 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2); }
.how b { margin-right:8px; font-family:var(--serif); font-weight:400; font-size:19px; color:var(--accent); }
.lead { font-size:clamp(17px, 1.35vw, 19px); color:var(--ink-2); margin:0 0 28px; max-width:440px; }
.ctas { display:flex; gap:10px; flex-wrap:wrap; }
.hero-media { grid-column:6 / -1; position:relative; }

/* ---------- before/after stage ---------- */
.stage { position:relative; aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); user-select:none; -webkit-user-select:none; touch-action:pan-y; isolation:isolate; }
.hero-stage { aspect-ratio:16/10; }
.stage .layer { position:absolute; inset:0; }
.stage .layer img { width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.stage .after { clip-path:inset(0 0 0 50%); }
.stage .fade { transition:opacity 1.2s var(--ease); }
.tag { position:absolute; top:14px; z-index:6; padding:8px 12px; border-radius:0; font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); background:rgba(255,253,248,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tag.l { left:14px; } .tag.r { right:14px; }
.illu { position:absolute; right:14px; bottom:14px; z-index:6; padding:6px 10px; border-radius:0; font-size:9.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(20,19,17,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.handle { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:7; background:rgba(255,255,255,.95); }
.knob { position:absolute; top:50%; left:50%; z-index:8; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; display:grid; place-items:center; cursor:ew-resize; background:rgba(255,253,248,.85); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 10px 30px -8px rgba(20,19,17,.35); transition:transform .3s var(--ease); touch-action:none; }
.knob:hover { transform:scale(1.08); }
.knob svg { width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.5; }

.floatcard { position:absolute; left:14px; bottom:14px; z-index:9; display:flex; gap:12px; align-items:center; max-width:calc(100% - 28px); padding:9px 18px 9px 9px; border-radius:0; background:rgba(255,253,248,.78); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 20px 40px -20px rgba(20,19,17,.45); }
.floatcard > * { transition:opacity .3s, transform .3s var(--ease); }
.floatcard.swap > * { opacity:0; transform:translateY(5px); }
.floatcard .sw { width:42px; height:42px; border-radius:0; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.floatcard .stl { font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.floatcard .n { font-size:15px; line-height:1.25; color:var(--ink); }
.floatcard .m { font-size:12.5px; color:var(--muted); }

/* hotspots */
.spot { position:absolute; z-index:5; width:24px; height:24px; margin:-12px 0 0 -12px; padding:0; border:0; border-radius:50%; background:rgba(255,253,248,.95); box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:pointer; transition:transform .3s var(--ease); }
.spot::after { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--ink); transition:background .2s; }
.spot::before { content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(255,255,255,.9); animation:pulse 2.4s ease-out 4; }
.spot:hover, .spot.on { transform:scale(1.25); }
.spot.on::after { background:var(--accent); }
@keyframes pulse { 0% { transform:scale(.6); opacity:1; } 100% { transform:scale(1.6); opacity:0; } }
.pcard { position:absolute; z-index:20; width:260px; display:none; padding:16px 18px; border-radius:0; background:rgba(255,253,248,.9); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 24px 50px -20px rgba(20,19,17,.45); }
.pcard.show { display:block; animation:pop .35s var(--ease); }
@keyframes pop { from { opacity:0; transform:translateY(6px) scale(.98); } }
.pcard .sw { height:6px; border-radius:6px; margin-bottom:12px; }
.pcard .n { font-family:var(--serif); font-size:22px; line-height:1.15; padding-right:20px; }
.pcard .row { display:flex; justify-content:space-between; margin-top:8px; font-size:13.5px; color:var(--muted); }
.pcard .row b { font-weight:500; color:var(--ink); }
.pcard .x { position:absolute; top:8px; right:10px; border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:var(--muted); padding:4px; }
.pcard .pclink { display:inline-block; margin-top:14px; font-size:13px; font-weight:500; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.pcard .eks { margin-top:10px; font-size:11.5px; color:var(--muted); }
.homecap { margin:14px 2px 0; font-size:13px; color:var(--muted); }

/* shop marquee */
.shops { display:flex; align-items:center; gap:32px; margin-top:clamp(44px, 6vw, 84px); padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.shops .lbl { flex:none; padding-left:var(--gut); font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.marquee { flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.track { display:flex; width:max-content; animation:marq 40s linear infinite; }
.track span { display:inline-flex; align-items:center; padding-right:clamp(32px, 4vw, 60px); font-family:var(--serif); font-size:clamp(26px, 2.5vw, 36px); line-height:1.2; color:var(--ink-2); white-space:nowrap; }
.track span::after { content:""; width:6px; height:6px; margin-left:clamp(32px, 4vw, 60px); border-radius:50%; background:var(--gold); }
.shops:hover .track { animation-play-state:paused; }
@keyframes marq { to { transform:translateX(-50%); } }

/* ---------- sections ---------- */
.sec { padding:clamp(96px, 13vw, 184px) 0; }
.head-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:28px 48px; margin-bottom:clamp(40px, 5vw, 72px); }

/* offer: words light up as you scroll */
.statement { margin:0; max-width:1180px; font-family:var(--serif); font-size:clamp(34px, 4.6vw, 72px); line-height:1.06; letter-spacing:-.025em; }
.statement em { color:var(--accent); }
html.js .statement .w { opacity:.16; transition:opacity .6s var(--ease); }
html.js .statement .w.on { opacity:1; }
.trio { list-style:none; margin:clamp(64px, 8vw, 128px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--line); }
.trio li { padding:30px 36px 0; border-left:1px solid var(--line); }
.trio li:first-child { padding-left:0; border-left:0; }
.trio .ix { display:flex; justify-content:space-between; font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.trio .num { margin:26px 0 18px; font-family:var(--serif); font-size:clamp(60px, 6.4vw, 104px); line-height:.9; letter-spacing:-.04em; }
.trio .num small { margin-left:8px; font-family:var(--sans); font-size:16px; letter-spacing:0; color:var(--muted); }
.trio p { margin:0; color:var(--ink-2); max-width:38ch; }

/* examples rail */
.rail-ctrl { display:flex; gap:8px; }
.round { width:54px; height:54px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.round:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.round svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.rail { display:flex; gap:clamp(14px, 1.6vw, 24px); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  --pad:max(var(--gut), calc((100vw - 1360px) / 2 + var(--gut))); padding:0 var(--pad) 4px; scroll-padding:0 var(--pad); }
.rail::-webkit-scrollbar { display:none; }
.rail.drag { scroll-snap-type:none; cursor:grabbing; }
.rail.drag .ex { pointer-events:none; }
.ex { flex:none; width:clamp(272px, 31vw, 460px); scroll-snap-align:start; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.ex-img { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-md); background:var(--paper-2); }
.ex-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease), clip-path .9s var(--ease); }
.ex-img img.b { clip-path:inset(0 100% 0 0); }
.ex:hover .ex-img img { transform:scale(1.04); }
.ex:hover .ex-img img.b, .ex.peek .ex-img img.b { clip-path:inset(0 0 0 0); }
.ex-img .tag { transition:opacity .3s; }
.ex-img .tag.f { opacity:0; }
.ex:hover .ex-img .tag.e, .ex.peek .ex-img .tag.e { opacity:0; }
.ex:hover .ex-img .tag.f, .ex.peek .ex-img .tag.f { opacity:1; }
.ex-meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:18px; }
.ex-meta .rm { font-family:var(--serif); font-size:26px; line-height:1.1; letter-spacing:-.01em; }
.ex-meta .rm em { color:var(--accent); }
.ex-meta .kr { font-size:14px; color:var(--ink-2); white-space:nowrap; }
.ex-home { display:block; margin-top:4px; font-size:13.5px; color:var(--muted); }
.rail-bar { position:relative; height:2px; margin-top:32px; background:var(--line); overflow:hidden; border-radius:2px; }
.rail-bar i { position:absolute; left:0; top:0; bottom:0; width:30%; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease); }

/* try it */
.try { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(24px, 4vw, 72px); align-items:start; }
.try-media { position:sticky; top:96px; }
.grp { padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.grp .lbl { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.seg { display:flex; flex-wrap:wrap; gap:8px; }
.seg button { height:44px; padding:0 18px; border-radius:0; border:1px solid var(--line); background:transparent; font:400 15px/1 var(--sans); color:var(--ink-2); white-space:nowrap; cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.seg button:hover { border-color:var(--ink); }
.seg button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.seg button .star { margin-left:6px; color:var(--gold); }
.hint { min-height:22px; margin-top:12px; font-size:14px; color:var(--muted); }
.budget-val { font-family:var(--serif); font-size:30px; line-height:1; letter-spacing:-.01em; text-transform:none; color:var(--ink); }
.sum h4 { display:flex; justify-content:space-between; margin:0 0 6px; font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.sum ul { list-style:none; margin:0; padding:0; }
.sum li { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.sum li .nm { display:flex; align-items:center; gap:12px; min-width:0; }
.sum li .sw { width:14px; height:14px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.sum li .s { color:var(--muted); }
.sum li .pr { white-space:nowrap; }
.sum ul.add li { cursor:default; transition:padding .3s var(--ease); }
.sum ul.add li.hl { padding-left:6px; }
.more { display:none; margin-top:14px; padding:0; border:0; border-bottom:1px solid var(--ink); background:none; font:500 14px var(--sans); color:var(--ink); cursor:pointer; }
.total { display:flex; justify-content:space-between; align-items:baseline; padding:26px 0 18px; }
.total .t { font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
.total .v { font-family:var(--serif); font-size:clamp(48px, 4.6vw, 68px); line-height:1; letter-spacing:-.03em; }
.wall { display:flex; gap:14px; align-items:center; padding:16px; margin-bottom:8px; border-radius:var(--r-md); background:var(--paper-2); font-size:14.5px; }
.wall .ws { width:44px; height:44px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.wall a { text-decoration:none; border-bottom:1px solid var(--line); }
.wall .s { color:var(--muted); font-size:13px; }
details.mini { border-bottom:1px solid var(--line); }
details.mini summary { display:flex; justify-content:space-between; align-items:center; padding:16px 0; cursor:pointer; list-style:none; font-size:15px; }
details.mini summary::-webkit-details-marker { display:none; }
details.mini summary b { font-weight:500; }
details.mini summary .s { color:var(--muted); font-size:14px; }
details.mini summary .s::after { content:"+"; margin-left:12px; color:var(--ink); }
details.mini[open] summary .s::after { content:"–"; }
details.mini li { font-size:14.5px; }
details.mini li:last-child { border-bottom:0; }
.sum li.gone .nm { text-decoration:line-through; text-decoration-color:rgba(20,19,17,.35); color:var(--muted); }
.panel > .btn { margin-top:26px; }
.note { margin:14px 0 0; font-size:12.5px; color:var(--muted); }

/* steps */
.steps-wrap { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 6vw, 112px); align-items:start; }
.steps-head { position:sticky; top:112px; }
.steps { list-style:none; margin:0; padding:0; }
.step { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(20px, 3vw, 44px); padding:clamp(28px, 3.4vw, 48px) 0; border-top:1px solid var(--line); }
.step:last-child { border-bottom:1px solid var(--line); }
.step .n { min-width:1.3em; font-family:var(--serif); font-style:italic; font-size:clamp(64px, 6.6vw, 104px); line-height:.8; letter-spacing:-.04em; color:var(--accent); }
.step h3 { margin:2px 0 12px; }
.step p { margin:0; max-width:46ch; color:var(--ink-2); }

/* full-bleed feature that widens as it scrolls in */
.feature { position:relative; display:grid; align-items:end; min-height:min(94vh, 920px); color:#fff; }
.feature-media { position:absolute; inset:0; overflow:hidden; clip-path:inset(0 var(--gut) round var(--r-lg)); }
.feature-media img { width:100%; height:100%; object-fit:cover; transform:scale(1.08); }
.feature-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,19,17,0) 30%, rgba(20,19,17,.78) 100%); }
@supports (animation-timeline:view()) {
  .feature-media { animation:widen linear both; animation-timeline:view(); animation-range:entry 0% cover 42%; }
  .feature-media img { animation:drift linear both; animation-timeline:view(); }
  @keyframes widen { from { clip-path:inset(6% var(--gut) round var(--r-lg)); } to { clip-path:inset(0 0 round 0); } }
  @keyframes drift { from { transform:translateY(-6%) scale(1.14); } to { transform:translateY(6%) scale(1.14); } }
}
.feature-text { position:relative; z-index:2; width:100%; padding-left:calc(var(--gut) * 2); padding-right:calc(var(--gut) * 2); padding-top:120px; padding-bottom:clamp(44px, 7vw, 104px); }
.feature h2 { max-width:1000px; color:#fff; }
.feature h2 em { color:var(--gold); }
.feature p { max-width:540px; margin:26px 0 0; font-size:clamp(17px, 1.4vw, 20px); color:rgba(255,255,255,.84); }

/* prices */
.prices { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.price { position:relative; display:flex; flex-direction:column; min-height:500px; padding:clamp(28px, 3vw, 40px); border-radius:var(--r-lg); background:var(--white); box-shadow:0 0 0 1px var(--line); transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.price:hover { transform:translateY(-6px); box-shadow:0 0 0 1px var(--line), 0 30px 60px -36px rgba(20,19,17,.4); }
.price .badge { position:absolute; top:24px; right:24px; padding:7px 12px; border-radius:0; font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; background:var(--gold); color:var(--ink); }
.price h3 { font-size:32px; }
.price p { margin:14px 0 0; color:var(--ink-2); }
.price .kr { margin:auto 0 24px; padding-top:44px; font-family:var(--serif); font-size:clamp(68px, 6.4vw, 104px); line-height:.86; letter-spacing:-.04em; }
.price .kr small { margin-left:8px; font-family:var(--sans); font-size:16px; letter-spacing:0; color:var(--muted); }
.price .btn { width:100%; }
.price.feat { background:var(--ink); color:var(--paper); box-shadow:none; }
.price.feat p { color:rgba(245,241,233,.72); }
.price.feat .kr small { color:rgba(245,241,233,.55); }
.price.feat .btn { background:var(--paper); color:var(--ink); border-color:var(--paper); }




.fine { margin:28px 0 0; font-size:14px; color:var(--muted); }

/* order */
.split { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 6vw, 112px); align-items:start; }
.split > div:first-child p { color:var(--ink-2); max-width:440px; }
.photos { display:flex; gap:16px; align-items:flex-start; margin-top:36px; padding:22px; border-radius:var(--r-md); background:var(--paper-2); }
.photos .ic { width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--white); }
.photos .ic svg { width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.5; }
.photos b { display:block; margin-bottom:4px; font-weight:500; }
.photos span { font-size:14.5px; color:var(--ink-2); }
form { padding:clamp(24px, 3.6vw, 52px); border-radius:var(--r-lg); background:var(--white); box-shadow:0 0 0 1px var(--line); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; }
.field { margin-bottom:24px; }
label { display:block; margin-bottom:4px; font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
input:not([type=checkbox]), select, textarea { width:100%; padding:10px 0 12px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; font:400 17px/1.4 var(--sans); color:var(--ink); transition:border-color .3s; }
input::placeholder, textarea::placeholder { color:#b1a99c; }
input:focus, select:focus, textarea:focus { outline:none; border-bottom-color:var(--ink); }
select { -webkit-appearance:none; appearance:none; padding-right:28px; cursor:pointer; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23141311' stroke-width='1.4'/></svg>") no-repeat right 2px center; }
textarea { resize:vertical; min-height:96px; }
.check { display:flex; gap:12px; align-items:flex-start; margin:0; font-size:15px; font-weight:330; letter-spacing:0; text-transform:none; color:var(--ink-2); cursor:pointer; }
.check input { width:18px; height:18px; margin:3px 0 0; flex:none; accent-color:var(--ink); }
p.small { margin:0 0 24px; font-size:13.5px; color:var(--muted); }
.hp { position:absolute; left:-9999px; }
.thanks { display:none; padding:48px 10px; text-align:center; }
.thanks h3 { font-size:56px; }

/* faq */
.faq { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 6vw, 112px); align-items:start; }
.faq > div:first-child { position:sticky; top:112px; }
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; cursor:pointer; list-style:none; font-family:var(--serif); font-size:clamp(23px, 2.1vw, 30px); line-height:1.2; letter-spacing:-.01em; }
.faq summary::-webkit-details-marker { display:none; }
.pm { position:relative; width:40px; height:40px; flex:none; border-radius:50%; border:1px solid var(--line); transition:background .3s, border-color .3s; }
.pm::before, .pm::after { content:""; position:absolute; left:50%; top:50%; width:13px; height:1.5px; background:var(--ink); transform:translate(-50%, -50%); transition:transform .45s var(--ease), background .3s; }
.pm::after { transform:translate(-50%, -50%) rotate(90deg); }
.faq details[open] .pm { background:var(--ink); border-color:var(--ink); }
.faq details[open] .pm::before, .faq details[open] .pm::after { background:var(--paper); }
.faq details[open] .pm::after { transform:translate(-50%, -50%) rotate(0deg); }
.faq details p { margin:0 0 28px; max-width:60ch; color:var(--ink-2); }
@supports selector(::details-content) {
  :root { interpolate-size:allow-keywords; }
  .faq details::details-content, details.mini::details-content { height:0; overflow:clip; transition:height .55s var(--ease), content-visibility .55s allow-discrete; }
  .faq details[open]::details-content, details.mini[open]::details-content { height:auto; }
}

/* footer */
footer { padding:clamp(72px, 9vw, 128px) 0 28px; background:var(--ink); color:var(--paper); overflow:hidden; }
.foot-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px; }
.foot-top h2 { color:var(--paper); max-width:760px; }
.foot-top h2 em { color:var(--gold); }
footer .btn { background:var(--paper); color:var(--ink); border-color:var(--paper); }

.wordmark { margin:clamp(56px, 9vw, 140px) 0 clamp(28px, 4vw, 56px); font-family:var(--serif); font-size:clamp(48px, 15vw, 250px); line-height:.9; letter-spacing:-.05em; white-space:nowrap; color:var(--paper); }
.wordmark em { color:var(--gold); }
.foot-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:22px; border-top:1px solid rgba(245,241,233,.16); font-size:13px; color:rgba(245,241,233,.6); }
.foot-row a { text-decoration:none; border-bottom:1px solid rgba(245,241,233,.25); }
footer .src { margin:14px 0 0; font-size:12px; color:rgba(245,241,233,.45); }

/* scroll reveal */
html.js .rv { opacity:0; transform:translateY(32px); transition:opacity 1.1s var(--ease), transform 1.2s var(--ease); }
html.js .rv.in { opacity:1; transform:none; }
html.js .rv.d1 { transition-delay:.08s; } html.js .rv.d2 { transition-delay:.16s; }

/* desktop cursor bubble over the pictures */
.cursor { position:fixed; left:0; top:0; z-index:80; width:88px; height:88px; margin:-44px 0 0 -44px; border-radius:50%; display:grid; place-items:center; pointer-events:none; background:var(--ink); color:var(--paper); font-size:13px; font-weight:500; letter-spacing:.04em; opacity:0; transform:scale(.4); transition:opacity .3s, transform .4s var(--ease); }
.cursor.on { opacity:1; transform:scale(1); }

/* ---------- tablet / phone ---------- */
@media (max-width:980px) {
  nav.links { display:none; }
  .hero-grid { display:flex; flex-direction:column; align-items:stretch; }
  .try, .split, .steps-wrap, .faq { grid-template-columns:minmax(0, 1fr); }
  .try-media, .steps-head, .faq > div:first-child { position:static; }
  .trio { grid-template-columns:minmax(0, 1fr); border-top:0; }
  .trio li, .trio li:first-child { padding:28px 0 32px; border-left:0; border-top:1px solid var(--line); }
  .prices { grid-template-columns:minmax(0, 1fr); }
  .price { min-height:0; }
  .more { display:inline-block; }
  .sum ul.add.clip:not(.open) li:nth-child(n+7) { display:none; }
}
@media (max-width:640px) {
  body { font-size:16px; }
  .bar { height:62px; }
  .logo { font-size:27px; }
  .display { font-size:clamp(54px, 16.4vw, 92px); }
  .display .ln.ind { padding-left:0; }
  .hero-stage { aspect-ratio:4/3; }
  .floatcard { left:10px; bottom:10px; padding:7px 14px 7px 7px; gap:10px; }
  .floatcard .sw { width:34px; height:34px; }
  .floatcard .n { font-size:13.5px; }
  .floatcard .stl { font-size:9px; }
  .floatcard .m { font-size:11.5px; }
  .illu { right:auto; bottom:auto; left:12px; top:50px; }
  .tag { top:10px; padding:7px 10px; font-size:9.5px; } .tag.l { left:10px; } .tag.r { right:10px; }
  .ctas .btn { flex:1 1 100%; }
  .meta span:nth-child(3) { display:none; }
  .shops { flex-direction:column; align-items:stretch; gap:14px; }
  .seg { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--gut)); padding:0 var(--gut); }
  .seg::-webkit-scrollbar { display:none; }
  .rail-ctrl { display:none; }
  .ex { width:80vw; }
  .grid2 { grid-template-columns:minmax(0, 1fr); }
  .floatcard.below, .pcard.below { position:static; width:auto; margin-top:12px; background:var(--white); box-shadow:0 0 0 1px var(--line); }
  .spot { width:18px; height:18px; margin:-9px 0 0 -9px; }
  .spot::after { inset:5.5px; }
  .spot::before { inset:-4px; }
  .knob { width:46px; height:46px; margin:-23px 0 0 -23px; }
  .feature { min-height:82vh; }
  .step { grid-template-columns:minmax(0, 1fr); gap:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  html.js .rv { opacity:1; transform:none; }
  html.js .statement .w { opacity:1; }
}

/* ---------- three services (forside) ---------- */
.doors { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.door { display:flex; flex-direction:column; padding:14px 14px 28px; color:inherit; text-decoration:none; background:var(--white); box-shadow:0 0 0 1px var(--line); transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.door-img { display:block; aspect-ratio:4/3; overflow:hidden; margin-bottom:24px; background:var(--paper-2); }
.door-img img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.door:hover { transform:translateY(-6px); }
.door:hover .door-img img { transform:scale(1.05); }
.door-k { margin:0 10px; font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.door h3 { margin:10px 10px 12px; font-size:clamp(28px, 2.6vw, 38px); }
.door p { flex:1; margin:0 10px; color:var(--ink-2); }
.door-go { display:inline-flex; align-items:center; gap:10px; margin:24px 10px 0; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.door-go svg { width:15px; height:15px; transition:transform .4s var(--ease); }
.door:hover .door-go svg { transform:translateX(5px); }

/* ---------- landing pages ---------- */
.gets { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin:0; padding:0; }
.gets li { padding:clamp(26px, 2.6vw, 36px); background:var(--white); box-shadow:0 0 0 1px var(--line); transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.gets li:hover { transform:translateY(-4px); }
.gets .n { font-family:var(--serif); font-size:44px; line-height:1; color:var(--accent); }
.gets h3 { margin:18px 0 10px; font-size:clamp(24px, 2vw, 29px); }
.gets p { margin:0; color:var(--ink-2); }
.ba-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.ba-grid figure { margin:0; }
.ba-grid figcaption { margin-top:14px; font-size:14px; color:var(--muted); }
.ba-grid figcaption b { display:block; font-family:var(--serif); font-weight:400; font-size:24px; color:var(--ink); }
.ba-note { margin:22px 0 0; font-size:14px; color:var(--muted); max-width:70ch; }
.others { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.others a { text-decoration:none; color:rgba(245,241,233,.8); border-bottom:1px solid rgba(201,168,76,.45); padding-bottom:3px; }
.others a:hover { color:var(--gold); }
.err { color:#9a3b2a !important; }
@media (max-width:980px) {
  .doors, .gets, .ba-grid { grid-template-columns:minmax(0, 1fr); }
}

/* ---------- order panel on every page (leads to start.html) ---------- */
.startcta { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:28px clamp(32px, 5vw, 80px); align-items:center; padding:clamp(28px, 4vw, 56px); }
.startcta p { color:var(--ink-2); max-width:52ch; }
.startcta .how { margin:0 0 26px; border-top:0; padding-top:0; display:grid; gap:12px; font-size:16px; }
.startcta .btn { width:100%; }

/* ---------- Kom i gang (start.html) ---------- */
.link-back { font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; }
.flow-wrap { padding-top:clamp(24px, 4vw, 48px); padding-bottom:clamp(64px, 8vw, 120px); }
.flow-head { margin-bottom:clamp(28px, 4vw, 44px); }
.steps-bar { list-style:none; display:flex; gap:clamp(14px, 3vw, 40px); margin:0; padding:0; overflow-x:auto; scrollbar-width:none; }
.steps-bar::-webkit-scrollbar { display:none; }
.steps-bar li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); white-space:nowrap; }
.steps-bar b { width:32px; height:32px; display:grid; place-items:center; flex:none; border-radius:50%; border:1px solid var(--gold-line); font-family:var(--serif); font-weight:400; font-size:16px; transition:background .4s, color .4s; }
.steps-bar li.on { color:var(--ink); }
.steps-bar li.on b { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.steps-bar li.done b { background:var(--gold-grad-light); border-color:transparent; color:var(--ink); }
.steps-line { height:2px; margin-top:18px; background:var(--line); }
.steps-line i { display:block; height:100%; background:var(--gold-grad-light); transform-origin:0 50%; transform:scaleX(.2); transition:transform .7s var(--ease); }
.flow-grid { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:clamp(24px, 4vw, 64px); align-items:start; }
.flow-main #stepBody > * { animation:fadeUp .6s var(--ease) both; }
.flow-sum { position:sticky; top:96px; padding:26px; box-shadow:0 0 0 1px var(--gold-line); }
.flow-sum dl { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:9px 14px; margin:0; font-size:14.5px; }
.flow-sum dt { color:var(--muted); }
.flow-sum dd { margin:0; text-align:right; }
.sumpal { display:flex; justify-content:flex-end; gap:4px; }
.sumpal i { width:22px; height:22px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.sumtot { display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; padding-top:16px; border-top:1px solid var(--gold-line); font-size:14px; color:var(--muted); }
.sumtot b { font-family:var(--serif); font-weight:400; font-size:34px; color:var(--ink); }

.q { font-size:clamp(34px, 4vw, 56px); line-height:1.05; margin:0 0 12px; }
.qsub { margin:0 0 26px; max-width:62ch; color:var(--ink-2); }
.plans { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.plan, .mbc, .pack { position:relative; display:flex; flex-direction:column; padding:12px 12px 18px; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer; box-shadow:0 0 0 1px var(--gold-line); transition:box-shadow .35s, transform .35s var(--ease); }
.plan:hover, .mbc:hover, .pack:hover { transform:translateY(-3px); }
.plan.on, .mbc.on, .pack.on { box-shadow:0 0 0 2px var(--ink), 0 18px 40px -16px rgba(169,132,47,.45); }
.plan-img { display:block; aspect-ratio:4/3; margin-bottom:14px; background-size:cover; background-position:center; }
.plan-t { font-family:var(--serif); font-size:24px; line-height:1.15; }
.plan-s { margin-top:4px; font-size:14px; color:var(--muted); }
.tick { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; background:var(--ink); opacity:0; transform:scale(.6); transition:opacity .25s, transform .35s var(--ease); }
.tick::after { content:""; position:absolute; left:10px; top:6px; width:6px; height:12px; border:solid var(--paper); border-width:0 2px 2px 0; transform:rotate(45deg); }
.on > .tick { opacity:1; transform:none; }

.room { margin-bottom:16px; padding:clamp(18px, 2.4vw, 28px); box-shadow:0 0 0 1px var(--gold-line); }
.room-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.room-n { font-family:var(--serif); font-size:28px; }
.link { padding:0; border:0; background:none; font:600 12px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.chips, .bchips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.chip { height:40px; padding:0 16px; border:1px solid var(--line); background:transparent; font:400 15px var(--sans); color:var(--ink-2); cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.chip:hover { border-color:var(--ink); }
.chip.on { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.photos-up { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.thumb { position:relative; width:112px; height:84px; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb button { position:absolute; top:4px; right:4px; width:26px; height:26px; border:0; border-radius:50%; background:rgba(20,19,17,.72); color:#fff; font-size:16px; line-height:1; cursor:pointer; }
.add-photo { position:relative; width:112px; height:84px; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px dashed var(--accent); color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:none; text-align:center; cursor:pointer; background:rgba(201,168,76,.06); }
.add-photo:only-child { width:100%; height:140px; font-size:15px; }
.add-photo input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.add-photo svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.seg2 { display:inline-flex; border:1px solid var(--line); }
.seg2 button { height:42px; padding:0 18px; border:0; background:transparent; font:400 15px var(--sans); color:var(--ink-2); cursor:pointer; transition:background .25s, color .25s; }
.seg2 button.on { background:var(--ink); color:var(--paper); }
.seg2 button:disabled { opacity:.35; cursor:not-allowed; }
.seg2.sm button { height:32px; padding:0 10px; font-size:13px; }
.mnote { margin:10px 0 16px; font-size:14px; color:var(--muted); }
.mnote.req { color:var(--accent); }
.mgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.mgrid label, .rnote, .big-in { display:block; margin-bottom:16px; }
label input, label textarea, label select { margin-top:4px; text-transform:none; letter-spacing:0; }
.walls .wrow { display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:6px; }
.walls { margin-bottom:12px; }
.furn { margin:18px 0 8px; }
.flabel { margin:0 0 10px; font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.frow { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; }
.keepnote { margin:16px 0; padding:12px 14px; font-size:14.5px; color:var(--ink-2); background:rgba(201,168,76,.09); }
.rnote textarea { min-height:60px; }
.addroom { margin-top:4px; }

.modes { margin-bottom:24px; }
.mbgrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.mbc-t { margin-top:12px; font-family:var(--serif); font-size:22px; line-height:1.15; }
.mbc-s { margin-top:4px; font-size:13.5px; line-height:1.4; color:var(--muted); }
/* the mood board collage: photo or colour, palette blocks and material swatches */
.mb { display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(3, 1fr); gap:3px; aspect-ratio:4/3; width:100%; }
.mb > span { position:relative; display:block; overflow:hidden; }
.mb-photo, .mb-col.big { grid-column:1 / 3; grid-row:1 / 3; }
.mb-photo { background-size:cover; background-position:center; }
.mb-photo i, .mb-mat i { position:absolute; left:5px; bottom:4px; font-style:normal; font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(20,19,17,.55); }
.mb-photo i { padding:2px 5px; color:#fff; background:rgba(20,19,17,.35); }
.mb-col { box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
.mb-empty { display:grid; place-items:center; aspect-ratio:4/3; background:repeating-linear-gradient(45deg, rgba(201,168,76,.08) 0 10px, transparent 10px 20px); box-shadow:inset 0 0 0 1px var(--gold-line); }
.mb-empty b { font-family:var(--serif); font-size:52px; font-weight:400; color:var(--accent); }
.mbd { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:28px; margin-top:26px; padding:20px; box-shadow:0 0 0 1px var(--gold-line); animation:fadeUp .6s var(--ease) both; }
.mbd h3 { margin:0 0 8px; font-size:34px; }
.mbd p { margin:0; color:var(--ink-2); }
.mbd .label { margin-bottom:12px; }
.pal { list-style:none; display:grid; gap:8px; margin:18px 0; padding:0; }
.pal li { display:flex; align-items:center; gap:12px; font-size:15px; }
.pal i { width:34px; height:34px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.mats { margin-top:12px !important; font-size:14.5px; }
.mbd .wall { margin-top:16px; }
.mbd .wall i { width:30px; height:30px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.swatches { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:12px; margin-bottom:8px; }
.sw { display:flex; flex-direction:column; gap:6px; padding:0; border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
.sw i { display:block; aspect-ratio:1; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .3s var(--ease), box-shadow .3s; }
.sw span { font-size:12px; line-height:1.3; color:var(--muted); }
.sw.on i { transform:scale(.9); box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }

.packs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.pack { padding:18px; }
.pk-t { font-family:var(--serif); font-size:22px; }
.pk-s { margin-top:2px; font-size:13.5px; color:var(--muted); }
.pk-p { margin-top:14px; font-family:var(--serif); font-size:30px; }
.big-in input, .big-in select { font-size:18px; }

.flow-nav { display:flex; align-items:center; gap:10px; margin-top:32px; padding-top:22px; border-top:1px solid var(--gold-line); }
.flow-nav .mini { flex:1; font-size:13px; color:var(--muted); }
.flow-nav .btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.flow-main .hint { color:var(--accent); }
.done { max-width:760px; padding:clamp(48px, 8vw, 120px) 0; }

.plan, .mbc, .pack, .room, .flow-sum, .mbd, .startcta { background:linear-gradient(160deg, rgba(201,168,76,.11) 0%, rgba(255,253,248,.9) 55%); }
.startcta { box-shadow:0 0 0 1px var(--gold-line); }

@media (max-width:980px) {
  .flow-grid, .startcta { grid-template-columns:minmax(0, 1fr); }
  .flow-sum { position:static; }
  .mbgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px) {
  .plans, .packs { grid-template-columns:minmax(0, 1fr); }
  .plan { flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 14px; }
  .plan-img { width:96px; aspect-ratio:1; margin:0; flex:none; }
  .plan-t, .plan-s { flex:1 1 calc(100% - 120px); }
  .mbd { grid-template-columns:minmax(0, 1fr); }
  .mbc-s { display:none; }
  .mbc-t { font-size:19px; }
  .steps-bar span { display:none; }
  .steps-bar li.on span { display:inline; }
  .flow-nav { position:sticky; bottom:0; z-index:20; margin:24px calc(-1 * var(--gut)) 0; padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px)); background:rgba(245,241,233,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
  .flow-nav .mini { display:none; }
  .flow-nav .btn { flex:1; }
  .link-back { display:none; }
}

/* ===== GOLD WARMTH - effects borrowed from endpointai.app: gold shading on the accent words, a warm glow
   behind the hero, gold hairlines, gold-tinted cards that glow on hover, a gold sheen on buttons and a gold
   reading bar. The site's own colours stay the same. Delete this block to go back. ===== */
:root { --gold-glow:rgba(201,168,76,.18); --gold-line:rgba(169,132,47,.32);
  --gold-grad:linear-gradient(100deg, #8a6d3b 0%, #b8923a 30%, #d9bc78 50%, #b08a47 70%, #7d5f30 100%);
  --gold-grad-light:linear-gradient(100deg, #b8923a 0%, #e9d08a 45%, #c9a84c 70%, #a8842f 100%); }
body { background-image:radial-gradient(ellipse 120% 55% at 50% 0%, rgba(233,208,138,.20) 0%, rgba(245,241,233,0) 60%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .07  0 0 0 0 .06  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-repeat:no-repeat, repeat; }
.hero { position:relative; overflow-x:clip; }
.hero::before { content:""; position:absolute; z-index:-1; top:-12%; right:-8%; width:min(900px, 80vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(226,200,143,.34) 0%, rgba(201,168,76,.10) 40%, transparent 68%); animation:breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { transform:scale(.92); opacity:.75; } to { transform:scale(1.06); opacity:1; } }
h1 em, h2 em, .statement em, .ex-meta .rm em, .gets .n, .step .n {
  background:var(--gold-grad); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent;
  animation:goldShift 7s ease-in-out infinite alternate; }
.feature h2 em, .foot-top h2 em, .wordmark em, .price.feat .kr { background:var(--gold-grad-light); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; animation:goldShift 7s ease-in-out infinite alternate; }
.price.feat .kr small { -webkit-text-fill-color:rgba(245,241,233,.55); }
@keyframes goldShift { from { background-position:0% 50%; } to { background-position:100% 50%; } }
.label { color:var(--accent); }
.label::before { width:32px; background:var(--gold-grad); }
.btn { position:relative; overflow:hidden; isolation:isolate; }
.btn::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 25%, rgba(233,208,138,.45) 50%, transparent 75%); transform:translateX(-130%); transition:transform 1s var(--ease); pointer-events:none; }
.btn:hover::after { transform:translateX(130%); }
.btn:not(.ghost) { box-shadow:0 10px 28px -12px rgba(169,132,47,.6); }
.btn:not(.ghost):hover { box-shadow:0 14px 36px -10px rgba(201,168,76,.65); }
.btn.ghost { border-color:var(--gold-line); }
.shops { background:linear-gradient(90deg, rgba(201,168,76,.05), rgba(201,168,76,.16), rgba(201,168,76,.05)); border-color:var(--gold-line); }
.trio, .trio li, .step, .faq details, .grp, .sum li, details.mini { border-color:var(--gold-line); }
.stage, .ex-img, .door-img { box-shadow:0 34px 70px -36px rgba(120,90,40,.6), 0 0 0 1px rgba(201,168,76,.28); }
.price:not(.feat), form, .photos, .wall, .door, .gets li {
  background:linear-gradient(160deg, rgba(201,168,76,.11) 0%, rgba(255,253,248,.88) 55%) !important; box-shadow:0 0 0 1px var(--gold-line) !important; }
.price:not(.feat):hover, .door:hover, .gets li:hover { box-shadow:0 0 0 1px #c9a84c, 0 16px 46px -12px rgba(201,168,76,.32) !important; }
.price.feat { background:radial-gradient(120% 80% at 85% 0%, rgba(201,168,76,.24), transparent 60%), var(--ink); box-shadow:0 0 0 1px rgba(201,168,76,.5), 0 34px 70px -34px rgba(169,132,47,.6); }
.price .badge { background:var(--gold-grad-light); }
.knob { box-shadow:0 0 0 1px rgba(201,168,76,.55), 0 10px 30px -8px rgba(169,132,47,.55); }
.spot::before { border-color:rgba(233,208,138,.95); }
.cursor { background:linear-gradient(135deg, #e2c97e 0%, #c9a84c 50%, #a8842f 100%); color:var(--ink); box-shadow:0 10px 30px -8px rgba(169,132,47,.6); }
.rail-bar i { background:var(--gold-grad); }
footer { background:radial-gradient(ellipse 80% 55% at 50% 100%, rgba(201,168,76,.20), transparent 70%), var(--ink); border-top:1px solid var(--gold-line); }
.foot-row { border-top-color:rgba(201,168,76,.28); }
/* gold reading bar at the very top */
.progress { position:fixed; left:0; right:0; top:0; z-index:70; height:2px; transform-origin:0 50%; transform:scaleX(0); background:var(--gold-grad-light); pointer-events:none; }
@supports (animation-timeline:scroll()) {
  .progress { animation:readbar linear both; animation-timeline:scroll(root); }
  @keyframes readbar { to { transform:scaleX(1); } }
}
@media (prefers-reduced-motion:reduce) {
  .hero::before, h1 em, h2 em, .statement em, .gets .n, .step .n, .wordmark em { animation:none; }
}