/* ==========================================================================
   BrewMint site stylesheet
   Single file, no build step. Sections:
   01 Tokens        02 Fonts         03 Reset and base   04 Type scale
   05 Layout        06 Utilities     07 Buttons          08 Tags
   09 Links         10 Motion        11 Nav              12 Footer
   13 Page header   14 Hero          15 Services ledger  16 Work bento
   17 Media         18 Process band  19 Statement        20 CTA band
   21 Splits        22 Hairline rows 23 Jobs grid        24 Quiet row
   25 Tools grid    26 Story panel   27 Contact and form 28 404
   29 Reduced motion
   Breakpoints: 1200, 900, 600. Every multi-column rule declares its
   collapse in the same block.
   z-index scale: 1 raised media, 2 nav, 3 mobile nav panel, 4 skip link.
   ========================================================================== */

/* ==========================================================================
   01 Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* Navy: from the logo background */
  --navy-900: #0D1822;
  --navy-800: #172636;
  --navy-700: #22364A;
  --navy-600: #2F4860;

  /* Porcelain: cool off-white surfaces */
  --porcelain-0: #F5F7F8;
  --porcelain-1: #FFFFFF;
  --porcelain-2: #EAEEF0;
  --porcelain-3: #D6DDE1;

  /* Gray: text and borders between navy and porcelain */
  --gray-700: #3B4A52;
  --gray-600: #55646B;
  --gray-500: #6F7E85;
  --gray-400: #8A979D;
  --gray-300: #A7B4BB;

  /* Copper accent ramp (not in the logo, on purpose) */
  --accent-100: #F8EBE2;
  --accent-200: #EFD3C0;
  --accent-300: #E2B08F;
  --accent-400: #D3905F;
  --accent-500: #C27540;
  --accent-600: #A85E2F;
  --accent-700: #8B4B25;
  --accent-800: #66361B;

  /* Steel: from the logo gradient. Support only, never body text. */
  --steel-300: #8FB2BD;
  --steel-500: #508898;
  --steel-700: #386070;

  /* Malt: rare warm note. Use at most once per page, or not at all. */
  --malt-300: #EAC77E;
  --malt-500: #D4A24C;
  --malt-700: #8F6620;

  /* Semantic, light surface */
  --bg: var(--porcelain-0);
  --bg-raised: var(--porcelain-1);
  --bg-alt: var(--porcelain-2);
  --fg: var(--navy-800);
  --fg-muted: var(--gray-600);
  --fg-faint: var(--gray-400);
  --line: var(--porcelain-3);
  --line-strong: var(--gray-300);
  --action: var(--accent-700);
  --action-hover: var(--accent-800);
  --action-fg: #FFFFFF;
  --action-soft: var(--accent-100);
  --action-soft-fg: var(--accent-800);
  --link: var(--accent-700);
  --focus: var(--accent-500);
  --shadow-sm: 0 1px 2px rgba(23,38,54,.06), 0 1px 1px rgba(23,38,54,.04);
  --shadow-md: 0 2px 4px rgba(23,38,54,.05), 0 10px 28px rgba(23,38,54,.09);

  /* Type */
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --display-width: 118%;

  /* Radius scales with hierarchy. These four, nothing else. */
  --r-xs: 4px;   /* tags */
  --r-sm: 8px;   /* buttons, inputs */
  --r-md: 14px;  /* cards, screenshot panels */
  --r-lg: 22px;  /* hero art panel, large media */

  /* Layout */
  --wrap: 1240px;
  --gutter: 24px;
  --section: clamp(72px, 9vw, 120px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Navy surfaces remap the semantic tokens only. Palette values never change. */
.on-dark {
  --bg: var(--navy-800);
  --bg-raised: var(--navy-700);
  --bg-alt: var(--navy-900);
  --fg: #EEF3F1;
  --fg-muted: var(--gray-300);
  --fg-faint: var(--gray-500);
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.24);
  --action: var(--accent-400);
  --action-hover: var(--accent-300);
  --action-fg: var(--navy-900);
  --action-soft: rgba(255,255,255,.08);
  --action-soft-fg: var(--accent-300);
  --link: var(--accent-300);
  --focus: var(--accent-400);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 2px 4px rgba(0,0,0,.2), 0 12px 32px rgba(0,0,0,.35);
  color: var(--fg);
  background: var(--bg);
}

