/* BoldMint — boldmint.org
   Mirrors the Figma file "Boldmint": desktop frame 1440px, mobile frame 390px.
   Fluid tokens interpolate between the two frames; values above 1440 hold at desktop size. */

:root {
  /* colour */
  --night: #1A1B1E;
  --night-rgb: 26 27 30;
  --white: #FFFFFF;
  --ink: #2E2E2E;
  --ink-muted: #666565;
  --on-dark: #FFFFFF;
  --on-dark-muted: #A3A5A8;
  --lime: #DBFF56;
  --mint-accent: #7CBF8D;
  --mint-deep: #3E7D50;
  --deep: 86 150 153;
  --teal: 137 207 206;
  --green: 105 169 86;
  --line-dark: rgb(255 255 255 / .16);
  --line-light: rgb(26 27 30 / .14);

  /* type */
  --display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --text: "Myriad Pro", "Source Sans 3", system-ui, sans-serif;

  /* fluid sizes: 390 → 1440 */
  --gutter: clamp(28px, calc(6.476vw + 2.74px), 96px);
  --hero-gutter: clamp(28px, calc(3.429vw + 14.63px), 64px);
  --edge: clamp(104px, calc(4.571vw + 86.17px), 152px);
  --base: clamp(56px, calc(3.81vw + 41.14px), 96px);
  --half: clamp(170px, calc(10.476vw + 129.14px), 280px);
  --hero-fade: clamp(120px, calc(7.619vw + 90.29px), 200px);
  --fs-xxl: clamp(48px, calc(10.667vw + 6.4px), 160px);
  --fs-xl: clamp(32px, calc(6.095vw + 8.23px), 96px);
  --fs-l: clamp(27px, calc(3.524vw + 13.26px), 64px);
  --fs-m: clamp(22px, calc(2.095vw + 13.83px), 44px);
  --fs-heading: clamp(18px, calc(0.571vw + 15.77px), 24px);
  --fs-numeral: clamp(40px, calc(3.048vw + 28.11px), 72px);
  --fs-body-l: clamp(16px, calc(0.381vw + 14.51px), 20px);
  --fs-body-m: clamp(15px, calc(0.19vw + 14.26px), 17px);
  --fs-hero-line: clamp(22px, calc(4.0vw + 6.4px), 64px);
  --gap-64: clamp(40px, calc(2.286vw + 31.09px), 64px);
  --gap-72: clamp(40px, calc(3.048vw + 28.11px), 72px);
  --gap-88: clamp(40px, calc(4.571vw + 22.17px), 88px);
  --gap-stmt: clamp(36px, calc(4.952vw + 16.69px), 88px);
  --gap-footer: clamp(48px, calc(3.81vw + 33.14px), 88px);
  --intro-lower: clamp(56px, calc(5.333vw + 35.2px), 112px);
  --svc-pad: clamp(36px, calc(1.143vw + 31.54px), 48px);
  --aud-pad: clamp(16px, calc(0.571vw + 13.77px), 22px);
  --contact-top: clamp(64px, calc(3.048vw + 52.11px), 96px);
  --footer-top: clamp(56px, calc(3.048vw + 44.11px), 88px);
  --footer-bottom: clamp(32px, calc(1.524vw + 26.06px), 48px);
  --hero-top: clamp(112px, calc(9.048vw + 76.71px), 207px);
  --hero-gap: clamp(64px, calc(6.571vw + 38.37px), 133px);
  --hero-bottom: clamp(54px, calc(-5.524vw + 133.54px), 112px);
  --card-gap: clamp(20px, calc(0.381vw + 18.51px), 24px);
  --step-gap: clamp(20px, calc(0.381vw + 18.51px), 24px);
  --nav-h: clamp(72px, calc(2.667vw + 61.6px), 100px);

  /* section blends — one continuous ramp night → deep teal → teal → mist → light, as in Figma */
  --blend-hero-to-light: linear-gradient(to bottom, rgb(86 150 153 / 1.0) calc(var(--half) * 0.0), rgb(98 163 165 / 0.98) calc(var(--half) * 0.0833), rgb(109 176 177 / 0.926) calc(var(--half) * 0.1667), rgb(121 189 189 / 0.844) calc(var(--half) * 0.25), rgb(132 202 201 / 0.741) calc(var(--half) * 0.3333), rgb(149 212 211 / 0.624) calc(var(--half) * 0.4167), rgb(170 220 220 / 0.5) calc(var(--half) * 0.5), rgb(190 229 228 / 0.376) calc(var(--half) * 0.5833), rgb(211 237 237 / 0.259) calc(var(--half) * 0.6667), rgb(219 240 238 / 0.156) calc(var(--half) * 0.75), rgb(226 242 238 / 0.074) calc(var(--half) * 0.8333), rgb(234 245 239 / 0.02) calc(var(--half) * 0.9167), rgb(241 247 239 / 0.0) calc(var(--half) * 1.0));
  --blend-light-bottom: linear-gradient(to top, rgb(109 176 177 / 1.0) calc(var(--half) * 0.0), rgb(119 187 187 / 0.98) calc(var(--half) * 0.0833), rgb(128 197 197 / 0.926) calc(var(--half) * 0.1667), rgb(139 208 207 / 0.844) calc(var(--half) * 0.25), rgb(156 215 214 / 0.741) calc(var(--half) * 0.3333), rgb(173 222 221 / 0.624) calc(var(--half) * 0.4167), rgb(190 229 228 / 0.5) calc(var(--half) * 0.5), rgb(208 236 236 / 0.376) calc(var(--half) * 0.5833), rgb(216 239 237 / 0.259) calc(var(--half) * 0.6667), rgb(222 241 238 / 0.156) calc(var(--half) * 0.75), rgb(229 243 238 / 0.074) calc(var(--half) * 0.8333), rgb(235 245 239 / 0.02) calc(var(--half) * 0.9167), rgb(241 247 239 / 0.0) calc(var(--half) * 1.0));
  --blend-light-top: linear-gradient(to bottom, rgb(109 176 177 / 1.0) calc(var(--half) * 0.0), rgb(119 187 187 / 0.98) calc(var(--half) * 0.0833), rgb(128 197 197 / 0.926) calc(var(--half) * 0.1667), rgb(139 208 207 / 0.844) calc(var(--half) * 0.25), rgb(156 215 214 / 0.741) calc(var(--half) * 0.3333), rgb(173 222 221 / 0.624) calc(var(--half) * 0.4167), rgb(190 229 228 / 0.5) calc(var(--half) * 0.5), rgb(208 236 236 / 0.376) calc(var(--half) * 0.5833), rgb(216 239 237 / 0.259) calc(var(--half) * 0.6667), rgb(222 241 238 / 0.156) calc(var(--half) * 0.75), rgb(229 243 238 / 0.074) calc(var(--half) * 0.8333), rgb(235 245 239 / 0.02) calc(var(--half) * 0.9167), rgb(241 247 239 / 0.0) calc(var(--half) * 1.0));
  --blend-dark-top: linear-gradient(to bottom, rgb(109 176 177 / 1.0) calc(var(--half) * 0.0), rgb(100 165 167 / 0.98) calc(var(--half) * 0.0833), rgb(90 154 157 / 0.926) calc(var(--half) * 0.1667), rgb(82 142 145 / 0.844) calc(var(--half) * 0.25), rgb(76 130 133 / 0.741) calc(var(--half) * 0.3333), rgb(70 117 120 / 0.624) calc(var(--half) * 0.4167), rgb(64 104 107 / 0.5) calc(var(--half) * 0.5), rgb(57 91 94 / 0.376) calc(var(--half) * 0.5833), rgb(51 78 81 / 0.259) calc(var(--half) * 0.6667), rgb(45 65 68 / 0.156) calc(var(--half) * 0.75), rgb(39 53 56 / 0.074) calc(var(--half) * 0.8333), rgb(32 40 43 / 0.02) calc(var(--half) * 0.9167), rgb(26 27 30 / 0.0) calc(var(--half) * 1.0));
  --blend-dark-bottom: linear-gradient(to top, rgb(109 176 177) calc(var(--half) * 0.0), rgb(100 165 167) calc(var(--half) * 0.0833), rgb(90 154 157) calc(var(--half) * 0.1667), rgb(82 142 145) calc(var(--half) * 0.25), rgb(76 130 133) calc(var(--half) * 0.3333), rgb(70 117 120) calc(var(--half) * 0.4167), rgb(64 104 107) calc(var(--half) * 0.5), rgb(57 91 94) calc(var(--half) * 0.5833), rgb(51 78 81) calc(var(--half) * 0.6667), rgb(45 65 68) calc(var(--half) * 0.75), rgb(39 53 56) calc(var(--half) * 0.8333), rgb(32 40 43) calc(var(--half) * 0.9167), rgb(26 27 30) calc(var(--half) * 1.0));
  --fade-to-night-44: linear-gradient(to bottom, rgb(26 27 30 / 0.0) 56.0%, rgb(26 27 30 / 0.028) 60.4%, rgb(26 27 30 / 0.104) 64.8%, rgb(26 27 30 / 0.216) 69.2%, rgb(26 27 30 / 0.352) 73.6%, rgb(26 27 30 / 0.5) 78.0%, rgb(26 27 30 / 0.648) 82.4%, rgb(26 27 30 / 0.784) 86.8%, rgb(26 27 30 / 0.896) 91.2%, rgb(26 27 30 / 0.972) 95.6%, rgb(26 27 30 / 1.0) 100.0%);
  /* light grounds: the pale green wash and side tint from Figma */
  --side-tint: linear-gradient(to right, rgb(var(--green) / .05), rgb(var(--green) / 0) 50%, rgb(var(--teal) / .10));
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--night); color: var(--on-dark); font-family: var(--text); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, fieldset { margin: 0; }
ol, ul { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
.light :focus-visible { outline-color: var(--mint-deep); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--lime); color: var(--night); padding: 12px 18px; border-radius: 999px; font: 600 13px var(--label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.wrap-hero { padding-left: max(var(--hero-gutter), env(safe-area-inset-left)); padding-right: max(var(--hero-gutter), env(safe-area-inset-right)); }

/* ---------- type ---------- */
.display-xxl { font: 800 var(--fs-xxl)/.92 var(--display); letter-spacing: -.045em; }
.display-xl  { font: 800 var(--fs-xl)/.97 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.display-l   { font: 700 var(--fs-l)/1.01 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.display-m   { font: 700 var(--fs-m)/1.07 var(--display); letter-spacing: -.03em; }
.heading     { font: 700 var(--fs-heading)/1.26 var(--display); letter-spacing: -.015em; }
.numeral     { font: 200 var(--fs-numeral)/.9 var(--display); letter-spacing: -.04em; color: var(--lime); }
.body-l      { font: 400 var(--fs-body-l)/1.5 var(--text); }
.body-m      { font: 400 var(--fs-body-m)/1.55 var(--text); }
.body-s      { font: 400 15px/1.5 var(--text); }
.label       { display: flex; align-items: center; gap: 14px; font: 400 13px/1.6 var(--label); letter-spacing: .6em; text-transform: uppercase; }
.label-s     { font: 500 11px/1.6 var(--label); letter-spacing: .45em; text-transform: uppercase; }
.muted       { color: var(--on-dark-muted); }
.light .muted { color: var(--ink-muted); }
.lime        { color: var(--lime); }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.light .dot { background: var(--mint-deep); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 32px; border-radius: 999px; border: 1px solid transparent; font: 600 13px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; background: none; transition: background-color .3s, color .3s, border-color .3s; }
.btn-icon { width: 16px; height: 16px; flex: none; overflow: hidden; }
.btn-icon svg { width: 16px; height: 16px; }
.btn:hover .btn-icon svg { animation: arrow-loop .55s cubic-bezier(.6, 0, .2, 1); }
@keyframes arrow-loop { 0% { transform: none; } 45% { transform: translate(18px, -18px); } 46% { transform: translate(-18px, 18px); } 100% { transform: none; } }
.btn-primary { background: var(--lime); color: var(--night); }
.btn-primary:hover { background: #E8FF8A; }
.btn-outline { border-color: var(--on-dark); color: var(--on-dark); }
.btn-outline:hover { background: var(--on-dark); color: var(--night); }
.btn-outline-light { border-color: var(--ink); color: var(--ink); }
.btn-outline-light:hover { background: var(--ink); color: var(--white); }
.btn-wide { width: 280px; }

/* ---------- navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top); border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s, transform .45s cubic-bezier(.2, .7, .2, 1); }
.nav.is-scrolled, .nav.is-open { background: rgb(var(--night-rgb) / .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line-dark); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); }
.nav-logo img { width: clamp(133px, 12.4vw, 178px); height: auto; }
.nav-links { display: flex; gap: 44px; }
.nav-links a { font: 400 13px/1.6 var(--label); letter-spacing: .6em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--lime); }
.nav-toggle { display: none; background: none; border: 0; color: var(--on-dark); padding: 6px; margin-right: -6px; cursor: pointer; }
.menu { position: fixed; inset: calc(var(--nav-h) + env(safe-area-inset-top)) 0 0 0; background: var(--night); display: flex; flex-direction: column; justify-content: space-between; padding-block: 40px 48px; }
.menu[hidden] { display: none; }
.menu-links { display: flex; flex-direction: column; gap: 8px; }
.menu-links a { font: 700 clamp(2.375rem, 10vw, 3rem)/1.15 var(--display); letter-spacing: -.03em; text-decoration: none; }
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- 02 hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); padding-top: var(--hero-top); padding-bottom: var(--hero-bottom); }
.hero-orb { position: absolute; z-index: -3; left: -42.6%; top: -40px; width: 206.4%; aspect-ratio: 16 / 9; background: url("/assets/img/glow-dark.jpg") center / 100% 100% no-repeat; pointer-events: none; will-change: transform; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: -40px 0 0 0; pointer-events: none;
  background: linear-gradient(to right, rgb(var(--night-rgb) / .92) 0, rgb(var(--night-rgb) / 0) 55%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0 0; height: var(--hero-fade); pointer-events: none;
  background: linear-gradient(to top, rgb(var(--deep)) 0, rgb(var(--deep) / .55) 35%, rgb(var(--deep) / .18) 65%, rgb(var(--deep) / 0) 100%); }
.hero-title { display: flex; flex-direction: column; gap: 10px; }
.hero-line { font: 700 var(--fs-hero-line)/1 var(--display); letter-spacing: -.035em; }
.hero-focus { font: 800 var(--fs-xxl)/.92 var(--display); letter-spacing: -.045em; }
.hero-copy { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; max-width: 1220px; margin-top: var(--hero-gap); }
.hero-positioning { display: flex; flex-direction: column; gap: 28px; }
.hero-positioning .heading { max-width: 540px; }
.hero-desc { display: flex; flex-direction: column; gap: 36px; min-width: min(576px, 100%); }
@media (min-width: 1001px) { .hero .ctas { flex-wrap: nowrap; } }
.hero-desc .body-l { max-width: 460px; }
.ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-signature { position: absolute; right: clamp(4px, calc(5.6vw - 18px), 62px); bottom: clamp(100px, calc(2vw + 92px), 120px); display: flex; flex-direction: column; align-items: center; gap: 14px; font: 400 13px/1.6 var(--label); letter-spacing: .6em; text-transform: uppercase; }
.hero-signature span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.hero-signature .dot { width: 12px; height: 12px; }
@media (max-width: 1000px) {
  .hero-copy { flex-direction: column; gap: 32px; padding-right: 56px; }
  .br-wide { display: none; }
}
.br-narrow { display: none; }
@media (max-width: 720px) { .br-narrow { display: inline; } }
@media (max-width: 720px) {
  .hero-orb { left: -99%; width: 344.6%; }
  .hero-positioning { gap: 32px; }
  .label { font-size: 12px; letter-spacing: .42em; }
  .hero-desc { gap: 32px; }
  .ctas { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-signature { font-size: 11px; right: 4px; }
  .hero-signature .dot { width: 8px; height: 8px; }
}

/* ---------- light grounds ---------- */
.light { color: var(--ink); }
.section { position: relative; }
.stack { display: flex; flex-direction: column; }

/* 03 introduction */
.intro { padding-block: var(--edge);
  background: var(--blend-hero-to-light), var(--blend-light-bottom), var(--side-tint),
    linear-gradient(to bottom, rgb(var(--green) / .05), rgb(var(--green) / .12) 50%, rgb(var(--green) / .08)),
    url("/assets/img/glow-light.jpg") center / cover no-repeat, var(--white); }
.intro .stack { gap: var(--gap-64); }
.intro-title { max-width: 1000px; }
.intro-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; padding-top: calc(var(--intro-lower) - var(--gap-64)); }
.intro-triad { display: flex; flex-direction: column; gap: 4px; }
.intro-triad .plus { color: var(--mint-accent); }
.intro-triad li:last-child .plus { color: var(--lime); }
.intro-copy { display: flex; flex-direction: column; gap: 24px; max-width: 440px; }

/* 06 process */
.process { padding-top: var(--edge); padding-bottom: var(--base);
  background: var(--blend-light-top),
    radial-gradient(ellipse 560px 420px at 82% 50%, rgb(var(--green) / .32), rgb(var(--green) / .14) 50%, rgb(var(--green) / 0) 100%),
    radial-gradient(ellipse 460px 360px at 12% 62%, rgb(var(--teal) / .30), rgb(var(--teal) / .13) 50%, rgb(var(--teal) / 0) 100%),
    var(--side-tint), linear-gradient(to bottom, rgb(var(--green) / .08), rgb(var(--green) / .14) 55%, rgb(var(--green) / .10)), var(--white); }
.process .stack { gap: var(--gap-64); }
.process-title { max-width: 1100px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: start; padding-top: 24px; }
.step { display: flex; flex-direction: column; gap: var(--step-gap); }
.step:nth-child(2) { margin-top: 56px; }
.step:nth-child(3) { margin-top: 112px; }
.step:nth-child(4) { margin-top: 168px; }
.step-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--step-gap); border-bottom: 1px solid var(--ink); }
.step-icon { width: 48px; height: 48px; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.step-num { color: var(--mint-deep); }

/* 07 who */
.who { padding-top: var(--gap-64); padding-bottom: var(--edge);
  background: var(--blend-light-bottom), var(--side-tint), linear-gradient(to bottom, rgb(var(--green) / .10), rgb(var(--green) / .15) 45%, rgb(var(--green) / .08)), var(--white); }
.who .stack { gap: var(--gap-72); }
.who-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.who-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 420px; }
.audiences li { display: flex; align-items: center; gap: 24px; padding-block: var(--aud-pad); border-bottom: 1px solid var(--line-light); }
.audiences li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--mint-deep); }

