@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/lato-400.woff2?v=d4ae5188a653") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/lato-700.woff2?v=7a7ce1a34f3e") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/poppins-900.woff2?v=d1ebe21db0d3") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #030a12;
  --bg-raised: #07131f;
  --text: #f4f7fa;
  --text-soft: #c6d0db;
  --text-muted: #9eacba;
  --accent: #29bdf5;
  --accent-bright: #73dcff;
  --accent-deep: #087fc0;
  --accent-ink: #02101a;
  --danger: #ff8da0;
  --success: #73e0bd;
  --glass-fill: rgba(9, 23, 38, 0.72);
  --glass-fill-hover: rgba(12, 30, 48, 0.8);
  --glass-border: rgba(205, 232, 249, 0.16);
  --glass-border-strong: rgba(115, 220, 255, 0.38);
  --radius: 16px;
  --radius-small: 8px;
  --page-width: 1200px;
  --dock-clearance: 92px;
  --dur-fast: 120ms;
  --dur-ui: 180ms;
  --dur-morph: 240ms;
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --ease-morph: cubic-bezier(.645, .045, .355, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-bottom: var(--dock-clearance);
  background: var(--bg);
}

/* Main Nav moves to the top above mobile; anchored content must clear it. */
@media (min-width: 768px) {
  html { scroll-padding-top: var(--dock-clearance); }
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(1000px 720px at 12% 4%, rgba(8, 127, 192, 0.11), transparent 70%),
    radial-gradient(900px 680px at 92% 42%, rgba(41, 189, 245, 0.07), transparent 72%),
    var(--bg);
  color: var(--text);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
  background:
    radial-gradient(circle at 8% 17%, rgba(115, 220, 255, 0.35) 0 1px, transparent 1.8px),
    radial-gradient(circle at 28% 72%, rgba(115, 220, 255, 0.2) 0 1px, transparent 1.8px),
    radial-gradient(circle at 54% 22%, rgba(115, 220, 255, 0.22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 65%, rgba(115, 220, 255, 0.3) 0 1px, transparent 1.8px),
    radial-gradient(circle at 91% 12%, rgba(115, 220, 255, 0.18) 0 1px, transparent 1.8px);
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  border: 3px solid var(--bg);
  border-radius: 999px;
  background: rgba(115, 220, 255, 0.42);
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 4px;
}

.skip-link {
  /* RULED 2026-09-04, Clay: any button is at least 44 by 44. This one stood at
     178 by 42 -- two pixels short, which is the kind of miss that only a
     measurement finds. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 8px 16px;
  border-radius: var(--radius-small);
  background: var(--accent-bright);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  /* Clipped, not parked. A transform only moves it out of the viewport, so an
     overscroll -- a pull-to-refresh -- drags it back into sight. */
  clip-path: inset(50%);
  opacity: 0;
  transition: transform var(--dur-ui) var(--ease-out);
}

.skip-link:focus {
  clip-path: none;
  opacity: 1;
}

.container {
  width: min(calc(100% - 48px), var(--page-width));
  margin-inline: auto;
  /* Focused content centred at every width: the shell centres, and anything
     that would otherwise stretch full-bleed inside it centres too. */
  display: flow-root;
}

.section {
  position: relative;
  /* Vertical rhythm follows the viewport, not the page width: 10vw on a wide
     screen is 144px of nothing between ideas. Both ends sit on the 4pt grid.
     Stepped down 2026-09-04: with Services rebuilt as a stack that rests
     closed, 96px each side put more empty space around a section than the
     section had content in it, which section-substance reported for #services
     and #how. */
  padding: clamp(32px, 5vh, 64px) 0;
  scroll-margin-top: 20px;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--text);
  font-family: "Poppins", "Lato", sans-serif;
  /* Universal Fonts, ruled 2026-09-01: headings are Poppins Black, uppercase.
     Restraint comes from scale, not from case: the display sizes stay the
     calmer ones the audit asked for, and the face and case are the Suite's. */
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
  /* At 200% text zoom an uppercase word can be wider than a phone. It breaks
     rather than pushing the page sideways. */
  overflow-wrap: anywhere;
}

h1 {
  max-width: none;
  font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  letter-spacing: -0.02em;
}

h2 {
  max-width: min(24ch, 100%);
  margin: 0 auto clamp(28px, 4vw, 48px);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  letter-spacing: -0.02em;
  text-align: center;
}

