/* ProgressAmp Website 2.0 — design system v0.1
   Built on the approved wireframe kit (same class names), with brand colour, type and components.
   Contrast ratios noted next to colour tokens are WCAG 2.2 ratios against the stated background. */

/* =========================================================
   1. Tokens
   ========================================================= */
:root {
  /* Brand yellow — fills only. Never text on white (1.45:1). */
  --yellow:      #FFD158;   /* brand. Ink on yellow 12.7:1 */
  --yellow-600:  #F5BE2E;   /* pressed / deeper fill. Ink on it 10.8:1 */
  --yellow-200:  #FFE7A3;   /* hover tint. Ink on it 15.1:1 */
  --cream:       #FFF1CD;   /* calm bands. Ink on it 16.4:1 */
  --cream-50:    #FFF8E6;   /* soft panels */
  --ochre:       #8A6100;   /* yellow-family text on white 5.5:1, on cream 4.9:1 */

  /* Neutrals (warm) */
  --ink:    #141414;        /* text 18.4:1 on white */
  --ink-2:  #4A4843;        /* secondary text 9.1:1 */
  --ink-3:  #6B675F;        /* tertiary text 5.6:1 on white, 5.0:1 on cream */
  --edge:   #8C8576;        /* form borders, 3.7:1 (non-text minimum 3:1) */
  --line:   #E6E1D5;        /* hairlines (decorative) */
  --line-2: #CFC8B8;        /* stronger dividers (decorative) */
  --ph:     #ECE6D8;        /* image placeholders */
  --paper:  #FFFFFF;

  /* Night (dark bands, menu, footer) */
  --night:     #141414;
  --night-2:   #22211E;
  --on-night:  #F7F4EC;     /* 16.8:1 on night */
  --on-night-2:#B9B4A8;     /* 8.9:1 on night */
  --night-line:#3A3833;

  /* Secondary — illustrations, diagrams and data only, never UI */
  --teal:     #1E5A5E;      /* 7.8:1 on white */
  --teal-100: #DCEBEA;

  --error: #B42318;         /* 6.6:1 on white */

  /* Context colours (overridden inside bands) */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: var(--line);
  --rule-strong: var(--ink);
  --focus: var(--ink);
  --accent: var(--yellow);  /* highlighter / active marker */

  /* Type */
  --font-head: "Barlow", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale — desktop (≥1024) */
  --t-display: 76px;  --lh-display: 1.0;
  --t-h1: 54px;       --lh-h1: 1.06;
  --t-h2: 36px;       --lh-h2: 1.14;
  --t-h3: 23px;       --lh-h3: 1.28;
  --t-lead: 22px;     --lh-lead: 1.5;
  --t-body: 18px;     --lh-body: 1.65;
  --t-small: 15px;
  --t-label: 12.5px;

  /* Spacing (8px base) */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px;
  --gutter: 48px;
  --section: 128px;
  --stack: 24px;
  --max: 1344px;
  --measure: 700px;
  --rail: 280px;

  --header-h: 80px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 1023px) {
  :root {
    --t-display: 58px; --t-h1: 44px; --t-h2: 30px; --t-h3: 21px; --t-lead: 20px;
    --gutter: 40px; --section: 96px; --rail: 0px;
  }
}
@media (max-width: 599px) {
  :root {
    --t-display: 44px; --t-h1: 36px; --t-h2: 27px; --t-h3: 20px; --t-lead: 19px;
    --t-body: 17px; --t-small: 14.5px; --t-label: 12px;
    --gutter: 20px; --section: 72px; --stack: 20px; --header-h: 64px;
  }
}

/* =========================================================
   2. Base
   ========================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul { padding-left: 1.1em; }
li + li { margin-top: 6px; }
::selection { background: var(--yellow); color: var(--ink); }

/* =========================================================
   3. Type
   ========================================================= */
