/* Forgesolutions: black and white themes built on the brand palette
   Brand: black #171717, orange #F25623, dark gray #4D4D4D, light gray #DEDEDE
   Sections opt into a theme with .theme-dark / .theme-light; both remap the same tokens. */

:root, .theme-dark, .ui-dark {
  color-scheme: dark;

  --ink: #0F0F0F;          /* page ground, one step below brand black */
  --surface: #171717;      /* brand black, cards */
  --raised: #1E1E1E;
  --raised-2: #252525;
  --line: #2A2A2A;
  --line-soft: #202020;
  --graphite: #4D4D4D;     /* brand dark gray */
  --muted: #9A9A9A;
  --text: #DEDEDE;         /* brand light gray */
  --bright: #F5F5F5;
  --orange: #F25623;       /* brand orange */
  --orange-hot: #FF7A45;
  --orange-deep: #B83A12;
  --orange-soft: rgba(242, 86, 35, 0.14);
  --on-orange: #171717;
  --warn: #F2B23A;

  /* logo mark on dark */
  --mk-o: #F25623;
  --mk-k: #DEDEDE;
  --mk-d: #4D4D4D;
  --mk-l: #8C8C8C;

  --f-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Geist", "Helvetica Neue", Arial, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(80px, 11vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

.theme-light, .ui-light {
  color-scheme: light;

  --ink: #F4F3F0;          /* warm paper ground */
  --surface: #FFFFFF;
  --raised: #F1EFEB;
  --raised-2: #E8E5E0;
  --line: #DCD8D2;
  --line-soft: #E7E4DF;
  --graphite: #A3A09B;     /* dimmed headline text on white */
  --muted: #5C5C5C;
  --text: #2B2B2B;
  --bright: #171717;
  --orange-soft: rgba(242, 86, 35, 0.1);

  /* logo mark on light */
  --mk-k: #171717;
  --mk-d: #4D4D4D;
  --mk-l: #8C8C8C;
}
.theme-dark, .theme-light { background: var(--ink); color: var(--text); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--orange); color: var(--on-orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--orange); color: var(--on-orange); padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--f-display); color: var(--bright); font-weight: 500; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; }
.dim { color: var(--graphite); }
.hot { color: var(--orange); }
/* phone copy: .m-hide drops a passage below 560px, .m-only swaps in its shorter version */
.m-only { display: none; }


/* ---------- Buttons ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); padding: 0 8px 0 24px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-body); font-size: 15px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}
.btn:not(:has(.btn-arrow)) { padding: 0 24px; }
.btn-sm { --h: 44px; padding-left: 20px; font-size: 14px; }
.btn-sm:not(:has(.btn-arrow)) { padding: 0 20px; }
.btn-arrow {
  width: calc(var(--h) - 12px); height: calc(var(--h) - 12px); border-radius: 50%;
  display: grid; place-items: center; background: var(--on-orange); color: var(--orange);
  transition: transform .35s var(--ease);
}
.btn-arrow svg { width: 16px; height: 16px; }
.btn:hover .btn-arrow { transform: rotate(-45deg); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--orange); color: var(--on-orange); }
.btn-primary:hover { background: var(--orange-hot); box-shadow: 0 10px 40px -12px rgba(242, 86, 35, .7); }
.btn-ghost { background: color-mix(in srgb, var(--raised) 75%, transparent); border-color: var(--line); color: var(--text); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--graphite); color: var(--bright); }
.btn-block { width: 100%; }

/* ---------- Nav ----------
   A pill that grows out of the logo badge. script.js sets its width (open, or the compact
   "island" after scrolling) and runs the intro by adding .ig-1..4 to <html> in turn:
   ig-1 logo assembles, ig-2 strike, ig-3 pill unfurls, ig-4 content arrives. */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-word { font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: -0.03em; color: var(--bright); }

.nav {
  --pill-h: 64px;
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  pointer-events: none;
}
.nav-pill {
  --full: 1120px;
  pointer-events: auto; position: relative;
  width: min(1120px, 100%); height: var(--pill-h); margin-inline: auto;
  border-radius: 999px; overflow-x: clip;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(20, 20, 20, .62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -24px rgba(0, 0, 0, .7);
  transition: width .7s cubic-bezier(.76, 0, .24, 1), background-color .3s, box-shadow .3s;
}
.nav.scrolled .nav-pill { background: rgba(14, 14, 14, .86); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 50px -20px rgba(0, 0, 0, .55); }

/* logo badge, shared by both rows */
.brand-badge {
  position: absolute; left: 7px; top: 7px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #1C1C1C, #050505 72%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 6px 16px -6px rgba(0, 0, 0, .9);
}
.brand-badge .brand-mark { width: 26px; height: 26px; overflow: visible; transition: transform .5s var(--ease); }
.brand-badge:hover .brand-mark { transform: rotate(-14deg) scale(1.06); }
.forge-mark polygon {
  transform-box: fill-box; transform-origin: center;
  transition: transform .65s cubic-bezier(.2, 1.25, .35, 1) calc(var(--i) * 55ms), opacity .3s calc(var(--i) * 55ms);
}
.brand-ring { position: absolute; left: -4px; top: -4px; width: 56px; height: 56px; max-width: none; transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 2; }
.ring-fill {
  fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round;
  /* the gap is twice the dash and the offset runs 1% long, so an empty ring sits clear of the dash
     and its round cap, instead of leaving an orange dot at the top */
  stroke-dasharray: 100 200; stroke-dashoffset: calc(var(--ring, 100) * 1.01);
  filter: drop-shadow(0 0 3px rgba(242, 86, 35, .8));
  transition: stroke-dashoffset .6s var(--ease);
}

/* ember glow that follows the pointer, and the trace drawn along the bottom edge as it opens */
.nav-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(180px circle at var(--mx, 50%) 50%, rgba(242, 86, 35, .2), transparent 70%);
}
@media (hover: hover) { .nav-pill:hover .nav-glow { opacity: 1; } }
.nav-trace {
  position: absolute; left: 32px; right: 32px; bottom: -1px; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--orange) 20%, #FFC9A8 50%, var(--orange) 80%, transparent);
}