h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  letter-spacing: -0.01em;
}

p {
  color: var(--text-soft);
}

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

[data-glass] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012) 48%),
    var(--glass-fill);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

[data-glass]::before {
  content: "";
  position: absolute;
  inset: 0 10% auto;
  z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), transparent);
  pointer-events: none;
}

[data-glass]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(380px circle at var(--glass-x, 50%) var(--glass-y, 0%), rgba(115, 220, 255, 0.12), transparent 68%);
  transition: opacity var(--dur-ui) ease;
}

[data-glass]:hover::after,
[data-glass]:focus-within::after {
  opacity: 1;
}

[data-glass] > * {
  position: relative;
  z-index: 1;
}

.glass-button,
.glass-control {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(197, 231, 249, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 54%),
    rgba(9, 24, 40, 0.84);
  color: var(--text);
  text-decoration: none;
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  transition:
    border-color var(--dur-ui) ease,
    background var(--dur-ui) ease,
    color var(--dur-ui) ease,
    transform var(--dur-fast) var(--ease-out);
}

.glass-button {
  gap: 8px;
  padding: 12px 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.glass-button svg,
.glass-control svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glass-button svg {
  transition: transform var(--dur-ui) var(--ease-out);
}

.glass-button-primary {
  border-color: rgba(115, 220, 255, 0.68);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 52%),
    rgba(41, 189, 245, 0.88);
  color: var(--accent-ink);
}

.glass-button:active,
.glass-control:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .glass-button:hover,
  .glass-control:hover {
    border-color: var(--glass-border-strong);
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035) 54%),
      rgba(12, 32, 52, 0.9);
  }

  .glass-button-primary:hover {
    border-color: rgba(180, 239, 255, 0.9);
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 52%),
      rgba(63, 200, 248, 0.95);
  }

  .glass-button:hover svg {
    transform: translateX(3px);
  }
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration-color: rgba(115, 220, 255, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: color var(--dur-ui) ease, text-decoration-color var(--dur-ui) ease;
}

.text-link:hover {
  color: var(--accent-bright);
  text-decoration-color: currentColor;
}

/* Hero */
/* Above mobile the Main Nav sits at the top, 16px down and 44px tall, and the
   ruling centres it vertically with the logo pill: the brand row starts at
   the same 16px so the two share a centre line. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: start;
  padding: 16px 0 calc(var(--dock-clearance) + 32px);
}

/* The brand row is pinned to the top so it shares the nav's centre line at
   every viewport height; the thesis Tile centres in the room that is left,
   and the trust row sits at the bottom of the first screen. */
.hero-inner {
  min-height: calc(100svh - 16px - var(--dock-clearance) - 32px);
  grid-template-rows: auto 1fr auto;
  align-items: center;
}

.brand-lockup {
  min-height: 44px;
}

.hero-inner {
  display: grid;
  gap: clamp(40px, 6vh, 64px);
}

.brand-lockup {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.brand-icon {
  /* Capped at 54px so the 108px source is a true 2x, never an upscale. */
  width: clamp(44px, 4vw, 54px);
  height: clamp(44px, 4vw, 54px);
  object-fit: contain;
}

.brand-wordmark {
  width: clamp(182px, 18vw, 244px);
  height: auto;
}

/* The hero is a Tile: one Claypunk glass surface carrying the thesis, the
   proof line, and a single action. Bounded and centred so the focused content
   sits centred at every width while the text stays left-aligned. */
/* The Tile owns its surface, its hairline and now its glass. This product
   names only what those are, which is the whole of what a product may say
   about a shared component. */
.hero-tile {
  max-width: min(100%, 60ch);
  margin-inline: auto;
  --tile-surface:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012) 48%),
    var(--glass-fill);
  --tile-line: var(--glass-border);
  --tile-blur: blur(16px) saturate(1.3);
  --tile-ink-dim: var(--text-soft);
}

.hero-tile h1 {
  margin: 0;
  width: 100%;
  justify-self: stretch;
  /* From the viewport, never the root font: two whole lines that 200% text
     zoom cannot widen past the page. */
  font-size: min(5.4vw, 4.25rem);
}

/* Between phone and desktop the title wraps to three lines at 14ch, so its
   line is capped at the same measure: a line sits inside its title. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero .hero-tile p { max-width: min(30ch, 100%); }
}

/* Above tablet width the thesis Tile takes the whole room and the title
   grows with it, until a photograph earns the other half. */
