/* 2026-09-26 — spacing and type pass. Darrin, repeatedly: "tighten up the padding between
   each section everywhere, there is too much spacing all over the site", plus several
   requests to increase font size and contrast on small text.

   WHY A SEPARATE SHEET: the same properties are set in three places — core-v2.css (whose
   :root is cyclic and largely dead), desert-overrides.css, and digital-theme.css, which wins
   on load order. Editing three files to change one number is how the previous drift happened.
   This sheet loads LAST, so it is the single place these values now live. Delete the file and
   the site returns to its 09-25 spacing exactly.

   Measured before choosing numbers: .section was clamp(3.5rem,7vw,6rem) and .page-hero had
   clamp(9rem,13vw,12rem) of top padding, which is what read as "too much" at 1440. */

/* --- section rhythm ------------------------------------------------------------------- */
.section { padding-block: clamp(2.25rem, 4.2vw, 3.75rem); }

/* The hero's top padding exists to clear the sticky header. core-v2 sets
   html{scroll-padding-top:100px}, so this must stay above that or anchor links land under
   the bar — 6.25rem at the small end is 100px exactly. */
.page-hero { padding-top: clamp(6.25rem, 8vw, 8rem); padding-bottom: 2.75rem; }
.page-hero + .section { padding-top: 1.5rem; }
.closing { padding-block: clamp(3rem, 5vw, 4.5rem); }

@media (max-width: 600px) {
  .section { padding-block: 2.25rem; }
  .page-hero { padding-top: 6.25rem; padding-bottom: 2rem; }
  .closing { padding-block: 2.75rem; }
}

/* --- the gaps that read as vertical space, not the padding ---------------------------- */
h2 { margin-bottom: 1.6rem; }
.editorial-copy h2 { margin-bottom: 1rem; }
.work-feature { gap: clamp(1.75rem, 3vw, 2.75rem); }
.sub-service { margin-bottom: 2.25rem; }
.feature-rows article { padding-block: 1.35rem; }
.lede, .section-intro { margin-bottom: 1.4rem; }

/* --- small text: bigger and higher contrast ------------------------------------------- */
/* Darrin named the tenant-isolation paragraph on /automation/technology and "other text of
   same size and color". These are the site's three small-text roles. --muted and --faint
   both resolved to near-body colour already; the gain here is size and weight, and a
   deliberate step up from --faint to --muted so the dimmest role is no longer the default
   for real prose. */
.note { font-size: 1rem; line-height: 1.65; color: var(--muted); }
.eyebrow { font-size: .85rem; }
.service-sample > span { font-size: .84rem; }
.service-sample dl > div { font-size: 1rem; }
.service-sample h4 { font-size: 1.55rem; }
/* 🔴 CORRECTED 2026-09-26. This rule said 1.05rem, intending "bigger". It was SMALLER.
   core-v2.css sets `body{font:400 17px/1.65}` and nothing overrides `html`, so on this site
   **1rem = 16px while a body paragraph is 17px** — 1.05rem = 16.8px, i.e. 0.2px less than the
   default it was supposed to beat. Darrin asked twice for this text to be larger and darker and
   the first attempt changed nothing visible. 1.15rem = 18.4px is the first value that is
   genuinely bigger. Check rem against 17px on this site, not against 16px. */
.feature-rows article p,
.plain-list, .plain-list li { font-size: 1.15rem; line-height: 1.6; color: var(--text); }

/* --- the console/record cards beside "What we build" and "What we automate" ------------ */
/* Darrin: "increase the size of the tables on the right, increase font size" (/web),
   "increase the size, content and display of the tables" (/applications), "increase the font
   and readability of the tables to the right of What we Automate". One rule, all three. */
.service-sample { max-width: none; }
.service-sample dl > div { grid-template-columns: 1fr 1.5fr; gap: 1.1rem; padding: .95rem 0; }
.service-sample dt { color: var(--muted); font-weight: 500; }
.service-sample dd { color: var(--text); }

@media (min-width: 900px) {
  /* Give the card column more of the row so the values stop wrapping. */
  .work-feature.sub-service { grid-template-columns: 1fr 1fr; }
}