/* Error colors, one per surface. */
:root { --error: #A83A2B; }
.on-dark { --error: #F08A7C; }

/* ==========================================================================
   02 Fonts
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-variable-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-variable-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   03 Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Short pages (404) still push the footer to the bottom of the viewport. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

body.is-locked { overflow: hidden; }

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent-200);
  color: var(--navy-900);
}

.on-dark ::selection {
  background: var(--accent-400);
  color: var(--navy-900);
}

/* ==========================================================================
   04 Type scale
   ========================================================================== */

.display {
  font-size: clamp(40px, 5.4vw, 66px);
  font-stretch: var(--display-width);
  font-weight: 640;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

h1, .h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  font-stretch: var(--display-width);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h2, .h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-stretch: var(--display-width);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h3, .h3 {
  font-size: 22px;
  font-stretch: 105%;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.lede {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 56ch;
}

p { max-width: 62ch; }

.small {
  font-size: 14px;
  line-height: 1.5;
}

/* --fg-faint (gray-400 on light, gray-500 on dark) does not reach 4.5:1 on
   either surface, so it is never used for text. Use .muted for secondary copy. */
.muted { color: var(--fg-muted); }

.numeral {
  font-size: clamp(40px, 4vw, 52px);
  font-stretch: var(--display-width);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   05 Layout
   ========================================================================== */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding-block: var(--section); }

/* Two plain sections in a row would stack two full --section paddings. The
   rhythm between any two blocks is exactly one --section, so the second
   section drops its top padding. Tinted bands keep theirs: their edge, not
   their heading, is what meets the section above. */
.section + .section { padding-top: 0; }

/* A page header already owns 40px of bottom padding, so the section after it
   makes up the difference instead of adding a second full --section. */
.page-header + .section { padding-top: calc(var(--section) - 40px); }

.band {
  padding-block: var(--section);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .grid-12 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }
}

/* ==========================================================================
   06 Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 4;
  background: var(--action);
  color: var(--action-fg);
  padding: 12px 18px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 560;
  text-decoration: none;
  transition: top 160ms var(--ease);
}

.skip:focus { top: 12px; }

/* ==========================================================================
   07 Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color 120ms var(--ease),
              color 120ms var(--ease),
              border-color 120ms var(--ease),
              transform 120ms var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-fg);
}
.btn-primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
}

.btn-secondary {
  border-color: var(--fg);
  color: var(--fg);
}
.btn-secondary:hover {
  background: var(--fg);
  color: var(--bg);
}

.btn-quiet {
  color: var(--fg);
  padding-inline: 4px;
}
.btn-quiet:hover { color: var(--action); }

.btn-sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 17px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ==========================================================================
   08 Tags
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--fg-muted);
}

/* ==========================================================================
   09 Links
   ========================================================================== */

a { color: var(--link); }

.prose a,
.text-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 120ms var(--ease), color 120ms var(--ease);
}

.prose a:hover,
.text-link:hover {
  text-decoration-thickness: 2px;
  color: var(--action-hover);
}

.text-link--fg { color: var(--fg); }
.text-link--fg:hover { color: var(--action); }

/* ==========================================================================
   10 Motion: reveal and page load
   ========================================================================== */

/* Gated on the .js class the page sets in its head. Without JavaScript the
   hidden state never applies, so every revealed section stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* One page-load moment. Homepage hero copy, inner-page h1 and lede. */
@keyframes bm-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes bm-panel-in {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}

.load-rise {
  opacity: 0;
  animation: bm-rise 800ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.load-panel {
  opacity: 0;
  animation: bm-panel-in 700ms var(--ease) both;
  animation-delay: 180ms;
}

/* ==========================================================================
   11 Nav
   ========================================================================== */

/* The tint and blur live on a pseudo-element, not on .nav itself: an element
   with backdrop-filter becomes the containing block for its fixed-position
   descendants, which would trap the mobile panel inside the 68px bar. */
.nav {
  position: sticky;
  top: 0;
  z-index: 2;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(245, 247, 248, .88);
  background: color-mix(in srgb, var(--porcelain-0) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.nav.is-stuck { border-bottom-color: var(--porcelain-3); }

.nav__inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 1px sentinel in normal flow, directly after the header. The nav hairline is
   driven by an IntersectionObserver on this element, never a scroll listener. */
.nav-sentinel {
  width: 1px;
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy-800);
}

.brand__mark { width: 34px; height: 32px; object-fit: contain; }

.brand__word {
  font-size: 19px;
  font-stretch: 112%;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__links a {
  color: var(--gray-600);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color 120ms var(--ease);
}

.nav__links a:hover { color: var(--navy-800); }
.nav__links a[aria-current="page"] { color: var(--navy-800); font-weight: 560; }
.nav__links .btn { color: var(--action-fg); }
.nav__links .btn:hover { color: var(--action-fg); }

.nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--r-sm);
}

.nav__toggle-bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: var(--navy-800);
  transition: transform 200ms var(--ease), opacity 160ms var(--ease);
}

.nav__toggle-bar:nth-child(1) { top: 19px; }
.nav__toggle-bar:nth-child(2) { top: 25px; }

.nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav__toggle-bar:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: block; }

  .nav__links {
    position: fixed;
    inset: 68px 0 0;
    z-index: 3;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 36px var(--gutter) 64px;
    background: var(--porcelain-0);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 220ms var(--ease), transform 260ms var(--ease), visibility 220ms;
  }

  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__links a:not(.btn) {
    font-size: clamp(28px, 8vw, 40px);
    font-stretch: var(--display-width);
    font-weight: 640;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--navy-800);
    padding-block: 6px;
  }

  .nav__links .btn { margin-top: 24px; }
}