@media (min-width: 1024px) {
  .hero-tile {
    max-width: 100%;
  }

  .hero-tile h1 {
    max-width: none;
    font-size: min(5.6vw, 5.25rem);
  }

  .hero-tile p {
    max-width: min(60ch, 100%);
    /* The Tile's own token: a hero lede runs a step above a card's body. */
    --tile-body-size: 24px;
    --tile-body-line: 32px;
  }
}

.hero-tile .accent-line {
  color: var(--accent-bright);
}

/* The hook changes every few seconds; the word fades and lifts, never jumps. */
.hero-hook {
  display: inline-block;
  transition: opacity var(--dur-morph) ease, transform var(--dur-morph) var(--ease-out);
}

.hero-hook.is-changing {
  opacity: 0;
  transform: translateY(6px);
}

/* One primary and one quiet way onward, side by side until the width says
   otherwise. */
/* One centred block: the title, its line and its actions share an axis, and
   the space grows as the eye moves down: 24px to the line, 32px to the
   actions, on the rule of 8. A left-aligned block in a centred Tile read as
   two things misaligned. */
.hero-tile { text-align: center; }
.hero-tile h1, .hero-tile p { margin-inline: auto; }

/* RULED 2026-09-06, Clay: on a phone these were too big for the Tile and they
   stacked. Two ways onward are two ways onward at every width, so they share
   the row rather than wrapping under each other, and each takes half of it. */
.hero-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.hero-actions becchio-button {
  flex: 1 1 0;
  max-width: 220px;
}
@media (min-width: 640px) {
  .hero-actions { gap: 16px; width: auto; }
  .hero-actions becchio-button { flex: 0 1 auto; }
}

/* The Tile owns the rhythm and ink of its paragraphs; this product says how
   wide its own lede runs and how large it reads. */
/* The Tile owns its paragraphs' type now; this product says only how wide the
   lede runs. */
.hero-tile p { max-width: min(52ch, 100%); }

/* Borrowed trust holds still. A moving ticker with three controls under the
   pitch asked for the attention the pitch needed, and cropped half the marks
   it was there to show. A titled row of marks says the same thing quietly. */
.experience-rail {
  display: grid;
  /* minmax(0, 1fr), not auto: a track sized to its content asks the rail how
     wide it wants to be, the rail answers with fourteen cells, and the PAGE
     scrolls instead of the rail. Measured at 1280 the page ran to 2400. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  justify-items: stretch;
}
.experience-logos { width: 100%; min-width: 0; }








@media (hover: hover) {

}

/* Services */
/* Restored after the results cut: the lede under a title, the icon cell,
   the panel that hides and enters, and the stage's floor. */
.section-lede {
  max-width: min(32ch, 100%);
  margin: 12px auto 32px;
  text-align: center;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-soft);
}

.nav-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.nav-icon becchio-icon { --icon-size: 24px; }

.js .service-panel { display: none; }
.js .service-panel.is-active { display: grid; animation: panel-enter 280ms var(--ease-out) both; }
.service-panels { min-height: 0; }

/* CARD SPACING. The panel is a card and had no padding at all: the quote sat
   on its top edge and the action on its bottom, one pixel from the border.
   universal-components.md: 24px of padding, and the gap between its parts
   stays under that. */
.service-panel { padding: 24px; gap: 16px; }

.service-stage {
  max-width: 1060px;
  margin-inline: auto;
}

/* The audience and results selectors are the Universal Switcher: the Main Nav
   with its section variant. This product says only its accent, and sizes the
   icons the way the Main Nav does. */
/* The Switcher is a nav and lays out its own dock. Giving it the Tile grid put
   the bar in the first of three columns; giving it a full width then stretched
   the bar across the section with its five choices huddled at the left edge.
   The component sizes to its items and centres itself, so the page says
   nothing about its width at all. */

.tiers {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Card spacing: Tiles sit 24px apart, no closer than their 24px padding. */
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.tier { display: grid; }
.tier becchio-tile { height: 100%; --tile-ink-dim: var(--text-soft); }

/* The Tile owns its title's margin, size and rhythm. What belongs to this
   product is how the kind and the name stack inside that title. */
.tier h3 {
  display: grid;
  justify-items: center;
  gap: 8px;
}

/* The tier's name sits above its title in the accent, glyph first. */
.tier-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-bright);
  font-family: "Lato", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tier-muted { opacity: 0.6; }

