/*
  The Bellvue Group — shared design system
  Implements docs/DESIGN.md in full. Class names are fixed by that spec.
  Zero network requests. No web fonts. No build step.
*/

/* ---------------------------------------------------------------------
   1. Reset / base
   --------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden; /* nothing scrolls the page horizontally */
}

body {
  margin: 0;
  background: var(--bg); /* explicit, never transparent */
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

svg {
  height: auto;
}

a {
  color: inherit;
}

ul,
ol {
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
}

/* ---------------------------------------------------------------------
   2. Tokens — light values live on bare :root. Dark values are
   redefined twice: once for system preference, once for an explicit
   toggle, so a manual choice always wins. Never define a colour only
   inside a media query.
   --------------------------------------------------------------------- */

:root {
  /* Brand */
  --gold: #c6a15b;
  --gold-deep: #8a6d33;
  --gold-soft: rgba(198, 161, 91, 0.12);
  --gold-line: rgba(198, 161, 91, 0.28);
  --brand-black: #0a0a0a;

  /* Surfaces — light */
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f4f1ea;
  --line: #e4dfd4;
  --line-strong: #cfc7b6;

  /* Text — light */
  --ink: #16150f;
  --ink-2: #4a4638;
  --ink-3: #7c7666;

  /* Status */
  --good: #2f7a4f;
  --warning: #b07d1a;
  --serious: #c2571f;
  --critical: #a32b2b;

  /* Shape and motion */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(22, 21, 15, 0.05), 0 8px 24px rgba(22, 21, 15, 0.06);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Type families */
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing scale — use these, nothing between them */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-128: 128px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100f0c;
    --surface: #17160f;
    --surface-2: #1f1d15;
    --line: #2b2820;
    --line-strong: #3b3729;
    --ink: #f2eee4;
    --ink-2: #cbc5b4;
    --ink-3: #928b78;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #100f0c;
  --surface: #17160f;
  --surface-2: #1f1d15;
  --line: #2b2820;
  --line-strong: #3b3729;
  --ink: #f2eee4;
  --ink-2: #cbc5b4;
  --ink-3: #928b78;
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   3. Type scale — §3 of DESIGN.md, exactly as tabled.
   Serif is reserved for the wordmark, display and h1/h2. Everything
   else is sans. No @font-face, no font links — system stacks only.
   --------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--sp-16);
  font-weight: 400;
  color: var(--ink);
}

/* Page title (h1) */
h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Display — hero h1 only; apply alongside the h1 element */
h1.display,
.display {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.01em;
  line-height: 1.08;
}

/* Section head (h2) */
h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: normal;
  line-height: 1.2;
}

/* Sub-head (h3) */
h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

p {
  margin: 0 0 var(--sp-16);
}

/* Wordmark */
.wordmark {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Small / meta */
.small,
.meta {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-3);
}

/* Code */
code,
pre,
kbd {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Body copy line-length limit */
.prose p,
.prose li {
  max-width: 68ch;
}

/* ---------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------- */

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.prose {
  max-width: 720px;
  margin-inline: auto;
}

.section {
  padding-block: clamp(64px, 9vw, 128px);
}

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

/* Generic grid utilities implementing §4's "12-column desktop, 1 column
   under 760px" rule. Not a named component in §5 — a layout primitive
   the page-building phases need for the 2-up / 3-up grids SPEC.md calls
   for (work cards, testimonials, "what we do" cards, etc). */
.grid {
  display: grid;
  gap: var(--sp-24);
}

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

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

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

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

@media (max-width: 760px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-12 {
    grid-template-columns: 1fr;
  }
}

/* Wide tables / demo frames get their own horizontal scroller so the
   page itself never scrolls sideways. */
.scroll-x {
  overflow-x: auto;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--brand-black);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: var(--sp-16);
  top: var(--sp-16);
}

/* ---------------------------------------------------------------------
   5. Components
   --------------------------------------------------------------------- */

/* .brand-panel — near-black block, used by header, footer, demo chrome
   and any closing band. Identity holds in both themes because these
   values never change with the theme toggle. Components inside pick up
   the correct on-dark colours automatically because the panel
   re-scopes the surface/text tokens to their dark-mode values. */
.brand-panel {
  background: var(--brand-black);
  --bg: #0a0a0a;
  --surface: #17160f;
  --surface-2: #1f1d15;
  --line: #2b2820;
  --line-strong: #3b3729;
  --ink: #f2eee4;
  --ink-2: #cbc5b4;
  --ink-3: #928b78;
  color: var(--ink);
}

/* .eyebrow — uppercase gold-ruled label above a section heading */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--sp-12);
}

.eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: var(--sp-8);
  background: var(--gold);
}

/* .btn — primary action */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--gold);
  color: var(--brand-black); /* text on gold is always brand-black */
  font: 600 0.9375rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
      color 160ms var(--ease);
  }
}