.nav-row { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; padding: 0 7px 0 68px; }
.nav-full { width: var(--full); gap: 16px; transition: opacity .35s .15s, visibility 0s; }
.nav-mini { gap: 18px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.nav.is-compact .nav-full { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.nav.is-compact .nav-mini { opacity: 1; visibility: visible; transition: opacity .35s .25s, visibility 0s; }

.nav .brand-word { color: #F5F5F5; }
.nav-links { position: relative; margin-inline: auto; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .04); }
.nav-links a:not(.btn) {
  position: relative; z-index: 1;
  font-size: 14px; font-weight: 450; color: #B4B4B4;
  padding: 8px 15px; border-radius: 999px; transition: color .25s;
}
.nav-links a:not(.btn):hover { color: #FFFFFF; }
.nav-links a.is-lit:not(.btn) { color: #171717; }
/* the white lozenge that slides to whichever link is hovered, or the section in view */
.nav-ind {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); border-radius: 999px; pointer-events: none;
  background: #F5F5F5; box-shadow: 0 6px 18px -8px rgba(255, 255, 255, .55);
  opacity: 0; transform: translateX(var(--x, 0));
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), width .5s cubic-bezier(.3, 1.3, .5, 1), opacity .25s;
}
.nav-ind.on { opacity: 1; }
.nav-cta-mobile, .burger { display: none; }
.burger {
  margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: #F5F5F5; cursor: pointer; place-items: center; align-content: center; gap: 5px;
}
.burger span { display: block; width: 16px; height: 1.6px; background: #171717; transition: transform .3s var(--ease); }
.nav.open .burger span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav.open .burger span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

/* compact island: current section + a quick way to get in touch */
.now-label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #F5F5F5; }
.now-text { display: inline-block; }
/* "more" hint: an ellipsis capsule whose dots ripple now and then; they spread when the pill peeks */
.now-more {
  display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: gap .35s cubic-bezier(.3, 1.6, .5, 1), background-color .3s;
}
.now-more i { width: 4px; height: 4px; border-radius: 50%; background: #D6D6D6; opacity: .6; animation: moreWave 3.6s var(--ease) infinite; }
.now-more i:nth-child(2) { animation-delay: .12s; }
.now-more i:nth-child(3) { animation-delay: .24s; }
@keyframes moreWave { 0%, 62%, 100% { transform: none; opacity: .6; } 70% { transform: translateY(-3px); opacity: 1; } 78% { transform: none; opacity: .85; } }
.nav-pill.peek { transition: width .5s cubic-bezier(.3, 1.6, .5, 1), background-color .3s, box-shadow .3s; }
.nav-pill.peek .now-more { gap: 6px; background: rgba(255, 255, 255, .12); }
.now-text.swap { animation: nowIn .45s var(--ease); }
@keyframes nowIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.now-cta { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #171717; transition: transform .35s var(--ease); }
.now-cta svg { width: 16px; height: 16px; }
.now-cta:hover { transform: rotate(-45deg); }

/* ----- intro ----- */
.nav-burst { position: absolute; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px) + var(--pill-h) / 2); width: 0; height: 0; pointer-events: none; }
.nav-burst::before {
  content: ""; position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--orange); opacity: 0;
}
.nav-burst i {
  position: absolute; left: -1px; top: 0; width: 2px; height: 14px; border-radius: 2px; opacity: 0;
  background: linear-gradient(#FFE2CF, var(--orange)); transform-origin: 50% 0;
}
.nav-burst i:nth-child(1) { --a: 0deg; }   .nav-burst i:nth-child(2) { --a: 45deg; }
.nav-burst i:nth-child(3) { --a: 90deg; }  .nav-burst i:nth-child(4) { --a: 135deg; }
.nav-burst i:nth-child(5) { --a: 180deg; } .nav-burst i:nth-child(6) { --a: 225deg; }
.nav-burst i:nth-child(7) { --a: 270deg; } .nav-burst i:nth-child(8) { --a: 315deg; }

.intro .nav-pill { width: var(--pill-h) !important; transition-duration: 1s; }
.intro.ig-3 .nav-pill { width: var(--open-w) !important; }
.intro:not(.ig-1) .forge-mark polygon { transform: translate(calc(var(--dx) * 4), calc(var(--dy) * 4)) rotate(var(--r)) scale(.3); opacity: 0; }
.intro .ring-fill { stroke-dashoffset: 101; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .2, 1); }
.intro.ig-1 .ring-fill { stroke-dashoffset: 0; }
.intro.ig-3 .ring-fill { stroke-dashoffset: calc(var(--ring, 100) * 1.01); transition-duration: 1.2s; }
.intro.ig-2 .nav-burst::before { animation: navFlash .8s cubic-bezier(.2, .8, .3, 1) forwards; }
.intro.ig-2 .nav-burst i { animation: navSpark .75s cubic-bezier(.2, .8, .3, 1) forwards; }
.intro.ig-2:not(.ig-3) .brand-badge { animation: navThump .5s var(--ease); }
.intro.ig-3 .nav-trace { animation: navTrace 1.5s var(--ease) forwards; }
@keyframes navFlash { 0% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes navSpark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(28px) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(74px) scaleY(.2); }
}
@keyframes navThump {
  40% { transform: scale(1.12); box-shadow: 0 0 0 1px rgba(242, 86, 35, .6), 0 0 30px rgba(242, 86, 35, .7); }
}
@keyframes navTrace { 0% { opacity: 1; transform: scaleX(0); } 55% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

/* row content and hero copy arrive in a stagger once the pill is open */
.intro .nav-full > *, .intro .nav-links > a, .intro .hero-inner > *, .intro .showcase {
  transition: opacity .6s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms), filter .6s var(--ease) var(--d, 0ms), clip-path .7s var(--ease) var(--d, 0ms);
}
.intro:not(.ig-4) .nav-full > :not(.nav-links), .intro:not(.ig-4) .nav-links > a { opacity: 0; transform: translateY(10px); filter: blur(6px); }
.intro:not(.ig-4) .nav-links { background: transparent; }
.intro .nav-links { transition: background-color .6s .3s; }
.intro:not(.ig-4) .nav .brand-word { clip-path: inset(0 100% 0 0); }
.intro .nav .brand-word { clip-path: inset(0 -.2em 0 0); } /* room for the last letter, which overhangs its box */
.intro .nav-links > a:nth-child(2) { --d: 80ms; }  .intro .nav-links > a:nth-child(3) { --d: 130ms; }
.intro .nav-links > a:nth-child(4) { --d: 180ms; } .intro .nav-links > a:nth-child(5) { --d: 230ms; }
.intro .nav-links > a:nth-child(6) { --d: 280ms; } .intro .nav-links > a:nth-child(7) { --d: 330ms; }
.intro .nav-cta, .intro .burger { --d: 380ms; }
.intro:not(.ig-4) .hero-inner > *, .intro:not(.ig-4) .showcase { opacity: 0; transform: translateY(26px); }
.intro .hero-inner > :nth-child(2) { --d: 120ms; }
.intro .hero-inner > :nth-child(3) { --d: 240ms; }
.intro .showcase { --d: 380ms; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* fills the whole screen; the extra 36px sits under the next section's rounded overlap */
  min-height: calc(100vh + 36px); min-height: calc(100svh + 36px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(112px, 14vh, 150px) calc(56px + 36px);
  cursor: crosshair;
}
#forge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 40% at 50% 44%, rgba(15,15,15,.92) 0%, rgba(15,15,15,.6) 55%, rgba(15,15,15,0) 100%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(15,15,15,.55) 22%, rgba(15,15,15,0) 45%, rgba(15,15,15,0) 78%, var(--ink) 100%);
}
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }

.hero-title {
  font-size: clamp(44px, 7vw, 100px); line-height: .94; letter-spacing: -0.045em; font-weight: 500;
  font-variation-settings: "opsz" 96;
}
.hero-title .hot { text-shadow: 0 0 40px rgba(242, 86, 35, .45); }
.hero-lede { margin-top: 26px; max-width: 58ch; font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); font-weight: 300; }
.cta-row { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Work showcase: curved carousel inside the hero ----------
   Cards sit on the inside of a cylinder: edges come toward the viewer and turn inward.
   script.js sets each card's transform; --cw is the card width it reads. */
.showcase {
  --cw: clamp(136px, 13.5vw, 200px);
  position: relative; margin-top: clamp(32px, 5vh, 56px); cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.showcase.dragging { cursor: grabbing; }
.show-track {
  position: relative; height: calc(var(--cw) * .625 + 64px);
  perspective: 1300px; perspective-origin: 50% 30%; transform-style: preserve-3d;
}
.show-card {
  position: absolute; left: 50%; top: 0; width: var(--cw); margin-left: calc(var(--cw) / -2);
  transform-style: preserve-3d; will-change: transform, opacity; user-select: none;
}
.show-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 12px; background: #1A1A1A; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 40px -22px rgba(0, 0, 0, .95);
  transition: box-shadow .3s, transform .4s var(--ease);
}
.show-card p {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-inline: 2px;
  font-size: 12px; line-height: 1.3; white-space: nowrap; opacity: 0; transition: opacity .3s;
}
.show-card p b { font-weight: 500; color: #F5F5F5; overflow: hidden; text-overflow: ellipsis; }
.show-card p span { font-family: var(--f-body); font-size: 12px; color: #8F8F8F; }
.show-card.is-front p { opacity: 1; }
.show-card.is-front img { box-shadow: 0 0 0 1px rgba(242, 86, 35, .55), 0 28px 50px -22px rgba(242, 86, 35, .45); }
.show-card:hover img { transform: translateY(-4px); }


/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
/* each section slides over the one before it, so black and white read as stacked sheets */
.section, .footer { position: relative; margin-top: -36px; border-radius: 36px 36px 0 0; }
/* two light sections in a row read as one sheet: no seam, and one gap between them, not two */
.theme-light + .theme-light { margin-top: 0; border-radius: 0; padding-top: 0; }
.section-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px 64px; align-items: end; margin-bottom: 56px; }
.section-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; color: var(--muted); max-width: 46ch; }
.section-head-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.section-head-center h2 { max-width: 16ch; }
.section-sub { margin-top: 20px; max-width: 58ch; color: var(--muted); }
.section-head-center .btn { margin-top: 26px; }

/* ---------- About ---------- */
.kicker { font-family: var(--f-body); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy anat" "legend legend";
  gap: 56px 72px; align-items: center;
}
.about-copy { grid-area: copy; display: flex; flex-direction: column; gap: 20px; }
.about-copy h2 { max-width: 14ch; }
.about-copy p:not(.kicker) { color: var(--muted); max-width: 48ch; }
.about-copy .about-lede { color: var(--text); font-size: 18px; }

/* anatomy of the mark: grid, guides and the seven pieces, stepped by data-stage */
.anat {
  grid-area: anat; margin: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
}
.anat-top { display: flex; justify-content: space-between; align-items: center; }
.anat-kicker { font-size: 13px; color: var(--muted); }
.anat-replay {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: 500 13px var(--f-body); color: var(--text); background: var(--raised); border: 1px solid var(--line); transition: border-color .3s;
}
.anat-replay:hover { border-color: var(--orange); }
.anat-replay svg { width: 14px; height: 14px; transition: transform .6s var(--ease); }
.anat-replay:hover svg { transform: rotate(-300deg); }
.anat-svg { display: block; width: 100%; height: auto; color: rgba(255, 255, 255, .08); }
.anat-grid { transition: opacity 1s var(--ease); }
.anat-guides {
  fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 10 12; opacity: .6;
  transform-origin: 627px 627px; transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.anat-guides .anat-arc { stroke-dasharray: none; }
.anat-guides text { fill: var(--orange); stroke: none; font: 500 34px var(--f-body); }
.part { cursor: pointer; transition: transform 1s var(--ease) calc(var(--i) * 120ms), opacity .7s var(--ease) calc(var(--i) * 120ms); }
.anat[data-stage="4"] .part { transition-delay: 0s; transition-duration: .4s; }

.anat[data-stage="4"][data-focus] .part { opacity: .14; }
.anat[data-focus="core"] .part[data-part="core"], .anat[data-focus="web"] .part[data-part="web"], .anat[data-focus="str"] .part[data-part="str"],
.anat[data-focus="cx"] .part[data-part="cx"], .anat[data-focus="ops"] .part[data-part="ops"] { opacity: 1; }

.anat[data-stage="0"] .anat-grid { opacity: 0; }
.anat[data-stage="0"] .anat-guides { opacity: 0; transform: scale(.9) rotate(-10deg); }
.anat[data-stage="4"] .anat-guides { opacity: .2; }
.anat:is([data-stage="0"], [data-stage="1"]) .part-core,
.anat:is([data-stage="0"], [data-stage="1"], [data-stage="2"]) .part-frame { opacity: 0; transform: translate(var(--x), var(--y)); }
.anat.is-resetting * { transition: none !important; animation: none !important; }

/* each piece lands white-hot and cools to its own colour */
.anat:is([data-stage="2"], [data-stage="3"], [data-stage="4"]) .part-core,
.anat:is([data-stage="3"], [data-stage="4"]) .part-frame { animation: anatHot 1.8s ease-out calc(var(--i) * 120ms) backwards; }
@keyframes anatHot {
  0% { fill: #FFF1E0; filter: drop-shadow(0 0 24px rgba(255, 122, 69, .9)); }
  45% { fill: #FF7A45; filter: drop-shadow(0 0 14px rgba(242, 86, 35, .55)); }
}
.anat-strike { fill: none; stroke: var(--orange); stroke-width: 6; opacity: 0; transform-origin: 627px 630px; pointer-events: none; }
.anat[data-stage="4"] .anat-strike { animation: anatStrike 1.3s var(--ease) .1s; }
@keyframes anatStrike { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(2.6); } }

.tag { cursor: pointer; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.tag path { fill: none; stroke: var(--orange); stroke-width: 3; }
.tag circle { fill: var(--raised-2); stroke: var(--orange); stroke-width: 3; transition: fill .3s; }
.tag text { fill: var(--bright); font: 600 30px var(--f-body); text-anchor: middle; transition: fill .3s; }
.anat[data-stage="4"] .tag { opacity: 1; transform: none; transition-delay: calc(.5s + var(--i) * 110ms); }
.anat[data-stage="4"][data-focus] .tag { opacity: .25; transition-delay: 0s; }
.anat[data-focus="web"] .tag[data-part="web"], .anat[data-focus="str"] .tag[data-part="str"],
.anat[data-focus="cx"] .tag[data-part="cx"], .anat[data-focus="ops"] .tag[data-part="ops"] { opacity: 1; }
.anat[data-focus] .tag[data-part] circle { transition: fill .3s; }
.anat[data-focus="web"] .tag[data-part="web"] circle, .anat[data-focus="str"] .tag[data-part="str"] circle,
.anat[data-focus="cx"] .tag[data-part="cx"] circle, .anat[data-focus="ops"] .tag[data-part="ops"] circle { fill: var(--orange); }
.anat[data-stage="4"] .anat-mark { animation: anatGlow 1.6s var(--ease); }
@keyframes anatGlow { 35% { filter: drop-shadow(0 0 36px rgba(242, 86, 35, .6)); } }

.anat-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.anat-steps li { position: relative; display: flex; flex-direction: column; padding-top: 12px; font-size: 13px; color: var(--graphite); transition: color .4s; }
.anat-steps li span { font-size: 11px; }
.anat-steps li::before, .anat-steps li::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 2px; background: var(--line); }
.anat-steps li::after { background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.anat-steps li.on { color: var(--text); }
.anat-steps li.on::after { transform: scaleX(1); }

/* legend: each row lights its piece in the drawing */
.anat-legend { grid-area: legend; display: flex; flex-direction: column; gap: 14px; }
.anat-legend ul { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.anat-legend li { display: flex; }
.anat-legend li + li { border-left: 1px solid var(--line); }
.anat-legend button {
  all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 16px;
  padding: 24px 20px 26px; cursor: pointer; transition: background-color .3s;
}
.anat-legend button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.anat-legend button:hover, .anat-legend button.is-on { background: var(--surface); }
.anat-legend button > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.lg-no { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.anat-legend b { font: 500 17px var(--f-display); letter-spacing: -0.01em; color: var(--bright); }
.lg-mark {
  width: 48px; height: 48px; transition: transform .4s var(--ease);
  --p-core: var(--line); --p-web: var(--line); --p-str: var(--line); --p-cx: var(--line); --p-ops: var(--line);
}
.anat-legend button.is-on .lg-mark { transform: scale(1.12); }

/* selected work: a 3D tile carousel, after the Joy Bakers classes one. The front tile faces you and
   its neighbours swing back either side; --x (% of tile width), --z (px) and --r (deg) come from script.js.
   About clips sideways, so the swung tiles reach the screen edge but never widen the page. */
#about { overflow-x: clip; }
.work { margin-top: 112px; }
.work-head { text-align: center; margin-bottom: 48px; }
.work-head h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; }
.work-head p { margin: 10px auto 0; color: var(--muted); max-width: 32ch; }

.work-stage {
  --tw: min(680px, 60vw);
  position: relative; height: calc(var(--tw) * .625); perspective: 2000px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.work-tile {
  --x: 0; --z: 0; --r: 0;
  position: absolute; left: 50%; top: 0; width: var(--tw); aspect-ratio: 16 / 10;
  border-radius: var(--r-md); overflow: hidden; isolation: isolate; cursor: pointer;
  background: var(--raised); box-shadow: 0 40px 70px -35px rgba(0, 0, 0, .45);
  transform: translateX(-50%) translateX(calc(var(--x) * 1%)) translateZ(calc(var(--z) * 1px)) rotateY(calc(var(--r) * 1deg));
  transition: transform .9s var(--ease), opacity .6s;
}
.work-tile.is-active { cursor: default; }
.work-tile.is-hidden { opacity: 0; pointer-events: none; }
.work-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform 1.2s var(--ease), filter .6s;
}
.work-tile.is-active:hover img { transform: scale(1.04); }
.work-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(12, 12, 14, .72) 62%, rgba(12, 12, 14, .94));
}
/* tiles off to the side sit back under a wash of the paper ground */
.work-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--ink); opacity: .45; transition: opacity .6s;
}
.work-tile.is-active::before { opacity: 0; }
.work-tile:not(.is-active) img { filter: grayscale(.6); }
.work-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(18px, 2.4vw, 30px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: #fff;
}
.work-body b { font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.1; margin-top: 8px; }
.work-type { color: rgba(255, 255, 255, .78); font-size: 15px; }
.work-tag {
  font-size: 12px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(6px);
}
.work-tag-alt { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }

.work-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.work-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--bright);
  transition: background-color .3s, border-color .3s, color .3s;
}
.work-btn svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.work-prev svg { transform: scaleX(-1); }
.work-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.work-btn:hover svg { transform: translateX(2px); }
.work-prev:hover svg { transform: scaleX(-1) translateX(2px); }
.work-dots { display: flex; gap: 8px; }
.work-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--line); transition: width .4s var(--ease), background-color .3s;
}
.work-dots button.on { width: 30px; background: var(--orange); }