/* The person's own line, in their words, under the dock. */
.client-line {
  /* Two even lines rather than a full one and an orphan: the quote read
     "...no plan to build" / "it." */
  text-wrap: balance;
  max-width: min(36ch, 100%);
  margin: 0 auto;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text);
}

/* Two matched lines: each stays whole, the second is fitted to the first. */
.hero-line { display: block; white-space: nowrap; }

/* One headline figure per group rests in the section, so the page says
   something before anyone presses anything. The four figures behind each
   group stay in that group's own layer. */

/* SERVICES. The pillars are Universal Tiles in the
   Universal Bento Grid's own arithmetic: the page says how many columns, the
   component says everything else. */
.section-body {
  max-width: min(60ch, 100%);
  margin: 0 auto 32px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.section-subtitle {
  margin: 0 0 24px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Each item is a grid of its own so the Tile inside fills the row's height:
   a row of cards that stops at different depths reads as four cards, not one
   row. */
@media (max-width: 640px) {
}
/* The Expansion Cards own their display and what their panels may shrink to;
   the page says only how wide the set may run. */
.client-types, .service-pillars, .explorer { max-width: 800px; margin-inline: auto; }

/* THE EXPLORER, RULED 2026-09-06. Two questions before any answer, and no name
   asked for until a person has seen one. The tiles, their reveal and their
   measures are becchio-choice's; the page says only how wide the journey runs
   and how its own answer reads. */
.explorer { margin-bottom: 48px; }
.stage-heading {
  max-width: 800px;
  margin: 0 auto 16px;
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.solution-frame {
  font-family: "Poppins", sans-serif;
  --tile-body-size: 0.75rem;
  --tile-body-line: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  --text-soft: var(--accent-bright);
}
.solution-models-title {
  font-family: "Poppins", sans-serif;
  --tile-body-size: 0.75rem;
  --tile-body-line: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The answer stays inside the Explorer's 800px frame, while two recommended
   engagement Tiles keep a conversational width instead of stretching across
   every available pixel. */
#solution-models {
  width: min(100%, 640px);
  margin-inline: auto;
}


/* A PILLAR PANEL is prose, not more cards. This section carried four pillar
   Tiles and then a second set of sixteen inside a chooser -- thirty-two cards
   to say what four things are. The stack says it once: the pillar is the row,
   and opening it says what it means and who it is for. */
.pillar-panel {
  /* Card padding is 12, 16, 24 or 32 on the scale, and the gap inside a card
     is never larger than the padding around it. This ran 8px at the top with
     16px between its parts, which is both rules at once. */
  padding: 24px;
}
.pillar-lead {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

/* The results chooser sits under its lede with a section breather beneath.
   It is the same Switcher as the services chooser, for the same reason: four
   groups a person has not seen before need their names, and a ring cannot
   hold words at 200% text zoom. */
.group-panels { display: contents; }
/* Four portfolio figures in a modal: two across, one on a phone. */
becchio-modal[data-group-panel] {
  /* Results are evidence, so the layer must remain legible over every section
     it can cover. The Universal Modal exposes its fill for this purpose. */
  --modal-fill: var(--bg-raised);
}
becchio-modal[data-group-panel] .metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 600px) { becchio-modal[data-group-panel] .metric-grid { grid-template-columns: 1fr; } }

.tier-kind becchio-icon { --icon-size: 24px; color: var(--accent-bright); }

/* The Tile owns the margin, ink and rhythm of its paragraphs; this product
   says only how large its own body copy runs. */
.tier p { font-size: 0.92rem; }



.panel-actions {
  width: 100%;
  display: flex;
  justify-content: center;
}


.no-js .service-switcher,
.no-js .result-switcher {
  display: none;
}

.no-js .result-panel + .result-panel {
  margin-top: 48px;
}

@keyframes panel-enter {
  from {
    opacity: 0;
    clip-path: inset(0 4% 0 0);
    transform: translate3d(12px, 0, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

/* Figures are Universal Metrics: a big number, its title, its note. This
   product says only the typeface, the size of a headline figure, and how the
   Tiles sit in rows. Four headline figures lead; the rest sit in three named
   groups so sixteen numbers read as four stories rather than a dashboard. */
becchio-metric {
  --metric-font: "Poppins", "Lato", sans-serif;
  /* The title reads in the display face, which here is the same one. */
  --metric-display: "Poppins", "Lato", sans-serif;
  --metric-surface: rgba(232, 238, 245, 0.03);
  --metric-line: var(--glass-border);
}

.group-panel {
  max-width: 1120px;
  margin: 0 auto;
}

.group-panel[hidden] { display: none; }

/* The figures fan in: each Tile swings down from the dock a beat after the
   last, from its own slight angle, and settles counting. */
becchio-modal[open] becchio-metric,
.service-panel:not([hidden]) .tier,
.service-panel:not([hidden]) .proof {
  animation: tile-fan 360ms var(--ease-out, ease-out) both;
  transform-origin: 50% 0;
}
becchio-modal[open] becchio-metric:nth-child(1), .service-panel:not([hidden]) .tier:nth-child(1) { --fan: -6deg; }
becchio-modal[open] becchio-metric:nth-child(2), .service-panel:not([hidden]) .tier:nth-child(2) { --fan: -2deg; animation-delay: 60ms; }
becchio-modal[open] becchio-metric:nth-child(3), .service-panel:not([hidden]) .tier:nth-child(3) { --fan: 2deg; animation-delay: 120ms; }
becchio-modal[open] becchio-metric:nth-child(4) { --fan: 6deg; animation-delay: 180ms; }
becchio-modal[open] becchio-metric:nth-child(5) { --fan: 0deg; animation-delay: 240ms; }
.service-panel:not([hidden]) .proof { animation-delay: 200ms; }

@keyframes tile-fan {
  from { opacity: 0; transform: translateY(-16px) rotate(var(--fan, 0deg)) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  becchio-modal[open] becchio-metric,
  .service-panel:not([hidden]) .tier, .service-panel:not([hidden]) .proof { animation: none; }
}

.review-card summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-weight: 700;
}

.review-card summary::-webkit-details-marker {
  display: none;
}

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

/* The two choices are becchio-choice now. The product drew this control twice
   here, with its own padding, radius and gap, an 0.82rem name off the scale
   and a radio hidden so hard that selection was colour alone. The component
   owns every one of those, so the page says nothing about it. */

/* The Universal Bento owns both card grids now: its columns, its gap and its
   margins. The page says only how wide each may run. */
/* WHAT THE EXPLORER CARRIED IN. A person who has already answered two
   questions should see that the form knows, rather than answer them twice. */
.carried {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--accent-bright);
  /* A Pill, not a card: non-interactive information about what is already
     chosen, which is what the lexicon's Pill entry describes. It was drawn at
     24, the concentric outer for a 16 padding, and the design gate refused it
     -- correctly, because a 24 radius here was a card corner on something that
     is not a card. */
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.carried[hidden], .engagement[hidden], .received[hidden] { display: none; }
.engagement { margin-top: 24px; }
.engagement becchio-icon, .received becchio-icon {
  --icon-size: 24px;
  color: var(--accent-bright);
  margin-right: 8px;
}
/* RULED 2026-09-06, Clay: no confetti at the end -- a ride from start to
   finish, which is the work. The glyph runs the length of the Tile once and
   settles, and reduced motion simply places it there. */
.received { margin-top: 24px; }
.received becchio-icon { animation: ride 1200ms cubic-bezier(0.34, 0.9, 0.4, 1) both; }
@keyframes ride {
  0%   { transform: translateX(-32px) translateY(4px); opacity: 0; }
  55%  { transform: translateX(8px) translateY(-6px); opacity: 1; }
  80%  { transform: translateX(0) translateY(2px); }
  100% { transform: translateX(0) translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .received becchio-icon { animation: none; }
}
.received:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; }

/* Four equal Tiles, nothing chosen. The Bento owns the columns and the gap;
   the page says only how wide the set may run and that a row is equal. */
/* Portfolio outcomes earn the opening view; the full measures stay in Context. */
.result-grid { --grid-max: 1060px; }
.result-title { display: grid; gap: 8px; }
.result-value {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.result-detail {
  display: block;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 24px;
  white-space: normal;
}

.figure-grid { --grid-max: 1060px; }
.about-tile { width: 100%; max-width: 960px; margin-inline: auto; }
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.about-photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  justify-self: center;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--tile-inner-radius);
  overflow: hidden;
}
.about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.34);
  transform-origin: 50% 30%;
}
.about-identity {
  position: absolute;
  inset: auto 16px 16px;
  display: flex;
  justify-content: center;
}
.about-copy { display: grid; justify-items: start; gap: 16px; }
.about-copy p { max-width: 62ch; font-size: 1rem; line-height: 1.5; }

/* Form */
.meet-section {
  padding-bottom: calc(clamp(96px, 10vw, 144px) + var(--dock-clearance));
}

.meet-container {
  max-width: 940px;
}

/* One card, one column, the card scale: every choice is a field, every field
   is the Universal Field, and the parts sit 24px apart inside 24px of
   padding. The pill rail and the progress dots were two more languages in a
   card that already had one. */
.lead-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* The gap inside a card is SMALLER than its padding, at every width. It was
     equal to it here, which is the trap the card rule names, and the check
     passed over the card because its class says panel. */
  gap: 16px;
  padding: 24px;
  max-width: 640px;
  margin-inline: auto;
}









.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.field-wide {
  grid-column: 1 / -1;
}

.field-error {
  display: block;
  height: 1.35em;
  margin-top: 8px;
  color: var(--danger);
  font-size: 0.74rem;
  line-height: 1.35;
}

.hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.form-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
}




.lead-form.is-sending {
  border-color: rgba(115, 220, 255, 0.56);
}

.form-privacy,
.form-status,
.form-note {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  line-height: 1.5;
}

.form-privacy {
  color: var(--text-muted);
}

.form-privacy a,
.form-note a {
  text-underline-offset: 0.2em;
}

.form-status {
  min-height: 1.2em;
  color: var(--text-soft);
}

.form-status.is-error {
  color: var(--danger);
}

.form-status.is-success {
  color: var(--success);
}

/* Footer */
.not-found {
  min-height: 100vh;
  min-height: 100svh;
  width: min(calc(100% - 48px), 920px);
  display: grid;
  align-content: center;
  gap: clamp(56px, 10vh, 96px);
  padding: 48px 0;
  margin-inline: auto;
}

.not-found-copy {
  display: grid;
  justify-items: start;
  gap: 24px;
}

.not-found-copy h1 {
  max-width: none;
}

.not-found-copy p {
  font-size: 1.1rem;
}

.site-footer {
  padding: 72px 0 calc(var(--dock-clearance) + 40px);
  border-top: 1px solid rgba(197, 231, 249, 0.08);
  background: rgba(1, 6, 11, 0.48);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 40px;
  align-items: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Two actions and nothing else: Contact, and the Universal Legal button. */
.footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-icon {
  width: 42px;
  height: 42px;
}

.footer-wordmark {
  width: 160px;
  height: auto;
}

.footer-inner small {
  justify-self: end;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 980px) {
  /* Card spacing: the gap inside a card stays under its padding. The panel
     pads 24, so its parts sit 16 apart. 36 was invisible while the panel was
     hidden at rest, and became a finding the moment it opened. */
  .service-panel {
    padding: 16px;
    gap: 16px;
  }

  /* The row scrolls inside the container. A negative margin used to let it
     bleed 24px past the shell on both sides, which at 768 is 8px more than the
     shell's own margin, and the tablet measured 776 wide on a 768 screen. */
  .review-grid {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    overflow-x: auto;
    padding: 0 0 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .review-card {
    scroll-snap-align: center;
  }

  .about-layout {
    gap: 24px;
  }
}

@media (max-width: 820px) {
  .container {
    width: min(calc(100% - 32px), var(--page-width));
  }

  .section {
    padding: 80px 0;
  }

  @media (min-width: 768px) {
    .results-section { padding: 48px 0; }
  }


  .hero-inner {
    gap: 40px;
  }

  .service-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 32px 24px 32px;
  }

  .metric-headline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-panels {
    min-height: 0;
  }

  .recognition-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .recognition-grid li {
    border-right: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
  }

  .recognition-grid li:nth-child(even) {
    border-right: 0;
  }

  .recognition-grid li:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }

  .award-link {
    min-height: 168px;
  }

  .about-layout {
    grid-template-columns: 1fr;
    /* On a phone the portrait and its related copy share one centre line. */
    gap: 24px;
  }
  .about-copy { justify-items: center; text-align: center; }

  
  .lead-form {
    grid-template-columns: 1fr;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .field-wide {
    grid-column: auto;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-actions {
    justify-content: flex-start;
  }

  .footer-inner small {
    justify-self: start;
  }
}

@media (max-width: 600px) {
  :root {
    --dock-clearance: 80px;
  }

  body {
    font-size: 16px;
  }

  .container {
    width: min(calc(100% - 24px), var(--page-width));
  }

  .section {
    padding: 72px 0;
  }

  /* The floor is what 200% text zoom doubles: at 1.5rem the widest uppercase
     word, THE VISION., still fits 375 without a break. Normal zoom is the
     9.5vw middle term either way. */
  h1 {
    font-size: min(7.2vw, 2.8rem);
  }

  h2 {
    margin-bottom: 28px;
    font-size: clamp(1.5rem, 7.5vw, 2.2rem);
  }

  .hero {
    min-height: 100svh;
    align-items: start;
    padding-top: 24px;
  }

  .brand-lockup {
    gap: 12px;
  }

  .brand-icon {
    width: 42px;
    height: 42px;
  }

  .brand-wordmark {
    width: 152px;
  }

  .hero-tile p {
    --tile-body-size: 16px;
    --tile-body-line: 24px;
  }

  /* The Switcher owns the padding and the 44px floor of its own items at
     every width. A phone-sized override here is the beginning of a variant,
     and the wrapped dock already fits without one. */
  .service-route span,
  .result-tab span {
    font-size: 0.8rem;
  }

  .results-section {
    min-height: 0;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tiers {
    grid-template-columns: 1fr;
  }

  .metric-lead {
    --metric-size: clamp(2rem, 10vw, 2.75rem);
  }

  .award-link {
    min-height: 146px;
    gap: 16px;
    padding: 24px 8px 16px;
  }

  .award-link img {
    height: 62px;
  }

  .review-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 360px);
    gap: 24px;
  }

  
  .meet-section {
    padding-bottom: calc(72px + var(--dock-clearance));
  }


  /* The button keeps its own width. Stretched, the Universal Button's host
     spanned the row while its visible face stayed at the left, so the centre
     of the element was empty space: a tap there, and the gate's click there,
     did nothing. A control's element and its face must be the same target. */
  .form-footer {
    align-items: flex-start;
    flex-direction: column;
  }

}

/* Below 360px a figure and its pill need the whole width to stay inside
   their card at 200% text zoom. */
@media (max-width: 359px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }
}


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

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

@media (prefers-reduced-transparency: reduce) {
  [data-glass],
  .glass-button,
  .glass-control {
    background: #091828;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-soft: #edf4f8;
    --text-muted: #d3dde5;
    --glass-border: rgba(255, 255, 255, 0.46);
  }
}

/* 44px TAP TARGETS AND 200% TEXT.
   The rendered Node 2 audit measured the brand lockups at 42px, every legal and
   contact link at 21px, and the result tabs and audience labels clipping their
   own text at 200% root font-size. */

.brand-lockup,
.footer-brand { min-height: 44px; }

/* Legal and contact links that sit inline in prose get a vertical halo rather
   than a bigger box -- a horizontal one would poach the tap of the link
   beside it. */
.legal-links a,
a[href^="mailto:"] { position: relative; }

.legal-links a::after,
a[href^="mailto:"]::after { content: ""; position: absolute; inset: -12px 0; }

/* The Universal Main Nav owns its placement, shape, motion AND how a primary
   action reads. What belongs to this product is one token: what its accent is.
   Anything beyond this line is the beginning of a per-product variant. */
becchio-nav.site-nav {
  --nav-accent: var(--accent, #38bdf8);
}

/* The Universal Button owns shape, size, states and motion. This product says
   only what its accent is. Anything beyond this line begins a variant. */
becchio-button {
  --btn-accent: var(--accent, #38bdf8);
}

/* The Universal Text Field owns the box, the title, the example and the error
   wiring. This product says only what its accent is. */
becchio-field {
  --field-accent: var(--accent, #38bdf8);
}

/* The Universal Tile owns the box, the nested radii and the spacing. This
   product says only what its surface and line are. */
becchio-tile {
  --tile-surface: var(--panel, rgba(232, 238, 245, 0.04));
}

/* The line Clay wants read first in About. */
.about-emphasis { color: var(--text); font-weight: 700; }

@media (min-width: 821px) {
  /* Desktop anchor alignment already clears the Main Nav through the root's
     scroll padding. A full viewport gives that cleared heading and its active
     recommendation one visual chapter before Results begins. */
  #services {
    min-height: 100svh;
  }
  .results-section { padding-block: 32px; }
}