.btn:hover {
  background: var(--gold-deep);
  color: var(--brand-black);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn.ghost:hover {
  border-color: var(--gold-deep);
  color: var(--ink);
}

.btn.on-dark {
  background: transparent;
  color: #f2eee4;
  border-color: rgba(242, 238, 228, 0.35);
}

.btn.on-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* .card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-24);
}

@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    .card {
      transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(22, 21, 15, 0.08), 0 16px 32px rgba(22, 21, 15, 0.1);
    }
  }
}

/* .work-card — portfolio tile. A single real link (the title) covers
   the whole tile via a stretched-link pattern, so there is exactly one
   interactive element per card and one clear focus target. */
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-20, 20px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.work-card__thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-8);
}

.work-card__kicker {
  margin-bottom: 0;
}

.work-card__title {
  margin: 0;
  font-size: 1.0625rem;
}

.work-card__title a {
  color: var(--ink);
  text-decoration: none;
}

.work-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.work-card__title a:hover {
  color: var(--gold-deep);
}

.work-card__summary {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.work-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  list-style: none;
  margin: var(--sp-4) 0 0;
}

.work-card__cta {
  margin: auto 0 0;
  color: var(--gold-deep);
  font-weight: 600;
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: no-preference) {
  .work-card__title a,
  .work-card__cta {
    transition: color 160ms var(--ease);
  }
}

/* .chip — tag pill; also used as an interactive filter toggle button */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 4px 12px;
  min-height: 32px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid transparent;
  font: 400 0.8125rem/1.4 var(--font-sans);
  text-decoration: none;
}

button.chip {
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  button.chip {
    transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
      color 160ms var(--ease);
  }
}

button.chip:hover {
  border-color: var(--gold-line);
}

button.chip[aria-pressed="true"] {
  background: var(--gold-soft);
  border-color: var(--gold-line);
  color: var(--gold-deep);
  font-weight: 600;
}

/* .stat — a big tabular number, sourced */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.stat__value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ink);
}

.stat__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.stat__src {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* .rule */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--sp-48);
}

/* .note — honesty label. Never dismissible: no close control, ever. */
.note {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-16) var(--sp-20, 20px);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.note p:last-child {
  margin-bottom: 0;
}

/* .demo-frame — device chrome around an embedded demo */
.demo-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  background: var(--brand-black);
}

.demo-frame__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: 10px var(--sp-16);
  background: var(--brand-black);
  color: #f2eee4;
}

.demo-frame__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.demo-frame__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(242, 238, 228, 0.3);
  display: inline-block;
}

.demo-frame__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: #cbc5b4;
}

.demo-frame__expand {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}

.demo-frame__expand:hover {
  text-decoration: underline;
}

.demo-frame__body {
  background: var(--surface);
  overflow: auto;
}

.demo-frame__body iframe {
  display: block;
  width: 100%;
  height: 640px;
  min-height: 640px;
  border: 0;
}

/* .table — hairline rules, surface-2 header, tabular-nums, sticky head
   inside its own scroll container so wide data never scrolls the page. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  height: 40px;
  padding: 0 var(--sp-16);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table thead th {
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------------------------------------------------------------------
   6. Site header / footer shell — SPEC.md §4
   --------------------------------------------------------------------- */

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  padding-block: var(--sp-16);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: var(--sp-24);
  list-style: none;
  margin: 0;
}

.site-nav a {
  display: inline-block;
  padding: var(--sp-8) 0;
  color: var(--ink-2);
  text-decoration: none;
  font: 400 0.9375rem/1 var(--font-sans);
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a.is-active {
  color: var(--gold);
  font-weight: 600;
}

.site-header__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-left: var(--sp-8);
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-2);
  font: 400 0.8125rem/1 var(--font-sans);
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--gold-line);
  color: var(--ink);
}

.theme-toggle__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-toggle__dot {
    transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
  }
}

.theme-toggle[aria-pressed="true"] .theme-toggle__dot {
  background: var(--gold);
  border-color: var(--gold);
}

/* Mobile nav disclosure button (a real <button>, not a checkbox hack) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle__box {
  position: relative;
  width: 18px;
  height: 12px;
  display: inline-block;
}

.nav-toggle__box span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}

.nav-toggle__box span:nth-child(1) {
  top: 0;
}

.nav-toggle__box span:nth-child(2) {
  top: 5px;
}

.nav-toggle__box span:nth-child(3) {
  top: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-toggle__box span {
    transition: transform 160ms var(--ease), opacity 160ms var(--ease), top 160ms var(--ease);
  }
}

.nav-toggle.is-open .nav-toggle__box span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__box span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle__box span:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-8);
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  color: var(--ink-2);
  text-decoration: none;
  font: 400 1rem/1 var(--font-sans);
}

.mobile-nav a.is-active {
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 760px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

@media (min-width: 761px) {
  .mobile-nav {
    display: none !important;
  }

  .nav-toggle {
    display: none;
  }
}

/* Footer */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-32);
  padding-block: var(--sp-48);
}