.display, .h1, .h2, .h3, .idx-title, .stat-n { font-family: var(--font-head); color: var(--fg); }
.display { font-size: var(--t-display); line-height: var(--lh-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.h2 { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.h3 { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: -0.005em; }
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--fg); text-wrap: pretty; }
p { text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.55; }
.muted { color: var(--fg-2); }
.label {
  font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.4; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2);
}
.prose > * + * { margin-top: 1em; }
.prose ul, .article-body ul { margin-top: 0.6em; padding-left: 0; list-style: none; }
.prose ul li, .article-body ul li { position: relative; padding-left: 26px; }
.prose ul li::before, .article-body ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 12px; height: 2px; background: var(--fg); }
.prose ol { padding-left: 1.3em; }
.prose strong { font-weight: 600; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { background: var(--yellow-200); text-decoration-color: var(--ink); }

/* Highlighter — yellow marker behind a phrase. Use sparingly: one per view. */
.hl {
  background: linear-gradient(to bottom, transparent 56%, var(--accent) 56%, var(--accent) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em;
}
.num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* =========================================================
   4. Layout
   ========================================================= */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section + .section { padding-top: 0; }
/* A band always gets full padding, and so does the section after it */
.section[class*="band--"], [class*="band--"] + .section { padding-top: var(--section); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Label + content row: the core editorial pattern */
.row { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gutter); }
.row > .row-label { padding-top: 8px; }
.row > .row-body { min-width: 0; }
@media (max-width: 1023px) {
  .row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .row > .row-label { padding-top: 0; }
}
.measure { max-width: var(--measure); }

/* Bands — set the context colours for everything inside */
.band, .band--cream { --bg: var(--cream); background: var(--bg); }
.band--soft { --bg: var(--cream-50); background: var(--bg); }
.band--yellow {
  --bg: var(--yellow); --fg-2: var(--ink); --fg-3: #4A4843; --rule: rgba(20,20,20,.22); --accent: var(--paper);
  background: var(--bg);
}
.band--night, .site-footer, .menu {
  --bg: var(--night); --fg: var(--on-night); --fg-2: var(--on-night-2); --fg-3: var(--on-night-2);
  --rule: var(--night-line); --rule-strong: var(--on-night); --focus: var(--yellow); --accent: var(--yellow);
  background: var(--bg); color: var(--fg);
}
.band--night .hl, .menu .hl { color: var(--ink); background: var(--yellow); padding: 0 .12em; }

/* =========================================================
   5. Logo
   ========================================================= */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 26px; width: auto; }
.band--night .logo img, .site-footer .logo img, .menu .logo img { filter: invert(1) brightness(1.06); }
@media (max-width: 599px) { .logo img { height: 22px; } }
/* Legacy placeholder from the wireframes, if any page still uses it */
.logo-ph { width: 148px; height: 32px; background: var(--ph); color: var(--ink-3); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }

/* =========================================================
   6. Placeholders (photography and illustration to come)
   ========================================================= */
.ph {
  background: var(--ph); position: relative; width: 100%; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start;
  color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
.ph > span { position: relative; z-index: 1; margin: 12px; padding: 3px 8px; background: rgba(255,255,255,.7); color: #4A4843; }
.ph::after { content: ""; position: absolute; right: 14px; top: 14px; width: 18px; height: 14px; border: 1.5px solid #B8B0A0; border-radius: 2px;
  background: radial-gradient(circle at 30% 35%, #B8B0A0 2px, transparent 2.5px), linear-gradient(135deg, transparent 55%, #B8B0A0 55%, #B8B0A0 62%, transparent 62%); }
/* Real photos sit inside the same placeholder frame, so layout and ratios don't change */
.ph.has-img::after { content: none; }
.ph.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card:hover .ph.has-img > img, .feature:hover .ph.has-img > img, .project-card:hover .ph.has-img > img { transform: scale(1.02); }
.ph.has-img > img { transition: transform .6s var(--ease); }
.ph.has-img { background: var(--ph); }
/* Partner logo used in place of a photo (e.g. partnership updates) */
.ph.logo-tile { background: var(--client); align-items: center; justify-content: center; }
.ph.logo-tile::after { content: none; }
.ph.logo-tile > img { width: 52%; max-width: 280px; height: auto; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-1x1 { aspect-ratio: 1 / 1; }

/* Illustration placeholder (method cards) */
.illo { margin: 0 0 8px; aspect-ratio: 2 / 1; background: var(--cream-50); border: 1px dashed var(--line-2); position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.illo svg { width: 56%; height: auto; fill: #EADFC2; stroke: none; }
.illo svg .illo-ln { fill: #DCCFAE; }
.illo svg .illo-ground { fill: none; stroke: #DCCFAE; stroke-width: 2; }
/* Method illustrations (recoloured Envato pack, palette: ink, yellow, cream, teal) */
.illo.has-illo { background: transparent; border: 0; aspect-ratio: 3 / 2; justify-content: flex-start; }
.illo.has-illo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .4s var(--ease); }
a.tile:hover .illo.has-illo { background: transparent; }
a.tile:hover .illo.has-illo img { transform: translateY(-4px); }
.illo figcaption { position: absolute; left: 10px; bottom: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); background: var(--paper); padding: 3px 8px; }

/* =========================================================
   7. Buttons and links
   ========================================================= */
.btn {
  --btn-bg: var(--yellow); --btn-fg: var(--ink); --btn-bd: var(--yellow);
  --btn-bg-h: var(--ink); --btn-fg-h: var(--yellow); --btn-bd-h: var(--ink);
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  text-decoration: none; font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; letter-spacing: .005em;
  cursor: pointer; border-radius: 0; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn::after { content: "→"; transition: transform .25s var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); --btn-bg-h: var(--yellow); --btn-fg-h: var(--ink); --btn-bd-h: var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--fg); --btn-bg-h: var(--fg); --btn-fg-h: var(--bg); --btn-bd-h: var(--fg); }
.btn--ghost::after { content: none; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--sm::after { content: none; }
.band--yellow .btn:not(.btn--ghost) { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); --btn-bg-h: var(--paper); --btn-fg-h: var(--ink); --btn-bd-h: var(--ink); }
.band--night .btn--ghost, .site-footer .btn--ghost { --btn-fg: var(--on-night); --btn-bd: var(--on-night); --btn-bg-h: var(--on-night); --btn-fg-h: var(--ink); }
.band--night .btn:not(.btn--ghost) { --btn-bg-h: var(--paper); --btn-fg-h: var(--ink); --btn-bd-h: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Arrow link: bold text, yellow underline that wipes and redraws */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--t-small); padding-bottom: 4px;
  text-decoration: none; color: var(--fg);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 3px no-repeat;
}
.band--yellow .arrow-link { background-image: linear-gradient(var(--ink), var(--ink)); }
.arrow-link::after { content: "→"; transition: transform .3s var(--ease); }
.arrow-link:hover, .arrow-link:focus-visible, .card:hover .arrow-link, .feature:hover .arrow-link, .project-card:hover .arrow-link, a.tile:hover .arrow-link {
  animation: pa-redraw .6s var(--ease) forwards;
}
.arrow-link:hover::after, .card:hover .arrow-link::after, .feature:hover .arrow-link::after, .project-card:hover .arrow-link::after { transform: translateX(4px); }
@keyframes pa-redraw {
  0%    { background-size: 100% 3px; background-position: 100% 100%; }
  45%   { background-size: 0 3px;    background-position: 100% 100%; }
  45.1% { background-size: 0 3px;    background-position: 0 100%; }
  100%  { background-size: 100% 3px; background-position: 0 100%; }
}

/* Plain underlined links (footer, legal, header CTA text) */
.header-cta, .site-footer .f-cols a:not(.f-btn), .f-legal a {
  text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.site-footer .f-cols a:not(.f-btn):hover, .f-legal a:hover { background-image: linear-gradient(var(--yellow), var(--yellow)); background-size: 100% 2px; }

/* =========================================================
   8. Header
   ========================================================= */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.site-header nav { display: flex; align-items: center; gap: 24px; }
.site-header .header-cta { background: var(--yellow); padding: 0 16px; min-height: 40px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; transition: background-color .2s var(--ease), color .2s var(--ease); }
.site-header .header-cta:hover, .site-header .header-cta:focus-visible { background: var(--ink); color: var(--yellow); }
.menu-btn { background: none; border: 0; padding: 8px 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 12px; align-items: center; color: var(--fg); }
.menu-btn .bars { width: 24px; height: 9px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; transition: height .2s var(--ease); }
.menu-btn:hover .bars { height: 13px; }
@media (max-width: 599px) {
  .header-cta { display: none !important; }
}

/* =========================================================
   9. Menu overlay (night)
   ========================================================= */
.menu { position: fixed; inset: 0; z-index: 100; overflow-y: auto; display: none; }
.menu.is-open, .menu.is-static { display: block; }
.menu.is-open { animation: pa-menu-in .35s var(--ease); }
@keyframes pa-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu.is-static { position: static; min-height: 100vh; }
.menu-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.menu-search { display: flex; align-items: center; gap: 14px; border-bottom: 1.5px solid var(--on-night-2); padding: 16px 0; margin: 48px 0 8px; color: var(--fg); }
.menu-search:hover { border-bottom-color: var(--yellow); }
.menu-search .icon { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex: none; }
.menu-search .icon::after { content: ""; position: absolute; width: 8px; height: 2px; background: currentColor; right: -7px; bottom: -3px; transform: rotate(45deg); }
.menu-search span:last-child { color: var(--fg-2); font-size: var(--t-h3); }
.menu .index { border-top: 0; }
.menu-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gutter); padding: 24px 0 72px; }
.menu-secondary { padding-top: 22px; }
.menu-secondary ul { list-style: none; padding: 0; }
.menu-secondary li { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-h3); font-family: var(--font-head); font-weight: 500; }
.menu-secondary a { text-decoration: none; }
.menu-secondary a:hover { color: var(--yellow); }
.menu-secondary .label { margin: 36px 0 6px; }
.menu-secondary .label:first-child { margin-top: 0; }
@media (max-width: 1023px) { .menu-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .menu-search { margin-top: 24px; } }

/* =========================================================
   10. Index — big numbered links (menu and home)
   ========================================================= */
.index { list-style: none; padding: 0; margin: 0; counter-reset: idx; border-top: 1px solid var(--rule); }
.index li { margin: 0; border-bottom: 1px solid var(--rule); counter-increment: idx; }
.index a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 20px 0; text-decoration: none; }
.index a::before { content: counter(idx, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); transform: translateY(-0.6em); }
.index .idx-title { font-size: var(--t-h1); line-height: 1.08; font-weight: 600; letter-spacing: -0.015em;
  background: linear-gradient(to bottom, transparent 58%, var(--accent) 58%, var(--accent) 94%, transparent 94%) 0 0 / 0 100% no-repeat;
  transition: background-size .45s var(--ease); justify-self: start; }
.index a:hover .idx-title, .index a:focus-visible .idx-title { background-size: 100% 100%; }
/* On night the marker fills the full line height, so dark text stays fully readable */
.menu .index .idx-title { background-image: linear-gradient(var(--yellow), var(--yellow)); padding: 0 .1em; margin-left: -.1em; transition: background-size .45s var(--ease), color .2s .1s; }
.menu .index a:hover .idx-title, .menu .index a:focus-visible .idx-title { color: var(--ink); }
.index .idx-meta { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.index--compact .idx-title { font-size: var(--t-h2); }
@media (max-width: 599px) {
  .index a { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 8px; padding: 16px 0; }
  .index .idx-meta { grid-column: 2; }
  .index .idx-title { font-size: 30px; }
  .index a::before { transform: translateY(-0.3em); }
}

/* =========================================================
   11. Home
   ========================================================= */
.hero { padding: 96px 0 var(--section); }
.hero .display { max-width: 15ch; }
.hero .lead { max-width: 640px; margin-top: 32px; }
@media (max-width: 599px) { .hero { padding-top: 48px; } }

.hero--split { padding-top: 88px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.hero--split .display { max-width: none; font-size: clamp(44px, 4.3vw, 72px); }
/* Keep the highlighted phrase on one line. On phones the headline scales with
   screen width so "deep understanding," always fits (checked 320–599px). */
.hero .hl { white-space: nowrap; }
@media (max-width: 599px) { .hero--split .display { font-size: min(44px, 9.6vw); } }
.hero--split .lead { font-size: var(--t-body); max-width: 560px; margin-top: 32px; color: var(--fg-2); }

/* Problem picker */
.hero-pick { border-top: 3px solid var(--rule-strong); padding-top: 16px; }
.hero-pick .label { color: var(--fg); }
.hero-pick ul { list-style: none; padding: 0; margin: 12px 0 20px; counter-reset: pick; }
.hero-pick li { margin: 0; border-bottom: 1px solid var(--rule); counter-increment: pick; }
.hero-pick li a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 10px 12px 0; text-decoration: none; font-size: 17px; line-height: 1.38; font-weight: 500;
  transition: background-color .2s var(--ease), padding .25s var(--ease);
}
.hero-pick li a::before { content: counter(pick, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); font-weight: 500; }
.hero-pick li a::after { content: "→"; opacity: .45; transition: transform .25s var(--ease), opacity .2s; }
.hero-pick li a:hover, .hero-pick li a:focus-visible, .hero-pick li a[aria-current] { background: var(--accent); color: var(--ink); padding-left: 12px; }
.hero-pick li a:hover::before, .hero-pick li a:focus-visible::before { color: var(--ink); }
.hero-pick li a:hover::after, .hero-pick li a:focus-visible::after { opacity: 1; transform: translateX(3px); }
.band--yellow .hero-pick li a:hover, .band--yellow .hero-pick li a:focus-visible { background: var(--paper); }
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } .hero--split .display { max-width: 18ch; } }
@media (max-width: 599px) {
  .hero--split { padding-top: 40px; }
  .hero-pick li:nth-child(n+6) { display: none; }
  .hero-grid { gap: 0; }
  .hero-main { display: contents; }
  .hero--split .display { order: 1; }
  .hero-pick { order: 2; margin-top: 32px; }
  .hero--split .lead { order: 3; margin-top: 36px; }
  .hero--split .btn-row { order: 4; }
  .hero-pick li a { font-size: 16px; grid-template-columns: 28px minmax(0, 1fr) auto; }
}

.feature { display: block; text-decoration: none; }
.feature .ph { margin-bottom: 28px; }
.feature .h2 { max-width: 22ch; }
.feature p { margin-top: 14px; max-width: 640px; color: var(--fg-2); }
.feature .arrow-link { margin-top: 22px; }
.feature:hover .ph, .card:hover .ph, .project-card:hover .ph { filter: brightness(.97); }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px var(--gutter); }
.card { display: block; text-decoration: none; }
.card .ph { margin-bottom: 20px; transition: filter .2s; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card .h3 { max-width: 26ch; transition: color .2s; }
.card:hover .h3 { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.card p { margin-top: 10px; color: var(--fg-2); font-size: var(--t-small); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
@media (max-width: 1023px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cards, .cards--3 { grid-template-columns: 1fr; gap: 48px; } }

/* =========================================================
   12. Detail pages
   ========================================================= */
.page-head { padding: 80px 0 var(--section); }
.marker { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.marker a { text-decoration: none; color: var(--fg); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat; }
.marker a:hover { background-size: 100% 100%; }
.page-head .h1 { max-width: 20ch; }
.page-head .lead { margin-top: 28px; max-width: var(--measure); }
@media (max-width: 599px) { .page-head { padding-top: 44px; } }

.detail { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gutter); counter-reset: sec; }
.detail-body { min-width: 0; }
.rail { position: relative; }
.rail-inner { position: sticky; top: calc(var(--header-h) + 40px); }
.rail ol { list-style: none; padding: 0; margin: 16px 0 0; counter-reset: r; }
.rail li { margin: 0; counter-increment: r; }
.rail a { display: grid; grid-template-columns: 30px 1fr; padding: 8px 0 8px 14px; border-left: 3px solid var(--line); text-decoration: none; font-size: var(--t-small); line-height: 1.4; color: var(--fg-2); transition: border-color .2s, color .2s; }
.rail a::before { content: counter(r, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; padding-top: 2px; color: var(--fg-3); }
.rail a:hover { color: var(--fg); border-left-color: var(--line-2); }
.rail a.is-active { border-left-color: var(--yellow); color: var(--fg); font-weight: 600; }
.rail a.is-active::before { color: var(--ochre); }

.detail-body > section { padding-bottom: 80px; margin-bottom: 80px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header-h) + 24px); counter-increment: sec; }
.detail-body > section:last-child { border-bottom: 0; margin-bottom: 0; }
.detail-body > section > .h2 { margin-bottom: 28px; max-width: 30ch; }
.detail-body > section > .h2::before {
  content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--ochre);
}
.callout { background: var(--cream); border-left: 4px solid var(--yellow); padding: 20px 24px; font-family: var(--font-head); font-size: var(--t-h3); line-height: 1.35; font-weight: 600; }
.otp { display: none; }
@media (max-width: 1023px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .otp { display: block; margin-bottom: 56px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); }
  .otp summary { list-style: none; padding: 16px 0; cursor: pointer; display: flex; justify-content: space-between; color: var(--fg); }
  .otp summary::-webkit-details-marker { display: none; }
  .otp summary::after { content: "+"; font-family: var(--font-body); font-size: 20px; line-height: 1; }
  .otp[open] summary::after { content: "–"; }
  .otp ol { margin: 0 0 18px; padding-left: 0; list-style: none; counter-reset: o; font-size: var(--t-small); }
  .otp li { counter-increment: o; display: grid; grid-template-columns: 30px 1fr; }
  .otp li::before { content: counter(o, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); padding-top: 2px; }
  .otp a { text-decoration: none; }
  .detail-body > section { padding-bottom: 56px; margin-bottom: 56px; }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 599px) { .split { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.chips li { margin: 0; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--edge); text-decoration: none; font-size: var(--t-small); font-weight: 500; transition: background-color .2s, border-color .2s; }
.chips a:hover, .chips a:focus-visible { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

.linklist { list-style: none; padding: 0; border-top: 3px solid var(--rule-strong); }
.linklist li { margin: 0; border-bottom: 1px solid var(--rule); }
.linklist a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; text-decoration: none; font-weight: 500; transition: padding .25s var(--ease), background-color .2s; }
.linklist a::after { content: "→"; transition: transform .25s var(--ease); }
.linklist a:hover { background: var(--accent); color: var(--ink); padding-left: 12px; padding-right: 12px; }

.project-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; text-decoration: none; align-items: start; }
.project-card .h3 { font-size: var(--t-h2); }
@media (max-width: 599px) { .project-card { grid-template-columns: 1fr; gap: 20px; } }

/* =========================================================
   13. Conversation prompt (yellow band)
   ========================================================= */
.prompt {
  --bg: var(--yellow); --fg-2: var(--ink); --rule: rgba(20,20,20,.22); --accent: var(--paper);
  background: var(--bg); padding: var(--section) 0;
}
.prompt .label { color: var(--ink); }
.prompt .h1 { max-width: 18ch; }
.prompt p:not(.label) { margin-top: 22px; max-width: 640px; font-size: var(--t-lead); line-height: var(--lh-lead); }
.prompt .btn-row { margin-top: 36px; }
.prompt .btn:not(.btn--ghost) { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); --btn-bg-h: var(--paper); --btn-fg-h: var(--ink); --btn-bd-h: var(--ink); }
.prompt .btn--ghost { --btn-fg: var(--ink); --btn-bd: var(--ink); --btn-bg-h: var(--ink); --btn-fg-h: var(--yellow); }