/* ---------- dark grounds ---------- */
.dark { background: var(--night); color: var(--on-dark); }

/* 04 services */
.services { padding-top: var(--edge); padding-bottom: var(--base); background: var(--blend-dark-top), var(--night); }
.services .stack { gap: var(--gap-72); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.section-head > .stack { gap: 28px; }
.section-note { max-width: 360px; }
.service-list { border-bottom: 1px solid var(--line-dark); }
.service { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 380px); gap: 48px; align-items: start; padding-block: var(--svc-pad); border-top: 1px solid var(--line-dark); }
.service::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-20%);
  background: linear-gradient(90deg, rgb(var(--green) / 0), rgb(var(--green) / .12) 45%, rgb(var(--teal) / 0)); transition: opacity .5s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.service:hover::before { opacity: 1; transform: none; }
.service p { transition: transform .4s; }
.service:hover p { transform: translateX(8px); }
.numeral-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.numeral-mask .numeral { display: block; }

/* 05 selected work */
.work { padding-top: var(--base); padding-bottom: var(--edge); background: var(--blend-dark-bottom), var(--night); }
.work .stack { gap: var(--gap-88); }
.work-head { display: flex; flex-direction: column; gap: 28px; }
.work-head .section-note { max-width: 520px; }
.work-grid { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 120px; }
.card { display: flex; flex-direction: column; gap: var(--card-gap); }
.card-wide { width: 58%; }
.card-narrow { width: 39.75%; }
.card-drop-l { margin-top: 176px; }
.card-drop-m { margin-top: 112px; }
.card-media { position: relative; overflow: hidden; border: 1px solid var(--line-dark); aspect-ratio: 724 / 400; }
.card-narrow .card-media { aspect-ratio: 496 / 400; }
.card-media::before { content: ""; position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.card-media span { position: absolute; left: 24px; top: 24px; font: 500 11px/1.6 var(--label); letter-spacing: .45em; text-transform: uppercase; }
.glow-d::before { background-image: url("/assets/img/glow-dark.jpg"); }
.glow-l { background: var(--white); }
.glow-l::before { background-image: url("/assets/img/glow-light.jpg"); }
.glow-l span { color: var(--ink); }
.glow-flip::before { transform: scaleX(-1); }
.card:hover .card-media::before { transform: scale(1.05); }
.card:hover .glow-flip::before { transform: scale(-1.05, 1.05); }
.card-meta { display: flex; justify-content: space-between; gap: 16px; }
.card h3 { text-decoration: underline 2px transparent; text-underline-offset: 10px; transition: text-decoration-color .3s; }
.card:hover h3 { text-decoration-color: var(--lime); }

/* 08 brand statement */
.statement { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--edge);
  background: var(--blend-dark-top), var(--fade-to-night-44),
    linear-gradient(to right, rgb(var(--night-rgb) / .92) 0, rgb(var(--night-rgb) / 0) 55%),
    url("/assets/img/glow-dark.jpg") 33.7% 42.75% / 205.8% 166.7% no-repeat, var(--night); }
