/* WOW Walls v2 «ACID WINDOW» — tokens are law (DESIGN.md). Acid is a flat colour, never a glow. */
@font-face { font-family: "Anybody"; src: url("/assets/fonts/anybody.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --graphite: #0C131A;
  --pit: #070B0F;
  --slab: #141D26;
  --seam: #26323D;
  --acid: #CBFF2E;
  --lime: #A2CA22;
  --plaster: #E9EDE4;
  --fog: #9AA6AE;
  --window: #FFFFFF; /* the curtain's hole: pure white is what makes mix-blend darken show the photo untouched */
  --display: "Anybody", "Arial Narrow", Impact, sans-serif;
  --body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gut: clamp(16px, 4.4vw, 72px);
  --bar-h: 64px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 180ms;
  --t-ui: 260ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 8px); }
body { margin: 0; background: var(--graphite); color: var(--plaster); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, figure, blockquote { margin: 0; }
button { font: inherit; }
.ico { width: 1.1em; height: 1.1em; flex: none; }
.flip { transform: scaleX(-1); }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }

.display {
  font-family: var(--display); text-transform: uppercase; line-height: .86; letter-spacing: -.01em;
  font-weight: 900; font-stretch: 118%; font-variation-settings: "wdth" var(--wd, 118), "wght" var(--wg, 900);
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--acid); }

/* ---------- bar ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gut); transition: background var(--t-ui), box-shadow var(--t-ui); }
.bar.is-solid { background: color-mix(in srgb, var(--graphite) 94%, transparent); box-shadow: 0 1px 0 var(--seam); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.mark-hex { width: 26px; height: 30px; color: var(--acid); }
.mark-word { font: 900 21px/1 var(--display); font-variation-settings: "wdth" 128, "wght" 900; letter-spacing: -.01em; white-space: nowrap; }
.mark-wow { color: var(--acid); }
@media (max-width: 439px) { .mark-by { display: none; } }
.mark-by { font-size: 13px; font-weight: 600; color: var(--lime); white-space: nowrap; align-self: flex-end; padding-bottom: 12px; }
.bar-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bar-call:hover { color: var(--acid); }

/* ---------- hero ---------- */
.hero-pin { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
.hero-photo, .curtain, .lift { display: none; }
.js .hero-photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: 0; }
/* lift: max(photo, graphite) so no photo shadow is darker than the curtain and leaks through it */
.js .lift { display: block; position: absolute; inset: 0; z-index: 1; background: var(--graphite); mix-blend-mode: lighten; }
.js .curtain { display: block; position: absolute; inset: 0; z-index: 1; will-change: transform; background: var(--graphite); mix-blend-mode: darken; transform-origin: 50% 50%; }
.curtain-word { position: absolute; left: 0; top: 0; color: var(--window); white-space: nowrap; visibility: hidden; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; font-variation-settings: "wdth" var(--wd, 128), "wght" 900; }
.curtain.is-placed .curtain-word { visibility: visible; }

.hero-copy { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 40px); padding: calc(var(--bar-h) + clamp(16px, 4vh, 48px)) var(--gut) clamp(28px, 6vh, 64px); }
.where { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fog); }
.hero-h { display: flex; flex-direction: column; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; }
.hl { display: block; width: max-content; white-space: nowrap; font-variation-settings: "wdth" var(--wd, 112), "wght" var(--wg, 900); }
.hl-1, .hl-3 { font-size: clamp(46px, calc((100vw - 2 * var(--gut)) / 6.2), 136px); }
.hl-3 { color: var(--acid); }
/* WOW fills the measure: its width is 3.64em at wdth 128 and 2.25em at wdth 76 (measured), capped by the screen height */
.hl-wow { --wdf: 128; --wd: 128; font-size: min(calc((100vw - 2 * var(--gut)) / 3.68), 36svh); line-height: .78; margin: .01em 0 -.02em -.02em; position: relative; }
@media (max-width: 699px) { .hl-wow { --wdf: 76; --wd: 76; font-size: min(calc((100vw - 2 * var(--gut)) / 2.28), 30svh); } }
.wow-text { display: block; color: var(--acid); -webkit-text-stroke: 2px var(--acid); clip-path: inset(var(--drain, 0%) 0 0 0); }
.mo .hl-1, .mo .hl-3 { --wd: 50; --wg: 300; }
.mo .hl-wow { --wd: 50; }
.mo .rise { opacity: 0; transform: translateY(18px); }
.no-anim .hl-1, .no-anim .hl-3 { --wd: 112; --wg: 900; }
.no-anim .hl-wow { --wd: var(--wdf); }
.no-anim .rise { opacity: 1; transform: none; }