/* the stage rises in the first time the carousel is reached */
.js .work:not(.is-in) .work-stage { opacity: 0; transform: translateY(24px); }

/* ---------- Services accordion ---------- */
.acc { display: flex; gap: 12px; height: 480px; }
.acc-item {
  flex: 0 0 104px; min-width: 0; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft);
  display: flex; overflow: hidden; cursor: pointer; position: relative;
  transition: flex-grow .6s var(--ease), border-color .3s, background-color .3s;
}
.acc-item:hover { border-color: var(--line); }
.acc-item.is-open { flex-grow: 1; cursor: default; background: var(--raised); border-color: var(--line); }
.acc-head { flex: none; width: 100%; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.acc-item.is-open .acc-head { width: 88px; border-right: 1px solid var(--line); }
.acc-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--raised-2); color: var(--orange); border: 1px solid var(--line); }
.acc-item.is-open .acc-icon { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }
.acc-icon svg { width: 22px; height: 22px; }
.acc-vert {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-display); font-size: 26px; letter-spacing: -0.02em; color: var(--text); white-space: nowrap;
}
.acc-body {
  flex: 1; min-width: 0; padding: 28px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .35s ease;
}
.acc-item:not(.is-open) .acc-body { position: absolute; inset: 0; pointer-events: none; }
.acc-item.is-open .acc-body { opacity: 1; visibility: visible; transition-delay: .18s; }
.acc-visual { border-radius: var(--r-md); background: var(--ink); border: 1px solid var(--line); padding: 16px; }
.acc-visual svg { display: block; width: 100%; height: auto; }
.acc-copy { display: flex; flex-direction: column; gap: 14px; }
.acc-copy h3 { font-size: clamp(24px, 2.3vw, 32px); }
.acc-copy p { color: var(--muted); max-width: 42ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tags li { font-family: var(--f-body); font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); background: var(--surface); }