/* =========================================================
   14. Footer (night)
   ========================================================= */
.site-footer { padding: 88px 0 40px; }
.site-footer a { color: var(--on-night); }
.f-row { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gutter); padding: 32px 0; border-top: 1px solid var(--rule); }
.f-row:first-child { border-top: 0; padding-top: 0; }
.f-cols { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.f-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--yellow); color: var(--ink) !important; text-decoration: none; font-size: var(--t-small); font-weight: 600; transition: background-color .2s; }
.f-btn:hover { background: var(--paper); }
.f-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--on-night-2); padding-top: 32px; border-top: 1px solid var(--rule); }
.f-legal ul { list-style: none; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.f-legal li { margin: 0; }
.f-legal .logo { margin-bottom: 18px; background: none; padding-bottom: 0; }
@media (max-width: 1023px) { .f-row { grid-template-columns: 1fr; row-gap: 14px; } }

/* =========================================================
   15. Accessibility helpers
   ========================================================= */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.band--yellow :focus-visible, .prompt :focus-visible { outline-color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--ink); padding: 10px 14px; z-index: 200; font-weight: 600; }
.skip:focus { left: 8px; }

/* =========================================================
   16. Shared components (other templates)
   ========================================================= */
.block { padding-top: 40px; border-top: 3px solid var(--rule-strong); }
.block + .block { margin-top: var(--section); }
.block-intro { max-width: var(--measure); margin-bottom: 40px; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
.tile { border-top: 1px solid var(--rule); padding: 28px 0 40px; display: flex; flex-direction: column; gap: 12px; }
.tile .h3 { max-width: 24ch; }
.tile p { color: var(--fg-2); font-size: var(--t-small); }
.tile .arrow-link { margin-top: auto; align-self: flex-start; }
.tiles--1 { grid-template-columns: 1fr; }
.tiles--1 .tile .h3 { max-width: none; }
.tiles--1 .tile p { max-width: var(--measure); }
.tile dl { margin: 4px 0 0; font-size: var(--t-small); display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.tile dt { font-weight: 600; }
.tile dd { margin: 0; color: var(--fg-2); }
@media (max-width: 599px) { .tiles { grid-template-columns: 1fr; } }
a.tile { text-decoration: none; transition: border-color .2s; }
a.tile:hover { border-top-color: var(--rule-strong); }
a.tile:hover .h3 { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
a.tile:hover .illo { background: var(--cream); }
.tile .h3 .muted { display: block; margin-top: 4px; font-family: var(--font-body); font-size: var(--t-small); font-weight: 400; letter-spacing: 0; }
/* Numbered tiles (e.g. the nine challenges) */
.tiles--numbered { counter-reset: tile; }
.tiles--numbered .tile { counter-increment: tile; }
.tiles--numbered .tile::before { content: counter(tile, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--ochre); }

.group-h { padding-bottom: 12px; border-bottom: 3px solid var(--rule-strong); margin: 56px 0 0; }
.group-h:first-child { margin-top: 0; }

.statement { padding: var(--section) 0; border-top: 1px solid var(--rule); }
.statement p:not(.label) { font-family: var(--font-head); font-size: var(--t-h2); line-height: 1.25; font-weight: 600; max-width: 30ch; letter-spacing: -0.01em; }
.statement cite { display: block; margin-top: 20px; font-style: normal; }
.statement[class*="band--"] { border-top: 0; }
.statement.band--night .label { color: var(--yellow); }
.statement.band--night p:not(.label) { color: var(--on-night); }

.spectrum { margin-bottom: 48px; }
.spectrum-labels, .spectrum-ends { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-small); }
.spectrum-bar { height: 14px; margin: 10px 0; background: linear-gradient(90deg, var(--cream), var(--yellow) 60%, var(--ochre)); }
.spectrum-ends { color: var(--fg-2); font-size: 13px; }
.spectrum-ends span:last-child { text-align: right; }
.conditions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; align-items: center; }
.conditions .label { margin-right: 8px; }
.conditions span.pill { background: var(--cream); padding: 6px 12px; font-size: var(--t-small); font-weight: 600; }
.spectrum-labels span { font-family: var(--font-head); font-weight: 600; font-size: var(--t-h3); }
@media (max-width: 599px) {
  .spectrum-labels span { font-size: 16px; }
  .spectrum-ends { flex-direction: column; gap: 4px; }
  .spectrum-ends span:last-child { text-align: left; }
  .spectrum-ends span::before { content: "← "; }
  .spectrum-ends span:last-child::before { content: "→ "; }
  .conditions .label { flex-basis: 100%; margin-bottom: 4px; }
}

/* Stats — oversized figures with a yellow tick */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
.stat { border-top: 1px solid var(--rule); padding: 28px 0 36px; position: relative; }
.stat::before { content: ""; position: absolute; top: -2px; left: 0; width: 48px; height: 4px; background: var(--yellow); }
.stat-n { font-size: calc(var(--t-display) * 1.08); line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat p { margin-top: 14px; color: var(--fg-2); font-size: var(--t-small); max-width: 34ch; }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 599px) { .stats, .stats--3 { grid-template-columns: 1fr; } }

.figure { margin: 0; }
.figure figcaption { margin-top: 12px; font-size: 13px; color: var(--fg-2); }
.figure--wide { margin: 56px 0; }

.quote { margin: 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--yellow); }
.quote p { font-family: var(--font-head); font-size: var(--t-h3); line-height: 1.4; font-weight: 500; }
.quote cite { display: block; margin-top: 14px; font-style: normal; font-size: var(--t-small); color: var(--fg-2); }
.testimonial { --bg: var(--cream); background: var(--bg); padding: var(--section) 0; }
.testimonial blockquote p { font-family: var(--font-head); font-size: var(--t-h2); line-height: 1.3; font-weight: 600; max-width: 32ch; }
.testimonial cite { display: block; margin-top: 24px; font-style: normal; font-size: var(--t-small); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filters button { font: inherit; font-size: var(--t-small); font-weight: 500; min-height: 40px; padding: 0 14px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters button:hover { background: var(--yellow-200); }
.filters button[aria-pressed="true"]:hover { background: var(--ink); }
@media (max-width: 599px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); -webkit-overflow-scrolling: touch; }
  .filters button { flex: none; }
}