/* --- header bar ------------------------------------------------------------------------ */
/* Darrin: "increase the font in the header bar all around by 50%".
   🔴 TWO failed attempts before this one, both because I measured too narrowly.
   1. Set a flat 1.26rem (+50%). Measured ONLY the homepage, only at 1240/1400/1600 — it
      passed, so I shipped it. It was overflowing the whole site by 50px at 1440, a width
      I never tested, and a subagent found it.
   2. Re-measured properly across 1240-1920 on /pricing: the nav overflowed at 1240, 1400,
      1440 AND 1500, fitting only at 1300 and 1600+. Even 1.06rem was 11px over at 1240.
   The header container is capped at 1240px and centred, so the nav's right edge grows with
   the viewport faster than the container does — which is why the failure is a BAND, not a
   threshold, and why testing "a wide width" and "a narrow width" both passed.
   Sized to the tightest width the desktop nav appears at (1240), with the full +50% only
   where it demonstrably fits. ALWAYS sweep the range, never spot-check two widths. */
@media (min-width: 1240px) {
  .site-header #navigation > a:not(.button),
  .site-header .services-menu > summary { font-size: .96rem; }
  .site-header .nav-button { font-size: .96rem; }
  .site-header .brand { font-size: 1.08rem; }
}

/* 🔴 CORRECTED 2026-09-26. A `1.26rem` rule lived here (a flat +50% on the header type) and it
   DID NOT FIT: from 1660px up the nav overflowed the header pill by 171px and the brass audit
   button hung outside the oval altogether. It survived review because the check measured
   DOCUMENT horizontal scroll, and the pill is `overflow:visible` on a viewport wide enough that
   an escaping child creates no page scrollbar. Containment and document overflow are different
   questions — measure the one you actually care about.
   Swept 0.96 → 1.44rem at ten widths from 1240 to 2560, asserting the nav's right edge stays
   inside the pill's inner edge AND the button's right edge does too. The ceiling is
   **1.05rem from 1300px** and **0.96rem at 1240–1299px**, and widening the pill does not move it
   (the binding constraint is six long nav labels plus the button, not the container).
   A genuine +50% needs fewer top-level items or shorter labels — a content decision, not a
   CSS one. Do not re-raise this number without re-running the sweep.
   ✅ RESOLVED the same day: the constraint was the two longest labels, so the HEADER labels were
   shortened to "Websites" and "Applications" (wayfinding, not titles — every page heading, the
   footer, the form's service choices and the JSON-LD keep the full names). Re-swept: that alone
   lifts the ceiling to **1.34rem**, so Darrin's +50% (1.26rem over the 0.84rem base) now fits at
   every width from 1300px with slack to spare. Restoring the long labels drops the ceiling back
   to 1.05rem — the two changes are a pair. */
@media (min-width: 1300px) {
  .site-header #navigation > a:not(.button),
  .site-header .services-menu > summary { font-size: 1.26rem; }
  .site-header .nav-button { font-size: 1.26rem; }
  .site-header .brand { font-size: 1.32rem; }
}

/* The brass button sits inside the header's 999px oval. Two nested stadiums are tangent when
   their horizontal inset equals the difference of their half-heights — (76 − button height) / 2
   — so the inset is geometry, not taste: less and the button crosses the oval's curve, more and
   it floats off the end, which is the gap Darrin reported. Measured and asserted below. */
@media (min-width: 1240px) {
  .site-header .nav-bar { padding-right: 15px; }   /* 44px button: 1px border + 15 = 16.0 = (76-44)/2 */
}
@media (min-width: 1300px) {
  .site-header .nav-bar { padding-right: 13.6px; } /* 47px button: 1 + 13.6 = 14.6 = (76-47)/2 */
}

/* ---------------------------------------------------------------------------
   Inquiry form, 2026-09-26. Budget takes currency only, so the field carries a
   visible $ affix; timing became a select. The inline pillar aside held one
   phone number in a full-height box, which is what made it look empty.
   --------------------------------------------------------------------------- */
.money-field{display:flex;align-items:stretch;border:1px solid var(--rule,rgba(255,255,255,.18));
 border-radius:10px;background:var(--surface,rgba(255,255,255,.04));overflow:hidden}