/* service illustration tokens */
.v-frame { fill: var(--surface); stroke: var(--line); }
.v-dim { fill: var(--raised-2); }
.v-hi { fill: var(--graphite); }
.v-acc { fill: var(--orange); }
.v-acc-soft { fill: var(--orange-soft); stroke: rgba(242,86,35,.35); }
.v-card { fill: var(--raised); stroke: var(--line); }
.v-card-hi { fill: var(--raised-2); stroke: var(--graphite); }
.v-line { fill: none; stroke: var(--graphite); stroke-width: 1.5; }
.v-line-acc { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-curve { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; }
.v-tick { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.v-bar { stroke: var(--graphite); stroke-width: 2; }
.v-txt { fill: var(--muted); font-family: var(--f-body); font-size: 12px; }

/* ---------- Approach grid ---------- */
.grid-4 { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feat { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft); padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 10px; }
.feat h3, .feat > p { padding-inline: 16px; }
.feat > p { color: var(--muted); max-width: 52ch; }
.feat-stage {
  position: relative; height: 270px; border-radius: 16px; margin-bottom: 16px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 120%, rgba(242,86,35,.14), transparent 60%),
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--ink);
}
.ui {
  position: absolute; border-radius: 14px; padding: 14px 16px; font-size: 13px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.8);
  transition: transform .6s var(--ease);
}
.ui-dark { background: var(--raised-2); border: 1px solid var(--line); color: var(--text); }
.ui-light { background: var(--surface); color: var(--bright); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -20px rgba(0,0,0,.45); }
.ui-orange { background: var(--orange); color: var(--on-orange); }
.ui-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.ui-label { font-family: var(--f-body); font-size: 12px; opacity: .75; }
.ui-badge { font-family: var(--f-body); font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--orange-soft); color: var(--orange); }
.ui-light .ui-badge { background: rgba(23,23,23,.1); color: var(--on-orange); }
.ui-badge.warn { background: rgba(242,178,58,.14); color: var(--warn); }
.ui-kv { display: flex; justify-content: space-between; gap: 18px; padding: 5px 0; font-variant-numeric: tabular-nums; }
.ui-kv span { opacity: .75; }
.ui-kv b { font-weight: 600; }
.ui-kv .ok { color: var(--orange-deep); display: inline-flex; }
.ui-kv svg, .ui-sync svg { width: 16px; height: 16px; }
.ui-kv.total { border-top: 1px dashed rgba(23,23,23,.3); margin-top: 6px; padding-top: 9px; }