.hero-foot { display: grid; gap: 18px; max-width: 1180px; }
.lede { max-width: 34em; color: var(--plaster); font-size: clamp(16px, 1.25vw, 19px); }
.offer { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.hex-ico { width: 18px; height: 21px; color: var(--acid); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.call-link { font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--acid); min-height: 44px; display: inline-flex; align-items: center; }
.call-link:hover { color: var(--acid); }
.proof { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fog); }
.star { color: var(--acid); width: 16px; height: 16px; }
.hero-caption { position: absolute; z-index: 3; left: var(--gut); bottom: clamp(24px, 5vh, 48px); font-size: 14px; font-weight: 700; color: var(--plaster); background: var(--graphite); padding: 10px 14px; opacity: 0; }
.hero-caption span { color: var(--acid); text-transform: uppercase; letter-spacing: .06em; }
.scroll-cue { display: none; }

@media (min-width: 900px) {
  .hero-foot { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: 6vw; }
  .proof { grid-column: 1 / -1; }
  .scroll-cue { display: flex; align-items: center; gap: 12px; position: absolute; z-index: 3; right: var(--gut); bottom: clamp(28px, 6vh, 64px); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fog); }
  .scroll-cue::after { content: ""; width: 2px; height: 46px; background: linear-gradient(var(--acid) 0 50%, var(--seam) 50% 100%); background-size: 100% 200%; animation: cue 1.8s var(--ease-io) infinite; }
}
@keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* ---------- buttons ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 28px; background: var(--acid); color: var(--graphite); border: 0; font: 800 17px/1 var(--body); text-decoration: none; cursor: pointer; transition: transform var(--t-micro) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--plaster); transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--t-ui) var(--ease-out); }
.btn .ico { transition: transform var(--t-micro) var(--ease-out); }
.btn:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.btn:hover .ico { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.btn-wide { width: 100%; }

/* ---------- paint (before/after) ---------- */
.paint { background: var(--pit); }
.paint-pin { min-height: 100svh; display: grid; align-content: center; gap: 28px; padding: calc(var(--bar-h) + 24px) var(--gut) 48px; }
.paint-head { container-type: inline-size; }
.paint-head h2 { font-size: clamp(44px, 7vw, 120px); }
.morph { font: 900 calc(100cqw / 4.4)/.82 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--fog); }
.morph-w { display: block; width: max-content; font-variation-settings: "wdth" var(--wd, 50), "wght" 900; }
.morph.is-wow { color: var(--acid); }
.ba { display: grid; gap: 12px; }
.ba-frame { --x: 0%; position: relative; aspect-ratio: 1600 / 1205; overflow: hidden; background: var(--slab); touch-action: pan-y; }
.ba-frame > img, .ba-plain img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-plain { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; pointer-events: none; }
.ba-line { position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; background: var(--acid); }
.ba-grip { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 64px; height: 74px; display: grid; grid-auto-flow: column; place-content: center; gap: 2px; background: var(--acid); color: var(--graphite); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ba-grip .ico { width: 18px; height: 18px; }
.ba-tag { position: absolute; bottom: 14px; padding: 8px 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transition: opacity var(--t-micro); }
.ba-tag-wow { left: 14px; background: var(--acid); color: var(--graphite); }
.ba-tag-plain { right: 14px; background: var(--plaster); color: var(--graphite); }
.ba-frame.is-low .ba-tag-wow, .ba-frame.is-high .ba-tag-plain { opacity: 0; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba-range:focus-visible + * , .ba-frame:focus-within { outline: 3px solid var(--acid); outline-offset: 4px; }
.ba figcaption { font-size: 14px; color: var(--fog); }
@media (min-width: 900px) {
  .paint-pin { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; column-gap: 4vw; }
  .ba-frame { max-height: 76svh; }
}

/* ---------- quote: the one acid field ---------- */
.quote { background: var(--acid); color: var(--graphite); padding: clamp(64px, 11vw, 160px) var(--gut); }
.quote :focus-visible { outline-color: var(--graphite); }
.quote-grid { display: grid; gap: 40px; max-width: 1320px; margin: 0 auto; }
.quote-copy h2 { font-size: clamp(52px, 8.5vw, 150px); margin-bottom: 24px; }
.quote-copy > p { max-width: 30em; font-size: 18px; font-weight: 500; }
.mini-steps { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 14px; counter-reset: s; }
.mini-steps li { position: relative; padding: 5px 0 0 46px; min-height: 34px; font-size: 17px; counter-increment: s; }
.mini-steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 34px; background: var(--graphite); color: var(--acid); font: 900 15px/1 var(--display); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); position: absolute; left: 0; top: 0; }
.quote-card { background: var(--graphite); color: var(--plaster); padding: clamp(22px, 3vw, 40px); scroll-margin-top: calc(var(--bar-h) + 12px); }
.quote :is(.quote-card) :focus-visible { outline-color: var(--acid); }
.chips { border: 0; padding: 0; margin: 0 0 22px; }
.chips legend { padding: 0; margin-bottom: 14px; font: 900 22px/1 var(--display); text-transform: uppercase; font-variation-settings: "wdth" 112, "wght" 900; }
.chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--slab); cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--t-micro); }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.85); transition: filter var(--t-micro); }
.chip-q { display: grid; place-items: center; aspect-ratio: 4 / 3; font: 900 44px/1 var(--display); color: var(--fog); }
.chip-name { padding: 9px 10px 11px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.chip::after { content: ""; position: absolute; top: 8px; right: 8px; width: 26px; height: 30px; background: var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230C131A' stroke-width='3.2' d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 16px no-repeat; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transform: scale(0); transition: transform var(--t-ui) var(--ease-out); }
.chip:hover { outline-color: var(--seam); }
.chip:hover img { filter: none; }
.chip:has(input:checked) { outline: 3px solid var(--acid); outline-offset: -3px; }
.chip:has(input:checked)::after { transform: scale(1); }
.chip:has(input:focus-visible) { outline: 3px solid var(--plaster); }
.field-label { display: block; margin: 16px 0 7px; font-weight: 700; font-size: 15px; }
.input { width: 100%; min-height: 54px; padding: 0 16px; background: var(--slab); color: var(--plaster); border: 2px solid var(--seam); border-radius: 0; font: 500 17px var(--body); transition: border-color var(--t-micro); }
.input::placeholder { color: #6F7C86; }
.input:hover { border-color: #3A4855; }
.input:focus { outline: none; border-color: var(--acid); }
.input[aria-invalid="true"] { border-color: #FF7A59; }
.hint { margin-top: 7px; font-size: 14px; color: var(--fog); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.err { min-height: 1.4em; margin: 12px 0 8px; color: #FF9B80; font-weight: 700; font-size: 15px; }
.err:empty { min-height: 0; margin: 8px 0 0; }
.fine { margin-top: 14px; font-size: 13px; color: var(--fog); }
.linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
@media (min-width: 640px) { .chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .quote-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 5vw; align-items: start; } .quote-copy { position: sticky; top: calc(var(--bar-h) + 40px); } }

/* thank-you */
.thanks { display: grid; gap: 16px; }
.ok-label { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px; background: var(--acid); color: var(--graphite); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.thanks h3 { font: 900 clamp(30px, 4vw, 48px)/.9 var(--display); text-transform: uppercase; font-variation-settings: "wdth" 112, "wght" 900; outline: none; }
.photo-ask { padding: 18px; background: var(--slab); display: grid; gap: 6px; justify-items: start; }
.photo-ask-title { font-weight: 800; font-size: 18px; }
.btn-wa { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; margin-top: 6px; background: var(--plaster); color: var(--graphite); font-weight: 800; text-decoration: none; }
.btn-wa:hover { background: var(--acid); }
.sms { font-size: 15px; text-underline-offset: 3px; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; background: var(--graphite); border-block: 2px solid var(--acid); padding: clamp(14px, 2vw, 26px) 0; }
.ticker-track { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); width: max-content; will-change: transform; font: 900 clamp(38px, 6.5vw, 108px)/1 var(--display); text-transform: uppercase; font-variation-settings: "wdth" 150, "wght" 900; white-space: nowrap; }
.ticker-track .ico { width: .55em; height: .64em; color: var(--acid); }

/* ---------- looks ---------- */
.looks { background: var(--graphite); }
.looks-pin { padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 8vw, 110px); display: grid; gap: 32px; }
.looks-head { position: relative; z-index: 2; padding: 0 var(--gut); display: grid; gap: 16px; background: var(--graphite); }
.looks-head h2 { font-size: clamp(52px, 8vw, 132px); }
.looks-head p { max-width: 26em; color: var(--fog); }
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gut) 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.look { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; display: grid; align-content: start; gap: 10px; }
.look-photo { overflow: hidden; aspect-ratio: 3 / 4; background: var(--slab); }
.look-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.look:hover .look-photo img { transform: scale(1.05); }
.look-n { font: 900 15px/1 var(--display); color: var(--acid); letter-spacing: .08em; margin-top: 6px; }
.look h3 { font-size: clamp(26px, 2.2vw, 34px); font-stretch: 112%; --wd: 112; }
.look > p:not(.look-n) { color: var(--fog); font-size: 16px; }
.look-go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; font-weight: 800; color: var(--acid); text-decoration: none; background: linear-gradient(var(--acid), var(--acid)) 0 calc(100% - 8px) / 0 2px no-repeat; transition: background-size var(--t-ui) var(--ease-out); }
.look-go:hover { background-size: 100% 2px; }
.look-go .ico { transition: transform var(--t-micro) var(--ease-out); }
.look-go:hover .ico { transform: translateX(4px); }
@media (min-width: 900px) {
  .js.mo .looks-head { align-self: stretch; align-content: center; padding-right: 3vw; box-shadow: 1px 0 0 var(--seam); }
  .js.mo .looks-pin { min-height: 100svh; grid-template-columns: 30vw auto; align-items: center; gap: 0; padding: calc(var(--bar-h) + 24px) 0 40px; overflow: hidden; }
  .js.mo .rail { overflow: visible; scroll-snap-type: none; padding: 0 var(--gut) 0 0; gap: 2.4vw; will-change: transform; }
  .js.mo .look { flex-basis: 25vw; }
  .js.mo .look-photo { aspect-ratio: 4 / 5; max-height: 52svh; }
  .look { flex-basis: 30vw; }
}

/* ---------- how ---------- */
.how { background: var(--pit); padding: clamp(72px, 10vw, 150px) var(--gut); }
.how-grid { display: grid; gap: 40px; max-width: 1320px; margin: 0 auto; }
.how-photo { position: relative; overflow: hidden; }
.how-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.level { position: absolute; left: 0; right: 0; top: 38%; height: 4px; background: var(--acid); transform-origin: 0 50%; }
.mo .level { transform: scaleX(0); }
.level-bubble { position: absolute; right: 12%; top: 50%; width: 40px; height: 16px; transform: translateY(-50%); background: var(--graphite); border: 3px solid var(--acid); }
.level-bubble::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); background: var(--acid); }
.how-copy h2 { font-size: clamp(40px, 5.4vw, 88px); margin-bottom: 32px; }
.rules { list-style: none; padding: 0; display: grid; margin-bottom: 36px; }
.rules li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--seam); }
.rules li:last-child { border-bottom: 1px solid var(--seam); }
.rule-n { font: 900 44px/.9 var(--display); color: var(--acid); font-variation-settings: "wdth" 150, "wght" 900; }
.rules h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.rules p { color: var(--fog); }
@media (min-width: 900px) { .how-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 6vw; align-items: center; } }