/* ==========================================================================
   12 Footer
   ========================================================================== */

.footer { padding-block: 72px 32px; }

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.footer__lockup { height: 56px; width: auto; margin-bottom: 20px; }

.footer__desc {
  color: var(--fg-muted);
  max-width: 34ch;
  font-size: 16px;
}

.footer__col h2 {
  font-size: 14px;
  font-stretch: 100%;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--fg);
  margin-bottom: 14px;
}

.footer__col ul { display: grid; gap: 10px; }

.footer__col a {
  color: var(--fg-muted);
  font-size: 16px;
  text-decoration: none;
  transition: color 120ms var(--ease);
}

.footer__col a:hover { color: var(--fg); }

.footer__bottom {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--fg-muted);
}

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__brand { grid-column: auto; }
}

/* ==========================================================================
   13 Page header (inner pages and 404)
   ========================================================================== */

.page-header { padding-top: 56px; padding-bottom: 40px; }
/* 20ch keeps three of the four inner headlines on one line. Balanced wrapping
   splits the long one evenly instead of stranding its last word. */
.page-header h1,
.notfound h1 {
  max-width: 20ch;
  text-wrap: balance;
}
.page-header .lede { margin-top: 20px; }

/* ==========================================================================
   14 Hero (index)
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 88px;
}

.hero__copy h1 { max-width: 14ch; }
.hero__copy .lede { max-width: 40ch; margin-top: 22px; }
.hero__copy .btn-row { margin-top: 34px; }

.hero__art {
  position: relative;
  aspect-ratio: 5 / 6;
  max-height: 620px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(70% 60% at 78% 18%, #22364A, #172636 55%, #0D1822 100%);
}

.hero__canvas {
  width: 100%;
  height: 100%;
}

/* js/main.js sets .is-fallback on the panel when the signal field cannot
   mount. The fallback is the hero plate from assets/images/bg, cropped to
   the copper trace, over the panel gradient. */
.hero__art.is-fallback,
html:not(.js) .hero__art {
  background: url('../assets/images/bg/bg-hero-field.webp') 72% 50% / cover no-repeat,
              radial-gradient(70% 60% at 78% 18%, #22364A, #172636 55%, #0D1822 100%);
}

.hero__art.is-fallback .hero__canvas,
.story__panel.is-fallback canvas { display: none; }

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 64px;
  }
  .hero__art { aspect-ratio: 4 / 3; max-height: none; }
  .hero__copy h1 { max-width: 16ch; }
}

/* ==========================================================================
   15 Services ledger (index)
   ========================================================================== */

.ledger {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}

.ledger__head { position: sticky; top: 100px; }
.ledger__head p { margin-top: 16px; color: var(--fg-muted); max-width: 34ch; }

.ledger__rows > * {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 32px;
  padding-block: 30px;
  border-top: 1px solid var(--line);
}

.ledger__rows > *:first-child { padding-top: 0; border-top: 0; }
.ledger__rows > *:last-child { padding-bottom: 0; }

.ledger__body p { color: var(--fg-muted); }
.ledger__note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--fg-muted); max-width: 56ch; }

