/* The page under the hero. Same ink and cream; laterite and gulmohar red as the second voice. */
:root {
  --laterite: #4a2417;
  --laterite-deep: #2f160f;
  --gulmohar: #e8542d;
  --rule: rgba(255, 246, 228, .16);
  --fg-soft: rgba(255, 246, 228, .84);
  --shell: 1280px;
  --section-y: clamp(96px, 11vw, 160px);
}
/* Cream sections: the same page in daylight. Gold darkens so it still reads. */
.light { background: var(--cream); color: var(--ink); --rule: rgba(23, 28, 20, .14); --muted: #5f6154; --gold: #9a6b16; --fg-soft: rgba(23, 28, 20, .8); }
.light ::selection { background: var(--ink); color: var(--cream); }

/* Sticky top bar, shown once the hero has scrolled away. It reads like a book's running head:
   chapter number and name, the next chapter, a five-tick index, and a Menu that drops the contents page.
   Over cream sections it turns cream itself (.is-light). */
.topbar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; transform: translateY(-100%); transition: transform 480ms cubic-bezier(.16, 1, .3, 1); color: var(--cream); --tb-bg: rgba(23, 28, 20, .95); --tb-rule: rgba(255, 246, 228, .12); --tb-gold: var(--gold); }
.topbar.is-visible { transform: none; }
.topbar.is-light { color: var(--ink); --tb-bg: rgba(255, 246, 228, .985); --tb-rule: rgba(23, 28, 20, .12); --tb-gold: #9a6b16; }
/* The hero's own header: the same pieces, static, a little below the top edge. It scrolls away with the garden. */
.site-header { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; margin-top: 22px; padding-inline: var(--gutter); color: var(--cream); transition: opacity 1100ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1); }
.is-dawn .site-header { opacity: 0; transform: translateY(-10px); }
/* A faint dusk from the top edge so the header reads over bright leaves; gone by 190px. */
.site-header::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -22px; height: 190px; pointer-events: none; background: linear-gradient(180deg, rgba(23, 28, 20, .42) 0%, rgba(23, 28, 20, .22) 40%, rgba(23, 28, 20, 0) 100%); }
.topbar-tag { margin: 0; justify-self: center; font: italic 400 17px/1 "Fraunces", Georgia, serif; letter-spacing: .005em; color: rgba(255, 246, 228, .88); white-space: nowrap; }
.tt-amp { font-family: var(--display-font); font-style: normal; color: var(--gold); margin: 0 .1em; }
/* The menu (hero header and sticky bar alike): a frosted panel that unrolls from under its header, which stays in
   place above it, with the chapters side by side. Over cream sections the sticky one turns to cream glass. */
.site-header.is-open { z-index: 8; }
.hm { position: absolute; top: calc(100% + 12px); left: var(--gutter); right: var(--gutter); visibility: hidden; pointer-events: none; transition: visibility 0s 560ms; }
.is-open > .hm { visibility: visible; pointer-events: auto; transition: none; }
.hm-panel { --hm-bg: rgba(23, 28, 20, .6); --hm-rule: rgba(255, 246, 228, .12); --hm-soft: rgba(255, 246, 228, .66); padding: 24px 8px 20px; border: 1px solid rgba(239, 197, 131, .24); border-radius: 18px; background: var(--hm-bg); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25);
  /* a lit top edge, a real drop shadow, and a wide soft dim over the page behind so the panel stands clear of it */
  box-shadow: inset 0 1px 0 rgba(255, 246, 228, .08), 0 26px 60px -18px rgba(0, 0, 0, .7), 0 0 0 100vmax rgba(15, 23, 16, .3);
  opacity: 0; transform: translateY(-10px); transition: opacity 260ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1), background-color 320ms ease; }
