/* ════════════════════════════════════════════════════════════════════
   FULL-STAG DIGITAL — fsd-utilities.css
   Utility shim for the React primitives: implements exactly the utility
   classes the components emit (the same class strings the shipped
   Tailwind build resolves), valued ONLY from fsd-theme.css tokens.
   In the operator's Nuxt/Tailwind build this file is unnecessary —
   the class names resolve natively; delete it there.
   Spacing values sit on the 8px base [fsd].
   ════════════════════════════════════════════════════════════════════ */

/* layout */
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.shrink-0 { flex-shrink: 0; }
.select-none { user-select: none; -webkit-user-select: none; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.text-center { text-align: center; }

/* type */
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
/* mobile CTA de-escalation (below sm): win over BASE font-bold/tracking-widest
   by source order for elements carrying both — used by BUTTON_SIZES.xl so the
   primary CTA shrinks on phones (lighter weight, tighter tracking) and the
   focal-frame corners stop cropping. Restored to bold/widest at sm+ below. */
.font-semibold { font-weight: 600; }
.tracking-wide { letter-spacing: 0.025em; }
.text-xs { font-size: var(--text-metadata); }   /* typescale.metadata */
.text-sm { font-size: var(--text-small); }      /* typescale.small */
.text-base { font-size: var(--text-body); }     /* typescale.body */
.underline-offset-4 { text-underline-offset: 4px; }

/* box */
.border-2 { border-width: 2px; border-style: solid; } /* edge.border 2px */
.h-9 { height: 2.25rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }

/* colour — statics */
.border-accent { border-color: var(--color-accent); }
.border-border { border-color: var(--color-border); }
.border-transparent { border-color: transparent; }
.border-destructive { border-color: var(--color-destructive); }
.bg-accent { background-color: var(--color-accent); }
.bg-card { background-color: var(--color-card); }
.bg-transparent { background-color: transparent; }
.text-accent { color: var(--color-accent); }
.text-accent-foreground { color: var(--color-accent-foreground); }
.text-foreground { color: var(--color-foreground); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.text-destructive { color: var(--color-destructive); }
.text-background { color: var(--color-background); }

/* motion — colour transitions run on state change only; Tailwind's default
   150ms is not a token, so this shim uses duration.fast + easing.standard
   (same ruling as the press physics, 2026-07-06). */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-standard);
}

/* outline-none must NOT defeat the accessible focus ring: it only clears
   the outline outside :focus-visible; the theme's *:focus-visible accent
   outline still lands [fsd rule 2: focus is a commitment]. */
.outline-none:not(:focus-visible) { outline: none; }

/* colour — hover states (after statics for cascade order) */
.hover\:bg-transparent:hover { background-color: transparent; }
.hover\:bg-accent:hover { background-color: var(--color-accent); }
.hover\:bg-accent-hover:hover { background-color: var(--color-accent-hover); }
.hover\:bg-destructive:hover { background-color: var(--color-destructive); }
.hover\:border-accent:hover { border-color: var(--color-accent); }
.hover\:border-accent-hover:hover { border-color: var(--color-accent-hover); }
.hover\:text-accent:hover { color: var(--color-accent); }
.hover\:text-accent-foreground:hover { color: var(--color-accent-foreground); }
.hover\:text-background:hover { color: var(--color-background); }
.hover\:underline:hover { text-decoration: underline; }

/* colour — active states (after hover: the press wins while held) */
.active\:bg-accent-active:active { background-color: var(--color-accent-active); }
.active\:border-accent-active:active { border-color: var(--color-accent-active); }
.active\:text-accent-foreground:active { color: var(--color-accent-foreground); }

/* disabled */
.disabled\:pointer-events-none:disabled { pointer-events: none; }
.disabled\:opacity-50:disabled { opacity: 0.5; }

/* ════════════════════════════════════════════════════════════════════
   Slice 4 additions — classes the chrome (SiteNav/SiteFooter) emits.
   ════════════════════════════════════════════════════════════════════ */