@media (max-width: 900px) {
  .ledger { grid-template-columns: 1fr; gap: 40px; }
  .ledger__head { position: static; }
  .ledger__rows > * { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   16 Work list (index, text only, no client names)
   ========================================================================== */

.work__head { margin-bottom: 40px; }
.work__head p { margin-top: 16px; color: var(--fg-muted); }

.worklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}

.worklist__item {
  border-top: 1px solid var(--line);
  padding-block: 28px;
}

.worklist__item .tag { margin-bottom: 14px; }
.worklist__item h3 { margin-bottom: 10px; max-width: 26ch; }
.worklist__item p { color: var(--fg-muted); max-width: 52ch; }

@media (max-width: 900px) {
  .worklist { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17 Pillars and their visuals (index)
   One visual per section. Every visual is aria-hidden: the copy beside it
   carries the meaning. Markup is in its finished state; js/motion.js sets
   start states only when it is about to animate, so with JS off or under
   reduced motion the finished frame shows.
   ========================================================================== */

/* Shared motion scale, mirrored in js/motion.js. */
:root {
  --dur-1: 200ms;
  --dur-2: 400ms;
  --dur-3: 700ms;
  --dur-4: 1200ms;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

.pillar {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}

.pillar__text h2 + p { margin-top: 20px; font-size: 20px; line-height: 1.5; color: var(--fg-muted); max-width: 44ch; }
.pillar__note { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--fg-muted); max-width: 52ch; }

/* Pillar 2: media left, text right, on the tinted band. */
.pillar--systems { grid-template-columns: 7fr 5fr; }
.pillar--systems .pillar__media { order: -1; }

/* Pillar 3: text above, the flow runs full width below. */
.pillar--auto { grid-template-columns: 1fr; gap: 44px; }
.pillar--auto .pillar__text { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; }
.pillar--auto .pillar__text h2 + p { margin-top: 0; }
.pillar--auto .pillar__note { margin-top: 22px; }

@media (max-width: 900px) {
  .pillar,
  .pillar--systems { grid-template-columns: 1fr; gap: 36px; }
  .pillar--systems .pillar__media { order: 0; }
  .pillar--auto .pillar__text { grid-template-columns: 1fr; gap: 20px; }
}

.band--tint { background: var(--porcelain-2); }

/* Mock UI shared parts. Small, quiet, product-like. */
.ui-title { font-size: 13px; font-weight: 600; font-stretch: 105%; color: var(--navy-800); }
.ui-pill,
.ui-search {
  font-size: 10.5px;
  color: var(--gray-600);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--porcelain-0);
}
.ui-search { border-radius: var(--r-sm); min-width: 34%; }
.ui-btn {
  font-size: 10.5px;
  font-weight: 560;
  color: #fff;
  background: var(--accent-700);
  border-radius: 6px;
  padding: 5px 10px;
  margin-left: auto;
  white-space: nowrap;
}
.ui-btn--block { display: block; margin: auto 0 0; text-align: center; padding: 8px 10px; }
.ui-btn--ghost { background: var(--porcelain-2); color: var(--navy-800); }
.ui-tag {
  justify-self: start;
  font-size: 10px;
  font-weight: 560;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--r-xs);
  background: var(--porcelain-2);
  color: var(--gray-700);
}
.ui-tag--ok { background: #E3EFEC; color: #2B5E54; }
.ui-tag--run { background: var(--accent-100); color: var(--accent-800); }
.ui-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* --- Custom apps: browser and phone frames --- */

.apps-stage {
  position: relative;
  aspect-ratio: 7 / 5;
  border-radius: var(--r-lg);
  background: var(--porcelain-2);
  overflow: hidden;
}

.frame-browser {
  position: absolute;
  left: 4%;
  top: 9%;
  width: 66%;
  border-radius: var(--r-md);
  background: var(--porcelain-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.frame-browser__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--porcelain-0);
}
.frame-browser__dots { display: flex; gap: 5px; }
.frame-browser__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--porcelain-3); }
.frame-browser__url {
  font-size: 10px;
  color: var(--gray-600);
  background: var(--porcelain-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 10px;
}

.frame-browser .screens { aspect-ratio: 16 / 10.4; }

.frame-phone {
  position: absolute;
  right: 6%;
  bottom: 7%;
  width: 26%;
  aspect-ratio: 9 / 18.5;
  border-radius: 26px;
  border: 5px solid var(--navy-800);
  background: var(--porcelain-1);
  box-shadow: 0 18px 44px rgba(23,38,54,.22);
  overflow: hidden;
}
.frame-phone__notch {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 34%;
  height: 12px;
  margin-left: -17%;
  border-radius: 8px;
  background: var(--navy-800);
  z-index: 2;
}
.frame-phone .screens { height: 100%; }

/* Screens stack in one grid cell. Only the current one shows without JS. */
.screens { display: grid; }
.screen { grid-area: 1 / 1; display: grid; min-height: 0; opacity: 0; }
.screen.is-current { opacity: 1; }
.screen__ui,
.screen__wire { grid-area: 1 / 1; padding: 14px; min-width: 0; }
.frame-browser .screen__ui,
.frame-browser .screen__wire { display: flex; flex-direction: column; }
.frame-browser .cal { flex: 1; }
.frame-phone .screen__ui,
.frame-phone .screen__wire { display: flex; flex-direction: column; gap: 10px; padding: 26px 10px 12px; }

/* The wireframe is a JS clone of the screen's UI with every surface drained
   to outlines and every text run turned into a bar. It is never in the HTML. */
.screen__wire * { color: transparent !important; background: none !important; border-color: var(--porcelain-3) !important; box-shadow: none !important; }
.screen__wire .wf-t { background: var(--porcelain-2) !important; border-radius: 3px; }
.screen__wire .ui-btn,
.screen__wire .ui-tag,
.screen__wire .cal__ev,
.screen__wire .inv__amt,
.screen__wire .label__code,
.screen__wire .paid__check,
.screen__wire .ui-avatar { background: none !important; outline: 1px dashed var(--porcelain-3); outline-offset: -1px; }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal__col { display: flex; flex-direction: column; gap: 5px; min-height: 120px; padding: 6px; border-radius: 6px; background: var(--porcelain-0); }
.cal__day { font-size: 10px; font-weight: 600; color: var(--gray-600); margin-bottom: 2px; }
.cal__ev { font-size: 9.5px; line-height: 1.2; padding: 5px 6px; border-radius: 4px; background: #E4ECF1; color: var(--navy-700); border-left: 2px solid var(--steel-500); }
.cal__ev--alt { background: var(--porcelain-2); border-left-color: var(--gray-400); }
.cal__ev--accent { background: var(--accent-100); color: var(--accent-800); border-left-color: var(--accent-500); }

/* Tables */
.tbl { display: grid; }
.tbl__row { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: center; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 11px; color: var(--navy-800); }
.tbl__row--head { border-top: 0; font-size: 10px; font-weight: 600; color: var(--gray-600); padding-top: 0; }

/* Invoice */
.inv { display: grid; gap: 0; }
.inv__meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--gray-600); margin-bottom: 8px; }
.inv__line,
.inv__total { display: grid; grid-template-columns: 1fr 40px 64px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 11px; }
.inv__qty { color: var(--gray-600); text-align: right; padding-right: 12px; }
.inv__total { grid-template-columns: 1fr 64px; font-weight: 600; border-top: 1.5px solid var(--navy-800); }
/* Amounts are drawn as bars on purpose: the site shows no prices anywhere. */
.inv__amt { display: block; height: 7px; border-radius: 3px; background: var(--porcelain-3); }
.inv__amt--lg { height: 9px; background: var(--gray-300); }