.search-field { display: flex; gap: 12px; align-items: center; border-bottom: 3px solid var(--ink); padding: 10px 0; }
.search-field input { flex: 1; min-width: 0; font: inherit; font-family: var(--font-head); font-size: var(--t-h2); border: 0; outline: none; background: transparent; color: var(--ink); padding: 0; }
.search-field:focus-within { border-bottom-color: var(--yellow); }
.search-field .icon { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; position: relative; flex: none; }
.search-field .icon::after { content: ""; position: absolute; width: 10px; height: 2px; background: var(--ink); right: -9px; bottom: -4px; transform: rotate(45deg); }
.results { list-style: none; padding: 0; margin: 0; }
.results li { margin: 0; border-bottom: 1px solid var(--rule); }
.results a { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 24px 0; text-decoration: none; }
.results .h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.results p { margin-top: 6px; color: var(--fg-2); font-size: var(--t-small); max-width: 70ch; }
.results mark { background: var(--yellow-200); color: inherit; padding: 0 2px; }
@media (max-width: 599px) { .results a { grid-template-columns: 1fr; gap: 6px; } }
.pager { display: flex; gap: 8px; margin-top: 40px; align-items: center; flex-wrap: wrap; }
.pager a, .pager span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--edge); text-decoration: none; font-size: var(--t-small); padding: 0 12px; }
.pager a:hover { background: var(--yellow-200); }
.pager [aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid var(--rule); margin: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ochre); padding-top: 4px; }
.steps p { margin-top: 6px; color: var(--fg-2); }