.is-open > .hm .hm-panel { opacity: 1; transform: none; }
.topbar.is-light .hm-panel { --hm-bg: rgba(255, 246, 228, .88); --hm-rule: rgba(23, 28, 20, .12); --hm-soft: rgba(23, 28, 20, .62); border-color: rgba(154, 107, 22, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 26px 60px -20px rgba(74, 36, 23, .45), 0 0 0 100vmax rgba(23, 28, 20, .18); }
/* the hero header's own pieces stay above that dim */
.site-header > .topbar-brand, .site-header > .topbar-tag, .site-header > .topbar-right { position: relative; z-index: 1; }
.hm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hm-list li { border-left: 1px solid var(--hm-rule); opacity: 0; transform: translateY(12px); transition: opacity 360ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1); }
.hm-list li:first-child { border-left: 0; }
.is-open > .hm .hm-list li { opacity: 1; transform: none; }
.is-open > .hm .hm-list li:nth-child(2) { transition-delay: 50ms; } .is-open > .hm .hm-list li:nth-child(3) { transition-delay: 100ms; }
.is-open > .hm .hm-list li:nth-child(4) { transition-delay: 150ms; } .is-open > .hm .hm-list li:nth-child(5) { transition-delay: 200ms; }
.hm-list a { display: grid; align-content: start; gap: 10px; height: 100%; padding: 4px 22px 8px; color: inherit; }
.hm-n { font: 400 13px/1 var(--display-font); letter-spacing: .08em; color: var(--tb-gold, var(--gold)); transition: color 200ms ease; }
.hm-t { font: 400 clamp(22px, 2vw, 28px)/1 var(--display-font); letter-spacing: -.01em; transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
.hm-d { font: italic 400 15px/1.35 "Fraunces", Georgia, serif; color: var(--hm-soft); }
.hm-list a:hover .hm-n, .hm-list a:focus-visible .hm-n { color: var(--gulmohar); }
.hm-list a:hover .hm-t, .hm-list a:focus-visible .hm-t { transform: translateX(4px); }
/* the sticky bar's menu marks the chapter you are reading */
.hm-list .is-current .hm-n { color: var(--gulmohar); }
.hm-list .is-current .hm-t::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 .5em 8px; border-radius: 50%; background: var(--gulmohar); }
.hm-foot { display: flex; align-items: center; gap: 24px; margin: 20px 22px 0; padding-top: 18px; border-top: 1px solid var(--hm-rule); }
.hm-write { margin: 0 auto 0 0; font-size: 14.5px; }
.hm-write span { margin-right: 6px; font: italic 400 16px/1 "Fraunces", Georgia, serif; color: var(--hm-soft); }
.hm-mail { color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--hm-rule); }
.hm-mail:hover, .hm-mail:focus-visible { text-decoration-color: currentColor; }
.hm-cta { min-height: 44px; gap: 18px; padding: 0 20px; font-size: 14px; }
.hm-cta svg { width: 16px; height: 16px; }
.topbar.is-light .hm-cta { background: var(--ink); color: var(--cream); }
.topbar.is-light .hm-cta:hover, .topbar.is-light .hm-cta:focus-visible { color: var(--ink); }
.topbar-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding-inline: var(--gutter); background: var(--tb-bg); border-bottom: 1px solid var(--tb-rule); transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease; }
.topbar-brand { justify-self: start; width: 104px; line-height: 0; }
.site-header .topbar-brand { width: 128px; }
/* The hero logo wears a gulmohar gradient (gold through orange to blossom red) through its own shape; on hover it settles back to cream. */
.site-header .topbar-brand { position: relative; }
.site-header .topbar-brand::before, .site-header .topbar-brand::after { content: ""; position: absolute; inset: 0; -webkit-mask: url("assets/brand/sow-logo.webp") center / contain no-repeat; mask: url("assets/brand/sow-logo.webp") center / contain no-repeat; transition: opacity 320ms ease; }
.site-header .topbar-brand::before { background: linear-gradient(120deg, #f6c66e 0%, #f08a3c 48%, #e8542d 100%); }
.site-header .topbar-brand img { opacity: 0; transition: opacity 320ms ease; }
.site-header .topbar-brand:hover::before, .site-header .topbar-brand:focus-visible::before, .site-header .topbar-brand:hover::after, .site-header .topbar-brand:focus-visible::after, .site-header .topbar-brand:hover .brand-ring, .site-header .topbar-brand:focus-visible .brand-ring { opacity: 0; }
.site-header .topbar-brand:hover img, .site-header .topbar-brand:focus-visible img { opacity: 1; }
.brand-ring { display: none; }
/* In motion, the logo's own arrow paints it: a tap floods the words with gulmohar from the arrow's tip, the next tap wipes cream back over them, every eight seconds.
   The artwork splits into the arrow (x 79.5–100%, y 0–62%, tip at 81.3% 9.7%) and the words. */
@property --paint { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --wipe { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@media (prefers-reduced-motion: no-preference) {
  .site-header .topbar-brand::before { clip-path: polygon(0 0, 79.5% 0, 79.5% 62%, 100% 62%, 100% 100%, 0 100%); background: radial-gradient(circle at 81.3% 9.7%, var(--cream) calc(var(--wipe) - 3%), transparent var(--wipe)), radial-gradient(circle at 81.3% 9.7%, #f6c66e 0, #f08a3c calc(var(--paint) * .45), #e8542d calc(var(--paint) * .85), #e8542d calc(var(--paint) - 3%), transparent var(--paint)), var(--cream); animation: brand-paint 8s cubic-bezier(.3, .6, .2, 1) infinite; }
  .site-header .topbar-brand::after { clip-path: inset(0 0 38% 79.5%); background: var(--cream); transform-origin: 81.3% 9.7%; animation: brand-tap 8s ease-in-out infinite; }
  .site-header .brand-ring { display: block; position: absolute; left: 81.3%; top: 9.7%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border: 1px solid #f6c66e; border-radius: 50%; opacity: 0; transform: scale(.1); pointer-events: none; animation: brand-ring 8s ease-out infinite; }
  /* It waits for the dawn to reveal the header, and rests while the hero is scrolled away. */
  .is-dawn .site-header .topbar-brand::before, .is-dawn .site-header .topbar-brand::after, .is-dawn .site-header .brand-ring,
  .is-offscreen .site-header .topbar-brand::before, .is-offscreen .site-header .topbar-brand::after, .is-offscreen .site-header .brand-ring { animation-play-state: paused; }
}
@keyframes brand-paint { 0%, 6.25% { --paint: 0%; --wipe: 0%; } 50% { --paint: 112%; } 56.25% { --wipe: 0%; } 100% { --paint: 112%; --wipe: 116%; } }
@keyframes brand-tap { 0%, 3.75% { transform: none; } 7.5% { transform: translate(-1.5%, 2.5%) scale(.9); } 12.5%, 53.75% { transform: none; } 57.5% { transform: translate(-1.5%, 2.5%) scale(.9); } 62.5%, 100% { transform: none; } }
@keyframes brand-ring { 0%, 6.25% { opacity: 0; transform: scale(.1); } 8.75% { opacity: .9; } 28.75% { opacity: 0; transform: scale(1.2); } 28.85%, 56.25% { opacity: 0; transform: scale(.1); } 58.75% { opacity: .9; } 78.75%, 100% { opacity: 0; transform: scale(1.2); } }
.topbar-brand img { width: 100%; height: auto; transition: filter 320ms ease; }
.topbar.is-light .topbar-brand img { filter: invert(1) hue-rotate(180deg) brightness(.16); }
.topbar-chapter { margin: 0; display: flex; align-items: baseline; gap: 12px; font-size: 14px; transition: opacity 160ms ease, transform 160ms ease; }
.topbar-chapter.is-swapping { opacity: 0; transform: translateY(4px); }
.tc-n { font: 400 13px/1 var(--display-font); letter-spacing: .08em; opacity: .55; }
.tc-t { font: italic 400 20px/1 "Fraunces", Georgia, serif; }
.tc-sep { width: 28px; height: 1px; background: currentColor; opacity: .35; align-self: center; }
.tc-next { font-size: 13px; opacity: .55; transition: opacity 180ms ease; }
.tc-next:hover, .tc-next:focus-visible { opacity: 1; }
.tc-next[hidden] { display: none; }
.topbar-right { justify-self: end; display: flex; align-items: center; gap: 22px; }
.topbar-index { display: flex; gap: 6px; }
.topbar-index a { position: relative; display: block; width: 18px; height: 16px; }
.topbar-index a::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: currentColor; opacity: .22; transition: opacity 200ms ease, background-color 200ms ease; }
.topbar-index a:hover::before, .topbar-index a:focus-visible::before { opacity: .6; }
.topbar-index a.is-on::before { opacity: 1; background: var(--tb-gold); }
.topbar-menu { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; color: inherit; font: 500 13.5px/1 var(--ui-font); cursor: pointer; opacity: .85; transition: opacity 180ms ease; }
.topbar-menu:hover { opacity: 1; }
.tm-bars { display: grid; gap: 4px; }
.tm-bars i { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform 320ms cubic-bezier(.2, .7, .2, 1); }
.is-open .tm-bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.is-open .tm-bars i:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.topbar-cta { min-height: 36px; padding: 0 16px; font-size: 13.5px; gap: 10px; }
.topbar-cta svg { width: 14px; height: 14px; }
.topbar.is-light .topbar-cta { border-color: rgba(23, 28, 20, .5); }
.topbar.is-light .topbar-cta:hover, .topbar.is-light .topbar-cta:focus-visible { color: var(--cream); border-color: var(--ink); }
.topbar.is-light .topbar-cta::before { background: var(--ink); }

.shell { width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; }
main > section:not(.sq-hero) { position: relative; padding-block: var(--section-y); scroll-margin-top: 72px; }
h2 { margin: 0; font: 400 clamp(34px, 3.75vw, 54px)/1.02 var(--display-font); letter-spacing: -.03em; text-wrap: balance; }
h3 { margin: 0; font: 400 clamp(22px, 2vw, 29px)/1.1 var(--display-font); letter-spacing: -.02em; }
/* One entrance for everything below the hero: a short rise, exponential ease-out. */
.reveal { will-change: transform, opacity; }

/* Studio: the portrait render, framed like a photograph pinned to a laterite wall. */
.studio { overflow-x: clip; z-index: 1; } /* clip, not hidden: hidden would stop the image from sticking. Sideways only, and above the
   branch scene, so the hanging caption and the frame's shadow can spill over its top instead of being cut. */
.studio-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(48px, 5vw, 96px); align-items: start; }
/* 40/60 split. The image fills its column but is capped by screen height, so the arch and caption always fit while pinned. */
.studio-figure { margin: 0; position: sticky; top: 96px; justify-self: center; width: min(100%, calc((100svh - 172px) * .8)); }
.studio-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 240px 240px 6px 6px; box-shadow: 0 40px 60px -30px rgba(74, 36, 23, .5); }
.studio-frame img { width: 100%; height: 108%; object-fit: cover; object-position: center top; display: block; }
.studio-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(23, 28, 20, .12); pointer-events: none; }
/* The caption hangs below the frame outside the flow, so the pin releases when the frame bottom meets the last line of text. */
.studio-figure figcaption { position: absolute; top: 100%; left: 0; right: 0; margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
/* The caption reads as a dictionary entry for the studio's name. */
.entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.entry-word { font: 400 26px/1 var(--display-font); color: var(--gold); }
.entry-say { font: italic 400 16px/1 "Fraunces", Georgia, serif; color: var(--ink); }
.entry-pos { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.entry-def { display: block; margin-top: 6px; color: var(--fg-soft); }
.entry-def b { font: 400 13px/1 var(--display-font); color: var(--gold); margin-right: .3em; }
.entry-def b:not(:first-child) { margin-left: .6em; } /* a little air before the second sense */
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.studio-copy h2 { font-size: clamp(34px, 3.2vw, 51px); max-width: 24ch; text-wrap: wrap; }
.studio-copy h2 .h-soft { display: block; color: var(--gold); }
.studio-story { margin-top: clamp(36px, 3.4vw, 56px); max-width: 58ch; }
.studio-story p { margin: 0; font-size: 18.5px; line-height: 1.85; color: var(--fg-soft); text-wrap: pretty; }
.studio-story p + p { margin-top: 1em; }
.studio-story i { color: var(--gold); }
/* गोष्ट sits at the top right in its own band above the story, its ink flush with the right edge (.025em undoes the
   glyph's overhang). */
.studio { --glyph: clamp(200px, 20vw, 330px); }
main > section.studio { padding-top: calc(clamp(28px, 3vw, 48px) + var(--glyph) * .86); padding-bottom: 48px; } /* the caption and shadow hang past this edge onto the branch scene; whole pixels, or the dark body shows through a seam */
.studio-glyph { position: absolute; z-index: 0; top: clamp(28px, 3vw, 48px); right: .025em; font: 400 var(--glyph)/1.3 var(--display-font); color: #efe3d2; white-space: nowrap; pointer-events: none; user-select: none; }

/* Branch scene: pinned for a screen and a half while the squirrel crosses. */
.branch-scene { padding-block: 0 !important; overflow: hidden; }
.branch-pin { position: relative; height: 100vh; height: 100svh; }
.branch-line { position: absolute; left: var(--gutter); top: max(80px, 7%); margin: 0; font: 400 clamp(40px, 4.6vw, 78px)/1 var(--display-font); letter-spacing: -.035em; color: var(--ink); }
.branch-line span { display: inline-block; overflow: hidden; }
/* Flush with the bottom edge: the clip's own frame edge then lines up with the next section, so falling petals slip behind it. */
.branch-canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 21 / 9; display: block; pointer-events: none; }

/* Band: the shop at night, lamp still lit, under one sentence. */
.band { display: grid; align-items: center; min-height: max(72vh, 44vw); padding-block: 0 !important; overflow: hidden; isolation: isolate; }
.band-image { position: absolute; inset: -8% 0; z-index: -2; width: 100%; height: 116%; object-fit: cover; }
/* Light on the left so the lit shop shows; the shade gathers on the right behind the words. */
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 14, 22, .08) 0%, rgba(12, 14, 22, .2) 38%, rgba(12, 14, 22, .62) 62%, rgba(12, 14, 22, .72) 100%), linear-gradient(180deg, rgba(12, 14, 22, .25), rgba(12, 14, 22, 0) 30%, rgba(12, 14, 22, 0) 70%, rgba(12, 14, 22, .3)); }
.band-inner { display: grid; justify-content: end; padding-block: calc(120px + 1.3vw); } /* the extra 1.3vw each side gives back the height the smaller heading took, so the picture keeps its size */
.band h2 { font-size: clamp(36px, 3.75vw, 58px); max-width: 13ch; text-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.band p { margin: 24px 0 0; max-width: 34ch; font-size: 18px; color: rgba(255, 246, 228, .8); text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }

/* Ticker: a slow, steady line of what we make, between the night band and the services. */
/* The band in gulmohar red, the blossom colour, with cream words and petals. */
main > section.ticker { --band: #c8412a; padding-block: clamp(12px, 1.2vw, 18px); overflow: hidden; background: var(--band); }
.ticker-track { display: flex; width: max-content; animation: ticker 55s linear infinite; }
.ticker { cursor: pointer; }
.ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker:focus-visible { outline: 2px solid var(--cream); outline-offset: -4px; }
@keyframes ticker { to { transform: translateX(-33.3333%); } }
.ticker-row { display: flex; align-items: center; flex-shrink: 0; margin: 0; padding: 0; list-style: none; }
.ticker-row li { flex-shrink: 0; padding-inline: clamp(12px, 1.1vw, 20px); font: 400 clamp(20px, 2vw, 32px)/1.15 var(--display-font); letter-spacing: -.02em; white-space: nowrap; color: var(--cream); }
.ticker-row .ticker-outline { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; color: #ffd9a8; } /* the quieter voice between the bold Rozha words */
/* a five-petal gulmohar blossom (the #gulmohar symbol) between the words */
.ticker-row .ticker-mark { padding-inline: 0; line-height: 0; color: #ffd9a8; }
.ticker-mark svg { display: block; width: clamp(15px, 1.35vw, 22px); height: auto; aspect-ratio: 1; fill: none; stroke: none; }

/* Services: four tall panels cut from the scene, copy only on hover. */
.services { --services-gap: clamp(40px, 5vw, 64px); }
.services h2 { max-width: 21ch; margin-bottom: var(--services-gap); }
/* The chai squirrel: a small transparent loop sitting on top of the Visibility card (4th column, dropped 48px). */
.services-head { position: relative; }
.chai-loop { --chai-w: clamp(230px, 19.5vw, 290px); position: absolute; right: calc((100% - 48px) / 8 - var(--chai-w) / 2); bottom: calc(-1 * (var(--services-gap) + 48px) - 4px); width: var(--chai-w); height: auto; z-index: 3; pointer-events: none; }
.panels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.panels li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; isolation: isolate; box-shadow: 0 30px 50px -30px rgba(74, 36, 23, .45); }
.panels img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transform: scale(1.02); transition: transform 1200ms cubic-bezier(.16, 1, .3, 1), filter 600ms ease; filter: saturate(.8) brightness(.9); }
.panels li:hover img, .panels li:focus-within img { transform: scale(1.09); filter: saturate(1) brightness(1); }
.panels li::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(23, 28, 20, 0) 35%, rgba(23, 28, 20, .92) 100%); transition: opacity 500ms ease; }
.panel-text { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 24px; }
.panel-text h3 { font-size: clamp(21px, 1.7vw, 26px); }
.panel-text > span { display: block; margin-top: 6px; font-size: 13px; color: var(--gold); }
.panel-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 600ms cubic-bezier(.16, 1, .3, 1), opacity 400ms ease; }
.panel-more p { margin: 0; min-height: 0; overflow: hidden; padding-top: 12px; font-size: 14px; line-height: 1.6; color: rgba(255, 246, 228, .85); }
.panels li:hover .panel-more, .panels li:focus-within .panel-more { grid-template-rows: 1fr; opacity: 1; }
.panels li:nth-child(even) { margin-top: 48px; }
.panel-text { color: var(--cream); }
.panel-text > span { color: #efc583; }

/* Work: a pinned section; scrolling walks a row of project cards sideways. Without JS it is a swipeable row. */
main > section.work { padding-block: 0; border-top: 1px solid var(--rule); }
.work-pin { position: relative; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; padding-bottom: 56px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.work-pin::-webkit-scrollbar { display: none; }
.work.is-pinned .work-pin { overflow: hidden; scroll-snap-type: none; }
.work-track { display: flex; align-items: center; gap: clamp(28px, 3.4vw, 56px); width: max-content; padding-inline: var(--gutter); will-change: transform; }
.work-intro { flex-shrink: 0; width: min(32vw, 440px); scroll-snap-align: start; }
.work-intro h2 { max-width: 11ch; }
.work-sub { margin: 24px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.7; color: var(--muted); }
.work-hint { display: inline-flex; align-items: center; gap: 12px; margin: 36px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.work-hint svg, .work-outro svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.work-hint svg { animation: work-nudge 1.8s ease-in-out infinite; }
@keyframes work-nudge { 50% { transform: translateX(8px); } }
.work-card { flex-shrink: 0; width: min(56vw, calc((100svh - 370px) * 1.6)); scroll-snap-align: center; }
.work-card { position: relative; } /* keeps its absolutely positioned screen-reader label inside the card (and inside the phone swipe row) */
.work-card a { display: block; }
.wc-browser { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 50px 80px -40px rgba(23, 28, 20, .5), 0 0 0 1px rgba(23, 28, 20, .08); transition: transform 600ms cubic-bezier(.16, 1, .3, 1), box-shadow 600ms ease; }
.wc-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding-inline: 14px; background: #f3ede0; border-bottom: 1px solid rgba(23, 28, 20, .08); }
.wc-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(23, 28, 20, .16); }
.wc-bar span { margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 11px; color: var(--muted); }
.wc-shot { aspect-ratio: 16 / 10; overflow: hidden; }
.wc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transform-origin: 50% 0; }
.wc-meta { display: grid; grid-template-columns: 4ch minmax(0, 1fr) 44px; gap: 20px; align-items: start; padding-top: 22px; }
.wc-meta .w-n { padding-top: 4px; }
.wc-text .w-sector { display: block; margin-bottom: 8px; }
.wc-text h3 { font-size: clamp(22px, 1.9vw, 31px); }
.wc-text p { margin: 6px 0 0; min-height: 3em; font-size: 15px; line-height: 1.5; color: var(--muted); } /* two lines for every card, so the row lines up */
.w-n { font: 400 18px/1 var(--display-font); color: var(--gold); }
.w-sector { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.w-go { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); transition: background 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease; }
.w-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.work-card a:hover .wc-browser, .work-card a:focus-visible .wc-browser { transform: translateY(-8px); box-shadow: 0 60px 90px -40px rgba(23, 28, 20, .6), 0 0 0 1px rgba(23, 28, 20, .1); }
.work-card a:hover .w-go, .work-card a:focus-visible .w-go { background: var(--ink); border-color: var(--ink); color: var(--cream); transform: rotate(45deg); }
.work-outro { flex-shrink: 0; width: min(30vw, 400px); padding-right: var(--gutter); scroll-snap-align: end; }
.work-outro .button-primary { background: var(--ink); color: var(--cream); }
.work-outro .button-primary:hover, .work-outro .button-primary:focus-visible { color: var(--ink); }
.work-outro p { margin: 0 0 28px; font: 400 clamp(29px, 2.9vw, 44px)/1.05 var(--display-font); letter-spacing: -.02em; }
.work-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 3vh, 32px); display: flex; align-items: center; gap: 20px; }
.wp-count { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.wp-count b { color: var(--ink); font-weight: 600; }
.wp-bar { flex: 1; height: 1px; background: var(--rule); }
.wp-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.work:not(.is-pinned) .work-progress { display: none; }

/* Process: six short rows, the petal rides the rail as you scroll. */
.process-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.process-intro { position: sticky; top: 120px; }
.process-intro p { margin: 20px 0 0; font-size: 17px; color: var(--muted); }
.process-intro .eyebrow { margin: 0 0 28px; font-size: 13px; color: var(--gold); }
.steps-wrap { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 24px; }
.rail { position: relative; }
.rail-line { position: absolute; left: 27px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--rule) 8%, var(--rule) 92%, transparent); }
.rail-petal { position: absolute; left: 0; top: 0; width: 56px; will-change: transform; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .35)); }
.rail-petal img { width: 100%; height: auto; display: block; }
.steps-head { display: grid; grid-template-columns: 3ch minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.steps li { display: grid; grid-template-columns: 3ch minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: baseline; padding-block: 28px; border-bottom: 1px solid var(--rule); }
.st-n { font: 400 20px/1.15 var(--display-font); color: var(--gold); }
.steps h3 { font-size: clamp(20px, 1.6vw, 24px); }
.st-you { margin: 0; font-size: 18px; color: var(--cream); }
.st-you.is-nothing { color: var(--gold); } /* same size as the other parts; the gold carries the joke */

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font: 400 clamp(20px, 1.7vw, 24px)/1.2 var(--display-font); letter-spacing: -.01em; transition: color 200ms ease; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); transition: transform 320ms cubic-bezier(.2, .7, .2, 1); }
.faq-list details[open] summary::after { transform: rotate(-135deg); }
.faq-list summary:hover { color: var(--gold); }
.faq-list p { margin: 0 0 28px; max-width: 58ch; font-size: 17px; line-height: 1.7; color: var(--fg-soft); text-wrap: pretty; }

