/* =====================================================================================================================
   Golden Hour interior pages (Round 15). One system, a different light on each page:
   For practices = the dark wall with three windows; Halden = Halden's own spruce, ivory and peach; Work = paper with two plates;
   Kyoto Sound = the black stage and its neon; Services, About, Contact = quiet paper. The live Portland light (gh-light.js)
   sets the paper and ink of every [data-light] block and the direction of every shadow, so each page keeps the homepage's sun
   without replaying its time-lapse.
   ===================================================================================================================== */
@font-face { font-family: "Gloock"; src: url("fonts/gloock-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../halden/assets/fonts/familjen-grotesk-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../halden/assets/fonts/newsreader-var-italic.woff2") format("woff2"); font-style: italic; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../halden/assets/fonts/newsreader-var.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }
:root { --gutter: clamp(16px, 4vw, 56px); --sans: "Hanken Grotesk", system-ui, sans-serif; --display: "Gloock", Georgia, serif; --amber: #F2B66A;
  --sx: 16px; --sy: 12px; --so: .24; --sun: 1; --g: 0; --cin: 0;
  --spruce: #1F4237; --ivory: #F3F1EA; --peach: #E3A274; --hink: #16211D;
  --cast: calc(var(--sx) * var(--sun)) calc(var(--sy) * var(--sun)) 44px rgba(20,12,10,calc(var(--so) * var(--sun) * 1.3));
  --rim: inset calc(var(--sx) * -.08) calc(var(--sy) * -.08) 0 rgba(255,226,180,calc(var(--sun) * .5));
  --glow: 0 0 calc(var(--g) * 80px) rgba(255,190,120,calc(var(--g) * .22)); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { --pg: #F1ECE3; --tx: #15110E; --tx2: #4A3F36; --rl: rgba(21,17,14,.18); background: var(--pg); color: var(--tx); font: 17px/1.55 var(--sans); overflow-x: clip; transition: background-color 1.2s ease, color 1.2s ease; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: #15110E; color: #F3EEE6; border-radius: 6px; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- header and footer ---------- */
.sh { position: relative; z-index: 20; color: var(--tx); }
.sh-in { display: flex; align-items: center; gap: 12px 28px; min-height: 76px; }
.sh-mark { font: 400 24px/1 var(--display); letter-spacing: -.01em; text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }
.sh-nav { display: flex; gap: 2px 22px; }
.sh-nav a, .sh-panel nav a, .sf nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--tx2); font-weight: 550; }
.sh-nav a:hover, .sf nav a:hover { color: var(--tx); }
.sh-nav a[aria-current], .sh-panel a[aria-current], .sf nav a[aria-current] { color: var(--tx); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.sh-book, .btn-book { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 99px; background: var(--amber); color: #16120F; font-weight: 650; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 calc(var(--g) * 40px) rgba(255,190,110,calc(var(--g) * .45)); }
.sh-book:hover, .btn-book:hover { background: #F6C788; }
.sh-book:focus-visible, .btn-book:focus-visible { outline: 3px solid var(--tx); outline-offset: 3px; }
.btn-book.lg { min-height: 60px; padding: 0 32px; font-size: 18px; }
.sh-menu { display: none; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--rl); background: transparent; font-weight: 650; cursor: pointer; }
.sh-panel { border-top: 1px solid var(--rl); padding-block: 8px 20px; }
.sh-panel nav { display: grid; }
.sh-panel nav a { min-height: 52px; font-size: 22px; color: var(--tx); border-bottom: 1px solid var(--rl); }
.sh-panel .sh-book-m { margin-top: 18px; color: #16120F; border: 0; font-size: 17px; }
.sf { border-top: 1px solid var(--rl); margin-top: clamp(80px, 9vw, 140px); padding-block: 26px 34px; color: var(--tx2); font-size: 14px; }
.sf-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.sf nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin-right: auto; }
.sf .sh-mark { margin-right: 0; font-size: 20px; color: var(--tx); }
@media (max-width: 900px) {
  .sh-nav, .sh-in > .sh-book { display: none; }
  .sh-menu { display: inline-flex; align-items: center; }
}

/* ---------- shared type and parts ---------- */
.k { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.k span + span { color: var(--tx2); }
.h1 { font: 400 clamp(52px, 8.4vw, 150px)/.92 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.h2 { font: 400 clamp(38px, 4.6vw, 76px)/.98 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.lede { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; max-width: 46ch; color: var(--tx2); }
.p { max-width: 62ch; color: var(--tx2); }
.tl { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tl::after { content: "→"; transition: translate .25s ease; } .tl:hover::after { translate: 4px 0; }
.sec { padding-block: clamp(80px, 9vw, 150px) 0; }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 4vw, 64px); padding-top: 16px; border-top: 1px solid var(--rl); }
.lit { box-shadow: var(--rim), var(--cast), 0 24px 54px rgba(0,0,0,.14), var(--glow); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.note { font-size: 14px; color: var(--tx2); }
[data-in] { transition: translate .9s cubic-bezier(.2, .8, .2, 1); }   /* a short rise, never a fade: text is always at full contrast */
.js [data-in]:not(.in) { translate: 0 22px; }
@media (prefers-reduced-motion: reduce) { .js [data-in]:not(.in) { translate: none; } [data-in] { transition: none; } }

/* =====================================================================================================================
   FOR PRACTICES: the dark wall with three windows. The windows are the three jobs; the one-minute check relights them.
   ===================================================================================================================== */
.p-fp .fp-hero { --tx: #F3EEE6; --tx2: #CFC4B6; --rl: rgba(243,238,230,.16); background: color-mix(in srgb, #1C1511 calc((1 - var(--g)) * 100%), #100C09); color: var(--tx); padding-block: clamp(40px, 6vw, 90px) 0; overflow: clip; margin-top: -76px; padding-top: calc(76px + clamp(40px, 6vw, 90px)); }
.p-fp .sh { --tx: #F3EEE6; --tx2: #CFC4B6; --rl: rgba(243,238,230,.16); }
.p-fp .sh-panel { background: #1C1511; }
.fp-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.fp-top .h1 { text-shadow: 0 18px 30px rgba(0,0,0,.45); font-size: clamp(52px, 6.6vw, 116px); }
.fp-top .lede { margin-bottom: 26px; }
.fp-wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 4vw, 72px); margin-top: clamp(56px, 7vw, 110px); padding-inline: clamp(0px, 4vw, 64px); }
.win { --lit: 1; position: relative; display: grid; gap: 18px; }
.win-pane { position: relative; aspect-ratio: 3 / 4.4; border-radius: 999px 999px 3px 3px; overflow: hidden; background: #0E0A08;
  box-shadow: inset 0 0 0 10px #2A211B, 0 0 0 1px rgba(243,238,230,.08), 0 0 calc(var(--lit) * (40px + var(--g) * 80px)) rgba(255,176,96,calc(var(--lit) * (.12 + var(--g) * .3))); transition: box-shadow 1s ease; }
.win-pane::before { content: ""; position: absolute; inset: 10px; border-radius: 999px 999px 0 0; transition: opacity 1s ease, filter 1s ease; opacity: calc(.12 + var(--lit) * .88);
  background: linear-gradient(180deg, color-mix(in srgb, #FBE3B8 calc((1 - var(--g)) * 100%), #FFB866) 0%, color-mix(in srgb, #F2B66A calc((1 - var(--g)) * 100%), #E07A2E) 62%, color-mix(in srgb, #C9772F calc((1 - var(--g)) * 100%), #8A3A14) 100%); }
.win-pane::after { content: ""; position: absolute; inset: 10px; border-radius: 999px 999px 0 0; background: linear-gradient(90deg, transparent calc(50% - 4px), #2A211B calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)), linear-gradient(180deg, transparent 54%, #2A211B 54% calc(54% + 8px), transparent calc(54% + 8px)); }
.win-floor { position: absolute; left: 6%; right: 6%; top: 100%; height: 34%; transform-origin: 50% 0; transform: perspective(400px) rotateX(58deg) skewX(calc(var(--sx) * -1deg)); opacity: calc(var(--lit) * (.22 + var(--g) * .2));
  background: linear-gradient(180deg, rgba(255,190,110,.9), rgba(255,190,110,0)); border-radius: 2px; pointer-events: none; transition: opacity 1s ease; }
.win h3 { font: 400 clamp(26px, 2.4vw, 38px)/1.05 var(--display); margin-top: clamp(28px, 4vw, 52px); }
.win .ps-k { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.win p { color: var(--tx2); max-width: 32ch; font-size: 16px; }
.fp-hero-foot { margin-top: clamp(48px, 6vw, 90px); padding-block: 22px 32px; border-top: 1px solid var(--rl); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--tx2); font-size: 14px; }

/* the three jobs in full */
.fp-jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.job { display: grid; gap: 14px; align-content: start; padding-top: 18px; border-top: 2px solid var(--tx); }
.job .ps-k { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx2); }
.job h3 { font: 400 clamp(26px, 2.2vw, 34px)/1.05 var(--display); }
.job > p { color: var(--tx2); }
.job ul { display: grid; gap: 0; margin-top: 4px; }
.job li { padding: 10px 0; border-top: 1px solid var(--rl); font-size: 15.5px; line-height: 1.4; }

/* the one-minute check */
.chk { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 96px); align-items: start; }
.chk fieldset { border: 0; display: grid; gap: 0; margin-bottom: 30px; }
.chk legend { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx2); margin-bottom: 8px; }
.q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 22px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rl); }
.q p { font-size: 17px; line-height: 1.4; }
.seg3 { display: inline-flex; padding: 3px; border-radius: 99px; border: 1px solid var(--rl); }
.seg3 label { position: relative; }
.seg3 input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg3 span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px; font-size: 14px; font-weight: 650; color: var(--tx2); white-space: nowrap; }
.seg3 input:checked + span { background: var(--tx); color: var(--pg); }
.seg3 input:focus-visible + span { outline: 3px solid var(--tx); outline-offset: 2px; }
.chk-out { position: sticky; top: 24px; border-radius: 6px; padding: clamp(24px, 3vw, 36px); background: #1C1511; color: #F3EEE6; --tx2: #CFC4B6; box-shadow: var(--cast), 0 30px 60px rgba(0,0,0,.18), var(--glow); }
.chk-out .k { color: #F3EEE6; }
.chk-wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 18px; }
.chk-wins .win { gap: 10px; }
.chk-wins .win-pane { box-shadow: inset 0 0 0 6px #2A211B, 0 0 calc(var(--lit) * (24px + var(--g) * 40px)) rgba(255,176,96,calc(var(--lit) * (.12 + var(--g) * .3))); }
.chk-wins .win-pane::before, .chk-wins .win-pane::after { inset: 6px; }
.chk-wins b { font: 400 18px/1.1 var(--display); }
.chk-wins small { font-size: 13px; color: #CFC4B6; }
.chk-say { font: 400 clamp(24px, 2.2vw, 32px)/1.15 var(--display); margin-bottom: 10px; }
.chk-out p { color: #CFC4B6; }
.chk-out .btn-book { margin-top: 20px; }
.chk-out .note { color: #CFC4B6; margin-top: 12px; }

/* the patient path, in detail */
.path { border-top: 1px solid var(--rl); }
.path li { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); gap: 10px clamp(18px, 2.4vw, 36px); padding: 26px 0; border-bottom: 1px solid var(--rl); }
.path h3 { font: 400 clamp(28px, 2.6vw, 40px)/1 var(--display); display: flex; gap: 12px; align-items: baseline; }
.path h3 i { font: 700 13px var(--sans); letter-spacing: .14em; font-style: normal; color: var(--tx2); }
.path li > div > b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); margin-bottom: 6px; }
.path li > div > p { font-size: 16px; line-height: 1.45; }
.path-head { display: contents; }

/* experience and start */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 110px); align-items: start; }
.steps { counter-reset: s; display: grid; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--rl); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 700 13px var(--sans); letter-spacing: .14em; color: var(--tx2); padding-top: 5px; }
.steps b { font: 400 22px/1.2 var(--display); display: block; margin-bottom: 4px; }
.steps p { color: var(--tx2); }
.endcta { margin-top: clamp(80px, 9vw, 150px); padding: clamp(36px, 5vw, 80px); border-radius: 6px; background: #1C1511; color: #F3EEE6; display: grid; gap: 20px; justify-items: start; box-shadow: var(--cast), var(--glow); }
.endcta .h2 { color: #F3EEE6; } .endcta p { color: #CFC4B6; max-width: 46ch; }

/* =====================================================================================================================
   HALDEN: the concept's own world. Golden Hour's light may fall on it (shadows by day, a deeper spruce at night);
   it never recolours the brand.
   ===================================================================================================================== */
.p-hd { font-family: "Familjen Grotesk", var(--sans); }
.p-hd .sh, .p-hd .sf { font-family: var(--sans); }
.hd-em { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; color: var(--peach); letter-spacing: -.01em; }
.hd-hero { padding-block: clamp(40px, 5vw, 80px) 0; }
.hd-hero h1 { font: 600 clamp(72px, 13vw, 240px)/.86 "Familjen Grotesk", var(--sans); letter-spacing: -.055em; margin-top: 22px; }
.hd-hero-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 96px); align-items: end; margin-top: clamp(32px, 4vw, 56px); }
.hd-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 22px; font-size: 15px; }
.hd-meta dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); padding-top: 3px; }
.hd-disc { margin-top: 26px; padding: 16px 18px; border-radius: 6px; border: 1px solid var(--rl); font-size: 15px; color: var(--tx2); }
.hd-disc b { color: var(--tx); }
.hd-hero-art { position: relative; }
.hd-hero-art .hsb { border-radius: 6px; }
.hd-sunmark { position: absolute; right: -2%; top: -26%; width: 28%; color: var(--ivory); filter: drop-shadow(0 10px 20px rgba(0,0,0,.3)); }
.hd-sunmark .arc { transform: translateY(5px); opacity: .2; transition: transform 1.8s cubic-bezier(.3, 1, .4, 1) .4s, opacity 1.6s ease .4s; }
.in .hd-sunmark .arc, .hd-sunmark.in .arc { transform: none; opacity: 1; }
.hd-light { --pg: var(--ivory); --tx: var(--hink); --tx2: #44544D; --rl: rgba(22,33,29,.16); background: var(--ivory); color: var(--tx); padding-block: clamp(80px, 9vw, 150px); margin-top: clamp(80px, 9vw, 150px); }
.hd-light + .hd-light { margin-top: 0; padding-top: 0; }
.hd-worries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); }
.hd-worries figure { display: grid; gap: 18px; }
.hd-worries .hs { border-radius: 9% / 4.2%; box-shadow: 0 0 0 6px #111, var(--cast), 0 24px 50px rgba(0,0,0,.18); }
.hd-worries figcaption b { display: block; font: 600 clamp(22px, 2vw, 30px)/1.1 "Familjen Grotesk", var(--sans); letter-spacing: -.02em; }
.hd-worries figcaption span { color: var(--tx2); font-size: 15.5px; }
.hd-id { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 96px); align-items: center; }
.hd-mark-big { aspect-ratio: 1; border-radius: 6px; background: var(--spruce); color: var(--ivory); display: grid; place-items: center; position: relative; overflow: hidden; }
.hd-mark-big svg { width: 62%; overflow: visible; }
.hd-mark-big .guide { fill: none; stroke: rgba(243,241,234,.22); stroke-width: .25; stroke-dasharray: 1 1; }
.hd-mark-big .arc { transform: translateY(4px); opacity: .25; transition: transform 1.8s cubic-bezier(.3, 1, .4, 1) .3s, opacity 1.6s ease .3s; }
.hd-mark-big.in .arc { transform: none; opacity: 1; }
.hd-mark-big figcaption { position: absolute; left: 20px; bottom: 16px; font: 600 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(243,241,234,.7); }
.hd-pal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.hd-pal li { aspect-ratio: 3 / 4; border-radius: 6px; background: var(--c); padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; font: 600 14px/1.25 "Familjen Grotesk", var(--sans); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(22,33,29,.12); }
.hd-pal li:nth-child(2), .hd-pal li:nth-child(3) { color: var(--hink); }
.hd-pal small { font: 500 12px ui-monospace, Menlo, monospace; opacity: .8; }
.hd-type { margin-top: 26px; display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--rl); }
.hd-type p:first-child { font: 600 clamp(40px, 4vw, 64px)/.95 "Familjen Grotesk", var(--sans); letter-spacing: -.045em; }
.hd-type small { color: var(--tx2); }
.hd-camp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "bb bb st" "pa pb st"; gap: clamp(14px, 1.8vw, 28px); align-items: start; }
.hd-camp .story { grid-area: st; }
.story { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; container-type: inline-size; background: var(--spruce); color: #F8F8F4; }
.story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,33,29,.35), transparent 26%, transparent 42%, rgba(22,33,29,.92) 82%); }
.story p { position: absolute; left: 8cqw; right: 8cqw; bottom: 25cqw; z-index: 1; font: 600 15cqw/.92 "Familjen Grotesk", var(--sans); letter-spacing: -.045em; }
.story em { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; color: var(--peach); }
.story .cta { position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw; z-index: 1; padding: 3.4cqw 0; border-radius: 99px; background: var(--peach); color: var(--hink); text-align: center; font: 600 5.2cqw/1 "Familjen Grotesk", var(--sans); }
.story .bar { position: absolute; left: 5cqw; right: 5cqw; top: 4cqw; z-index: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.35); }
.story .bar::after { content: ""; position: absolute; inset: 0; right: 60%; background: #fff; border-radius: 99px; }
.story .tag { position: absolute; left: 5cqw; top: 9cqw; z-index: 1; font: 700 3.6cqw/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 1.6cqw 3cqw; border-radius: 99px; background: rgba(11,11,12,.6); }
.hd-camp .r12-pst-a { grid-area: pa; } .hd-camp .r12-pst-b { grid-area: pb; }
.hd-camp-bb { grid-area: bb; } .hd-camp-bb .hsb { border-radius: 6px; }
.r12-pst { aspect-ratio: 2 / 3; container-type: inline-size; border-radius: 6px; padding: 10% 9% 8%; display: flex; flex-direction: column; font-family: "Familjen Grotesk", var(--sans); }
.r12-pst p + p { margin-top: 7cqw; }
.r12-pst p { font-size: 11.5cqw; font-weight: 600; line-height: .98; letter-spacing: -.035em; }
.r12-pst em { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.r12-pst span { margin-top: auto; font-size: 5.4cqw; font-weight: 600; letter-spacing: .02em; }
.r12-pst-a { background: var(--ivory); color: var(--hink); } .r12-pst-a em { color: #9A5328; }
.r12-pst-b { background: var(--peach); color: var(--hink); } .r12-pst-b em { color: var(--hink); }
.hd-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
.hd-why li { padding-top: 14px; border-top: 1px solid var(--rl); font-size: 16px; color: var(--tx2); }
.hd-why b { display: block; color: var(--tx); font-size: 18px; margin-bottom: 4px; }

/* Out of home, around the clock: drag the time and the campaign is lit as the street would light it */
.lt { margin-top: clamp(40px, 5vw, 72px); }
.lt-scene { position: relative; aspect-ratio: 16 / 8; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, var(--sky1, #9CC3D8), var(--sky2, #F2D2A6) 72%); transition: background .2s linear; }
.lt-sun { position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; left: var(--sunx, 70%); top: var(--suny, 30%); translate: -50% -50%; background: radial-gradient(circle, #FFF3D6 0 40%, rgba(255,214,150,.0) 70%); opacity: var(--sunv, 1); filter: blur(1px); }
.lt-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: var(--ground, #8F8471); }
.lt-bb { position: absolute; left: 50%; bottom: 20%; width: 52%; translate: -50% 0; }
.lt-bb .hsb { border-radius: 4px; filter: brightness(var(--bbl, 1)); box-shadow: 0 0 0 6px #2B2A27, 0 0 calc(var(--night, 0) * 90px) rgba(255,226,180,calc(var(--night, 0) * .55)); }
.lt-posts { position: absolute; left: 30%; right: 30%; top: 100%; height: 62%; background: linear-gradient(90deg, transparent 18%, #2B2A27 18% 22%, transparent 22% 78%, #2B2A27 78% 82%, transparent 82%); }
.lt-shadow { position: absolute; left: 50%; bottom: 4%; width: 54%; height: 12%; translate: calc(-50% + var(--shx, 0px)) 0; transform: skewX(var(--shk, -30deg)); background: rgba(20,14,8,var(--sha, .35)); filter: blur(3px); border-radius: 3px; }
.lt-veil { position: absolute; inset: 0; background: rgba(10,14,22,var(--veil, 0)); pointer-events: none; }
.lt-bb { z-index: 2; }
.lt-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 18px; font-size: 14px; font-weight: 650; color: var(--tx2); }
.lt-ctl input { width: 100%; min-height: 44px; accent-color: var(--spruce); }
.lt-ctl output { min-width: 6.5em; text-align: right; color: var(--tx); font-variant-numeric: tabular-nums; }

/* the website */
.hd-web { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px clamp(32px, 5vw, 96px); align-items: center; }
.browser { border-radius: 10px; overflow: hidden; background: #2B2A27; padding-top: 30px; position: relative; }
.browser::before { content: ""; position: absolute; left: 14px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: #E3A274; box-shadow: 14px 0 0 #C4CFC1, 28px 0 0 #C4CFC1; }
.hd-built { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 32px clamp(24px, 4vw, 72px); align-items: center; }

/* Halden screens and the wireframe comparison, as on the homepage */
@property --split { syntax: "<number>"; inherits: true; initial-value: 100; }
.rb-wf-row { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1fr) minmax(0, .74fr); gap: clamp(14px, 2vw, 32px); align-items: center; }
.rb-wf-side .hs, .rb-wf-main { border-radius: 9% / 4.2%; box-shadow: 0 0 0 6px #111, var(--cast), 0 0 calc(var(--g) * 70px) rgba(220,236,226,calc(var(--g) * .22)); }
.rb-wf-main { position: relative; aspect-ratio: 390 / 844; overflow: hidden; background: #ECEBE7; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.rb-wf-wire { position: absolute; inset: 0; container-type: inline-size; }
.rb-wf-wire span { position: absolute; border-radius: 3cqw; background: #D9D8D3; outline: 1px dashed #A9A7A0; outline-offset: -1px; }
.rb-wf-wire .w-top { left: 6%; right: 6%; top: 6%; height: 4%; } .rb-wf-wire .w-img { left: 0; right: 0; top: 12%; height: 46%; border-radius: 0; background: repeating-linear-gradient(45deg, #D9D8D3 0 10px, #E3E2DD 10px 20px); }
.rb-wf-wire .w-l1 { left: 6%; width: 40%; top: 62%; height: 2%; } .rb-wf-wire .w-l2 { left: 6%; width: 78%; top: 66%; height: 6.5%; } .rb-wf-wire .w-l3 { left: 6%; width: 64%; top: 75%; height: 3%; }
.rb-wf-wire .w-b1 { left: 6%; width: 54%; top: 81%; height: 5%; border-radius: 99px; } .rb-wf-wire .w-b2 { left: 63%; width: 31%; top: 81%; height: 5%; border-radius: 99px; } .rb-wf-wire .w-bar { left: 0; right: 0; bottom: 0; height: 9%; border-radius: 0; }
.rb-wf-wire i { position: absolute; left: 6%; top: 14%; font-style: normal; font-size: 3.4cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6E6C66; }
.rb-wf-fin { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split) * 1%) 0 0); }
.rb-wf-line { position: absolute; top: 0; bottom: 0; left: calc(var(--split) * 1%); width: 2px; margin-left: -1px; background: #F2B66A; box-shadow: 0 0 12px rgba(242,182,106,.8); opacity: calc(min(1, (100 - var(--split)) * 2) * min(1, var(--split) * 2)); }
.rb-wf-line b { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #F2B66A; box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 0 4px rgba(242,182,106,.28); }
.rb-wf-line b::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 18px/1 var(--sans); color: #16120F; letter-spacing: 2px; }
.rb-wf.run .rb-wf-main { animation: wfSweep 3.4s cubic-bezier(.6, 0, .25, 1) .3s both; }
@keyframes wfSweep { 0% { --split: 0; } 72% { --split: 100; } 100% { --split: 64; } }
.rb-wf-ctl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 26px auto 0; max-width: 420px; font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--tx2); }
.rb-wf-ctl input { width: 100%; min-height: 44px; accent-color: #E39A4C; }
@media (prefers-reduced-motion: reduce) { .rb-wf.run .rb-wf-main { animation: none; } }

/* How it's built: real lines applied one by one */
.cx { border-radius: 10px; overflow: hidden; background: #0F1513; color: #C4CFC1; container-type: inline-size; display: grid; box-shadow: var(--cast), 0 24px 50px rgba(0,0,0,.2); }
.cx-code { padding: 6cqw 6cqw 3cqw; display: grid; gap: 1.2cqw; font: 500 clamp(12px, 2.4cqw, 15px)/1.5 ui-monospace, "SF Mono", Menlo, monospace; counter-reset: ln; }
.cx-code li { position: relative; padding-left: 2.4em; opacity: .32; transition: opacity .4s ease; word-break: break-word; }
.cx-code li::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; color: #5C6B64; }
.cx-code i { font-style: normal; color: #E3A274; } .cx-code u { text-decoration: none; color: #8FB8A6; } .cx-code s { text-decoration: none; color: #F2E3C8; }
.cx[data-s="1"] li:nth-child(-n + 1), .cx[data-s="2"] li:nth-child(-n + 2), .cx[data-s="3"] li:nth-child(-n + 3), .cx[data-s="4"] li:nth-child(-n + 4), .cx[data-s="5"] li:nth-child(-n + 5), .cx[data-s="6"] li:nth-child(-n + 6), .cx[data-s="7"] li { opacity: 1; }
.cx-out { margin: 0 4cqw; border-radius: 2cqw; background: var(--spruce); color: #F8F8F4; padding: 6cqw; display: grid; justify-items: start; gap: 4cqw; min-height: 34cqw; align-content: center; }
.cx-out .o-h { font: 400 4cqw/1.1 Georgia, serif; transition: font-size .6s cubic-bezier(.3, 1.2, .5, 1), letter-spacing .6s ease; }
.cx-out .o-h em { font-style: normal; transition: color .4s ease; }
.cx-out .o-b { opacity: 0; font: 400 2.8cqw/1.2 Georgia, serif; transition: opacity .4s ease, background-color .5s ease, padding .5s ease; }
.cx:is([data-s="2"], [data-s="3"], [data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) .o-h, .cx:is([data-s="6"], [data-s="7"]) .o-b { font-family: "Familjen Grotesk", var(--sans); }
.cx:is([data-s="3"], [data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) .o-h { font-weight: 600; font-size: 9cqw; line-height: .9; letter-spacing: -.045em; }
.cx:is([data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) .o-h em { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; }
.cx:is([data-s="5"], [data-s="6"], [data-s="7"]) .o-h em { color: #E3A274; }
.cx:is([data-s="6"], [data-s="7"]) .o-b { opacity: 1; }
.cx[data-s="7"] .o-b { background: #E3A274; color: #16211D; border-radius: 99px; padding: 2cqw 3.4cqw; font-weight: 600; }
.cx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 4cqw 6cqw 5cqw; font-size: 13px; color: #9FB0A8; }
.cx-foot button { min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(196,207,193,.4); background: transparent; color: #E9EFE6; font-weight: 600; cursor: pointer; }
.hd-measure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 44px); }
.hd-measure li { padding-top: 14px; border-top: 1px solid var(--rl); }
.hd-measure b { display: block; font: 600 clamp(20px, 1.8vw, 26px)/1.1 "Familjen Grotesk", var(--sans); margin-bottom: 6px; }
.hd-measure span { color: var(--tx2); font-size: 15.5px; }
.hd-credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; font-size: 14.5px; color: var(--tx2); }
.hd-credits b { display: block; color: var(--tx); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.next { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; padding-top: 22px; border-top: 1px solid var(--rl); }
.next a.big { font: 400 clamp(40px, 5vw, 84px)/1 var(--display); text-decoration: none; }
.next a.big:hover { text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 2px; }

/* =====================================================================================================================
   WORK: two plates, each in its own project's light
   ===================================================================================================================== */
.plates { display: grid; gap: clamp(28px, 3vw, 44px); }
.plate { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px clamp(28px, 4vw, 72px); align-items: center; padding: clamp(28px, 4vw, 64px); border-radius: 10px; text-decoration: none; color: var(--c-tx); background: var(--c-bg); box-shadow: var(--cast), 0 30px 70px rgba(0,0,0,.14), var(--glow); overflow: hidden; isolation: isolate; }
.plate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(118deg, rgba(255,240,214,calc(var(--sun) * (1 - var(--g)) * .14)) 0%, transparent 46%); pointer-events: none; }
.plate .k span + span { color: var(--c-tx2); }
.plate h2 { font: 400 clamp(52px, 6.4vw, 112px)/.9 var(--display); letter-spacing: -.02em; margin: 18px 0 14px; }
.plate p { color: var(--c-tx2); max-width: 40ch; }
.plate .tl { margin-top: 18px; }
.plate:focus-visible { outline: 3px solid var(--tx); outline-offset: 6px; }
.plate:hover .tl::after { translate: 4px 0; }
.plate-hd { --c-bg: var(--spruce); --c-tx: var(--ivory); --c-tx2: #C4CFC1; }
.plate-hd h2 { font: 600 clamp(52px, 6.4vw, 112px)/.9 "Familjen Grotesk", var(--sans); letter-spacing: -.05em; }
.plate-hd-art { position: relative; }
.plate-hd-art .hsb { border-radius: 6px; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.plate-hd-art .hs { position: absolute; right: -4%; bottom: -22%; width: 26%; border-radius: 9% / 4.2%; box-shadow: 0 0 0 5px #0C1512, 0 24px 50px rgba(0,0,0,.4); }
.plate-ks { --c-bg: #0C0A10; --c-tx: #F3EEE6; --c-tx2: #CFC4B6; }
.plate-ks-art { display: grid; justify-items: center; gap: clamp(18px, 3vw, 40px); padding-block: 8px; }
.plate-ks-art .mk { width: 66%; height: auto; filter: drop-shadow(0 0 6px rgba(255,90,220,.75)) drop-shadow(0 0 28px rgba(255,40,200,calc(.25 + var(--g) * .5))); }
.plate-ks-art .sls { display: flex; justify-content: center; width: 100%; }
.plate-ks-art .sl { position: relative; width: 30%; aspect-ratio: 1; margin-inline: -1.5%; border-radius: 2px; box-shadow: 0 18px 36px rgba(0,0,0,.5); }
.plate-ks-art .sl:nth-child(1) { rotate: -6deg; } .plate-ks-art .sl:nth-child(2) { z-index: 2; translate: 0 -8%; } .plate-ks-art .sl:nth-child(3) { rotate: 6deg; }
.plate-ks-art .sl img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.plate-ks-art .sl::before { content: ""; position: absolute; inset: 4%; z-index: -1; border-radius: 50%; translate: 0 -22%; background: repeating-radial-gradient(circle, #141416 0 1.3px, #202024 1.9px 3.2px); }

/* =====================================================================================================================
   KYOTO SOUND: the black stage
   ===================================================================================================================== */
.p-ks { --tx: #F3EEE6; --tx2: #CFC4B6; --rl: rgba(243,238,230,.16); background: #0C0A10; color: var(--tx); }
.p-ks .sh-panel { background: #0C0A10; }
.ks-hero { padding-block: clamp(30px, 4vw, 60px) 0; }
.ks-sign { width: min(760px, 100%); height: auto; margin: clamp(40px, 6vw, 90px) auto 0; filter: drop-shadow(0 0 6px rgba(255,110,225,.9)) drop-shadow(0 0 34px rgba(255,40,200,.6)) drop-shadow(0 0 90px rgba(255,40,200,.3)); }
.ks-rel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.ks-rel li { display: grid; gap: 14px; }
.ks-sl { position: relative; aspect-ratio: 1; }
.ks-sl img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.ks-sl::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: repeating-radial-gradient(circle, #141416 0 1.3px, #202024 1.9px 3.2px); translate: 0 -10%; transition: translate .6s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 30px rgba(255,60,200,.25); }
.ks-rel li:hover .ks-sl::before { translate: 0 -34%; }
.ks-rel b { display: block; font-size: 17px; } .ks-rel span { color: var(--tx2); font-size: 14px; }
.ks-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(28px, 5vw, 80px); }
.ks-rec { width: clamp(170px, 22vw, 280px); aspect-ratio: 1; border-radius: 50%; position: relative; background: repeating-radial-gradient(circle, #121214 0 1.2px, #1B1B1E 1.8px 3.2px); box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 60px rgba(242,182,106,.12); animation: ksSpin 20s linear infinite; }
.ks-rec img { position: absolute; inset: 33%; width: 34%; height: 34%; object-fit: cover; border-radius: 50%; }
@keyframes ksSpin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ks-rec { animation: none; } }
.ks-big { font: 400 clamp(64px, 8vw, 140px)/.9 var(--display); }

/* =====================================================================================================================
   SERVICES, ABOUT, CONTACT: quiet paper
   ===================================================================================================================== */
.svc-g { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 110px); margin-top: clamp(48px, 5vw, 80px); }
.svc-g + .svc-g { margin-top: clamp(64px, 7vw, 110px); }
.svc-g > div:first-child { display: grid; gap: 14px; align-content: start; }
.svc-l li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 28px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--rl); }
.svc-l li:last-child { border-bottom: 1px solid var(--rl); }
.svc-l b { font: 400 clamp(22px, 2vw, 30px)/1.1 var(--display); }
.svc-l span { color: var(--tx2); }
.callout { margin-top: clamp(64px, 7vw, 110px); padding: clamp(26px, 3vw, 44px); border-radius: 6px; background: #1C1511; color: #F3EEE6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; box-shadow: var(--cast), var(--glow); }
.callout p { font: 400 clamp(24px, 2.4vw, 36px)/1.15 var(--display); max-width: 26ch; }
.callout .tl { color: #F3EEE6; }
.ab-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 110px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.ab-g p + p { margin-top: 16px; }
.ab-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 26px; padding-top: 18px; border-top: 1px solid var(--rl); }
.ab-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); padding-top: 4px; }
.ct-card { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 90px); align-items: start; }
.ct-book { padding: clamp(28px, 4vw, 56px); border-radius: 6px; background: #F7F1E6; color: #16120F; --tx2: #4A3F36; box-shadow: var(--rim), var(--cast), 0 30px 70px rgba(0,0,0,.14), 0 0 calc(var(--g) * 140px) rgba(255,196,120,calc(var(--g) * .35)); display: grid; gap: 18px; justify-items: start; }
.ct-book .h2 { color: #16120F; } .ct-book p { color: #4A3F36; }
.ct-alt summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font: 400 26px var(--display); }
.ct-form { display: grid; gap: 14px; margin-top: 18px; }
.ct-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.ct-form input, .ct-form select, .ct-form textarea { font: inherit; padding: 12px 14px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--tx) 45%, transparent); background: color-mix(in srgb, var(--pg) 70%, #fff); color: var(--tx); }
.ct-form textarea { min-height: 140px; }
.ct-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-form .hp { display: none; }   /* Netlify's honeypot: hidden from people, still filled in by bots */
.ct-form .btn-fin { justify-self: start; min-height: 48px; padding: 0 22px; border-radius: 99px; border: 0; background: var(--tx); color: var(--pg); font-weight: 650; cursor: pointer; }
.ct-form .fine { font-size: 13px; color: var(--tx2); }
.ct-mail { margin-top: 26px; color: var(--tx2); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ct-mail button { min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rl); background: transparent; cursor: pointer; font-weight: 600; }

/* ---------- phones: their own compositions ---------- */
@media (max-width: 860px) {
  .fp-top, .chk, .duo, .hd-hero-g, .hd-id, .hd-web, .hd-built, .plate, .svc-g, .ab-g, .ct-card { grid-template-columns: minmax(0, 1fr); }
  .fp-wins { gap: 12px; padding-inline: 0; }
  .win h3 { font-size: 20px; margin-top: 24px; } .win p { display: none; } .win .ps-k { font-size: 10px; letter-spacing: .1em; }
  .fp-jobs { grid-template-columns: minmax(0, 1fr); }
  .q { grid-template-columns: minmax(0, 1fr); }
  .seg3 span { padding: 0 12px; }
  .chk-out { position: static; }
  .path li { grid-template-columns: minmax(0, 1fr); }
  .hd-worries { grid-template-columns: minmax(0, 1fr); max-width: 300px; margin-inline: auto; }
  .hd-camp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "bb bb" "pa pb" "st st"; }
  .hd-camp .story { width: min(280px, 80%); justify-self: center; }
  .hd-why, .hd-measure, .hd-credits { grid-template-columns: minmax(0, 1fr); }
  .lt-scene { aspect-ratio: 4 / 4.2; } .lt-bb { width: 84%; } .lt-sun { width: 14%; }
  .rb-wf-row { grid-template-columns: minmax(0, 1fr); justify-items: center; } .rb-wf-side { display: none; } .rb-wf-main { width: min(76vw, 320px); }
  .hd-sunmark { width: 20%; top: auto; bottom: -12%; right: 3%; }
  .plate-hd-art .hs { width: 30%; bottom: -14%; right: 0; }
  .ks-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-l li { grid-template-columns: minmax(0, 1fr); }
  .ct-form .row2 { grid-template-columns: minmax(0, 1fr); }
  .btn-book.lg { width: 100%; }
}

/* =====================================================================================================================
   Golden Hour light system (Round 16): window light, paper grain and night glow, shared by the homepage and every page.
   The pane is a sharp-edged patch of sun with cross mullions. Its colour, strength, angle and length come from GHLight
   (--beam-*); it softens as the sun drops (--beam-blur) and disappears after sunset. Sections opt in with data-beam.
   ===================================================================================================================== */
[data-beam] { position: relative; isolation: isolate; overflow: clip; }   /* clip, not hidden: sticky children keep working */
:where([data-beam]) { background-color: var(--pg); }   /* the pane blends with the section's own paper */
.gh-beam { position: absolute; z-index: -1; pointer-events: none; top: calc(var(--i, 0) * 4% - 6%); left: calc(var(--beam-x, 46%) + var(--i, 0) * 6% - 3%);
  width: min(52%, 760px); height: calc(min(80vh, 760px) * var(--beam-l, 1)); max-height: 110%;
  transform: skewX(var(--beam-k, -18deg)); transform-origin: 50% 0; opacity: var(--beam-a, 0); transition: opacity 1.4s ease; }
.gh-beam i { position: absolute; inset: 0; display: block; filter: blur(var(--beam-blur, 2px));
  background: linear-gradient(180deg, color-mix(in srgb, var(--beam-c, #fff) 92%, transparent), color-mix(in srgb, var(--beam-c, #fff) 55%, transparent) 70%, transparent);
  -webkit-mask: linear-gradient(90deg, #000 0 47.5%, transparent 47.5% 52.5%, #000 52.5%), linear-gradient(180deg, #000 0 46%, transparent 46% 50%, #000 50%);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #000 0 47.5%, transparent 47.5% 52.5%, #000 52.5%) intersect, linear-gradient(180deg, #000 0 46%, transparent 46% 50%, #000 50%);
  mix-blend-mode: soft-light; }
html[data-ink="light"] .gh-beam { opacity: 0; }
/* the paper's grain: the light needs a surface to land on */
.gh-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: calc(.07 - var(--g, 0) * .04);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .25  0 0 0 .9 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); }
.gh-bio { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s ease; }
@media (prefers-reduced-motion: reduce) { .gh-beam { transition: none; } }
/* on dark brand grounds (Halden's spruce, the practice wall) the light only grazes: text keeps its contrast */
.r15-hd > .gh-beam, .p-hd .gh-beam, .fp-hero .gh-beam { opacity: calc(var(--beam-a, 0) * .28); }

/* =====================================================================================================================
   Round 16 interior pages, on p15/sub.css and the shared light system (light.css).
   ===================================================================================================================== */
body.sub { background-color: var(--pg); }
/* pages that live in a brand's own world keep its ground; the light still sets shadows, glow and night */
body.p-hd { --pg: color-mix(in srgb, #1F4237 calc((1 - var(--g)) * 100%), #0F221C); --tx: #F3F1EA; --tx2: #C4CFC1; --rl: rgba(243,241,234,.16); }
body.p-ks { --pg: #0C0A10; }
/* About is lit continuously by scrolling, so its colours follow the scroll instantly rather than fading behind it */
body.p-ab, body.p-ab * { transition-property: none !important; }
main, .sf { position: relative; z-index: 2; }
.sh { position: relative; z-index: 4; }   /* above the page, which runs under it on For practices */
.draft { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; border: 1px dashed currentColor; font-size: 12px; font-weight: 650; letter-spacing: .04em; }

/* ---------- For practices: each window frames its job ---------- */
.win-scene { position: absolute; inset: 10px; z-index: 1; width: calc(100% - 20px); height: calc(100% - 20px); }
.win-scene * { fill: none; stroke: rgba(70,34,10,.5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.win-scene .riv { stroke: rgba(70,34,10,.22); stroke-width: 9; }
.win-scene .pin { fill: rgba(120,46,12,.55); stroke: none; } .win-scene .pin-c { fill: #FBE3B8; stroke: none; }
.win-scene .ph { fill: rgba(70,34,10,.18); } .win-scene .ph-h, .win-scene .ph-l { fill: rgba(70,34,10,.45); stroke: none; } .win-scene .ph-b { fill: rgba(120,46,12,.6); stroke: none; }
.win-scene .bar { fill: rgba(70,34,10,.16); stroke: none; } .win-scene .ln { stroke: rgba(120,46,12,.75); stroke-width: 2.2; } .win-scene .dot { fill: rgba(120,46,12,.85); stroke: none; }
.win-pane::after { z-index: 2; }
.win-scene { opacity: calc(.25 + var(--lit, 1) * .75); }

/* ---------- For practices: bring patients into the light ---------- */
.fl { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px clamp(24px, 3vw, 48px); align-items: start; }
.fl-stage { position: relative; aspect-ratio: 16 / 11; border-radius: 10px; overflow: hidden; background: radial-gradient(120% 90% at 85% 50%, #2A1E16, #120E0B 70%);
  box-shadow: var(--rim), var(--cast), 0 30px 70px rgba(0,0,0,.2), 0 0 calc(var(--g) * 80px) rgba(255,180,100,calc(var(--g) * .25)); }
.fl-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fl-lab { display: none; }
.fl-side { display: grid; gap: 18px; }
.fl-sw { border: 0; display: grid; gap: 2px; }
.fl-sw legend { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx2); margin-bottom: 6px; }
.fl-sw label { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--rl); cursor: pointer; }
.fl-sw input { position: absolute; opacity: 0; width: 46px; height: 28px; margin: 0; cursor: pointer; }
.fl-sw label::before { content: ""; width: 46px; height: 28px; border-radius: 99px; background: color-mix(in srgb, var(--tx) 22%, transparent); transition: background-color .25s ease; grid-row: 1; grid-column: 1; }
.fl-sw label::after { content: ""; position: absolute; left: 3px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--pg); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: translate .25s cubic-bezier(.3, 1.4, .5, 1); }
.fl-sw label:has(input:checked)::before { background: #E39A4C; }
.fl-sw label:has(input:checked)::after { translate: 18px 0; }
.fl-sw label:has(input:focus-visible)::before { outline: 3px solid var(--tx); outline-offset: 2px; }
.fl-sw span { display: grid; gap: 2px; grid-column: 2; } .fl-sw b { font-weight: 650; font-size: 16px; } .fl-sw small { font-size: 14px; color: var(--tx2); }
.fl-read { padding: 18px; border-radius: 8px; border: 1px solid var(--rl); background: color-mix(in srgb, var(--pg) 70%, #fff 30%); }
html[data-ink="light"] .fl-read { background: color-mix(in srgb, var(--pg) 80%, #000 20%); }
.fl-read p:first-child { font-size: 17px; line-height: 1.45; }
.fl-mix { height: 10px; border-radius: 99px; overflow: hidden; margin: 14px 0 8px; background: color-mix(in srgb, var(--tx) 14%, transparent); }
.fl-mix-bar { display: flex; height: 100%; }
.fl-mix-bar i { display: block; height: 100%; transition: flex-grow .6s ease; }
.fl-all { justify-self: start; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--rl); background: transparent; font-weight: 650; cursor: pointer; }
.fl-all:focus-visible { outline: 3px solid var(--tx); outline-offset: 3px; }

/* the check's plan */
.chk-plan { display: grid; gap: 8px; margin-top: 16px; counter-reset: c; }
.chk-plan li { counter-increment: c; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.4; color: #F3EEE6; padding-top: 8px; border-top: 1px solid rgba(243,238,230,.16); }
.chk-plan li::before { content: counter(c); font: 400 18px/1.2 var(--display); color: #F2B66A; }
.chk-plan li small { display: block; color: #CFC4B6; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.fp-exp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 110px); align-items: end; padding-top: 18px; border-top: 1px solid var(--rl); }
.fp-exp .tl { margin-top: 10px; }

/* ---------- About: a portrait frame waiting for its photograph, and the day ---------- */
.ab-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 40px clamp(32px, 6vw, 110px); align-items: end; padding-block: clamp(40px, 5vw, 80px) clamp(40px, 6vw, 90px); }
.ab-photo { display: grid; gap: 12px; }
.ab-frame { aspect-ratio: 4 / 5; border-radius: 4px; display: grid; place-items: end start; padding: 18px; color: var(--tx2); font-size: 13px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(calc(150deg + var(--beam-k, 0deg)), color-mix(in srgb, var(--beam-c, #fff) 40%, transparent) 0 38%, transparent 62%), color-mix(in srgb, var(--pg) 86%, var(--tx) 14%);
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--pg) 80%, #fff 20%), inset 0 0 0 11px var(--rl), var(--cast); }
.ab-frame.ab-has { position: relative; padding: 10px; overflow: hidden; }
.ab-frame.ab-has img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block; }
.ab-frame.ab-has::after { content: ""; position: absolute; inset: 10px; pointer-events: none; mix-blend-mode: soft-light;   /* the page's light falls on the photograph too */
  background: linear-gradient(calc(150deg + var(--beam-k, 0deg)), color-mix(in srgb, var(--beam-c, #fff) 70%, transparent) 0 30%, transparent 58%), linear-gradient(0deg, rgba(10,14,30,calc(var(--g, 0) * .45)), transparent); }
.ab-photo figcaption { font-size: 14px; color: var(--tx2); }
.ab-light { display: inline-flex; gap: 8px; align-items: center; }
.ab-light::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E39A4C; box-shadow: 0 0 0 4px rgba(227,154,76,.2); }
.ab-day { counter-reset: d; }
.ab-ch { min-height: 78vh; display: grid; align-items: center; padding-block: clamp(48px, 6vw, 90px); border-top: 1px solid var(--rl); }
.ab-ch-g { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 110px); align-items: start; }
.ab-t { display: grid; gap: 6px; position: sticky; top: 18vh; }
.ab-t span:first-child { font: 400 clamp(28px, 2.8vw, 44px)/1 var(--display); }
.ab-t span + span { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx2); }
.ab-ch .h2 { margin-bottom: 18px; }
.ab-ch .p { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; }
.ab-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 16px; }
.ab-figs div { padding-top: 12px; border-top: 2px solid var(--tx); }
.ab-figs dt { font: 400 clamp(30px, 3vw, 48px)/1 var(--display); }
.ab-figs dd { margin-top: 8px; font-size: 15px; color: var(--tx2); }
.ab-gold .h2 { background: linear-gradient(176deg, #8E4E26 6%, #7A3F1E 52%, #5C2C12 96%);   /* darker than the homepage gilding: it sits on golden-hour peach */ -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-ink="light"] .ab-gold .h2 { background-image: linear-gradient(176deg, #FFE0A8 6%, #F2B66A 50%, #D9853E 96%); }
.ab-vals { display: grid; gap: 0; }
.ab-vals li { padding: 16px 0; border-top: 1px solid var(--rl); color: var(--tx2); font-size: 17px; }
.ab-vals b { display: block; color: var(--tx); font: 400 22px/1.2 var(--display); margin-bottom: 4px; }
.ab-end { padding-block: clamp(80px, 9vw, 140px) 0; display: grid; gap: 18px; justify-items: start; }

/* ---------- Services: start with the outcome ---------- */
.sv-hero { padding-block: clamp(40px, 5vw, 80px) clamp(40px, 5vw, 70px); }
.sv-g { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px clamp(32px, 5vw, 90px); align-items: start; }
.sv-tabs { display: grid; gap: 0; border-top: 1px solid var(--rl); }
.sv-tabs button { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; text-align: left; padding: 20px 0; border: 0; border-bottom: 1px solid var(--rl); background: none; cursor: pointer; font: 400 clamp(22px, 2vw, 30px)/1.15 var(--display); color: var(--tx2); }
.sv-tabs button i { font: 700 13px var(--sans); font-style: normal; letter-spacing: .14em; padding-top: 8px; }
.sv-tabs button[aria-pressed="true"] { color: var(--tx); }
.sv-tabs button[aria-pressed="true"] i { color: #C9772F; }
.sv-tabs button:focus-visible { outline: 3px solid var(--tx); outline-offset: 3px; }
.sv-plan { padding: clamp(24px, 3vw, 40px); border-radius: 10px; background: color-mix(in srgb, var(--pg) 70%, #fff 30%); display: grid; gap: 18px; justify-items: start; }
html[data-ink="light"] .sv-plan { background: color-mix(in srgb, var(--pg) 85%, #fff 15%); }
.sv-art { width: 100%; max-width: 380px; height: auto; }
.sv-art * { fill: none; stroke: var(--tx); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-art .st { stroke: var(--rl); stroke-width: 3; } .sv-art .riv { stroke: color-mix(in srgb, #8FD3BF 60%, transparent); stroke-width: 12; }
.sv-art .pin { fill: #E39A4C; stroke: none; } .sv-art .arc { stroke: #E39A4C; stroke-width: 2.6; } .sv-art .ph { fill: color-mix(in srgb, var(--tx) 6%, transparent); }
.sv-art .hl, .sv-art .ln { fill: var(--tx); stroke: none; opacity: .7; } .sv-art .bt { fill: #E39A4C; stroke: none; }
.sv-art .ln2 { stroke: #E39A4C; stroke-width: 2.6; } .sv-art .dt { fill: #E39A4C; stroke: none; } .sv-art .ax { stroke: var(--tx2); }
.sv-what { font: 400 clamp(22px, 2vw, 30px)/1.2 var(--display); }
.sv-plan ul { display: grid; width: 100%; }
.sv-plan li { padding: 12px 0; border-top: 1px solid var(--rl); color: var(--tx2); font-size: 15.5px; }
.sv-plan li b { display: block; color: var(--tx); font-size: 17px; font-weight: 650; }
.sv-all { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 110px); }
.sv-all .svc-l { margin-top: 14px; }
.sv-all .svc-l li { grid-template-columns: minmax(0, 1fr); }

/* ---------- Work: two exhibits ---------- */
.wk-hero { padding-block: clamp(40px, 5vw, 80px) clamp(40px, 5vw, 70px); }
.wk { display: grid; gap: clamp(48px, 6vw, 96px); }
.ex { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 90px); align-items: center; }
.ex:nth-child(2) .ex-art { order: 2; }
.ex-art { position: relative; border-radius: 12px; padding: clamp(24px, 4vw, 56px); overflow: hidden; box-shadow: var(--rim), var(--cast), 0 30px 70px rgba(0,0,0,.16); }
.ex-hd .ex-art { background: color-mix(in srgb, #1F4237 calc((1 - var(--g)) * 100%), #10241D); }
.ex-ks .ex-art { background: #0C0A10; display: grid; gap: 24px; justify-items: center; }
.ex-bb .hsb { border-radius: 6px; }
.ex-bb { width: 82%; border-radius: 6px; }
.ex-ph { position: absolute; right: 6%; bottom: 8%; width: 24%; aspect-ratio: 390 / 844; border-radius: 9% / 4.2%; overflow: hidden; background: #ECEBE7; box-shadow: 0 0 0 5px #0C1512, 0 24px 50px rgba(0,0,0,.4); }
.ex-wire { position: absolute; inset: 0; container-type: inline-size; }
.ex-wire span { position: absolute; border-radius: 3cqw; background: #D9D8D3; outline: 1px dashed #A9A7A0; outline-offset: -1px; }
.ex-wire .w-top { left: 6%; right: 6%; top: 6%; height: 4%; } .ex-wire .w-img { left: 0; right: 0; top: 12%; height: 46%; border-radius: 0; } .ex-wire .w-l2 { left: 6%; width: 78%; top: 66%; height: 6.5%; } .ex-wire .w-b1 { left: 6%; width: 54%; top: 81%; height: 5%; border-radius: 99px; }
.ex-fin { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.ex-hd.in .ex-fin { animation: exWipe 7s cubic-bezier(.6, 0, .3, 1) 1s infinite; }
@keyframes exWipe { 0%, 8% { clip-path: inset(0 100% 0 0); } 40%, 85% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.ex-sign { width: 70%; height: auto; opacity: .25; filter: drop-shadow(0 0 6px rgba(255,110,225,.9)) drop-shadow(0 0 30px rgba(255,40,200,.55)); }
.ex-ks.in .ex-sign { animation: exNeon 2.4s ease .6s both; }
@keyframes exNeon { 0% { opacity: .25; } 18% { opacity: 1; } 24% { opacity: .4; } 30% { opacity: 1; } 36% { opacity: .6; } 44%, 100% { opacity: 1; } }
.ex-sls { display: flex; justify-content: center; width: 100%; }
.ex-sls span { width: 22%; aspect-ratio: 1; margin-inline: -3%; border-radius: 2px; box-shadow: 0 18px 36px rgba(0,0,0,.5); transition: rotate .9s cubic-bezier(.3, 1.2, .5, 1), translate .9s cubic-bezier(.3, 1.2, .5, 1); }
.ex-sls img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.ex-ks.in .ex-sls span:nth-child(1) { rotate: -10deg; translate: -14% 4%; } .ex-ks.in .ex-sls span:nth-child(2) { rotate: -5deg; translate: -6% 0; } .ex-ks.in .ex-sls span:nth-child(3) { translate: 0 -6%; z-index: 2; } .ex-ks.in .ex-sls span:nth-child(4) { rotate: 5deg; translate: 6% 0; } .ex-ks.in .ex-sls span:nth-child(5) { rotate: 10deg; translate: 14% 4%; }
.ex-t h2 { font: 400 clamp(46px, 5.4vw, 92px)/.92 var(--display); letter-spacing: -.02em; margin: 16px 0 14px; }
.ex-hd .ex-t h2 { font: 600 clamp(46px, 5.4vw, 92px)/.9 "Familjen Grotesk", var(--sans); letter-spacing: -.05em; }
.ex-hd .hd-em { color: #B5652F; } html[data-ink="light"] .ex-hd .hd-em { color: var(--peach); }
.ex-t > p { color: var(--tx2); max-width: 42ch; }
.ex-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 20px 0 10px; font-size: 15px; padding-top: 14px; border-top: 1px solid var(--rl); }
.ex-meta dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); padding-top: 2px; }
@media (prefers-reduced-motion: reduce) { .ex-hd.in .ex-fin, .ex-ks.in .ex-sign { animation: none; opacity: 1; } .ex-sls span { transition: none; } }

/* ---------- Contact: the closing sequence, as a page ---------- */
.ct-hero { padding-block: clamp(40px, 5vw, 80px) 0; }
.ct-story { margin-top: 22px; font: 800 min(5.2vw, 84px)/1 var(--sans); letter-spacing: -.045em; white-space: nowrap; }
.ct-film { overflow: clip; margin-top: clamp(32px, 4vw, 56px); }
.ct-film ol { display: flex; gap: 12px; padding: 20px 12px; width: max-content; background: #0B0B0C; background-image: radial-gradient(circle at 50% 50%, #2A2A2C 3px, transparent 3.6px), radial-gradient(circle at 50% 50%, #2A2A2C 3px, transparent 3.6px);
  background-size: 22px 22px; background-repeat: repeat-x; background-position: 0 0, 0 100%; translate: calc(100vw - 100% + 8vw) 0; }
.ct-film li { width: clamp(150px, 18vw, 260px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: #151517; display: grid; place-items: center; flex: none; }
.ct-film img { width: 100%; height: 100%; object-fit: cover; }
.ct-film .ks img { object-fit: contain; width: 70%; height: auto; }
.ct-film .bb .hsb { width: 100%; height: 100%; aspect-ratio: auto; }
.ct-film .you { border: 2px dashed #F2B66A; background: rgba(242,182,106,.08); box-shadow: 0 0 40px rgba(242,182,106,.45); }
.ct-film .you span { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F2B66A; }
.ct-inv { position: relative; overflow: hidden; isolation: isolate; max-width: 880px; margin: clamp(28px, 3vw, 48px) auto 0; padding: clamp(40px, 5vw, 80px) clamp(22px, 5vw, 80px) clamp(36px, 4vw, 64px); border-radius: 6px; display: grid; justify-items: center; text-align: center; gap: 18px;
  background: #F7F1E6; color: #16120F; box-shadow: var(--rim), var(--cast), 0 30px 70px rgba(0,0,0,.14), 0 0 calc(var(--g) * 140px) rgba(255,196,120,calc(var(--g) * .35)); }
.ct-inv::before { content: ""; position: absolute; inset: 14px; z-index: -1; pointer-events: none; background:
  linear-gradient(#E39A4C, #E39A4C) 0 0 / 22px 2px, linear-gradient(#E39A4C, #E39A4C) 0 0 / 2px 22px, linear-gradient(#E39A4C, #E39A4C) 100% 0 / 22px 2px, linear-gradient(#E39A4C, #E39A4C) 100% 0 / 2px 22px,
  linear-gradient(#E39A4C, #E39A4C) 0 100% / 22px 2px, linear-gradient(#E39A4C, #E39A4C) 0 100% / 2px 22px, linear-gradient(#E39A4C, #E39A4C) 100% 100% / 22px 2px, linear-gradient(#E39A4C, #E39A4C) 100% 100% / 2px 22px; background-repeat: no-repeat; }
.ct-inv h1 { font: 900 clamp(46px, 7.4vw, 124px)/.86 var(--sans); letter-spacing: -.055em; text-transform: uppercase; }
.ct-inv > p { color: #4A3F36; max-width: 40ch; }
.ct-inv-k { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #8A5A22 !important; }
.ct-inv-s { font-size: 13px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.ct-inv .btn-book { background: #16120F; color: #F7F1E6; }
.ct-inv .btn-book:hover { background: #2A221C; }
.ct-inv .btn-book:focus-visible { outline: 3px solid #16120F; }
.ct-sweep { position: absolute; inset: -10% -40%; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 36%, rgba(255,214,150,.55) 48%, rgba(255,240,214,.8) 50%, rgba(255,214,150,.55) 52%, transparent 62%); mix-blend-mode: soft-light; }
.ct-inv.lit .ct-sweep { animation: ctSweep 2.2s cubic-bezier(.45, 0, .2, 1) .3s both; }
@keyframes ctSweep { 0% { opacity: 1; translate: -60% 0; } 85% { opacity: 1; } 100% { opacity: 0; translate: 60% 0; } }
.ct-write { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px clamp(32px, 6vw, 110px); padding-block: clamp(80px, 9vw, 140px) 0; align-items: start; }
.ct-write .ct-form { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .ct-inv.lit .ct-sweep { animation: none; } }

@media (max-width: 860px) {
  .fl, .fp-exp, .ab-hero, .ab-ch-g, .sv-g, .sv-all, .ex, .ct-write { grid-template-columns: minmax(0, 1fr); }
  .fl-stage { aspect-ratio: 4 / 5; }
  .ab-t { position: static; }
  .ab-ch { min-height: 0; }
  .ab-photo { max-width: 320px; }
  .ab-figs { grid-template-columns: minmax(0, 1fr); }
  .ex:nth-child(2) .ex-art { order: 0; }
  .ct-story { white-space: normal; font-size: min(10.4vw, 64px); }
  .ct-film li { width: 42vw; }
}

/* =====================================================================================================================
   Gumbee (Round 17): a cut-paper storybook. Cream paper and plum ink by day, the brand's Bedtime navy after sunset (light.js
   sets html[data-ink="light"] on this page once the sun is down). Colour comes from the illustrations and four soft bands
   (gum, mint, honey, sky) with scalloped paper edges. Golden Hour's light still sets the shadows.
   ===================================================================================================================== */
body.p-gp { --pg: #FBF3E4; --tx: #2E2342; --tx2: #5B4C66; --rl: rgba(46,35,66,.14); --gp-card: #FFFCF4;
  --b-gum: #FCE4E9; --b-mint: #E1F3EB; --b-honey: #FFEFC8; --b-sky: #E0F1F8; --gp-acc: #C24766; font-family: var(--sans); }
html[data-ink="light"] body.p-gp { --pg: #24203F; --tx: #FFF6E6; --tx2: #D8CFE8; --rl: rgba(255,246,230,.16); --gp-card: #2E2950;
  --b-gum: #3A2A4C; --b-mint: #213945; --b-honey: #362C45; --b-sky: #23304F; --gp-acc: #FFB3C3; }
.gp-sky { fill: color-mix(in srgb, #CDEBF8 calc((1 - var(--g, 0)) * 100%), #2C2752); transition: fill 1.4s ease; }
.gp-day { opacity: calc(1 - var(--g, 0)); transition: opacity 1.4s ease; } .gp-night { opacity: var(--g, 0); transition: opacity 1.4s ease; }
.gp-win { fill: rgba(255,214,130,calc(var(--g, 0) * .95)); }
.p-gp h1, .p-gp h2, .p-gp h3 { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.025em; }
.p-gp .k span:first-child { color: var(--gp-acc); }

/* the wordmark: gum | bee */
.gp-word { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .06em; margin-top: 24px; font: 900 clamp(40px, 4.4vw, 64px)/.9 var(--sans); letter-spacing: -.055em; }
.gp-word .g { color: #E4728A; } .gp-word .b { color: #E39A16; }
.gp-word small { margin-left: .5em; font-size: .3em; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--tx2); align-self: center; }
.gp-word-lg { margin-top: 0; font-size: clamp(54px, 6.4vw, 104px); }

/* hero */
.gp-hero { padding-block: clamp(24px, 3vw, 48px) clamp(30px, 4vw, 60px); }
.gp-hero-g { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 5vw, 90px); align-items: center; }
.gp-hero h1 { font-size: clamp(50px, 6.4vw, 112px); line-height: .94; margin: 16px 0 22px; text-wrap: balance; }
.gp-hero .lede { color: var(--tx2); }
.gp-disc { margin-top: 22px; padding: 14px 18px; border-radius: 18px; background: color-mix(in srgb, var(--gp-card) 70%, transparent); border: 2px dashed var(--rl); font-size: 15px; color: var(--tx2); }
.gp-disc b { color: var(--tx); }
.gp-cover { margin: 0; border-radius: 36px; overflow: hidden; rotate: .8deg; box-shadow: 0 0 0 10px var(--gp-card), var(--cast), 0 40px 80px rgba(46,35,66,.22), var(--glow); }
.gp-cover svg { width: 100%; height: auto; display: block; }

/* soft bands with scalloped paper edges */
.gp-band { position: relative; background: var(--band); margin-top: clamp(80px, 9vw, 140px); padding-block: clamp(70px, 8vw, 120px); transition: background-color 1.2s ease; }
.gp-band::before, .gp-band::after { content: ""; position: absolute; left: 0; right: 0; height: 20px; pointer-events: none; }
.gp-band::before { top: -19px; background: radial-gradient(circle at 20px 20px, var(--band) 19.5px, transparent 20.5px) 0 0 / 40px 20px repeat-x; }
.gp-band::after { bottom: -19px; background: radial-gradient(circle at 20px 0, var(--band) 19.5px, transparent 20.5px) 0 0 / 40px 20px repeat-x; }
.gp-band-gum { --band: var(--b-gum); } .gp-band-mint { --band: var(--b-mint); } .gp-band-honey { --band: var(--b-honey); } .gp-band-sky { --band: var(--b-sky); }
.gp-sec { padding-block: clamp(80px, 9vw, 140px) 0; }
.gp-band + .gp-sec { padding-top: clamp(100px, 10vw, 160px); }
.gp-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 60px); max-width: 62ch; }
.gp-head h2 { font-size: clamp(40px, 4.8vw, 78px); line-height: .98; text-wrap: balance; }
.gp-head .lede { color: var(--tx2); }

/* numbered trios: honeycomb badges, no boxes */
.gp-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 64px); }
.gp-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gp-three li { display: grid; gap: 10px; align-content: start; color: var(--tx2); font-size: 16.5px; line-height: 1.5; }
.gp-three b { color: var(--tx); font: italic 500 clamp(24px, 2.2vw, 32px)/1.1 "Newsreader", Georgia, serif; }
.gp-num { width: 54px; height: 48px; display: grid; place-items: center; font: 900 22px var(--sans); color: #2E2342;
  background: linear-gradient(#FFDB6E, #F0A21C); clip-path: polygon(25% 2%, 75% 2%, 99% 50%, 75% 98%, 25% 98%, 1% 50%); filter: drop-shadow(0 3px 0 rgba(46,35,66,.25)); }

/* the Brave Book */
.gp-book-sec { padding-block: clamp(110px, 11vw, 170px) 0; }
.gp-book { position: relative; outline: none; }
.gp-book:focus-visible { outline: 3px solid var(--tx); outline-offset: 10px; border-radius: 30px; }
.gp-ch { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 26px; overflow: visible; background: var(--gp-card); position: relative;
  box-shadow: 5px 6px 0 -1px color-mix(in srgb, var(--gp-card) 82%, #2E2342), 10px 12px 0 -2px color-mix(in srgb, var(--gp-card) 70%, #2E2342), var(--rim), var(--cast), 0 34px 70px rgba(46,35,66,.18); }
.gp-ch.on { display: grid; }
.gp-ch::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 70px; margin-left: -35px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(46,35,66,.08) 42%, rgba(46,35,66,.2) 50%, rgba(46,35,66,.05) 58%, transparent); }
.gp-ch::before { content: ""; position: absolute; right: 44px; top: -8px; width: 24px; height: 84px; z-index: 3; background: linear-gradient(#F48DA3, #DC6481);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); filter: drop-shadow(0 2px 2px rgba(46,35,66,.25)); }
.gp-ill { margin: 0; border-radius: 26px 0 0 26px; overflow: hidden; } .gp-ill svg { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; }
.gp-txt { padding: clamp(30px, 4vw, 60px) clamp(28px, 4vw, 60px) clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 14px; }
.gp-chn { font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gp-acc); }
.gp-txt h3 { font-size: clamp(34px, 3.6vw, 56px); line-height: .98; }
.gp-story { font: italic 400 clamp(21px, 1.9vw, 28px)/1.42 "Newsreader", Georgia, serif; }
.gp-note { margin-top: auto; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, #9FD6EE 22%, transparent); font-size: 15px; line-height: 1.45; color: var(--tx); }
.gp-note b { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
.gp-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.gp-ctl button { width: 58px; height: 52px; border: 0; color: #2E2342; font: 900 28px/1 var(--sans); cursor: pointer; background: linear-gradient(#FFDB6E, #F0A21C);
  clip-path: polygon(25% 2%, 75% 2%, 99% 50%, 75% 98%, 25% 98%, 1% 50%); filter: drop-shadow(0 4px 0 rgba(160,96,10,.6)); transition: translate .1s ease; }
.gp-ctl button:active { translate: 0 3px; }
.gp-ctl button:disabled { opacity: .35; cursor: default; }
.gp-ctl button:focus-visible { outline: 3px solid var(--tx); outline-offset: 4px; }
.gp-pos { min-width: 9em; text-align: center; font-weight: 700; color: var(--tx2); }
.gp-leaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d; z-index: 4; pointer-events: none; }
.gp-leaf > div { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; background: var(--gp-card); }
.gp-leaf > .back { transform: rotateY(180deg); }
.gp-leaf.fwd { animation: gpTurn .85s cubic-bezier(.45, .05, .25, 1) both; }
.gp-leaf.back-turn { left: 0; transform-origin: 100% 50%; animation: gpTurnB .85s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes gpTurn { from { transform: perspective(1800px) rotateY(0deg); } to { transform: perspective(1800px) rotateY(-180deg); } }
@keyframes gpTurnB { from { transform: perspective(1800px) rotateY(0deg); } to { transform: perspective(1800px) rotateY(180deg); } }
.gp-ch.slide { animation: gpSlide .45s cubic-bezier(.2, .8, .2, 1) both; } .gp-ch.slide-b { animation: gpSlideB .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gpSlide { from { translate: 30px 0; opacity: .3; } } @keyframes gpSlideB { from { translate: -30px 0; opacity: .3; } }

/* hug your gums */
.gp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 48px); counter-reset: s; }
.gp-steps li { counter-increment: s; display: grid; gap: 10px; align-content: start; color: var(--tx2); font-size: 16px; line-height: 1.45; }
.gp-steps svg { width: 100%; height: auto; border-radius: 28px; background: var(--gp-card); box-shadow: var(--cast), 0 18px 40px rgba(46,35,66,.1); margin-bottom: 8px; }
.gp-steps b { color: var(--tx); font: italic 500 clamp(24px, 2.2vw, 30px)/1.1 "Newsreader", Georgia, serif; }
.gp-steps b::before { content: counter(s) "  "; font: 900 .7em var(--sans); color: var(--gp-acc); font-style: normal; }

/* identity */
.gp-id { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 90px); align-items: center; }
.gp-pip-big { margin: 0; padding: clamp(20px, 3vw, 40px); border-radius: 36px; background: radial-gradient(90% 80% at 50% 30%, #E9F7FC, #BFE3F3); display: grid; justify-items: center; gap: 10px; box-shadow: var(--cast), 0 30px 60px rgba(46,35,66,.14); }
.gp-pip-big svg { width: min(92%, 380px); height: auto; }
.gp-pip-big figcaption { color: #2E2342; font-size: 15px; text-align: center; max-width: 34ch; }
.gp-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.gp-mark svg { width: clamp(110px, 11vw, 170px); height: auto; filter: drop-shadow(0 3px 2px rgba(46,35,66,.2)); }
.gp-mark-note { margin-top: 14px; color: var(--tx2); max-width: 46ch; }
.gp-pal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 26px 0; }
.gp-pal li { aspect-ratio: 1 / 1.05; background: var(--c); display: grid; place-content: center; text-align: center; font: 800 12px/1.2 var(--sans); color: #2E2342;
  clip-path: polygon(25% 3%, 75% 3%, 99% 50%, 75% 97%, 25% 97%, 1% 50%); }
.gp-pal li.dk { color: #FFF6E6; } .gp-pal small { font: 500 10px ui-monospace, Menlo, monospace; opacity: .85; }
.gp-type { display: grid; gap: 6px; padding-top: 16px; border-top: 2px dashed var(--rl); }
.gp-type small { color: var(--tx2); font-size: 14px; }

/* the prize box game */
.gp-game { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 90px); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 36px; background: var(--gp-card); box-shadow: var(--rim), var(--cast), 0 30px 70px rgba(46,35,66,.14); }
.gp-comb { width: 100%; height: auto; display: block; }
.gp-comb .cell > use:first-child { fill: #FFFDF7; transition: fill .35s ease; }
.gp-comb .cell.on > use:first-child { fill: url(#gpHoney); }
.gp-comb .stk { fill: #F28FA0; stroke-width: 1.4; transform-box: fill-box; transform-origin: 50% 50%; scale: 0; transition: scale .45s cubic-bezier(.3, 1.8, .5, 1); }
.gp-comb .cell.on .stk { scale: 1; }
.gp-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin-top: 16px; counter-reset: m; }
.gp-moments li { counter-increment: m; font-size: 14px; color: var(--tx2); display: flex; gap: 6px; }
.gp-moments li::before { content: counter(m); font-weight: 900; color: var(--gp-acc); }
.gp-box-w { display: grid; justify-items: center; gap: 14px; text-align: center; }
.gp-box { width: min(300px, 100%); height: auto; overflow: visible; }
.gp-box .lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.gp-box.open .lid { transform: rotate(-30deg) translate(-6px, -16px); }
.gp-box .pz { transform: translateY(80px); opacity: 0; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease; }
.gp-box.open .pz { transform: none; opacity: 1; }
.gp-box.open .pz2 { transition-delay: .12s; } .gp-box.open .pz3 { transition-delay: .24s; }
.gp-say { font: italic 500 clamp(22px, 2vw, 30px)/1.2 "Newsreader", Georgia, serif; }
.gp-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gp-add, .gp-reset { min-height: 54px; padding: 0 26px; border-radius: 99px; border: 0; font: 800 16px var(--sans); cursor: pointer; }
.gp-add { background: linear-gradient(#FFDB6E, #F0A21C); color: #2E2342; box-shadow: 0 4px 0 #B87A0E; }
.gp-add:active { translate: 0 3px; box-shadow: 0 1px 0 #B87A0E; }
.gp-reset { background: transparent; color: var(--tx); border: 2px solid var(--rl); }
.gp-add:focus-visible, .gp-reset:focus-visible { outline: 3px solid var(--tx); outline-offset: 3px; }
.gp-box-w .gp-note { text-align: left; }

/* bee kind */
.gp-bk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 90px); align-items: center; }
.gp-wall { margin: 0; border-radius: 36px; overflow: hidden; rotate: -.8deg; box-shadow: 0 0 0 10px var(--gp-card), var(--cast), 0 30px 60px rgba(46,35,66,.16); }
.gp-wall svg { display: block; width: 100%; height: auto; }

/* the website, on a phone */
.gp-web { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 90px); align-items: center; }
.gp-phone { width: min(330px, 100%); justify-self: center; aspect-ratio: 390 / 844; border-radius: 46px; background: #FBF3E4; box-shadow: 0 0 0 10px #2E2342, var(--cast), 0 34px 70px rgba(46,35,66,.28); overflow: hidden; container-type: inline-size; color: #2E2342; }
.gp-ph-in { display: flex; flex-direction: column; height: 100%; font-size: calc(100cqw / 24.375); padding: 3.2em 1.3em 1.4em; gap: .9em; }
.gp-ph-top { display: flex; justify-content: space-between; align-items: center; font-weight: 900; }
.gp-ph-top > span:last-child { font-size: .8em; font-weight: 800; padding: .4em .9em; border-radius: 99px; border: 1.5px solid #2E2342; }
.gp-ph-mk { display: inline-flex; align-items: center; gap: .1em; font-size: 1.3em; letter-spacing: -.05em; }
.gp-ph-mk svg { width: 2.2em; height: auto; margin-right: .3em; }
.gp-ph-mk .g { color: #E4728A; } .gp-ph-mk .b { color: #E39A16; }
.gp-ph-art svg { width: 100%; height: auto; border-radius: 1.4em; display: block; }
.gp-ph-h { font: italic 500 2.3em/1 "Newsreader", Georgia, serif; letter-spacing: -.02em; }
.gp-ph-s { font-size: .95em; color: #5B4C66; }
.gp-ph-b { display: flex; flex-wrap: wrap; gap: .5em; }
.gp-ph-b span { padding: .8em 1.15em; border-radius: 99px; font-weight: 800; font-size: .85em; }
.gp-ph-b .b1 { background: linear-gradient(#FFDB6E, #F0A21C); box-shadow: 0 .25em 0 #B87A0E; } .gp-ph-b .b2 { border: 1.5px solid #2E2342; }
.gp-ph-list { margin-top: auto; display: grid; gap: .4em; } .gp-ph-list li { padding: .8em 1em; border-radius: 1em; background: #FFFCF4; font-weight: 700; font-size: .85em; box-shadow: inset 0 0 0 1.5px rgba(46,35,66,.1); }
.gp-web-l { display: grid; } .gp-web-l li { padding: 20px 0; border-top: 1px solid var(--rl); color: var(--tx2); font-size: 16px; }
.gp-web-l b { display: block; color: var(--tx); font: italic 500 26px/1.2 "Newsreader", Georgia, serif; margin-bottom: 4px; }

/* campaign concepts */
.gp-camp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 34px); align-items: start; }
.gp-poster, .gp-social, .gp-search { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--rim), var(--cast), 0 28px 60px rgba(46,35,66,.16); }
.gp-poster { background: #FFE8A3; color: #2E2342; padding-bottom: 24px; rotate: -1deg; }
.gp-poster svg, .gp-social svg { width: 100%; height: auto; display: block; }
.gp-poster p { padding: 4px 24px 0; font: italic 500 clamp(28px, 2.8vw, 42px)/1.02 "Newsreader", Georgia, serif; }
.gp-poster span { display: block; padding: 12px 24px 0; font-weight: 800; font-size: 15px; }
.gp-social { background: #DCF1F8; color: #2E2342; padding-bottom: 22px; rotate: .8deg; }
.gp-social p { padding: 0 22px; font: italic 500 28px/1.1 "Newsreader", Georgia, serif; }
.gp-social p small { display: block; font: 700 13px var(--sans); color: #5B4C66; margin-top: 6px; }
.gp-dots { display: flex; gap: 6px; padding: 12px 22px 0; } .gp-dots s { width: 8px; height: 8px; border-radius: 50%; background: rgba(46,35,66,.25); } .gp-dots s:first-child { background: #2E2342; }
.gp-search { background: #FFFCF4; color: #1D1B18; padding: 62px 24px 26px; display: grid; gap: 16px; }
.gp-q { padding: 12px 16px; border-radius: 99px; border: 1px solid #D8D3C8; font-size: 15px; color: #3F3A33; }
.gp-res { display: grid; gap: 6px; font-size: 15px; } .gp-res small { color: #5E584F; } .gp-res b { color: #1F3F8A; font-size: 19px; font-weight: 600; line-height: 1.2; } .gp-res span { color: #3F3A33; }
.gp-tag { position: absolute; left: 14px; top: 14px; font: 800 11px/1 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: 99px; background: rgba(46,35,66,.88); color: #FFF6E6; }
.gp-end .gp-cred { max-width: 72ch; color: var(--tx2); margin-top: 12px; }

/* the Work page exhibit */
.ex-gp .ex-art { background: #FBF3E4; padding: 0; order: 2; }
html[data-ink="light"] .ex-gp .ex-art { background: #24203F; }
.ex-gp .ex-gp-cover { border-radius: 0; box-shadow: none; rotate: none; }
.ex-gp .ex-t h2 { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 500; }
.ex:nth-child(3) .ex-art { order: 0; }

@media (prefers-reduced-motion: reduce) {
  .gp-leaf.fwd, .gp-leaf.back-turn, .gp-ch.slide, .gp-ch.slide-b { animation: none; }
  .gp-sky, .gp-day, .gp-night, .gp-band, .gp-comb .stk, .gp-comb .cell > use:first-child, .gp-box .lid, .gp-box .pz { transition: none; }
}
@media (max-width: 860px) {
  .gp-hero-g, .gp-id, .gp-web, .gp-camp, .gp-game, .gp-bk { grid-template-columns: minmax(0, 1fr); }
  .gp-three, .gp-four, .gp-steps { grid-template-columns: minmax(0, 1fr); }
  .gp-ch { grid-template-columns: minmax(0, 1fr); }
  .gp-ch::after { display: none; }
  .gp-ill { border-radius: 26px 26px 0 0; }
  .gp-pal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gp-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gp-hero h1 { font-size: clamp(46px, 12.4vw, 66px); }
  .gp-word-lg { font-size: clamp(44px, 13vw, 72px); }
  .gp-cover, .gp-wall, .gp-poster, .gp-social { rotate: none; }
  .gp-steps svg { max-width: 360px; }
  .ex-gp .ex-art { order: 0; }
}

/* =====================================================================================================================
   Gumbee, Round 18: the storybook in Golden Hour's light (storylight.js sets the sky, sun, shadows and paper tint).
   ===================================================================================================================== */
.gp-sky { fill: var(--gp-sky, #CDEBF8); transition: fill 1.4s ease; }
.p-gp .gp-band, .p-gp .gp-ch, .p-gp .gp-game, .p-gp .gp-steps svg { transition: background-color 1.4s ease; }
body.p-gp { transition: background-color 1.4s ease; }
/* the window pane: the site's sunlit pane falls on the cream sections; the bands keep their scallops, so the pane has its own clip */
.p-gp .gp-hero, .p-gp .gp-sec { position: relative; isolation: isolate; }
.gp-pane { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.gp-pane .gh-beam { opacity: calc(var(--beam-a, 0) * .55); }
.gp-pane .gh-beam i { mix-blend-mode: multiply; }
html[data-ink="light"] .gp-pane .gh-beam { opacity: 0; }
/* bedtime: the cover's beehive glows a little into the room */
html[data-ink="light"] .p-gp .gp-cover { box-shadow: 0 0 0 10px var(--gp-card), 0 40px 80px rgba(0,0,0,.3), 0 0 120px rgba(255,200,120,.16); }

/* the feature line in the hero */
.gp-feat { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; line-height: 1.45; color: var(--tx2); max-width: 52ch; }
.gp-feat-k { flex-basis: 100%; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gp-acc); }
.gp-feat-b { min-height: 44px; padding: 0 20px; border-radius: 99px; border: 0; font: 800 15px var(--sans); color: #2E2342; cursor: pointer;
  background: linear-gradient(#FFDB6E, #F0A21C); box-shadow: 0 3px 0 #B87A0E; }
.gp-feat-b:active { translate: 0 2px; box-shadow: 0 1px 0 #B87A0E; }
.gp-feat-b:focus-visible { outline: 3px solid var(--tx); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gp-sky, .p-gp .gp-band, .p-gp .gp-ch, .p-gp .gp-game, body.p-gp { transition: none; } }

/* =====================================================================================================================
   Pip, the on-page guide (Round 18). A fixed button that flies (pip.js moves it with a spring), perches beside each part
   of the story with a short remark, reacts to the book and the prize box, and opens a small chat. After dark he glows
   like a nightlight. With reduced motion he stays in his corner and still talks.
   ===================================================================================================================== */
.pip { --w: 84px; position: fixed; left: 0; top: 0; z-index: 60; width: var(--w); height: var(--w); padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate3d(-200px, -200px, 0); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pip:focus-visible { outline: none; }
.pip:focus-visible .pip-fly::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; outline: 3px solid var(--tx); outline-offset: 2px; }
.pip-fly { position: absolute; inset: 0; display: block; transform: rotate(var(--tilt, 0deg)); }
.pip-bob { position: absolute; inset: 0; display: block; animation: pipBob 2.6s ease-in-out infinite; }
.pip-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 6px 6px rgba(46,35,66,.22)); }
.pip-wl, .pip-wr { transform-box: fill-box; animation: pipFlap .16s ease-in-out infinite alternate; }
.pip-wl { transform-origin: 90% 85%; } .pip-wr { transform-origin: 10% 85%; }
.pip.flying .pip-wl, .pip.flying .pip-wr { animation-duration: .07s; }
.pip-look { transition: transform .25s ease; transform: translate(var(--lx, 0px), var(--ly, 0px)); }
.pip-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: pipBlink 5.2s infinite; }
.pip-m { display: none; } .pip-m-smile { display: inline; }
.pip.talk .pip-m-smile, .pip.grin .pip-m-smile { display: none; }
.pip.talk .pip-m-talk { display: inline; animation: pipTalk .32s steps(1) infinite; }
.pip.grin:not(.talk) .pip-m-grin { display: inline; }
.pip.loop .pip-fly { animation: pipLoop .7s cubic-bezier(.5, 0, .3, 1); }
@keyframes pipBob { 50% { transform: translateY(-5px); } }
@keyframes pipFlap { from { transform: scaleY(1) rotate(0deg); } to { transform: scaleY(.62) rotate(-6deg); } }
@keyframes pipBlink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes pipTalk { 0% { opacity: 1; } 50% { opacity: .55; } }
@keyframes pipLoop { 0% { transform: rotate(var(--tilt, 0deg)); } 100% { transform: rotate(calc(var(--tilt, 0deg) + 360deg)); } }
/* bedtime: Pip is a nightlight */
html[data-ink="light"] .pip-svg { filter: drop-shadow(0 0 10px rgba(255,214,120,.65)) drop-shadow(0 0 28px rgba(255,190,100,.35)); }

/* the speech bubble */
.pip-say { position: absolute; top: 50%; right: calc(100% + 8px); width: max-content; max-width: min(280px, 64vw); padding: 12px 16px; border-radius: 20px;
  background: #FFFCF4; color: #2E2342; font: 600 15.5px/1.35 var(--sans); text-align: left; box-shadow: 0 0 0 2px #2E2342, 0 10px 24px rgba(46,35,66,.18);
  opacity: 0; transform: translateY(-50%) scale(.85); transform-origin: 100% 50%; transition: opacity .25s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.pip-say::after { content: ""; position: absolute; top: 50%; right: -9px; width: 14px; height: 14px; margin-top: -7px; background: #FFFCF4; box-shadow: 2px -2px 0 0 #2E2342; rotate: 45deg; }
.pip.r .pip-say { right: auto; left: calc(100% + 8px); transform-origin: 0 50%; } .pip.r .pip-say::after { right: auto; left: -9px; box-shadow: -2px 2px 0 0 #2E2342; }
.pip.up .pip-say { top: auto; bottom: calc(100% + 4px); right: 10px; transform: translateY(0) scale(.85); transform-origin: 90% 100%; }
.pip.up .pip-say::after { top: auto; bottom: -7px; right: 20px; box-shadow: 2px 2px 0 0 #2E2342; }
.pip.saying .pip-say { opacity: 1; transform: translateY(-50%) scale(1); }
.pip.up.saying .pip-say { transform: translateY(0) scale(1); }

/* the chat */
.pip-chat { position: fixed; z-index: 59; right: 24px; bottom: 24px; width: min(380px, calc(100vw - 32px)); max-height: min(600px, calc(100dvh - 140px)); display: flex; flex-direction: column;
  border-radius: 28px; background: #FFFCF4; color: #2E2342; box-shadow: 0 0 0 2px #2E2342, 0 30px 70px rgba(46,35,66,.3); overflow: hidden;
  --tx: #2E2342; --tx2: #5B4C66; animation: pipIn .35s cubic-bezier(.3, 1.3, .5, 1); }
.pip-chat[hidden] { display: none; }
@keyframes pipIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.pip-top { display: flex; align-items: center; gap: 12px; padding: 30px 16px 14px 22px; background: linear-gradient(#FFE8A3, #FFDB6E); border-bottom: 2px solid #2E2342; }
.pip-top > div { flex: 1; min-width: 0; }
.pip-name { font: italic 500 24px/1 "Newsreader", Georgia, serif; outline: none; }
.pip-role { font-size: 13px; font-weight: 700; color: #4F4060; margin-top: 3px; }
.pip-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(46,35,66,.1); color: #2E2342; cursor: pointer; }
.pip-x svg { width: 18px; height: 18px; }
.pip-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; }
.pip-msg { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: 15.5px; line-height: 1.42; }
.pip-msg.p { align-self: flex-start; background: #FFF1CF; border-bottom-left-radius: 6px; }
.pip-msg.u { align-self: flex-end; background: #2E2342; color: #FFF6E6; border-bottom-right-radius: 6px; }
.pip-msg a { color: #A3264A; font-weight: 800; }
.pip-dots { display: inline-flex; gap: 5px; padding: 4px 0; } .pip-dots i { width: 8px; height: 8px; border-radius: 50%; background: #E39A16; animation: pipDot .9s ease-in-out infinite; }
.pip-dots i:nth-child(2) { animation-delay: .15s; } .pip-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pipDot { 50% { transform: translateY(-4px); opacity: .5; } }
.pip-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 12px; }
.pip-chips button { min-height: 40px; padding: 8px 14px; border-radius: 99px; border: 2px solid #2E2342; background: #FFFCF4; color: #2E2342; font: 700 14px/1.2 var(--sans); cursor: pointer; text-align: left; }
.pip-chips button:hover { background: #FFF1CF; }
.pip-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 2px dashed rgba(46,35,66,.18); }
.pip-form input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 99px; border: 2px solid rgba(46,35,66,.3); background: #fff; color: #2E2342; font: 500 16px var(--sans); }
.pip-form input::placeholder { color: #6E6178; }
.pip-form button { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(#FFDB6E, #F0A21C); color: #2E2342; cursor: pointer; box-shadow: 0 3px 0 #B87A0E; }
.pip-form button svg { width: 20px; height: 20px; }
.pip-fine { padding: 0 18px 14px; font-size: 12.5px; line-height: 1.4; color: #5B4C66; }
.pip-quiet { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #2E2342; text-decoration: underline; cursor: pointer; }
.pip-chat button:focus-visible, .pip-form input:focus-visible { outline: 3px solid #2E2342; outline-offset: 2px; }
.pip-x:focus-visible { outline-offset: 1px; }
html[data-ink="light"] .pip-chat { box-shadow: 0 0 0 2px #2E2342, 0 30px 70px rgba(0,0,0,.5), 0 0 90px rgba(255,200,120,.2); }

@media (max-width: 700px) {
  .pip { --w: 66px; }
  .pip-say { font-size: 15px; max-width: min(250px, 66vw); }
  .pip-chat { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: min(74dvh, 600px); border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pip-bob, .pip-wl, .pip-wr, .pip-eyes, .pip.talk .pip-m-talk, .pip-dots i, .pip-chat { animation: none; }
  .pip.loop .pip-fly { animation: none; }
  .pip-say, .pip-look { transition: opacity .2s ease; }
}

/* =====================================================================================================================
   Round 19: controls in reach. Every control sits beside the thing it changes, so the change happens in view, on a phone
   as much as on a desktop. Shared by the homepage and the interior pages.
   ===================================================================================================================== */

/* ---------- Halden wireframe: the slider rides the bottom of the screen while the screens are in view ---------- */
.rb-wf-ctl { position: sticky; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 3; width: max-content; max-width: calc(100% - 8px);
  padding: 2px 18px; border-radius: 99px; background: rgba(13,24,20,.92); color: #E6EEE4; box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(230,238,228,.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rb-wf-ctl input { width: min(240px, 46vw); }
.r15 .r15-hd .rb-wf-ctl { color: #E6EEE4; }
/* on the homepage the light dock is fixed to the bottom of the screen: the slider rides just above it */
body:has(#dock) .rb-wf-ctl { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 860px) { body:has(#dock) .rb-wf-ctl { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- For practices, the light model: the light, the reading and the master switch stay in sight ---------- */
.fl-view { display: grid; gap: 16px; position: sticky; top: 24px; z-index: 2; }
.fl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.fl-foot .note { margin: 0; }
.fl-read .fl-all { justify-self: auto; flex: none; }

/* ---------- Services: one answer at a time (the plans' display: grid was overriding [hidden], so all four showed at once) ---------- */
.sv-plan[hidden] { display: none; }

/* ---------- The One-minute Check: on phones, the three windows travel with the questions ---------- */
.chk-bar { display: none; }

/* ---------- Gumbee, the Brave Book: the arrows sit on the book ---------- */
.gp-book { container-type: inline-size; }
.gp-ctl { position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 5; display: block; }
.gp-ctl > * { pointer-events: auto; }
.gp-ctl .gp-prev, .gp-ctl .gp-next { position: absolute; top: 50%; translate: 0 -50%; width: 64px; height: 58px; }
.gp-ctl .gp-prev { left: -32px; } .gp-ctl .gp-next { right: -32px; }
.gp-ctl .gp-prev:active, .gp-ctl .gp-next:active { translate: 0 calc(-50% + 3px); }
.gp-ctl .gp-prev:disabled { opacity: 0; pointer-events: none; }
.gp-ctl .gp-pos { position: absolute; left: 50%; bottom: 0; translate: -50% 50%; min-width: 0; padding: 9px 18px; border-radius: 99px; white-space: nowrap;
  background: #2E2342; color: #FFF6E6; font-size: 14px; box-shadow: 0 6px 16px rgba(46,35,66,.25); }
.gp-book-sec .gp-book { margin-bottom: 28px; }

/* ---------- Gumbee, the prize box: tap the honeycomb itself ---------- */
.gp-comb { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gp-comb .cell:first-child:not(.on) > use:first-child, .gp-comb .cell.on + .cell:not(.on) > use:first-child { fill: #FFEDB8; }   /* the next cell to fill */

@media (max-width: 860px) {
  .rb-wf-ctl { gap: 10px; padding: 2px 14px; font-size: 12px; }

  /* phones: nothing pinned. The six switches become chips in a grid right under the light, so the light and every switch share
     one screen; the reading follows. The one-line descriptions stay for screen readers. */
  .fl-view { display: contents; }
  .fl-stage { order: 1; aspect-ratio: 5 / 4; }
  .fl-side { order: 2; gap: 8px; }
  .fl-read { order: 3; }
  .fl-sw { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .fl-sw legend { font-size: 11px; margin-bottom: 2px; }
  .fl-sw label { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 46px; padding: 6px 10px; border: 1px solid var(--rl); border-radius: 12px; transition: border-color .25s ease, background-color .25s ease; }
  .fl-sw label:has(input:checked) { border-color: #E39A4C; background: color-mix(in srgb, #E39A4C 12%, transparent); }
  .fl-sw label::before { width: 34px; height: 20px; }
  .fl-sw label::after { left: 12px; top: 50%; margin-top: -8px; width: 16px; height: 16px; }
  .fl-sw label:has(input:checked)::after { translate: 14px 0; }
  .fl-sw input { inset: 0; width: 100%; height: 100%; }
  .fl-sw b { font-size: 13.5px; line-height: 1.2; }
  .fl-sw small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fl-read p:first-child { font-size: 15px; }

  /* Services: the answer opens inside the list; its sun shadow is shorter so it never falls across the next option's text */
  .sv-tabs .sv-plans { margin: 2px 0 30px; }
  .sv-tabs .sv-plan { box-shadow: var(--rim), calc(var(--sx) * var(--sun) * .4) calc(var(--sy) * var(--sun) * .4) 20px rgba(20,12,10,calc(var(--so) * var(--sun))), 0 10px 22px rgba(0,0,0,.08), var(--glow); }

  .chk-bar { display: flex; align-items: center; gap: 12px; position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 3;
    padding: 10px 10px 10px 14px; border-radius: 99px; background: #1C1511; color: #F3EEE6; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
  .chk-bar-w { display: flex; gap: 5px; }
  .chk-bar-w i { width: 18px; height: 24px; border-radius: 3px; background: rgba(255,176,96,var(--lit, .12)); box-shadow: inset 0 0 0 2px #3A2E26, 0 0 calc(var(--lit, 0) * 14px) rgba(255,176,96,calc(var(--lit, 0) * .5)); transition: background-color .4s ease, box-shadow .4s ease; }
  .chk-bar-n { flex: 1; font-size: 14px; font-weight: 650; }
  .chk-bar a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 99px; background: #E39A4C; color: #1C1511; font-size: 14px; font-weight: 700; text-decoration: none; }
  .chk-bar a:focus-visible { outline: 3px solid #F3EEE6; outline-offset: 2px; }

  .gp-ctl .gp-prev, .gp-ctl .gp-next { top: 37.5cqw; width: 56px; height: 50px; }
  .gp-ctl .gp-prev { left: 10px; } .gp-ctl .gp-next { right: 10px; }
  .gp-ctl .gp-pos { top: calc(75cqw - 52px); bottom: auto; translate: -50% 0; padding: 7px 14px; font-size: 13px; }
  .gp-book-sec .gp-book { margin-bottom: 0; }

  .gp-game { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "comb box" "say say" "btn btn" "mom mom" "note note"; gap: 12px 10px; align-items: center; padding: 20px 16px 22px; }
  .gp-comb-w, .gp-box-w { display: contents; }
  .gp-comb { grid-area: comb; } .gp-box { grid-area: box; width: 100%; }
  .gp-say { grid-area: say; text-align: center; font-size: 21px; }
  .gp-btns { grid-area: btn; } .gp-moments { grid-area: mom; margin-top: 4px; } .gp-box-w .gp-note { grid-area: note; }
}
@media (prefers-reduced-motion: reduce) { .chk-bar-w i { transition: none; } }

/* =====================================================================================================================
   Round 20 (interior pages): the film reel ends on screen; Work page fixes; practice names in their brand colours; the end of
   Halden's path (found, booked, measured), moved here from the homepage.
   ===================================================================================================================== */

/* the reel runs in from the left and stops with "Yours", the newest frame, fully on screen */
.ct-film ol { translate: calc(100vw - 100% - clamp(16px, 4vw, 64px)) 0; }
.ct-film .gp img { object-fit: cover; }

/* Work: each practice's name in its own colour */
.k .nm { font-size: 1.08em; }
.nm-hd { color: #1E5443; } .nm-gp { color: #C24766; } .nm-ks { color: #B0129E; }
html[data-ink="light"] .nm-hd { color: #9CCFBE; } html[data-ink="light"] .nm-gp { color: #FFB3C3; } html[data-ink="light"] .nm-ks { color: #FF7BEA; }
/* Work: Halden's phone sits inside its panel, sized by the panel's height */
.ex-hd .ex-ph { top: 9%; bottom: 9%; width: auto; height: auto; }
/* Work: the Kyoto Sound covers centre under the sign */
.ex-ks .ex-art { grid-template-columns: minmax(0, 1fr); }

/* Halden: the end of the path */
.hp .sec-head .p { margin-top: 14px; max-width: 52ch; color: var(--tx2); }
.hp-row { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 28px clamp(32px, 5vw, 90px); align-items: start; padding-block: clamp(48px, 6vw, 90px); border-top: 1px solid var(--rl); }
.hp-row:first-of-type { border-top: 0; }
.hp .r13-st-t { display: grid; gap: 10px; align-content: start; position: sticky; top: 32px; }
.hp .r13-st-n { font: 700 13px var(--sans); letter-spacing: .16em; color: #E3A274; }
.hp .r13-st-t h3 { font: 600 clamp(40px, 4.4vw, 68px)/.95 "Familjen Grotesk", var(--sans); letter-spacing: -.045em; }
.hp .r13-st-d { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--tx); max-width: 32ch; }
.hp .r13-st-c { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); }
.hp .hs { font-size: clamp(11px, 1vw, 14px); }
@media (max-width: 860px) { .hp-row { grid-template-columns: minmax(0, 1fr); } }

/* ---- extracted from the homepage (b13/b14/b15), scoped to .hp ---- */
.hp .r13-lit {box-shadow: var(--rim), var(--cast), 0 24px 54px rgba(0,0,0,.14), var(--glow);}
.hp .r13-tag {font-size: 13px; color: var(--tx2); margin-top: 16px;}
.hp .r13-found {display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(16px, 2.4vw, 36px);}
.hp .r13-srp {width: min(330px, 48%); border-radius: 9% / 4.2%; background: #F3F1EA;}
.hp .r13-srp .hs-in {padding-bottom: 1em; gap: .7em;}
.hp .r13-q {margin: 3.4em 1em 0; padding: .7em 1em; border-radius: 99px; background: #fff; border: 1px solid #D9D5CA; font-size: .9em; color: #3F3A33; display: flex; align-items: center; gap: .6em;}
.hp .r13-q::before {content: ""; width: .8em; height: .8em; border-radius: 50%; border: 2px solid #8A8378; flex: none;}
.hp .r13-q span {display: inline-block; overflow: hidden; white-space: nowrap; max-width: 100%;}
.hp .r13-ad, .hp .r13-lst {margin: 0 1em; padding: .85em 1em; border-radius: .8em; background: #fff; display: grid; gap: .25em;}
.hp .r13-ad small {font-size: .68em; color: #5E584F;}
.hp .r13-ad b {font-size: 1.02em; color: #1F4237; font-weight: 600; line-height: 1.2;}
.hp .r13-ad span {font-size: .78em; color: #44544D;}
.hp .r13-map {position: relative; margin: 0 1em; flex: 1; min-height: 6em; border-radius: .8em; overflow: hidden; background-color: #E7E3D8;
  background-image: linear-gradient(28deg, transparent 47%, #fff 47% 51%, transparent 51%), repeating-linear-gradient(0deg, transparent 0 1.6em, rgba(255,255,255,.75) 1.6em 1.75em), repeating-linear-gradient(90deg, transparent 0 2.1em, rgba(255,255,255,.75) 2.1em 2.25em);}
.hp .r13-map .pin {position: absolute; left: var(--x); top: var(--y); width: 1em; height: 1em; border-radius: 50% 50% 50% 0; background: #A49F94; rotate: -45deg; translate: -50% -100%;}
.hp .r13-map .r13-me {width: 1.4em; height: 1.4em; background: #E3A274; box-shadow: 0 0 0 .4em rgba(227,162,116,.28); z-index: 2;}
.hp .r13-lst b {font-size: 1em; color: #16211D; font-weight: 600;}
.hp .r13-lst span {font-size: .76em; color: #44544D;}
.hp .r13-lst-b {display: flex; gap: .45em; margin-top: .35em;}
.hp .r13-lst-b u {text-decoration: none; font-size: .78em; font-weight: 600; padding: .45em .9em; border-radius: 99px; border: 1px solid #C9C4B7; color: #1F4237;}
.hp .r13-lst-b u:last-child {background: #E3A274; border-color: #E3A274; color: #16211D;}
.hp .r13-found .r13-tag {flex-basis: 100%; margin-top: 0;}
.hp .r13-booked {display: grid; justify-items: start;}
.hp .r13-bk {width: min(340px, 70%); border-radius: 9% / 4.2%;}
.hp .r13-bk button {font-family: inherit; cursor: pointer;}
.hp .r13-bk button:focus-visible {outline: 3px solid #E3A274; outline-offset: 2px;}
.hp .r13-bk .hs-h2 {font-size: 2.6em;}
.hp .r13-seg {display: grid; grid-template-columns: 1fr 1fr; padding: .25em; border-radius: 99px; background: #E7E4DA; margin-top: .4em;}
.hp .r13-seg button {border: 0; background: transparent; padding: .8em 0; border-radius: 99px; font-size: .8em; font-weight: 600; color: #44544D;}
.hp .r13-seg button[aria-pressed="true"] {background: #16211D; color: #F8F8F4;}
.hp .r13-day {margin: 1.3em 0 .55em; font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7A5D42;}
.hp .r13-slots {display: grid; grid-template-columns: 1fr 1fr; gap: .5em;}
.hp .r13-slots button {min-height: 3em; border: 1px solid #CFCABC; background: #fff; border-radius: .8em; font-size: .95em; font-weight: 600; color: #16211D; font-variant-numeric: tabular-nums; transition: background-color .2s ease, color .2s ease;}
.hp .r13-slots button[aria-pressed="true"] {background: #1F4237; border-color: #1F4237; color: #F8F8F4;}
.hp .r13-go {margin-top: auto; width: 100%; border: 0; min-height: 3.3em; font-size: .95em;}
.hp .r13-go:disabled {opacity: .45; cursor: default;}
.hp .r13-bk-d {align-items: flex-start; gap: .6em; padding-top: 3em;}
.hp .r13-bk-d .hs-h2:focus {outline: none;}
.hp .r13-tick {width: 3.4em; height: 3.4em; border-radius: 50%; background: #1F4237; position: relative; animation: r13Pop .6s cubic-bezier(.3, 1.5, .5, 1) both;}
.hp .r13-tick::after {content: ""; position: absolute; left: 34%; top: 26%; width: 22%; height: 38%; border-right: .22em solid #E3A274; border-bottom: .22em solid #E3A274; rotate: 45deg;}
.hp .r13-trail {max-width: 600px; border-radius: 6px; background: #FBF8F2; color: #16120F; padding: clamp(22px, 3vw, 40px); position: relative;}
.hp .r13-trail::before {content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: radial-gradient(circle at 6px 6px, var(--pg) 4px, transparent 4.5px) 0 0 / 16px 12px repeat-x;}
.hp .r13-trail-k {display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8A5A22;}
.hp .r13-trail ol {margin: 14px 0 18px;}
.hp .r13-trail li {display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-top: 1px solid #E6DECF;}
.hp .r13-trail li span {font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6B5D50; padding-top: 3px;}
.hp .r13-trail li b {font-size: clamp(16px, 1.3vw, 19px); font-weight: 650; line-height: 1.3;}
.hp .r13-trail li small {grid-column: 2; font-size: 14px; color: #5E5145;}
.hp .r13-trail:not(.on) .r13-tr-b b, .hp .r13-trail:not(.on) .r13-tr-r b {color: #6F6255; font-weight: 500; font-style: italic;}
.hp .r13-trail.on .r13-tr-b, .hp .r13-trail.on .r13-tr-r {animation: r13Mark 1.6s ease both;}
.hp .r13-trail.on .r13-tr-r {animation-delay: .35s;}
@keyframes r13Mark { 0% { background: rgba(227,162,116,0); } 25% { background: rgba(227,162,116,.28); } 100% { background: rgba(227,162,116,0); } }
.hp .r13-trail-n {font-size: 14px; line-height: 1.5; color: #4A3F36;}
@media (prefers-reduced-motion: reduce) {
  .hp .r13-tick, .hp .r13-trail.on .r13-tr-b, .hp .r13-trail.on .r13-tr-r {animation: none; transition: none;}
}
@media (max-width: 860px) {
  .hp .r13-found {flex-direction: column; align-items: center;}
  .hp .r13-srp {width: min(330px, 92%);}
  .hp .r13-bk {width: min(330px, 92%); justify-self: center;}
  .hp .r13-booked .r13-tag {justify-self: center;}
  .hp .r13-trail li {grid-template-columns: minmax(0, 1fr);}
  .hp .r13-trail li small {grid-column: 1;}
}
.hp .r13-bk [hidden] {display: none !important;}
.hp .r14-demo {position: absolute; z-index: 5; right: 5%; top: 2.2%; padding: .3em .8em; border-radius: 99px; background: #16211D; color: #F3F1EA; font: 700 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;}
.hp .r13-bk .hs-top .hs-menu {visibility: hidden;}
.hp .r14-map {background: none;}
.hp .r14-map svg {position: absolute; inset: 0; width: 100%; height: 100%;}
.hp .r14-map .blk {fill: #E8E3D6;}
.hp .r14-map .park {fill: #D3DCCB;}
.hp .r14-map .st {fill: none; stroke: #FBF9F4; stroke-width: 4;}
.hp .r14-map .riv {fill: none; stroke: #BFD0CB; stroke-width: 26; stroke-linecap: round;}
.hp .r14-map .br {fill: none; stroke: #FBF9F4; stroke-width: 5;}
.hp .r13-trail::before {background: radial-gradient(circle at 6px 6px, var(--hd-sp) 4px, transparent 4.5px) 0 0 / 16px 12px repeat-x;}
/* =====================================================================================================================
   Round 21, Halden: design-led imagery (no people), posters with something to look at, the story ad without stretching, an
   ivory ending that reads clearly, and Halden's feature: a timed offer that books in place.
   ===================================================================================================================== */
/* the feature line in the hero */
.hd-feat { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; line-height: 1.45; color: var(--tx2); max-width: 54ch; }
.hd-feat-k { flex-basis: 100%; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--peach); }
.hd-feat-b { min-height: 44px; padding: 0 20px; border-radius: 99px; border: 0; background: var(--peach); color: var(--hink); font: 650 15px "Familjen Grotesk", var(--sans); cursor: pointer; }
.hd-feat-b:focus-visible { outline: 3px solid var(--tx); outline-offset: 3px; }

/* posters: the words, then the thing they are about */
.r12-pst:has(.pst-art) span, .r12-pst:has(.pst-steps) span { margin-top: 0; }
.r12-pst .pst-art { flex: 1; min-height: 0; width: calc(100% + 20%); max-width: none; margin: 6cqw -10% 6cqw; object-fit: cover; object-position: 50% 50%; display: block; }
.r12-pst .pst-steps { flex: 1; min-height: 0; width: 76%; margin: 5cqw 0 5cqw; }
.r12-pst .pst-steps text { font-family: "Familjen Grotesk", var(--sans); }
/* story ads: the case fills the frame, never stretched */
.story img, .hp .r13-story img { object-fit: cover; object-position: 50% 38%; width: 100%; height: 100%; }
.hp .r13-story { aspect-ratio: 9 / 16; }

/* the ending, on ivory */
.hd-end { margin-top: clamp(80px, 9vw, 150px); }
.hd-end .sec-head .p { margin-top: 12px; color: var(--tx2); max-width: 52ch; }
.hd-report { margin-top: clamp(28px, 3vw, 44px); padding: clamp(22px, 3vw, 40px); border-radius: 14px; background: #FBFAF6; box-shadow: 0 0 0 1px rgba(22,33,29,.08), var(--cast), 0 26px 60px rgba(22,33,29,.1); }
.hd-report-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1F4237; }
.hd-report-k span + span { color: #6B5D50; }
.hd-report .hd-measure li { display: grid; gap: 6px; align-content: start; color: #1F4237; }
.hd-report .hd-measure svg { width: 100%; max-width: 160px; height: auto; margin-bottom: 8px; opacity: .6; }
.hd-report .hd-measure b { color: var(--hink); }
.hd-end .hd-credits { margin-top: clamp(48px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--rl); }
.hd-next { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 40px; padding: clamp(24px, 3vw, 40px); border-radius: 14px; background: #1F4237; color: #F3F1EA; }
.hd-next-p { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.hd-next-p span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #C4CFC1; }
.hd-next-p b { font: 600 clamp(40px, 5vw, 78px)/.95 "Familjen Grotesk", var(--sans); letter-spacing: -.045em; }
.hd-next-p:hover b { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.hd-next-p:focus-visible { outline: 3px solid #F3F1EA; outline-offset: 6px; border-radius: 6px; }
.hd-next-b { display: grid; gap: 12px; justify-items: start; }
.hd-next-b p { font: italic 400 22px/1.2 "Newsreader", Georgia, serif; color: #F3F1EA; }

/* the timed offer */
.hd-offer { position: fixed; z-index: 70; right: 24px; bottom: 24px; width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; border-radius: 18px;
  background: #1F4237; color: #F3F1EA; box-shadow: 0 30px 80px rgba(10,20,16,.45), 0 0 0 1px rgba(243,241,234,.08); font-family: "Familjen Grotesk", var(--sans);
  animation: hdOfferIn .5s cubic-bezier(.2, .9, .3, 1); }
.hd-offer[hidden] { display: none; }
@keyframes hdOfferIn { from { opacity: 0; transform: translateY(26px) scale(.98); } }
.hd-offer-art { height: 132px; overflow: hidden; }
.hd-offer-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.hd-offer-b { padding: 20px 22px 18px; display: grid; gap: 12px; }
.hd-offer-k { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #C4CFC1; }
.hd-offer-k .hs-lock { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; letter-spacing: 0; text-transform: none; color: #F3F1EA; }
.hd-offer-k svg { width: 20px; height: 20px; }
.hd-offer-h { font: 600 30px/1 "Familjen Grotesk", var(--sans); letter-spacing: -.035em; outline: none; }
.hd-offer-h em { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; color: #E3A274; letter-spacing: -.01em; }
.hd-offer-p { font-size: 15.5px; line-height: 1.45; color: #DCE3DA; }
.hd-offer-s1, .hd-offer-s2 { display: grid; gap: 12px; }
.hd-offer-s1[hidden], .hd-offer-s2[hidden] { display: none; }
.hd-offer-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hd-offer-seg button { min-height: 44px; border-radius: 10px; border: 1px solid rgba(243,241,234,.3); background: transparent; color: #F3F1EA; font: 600 15px "Familjen Grotesk", var(--sans); cursor: pointer; }
.hd-offer-seg button[aria-pressed="true"] { background: #F3F1EA; color: #16211D; border-color: #F3F1EA; }
.hd-offer-go { min-height: 50px; border-radius: 99px; border: 0; background: #E3A274; color: #16211D; font: 650 16px "Familjen Grotesk", var(--sans); cursor: pointer; }
.hd-offer-go:disabled { opacity: .5; cursor: default; }
.hd-offer-no { justify-self: center; min-height: 40px; border: 0; background: none; color: #C4CFC1; font: 500 14px "Familjen Grotesk", var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.hd-offer-fine { font-size: 12px; line-height: 1.4; color: #AEBBAF; }
.hd-offer-x { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(22,33,29,.6); color: #F3F1EA; cursor: pointer; }
.hd-offer-x svg { width: 16px; height: 16px; }
.hd-offer button:focus-visible { outline: 3px solid #E3A274; outline-offset: 2px; }
.hd-offer-tab { position: fixed; z-index: 69; right: 20px; bottom: 20px; min-height: 46px; padding: 0 18px; border-radius: 99px; border: 0; background: #1F4237; color: #F3F1EA;
  font: 500 14px "Familjen Grotesk", var(--sans); box-shadow: 0 14px 34px rgba(10,20,16,.35); cursor: pointer; }
.hd-offer-tab b { color: #E3A274; font-weight: 650; margin-right: 6px; }
.hd-offer-tab[hidden] { display: none; }
.hd-offer-tab.tease { min-height: 56px; padding: 0 20px; font-size: 15px; animation: hdOfferIn .5s cubic-bezier(.2, .9, .3, 1); }
.hd-offer-tab.tease u { margin-left: 10px; color: #E3A274; text-underline-offset: 4px; }
.hd-offer-tab.away { visibility: hidden; opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.hd-offer-tab:focus-visible { outline: 3px solid #E3A274; outline-offset: 3px; }

@media (max-width: 860px) {
  .hd-next { grid-template-columns: minmax(0, 1fr); }
  .hd-offer { right: 8px; left: 8px; bottom: 8px; width: auto; border-radius: 20px; }
  .hd-offer-art { display: none; }   /* on a phone the offer stays a compact card */
  .hd-offer-b { padding: 18px 18px 14px; gap: 10px; }
  .hd-offer-x { background: rgba(243,241,234,.12); }
  .hd-offer-h { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { .hd-offer { animation: none; } }

/* =====================================================================================================================
   Round 21: the booking panel (book.js). Golden Hour's paper and type; on phones it rises as a full-height sheet.
   ===================================================================================================================== */
html.bk-on { overflow: hidden; }
.bk { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.bk[hidden] { display: none; }
.bk-scrim { position: absolute; inset: 0; background: rgba(12,10,8,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: bkFade .3s ease; }
.bk-card { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; padding: 26px 28px 22px; border-radius: 22px;
  background: #F6F1E8; color: #15110E; box-shadow: 0 40px 100px rgba(0,0,0,.45); animation: bkIn .4s cubic-bezier(.2, .9, .3, 1); }
@keyframes bkFade { from { opacity: 0; } } @keyframes bkIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.bk-top { display: flex; justify-content: space-between; align-items: center; }
.bk-k { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8A5A22; }
.bk-x { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(21,17,14,.07); color: #15110E; cursor: pointer; }
.bk-x svg { width: 16px; height: 16px; }
.bk-h { font: 400 clamp(30px, 4vw, 40px)/1.02 "Gloock", Georgia, serif; letter-spacing: -.01em; margin: 6px 0 14px; outline: none; }
.bk-steps { display: flex; gap: 8px; margin-bottom: 18px; counter-reset: s; }
.bk-steps li { counter-increment: s; flex: 1; padding-top: 8px; border-top: 3px solid rgba(21,17,14,.12); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6E6155; }
.bk-steps li.on { border-color: #E39A4C; color: #15110E; }
.bk-s { display: grid; gap: 12px; }
.bk-s[hidden] { display: none; }
.bk-l { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4A3F36; margin-top: 4px; }
.bk-l small { font-weight: 500; letter-spacing: 0; text-transform: none; color: #6E6155; }
.bk-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bk-days button { display: grid; justify-items: center; gap: 1px; padding: 8px 0; border-radius: 12px; border: 1px solid rgba(21,17,14,.16); background: #FBF8F2; color: #15110E; cursor: pointer; font: inherit; }
.bk-days small { font-size: 11px; font-weight: 600; color: #6E6155; text-transform: uppercase; letter-spacing: .06em; }
.bk-days b { font-size: 20px; font-weight: 650; line-height: 1.1; }
.bk-days button[aria-pressed="true"] { background: #15110E; color: #F6F1E8; border-color: #15110E; }
.bk-days button[aria-pressed="true"] small { color: #E8D9C6; }
.bk-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 48px; }
.bk-times button { min-height: 44px; border-radius: 10px; border: 1px solid rgba(21,17,14,.16); background: #FBF8F2; color: #15110E; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.bk-times button[aria-pressed="true"] { background: #E39A4C; border-color: #E39A4C; }
.bk-wait { grid-column: 1 / -1; font-size: 15px; color: #4A3F36; padding: 10px 0; }
.bk-go { min-height: 52px; padding: 0 26px; border-radius: 99px; border: 0; background: #15110E; color: #F6F1E8; font-family: inherit; font-size: 16px; font-weight: 650; cursor: pointer; margin-top: 6px; }
.bk-go:disabled { opacity: .4; cursor: default; }
.bk-when { padding: 12px 14px; border-radius: 12px; background: #EDE4D6; font-weight: 600; }
.bk-s2 label { display: grid; gap: 6px; font-size: 14px; font-weight: 650; color: #15110E; }
.bk-s2 label span { font-weight: 500; color: #6E6155; }
.bk-s2 input, .bk-s2 select { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(21,17,14,.25); background: #FFFDF9; color: #15110E; font-family: inherit; font-size: 16px; font-weight: 500; }
.bk-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.bk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bk-back { min-height: 44px; padding: 0 6px; border: 0; background: none; color: #4A3F36; font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.bk-err { padding: 10px 12px; border-radius: 10px; background: #F6DDD5; color: #6E1F12; font-size: 14px; }
.bk-err a, .bk-wait a { color: inherit; font-weight: 650; }
.bk-fine, .bk-demo { font-size: 12.5px; color: #6E6155; }
.bk-demo { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(21,17,14,.18); }
.bk-tick { width: 56px; height: 56px; border-radius: 50%; background: #E39A4C; position: relative; }
.bk-tick::after { content: ""; position: absolute; left: 20px; top: 14px; width: 12px; height: 22px; border: solid #15110E; border-width: 0 4px 4px 0; rotate: 45deg; }
.bk-done { font: 400 34px/1 "Gloock", Georgia, serif; outline: none; }
.bk-sum { font-size: 16px; line-height: 1.5; color: #4A3F36; }
.bk button:focus-visible, .bk input:focus-visible, .bk select:focus-visible, .bk a:focus-visible { outline: 3px solid #15110E; outline-offset: 2px; }
@media (max-width: 600px) {
  .bk { padding: 0; place-items: end stretch; }
  .bk-card { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .bk-two { grid-template-columns: minmax(0, 1fr); }
  .bk-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .bk-scrim, .bk-card { animation: none; } }

/* =====================================================================================================================
   Round 22 (homepage and interior pages): Johnny's photographs framed where they read best; the Halden path without step numbers.
   ===================================================================================================================== */
.hs-photo img { object-position: 42% 74%; }           /* the smile, on the Halden phone and desk screens */
.hsb-r img { object-position: 68% 50%; }              /* the patient in the chair, on the board */
.story img, .hp .r13-story img { object-position: 58% 72%; }
.r12-pst .pst-art { object-position: 50% 32%; }
.hd-offer-art img { object-position: 64% 42%; }
.hp .r13-st-n { display: none; }

/* =====================================================================================================================
   Kyoto Sound (Round 22): the label's own world. Night-city ground at every hour; the neon sign is quiet by day and switches on
   after dark (--g from the shared light system). Dela Gothic One for display, Space Mono for labels.
   ===================================================================================================================== */
/* self-hosted (the site's policy allows only its own fonts): Latin subsets from Google Fonts, SIL Open Font License, 17 Oct 2026 */
@font-face { font-family: "Dela Gothic One"; font-style: normal; font-weight: 400; font-display: swap; src: url("ks-dela-gothic-one.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("ks-space-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("ks-space-mono-700.woff2") format("woff2"); }
body.p-ks { --pg: #0B0A10; --tx: #F4ECE2; --tx2: #C9BFD6; --rl: rgba(244,236,226,.14); --neon: #FF3FD8; --cyan: #66E8F2;
  background: radial-gradient(120% 60% at 50% -10%, #241431, #0B0A10 60%) fixed, #0B0A10; color: var(--tx); }
.p-ks .sh, .p-ks .sf { --tx: #F4ECE2; --tx2: #C9BFD6; --rl: rgba(244,236,226,.14); color: var(--tx); }
.ksx-mono, .ksx-k { font-family: "Space Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); }
.ksx-k { display: flex; flex-wrap: wrap; gap: 6px 18px; } .ksx-k span:first-child { color: var(--neon); }
.ksx-h2 { font: 400 clamp(38px, 5vw, 80px)/1 "Dela Gothic One", "Hanken Grotesk", sans-serif; letter-spacing: -.01em; margin-top: 14px; text-wrap: balance; }
.ksx-p { margin-top: 14px; max-width: 52ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--tx2); }
.ksx-sec { padding-block: clamp(80px, 9vw, 150px); }
.ksx-head { margin-bottom: clamp(32px, 4vw, 60px); }

/* hero: the sign is the title */
.ksx-hero { padding-block: clamp(30px, 4vw, 60px) clamp(40px, 5vw, 80px); }
.ksx-sign { position: relative; width: min(980px, 100%); margin: clamp(28px, 5vw, 80px) auto clamp(24px, 4vw, 56px); }
.ksx-sign img { display: block; width: 100%; height: auto;
  opacity: calc(.6 + var(--g, 0) * .4);
  filter: drop-shadow(0 0 calc(1px + var(--g, 0) * 3px) rgba(255,150,235,calc(.4 + var(--g, 0) * .55))) drop-shadow(0 0 calc(6px + var(--g, 0) * 18px) rgba(255,40,200,calc(.15 + var(--g, 0) * .45)));
 }
.ksx-sign { animation: ksxOn 2.4s steps(1) .3s both; }   /* the tubes catch, flicker and hold; the brightness itself follows the light */
@keyframes ksxOn { 0% { opacity: .3; } 8% { opacity: 1; } 12% { opacity: .35; } 20% { opacity: 1; } 24% { opacity: .5; } 34%, 100% { opacity: 1; } }
.ksx-hero-b { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 90px); align-items: start; }
.ksx-lede { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; color: var(--tx); max-width: 40ch; }
.ksx-lede b { color: var(--neon); font-weight: 700; }
.ksx-feat { display: grid; gap: 8px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(255,63,216,.35); background: rgba(255,63,216,.06); color: var(--tx2); font-size: 15.5px; line-height: 1.45; }
.ksx-feat .ksx-mono { color: var(--neon); }
.ksx-feat a { justify-self: start; color: var(--tx); font-weight: 700; text-underline-offset: 5px; }

/* the crate */
.ksx-crate { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px clamp(32px, 5vw, 90px); align-items: center; }
.ksx-deck { display: grid; gap: 18px; }
.ksx-tt { position: relative; aspect-ratio: 1.25; border-radius: 22px; background: linear-gradient(160deg, #1D1A24, #121018); box-shadow: inset 0 0 0 1px rgba(244,236,226,.08), 0 40px 80px rgba(0,0,0,.5); overflow: hidden; }
.ksx-glow { position: absolute; inset: -20%; background: radial-gradient(40% 40% at 42% 50%, var(--rel, #2FC6C9), transparent 70%); opacity: .28; mix-blend-mode: screen; transition: background .6s ease; pointer-events: none; }
.ksx-platter { position: absolute; left: 7%; top: 50%; width: 70%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: #0A090D; box-shadow: 0 0 0 6px #26222E, 0 20px 40px rgba(0,0,0,.6); }
.ksx-rec { position: absolute; inset: 4%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #111014 0 1.2px, #1C1A21 1.8px 2.6px), conic-gradient(from 30deg, rgba(255,255,255,.08), transparent 20%, rgba(255,255,255,.06) 50%, transparent 70%);
  background-blend-mode: screen; animation: ksxSpin 1.8s linear infinite; animation-play-state: var(--spin, running); }
.ksx-rec.drop { animation: ksxDrop .55s cubic-bezier(.2, .9, .3, 1), ksxSpin 1.8s linear infinite; }
.ksx-rec, .ksx-rec.drop { animation-play-state: var(--spin, running); }   /* after the shorthand, so Stop holds */
@keyframes ksxSpin { to { rotate: 360deg; } }
@keyframes ksxDrop { from { scale: .82; opacity: .2; } }
.ksx-lab { position: absolute; inset: 33%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #0A090D; }
.ksx-lab img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksx-lab::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; translate: -50% -50%; border-radius: 50%; background: #0A090D; }
.ksx-arm { position: absolute; right: 9%; top: 12%; width: 8%; height: 66%; transform-origin: 50% 6%; rotate: var(--arm, 22deg); transition: rotate .8s cubic-bezier(.3, 1.2, .4, 1); }
.ksx-arm::before { content: ""; position: absolute; left: 50%; top: 0; width: 64%; aspect-ratio: 1; translate: -50% -30%; border-radius: 50%; background: #3A3542; box-shadow: inset 0 0 0 3px #4C4656; }
.ksx-arm i { position: absolute; left: 50%; top: 4%; width: 10%; height: 92%; translate: -50% 0; border-radius: 99px; background: linear-gradient(#CFC7D9, #8D8598); }
.ksx-arm i::after { content: ""; position: absolute; left: 50%; bottom: -4%; width: 360%; height: 9%; translate: -60% 0; border-radius: 3px; background: #CFC7D9; rotate: -18deg; }
.ksx-sleeves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ksx-sleeves button { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #000; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.5); transition: translate .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease; }
.ksx-sleeves img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .7; transition: opacity .3s ease; }
.ksx-sleeves button:hover img, .ksx-sleeves button[aria-pressed="true"] img { opacity: 1; }
.ksx-sleeves button[aria-pressed="true"] { translate: 0 -8px; box-shadow: 0 0 0 2px var(--neon), 0 0 24px rgba(255,63,216,.45), 0 14px 28px rgba(0,0,0,.5); }
.ksx-sleeves button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.ksx-now { display: grid; gap: 10px; align-content: center; }
.ksx-title { font: 400 clamp(40px, 4.6vw, 76px)/1 "Dela Gothic One", sans-serif; margin-top: 6px; }
.ksx-artist { font: 700 18px "Space Mono", monospace; color: var(--cyan); }
.ksx-play { justify-self: start; min-height: 46px; margin-top: 10px; padding: 0 20px; border-radius: 99px; border: 1px solid rgba(244,236,226,.3); background: transparent; color: var(--tx); font: 700 13px "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ksx-play:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.ksx-note { margin-top: 12px; color: var(--tx2); font-size: 15px; line-height: 1.5; max-width: 40ch; }

/* the wall */
.ksx-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: clamp(10px, 1.4vw, 18px); }
.ksx-tile { margin: 0; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 1; box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.ksx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksx-tile-sign { grid-column: span 2; aspect-ratio: auto; display: grid; place-items: center; padding: 8% 6%; background: radial-gradient(80% 90% at 50% 50%, #1D0E22, #050407); }
.ksx-tile-sign img { object-fit: contain; height: auto; filter: drop-shadow(0 0 6px rgba(255,110,225,.9)) drop-shadow(0 0 30px rgba(255,40,200,.55)); }
.ksx-tile-lab { grid-column: span 2; grid-row: span 2; }

/* growth */
.ksx-grow-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 90px); align-items: center; }
.ksx-big-rec { position: relative; aspect-ratio: 1; border-radius: 50%; background: #0A090D; box-shadow: 0 0 0 8px #1D1A24, 0 40px 80px rgba(0,0,0,.6); animation: ksxSpin 9s linear infinite; }
.ksx-big-rec svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ksx-big-rec circle { fill: none; stroke: #24212B; stroke-width: 1.4; transition: stroke .5s ease; }
.ksx-big-rec circle.on { stroke: var(--neon); filter: drop-shadow(0 0 2px rgba(255,63,216,.8)); }
.ksx-130 { margin-top: 8px; font: 400 clamp(26px, 2.4vw, 36px)/1 "Dela Gothic One", sans-serif; color: var(--tx2); }
.ksx-130 b { display: block; font-weight: 400; font-size: clamp(84px, 10vw, 170px); line-height: .9; color: var(--tx); text-shadow: 0 0 40px rgba(255,63,216,.35); }
.ksx-ch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ksx-ch li { padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(102,232,242,.4); font: 700 13px "Space Mono", monospace; color: var(--cyan); }

/* end */
.ksx-credits { display: grid; gap: 8px; max-width: 70ch; padding-top: 20px; border-top: 1px solid var(--rl); color: var(--tx2); font-size: 15px; }
.ksx-next { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; padding: clamp(24px, 3vw, 40px); border-radius: 18px;
  background: linear-gradient(135deg, #FFF4E2, #FCE4E9); color: #2E2342; }
.ksx-next-p { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.ksx-next-p .ksx-mono { color: #5B4C66; }
.ksx-next-p b { font: italic 500 clamp(40px, 5vw, 76px)/1 "Newsreader", Georgia, serif; letter-spacing: -.02em; }
.ksx-next-p:hover b { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.ksx-next-p:focus-visible { outline: 3px solid #2E2342; outline-offset: 6px; border-radius: 6px; }

@media (max-width: 860px) {
  .ksx-hero-b, .ksx-crate, .ksx-grow-g { grid-template-columns: minmax(0, 1fr); }
  .ksx-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ksx-big-rec { width: min(78%, 340px); justify-self: center; }
  .ksx-sleeves { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ksx-sign, .ksx-sign img, .ksx-rec, .ksx-rec.drop, .ksx-big-rec { animation: none; } .ksx-arm { transition: none; } }

/* ---------- Round 23: the QR tree (contact page) ---------- */
.ct-tree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px clamp(32px, 6vw, 110px); align-items: center; padding-block: clamp(80px, 9vw, 140px); }
.tr-stage { margin: 0; width: min(100%, 540px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center;
  filter: drop-shadow(0 22px 26px rgba(58, 37, 16, .16)); transition: filter 1.2s ease; }
.tr-stage canvas { display: block; }
.tr-stage.tr-night { filter: drop-shadow(0 0 28px rgba(242, 182, 106, .42)) drop-shadow(0 0 80px rgba(242, 182, 106, .18)); }
.tr-copy { display: grid; gap: 16px; justify-items: start; }
.tr-copy .p { margin: 0; }
.tr-phone { display: none; }
@media (hover: none) and (pointer: coarse) { .tr-desk { display: none; } .tr-phone { display: block; } }
.tr-flip { font: 650 15px/1 var(--sans); padding: 13px 20px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.tr-flip:hover { background: rgba(127, 127, 127, .12); }
.tr-flip:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.tr-pledge { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(127, 127, 127, .35); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 760px) {
  .ct-tree { grid-template-columns: minmax(0, 1fr); padding-block: 72px; }
  .tr-copy { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .tr-stage { transition: none; } }

/* Kyoto Sound, Round 24: the crate plays the label's own songs. Progress line, time and controls beside the deck. */
.ksx-sleeves { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ksx-bar { height: 4px; border-radius: 99px; background: rgba(244,236,226,.14); overflow: hidden; margin-top: 12px; max-width: 420px; }
.ksx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--neon), var(--cyan)); }
.ksx-time { margin-top: 2px; }
.ksx-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ksx-play { margin-top: 0; min-width: 120px; background: var(--neon); color: #0B0A10; border-color: var(--neon); }
.ksx-play[aria-pressed="true"] { background: transparent; color: var(--tx); border-color: rgba(244,236,226,.3); }
.ksx-skip { min-height: 46px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(244,236,226,.3); background: transparent; color: var(--tx); font: 700 13px "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ksx-skip:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Round 25: About opens with the tagline full width, then the intro and figures beside Johnny's portrait */
.ab-hero.ab-solo { grid-template-columns: minmax(0, 1fr); }
.ab-hero.ab-solo > div { max-width: 1240px; }
.ab-solo .lede { max-width: 640px; }
.ab-short { margin-top: 22px; font: 400 clamp(24px, 2.2vw, 32px)/1.25 var(--display); color: var(--tx); }
.fp-exp .ab-figs { margin: 24px 0 14px; }
.fp-exp .ab-figs dt { font-size: clamp(26px, 2.1vw, 34px); }
/* the opening reads as a tagline: two lines, one per sentence, with room between them; the second line in warm amber */
.ab-tag { font-size: clamp(40px, 5vw, 76px); line-height: 1.06; letter-spacing: -.012em; text-wrap: initial; }
.ab-tag span { display: block; }
.ab-tag .ab-l2 { color: #7A3F1E; }
html[data-ink="light"] .ab-tag .ab-l2 { color: #F2B66A; }
/* the golden-hour chapter title in solid amber (a gradient fill can't be contrast-checked) */
.ab-gold .h2 { background: none; color: #7A3F1E; }
html[data-ink="light"] .ab-gold .h2 { background: none; color: #F2B66A; }
.ab-hero.ab-solo { padding-bottom: clamp(28px, 3vw, 44px); }
.ab-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: 40px clamp(32px, 6vw, 110px); align-items: start; padding-bottom: clamp(56px, 7vw, 110px); }
.ab-intro .lede { max-width: 620px; }
.ab-figs2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin: 40px 0 0; }
.ab-intro .ab-photo { max-width: 440px; justify-self: end; width: 100%; }
@media (max-width: 860px) {
  .ab-intro { grid-template-columns: minmax(0, 1fr); }
  .ab-intro .ab-photo { justify-self: start; max-width: 360px; }
  .ab-figs2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Round 26: About as the light room. The page is one wall; the sun through the blinds (p26/about26.js) moves across it as
   the day in the copy moves. The type is set large and quiet so the light has room: a full-screen opening with the portrait,
   then one screen per part of the day, the time of day set huge, the story beside it. */
.a26-room { position: fixed; left: -80px; top: -80px; width: calc(100% + 160px); height: calc(100% + 160px); z-index: 0; pointer-events: none;
  filter: blur(var(--a26-blur, 2px)); transition: filter .6s ease; }
.a26-shade { mix-blend-mode: multiply; opacity: var(--a26-shade, 0); }
.a26-sun { mix-blend-mode: screen; }
.p-ab main, .p-ab .sf { position: relative; z-index: 1; }

/* the opening: golden hour, the portrait in its own light */
.a26-open.ab-ch { min-height: calc(100svh - 76px); display: grid; align-content: space-between; gap: clamp(32px, 4vh, 64px);
  padding-block: clamp(16px, 2.4vw, 40px) clamp(28px, 4vh, 56px); border-top: 0; }
.a26-open-g { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .6fr); gap: 40px clamp(40px, 6vw, 120px); align-items: end; }
.a26 .ab-tag { margin-top: clamp(18px, 2.2vw, 32px); font-size: clamp(48px, min(6.4vw, 10.5svh), 116px); line-height: .93; letter-spacing: -.024em; text-wrap: initial; }
.a26 .ab-tag span { display: block; }
.a26 .ab-tag .ab-l2 { color: #7A3F1E; }
html[data-ink="light"] .a26 .ab-tag .ab-l2 { color: #F2B66A; }
.a26-open .lede { margin-top: clamp(20px, 2.6vw, 34px); max-width: 44ch; }
.a26-portrait { display: grid; gap: 14px; justify-self: end; width: min(100%, 440px, 46svh); }
.a26-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px;
  box-shadow: var(--cast), 0 34px 60px -44px rgba(20, 12, 10, .5); }
.a26-portrait figcaption { position: relative; padding-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx); }
.a26 .a26-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin: 0 auto; }
.a26 .a26-figs div { padding-top: 18px; border-top: 1px solid var(--tx); }
.a26 .a26-figs dt { font: 400 clamp(36px, min(4vw, 7svh), 68px)/.95 var(--display); letter-spacing: -.02em; }
.a26 .a26-figs dd { margin-top: 10px; font-size: 15px; max-width: 24ch; }

/* the day: one screen each, the time of day set large, the story beside it */
.a26 .ab-ch.a26-ch { min-height: 100svh; display: grid; align-items: center; padding-block: clamp(96px, 12vw, 180px); border-top: 0; }
.a26-ch-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 7vw, 140px); align-items: start; }
.a26 .ab-t { position: sticky; top: 16vh; gap: 18px; }
.a26 .ab-t span:first-child { font: 400 clamp(60px, 8.6vw, 156px)/.86 var(--display); letter-spacing: -.03em; }
.a26 .ab-t span + span { letter-spacing: .2em; }
.a26-ch:nth-child(even) .ab-t { order: 2; text-align: right; }
.a26 .a26-ch .h2 { font-size: clamp(34px, 3.6vw, 60px); margin-bottom: 26px; }
.a26 .a26-ch .p { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; }
.a26 .a26-ch .p + .p { margin-top: 16px; }
.a26 .ab-gold .ab-t span:first-child, .a26 .ab-gold .h2 { background: none; color: #7A3F1E; }
html[data-ink="light"] .a26 .ab-gold .ab-t span:first-child, html[data-ink="light"] .a26 .ab-gold .h2 { color: #F2B66A; }
.a26 .ab-gold .h2 { font-size: clamp(44px, 5vw, 88px); }
.a26 .ab-short { margin-top: 30px; font: 400 clamp(24px, 2.2vw, 34px)/1.22 var(--display); color: var(--tx); max-width: 22ch; }
.a26 .ab-vals li { padding: 22px 0; }
.a26 .ab-vals b { font-size: clamp(22px, 1.9vw, 28px); margin-bottom: 6px; }

.a26 .a26-end { min-height: 70svh; align-content: center; padding-block: clamp(80px, 10vw, 160px); }
.a26-end .h2 { font-size: clamp(44px, 5.6vw, 96px); max-width: 14ch; }
.a26-end .note { margin-top: 10px; }

@media (max-width: 860px) {
  .a26-open.ab-ch { min-height: 0; }
  .a26-open-g { grid-template-columns: minmax(0, 1fr); }
  .a26-portrait { justify-self: stretch; width: 100%; }
  .a26 .a26-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .a26 .ab-ch.a26-ch { min-height: 0; padding-block: 88px; }
  .a26-ch-g { grid-template-columns: minmax(0, 1fr); }
  .a26 .ab-t { position: static; }
  .a26-ch:nth-child(even) .ab-t { order: 0; text-align: left; }
  .a26 .ab-t span:first-child { font-size: clamp(54px, 15vw, 88px); }
}
@media (prefers-reduced-motion: reduce) { .a26-room { transition: none; } }

/* Halden screens */
/* ---------- Halden, round 10: the concept's own website and campaign, drawn live in HTML ----------
   New idea: "Quietly straight." Adults want straight teeth without anyone noticing the treatment. The site answers the three
   real worries in order: will people see it (home), how much of my life will it take (the year), what will it cost (the price).
   Every screen scales with its frame: 1em is 16px on a 390px phone and on a 1440px desktop. People and prices are invented. */
.hs, .hsd, .hsb { container-type: inline-size; position: relative; overflow: hidden; font-family: "Familjen Grotesk", var(--sans); -webkit-font-smoothing: antialiased; }
.hs { aspect-ratio: 390 / 844; background: #F3F1EA; color: #16211D; }
.hs-in { position: absolute; inset: 0; font-size: calc(100cqw / 24.375); display: flex; flex-direction: column; }
.hs em, .hsd em, .hsb em { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.hs-mk { width: 1.55em; height: 1.55em; flex: none; }
.hs-lock { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; font-size: 1.12em; letter-spacing: -.02em; }
.hs-top { display: flex; justify-content: space-between; align-items: center; padding: 3.4em 1.4em .9em; position: relative; z-index: 2; color: #1F4237; }
.hs-top-lt { color: #F8F8F4; }
.hs-menu { font-size: .8em; font-weight: 600; padding: .5em 1em; border-radius: 99px; border: 1px solid currentColor; opacity: .9; }
.hs-eb { font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8A6B4E; }
.hs-h1 { font-weight: 600; font-size: 3.7em; line-height: .9; letter-spacing: -.045em; margin: .18em 0 .28em; }
.hs-h2 { font-weight: 600; font-size: 2.45em; line-height: .95; letter-spacing: -.04em; margin: .2em 0 .3em; }
.hs-h1 em, .hs-h2 em { color: #E3A274; }
.hs-year .hs-h2 em { color: #1F4237; }
.hs-sub { font-size: .98em; line-height: 1.4; color: #44544D; max-width: 20em; }
.hs-btns { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1.2em; }
.hs-b { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9em; padding: 0 1.15em; border-radius: 99px; font-size: .86em; font-weight: 600; }
.hs-b1 { background: #E3A274; color: #16211D; }
.hs-b2 { border: 1px solid rgba(248,248,244,.5); color: #F8F8F4; }
.hs-wide { width: 100%; margin-top: auto; }
.hs-bar { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .5em; padding: .7em 1em 1.6em; background: #16211D; color: #F8F8F4; font-size: .86em; font-weight: 600; }
.hs-bar span { display: grid; place-items: center; min-height: 2.8em; border-radius: 99px; border: 1px solid rgba(248,248,244,.3); }
.hs-bar .on { background: #F8F8F4; color: #16211D; border-color: transparent; }
.hs-pad { padding: .6em 1.4em 1.2em; display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* home: the photograph does the persuading; the type sits on the spruce it fades into */
.hs-home { background: #1F4237; color: #F8F8F4; }
.hs-photo { position: absolute; inset: 0 0 38% 0; }
.hs-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.hs-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,33,29,.45) 0%, rgba(22,33,29,0) 22%, rgba(31,66,55,0) 58%, #1F4237 100%); }
.hs-home-c { position: relative; z-index: 1; margin-top: auto; padding: 0 1.4em 1.4em; }
.hs-home .hs-eb { color: #E3A274; }
.hs-home .hs-sub { color: #C4CFC1; }
.hs-home .hs-bar { margin-top: 0; }

/* the year: twelve months, seven visits, at a glance */
.hs-year .hs-sub { margin-bottom: 1.1em; }
.hs-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; }
.hs-cal li { position: relative; aspect-ratio: 1; border-radius: .55em; background: #E7E4DA; display: flex; align-items: flex-end; gap: .25em; padding: .45em; }
.hs-cal li:nth-child(-n+4) { background: #DCE3DA; }
.hs-cal i { position: absolute; top: .45em; left: .55em; font-style: normal; font-size: .7em; font-weight: 600; color: #6B766F; }
.hs-cal .end { background: #1F4237; } .hs-cal .end i { color: #C4CFC1; }
.hs s { display: inline-block; width: .8em; height: .8em; border-radius: 50%; text-decoration: none; }
.hs s.p { background: #1F4237; } .hs s.v { box-shadow: inset 0 0 0 .14em #1F4237; } .hs s.f { background: #E3A274; }
.hs-key { display: flex; gap: 1em; margin: .8em 0 1em; font-size: .72em; color: #44544D; }
.hs-key span { display: inline-flex; align-items: center; gap: .4em; }
.hs-track { padding: .9em 0 1em; border-top: 1px solid #D6D2C6; }
.hs-track span { display: block; height: .4em; border-radius: 99px; background: linear-gradient(90deg, #1F4237 calc(var(--k) * 100%), #DCD8CC 0); }
.hs-track p { display: flex; justify-content: space-between; margin-top: .55em; font-size: .74em; color: #44544D; }
.hs-track b { color: #16211D; }
.hs-next { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .9em 1em; border-radius: 1em; background: #fff; box-shadow: 0 .3em 1.4em rgba(22,33,29,.08); }
.hs-next p { display: grid; font-size: .8em; line-height: 1.3; } .hs-next small { font-size: .82em; color: #8A6B4E; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hs-next span:not(.hs-b) { color: #44544D; }
.hs-year .hs-bar { margin-top: 1em; }

/* the price: one number, on paper, on the spruce */
.hs-price { background: #1F4237; color: #F8F8F4; }
.hs-price .hs-eb { color: #E3A274; }
.hs-card { margin-top: .9em; padding: 1em 1.1em 1.1em; border-radius: 1.1em; background: #F8F8F4; color: #16211D; }
.hs-seg { display: grid; grid-template-columns: 1fr 1fr; padding: .25em; border-radius: 99px; background: #E7E4DA; font-size: .78em; font-weight: 600; text-align: center; }
.hs-seg span { padding: .55em 0; border-radius: 99px; color: #44544D; } .hs-seg .on { background: #16211D; color: #F8F8F4; }
.hs-amt { display: flex; align-items: flex-end; gap: .5em; margin-top: .55em; }
.hs-amt b { font-size: 4.2em; font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.hs-amt span { font-size: .8em; line-height: 1.25; color: #44544D; padding-bottom: .55em; }
.hs-tot { font-size: .8em; color: #44544D; padding-bottom: .8em; border-bottom: 1px solid #DCD8CC; }
.hs-inc { display: grid; gap: .5em; padding-top: .8em; font-size: .84em; }
.hs-inc li { display: flex; gap: .55em; align-items: baseline; } .hs-inc li::before { content: ""; flex: none; width: .5em; height: .28em; border-left: .14em solid #1F4237; border-bottom: .14em solid #1F4237; transform: rotate(-45deg) translateY(-.15em); }
.hs-fine { font-size: .74em; color: #C4CFC1; margin: .9em 0 1em; }
.hs-price .hs-bar { margin-top: 1em; }

/* desktop home: the same idea at 1440 */
.hsd { aspect-ratio: 16 / 10; background: #1F4237; color: #F8F8F4; }
.hsd-in { position: absolute; inset: 0; font-size: calc(100cqw / 90); display: grid; grid-template-columns: 1.05fr 1fr; }
.hsd-l { display: flex; flex-direction: column; padding: 2.2em 4em 2.6em; }
.hsd-nav { display: flex; justify-content: space-between; align-items: center; }
.hsd-links { display: flex; gap: 2em; font-size: .9em; color: #C4CFC1; }
.hsd-c { margin-block: auto; }
.hsd .hs-eb { color: #E3A274; } .hsd .hs-h1 { font-size: 6.4em; } .hsd .hs-sub { color: #C4CFC1; font-size: 1.15em; max-width: 26em; }
.hsd .hs-b { font-size: 1em; }
.hsd-foot { font-size: .95em; color: #C4CFC1; padding-top: 1.2em; border-top: 1px solid rgba(196,207,193,.25); } .hsd-foot b { color: #F8F8F4; }
.hsd-r img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* billboard */
.hsb { aspect-ratio: 2 / 1; background: #1F4237; color: #F8F8F4; }
.hsb-in { position: absolute; inset: 0; font-size: calc(100cqw / 60); display: grid; grid-template-columns: 1fr 1.15fr; }
.hsb-l { display: flex; flex-direction: column; justify-content: space-between; padding: 2.4em 2.6em; }
.hsb .hs-lock { font-size: 1.5em; } .hsb .hs-h1 { font-size: 6em; } .hsb-s { font-size: 1em; color: #C4CFC1; }
.hsb-r img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }