/* Goodfield Studio — shared site styles. Dependency-free, no build step.

   DELIBERATELY LIGHT-ONLY. Do not add a `prefers-color-scheme: dark` block.
   This is a considered decision, not an oversight: the studio's whole visual
   differentiation strategy is "light where both product sites (Prewind,
   BetaSuite) are dark" — it's how a visitor tells the studio layer apart
   from a product layer at a glance. Auto-switching to dark for the ~50%+ of
   visitors with system dark mode on would quietly undo the one thing this
   palette is for. If dark mode is ever wanted, it should be a deliberate,
   separately-designed decision — not a media query bolted onto this file. */

:root {
  /* Warm field palette — paper + ink + one deep green accent. */
  --paper: #faf7f2;       /* base background */
  --panel: #f2ebdc;       /* tinted section background, one notch deeper than paper */
  --card: #fffdfa;        /* raised card surface, lighter than paper */
  --ink: #1a1714;         /* body text, near-black with a warm cast */
  --muted: #6b6459;       /* secondary text — verified 5.47:1 on --paper, passes AA */
  --field: #1e4032;       /* primary accent — verified 10.7:1 on --paper, passes AAA */
  --field-strong: #142c22; /* hover/active state for accent elements */
  --field-soft: rgba(30, 64, 50, 0.08);   /* tinted chip / card-hover backgrounds */
  --field-soft-strong: rgba(30, 64, 50, 0.16);
  --field-wash: rgba(30, 64, 50, 0.11);   /* hero gradient wash */
  --line: #e6ded0;        /* warm hairline border */
  /* Artwork-only tints for the hero field illustration — warm sage steps
     between --paper and --field. Decoration only: never use these for UI
     surfaces, text, or anything that has to meet a contrast ratio. */
  --art-hill-back: #e2e6d0;
  --art-hill-mid: #d5ddc3;
  --art-hill-front: #bac9a7;
  --line-strong: #8f8574; /* form-control borders — ~3.6:1 on --card, passes WCAG 1.4.11 */
  --danger: #8c3b2e;      /* destructive action (cancel booking) — 6.3:1 on --paper */
  --ring: rgba(26, 23, 20, 0.12);

  --font-serif: "Fraunces", Charter, "Iowan Old Style", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky, so an in-page anchor (#apps, #story, #contact)
     would otherwise land its target flush under it. */
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  font-weight: 600;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--field); text-decoration-color: var(--field-soft-strong); }
a:hover { color: var(--field-strong); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--field);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--field-soft-strong); color: var(--ink); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Visually hidden until keyboard-focused, so a visitor tabbing in doesn't
   have to re-tab through the full nav on every single page. */
.skip-link:focus-visible {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  clip: auto;
  z-index: 50;
  background: var(--field);
  color: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

/* ---------------------------------------------------------------- Header */

.site-header {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
}
.site-header__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.3rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--field); }
.site-header nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.2rem 0.1rem;
  transition: color 0.15s ease;
}
.site-header nav a:hover { color: var(--field); }
.site-header nav a[aria-current="page"] { color: var(--field); }

/* ------------------------------------------------------------- Sections */

.section { padding: 4.5rem 0; position: relative; }
.section-tinted { background: var(--panel); }
/* Without this, two tinted sections back to back (e.g. #story into
   #contact, or /what-we-do's #supporting into #industries) read as one
   long slab with no visible boundary between them. */
.section-tinted + .section-tinted { border-top: 1px solid var(--line); }
.section-inner { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; position: relative; }
.section-head { max-width: 40rem; margin: 0 0 2.75rem; }
.section-head h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.4rem);
  margin-bottom: 0.85rem;
}
.section-head h2::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  background: var(--field);
  border-radius: 2px;
  margin-bottom: 1.1rem;
}
.section-intro { color: var(--muted); font-size: 1.05rem; max-width: 34rem; }

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 4.5rem;
}
.hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -8%;
  width: min(46vw, 620px);
  height: min(46vw, 620px);
  background: radial-gradient(circle at center, var(--field-wash) 0%, rgba(30, 64, 50, 0) 72%);
  pointer-events: none;
  z-index: 0;
}
.hero .section-inner { z-index: 1; }
.eyebrow {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--field);
  margin: 0 0 1.25rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 1.7rem + 3.2vw, 4.1rem);
  letter-spacing: -0.01em;
  max-width: 20ch;
  margin-bottom: 1.5rem;
}
.hero .lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: 2.25rem;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------- Decorative SVG artwork */
/* All artwork on the site is original inline SVG drawn in the site palette.
   No stock imagery, no external requests, nothing to license. Colors come
   from the same custom properties as everything else, so a palette change
   carries the artwork with it. Every piece is aria-hidden decoration;
   nothing content-bearing lives in an SVG. (Inline SVG presentation
   attributes are not blocked by the no-inline-styles CSP; style="" would
   be, so all of these are styled from here via classes.) */

/* Full-width rolling-fields horizon at the foot of the home hero — the one
   piece of scene-setting artwork on the site, riffing on the studio name.
   In-flow (not absolutely positioned), so it can never sit under text at
   any viewport width; the hero--field modifier hands the hero's bottom
   padding over to the artwork so the hills finish flush on the section
   edge. preserveAspectRatio="xMaxYMax slice" in the markup keeps the
   horizon at a readable height on phones by cropping the LEFT side away
   instead of letting the whole scene shrink to a sliver — the right edge
   is the anchored one because that's where the sun sits, so narrow
   viewports keep the scene's focal point. Sizing: 16vw is just under the
   viewBox's own 6:1 ratio (16.67vw), so wide viewports render the full
   scene with only ~10 viewBox units of empty sky sliced off the top —
   never cap this with a fixed max height, or YMax slicing will eat the
   sun and rays from the top on wide monitors (measured: a 230px cap
   removed most of the sun at 1920px). The doubled .hero.hero--field
   selectors are deliberate: the 640px media query re-declares .hero's
   padding shorthand later in the file, and at equal (0,1,0) specificity
   it was silently restoring the phone hero's bottom padding, leaving the
   hills' flat base floating 48px above the section edge. */
.hero.hero--field { padding-bottom: 0; }
/* The field panorama replaces the radial wash as the hero's decoration —
   the two layered together read as haze over the paddocks. */
.hero.hero--field::before { content: none; }
.hero-art {
  display: block;
  width: 100%;
  height: max(150px, 16vw);
  margin-top: 2.5rem;
  pointer-events: none;
}
.hero-art .art-hill-back { fill: var(--art-hill-back); }
.hero-art .art-hill-mid { fill: var(--art-hill-mid); }
.hero-art .art-hill-front { fill: var(--art-hill-front); }
.hero-art .art-line {
  fill: none;
  stroke: var(--field);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.3;
}
.hero-art .art-sun {
  fill: var(--panel);
  stroke: var(--field);
  stroke-width: 1.75;
  opacity: 0.65;
}
.hero-art .art-ray {
  fill: none;
  stroke: var(--field);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.4;
}

/* Capability-card line icons — one glyph per capability, same stroke
   grammar throughout (currentColor at stroke-width 2.6 on a 48px grid). */
.cap-icon {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--field);
  margin-bottom: 0.85rem;
  position: relative; /* keeps it above the watermark numeral, like h3/p */
}

/* Real app icons on the product cards, resized copies of each app repo's
   own 1024px marketing icon (Prewind: Configuration/Assets.xcassets;
   BetaSuite: ios/Runner/Assets.xcassets). The source icons are square
   PNGs, so the App-Store-style corner rounding is applied here — 12px on
   52px is close to Apple's ~22% radius. If an app's icon changes, re-copy
   it from the app repo and bump the ?gfv on the <img> URLs (new filenames
   only need a bump if the same filename is reused). */
.app-tile {
  flex: 0 0 auto;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

/* --------------------------------------------------------------- Buttons */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--field);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: 4px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover { background: var(--field-strong); color: var(--paper); transform: translateY(-1px); }
.btn-primary:focus-visible { outline-offset: 3px; }

.btn-plain {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--field-soft-strong);
  text-underline-offset: 3px;
  font-weight: 500;
  font-size: 1rem;
}
.btn-plain:hover { color: var(--field); text-decoration-color: var(--field); }

/* ---------------------------------------------------------- Pillar cards */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.pillar-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2.25rem 1.75rem 1.75rem;
  overflow: hidden;
}
.pillar-num {
  position: absolute;
  top: 0.9rem;
  right: 0.75rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--field-soft-strong);
  -webkit-user-select: none;
  user-select: none;
}
.pillar-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  position: relative;
  max-width: 15ch;
}
.pillar-card p {
  color: var(--muted);
  font-size: 0.98rem;
  position: relative;
}

/* -------------------------------------------------------------- App cards */

.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.app-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.app-card-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
/* Pushes the platform tag to the card's right edge without a spacer div. */
.app-card-top h3 { margin-right: auto; }
.app-card h3 { font-size: 1.5rem; }
.tag {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--field);
  background: var(--field-soft);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.app-card p {
  color: var(--muted);
  font-size: 0.98rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--field);
}
.app-link:hover { color: var(--field-strong); gap: 0.6rem; }
.app-link span { transition: transform 0.15s ease; }

.apps-more {
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------ Story / quote */

.story-body { max-width: 40rem; }
.story-body p {
  font-size: 1.08rem;
  line-height: 1.75;
}
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  line-height: 1.4;
  color: var(--field);
  border-left: 3px solid var(--field);
  padding: 0.2rem 0 0.2rem 1.5rem;
  margin: 2.25rem 0;
}

/* ---------------------------------------------------------------- Footer */

.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.site-footer a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.site-footer a:hover { color: var(--field); }
.site-footer .sep { color: var(--line); }

/* ------------------------------------------------------------ Legal pages */

main.legal {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3.75rem 1.5rem 5.5rem;
}
main.legal h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.4rem); margin-bottom: 0.6rem; }
main.legal .meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 2.25rem; }
main.legal h2 {
  font-size: 1.3rem;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}
main.legal p, main.legal li {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
}
main.legal .lead {
  font-size: 1.1rem;
  background: var(--panel);
  border-left: 3px solid var(--field);
  padding: 1.1rem 1.4rem;
  border-radius: 4px;
  margin-bottom: 2rem;
}
main.legal ul { padding-left: 1.3rem; margin: 0 0 1.1em; }
main.legal li { margin-bottom: 0.4em; }
main.legal a { color: var(--field); }

/* -------------------------------------------------------------------- 404 */

main.not-found {
  max-width: 34rem;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 8rem;
  text-align: center;
}
main.not-found h1 {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  margin-bottom: 1rem;
}
main.not-found p {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* ------------------------------------------------------ Section eyebrow */

.section-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem;
}
.pillar-eyebrow {
  margin-top: 2rem;
}
.contact-location {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0;
}

/* --------------------------------------------------------------- Page lede */
/* The /what-we-do page opener — same wordmark-eyebrow + serif H1 device as
   the home hero, but without the radial wash graphic (that stays a hero-only
   flourish so Home keeps the one moment of decoration). */

.page-lede { padding: 4.5rem 0 3.5rem; }
.page-lede h1 {
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem);
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin-bottom: 1.25rem;
}
.page-lede .lede {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 46rem;
}

/* --------------------------------------------------------- Capability grid */
/* Two tiers, one card language: core capabilities are full pillar-style
   cards with feature lists; supporting capabilities are the same shell at
   reduced density. Home gets a third, unnumbered, condensed variant. */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.capability-grid--supporting { grid-template-columns: repeat(3, 1fr); }

.capability-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2.25rem 1.75rem 1.75rem;
  overflow: hidden;
}
.capability-num {
  position: absolute;
  top: 0.9rem;
  right: 0.75rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--field-soft-strong);
  -webkit-user-select: none;
  user-select: none;
}