.partner-hero { --bg: var(--cream); background: var(--bg); padding: 72px 0; }
.partner-hero .wrap { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.partner-hero .logo-ph { width: 220px; height: 56px; font-size: 12px; background: var(--paper); }
.partner-hero .x { font-family: var(--font-head); font-size: 40px; font-weight: 300; }
@media (max-width: 599px) { .partner-hero { padding: 48px 0; } .partner-hero .wrap { gap: 20px; } .partner-hero .logo-ph { width: 160px; height: 44px; } }

/* ---------- Client and partner accents ----------
   One extra colour per case study or partner page, set by a class on <main>
   (or on a single element such as a partner card). It is used for the hero
   banner and one echo (the testimonial band). Yellow stays ProgressAmp's own:
   buttons and the "Start a conversation" band are never recoloured. */
.accent--sync     { --client: #E0FAAD; --on-client: #141414; --on-client-2: #3D4233; --client-ph: #DCD7D1; --client-mark: #141414; } /* ink 16.2:1, secondary 9.1:1 */
.accent--leanipd  { --client: #131749; --on-client: #FFFFFF; --on-client-2: #C9CBE0; --client-ph: #262B63; --client-mark: #FFD158; } /* white 16.9:1, secondary 10.5:1 */
.accent--vplanner { --client: #0071BC; --on-client: #FFFFFF; --on-client-2: #FFFFFF; --client-ph: #1A80C4; --client-mark: #FFFFFF; } /* white 5.1:1 */
[class*="accent--"] .project-hero, [class*="accent--"] .partner-hero, [class*="accent--"] .testimonial, .accent-band {
  --bg: var(--client); --fg: var(--on-client); --fg-2: var(--on-client-2); --fg-3: var(--on-client-2);
  --rule: color-mix(in srgb, var(--on-client) 22%, transparent); --rule-strong: var(--on-client);
  --accent: var(--client-mark); --focus: var(--on-client);
  background: var(--bg); color: var(--fg);
}
[class*="accent--"] .project-hero .ph { background: var(--client-ph); }
[class*="accent--"] .project-hero .ph > span { background: rgba(255,255,255,.75); }
[class*="accent--"] .marker span { color: var(--fg-2); }
.client-logo { display: block; height: 40px; width: auto; margin-bottom: 28px; }
@media (max-width: 599px) { .client-logo { height: 30px; margin-bottom: 20px; } }
.partner-hero .logo img, .partner-hero .partner-logo img { height: 34px; width: auto; }
.partner-hero .partner-logo img { height: 44px; }
.on-dark-white { filter: brightness(0) invert(1); }   /* single-colour logo shown in white */
.partner-hero .x { color: var(--fg); }
/* Partner cards: logo tile in the partner's colour */
.partners .partner-logo { display: flex; align-items: center; height: 72px; padding: 0 20px; margin-bottom: 16px; background: var(--client, var(--ph)); }
.partners .partner-logo img { max-height: 36px; width: auto; }
.partners a:hover .partner-logo { filter: brightness(1.08); }

.project-hero { --bg: var(--cream); background: var(--bg); padding: 72px 0 0; }
.project-hero .logo-ph { background: var(--paper); width: 120px; margin-bottom: 24px; }
.project-hero .h1 { max-width: 20ch; }
.project-hero .ph { margin-top: 56px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--rule); margin-bottom: var(--section); }
.facts dt { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.facts dd { margin: 6px 0 0; }
@media (max-width: 1023px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.article-head { padding: 80px 0 48px; }
.article-head .h1 { max-width: 22ch; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: var(--t-small); color: var(--fg-2); }
.article-meta strong { color: var(--fg); font-weight: 600; }
.article-body { max-width: var(--measure); }
.article-body .h2 { margin: 56px 0 18px; }
.article-body > p + p { margin-top: 1em; }
.article-body ul { margin: 1em 0; }
.article-body .quote { margin: 48px 0; }
.share { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 56px; }
.share a { font-size: var(--t-small); font-weight: 600; }
.author { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 40px; }
.author .ph { border-radius: 50%; }
.author .ph::after { content: none; }
.author p { font-size: var(--t-small); color: var(--fg-2); margin-top: 6px; }
.downloads { list-style: none; padding: 0; margin: 0; border-top: 3px solid var(--rule-strong); }
.downloads li { margin: 0; border-bottom: 1px solid var(--rule); }
.downloads a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; text-decoration: none; align-items: baseline; }
.downloads a:hover { background: var(--yellow-200); }
.downloads .small { color: var(--fg-2); white-space: nowrap; }

.person { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--rule); }
.person .prose { font-size: var(--t-small); }
.person .h3 { margin-bottom: 4px; }
@media (max-width: 599px) { .person { grid-template-columns: 1fr; gap: 16px; } .person .ph { max-width: 200px; } }
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.people-grid .h3 { margin-top: 14px; font-size: 19px; }
.people-grid p { font-size: var(--t-small); color: var(--fg-2); }
@media (max-width: 1023px) { .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.partners a { display: block; text-decoration: none; border-top: 1px solid var(--rule); padding-top: 20px; }
.partners .logo-ph { width: 100%; height: 72px; margin-bottom: 16px; }
.partners p { font-size: var(--t-small); color: var(--fg-2); margin-top: 6px; }
@media (max-width: 599px) { .partners { grid-template-columns: 1fr; } }

/* Forms */
.form { display: grid; gap: 22px; max-width: 640px; }
.field label { display: block; font-size: var(--t-small); font-weight: 600; margin-bottom: 8px; }
.field .hint { font-weight: 400; color: var(--fg-2); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--t-body); padding: 13px 14px; min-height: 52px;
  border: 1px solid var(--edge); background: var(--paper); color: var(--ink); border-radius: 0; transition: border-color .15s, box-shadow .15s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.field textarea { min-height: 160px; resize: vertical; }
.field.is-error input { border-color: var(--error); border-width: 2px; }
.field .error { display: block; margin-top: 6px; color: var(--error); font-size: var(--t-small); font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 599px) { .field-row { grid-template-columns: 1fr; } }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-small); color: var(--fg-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.captcha { height: 64px; width: 300px; max-width: 100%; }
.booking { border: 1px solid var(--rule); padding: 0; }
.booking .ph { aspect-ratio: auto; height: 520px; }
@media (max-width: 599px) { .booking .ph { height: 420px; } }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin: 0; padding: 14px 0; border-top: 1px solid var(--rule); }
.contact-list .label { display: block; margin-bottom: 4px; }

.notice { background: var(--cream-50); border-left: 4px solid var(--yellow); padding: 28px 32px; }

/* Optional video block (problem detail) */
.video-block { padding-bottom: var(--section); }
.video-ph { background: var(--night-2); position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video-play { width: 88px; height: 88px; border-radius: 50%; background: var(--yellow); position: relative; transition: transform .25s var(--ease); }
.video-ph:hover .video-play { transform: scale(1.06); }
.video-play::after { content: ""; position: absolute; left: 36px; top: 29px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent var(--ink); }
.video-tag { position: absolute; left: 14px; top: 14px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--night); color: var(--on-night-2); padding: 4px 8px; }
.video-time { position: absolute; right: 14px; bottom: 14px; font-family: var(--font-mono); font-size: 12px; background: var(--night); color: var(--on-night); padding: 3px 7px; }
@media (max-width: 599px) { .video-tag { font-size: 10px; left: 10px; top: 10px; max-width: calc(100% - 20px); } .video-time { right: 10px; bottom: 10px; } .video-play { width: 64px; height: 64px; } .video-play::after { left: 26px; top: 21px; border-width: 11px 0 11px 18px; } }