/* Phone parts */
.agenda { display: grid; gap: 6px; }
.agenda__item { display: grid; gap: 2px; padding: 7px 8px; border-radius: 8px; background: var(--porcelain-0); border: 1px solid var(--line); font-size: 9.5px; line-height: 1.3; color: var(--navy-800); }
.agenda__item--accent { background: var(--accent-100); border-color: var(--accent-200); }
.agenda__time { font-size: 9px; font-weight: 600; color: var(--gray-600); }
.card-mini { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: var(--porcelain-0); border: 1px solid var(--line); }
.ui-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-700); color: #fff; font-size: 9px; font-weight: 600; }
.paid { display: grid; justify-items: center; gap: 6px; padding: 18px 6px; text-align: center; }
.paid__check { width: 34px; height: 34px; border-radius: 50%; background: #E3EFEC; position: relative; }
.paid__check::after { content: ""; position: absolute; left: 12px; top: 9px; width: 8px; height: 13px; border: solid #2B5E54; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.paid__label { font-size: 11px; font-weight: 600; color: var(--navy-800); }
.paid__sub { font-size: 9px; color: var(--gray-600); }
.label { display: grid; gap: 4px; padding: 10px; border-radius: 8px; border: 1.5px solid var(--navy-800); background: #fff; }
.label__name { font-size: 11px; font-weight: 650; color: var(--navy-900); }
.label__meta { font-size: 9px; color: var(--gray-600); }
.label__code { height: 26px; margin-top: 4px; background: repeating-linear-gradient(90deg, var(--navy-900) 0 2px, transparent 2px 4px, var(--navy-900) 4px 5px, transparent 5px 8px); }

@media (max-width: 600px) {
  /* Taller stage: the browser fills the top, the phone sits low and only
     overlaps the empty bottom of the calendar columns. */
  .apps-stage { aspect-ratio: 4 / 5.2; }
  .frame-browser { left: 4%; top: 4%; width: 92%; }
  .frame-browser .screen__ui,
  .frame-browser .screen__wire { padding: 10px; }
  .cal__col { min-height: 92px; padding: 4px; }
  .cal__ev { font-size: 8px; padding: 3px 4px; }
  .cal__col .cal__ev + .cal__ev { display: none; }
  .frame-phone { width: 36%; right: 5%; bottom: 4%; }
  .ui-head .ui-pill, .ui-head .ui-search { display: none; }
}

/* --- Backends and internal tools: diagram, dashboard, sync row --- */

.sys {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--porcelain-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.sys__diagram { width: 100%; height: auto; overflow: visible; }
.sys__links line { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sys__node rect { fill: var(--porcelain-0); stroke: var(--porcelain-3); stroke-width: 1.5; }
.sys__node--end rect { fill: var(--navy-800); stroke: var(--navy-800); }
.sys__glyph { stroke: var(--accent-300); stroke-width: 3; stroke-linecap: round; fill: none; }
.sys__kind { font: 500 11px var(--font); fill: var(--gray-600); text-anchor: middle; }
.sys__name { font: 600 14px var(--font); font-stretch: 105%; fill: var(--navy-800); text-anchor: middle; }
.sys__packet { fill: var(--accent-500); opacity: 0; }

.dash { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash__card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--porcelain-0); min-width: 0; }
.dash__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--gray-600); }
.dash__head--sub { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dash__count { font-size: 18px; font-weight: 640; font-stretch: 110%; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.dash__live { font-size: 11px; font-weight: 560; color: #2B5E54; }
.dash__live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #3F8C7B; vertical-align: 1px; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-top: 12px; }
.chart i { flex: 1; height: 100%; border-radius: 3px 3px 0 0; background: var(--steel-300); transform: scaleY(var(--h)); transform-origin: bottom; }
.chart i:nth-child(6) { background: var(--accent-400); }

.log { position: relative; height: 128px; margin-top: 10px; overflow: hidden; }
.log::after { content: ""; position: absolute; inset: auto 0 0; height: 28px; background: linear-gradient(transparent, var(--porcelain-0)); }
.log__list { font: 11px/1 var(--mono); color: var(--gray-700); }
.log__list li { height: 24px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.log__list b { font-weight: 600; color: var(--navy-800); }
.log__list em { font-style: normal; color: #2B5E54; }

.sync {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--navy-800);
}
.sync__tool { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; white-space: nowrap; }
.sync__icon { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--navy-700); position: relative; }
.sync__icon--cal::after { content: ""; position: absolute; inset: 5px 3px auto; height: 1.5px; background: var(--navy-700); }
.sync__icon--books::after { content: ""; position: absolute; inset: 5px 5px; border-top: 1.5px solid var(--navy-700); border-bottom: 1.5px solid var(--navy-700); }
.sync__state { font-size: 11px; font-weight: 560; color: #2B5E54; background: #E3EFEC; border-radius: var(--r-xs); padding: 4px 8px; }

@media (max-width: 600px) {
  .sys { padding: 16px; }
  .dash { grid-template-columns: 1fr; }
  .sync { grid-template-columns: auto 1fr auto; row-gap: 10px; }
  .sync__state { display: none; }
  .sync .conn--rev { display: none; }
}

/* --- Connectors: a hairline with a dot that a run element carries across.
   The run is as long as the connector, so moving it by -100% to 0 moves the
   dot end to end with transforms only, at any size. --- */

.conn { position: relative; display: block; height: 12px; overflow: hidden; }
.conn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--line-strong); }
.conn__run { position: absolute; inset: 0; transform: translateX(-100%); }
.conn__dot { position: absolute; right: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent-500); box-shadow: 0 0 0 3px rgba(194,117,64,.18); }
.conn--rev .conn__run { transform: translateX(100%); }
.conn--rev .conn__dot { right: auto; left: 0; }
.conn--v { width: 12px; height: auto; min-height: 28px; }
.conn--v::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; margin: 0 0 0 -.75px; }
.conn--v .conn__run { transform: translateY(-100%); }
.conn--v .conn__dot { right: auto; left: 50%; top: auto; bottom: 0; margin: 0 0 0 -4px; }

/* --- Automations: node cards joined by connectors --- */

.flow {
  display: flex;
  align-items: center;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--porcelain-2);
}

.flow__node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--porcelain-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.flow__kind { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 560; color: var(--gray-600); }
.flow__glyph { width: 18px; height: 18px; border-radius: 5px; background: var(--navy-800); position: relative; flex: none; }
.flow__glyph::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--accent-300); }
.flow__glyph--check::after { border-radius: 1px; transform: rotate(45deg); }
.flow__glyph--action::after { border-radius: 1px; }
.flow__name { font-size: 16px; font-weight: 600; font-stretch: 105%; line-height: 1.3; color: var(--navy-800); }
.flow__detail { font-size: 13px; color: var(--gray-600); }