.site-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  max-width: 360px;
}

.site-footer__brand p {
  margin: var(--sp-4) 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.site-footer nav ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-24);
}

.site-footer nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
}

.site-footer nav a:hover,
.site-footer nav a.is-active {
  color: var(--gold);
}

.site-footer__legal {
  flex-basis: 100%;
  margin: 0;
  padding-top: var(--sp-24);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------
   7. Focus, motion, accessibility — §6
   --------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
iframe:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------------
   Work-card thumbnails — live scaled previews.

   The thumb was an empty box. Rather than ship screenshot files (which would
   be external images, and would go stale every time a demo changes), each
   thumb holds the real demo in an iframe, scaled down and made inert.

   The 400% + scale(0.25) pairing means the preview fills the thumb at any
   container width without needing JS to compute a scale factor: the iframe's
   internal viewport is always 4x the thumb, so it renders at desktop width
   and shrinks to fit.
   --------------------------------------------------------------------------- */
.work-card__thumb {
  position: relative;
  overflow: hidden;
}

.work-card__thumb > iframe {
  position: absolute;
  /* Shifted up so the sample-data strip sits just above the crop and the
     tile shows the actual application instead of its disclaimer banner.
     The strip is still there when the demo is opened for real. */
  top: -30px;
  left: 0;
  width: 400%;
  height: calc(400% + 120px);
  transform: scale(0.25);
  transform-origin: 0 0;
  border: 0;
  pointer-events: none;
  background: var(--surface);
}

/* A hairline wash so a very light demo still reads as a distinct tile. */
.work-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: inherit;
  pointer-events: none;
}

/* Bellvue HQ has no public demo on purpose — it is the firm's own internal
   tool holding real operating data. Its tile says so rather than faking one. */
.work-card__thumb--static {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--surface-2) 0 10px,
      transparent 10px 20px
    ),
    var(--surface);
}
.work-card__thumb--static .thumb-note {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-3);
  line-height: 1.4;
}
.work-card__thumb--static .thumb-note small {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   [hidden] must actually hide.

   The work-card filter sets the `hidden` attribute on filtered-out cards, but
   the UA stylesheet's `[hidden] { display: none }` is a lower-specificity rule
   than `.work-card { display: flex }`, so the cards stayed on screen while the
   result count claimed otherwise. This restores the expected behaviour.
   --------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Enquiry form + its pop-up dialog.

   The same form markup is used twice: mounted inline on contact.html, and
   inside a <dialog> everywhere else. One set of styles covers both, so the two
   can never drift apart visually.
   --------------------------------------------------------------------------- */

.enquiry__row {
  display: grid;
  gap: var(--sp-16);
  margin-bottom: var(--sp-16);
}

@media (min-width: 620px) {
  .enquiry__row--pair {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-width: 0; /* let a long value shrink instead of blowing the grid out */
}

.field > label {
  font: 600 0.8125rem/1.3 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field__hint {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin: 0;
}

.field input,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font: 400 0.9375rem/1.5 var(--font-sans);
}

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

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

/* Only flag a field once the visitor has actually interacted with it —
   :user-invalid, unlike :invalid, stays quiet on an untouched empty field. */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #c0392b;
}

.field__error {
  display: none;
  font-size: 0.8125rem;
  color: #c0392b;
  margin: 0;
}

.field input:user-invalid ~ .field__error,
.field textarea:user-invalid ~ .field__error {
  display: block;
}

/* The honeypot. Never shown, never announced, never tab-stopped — but a bot
   filling in every field it can find will still walk straight into it. */
.enquiry__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-16);
  margin-top: var(--sp-24);
}

.enquiry__status {
  margin: var(--sp-16) 0 0;
  font-size: 0.9375rem;
}

.enquiry__status--error {
  color: #c0392b;
}

.enquiry__done {
  text-align: center;
  padding: var(--sp-24) 0;
}

.enquiry__done h3 {
  margin-top: 0;
}

/* --- the pop-up itself ---------------------------------------------------- */

.enquiry-dialog {
  width: min(640px, calc(100vw - 2 * var(--sp-24)));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.enquiry-dialog::backdrop {
  background: rgba(10, 9, 6, 0.62);
}

.enquiry-dialog__inner {
  padding: var(--sp-32);
  overflow-y: auto;
  max-height: inherit;
}

.enquiry-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-8);
}

.enquiry-dialog__head h2 {
  margin: 0;
}

.enquiry-dialog__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.enquiry-dialog__close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

@media (max-width: 520px) {
  .enquiry-dialog__inner {
    padding: var(--sp-24);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .enquiry-dialog[open] {
    animation: enquiry-in 180ms var(--ease);
  }
  @keyframes enquiry-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}