.capability-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
  position: relative;
  max-width: 22ch;
}
.capability-card .cap-summary {
  color: var(--muted);
  font-size: 0.98rem;
  position: relative;
  margin-bottom: 1.1rem;
}
.capability-card .cap-features {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
  position: relative;
  margin: 0;
}
.capability-grid--supporting .cap-summary,
.capability-grid--supporting .cap-features { font-size: 0.9rem; }

.cap-crossref {
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  position: relative;
}
.cap-crossref a { font-weight: 600; }

/* Home's condensed capability cards: unnumbered, no feature list, one line. */
.capability-card--condensed { padding: 1.9rem 1.6rem; }
.capability-card--condensed h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.capability-card--condensed p { color: var(--muted); font-size: 0.95rem; margin: 0; }

.capabilities-more {
  color: var(--muted);
  font-size: 0.98rem;
  margin-top: 1.75rem;
}
.capabilities-more a { font-weight: 600; }

/* ------------------------------------------------------------- Tag pills */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
}
.tag-pill {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------- Process strip */

.process-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
  margin: 0 0 2.5rem;
}
.process-step {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
}
.process-connector {
  color: var(--field);
  margin: 0 0.65rem;
  font-size: 1.1rem;
  line-height: 1.2;
}
.process-gloss {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 34rem;
  margin-bottom: 2.5rem;
}

/* Full step-by-step version on /what-we-do: each step gets its own gloss
   line, laid out as a two-column list joined by a thin green rule instead
   of the compact arrow row used on Home. */
.process-full { display: grid; gap: 1.5rem; max-width: 40rem; }
.process-full-step { padding-left: 1.4rem; border-left: 3px solid var(--field); }
.process-full-step h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.process-full-step p { color: var(--muted); font-size: 0.98rem; margin: 0; }

@media (min-width: 640px) {
  .process-full { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; }
}

/* ------------------------------------------------------ Integration diagram */

.diagram-band {
  margin-top: 2.5rem;
  padding: 2.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.diagram-lede {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 36rem;
  margin-bottom: 2rem;
}
.diagram-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.diagram-node {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.25rem 1rem;
  text-align: center;
}
/* A <div>, not a <p> — sidesteps the ".diagram-node p" rule below, which
   is for the descriptive line under it and must not restyle the title. */
.diagram-node-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.diagram-node p { color: var(--muted); font-size: 0.8rem; margin: 0; }
.diagram-node--center {
  background: var(--field);
  border-color: var(--field);
  flex: 1.2;
  transform: scale(1.08);
}
.diagram-node--center .diagram-node-title {
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.diagram-connector {
  flex: 0 0 auto;
  width: 2.25rem;
  align-self: center;
  height: 1.5px;
  background: var(--field);
  opacity: 0.55;
  position: relative;
}
.diagram-connector::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--field);
  opacity: 0.75;
  transform: translateY(-50%);
}
.diagram-caption {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 1.75rem;
  margin-bottom: 0;
}

/* -------------------------------------------------------------- CTA band */
/* Contact section gets the site's one moment of raised emphasis. */

.cta-band .section-head h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }

/* A full-bleed deep-green closer for a CTA band that's just a heading and
   links (no form to keep legible against a dark background) - the /what-we-do
   closing section. Home's #contact keeps the lighter tint since the form's
   inputs need --card/--paper contrast to read properly. */
.cta-band--invert {
  background: var(--field);
  border-top: none;
}
.cta-band--invert .section-head h2,
.cta-band--invert .section-intro { color: var(--paper); }
.cta-band--invert .section-head h2::before { background: var(--paper); }
.cta-band--invert .btn-primary { background: var(--paper); color: var(--field); }
.cta-band--invert .btn-primary:hover { background: var(--card); color: var(--field-strong); }
.cta-band--invert .btn-plain { color: var(--paper); text-decoration-color: rgba(250, 247, 242, 0.4); }
.cta-band--invert .btn-plain:hover { color: var(--card); text-decoration-color: var(--card); }