/* ---------- people ---------- */
.people { padding: clamp(72px, 10vw, 150px) var(--gut); max-width: 1440px; margin: 0 auto; display: grid; gap: 40px; }
.people-h { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; text-wrap: initial; }
.big5 { font-size: clamp(120px, 22vw, 340px); color: var(--acid); line-height: .78; font-variation-settings: "wdth" 150, "wght" 900; }
.people-sub { display: grid; gap: 10px; font-size: clamp(22px, 2.6vw, 40px); padding-bottom: .3em; font-variation-settings: "wdth" 112, "wght" 900; }
.stars { display: flex; gap: 4px; color: var(--acid); }
.stars .ico { width: .9em; height: .9em; }
.quotes { display: grid; gap: 32px; }
.q { padding-top: 22px; border-top: 2px solid var(--plaster); }
.q p { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; font-weight: 500; max-width: 36em; }
.q footer { margin-top: 14px; font-size: 14px; color: var(--fog); }
@media (min-width: 900px) { .quotes { grid-template-columns: 1.4fr 1fr; gap: 5vw; } }

/* ---------- faq ---------- */
.faq { background: var(--pit); padding: clamp(72px, 10vw, 150px) var(--gut); }
.faq-grid { display: grid; gap: 32px; max-width: 1320px; margin: 0 auto; }
.faq-grid h2 { font-size: clamp(44px, 6vw, 100px); }
.faq-list details { border-top: 1px solid var(--seam); }
.faq-list details:last-child { border-bottom: 1px solid var(--seam); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0; font-weight: 800; font-size: 19px; transition: color var(--t-micro); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 22px; height: 22px; background: linear-gradient(var(--acid), var(--acid)) center / 100% 3px no-repeat, linear-gradient(var(--acid), var(--acid)) center / 3px 100% no-repeat; transition: transform var(--t-ui) var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--acid); }
.faq-list details p { padding: 0 0 22px; max-width: 40em; color: var(--fog); }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 6vw; align-items: start; } }