.money-field:focus-within{border-color:var(--brass,#c8964a)}
.money-affix{display:flex;align-items:center;padding:0 .2rem 0 .85rem;font-size:1.05rem;
 line-height:1;color:var(--muted,rgba(255,255,255,.62));user-select:none}
/* The input already carries the site's field styling; strip the parts the wrapper now owns. */
.money-field input{flex:1 1 auto;min-width:0;border:0;background:transparent;border-radius:0;
 padding-left:.15rem}
.money-field input:focus,.money-field input:focus-visible{outline:none;box-shadow:none}

/* A select must not read as a text input — it has different affordances. */
#inquiry-form select{width:100%;font:inherit;font-size:1rem;color:inherit;
 padding:.7rem 2.4rem .7rem .85rem;border:1px solid var(--rule,rgba(255,255,255,.18));
 border-radius:10px;background-color:var(--surface,rgba(255,255,255,.04));appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
  linear-gradient(135deg,currentColor 50%,transparent 50%);
 background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
 background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#inquiry-form select:focus-visible{outline:2px solid var(--brass,#c8964a);outline-offset:2px}

/* Neither aside should stretch to the form's height — that is what left the empty space. */
.contact-aside{align-self:start}
.contact-aside--inline h3:first-child{margin-top:0}
.contact-aside--inline .text-link{font-size:1.25rem}
.aside-steps{margin:.6rem 0 0;padding-left:1.15rem;display:grid;gap:.45rem}
.aside-steps li{font-size:1rem;line-height:1.5;color:var(--fg-quiet,var(--muted,inherit))}

/* ---------------------------------------------------------------------------
   Small-type legibility, 2026-09-26. Darrin: the bot descriptions, the
   engagement/escalation paragraph and the tenant-isolation paragraph are all
   too small and too faint. Same 16px-vs-17px trap as above — every value here
   is chosen against the 17px body, not against 1rem.
   --------------------------------------------------------------------------- */
/* The bot catalog descriptions (Reception included) were .95rem = 15.2px. */
.catalog-grid p { font-size: 1.125rem; }            /* 15.2px -> 18px */
.catalog-grid .text-link { font-size: 1rem; }        /* was .9rem  = 14.4px */
.catalog-grid .button { font-size: .95rem; }         /* was .85rem = 13.6px */
.catalog-grid .status-label { font-size: .88rem; }   /* was .8rem  = 12.8px */
.catalog-grid--cards h4 { font-size: .82rem; }       /* was .74rem = 11.8px */

/* .note carries the smallest prose on /automation/technology. Bring it to body size. */
.note { font-size: 1.0625rem; line-height: 1.65; }   /* 16px -> 17px */
.workflow-steps li p { font-size: 1.15rem; }

/* ---------------------------------------------------------------------------
   Expanded tier ladders and panels, 2026-09-26. The /web and /pricing search
   ladders and the /pricing hosting rows now carry several paragraphs and a
   list inside one .feature-rows article, and core-v2 sets .feature-rows p
   {margin:0} — which glued them into a single block of text.
   --------------------------------------------------------------------------- */
.feature-rows article > div > p + p { margin-top: .9rem; }
.feature-rows article > div > ul.plain-list { margin: .9rem 0; }
.feature-rows article > div > ul.plain-list + p { margin-top: .9rem; }

/* The build panels went from 3 rows to 9-12, so they are now taller than the copy
   beside them; .work-feature centres by default, which left them looking unmoored.
   Row padding comes down at the same time — more rows must not mean more page. */
@media (min-width: 900px) {
  .work-feature.sub-service { grid-template-columns: 1fr 1.1fr; align-items: start; }
}
.service-sample dl > div { padding-block: .8rem; font-size: 1.05rem; }
.service-sample > span {              /* now a header above a titled panel, not a floating label */
  display: block; padding-bottom: .6rem;
  border-bottom: 1px solid var(--line); margin-bottom: .4rem;
}

/* .subhead has no top margin; it is now used to introduce a block that follows a grid. */
:is(.work-grid, .pricing-columns, .feature-rows) + .subhead { margin-top: 2rem; }

/* ---------------------------------------------------------------------------
   Spacing pass 2, 2026-09-26. Darrin raised "too much spacing all over the
   site" four separate times, so this goes further than the first pass. Every
   value was chosen against a measured page height, and the result is measured
   again below — the point is less page, not smaller type.
   --------------------------------------------------------------------------- */
/* .work-grid stacked three sources of space: card padding, grid gap and the card's top rule. */
.work-grid { gap: 28px; }
.work-grid article { padding: 24px 0 0; display: flex; flex-direction: column; }
/* Cards are block by default, so the CTA floated at whatever height the copy happened to end,
   leaving a ragged bottom edge across each row. */
.work-grid article > a.text-link { margin-top: auto; }

/* 22px under a thumbnail is generous when the eyebrow beneath it is 11px type. */
.card-thumb { margin: 0 0 1rem; }

/* The section rhythm itself. Three consecutive blocks at 60/60 put 120px between two
   headings; this brings the band to 32-48px without touching the page hero, which needs
   its clearance for the fixed header (scroll-padding-top is 100px). */
.section { padding-block: clamp(2rem, 3.4vw, 3rem); }
.process { row-gap: 1.5rem; }
.feature-rows article { padding-block: 1.4rem; }

/* ---------------------------------------------------------------------------
   Header audit button, 2026-09-26 (Darrin). Text is now just AUDIT, the oval is
   smaller, and its right cap sits tangent to the header pill's inner curve
   rather than crowding it. Two nested stadiums are tangent when the inset from
   the outer edge equals the difference of their half-heights:
       inset = (header height / 2) - (button height / 2) = (76 - 40) / 2 = 18px
   The nav-bar carries 1px of border, so padding-right is 17px. The button keeps
   its own smaller type - the +50% rule above is for the LINKS, not this.
   --------------------------------------------------------------------------- */
@media (min-width: 1240px) {
  /* 🔴 The header button was 71.6px tall inside a 76px pill — almost filling it — because
     digital-theme.css gives `.page-home :is(.button,.quiet-button,#audit-domain)` a
     `padding-block: var(--panel-y)` (24px). That is a PANEL token leaking onto a nav control,
     and it ties with `.site-header .nav-button` at 0-2-0, so a same-specificity rule here lost.
     `.site-header .nav-bar .nav-button` (0-3-0) takes it back explicitly. */
  .site-header .nav-bar .nav-button {
    font-size: 1rem;
    min-height: 40px;
    padding-block: 0;
    padding-inline: 1.2rem;
    letter-spacing: .06em;
  }
  /* 🔴 The tangency formula I used before was wrong by a factor of two. For two stadiums on a
     shared centreline, the right caps are circles of radius R and r whose centres sit at
     (X_r − R) and (x_r − r). Internal tangency needs the centres (R − r) apart, so the EDGES
     are 2(R − r) apart — not (R − r). With R = 38 and a 42px button (r = 21) the inset is 34px,
     and the nav-bar carries 1px of border, so padding-right is 33px. Verified by measuring the
     rendered result, not by trusting this comment. */
  /* Rendered four insets (36 / 24 / 14 / 6) and looked at them. 36 is the mathematical
     tangent and leaves an obvious gap, because the pill's cap curves away from a much
     shorter button. 6 reads as the oval poking through the outline. 14 sits snug against
     the curve with neither gap nor collision — chosen by eye, which is the right tool for
     this, not by the formula. 13px + the 1px border = 14px inset. */
  .site-header .nav-bar { padding-right: 13px; }
  /* The shorter label frees horizontal room; give it back to the links. */
  .site-header #navigation { gap: clamp(1.4rem, 2.4vw, 2.3rem); }
}

/* ---------------------------------------------------------------------------
   Hero scene headings, 2026-09-26 (Darrin: "the large text is pushing down the
   Explore Application action into the line below ... lower the size of the font").
   digital-theme.css:123 pins these to the h1's own clamp — clamp(4rem,7.5vw,7.2rem),
   i.e. 108px at 1440 — which was right when each scene was a four-word slogan.
   The scenes now carry full sentences, so that size wrapped every headline onto
   three lines and pushed the CTA down the column. Sized for two lines instead.
   --------------------------------------------------------------------------- */
.tunnel-story--text .tunnel-scene h2 {
  font-size: clamp(2.86rem, 4.55vw, 4.29rem);
  line-height: 1.06;
  /* Wide enough that the explicit <br> in each headline is what breaks the line, rather than
     a ch-based wrap fighting it and producing four ragged lines. */
  max-width: 34ch;
  margin-bottom: 1.1rem;
}
.tunnel-story--text .tunnel-scene p { font-size: 1.5rem; max-width: 56ch; }
/* 🔴 The +30% does NOT go to the phone, and the reason is measured rather than taste.
   At 390x844 the hero copy already ends at y=690 with the scene track starting at y=689 —
   the ORIGINAL size is exactly at the boundary. 2.2rem overlaps the track by 69px, and the
   +30% (2.6rem) overlaps it by 245px and pushes the buttons below the fold. There is no
   headroom on a phone, so the phone keeps its size and the increase applies above 600px.
   ⚠️ This was invisible to the sweep: that check measures HORIZONTAL overflow, and this is a
   vertical collision. It reported 0 while the page was visibly broken in the screenshot. */
@media (max-width: 600px) {
  .tunnel-story--text .tunnel-scene h2 { font-size: 2rem; max-width: none; }
}

/* ---------------------------------------------------------------------------
   A recording in a /work card thumb, 2026-09-26 (Darrin: BMG Monitor should
   show the video, not a still). The normal .card-thumb is a 16:9 band with
   object-fit:cover, which would crop a 540x818 portrait recording to a
   horizontal slice. This variant keeps the whole frame: fixed band height so
   the card grid stays even, the video centred inside it at its own aspect,
   on a dark plate so a light UI does not read as a hole in the card.
   --------------------------------------------------------------------------- */
.card-thumb--clip {
  aspect-ratio: 16 / 9;
  background: #0b0b0d;
  border: 1px solid var(--grid-line-strong, rgba(255, 255, 255, .14));
  overflow: hidden;
}
/* Rendered three treatments of a 540x818 portrait recording in a 16:9 card slot and looked at
   them: letterboxed (`width:auto`) puts the video in a 138px strip with dark dead bands either
   side — the exact extra space Darrin flagged — and a taller 4:3 band keeps the strip AND makes
   the grid row uneven. Filling the slot is the only one with no dead space and the same shape as
   every other card. `object-position` is biased above centre so the crop lands on the
   conversation rather than the empty lower half of the phone frame. */
.card-thumb--clip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ---------------------------------------------------------------------------
   Landing hero, 2026-09-26 (Darrin: "lower the size of the first card and match
   the size of the other 3 when you hit landing page").
   Measured on production first: scene 0 was h1 108px with a 24px lede and a
   645px box, while scenes 1-3 were 50.4px / 18.4px at 352-359px. The first card
   was nearly twice the others. Matching the scene clamp exactly, so the four
   cards read as one set rather than one banner and three followers.
   desert-overrides.css sets `.tunnel-story--text .tunnel-copy h1` (0-3-0); this
   matches that weight and wins on load order, since tighten-v1.css is last.
   --------------------------------------------------------------------------- */
.tunnel-story--text .tunnel-copy h1 {
  font-size: clamp(2.86rem, 4.55vw, 4.29rem);
  line-height: 1.06;
  max-width: 34ch;
}
.tunnel-story--text .tunnel-copy .lede {
  font-size: 1.5rem;
  line-height: 1.55;
  max-width: 56ch;
}
@media (max-width: 600px) {
  .tunnel-story--text .tunnel-copy h1 { font-size: 2rem; max-width: none; }
}

/* The lede and scene copy follow the same rule: enlarged above 600px, held at their
   original size on a phone, where the composition has no room. */
@media (max-width: 600px) {
  .tunnel-story--text .tunnel-copy .lede,
  .tunnel-story--text .tunnel-scene p { font-size: 1.15rem; }
}

/* ---------------------------------------------------------------------------
   Footer link hover, 2026-09-26 (Darrin). Measured first: there was NO hover
   state on footer links in any of the four stylesheets, so a visitor got no
   feedback at all. The underline is drawn with a background gradient rather
   than border-bottom or text-decoration, so it can animate its WIDTH without
   shifting layout or adding a box. :focus-visible gets the same treatment, so
   a keyboard user sees what a mouse user sees.
   --------------------------------------------------------------------------- */
.site-footer .footer-grid > div > a:not(.brand),
.site-footer .footer-bottom a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .22s cubic-bezier(.4, 0, .2, 1), color .18s ease;
}
.site-footer .footer-grid > div > a:not(.brand):hover,
.site-footer .footer-grid > div > a:not(.brand):focus-visible,
.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom a:focus-visible {
  color: var(--text);
  background-size: 100% 1.5px;
}
/* The footer wordmark is a link too; give it the colour lift without the rule,
   since an underline under a logotype reads as damage. */
.site-footer .brand:hover,
.site-footer .brand:focus-visible { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-grid > div > a:not(.brand),
  .site-footer .footer-bottom a { transition: none; }
}

/* ---------------------------------------------------------------------------
   Header rule removed, 2026-09-26 (Darrin: "remove that horizontal line at the
   top"). The only horizontal line in the top 320px was the header pill's own
   1px border, top and bottom, 1240px wide in rgba(246,242,234,.3) - measured,
   not guessed. The translucent fill still describes the pill, so the shape
   survives without the stroke.
   --------------------------------------------------------------------------- */
.site-header { border: 0; }