/* -------------------------------------------------------------- Enquiry form */

.enquiry-form { max-width: 34rem; margin-top: 2rem; }
.form-lead { color: var(--muted); font-size: 0.98rem; margin-bottom: 1.75rem; }
.form-row { margin-bottom: 1.25rem; }
.form-row-pair { display: flex; gap: 1.25rem; }
.form-row-pair .form-row { flex: 1; }
.form-row label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.form-row .optional { color: var(--muted); font-weight: 500; }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0.7rem 0.85rem;
}
.form-row textarea { resize: vertical; min-height: 7rem; }
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
  outline: 2px solid var(--field);
  outline-offset: 1px;
  border-color: var(--field);
}
.form-actions { margin-top: 1.75rem; }
.form-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.9rem;
}
.form-fallback {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.98rem;
}
.form-fallback a { font-weight: 600; }
/* min-height reserves the widget's own footprint before it loads (it
   starts invisible then expands to ~65px), so it doesn't shove the Send
   button down a beat after the rest of the form has already rendered. */
.cf-turnstile { margin: 0.5rem 0 0.25rem; min-height: 65px; }
@media print {
  .cf-turnstile { display: none; }
}

/* Server-rendered enquiry result pages (success / error) — same shell as
   the 404 page so a round-trip never feels like it left the site. */
main.form-result {
  max-width: 34rem;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 8rem;
  text-align: center;
}
main.form-result h1 {
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem);
  margin-bottom: 1rem;
}
main.form-result p {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}
main.form-result.is-error h1 { color: var(--field-strong); }

/* ---------------------------------------------------------- Footer strap */

.site-footer__strap {
  display: block;
  width: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------- Booking page */
/* The /book flow: meeting-type cards, day/time slot picker, then the same
   form language as the enquiry form. Server-rendered manage/cancel pages
   (from _worker.js) reuse .form-result plus the .manage-* rules here. */

.booking-section { padding-top: 1rem; }
.booking-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 0 0 2.25rem;
  max-width: 44rem;
}
.booking-type {
  text-align: left;
  font-family: var(--font-sans);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.3rem 1.4rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.booking-type:hover { border-color: var(--field); }
.booking-type.is-selected {
  border-color: var(--field);
  background: var(--field-soft);
  box-shadow: inset 0 0 0 1px var(--field);
}
.booking-type__name {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.booking-type__duration {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--field);
  margin-bottom: 0.5rem;
}
.booking-type__blurb {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

.booking-tznote { color: var(--muted); font-size: 0.88rem; margin: 0 0 1.25rem; }
.booking-status {
  max-width: 40rem;
  background: var(--panel);
  border-left: 3px solid var(--field);
  border-radius: 4px;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}
.booking-status--error { border-left-color: var(--danger); }
.booking-status--empty { border-left-color: var(--line-strong); }

.booking-days { display: grid; gap: 1.4rem; max-width: 44rem; margin: 0 0 2.25rem; }
.booking-day__label {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.55rem;
}
/* Grid, not wrapped flex: every chip the same width, so rows AND columns
   align cleanly at any viewport width. */
.booking-day__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}
.booking-slot {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  width: 100%;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.42rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.booking-day__none {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}
.booking-slot:hover { border-color: var(--field); color: var(--field); }
.booking-slot.is-selected {
  background: var(--field);
  border-color: var(--field);
  color: var(--paper);
}

/* "Show more days" — a button wearing the .btn-plain link style. */
.booking-more {
  background: none;
  border: none;
  padding: 0.25rem 0;
  cursor: pointer;
  justify-self: start;
  font-family: var(--font-sans);
}

.booking-form { margin-top: 0.5rem; }
.booking-selected {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--field);
  margin: 0 0 1.5rem;
}
.booking-success {
  max-width: 40rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--field);
  border-radius: 6px;
  padding: 1.75rem 1.9rem;
  margin: 0 0 1.5rem;
}
.booking-success h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.booking-success p { color: var(--muted); }
.booking-success .booking-selected { color: var(--field); }
#gb-success-detail { font-family: var(--font-serif); font-weight: 600; color: var(--field); font-size: 1.05rem; }
.booking-fallback {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 44rem;
}