.ui-a { left: 12%; top: 16%; width: 190px; transform: rotate(-4deg); }
.ui-b { right: 10%; bottom: 14%; width: 220px; transform: rotate(3deg); }
.ring { position: relative; width: 96px; height: 96px; margin: 4px auto 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 6; }
.ring-fg { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 26px; font-weight: 500; color: var(--bright); }

.ui-funnel { left: 12%; top: 14%; width: 250px; transform: rotate(-2deg); }
.fbar { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.fbar i { height: 10px; border-radius: 5px; width: var(--w); background: var(--graphite); }
.fbar i.acc { background: var(--orange); }
.ui-note { right: 9%; bottom: 16%; font-family: var(--f-body); font-size: 13px; transform: rotate(4deg); }

.ui-receipt { left: 14%; top: 12%; width: 230px; transform: rotate(-3deg); }
.ui-sync { right: 10%; bottom: 16%; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; transform: rotate(3deg); }

.ui-stock { left: 10%; top: 14%; width: 250px; transform: rotate(-2deg); }
.stock { display: grid; grid-template-columns: 1fr 70px; gap: 12px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.stock i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--orange) var(--w), var(--line) var(--w)); }
.stock.low span { color: var(--warn); }
.stock.low i { background: linear-gradient(90deg, var(--warn) var(--w), var(--line) var(--w)); }
.ui-toggle { right: 10%; bottom: 14%; display: flex; align-items: center; gap: 14px; font-weight: 600; transform: rotate(3deg); }
.switch { width: 38px; height: 22px; border-radius: 11px; background: var(--orange); position: relative; }
.switch i { position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-orange); }

.feat:hover .ui-a, .feat:hover .ui-funnel, .feat:hover .ui-receipt, .feat:hover .ui-stock { transform: rotate(0) translateY(-6px); }
.feat:hover .ui-b, .feat:hover .ui-note, .feat:hover .ui-sync, .feat:hover .ui-toggle { transform: rotate(0) translateY(6px); }

/* ---------- FAQ ----------
   Picks up the paper ground of Approach above it and fades to warm grey. Rows are pills; the
   open one turns white with a warm gradient edge. details[name] keeps one answer open at a time. */
.faq-section { background: linear-gradient(180deg, #F4F3F0 0%, #F4F3F0 45%, #D6D3CE 100%); }
.faq-head { text-align: center; margin-bottom: clamp(36px, 4.5vw, 56px); }
.faq-head p { margin: 18px auto 0; max-width: 46ch; color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); }

.faq-list { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.faq-list details {
  border-radius: 20px; border: 1.5px solid transparent;
  background: rgba(0,0,0,.055) padding-box;
  transition: background-color .3s, box-shadow .3s;
}
.faq-list details:not([open]):hover { background: rgba(0,0,0,.085) padding-box; }
.faq-list details[open] {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #FFC9A8, #F25623 30%, #F7D9C6 55%, #D9D4F2 80%, #FFC9A8) border-box;
  box-shadow: 0 18px 50px -24px rgba(242,86,35,.45);
}
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 16px 14px; font-size: clamp(15px, 1.3vw, 17px); color: var(--bright);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:focus-visible { outline-offset: -2px; border-radius: 18px; }
.faq-no {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.75); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 12px; color: var(--muted);
}
.faq-list details[open] .faq-no { background: var(--raised); }
.faq-q { flex: 1; min-width: 0; }
.faq-icon {
  flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: #171717; color: #fff; border: 1px solid transparent;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.5);
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px;
  border-radius: 2px; background: currentColor;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-list summary:hover .faq-icon { background: var(--orange); color: var(--on-orange); }
.faq-list details[open] .faq-icon {
  transform: rotate(45deg); background: #fff; color: #171717; border-color: var(--line); box-shadow: 0 2px 8px -2px rgba(0,0,0,.12);
}
.faq-list details p { padding: 0 64px 22px 54px; color: var(--muted); font-size: 15px; max-width: 68ch; }

/* smooth open and close where the browser supports animating details */
@supports selector(::details-content) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    block-size: 0; overflow: hidden; opacity: 0;
    transition: block-size .4s var(--ease), opacity .3s, content-visibility .4s allow-discrete;
  }
  .faq-list details[open]::details-content { block-size: auto; opacity: 1; }
}