/* ---------- footer ---------- */
.foot { padding: clamp(56px, 8vw, 120px) var(--gut) calc(40px + env(safe-area-inset-bottom)); overflow: hidden; border-top: 2px solid var(--acid); }
.foot-mark { font: 900 calc((100vw - 2 * var(--gut)) / 9.75)/.8 var(--display); text-transform: uppercase; letter-spacing: -.01em; width: max-content; font-variation-settings: "wdth" var(--wd, 150), "wght" 900; margin-bottom: 40px; }
.mo .foot-mark { --wd: 50; }
.foot-wow { color: var(--acid); }
.foot-row { display: grid; gap: 24px; align-items: center; }
.foot-row p { color: var(--fog); font-size: 15px; }
.foot-row a[data-call] { color: var(--plaster); font-weight: 700; }
.lime { color: var(--lime); }
@media (min-width: 900px) { .foot-row { grid-template-columns: auto 1fr; gap: 40px; } }

/* ---------- floating CTA, cursor, cookie, sheet ---------- */
.float-cta { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateY(140%); transition: transform var(--t-ui) var(--ease-out); }
.float-cta.is-on { transform: none; }
@media (min-width: 900px) { .float-cta { display: none; } }
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js.mo .cursor { display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 50; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--acid); border-radius: 50%; pointer-events: none; transition: width var(--t-ui) var(--ease-out), height var(--t-ui) var(--ease-out), margin var(--t-ui) var(--ease-out), background var(--t-ui), opacity var(--t-ui); opacity: 0; }
  .js.mo .cursor.is-on { opacity: 1; }
  .js.mo .cursor span { font: 800 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); opacity: 0; transition: opacity var(--t-micro); }
  .js.mo .cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .js.mo .cursor.is-drag { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--acid); }
  .js.mo .cursor.is-drag span { opacity: 1; }
}
.cookie { position: fixed; z-index: 40; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 380px; padding: 16px; background: var(--slab); color: var(--plaster); box-shadow: 0 0 0 1px var(--seam); font-size: 14px; display: grid; gap: 12px; }
.cookie[hidden] { display: none; }
@media (max-width: 899px) {
  .cookie { left: 0; right: 0; bottom: 0; max-width: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); grid-template-columns: 1fr auto; align-items: center; font-size: 13px; box-shadow: 0 -1px 0 var(--seam); }
  .cookie-actions .btn-ghost, .cookie-actions .btn-small { padding: 0 12px; }
  .has-cookie .float-cta { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn-ghost, .btn-small { min-height: 44px; padding: 0 16px; border: 0; font-weight: 800; cursor: pointer; }
.btn-ghost { background: transparent; color: var(--plaster); box-shadow: inset 0 0 0 2px var(--seam); }
.btn-small { background: var(--acid); color: var(--graphite); }
.sheet { max-width: min(560px, calc(100vw - 32px)); border: 0; padding: 28px; background: var(--slab); color: var(--plaster); }
.sheet::backdrop { background: rgb(7 11 15 / .75); }
.sheet h2 { font: 900 32px/1 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.sheet p { margin-bottom: 12px; color: var(--fog); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}