/* Server-rendered booking manage page */
.manage-detail {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--field);
}
.manage-alt { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 0.9rem; color: var(--muted); margin-top: 0.25rem; }
.manage-cancel { margin: 1.75rem 0 0.5rem; }
/* Pending-booking confirm page: primary Confirm button + a plain-link
   decline action, side by side. */
.manage-actions { display: flex; align-items: center; gap: 1.25rem; margin: 1.75rem 0 0.5rem; flex-wrap: wrap; }
.manage-actions form { margin: 0; }
/* Resets a <button> back to plain-link chrome so .btn-plain reads
   correctly on it (browsers give button elements their own border/
   background/padding by default) — same reset as .booking-more below. */
.btn-plain.btn-reset { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #6f2e23; }

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

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1000px) {
  /* At a 3-column pillar-grid's narrowest (just above the 860px collapse
     below), a full-length card heading like "Security is the baseline."
     can graze the numeral - same class of bug as the capability-card fix
     below, caught before it happened rather than after. */
  .pillar-num { font-size: 3.5rem; }
  /* The 5-node diagram was only stacking at 860px, but each node is down
     to ~110px by then and "Applications / Dashboards / Reports" wraps
     into a tall sliver well before that - give it more room to breathe. */
  .diagram-flow { flex-direction: column; }
  .diagram-node--center { transform: none; }
  .diagram-connector { width: 1.5px; height: 1.75rem; align-self: center; }
  .diagram-connector::after {
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--field);
    border-bottom: none;
  }
}

@media (max-width: 860px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid--supporting { grid-template-columns: 1fr; }
  /* A single-column card is much narrower relative to the numeral than a
     grid column was, so a long two-line heading (e.g. "Diagnose — Fault
     Diagnosis & Technical Investigation") can wrap far enough right to
     run under it. Shrink the numeral and reserve clearance from the
     heading's own width, instead of the two just happening not to
     collide at whatever width a card used to be. */
  .capability-num { font-size: 3rem; }
  .capability-card h3 { max-width: calc(100% - 4rem); }
  .form-row-pair { flex-direction: column; gap: 0; }
  /* Clears space for the fixed assistant launcher, which would otherwise
     sit on top of the footer's product links - the footer can reach the
     launcher's zone anywhere in this range, not just on a phone. */
  .site-footer__inner { padding-bottom: 5.5rem; }
}

@media (max-width: 640px) {
  /* The sticky header is now permanently on screen, so its height on a
     phone matters a lot more than it used to — trimmed to give more of
     a small viewport back to actual content. */
  .site-header__inner { padding: 0.75rem 1.25rem; }
  .site-header nav { gap: 1.1rem; }
  .hero { padding: 3.5rem 0 3rem; }
  .section { padding: 3.25rem 0; }
  .section-inner { padding: 0 1.25rem; }
  /* The stacked one-word-per-line layout this used to switch to (a full
     line-height-tall block per step, plus another for its arrow) made six
     steps take up nearly half the screen — reported back as "how we work"
     scrolling on forever on an iPhone. Wrapping the same compact strip used
     on desktop is far shorter and still perfectly readable at this size. */
  .process-strip { gap: 0.5rem 0; }
  .process-step { font-size: 0.92rem; }
  .process-connector { margin: 0 0.4rem; font-size: 0.95rem; }
  .diagram-band { padding: 1.75rem 1.25rem; }
}

@media (max-width: 430px) {
  /* On a narrow phone, "GOODFIELD STUDIO" plus all four nav links can't
     share one row — the header wraps to two lines and, since it's sticky,
     permanently eats a large chunk of a small screen. Shrink both sides
     enough to keep it to one row instead. */
  .wordmark { font-size: 0.95rem; letter-spacing: 0.04em; }
  .site-header nav { gap: 0.9rem; }
  .site-header nav a { font-size: 0.85rem; }
}