/* Highlight ring that lights when the signal arrives. Opacity only. */
.flow__glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid var(--accent-500);
  box-shadow: 0 0 0 4px rgba(194,117,64,.12);
  opacity: 0;
  pointer-events: none;
}

.flow__conn { flex: 0 0 40px; }

@media (max-width: 900px) {
  .flow { flex-direction: column; align-items: stretch; padding: 24px; }
  .flow__node { flex: none; }
  .flow__conn { flex: 0 0 32px; width: 12px; height: 32px; align-self: center; }
  .flow__conn::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; margin: 0 0 0 -.75px; }
  .flow__conn .conn__run { transform: translateY(-100%); }
  .flow__conn .conn__dot { right: auto; left: 50%; top: auto; bottom: 0; margin: 0 0 0 -4px; }
}

/* ==========================================================================
   17b Offers and niche row (index)
   ========================================================================== */

.offers { position: relative; background: var(--porcelain-2); overflow: hidden; isolation: isolate; }

/* The light plate sits behind the header only, faded out before the cards. */
.offers::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 560px;
  z-index: -1;
  background: url('../assets/images/bg/bg-light-traces.webp') center top / cover no-repeat;
  opacity: .4;
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}

.offers__head { max-width: 60ch; margin-bottom: 48px; }
.offers__head p { margin-top: 18px; color: var(--fg-muted); }

.offers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.offer {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--r-md);
  background: var(--porcelain-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.offer__name { font-size: 22px; }
.offer__pain { margin-top: 10px; font-size: 17px; line-height: 1.45; color: var(--fg-muted); }

.offer__flow {
  margin-top: 22px;
  padding: 18px 16px;
  border-radius: 10px;
  background: var(--porcelain-0);
  border: 1px solid var(--line);
}

.offer__step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 14px;
  padding-bottom: 18px;
}
.offer__step:last-child { padding-bottom: 0; }

.offer__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--navy-800);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
  background: var(--porcelain-1);
}
.offer__step-text { font-size: 14.5px; line-height: 1.45; color: var(--fg-muted); }
.offer__step-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }

/* The rail from one numeral down to the next. */
.offer__conn { position: absolute; left: 8px; top: 32px; bottom: 4px; }