/* Contact: the squirrel peeks over the bottom edge, looking up at the form. */
.contact { overflow: hidden; background: linear-gradient(180deg, var(--ink), #10140f); }
main > section.contact { padding-bottom: clamp(32px, 3.5vw, 56px); } /* the squirrel stands on the edge, close under the button */
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr); gap: 56px; align-items: start; }
.contact-intro p { margin: 24px 0 0; max-width: 40ch; font-size: 18px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.contact-email a { color: var(--gold); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(239, 197, 131, .5); transition: color 200ms ease, text-decoration-color 200ms ease; }
.contact-email a:hover { color: var(--cream); text-decoration-color: rgba(255, 246, 228, .5); }
.contact-intro .contact-where { margin-top: 14px; max-width: none; font-size: 13px; line-height: 1.6; letter-spacing: .01em; } /* a quiet note under the email, one line on desktop */
.story-form { display: grid; gap: 22px; max-width: 560px; }
.hp { position: absolute; left: -9999px; }
.field { display: grid; gap: 8px; }
.field span, .field label { font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.field-msg { min-height: 0; margin: 0; font-size: 13.5px; line-height: 1.5; color: #f0a58a; }
.field-msg:empty { margin-top: -8px; } /* kept in the layout (not display: none) so screen readers hear it appear */
.field-msg.is-hint { color: var(--muted); }
.field-msg button { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.field input, .field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 3px; background: rgba(255, 246, 228, .04); color: var(--cream); font: 400 16px/1.5 var(--ui-font); transition: border-color 200ms ease, background 200ms ease; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255, 246, 228, .07); }
.field input[aria-invalid], .field input[aria-invalid]:focus { border-color: #e0876a; }
.field textarea { resize: vertical; min-height: 140px; }
.story-form .button-primary { justify-self: start; border: 0; cursor: pointer; font-family: var(--ui-font); }
.form-status { margin: -4px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--cream); }
.form-status:empty { margin-top: -22px; } /* kept in the layout so screen readers hear it appear */
.form-status.is-error { color: #f0a58a; }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.story-form .button-primary:disabled { opacity: .55; cursor: default; }
/* The squirrel in the corner: a still until its videos are ready, then three transparent layers (asks for the
   form, answers the send, holds the board). The board's words are live text that rides the painted board. */
.contact-squirrel { --csq-w: clamp(250px, 21vw, 330px); position: absolute; right: 2%; bottom: calc(var(--csq-w) * -9 / 560); width: var(--csq-w); aspect-ratio: 560 / 486; pointer-events: none; container-type: inline-size; }
.contact-squirrel > img, .contact-squirrel > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-squirrel > video { opacity: 0; }
.contact-squirrel > .is-on { opacity: 1; }
.contact-squirrel.is-playing > img { opacity: 0; }
.csq-board { position: absolute; display: grid; place-content: center; margin: 0; padding: 0 2cqi; text-align: center; color: var(--laterite); opacity: 0; transition: opacity 400ms ease; }
.csq-board.is-on { opacity: 1; }
.csq-board b { display: block; font: 400 4.6cqi/1.05 var(--display-font); color: #c8412a; }
.csq-board span { display: block; margin-top: .5cqi; font: 500 2.3cqi/1.25 var(--ui-font); }

/* Footer */
.site-footer { padding: 48px 0 40px; border-top: 1px solid var(--rule); background: #10140f; }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; }
.site-footer .brand { display: block; width: 128px; line-height: 0; } /* the same size as the hero logo */
.site-footer .brand img { width: 100%; height: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; font-size: 14px; color: rgba(255, 246, 228, .8); }
.site-footer nav a:hover { color: var(--gold); }
.footer-line { display: flex; flex-direction: column; align-items: end; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); text-align: right; }

/* Work cards wrapper: invisible on desktop (the cards stay flex items of the pinned track). */
.work-cards { display: contents; }
.only-phone { display: none; }
.nb { white-space: nowrap; } /* a hyphenated word stays on one line */
.panels-nav.only-phone { display: none; }
/* Touch screens cannot hover, so the service copy is always open there. */
@media (hover: none) {
  .panel-more { grid-template-rows: 1fr; opacity: 1; }
  .panels img { filter: saturate(.95) brightness(.95); }
}

/* ============================================================
   Phones and small tablets. Designed for 360–430px first.
   Centred headings, justified reading text, thumb-sized targets.
   ============================================================ */
/* Interactive motion (motion.js). Lenis owns the wheel; GSAP owns every transform it animates, so the CSS
   transitions on those transforms step aside once .motion-on is set. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.h-line-mask { padding-bottom: .1em; margin-bottom: -.1em; } /* room for the descenders while a heading rises */
.ticker.is-driven .ticker-track { animation: none; }
.motion-on .panels img { transition: filter 600ms ease; }
.motion-on .panels li { will-change: transform; }
.motion-on .wc-browser { transition: box-shadow 600ms ease; will-change: transform; }
.wc-shot { position: relative; }
.wc-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 500ms ease; background: radial-gradient(70% 90% at var(--gx, 50%) var(--gy, 0%), rgba(255, 246, 228, .26), transparent 60%); mix-blend-mode: soft-light; }
.work-card a:hover .wc-shot::after { opacity: 1; }
/* The label that rides the cursor over the work and the ticker. */
.cursor-tag { position: fixed; z-index: 40; top: 0; left: 0; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; pointer-events: none; background: var(--gulmohar); color: var(--cream); box-shadow: 0 18px 40px -16px rgba(74, 36, 23, .6); }
.cursor-tag span { font: 600 12px/1 var(--ui-font); letter-spacing: .16em; text-transform: uppercase; }
.cursor-tag[data-tone="cream"] { background: var(--cream); color: #c8412a; }
.has-cursor-tag [data-cursor], .has-cursor-tag [data-cursor] * { cursor: none; }
/* Process: steps wait in shadow until the petal reaches them; the rail fills in gold behind her. */
.rail-fill { position: absolute; left: 27px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gulmohar)); transform-origin: 50% 0; transform: scaleY(0); }
.motion-on .steps li > * { transition: opacity 700ms ease, color 700ms ease; }
.motion-on .steps li:not(.is-lit) > h3, .motion-on .steps li:not(.is-lit) > .st-you { opacity: .38; }
.motion-on .steps li.is-lit .st-n { color: var(--gulmohar); }
/* FAQ: the chevron turns back as soon as an answer starts to close. */
.faq-list details.is-closing summary::after { transform: rotate(45deg); }
.faq-list details p { overflow: hidden; }
/* How far down the page: a hairline under the sticky bar. */
.topbar-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.topbar-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gulmohar)); transform-origin: 0 50%; transform: scaleX(0); }