.statement .stack { gap: var(--gap-stmt); }
.statement-title { max-width: 1000px; }
.statement-copy { max-width: 480px; align-self: flex-end; }
.statement-orb { display: none; }
.lime-mobile { color: inherit; }

/* 09 contact */
.contact { padding-top: var(--contact-top); padding-bottom: var(--base); }
.contact .stack { gap: var(--gap-88); }
.contact-title { max-width: 1180px; }
.circle-word { position: relative; display: inline-block; white-space: nowrap; }
.circle-word svg { position: absolute; left: -7%; top: -16%; width: 114%; height: 136%; overflow: visible; pointer-events: none; }
.circle-word path { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* desktop: invitation + demo on the left, form on the right, both ending on one line */
.contact-row { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 560px); justify-content: space-between; column-gap: 48px; row-gap: 32px; }
.contact-invite { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 24px; }
.demo { grid-column: 1; grid-row: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.form { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.demo .label-s { color: var(--lime); }
.field { display: flex; flex-direction: column; gap: 12px; padding-block: 24px; border-bottom: 1px solid var(--line-dark); transition: border-color .3s; }
.field:focus-within { border-bottom-color: var(--lime); }
.field label { color: var(--on-dark-muted); }
.field input, .field select { width: 100%; padding: 0; border: 0; background: none; color: var(--on-dark); font: 400 var(--fs-body-l)/1.5 var(--text); outline: none; border-radius: 0; }
.field input::placeholder { color: var(--on-dark-muted); opacity: 1; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center / 20px no-repeat; }
.field select:invalid { color: var(--on-dark-muted); }
.field select option { color: var(--night); }
.field:has(:user-invalid) { border-bottom-color: #FF8A7A; }
.form-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 40px; }
.form-status { min-height: 1.5em; }
.form-status.is-ok { color: var(--lime); }
.form-status.is-error { color: #FF8A7A; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 10 footer */
.footer { padding-top: var(--footer-top); padding-bottom: max(var(--footer-bottom), env(safe-area-inset-bottom)); }
.footer .stack { gap: var(--gap-footer); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 24px; }
.footer-logo { width: clamp(222px, 24.7vw, 356px); height: auto; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col a { font: 400 var(--fs-body-m)/1.4 var(--text); text-decoration: none; }
.footer-col a:hover { color: var(--lime); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--line-dark); }

/* ---------- tablet & mobile ---------- */
@media (max-width: 1000px) {
  .service { grid-template-columns: 110px minmax(0, 1fr); }
  .service p { grid-column: 2; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .step:nth-child(n) { margin-top: 0; }
  .step:nth-child(even) { margin-top: 48px; }
  /* stacked: invitation, form, then the demo offer */
  .contact-row { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .contact-invite { grid-row: 1; }
  .form { grid-column: 1; grid-row: 2; width: 100%; }
  .demo { grid-row: 3; }
  .btn-wide { width: 100%; }
}
@media (max-width: 720px) {
  .intro-row, .who-head, .section-head, .footer-top { flex-direction: column; align-items: stretch; gap: 32px; }
  .intro-row { gap: 40px; }
  .intro-triad { gap: 6px; }
  .service { display: flex; flex-direction: column; gap: 14px; }
  .service:hover p { transform: none; }
  .work-grid { flex-direction: column; row-gap: 60px; }
  .card-wide, .card-narrow { width: 100%; }
  .card-narrow { width: 86%; margin-left: auto; }
  .card-drop-l, .card-drop-m { margin-top: 0; }
  .card-media, .card-narrow .card-media { aspect-ratio: 350 / 220; }
  .card-meta { flex-direction: column; gap: 4px; }
  .steps { grid-template-columns: 1fr; row-gap: 52px; padding-top: 16px; }
  .step:nth-child(n) { margin-top: 0; }
  .step:nth-child(2) { margin-left: 20px; }
  .step:nth-child(3) { margin-left: 40px; }
  .step:nth-child(4) { margin-left: 60px; }
  .process { background: var(--blend-light-top),
    radial-gradient(ellipse 300px 300px at 92% 36%, rgb(var(--green) / .32), rgb(var(--green) / .14) 50%, rgb(var(--green) / 0) 100%),
    radial-gradient(ellipse 280px 260px at 6% 72%, rgb(var(--teal) / .30), rgb(var(--teal) / .13) 50%, rgb(var(--teal) / 0) 100%),
    var(--side-tint), linear-gradient(to bottom, rgb(var(--green) / .08), rgb(var(--green) / .14) 55%, rgb(var(--green) / .10)), var(--white); }
  .audiences li { gap: 14px; }
  .audiences li::before { width: 10px; height: 10px; }
  /* statement: the orb sits behind the copy, under a readability veil */
  .statement { padding-top: var(--edge); padding-bottom: 120px; background: var(--blend-dark-top), var(--night); }
  .statement-orb { display: block; position: absolute; z-index: -1; left: 0; right: 0; top: 150px; bottom: 0;
    background: linear-gradient(to bottom, var(--night) 0, rgb(var(--night-rgb) / .45) 110px, rgb(var(--night-rgb) / .34) 50%, rgb(var(--night-rgb) / .45) calc(100% - 150px), var(--night) 100%),
      url("/assets/img/glow-dark.jpg") 50.6% 0 / 193.7% 100% no-repeat; }
  .statement-copy { align-self: stretch; }
  .lime-mobile { color: var(--lime); }
  .footer-col { gap: 12px; }
}

/* ---------- motion ----------
   html.motion is set only when the visitor allows motion; main.js removes it if GSAP fails to load,
   and a 3.5s safety timer in <head> removes it if nothing runs, so content is never left hidden. */
.motion [data-hero-title], .motion .hero-copy, .motion .hero-signature { opacity: 0; }
.motion [data-words] { opacity: 0; }
.motion [data-reveal], .motion [data-step] { opacity: 0; }
.motion .numeral-mask .numeral { transform: translateY(105%); }
.motion .circle-word path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-orb { animation: drift 18s ease-in-out infinite alternate; }
}
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2.5%, 2%, 0) scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}