.offer__result { margin: 20px 0 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--fg); font-weight: 500; }
.offer__cta { margin-top: auto; align-self: flex-start; }

@media (max-width: 1100px) {
  .offers__grid { grid-template-columns: 1fr; max-width: 640px; }
}

.niches { margin-top: 64px; }
.niches__title { margin-bottom: 20px; }
.niches__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
.niches__grid > li { display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--line-strong); padding-block: 18px; }
.niches__name { font-weight: 600; }
.niches__pain { color: var(--fg-muted); font-size: 16px; line-height: 1.5; }
.niches__engine { font-size: 15px; justify-self: start; }

@media (max-width: 900px) {
  .niches__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17c Background plates (PR #3 images, used four times on the whole site)
   ========================================================================== */

.band--plate { position: relative; isolation: isolate; overflow: hidden; }
.band--plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* Process band: perspective grid, kept low so the steps read first. */
.band--grid::before {
  background-image: url('../assets/images/bg/bg-grid-depth.webp');
  background-position: center bottom;
  opacity: .7;
}

/* CTA: the single copper point sits to the right of the centered copy. */
.band--signal::before {
  background-image: url('../assets/images/bg/bg-og-field.webp');
  background-position: 85% 50%;
}

/* ==========================================================================
   18 Process band
   ========================================================================== */

.process__head { max-width: 62ch; margin-bottom: 48px; }
.process__head p { margin-top: 16px; color: var(--fg-muted); }

.process__track { position: relative; }

.process__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: visible;
  pointer-events: none;
}

.process__line path {
  fill: none;
  stroke: var(--accent-400);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@supports (animation-timeline: view()) {
  .process__line path {
    stroke-dashoffset: 1;
    animation: bm-draw linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }
}

@keyframes bm-draw { to { stroke-dashoffset: 0; } }

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process__step {
  border-top: 1px solid var(--line-strong);
  padding-top: 22px;
}

.process__step .numeral { color: var(--accent-300); display: block; }
.process__step h3 { margin-top: 14px; }
.process__step p { margin-top: 10px; color: var(--fg-muted); font-size: 16px; }

@media (max-width: 900px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .process__head { margin-bottom: 40px; }
}

@media (max-width: 600px) {
  .process__steps { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   19 Founder statement
   ========================================================================== */

.statement__title { max-width: 22ch; margin-bottom: 44px; }

.statement__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: start;
}

.statement__lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 52ch;
}

.statement__points > li {
  border-top: 1px solid var(--line);
  padding-block: 18px;
  font-size: 17px;
  line-height: 1.45;
}

.statement__points > li:first-child { border-top: 0; padding-top: 0; }

.statement__link { display: inline-block; margin-top: 26px; }

@media (max-width: 900px) {
  .statement__grid { grid-template-columns: 1fr; gap: 36px; }
  .statement__title { margin-bottom: 32px; }
}

/* ==========================================================================
   20 CTA band
   ========================================================================== */

.cta {
  background: var(--porcelain-2);
  text-align: center;
}

.cta.on-dark { background: var(--navy-900); }

.cta__inner {
  max-width: 560px;
  margin: 0 auto;
}

/* The headline gets its own measure so it breaks over two lines. */
.cta__inner h2 { max-width: 500px; margin-inline: auto; }
.cta__inner p { margin: 18px auto 0; color: var(--fg-muted); max-width: 44ch; }

.cta__row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 600px) {
  .cta__row { flex-direction: column; gap: 16px; }
}

/* ==========================================================================
   21 Split sections (services page)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}

.split--7-5 { grid-template-columns: 7fr 5fr; }

/* Media-left ordering without changing source order. */
.split--media-first > .split__media { order: -1; }

.split__text h2 + * { margin-top: 20px; }
.split__text p + p { margin-top: 16px; }
.split__text p { color: var(--fg-muted); }

/* Small heading that introduces a list. Used inside splits and in the jobs
   band. Sentence case, normal tracking: this is a list label, not an eyebrow. */
.list-head {
  margin-top: 32px;
  margin-bottom: 0;
  font-size: 14px;
  font-stretch: 100%;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--fg);
}

@media (max-width: 900px) {
  .split,
  .split--7-5 { grid-template-columns: 1fr; gap: 36px; }
  .split--media-first > .split__media { order: 0; }
}

/* ==========================================================================
   22 Hairline rows (generic list component)
   ========================================================================== */

.rows > li,
.rows > div {
  border-top: 1px solid var(--line);
  padding-block: 18px;
}

.rows--flush > li:first-child,
.rows--flush > div:first-child { border-top: 0; padding-top: 0; }

.rows--narrow { max-width: 62ch; }

h2 + .rows,
h2 + .tools-grid { margin-top: 36px; }

.rows--tight > li,
.rows--tight > div { padding-block: 14px; }

.rows__title { font-weight: 560; }
.rows__note { margin-top: 6px; color: var(--fg-muted); font-size: 16px; }

/* Two-column hairline list (services "Includes") */
.rows--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  margin-top: 14px;
}