.faq-foot { margin-top: clamp(28px, 3.5vw, 40px); display: flex; justify-content: center; }
.faq-link {
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--bright);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.faq-link span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18);
  transition: transform .25s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.faq-link svg { width: 11px; height: 11px; }
.faq-link:hover { color: var(--orange); }
.faq-link:hover span { background: var(--orange); border-color: var(--orange); color: var(--on-orange); transform: rotate(-45deg); }

/* ---------- Contact ---------- */
.contact {
  position: relative; overflow: hidden; border-radius: 32px; border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(242,86,35,.22), transparent 60%),
    var(--surface);
  padding: clamp(28px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start;
}
.contact-copy { display: flex; flex-direction: column; gap: 22px; }
.contact-copy .contact-copy > p { color: var(--muted); max-width: 44ch; }
.contact-points { display: grid; gap: 12px; margin-top: 8px; }
.contact-points li { display: flex; gap: 10px; align-items: center; color: var(--text); }
.contact-points svg { width: 18px; height: 18px; color: var(--orange); flex: none; }

.form { display: grid; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font-family: var(--f-body); font-size: 13px; color: var(--muted); padding: 0; margin-bottom: 8px; }
.field > span { margin-bottom: 0; }
.field em { font-style: normal; opacity: .7; text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--bright); background: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #E5484D; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick label { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink); font-size: 14px; transition: all .2s; }
.pick input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.pick input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.form .btn { margin-top: 6px; }
.form-status { min-height: 1.5em; font-size: 14px; color: var(--muted); }
.form-status.ok { color: var(--orange); }
.form-status.err { color: #FF8A80; }
.form-note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.form-note a, .foot-legal a, .consent-text a, .legal a { text-decoration: underline; text-underline-offset: 3px; }
.form-note a:hover, .foot-legal a:hover, .consent-text a:hover, .legal a:hover { color: var(--orange); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-soft); padding-top: 72px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--ink); }
.foot-top { display: grid; grid-template-columns: 1.2fr 1.5fr; gap: 48px; }
.foot-brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.foot-brand p { color: var(--muted); max-width: 38ch; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols div { display: flex; flex-direction: column; gap: 10px; }
.foot-h { font-family: var(--f-body); font-size: 13px; color: var(--graphite); margin-bottom: 6px; }
.foot-cols a { color: var(--muted); transition: color .2s; width: fit-content; }
.foot-cols a:hover { color: var(--orange); }
.foot-bottom { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 28px; border-top: 1px solid var(--line-soft); color: var(--graphite); font-size: 14px; }
.foot-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-legal a, .foot-legal button { color: var(--muted); transition: color .2s; }
.foot-legal button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.foot-legal button:hover { color: var(--orange); }

/* ---------- Cookie consent (built by consent.js) ----------
   Accept and Reject share one style on purpose: refusing must be as easy and as visible as agreeing. */
.consent {
  position: fixed; z-index: 90; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 520px; padding: 20px; display: grid; gap: 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); font-size: 14px; line-height: 1.55;
}
.consent[hidden] { display: none; }
.consent strong { color: var(--bright); font-weight: 600; }
.consent-now { color: var(--muted); font-size: 13px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-btn { background: var(--raised-2); border-color: var(--line); color: var(--bright); }
.consent-btn:hover { border-color: var(--orange); }
.consent-btn:focus-visible, .foot-legal button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---------- Legal pages (privacy.html) ---------- */
.legal-top { padding-block: 28px; border-bottom: 1px solid var(--line-soft); }
.legal-top .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.legal-top .back { color: var(--muted); font-size: 14px; }
.legal-top .back:hover { color: var(--orange); }
.legal { max-width: 760px; padding-block: clamp(48px, 8vw, 96px); }
.legal h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
.legal .updated { margin-top: 16px; color: var(--muted); font-size: 14px; }
.legal h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; margin-top: 56px; scroll-margin-top: 24px; }
.legal h3 { margin-top: 28px; }
.legal p, .legal ul, .legal .table-wrap { margin-top: 14px; }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.legal strong { color: var(--bright); font-weight: 600; }
.legal .lead { font-size: 18px; margin-top: 24px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.legal th { color: var(--bright); font-weight: 600; background: var(--raised); }
.legal tr:last-child td { border-bottom: 0; }
.link-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--orange); }
.link-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.legal code { font-size: 13px; background: var(--raised); padding: 1px 6px; border-radius: 6px; }
.legal-foot { border-top: 1px solid var(--line-soft); padding-block: 28px; color: var(--graphite); font-size: 14px; }
.legal-foot .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .burger { display: grid; }
  .nav-ind { display: none; }
  .nav.open .nav-pill { background: rgba(14, 14, 14, .94); }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    padding: 10px; border-radius: 28px; background: #121212; border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  }
  .nav.open .nav-links a:not(.btn) { font-size: 16px; padding: 14px 16px; }
  .nav.open .nav-cta-mobile { display: inline-flex; margin-top: 8px; }

  .about { gap: 48px 48px; }
  .anat-legend ul { grid-template-columns: repeat(6, 1fr); }
  .anat-legend li { grid-column: span 2; border-bottom: 1px solid var(--line); }
  .anat-legend li:nth-child(n+4) { grid-column: span 3; }
  .anat-legend li + li { border-left: 0; }
  .anat-legend li:not(:nth-child(3n + 1)):not(:nth-child(4)) { border-left: 1px solid var(--line); }

  .acc { flex-direction: column; height: auto; }
  .acc-item, .acc-item.is-open { flex: 1 1 auto; flex-direction: column; }
  .acc-head, .acc-item.is-open .acc-head { width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 18px 20px; border-right: 0; }
  .acc-item.is-open .acc-head { border-bottom: 1px solid var(--line); }
  .acc-vert { writing-mode: horizontal-tb; transform: none; font-size: 22px; }
  .acc-item:not(.is-open) .acc-body { display: none; }
  .acc-body { grid-template-columns: 1fr; padding: 20px; }
}