@media (max-width: 999px) {
  :root { --section-y: clamp(72px, 19vw, 104px); }
  main > section:not(.sq-hero) { scroll-margin-top: 60px; }
  h2 { font-size: clamp(34px, 9.4vw, 46px); line-height: 1.04; text-align: center; margin-inline: auto; }
  h3 { font-size: clamp(24px, 6.6vw, 30px); }
  .eyebrow { justify-content: center; margin-bottom: 20px; font-size: 12px; }
  .eyebrow::after { content: ""; width: 36px; height: 1px; background: currentColor; }
  /* reading text: justified, last line centred, and no word is ever split across two lines */
  .studio-story p, .band p, .faq-list p, .contact-intro p, .process-intro p, .work-sub {
    text-align: justify; text-align-last: center; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; text-wrap: wrap;
  }

  /* Sticky bar: logo, chapter title, round menu button; the contents page fills the screen. */
  .topbar-inner { grid-template-columns: 1fr auto auto; gap: 14px; height: 58px; }
  .site-header { grid-template-columns: 1fr auto; height: 58px; margin-top: 12px; }
  .site-header::before { top: -12px; height: 150px; }
  .topbar-brand { width: 84px; }
  .site-header .topbar-brand { width: 100px; }
  .tc-sep, .tc-next, .topbar-index, .topbar-cta, .topbar-tag { display: none; }
  .tc-t { font-size: 18px; }
  .topbar-right { gap: 0; }
  .topbar-menu { display: grid; place-items: center; align-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 246, 228, .45); border-radius: 50%; opacity: 1; transition: border-color 320ms ease; }
  .topbar.is-light .topbar-menu { border-color: rgba(23, 28, 20, .4); }
  .site-header .topbar-menu { border-color: rgba(255, 246, 228, .55); }
  /* The menu on phones: the same glass panel, chapters stacked, one full-width action. */
  .hm { top: calc(100% + 8px); left: 12px; right: 12px; }
  .hm-panel { padding: 6px 18px 18px; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; }
  .hm-list { grid-template-columns: 1fr; }
  .hm-list li { border-left: 0; border-top: 1px solid var(--hm-rule); }
  .hm-list li:first-child { border-top: 0; }
  .hm-list a { grid-template-columns: 30px 1fr; align-items: baseline; gap: 4px 10px; padding: 14px 0; }
  .hm-t { font-size: 24px; }
  .hm-d { grid-column: 2; font-size: 14px; }
  .hm-foot { flex-direction: column; align-items: stretch; gap: 12px; margin: 6px 0 0; padding-top: 16px; text-align: center; }
  .hm-cta { justify-content: center; min-height: 50px; }
  .hm-write { margin: 0 auto; text-align: center; }
  .tm-bars { gap: 4px; } .tm-bars i { width: 15px; }
  .tm-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topmenu-open { overflow: hidden; }

  /* Studio: label, heading, arch, story; everything on one centred axis. */
  .studio { --glyph: clamp(96px, 30vw, 150px); }
  main > section.studio { padding-top: calc(24px + var(--glyph) * .82); }
  .studio-glyph { right: 50%; transform: translateX(50%); top: 20px; }
  .studio-grid { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .studio-copy { display: contents; }
  .studio-copy .eyebrow { order: 1; }
  /* A fixed box and fixed breaks: iOS Safari wrapped the split lines inside a fit-content box differently (six lines, then four). */
  .studio-copy h2 { order: 2; width: 100%; max-width: 15ch; font-size: clamp(32px, 8.8vw, 44px); text-wrap: balance; }
  .studio-copy h2 .h-soft { margin-top: 6px; }
  .studio-figure { order: 3; position: static; width: min(78vw, 340px); margin: 40px 0 0; }
  .studio-frame { border-radius: 999px 999px 6px 6px; }
  .studio-figure figcaption { position: static; margin-top: 14px; text-align: center; font-size: 13px; }
  .entry-head { justify-content: center; }
  .studio-story { order: 4; margin-top: 36px; max-width: 34em; }
  .studio-story p { font-size: 16.5px; line-height: 1.8; }
  .studio-story p + p { margin-top: 1em; }

  /* Branch run: headline and branch sit together in the middle of the screen, the branch as large as the
     height allows, and the view pans with the squirrel (see runX in the script). The frames are empty above
     30% and below 93% of their height, so the canvas gives that band back through negative margins. */
  .branch-pin { --bh: min(80svh, 760px); display: flex; flex-direction: column; justify-content: center; padding-top: 44px; }
  .branch-line { position: relative; left: auto; top: auto; z-index: 1; padding-inline: var(--gutter); text-align: center; font-size: clamp(48px, 15vw, 64px); line-height: 1.02; }
  .branch-line span { display: block; }
  .branch-canvas { position: relative; bottom: auto; align-self: flex-start; flex: none; width: auto; height: var(--bh); margin: calc(var(--bh) * -.2) 0 calc(var(--bh) * -.06); }
  main > section.studio { padding-bottom: calc(var(--section-y) * .5); } /* the pinned branch below brings its own air */
  .only-phone { display: inline; }
  .only-desk { display: none; }

  /* Night band: framed on the lit shop, words set right in the night sky above it so the shop stays clear. */
  .band { min-height: 88svh; align-items: start; }
  .band-image { object-position: 22% center; }
  .band::after { background: radial-gradient(120% 70% at 100% 0%, rgba(12, 14, 22, .72), rgba(12, 14, 22, .36) 48%, transparent 76%), linear-gradient(180deg, rgba(12, 14, 22, .3), transparent 42%, transparent 82%, rgba(12, 14, 22, .35)); }
  .band-inner { justify-content: end; justify-items: end; padding-block: 88px 0; text-align: right; }
  .band h2 { font-size: clamp(30px, 8.6vw, 42px); max-width: none; margin-inline: auto 0; text-align: right; } /* three lines, set by the phone breaks */
  .band p { margin-top: 14px; max-width: 24ch; font-size: 15px; line-height: 1.6; text-align: right; text-align-last: right; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }

  /* Ticker */
  main > section.ticker { padding-block: 10px; }
  .ticker-row li { font-size: 19px; padding-inline: 10px; }
  .ticker-mark svg { width: 15px; }

  /* Services: a swipeable row of cards, copy always visible, next card peeking. */
  .services h2 { max-width: 13ch; margin-bottom: 32px; }
  .services .shell { width: 100%; }
  .services h2 { padding-inline: var(--gutter); }
  .chai-loop { display: none; }
  .panels { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) 24px; scrollbar-width: none; }
  .panels::-webkit-scrollbar { display: none; }
  .panels li { flex: 0 0 min(78vw, 340px); scroll-snap-align: center; aspect-ratio: 3 / 4; border-radius: 14px; box-shadow: 0 10px 18px -12px rgba(74, 36, 23, .42); } /* short enough to fit the row's padding, which clips a longer one into a slab */
  .services h2, .process-intro h2, .work-intro h2, .faq-grid > h2, .contact-intro h2 { font-size: clamp(26px, 7.9vw, 36px); max-width: none; } /* two lines each */
  .panels-nav.only-phone { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-inline: var(--gutter); }
  .pn-timer { flex: 1; height: 1px; background: var(--rule); overflow: hidden; }
  .pn-timer i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
  .pn-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(23, 28, 20, .22); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
  .pn-btn svg { width: 18px; height: 18px; }
  .pn-btn:active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
  .panels li:nth-child(even) { margin-top: 0; }
  .panels li::after { background: linear-gradient(180deg, rgba(23, 28, 20, 0) 30%, rgba(23, 28, 20, .94) 100%); }
  .panel-text { padding: 22px; text-align: center; }
  .panel-text h3 { font-size: 24px; } /* phones keep their sizes; the laptop scale-down is above */
  .work-outro p { font-size: 34px; }
  .panel-more { grid-template-rows: 1fr; opacity: 1; }
  .panel-more p { text-align: center; font-size: 14.5px; }

  /* Process: centred step cards; each says what we do and what you do. */
  .process-grid { display: block; }
  .process-intro { position: static; text-align: center; margin-bottom: 40px; }
  .process-intro p { max-width: 32em; margin-inline: auto; font-size: 16px; line-height: 1.7; }
  /* the petal rides a hairline down the left edge as the steps scroll past, as on desktop */
  .steps-wrap { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 12px; }
  .steps-head { display: none; }
  .rail-line, .rail-fill { left: 11.5px; }
  .rail-petal { width: 24px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
  .steps { border-top: 0; display: grid; gap: 12px; }
  .steps li { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 26px 20px 24px; text-align: center; border: 1px solid var(--rule); border-radius: 14px; background: rgba(255, 246, 228, .03); }
  .st-n { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(239, 197, 131, .45); border-radius: 50%; font-size: 18px; }
  .steps h3 { font-size: 26px; }
  .st-you { grid-column: auto; font-size: 15.5px; color: rgba(255, 246, 228, .85); }
  .st-you::before { content: "Your part"; display: block; margin-bottom: 6px; font: 600 11px/1 var(--ui-font); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 246, 228, .5); }

  /* Work: intro, a swipe row of projects with a counter, then the call to action. */
  main > section.work { padding-block: var(--section-y); }
  /* intro, cards, counter, call to action: the counter sits right under the cards it counts */
  .work-pin { height: auto; display: flex; flex-direction: column; padding: 0; overflow: visible; scroll-snap-type: none; }
  .work-track { display: contents; }
  .work-intro { order: 1; }
  .work-cards { order: 2; }
  .work-nav { order: 3; }
  .work-intro { width: auto; padding-inline: var(--gutter); text-align: center; }
  .work-sub { max-width: 32em; margin: 18px auto 0; font-size: 16px; }
  .work-hint { display: none; }
  .work-cards { display: flex; gap: 16px; margin-top: 36px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) 8px; scrollbar-width: none; }
  .work-cards::-webkit-scrollbar { display: none; }
  .work-card { flex: 0 0 min(84vw, 380px); width: auto; scroll-snap-align: center; }
  .wc-browser { border-radius: 12px; }
  .wc-bar { height: 24px; padding-inline: 10px; }
  .wc-bar i { width: 7px; height: 7px; }
  .wc-bar span { font-size: 10px; margin-left: 8px; }
  .wc-meta { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding-top: 18px; text-align: center; }
  .wc-meta .w-n { display: none; }
  .wc-text h3 { font-size: 26px; }
  .wc-text p { min-height: 0; font-size: 14.5px; }
  .w-go { width: 40px; height: 40px; }
  /* the same counter, timer and arrows as the services row replace the desktop progress line; the closing
     call to action is left to the contact section just below */
  .work:not(.is-pinned) .work-progress, .work-outro { display: none; }
  .panels-nav.work-nav { margin-top: 18px; }

  /* FAQ: centred title, questions stay left for scanning, answers justified. */
  .faq-grid { display: block; }
  .faq-grid > h2 { margin-bottom: 32px; }
  .faq-list summary { padding: 20px 0; font-size: 21px; min-height: 44px; }
  .faq-list p { margin-bottom: 22px; font-size: 16px; }

  /* Contact: centred intro, full-width form, big send button. */
  .contact-grid { display: block; }
  .contact-intro { text-align: center; }
  .contact-intro p { max-width: 32em; margin-inline: auto; font-size: 16.5px; }
  .contact-email, .contact-where { text-align: center !important; text-align-last: center !important; }
  .story-form { max-width: none; margin-top: 36px; gap: 18px; }
  .field input, .field textarea { font-size: 16px; padding: 15px 16px; border-radius: 10px; }
  .story-form .button-primary { justify-self: stretch; justify-content: center; gap: 16px; min-height: 56px; border-radius: 10px; }
  main > section.contact { padding-bottom: var(--section-y); }
  .contact-squirrel { position: relative; right: auto; bottom: auto; display: block; width: min(76vw, 330px); margin: 48px auto calc(var(--section-y) * -1 - 4px); }

  /* Footer: one centred column. */
  .site-footer { padding: 44px 0 36px; }
  .footer-grid { grid-template-columns: 1fr; justify-items: center; gap: 26px; text-align: center; }
  .site-footer nav { gap: 10px 22px; max-width: 320px; }
  .site-footer nav a { padding: 6px 0; }
  .footer-line { align-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-chapter, .site-header { transform: none; transition: none; }
  .hm, .hm-panel, .hm-list li { transition: none; } .hm-list li { transform: none; }
}