.rows--2col > li {
  border-top: 1px solid var(--line);
  padding-block: 16px;
  font-size: 16px;
  line-height: 1.45;
}

.rows--2col > li:first-child,
.rows--2col > li:nth-child(2) { padding-top: 16px; }

@media (max-width: 900px) {
  .rows--2col { grid-template-columns: 1fr; }
}

/* Numbered steps with tabular numerals (contact "What happens next") */
.steps-list { counter-reset: step; }

.steps-list > li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-block: 16px;
}

.steps-list > li::before {
  counter-increment: step;
  content: counter(step);
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  color: var(--action);
}

/* ==========================================================================
   23 Jobs grid (services "Typical jobs", 3 columns)
   ========================================================================== */

.jobs-band { background: var(--porcelain-2); }

.jobs-band__head { max-width: 56ch; }
.jobs-band__head p { margin-top: 18px; color: var(--fg-muted); max-width: 56ch; }

.list-head + .jobs-grid { margin-top: 18px; }

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  margin-top: 44px;
}

.jobs-grid > li {
  border-top: 1px solid var(--line-strong);
  padding-block: 18px;
  font-size: 17px;
  line-height: 1.45;
  max-width: 34ch;
}

/* Services "Ready-made systems": the same grid, one offer per column. */
.systems-grid > li { max-width: none; padding-block: 22px; }
.systems-grid h3 { font-size: 19px; margin-bottom: 8px; }
.systems-grid p { color: var(--fg-muted); font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.systems-grid .text-link { font-size: 15px; }
.systems__more { margin-top: 28px; }

@media (max-width: 900px) {
  .jobs-grid { grid-template-columns: repeat(2, 1fr); }
  .systems-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .jobs-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   24 Quiet row (services "Websites")
   ========================================================================== */

.quiet-row {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 36px;
}

.quiet-row > * { max-width: 62ch; }
.quiet-row p { margin-top: 12px; color: var(--fg-muted); }

/* ==========================================================================
   25 Tools grid (about, 2 columns of hairline rows)
   ========================================================================== */

.tools__head { max-width: 56ch; margin-bottom: 40px; }
.tools__head p { margin-top: 16px; color: var(--fg-muted); }

.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}

.tools-grid > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 20px;
  border-top: 1px solid var(--line);
  padding-block: 18px;
}

.tools-grid__name { font-weight: 560; }
.tools-grid__use { color: var(--fg-muted); font-size: 16px; }

@media (max-width: 600px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tools-grid > li { grid-template-columns: 1fr; }
}

/* ==========================================================================
   26 Story panel (about)
   ========================================================================== */

.story {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}

.story__panel {
  position: sticky;
  top: 100px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(70% 60% at 78% 18%, #22364A, #172636 55%, #0D1822 100%);
}

.story__panel canvas { width: 100%; height: 100%; }

.story__text p { font-size: 19px; line-height: 1.6; color: var(--fg-muted); max-width: 58ch; }
.story__text p + p { margin-top: 22px; }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 36px; }
  .story__panel { position: static; aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   27 Contact layout and form
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}

.contact__aside h3 { margin-bottom: 16px; }
.contact__aside h3 + ol,
.contact__aside h3 + ul { margin-bottom: 32px; }
.contact__email { margin-bottom: 32px; color: var(--fg-muted); }

.form-panel {
  background: var(--porcelain-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

.field { display: block; margin-bottom: 22px; }

.field__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--fg);
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--fg);
  transition: border-color 120ms var(--ease);
}

.field textarea { min-height: 148px; resize: vertical; }

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-600) 50%),
                    linear-gradient(135deg, var(--gray-600) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--gray-400); }

.field__help {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.field__error {
  display: none;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--error);
}

.field.has-error .field__error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--error); }

.form__foot { margin-top: 28px; }

/* Turnstile renders a 65px iframe; hold the space so the button doesn't jump. */
.field--check { min-height: 65px; }
.form__noscript { margin-top: 8px; font-size: 15px; color: var(--fg-muted); }

.form__error {
  display: none;
  margin-bottom: 16px;
  font-size: 16px;
  color: var(--error);
  max-width: 50ch;
}

.form.has-error .form__error { display: block; }

.form__success h3 { margin-bottom: 10px; }
.form__success p { color: var(--fg-muted); }

button[disabled] { opacity: .7; cursor: default; }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .contact__form { order: -1; }
}

@media (max-width: 600px) {
  .form-panel { padding: 24px; }
}

/* ==========================================================================
   28 404
   ========================================================================== */

.notfound { padding-top: 80px; padding-bottom: 120px; }
.notfound p { margin-top: 20px; color: var(--fg-muted); }
.notfound .text-link { display: inline-block; margin-top: 24px; }

/* ==========================================================================
   29 Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .reveal,
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }

  .load-rise,
  .load-panel {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .work__cell:hover { transform: none; }
  .btn:active { transform: none; }
  .skip { transition: none; }

  .process__line path { stroke-dashoffset: 0; animation: none; }
}