@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; margin-bottom: 40px; }
  .grid-4 { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; grid-template-areas: "copy" "anat" "legend"; }
  .anat-legend ul { grid-template-columns: 1fr; }
  .anat-legend li, .anat-legend li:nth-child(n+4) { grid-column: auto; }
  .anat-legend li, .anat-legend li:not(:nth-child(3n + 1)):not(:nth-child(4)) { border-left: 0; }
  .anat-legend button { flex-direction: row; align-items: center; padding: 14px 8px; }
  .lg-mark { flex: none; width: 40px; height: 40px; }
  .contact { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --section: 64px; }
  .m-hide { display: none; }
  .m-only { display: inline; }
  h2 { font-size: 32px; }

  /* hero: bigger type and work cards so the screen is filled with the pitch and the proof,
     rather than a small centred block floating on the floor pattern */
  .hero { min-height: 0; padding-block: 132px calc(36px + 36px); }
  .hero-title { font-size: min(11.6vw, 50px); line-height: .96; }
  .hero-lede { margin-top: 18px; max-width: 30ch; font-size: 17px; }
  .cta-row { margin-top: 26px; }
  .showcase { --cw: 54vw; margin-top: 44px; }
  .show-card p { justify-content: center; font-size: 13px; }
  .show-card p span { display: none; }

  .section-head { margin-bottom: 28px; }
  .section-head-side { display: none; }

  /* about: the drawing carries the story, the legend reads as a tight key */
  .about { gap: 28px; }
  .about-copy { gap: 14px; }
  .about-copy .about-lede { font-size: 17px; }
  .anat { padding: 16px; }
  .anat-steps { gap: 6px; }
  .anat-legend { gap: 6px; }
  .anat-legend button { gap: 14px; padding: 12px 4px; }
  .anat-legend button > span { font-size: 14px; line-height: 1.45; }
  .anat-legend b { font-size: 16px; }
  .lg-no { display: none; }
  .lg-mark { width: 32px; height: 32px; }
  /* work: the front tile fills most of the width, the neighbours just peek in at the edges */
  .work { margin-top: 48px; }
  .work-head { margin-bottom: 24px; }
  .work-stage { --tw: 84vw; }
  .work-type { font-size: 13px; line-height: 1.4; }
  .work-tag { font-size: 11px; padding: 4px 10px; }
  .work-controls { margin-top: 28px; }

  /* services: all four open at once as compact cards, icon beside the title and copy at full
     width, so nothing hides behind a tap; illustrations and tags are left to desktop */
  .acc { gap: 10px; }
  .acc-item, .acc-item.is-open { display: block; cursor: default; background: var(--surface); border-color: var(--line-soft); }
  .acc-head, .acc-item.is-open .acc-head { position: absolute; left: 18px; top: 18px; width: auto; padding: 0; border: 0; }
  .acc-item.is-open .acc-icon { background: var(--raised-2); color: var(--orange); border-color: var(--line); }
  .acc-icon { width: 36px; height: 36px; border-radius: 10px; }
  .acc-icon svg { width: 19px; height: 19px; }
  .acc-vert, .acc-visual, .acc-copy .tags { display: none; }
  .acc-item .acc-body, .acc-item:not(.is-open) .acc-body {
    display: block; position: static; opacity: 1; visibility: visible; pointer-events: auto; padding: 18px 18px 20px;
  }
  .acc-copy { gap: 10px; }
  .acc-copy h3 { display: flex; align-items: center; min-height: 36px; padding-left: 50px; font-size: 20px; }
  .acc-copy p { font-size: 15px; line-height: 1.5; max-width: none; }

  /* approach: one card at a time, swiped sideways, with the next one peeking in */
  .grid-4 {
    margin: 32px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px;
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .grid-4::-webkit-scrollbar { display: none; }
  .feat { flex: 0 0 84%; scroll-snap-align: start; padding: 12px 12px 24px; gap: 8px; }
  .feat h3, .feat > p { padding-inline: 8px; }
  .feat > p { font-size: 15px; line-height: 1.5; }
  .feat-stage { height: 200px; margin-bottom: 10px; }
  .feat-stage .ui { scale: .8; }
  .ui-a, .ui-funnel, .ui-receipt, .ui-stock { left: -2%; top: 4%; }
  .ui-b, .ui-note, .ui-sync, .ui-toggle { right: -2%; bottom: 6%; }
  .ui-a { left: -6%; top: -6%; }
  .ui-b { right: -6%; bottom: -6%; }

  .faq-head { margin-bottom: 28px; }
  .faq-list summary { padding: 14px 12px 14px 12px; gap: 12px; }
  .faq-list details p { padding: 0 16px 20px 50px; }

  .contact { padding: 28px 18px 22px; gap: 28px; border-radius: 26px; }
  .contact-copy { gap: 16px; }
  .contact-points { gap: 8px; margin-top: 0; font-size: 15px; }
  .field-row { grid-template-columns: 1fr; }
  .form { gap: 14px; }

  .footer { padding-top: 56px; }
  .foot-top { gap: 32px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .foot-bottom { margin-top: 40px; }

  .consent { left: 10px; right: 10px; padding: 16px; gap: 12px; font-size: 13px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .js .work:not(.is-in) .work-stage { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}