/* layout */
.flex { display: flex; }
.hidden { display: none; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.items-stretch { align-items: stretch; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }

/* spacing (8px base; the .5 steps are the shipped Tailwind scale) */
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.p-8 { padding: 2rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }

/* size — the escalated mark ladder (48/72/88px) + bar heights (80/112px) */
.h-12 { height: 3rem; }
.w-12 { width: 3rem; }
.h-18 { height: 4.5rem; }
.w-18 { width: 4.5rem; }
.h-20 { height: 5rem; }
.h-22 { height: 5.5rem; }
.w-22 { width: 5.5rem; }
.size-5 { width: 1.25rem; height: 1.25rem; }

/* borders — 2px structural [edge.border] */
.border-t-2 { border-top-width: 2px; border-top-style: solid; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }
.border-r-2 { border-right-width: 2px; border-right-style: solid; }
.border-foreground { border-color: var(--color-foreground); }

/* colour */
.bg-background\/95 { background-color: color-mix(in srgb, var(--color-background) 95%, transparent); }
.bg-foreground { background-color: var(--color-foreground); }
/* accent/70 — the index-numeral tint (Amendments A+B wayfinding job) */
.text-accent\/70 { color: color-mix(in srgb, var(--color-accent) 70%, transparent); }
.group:hover .group-hover\:text-accent-foreground { color: var(--color-accent-foreground); }

/* misc */
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.leading-relaxed { line-height: 1.625; }
.text-pretty { text-wrap: pretty; }
/* shipped arbitrary value — 0.65rem is NOT in typescale.*; ported verbatim,
   flagged to the operator (colophon/sitemap-header size) */
.text-\[0\.65rem\] { font-size: 0.65rem; }

/* ════════════════════════════════════════════════════════════════════
   Slice 5 additions — classes the Hero + LiveReadout emit.
   ════════════════════════════════════════════════════════════════════ */

.mx-auto { margin-left: auto; margin-right: auto; }
.block { display: block; }
.max-w-6xl { max-width: 72rem; }
.max-w-xs { max-width: 20rem; }
.max-w-\[20ch\] { max-width: 20ch; }
.max-w-\[60ch\] { max-width: 60ch; }
.max-w-\[68ch\] { max-width: 68ch; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.h-56 { height: 14rem; }
.w-56 { width: 14rem; }
.size-8 { width: 2rem; height: 2rem; }
.leading-\[0\.95\] { line-height: 0.95; }
.tracking-tight { letter-spacing: -0.025em; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.last\:border-b-0:last-child { border-bottom-width: 0; }

/* ════════════════════════════════════════════════════════════════════
   Slice 6 additions — section machinery + services blocks.
   ════════════════════════════════════════════════════════════════════ */

.relative { position: relative; }
.absolute { position: absolute; }
.pointer-events-none { pointer-events: none; }
.overflow-hidden { overflow: hidden; }
.scroll-mt-24 { scroll-margin-top: 6rem; }
.h-96 { height: 24rem; }
.w-96 { width: 24rem; }
.-left-40 { left: -10rem; }
.-right-40 { right: -10rem; }
.top-24 { top: 6rem; }
.inset-\[-50\%\] { inset: -50%; }
.bg-background { background-color: var(--color-background); }
.bg-background\/80 { background-color: color-mix(in srgb, var(--color-background) 80%, transparent); }
.bg-elevated { background-color: var(--color-elevated); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.hover\:bg-elevated:hover { background-color: var(--color-elevated); }
.text-2xl { font-size: var(--text-h3); }  /* typescale.h3 — 1.5rem */
.text-xl { font-size: var(--text-lead); } /* typescale.lead — 1.25rem */
/* shipped arbitrary sizes — NOT in typescale.*; ported verbatim, flagged */
.text-lg { font-size: 1.125rem; }
.text-4xl { font-size: 2.25rem; }
.min-w-0 { min-width: 0; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-prose { max-width: 65ch; }
.mt-auto { margin-top: auto; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.mt-3 { margin-top: 0.75rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.h-full { height: 100%; }
.p-6 { padding: 1.5rem; }
.cursor-pointer { cursor: pointer; }
.items-baseline { align-items: baseline; }

/* ════════════════════════════════════════════════════════════════════
   Slice 7 additions — process, CTA, contact, legal blocks.
   ════════════════════════════════════════════════════════════════════ */

.scroll-mt-28 { scroll-margin-top: 7rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.max-w-\[24ch\] { max-width: 24ch; }
.leading-tight { line-height: 1.25; }
.gap-6 { gap: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.pt-16 { padding-top: 4rem; }
.pb-24 { padding-bottom: 6rem; }
.font-normal { font-weight: 400; }
.normal-case { text-transform: none; }
.underline { text-decoration: underline; }
.flex-wrap { flex-wrap: wrap; }
.border-dashed { border-style: dashed; }
.border-muted-foreground\/40 { border-color: color-mix(in srgb, var(--color-muted-foreground) 40%, transparent); }
.border-muted-foreground\/60 { border-color: color-mix(in srgb, var(--color-muted-foreground) 60%, transparent); }
.hover\:text-muted-foreground:hover { color: var(--color-muted-foreground); }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-60:disabled { opacity: 0.6; }

/* the shipped container-query grid — ported verbatim [skin]: responsiveness
   is a system property; components never carry their own media queries */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--p-grid-min, 320px), 1fr));
  gap: var(--p-grid-gap, 1.5rem);
}
.p-grid > *,
.p-grid-2 > *,
.p-grid-3 > *,
.p-grid-4 > * { container-type: inline-size; }
.p-grid-2, .p-grid-3, .p-grid-4 { display: grid; gap: var(--p-grid-gap, 1.5rem); }
.p-grid-2 { grid-template-columns: repeat(2, 1fr); }
.p-grid-3 { grid-template-columns: repeat(3, 1fr); }
.p-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (width <= 767px) {
  .p-grid-2, .p-grid-3, .p-grid-4 { grid-template-columns: 1fr; }
}
@media (width >= 768px) and (width <= 1023px) {
  .p-grid-3, .p-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.p-span-full { grid-column: 1 / -1; }

/* ════════════════════════════════════════════════════════════════════
   Slice 8 additions — teasers (Services/Process/Contact) + section-index
   redesign.
   ════════════════════════════════════════════════════════════════════ */

.list-none { list-style: none; }
.leading-none { line-height: 1; }
.leading-snug { line-height: 1.375; }
.mb-3 { margin-bottom: 0.75rem; }
.size-4 { width: 1rem; height: 1rem; }
.max-w-\[64ch\] { max-width: 64ch; }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE VARIANTS — sm 640px / md 768px / lg 1024px (shipped breakpoints).
   These two blocks MUST remain the last rules in this file: variants are
   equal-specificity with the statics and win only by source order (the
   slice-5/6 append once buried them mid-file and silently killed every
   sm:/lg: override — verifier catch, 2026-07-06). Append new statics
   ABOVE this line; append new variants INSIDE these blocks.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:flex { display: flex; }
  .sm\:hidden { display: none; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:text-base { font-size: var(--text-body); }
  .sm\:text-sm { font-size: var(--text-small); }
  .sm\:text-xl { font-size: var(--text-lead); }
  .sm\:text-4xl { font-size: 2.25rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:grid-cols-\[14rem_1fr\] { grid-template-columns: 14rem 1fr; }
  .sm\:gap-5 { gap: 1.25rem; }
  .sm\:h-72 { height: 18rem; }
  .sm\:w-72 { width: 18rem; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:grid-cols-\[9rem_1fr\] { grid-template-columns: 9rem 1fr; }
  .sm\:text-2xl { font-size: var(--text-h3); }
  /* CTA (BUTTON_SIZES.xl) restored to its full scale at sm+ */
  .sm\:h-14 { height: 3.5rem; }
  .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .sm\:font-bold { font-weight: 700; }
  .sm\:tracking-widest { letter-spacing: 0.1em; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:h-28 { height: 7rem; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:h-18 { height: 4.5rem; }
  .lg\:w-18 { width: 4.5rem; }
  .lg\:border-r-2 { border-right-width: 2px; border-right-style: solid; }
  .lg\:border-t-0 { border-top-width: 0; }
  .lg\:p-12 { padding: 3rem; }
  .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .lg\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_320px\] { grid-template-columns: minmax(0, 1fr) 320px; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:h-80 { height: 20rem; }
  .lg\:w-80 { width: 20rem; }
  .lg\:scroll-mt-32 { scroll-margin-top: 8rem; }
  .lg\:mt-0 { margin-top: 0; }
  .lg\:block { display: block; }
  .lg\:scroll-mt-36 { scroll-margin-top: 9rem; }
  /* PASS 1 (2026-07-07): CtaBlock reserved-illustration-zone grid — content
     column + 26rem feature zone. Variants, appended INSIDE the (last) lg block
     per the source-order rule. */
  .lg\:grid-cols-\[1fr_26rem\] { grid-template-columns: 1fr 26rem; }
  .lg\:grid-cols-\[1fr_22rem\] { grid-template-columns: 1fr 22rem; } /* full-row service card: content + reserved feature graphic */
  .lg\:items-center { align-items: center; }
}