/* Dunieski Designs, shared design system
   Tokens, type, layout motif, motion. See CLAUDE.md for the spec this implements. */

/* ---------- Fonts: self-hosted (latin subset, only the weights in use), OFL licensed, see /assets/fonts/OFL.txt ---------- */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/unbounded-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
/* Size-matched local fallbacks (measured against Arial) so text barely moves when the web fonts swap in */
@font-face {
  font-family: 'Unbounded Fallback';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 128.46%;
  ascent-override: 77.46%;
  descent-override: 19.07%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 107.17%;
  ascent-override: 90.39%;
  descent-override: 22.51%;
  line-gap-override: 0%;
}

:root {
  --paper: #F7F5F0;
  --ink: #18181A;
  --wine: #7A2140;
  --smoke: #98938B;      /* decorative lines and dividers only */
  --smoke-text: #67625A; /* small gray text: 5.5:1 on paper, 5.1:1 on paper-dim */

  --wine-dim: #5c1830;
  --paper-dim: #EFEBE2;

  --font-display: 'Unbounded', 'Unbounded Fallback', sans-serif;
  --font-body: 'Inter', 'Inter Fallback', sans-serif;

  --chamfer: 16px;
  --chamfer-sm: 10px;
  /* Inner cut for a 1px gapless chamfer ring: chamfer - borderWidth*(2+sqrt(2)),
     so the ring reads as a uniform 1px line on the straight edges AND the diagonal. */
  --chamfer-inner: 12.586px;
  --chamfer-inner-sm: 6.586px;

  --max-w: 1180px;
  --gutter: 24px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Semantic theme tokens. Components use only these, so a theme swaps by variables alone. */
  --bg: #F7F5F0;
  --bg-alt: #EFEBE2;
  --card: #EFEBE2;
  --card-on-alt: #F7F5F0;
  --card-on-inverse: #EFEBE2;
  --inset: #F7F5F0;
  --field-bg: #F7F5F0;
  --text: #18181A;
  --text-muted: #67625A;       /* 5.5:1 on paper, 5.1:1 on paper-dim */
  --link: #7A2140;
  --link-hover: #5c1830;
  --accent: #7A2140;           /* fills only (buttons, badges) */
  --accent-hover: #5c1830;
  --on-accent: #F7F5F0;
  --accent-line: #7A2140;      /* thin accents, bullets, progress */
  --featured-ring: #7A2140;
  --error: #7A2140;
  --focus: #7A2140;
  --deco: #98938B;             /* decorative lines only */
  --border: rgba(24, 24, 26, 0.12);
  --line-strong: #67625A;      /* control borders, 3:1 or better */
  --inverse-bg: #18181A;       /* sections that are dark in light mode */
  --inverse-text: #F7F5F0;
  --inverse-soft: rgba(247, 245, 240, 0.78);
  --inverse-muted: #98938B;
  --inverse-line: rgba(247, 245, 240, 0.15);
  --header-bg: rgba(247, 245, 240, 0.92);
  --hero-tile: #7A2140;
  --hero-mark: #F7F5F0;
  --brand-mark: #7A2140;
  --brand-sep: #7A2140;
  --shadow: rgba(24, 24, 26, 0.1);
  color-scheme: light;
}

/* Dark theme. data-theme is set before first paint by the inline script in <head>. */
:root[data-theme="dark"] {
  --bg: #18181A;
  --bg-alt: #202023;
  --card: #26262A;
  --card-on-alt: #2B2B30;
  --card-on-inverse: #34343A;
  --inset: #1C1C1F;
  --field-bg: #2E2E33;
  --text: #F7F5F0;
  --text-muted: #98938B;
  --link: #F7F5F0;
  --link-hover: #F7F5F0;
  --accent: #7A2140;
  --accent-hover: #8A2A4C;
  --on-accent: #F7F5F0;
  --accent-line: #F7F5F0;
  --featured-ring: #F7F5F0;
  --error: #F7F5F0;
  --focus: #F7F5F0;
  --deco: #4A4A50;
  --border: rgba(247, 245, 240, 0.16);
  --line-strong: #98938B;
  --inverse-bg: #2A2A2F;
  --inverse-text: #F7F5F0;
  --inverse-soft: rgba(247, 245, 240, 0.8);
  --inverse-muted: #98938B;
  --inverse-line: rgba(247, 245, 240, 0.18);
  --header-bg: rgba(24, 24, 26, 0.92);
  --hero-tile: #7A2140;
  --hero-mark: #F7F5F0;
  --brand-mark: #F7F5F0;
  --brand-sep: #F7F5F0;
  --shadow: rgba(24, 24, 26, 0.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #18181A;
    --bg-alt: #202023;
    --card: #26262A;
    --card-on-alt: #2B2B30;
    --card-on-inverse: #34343A;
    --inset: #1C1C1F;
    --field-bg: #2E2E33;
    --text: #F7F5F0;
    --text-muted: #98938B;
    --link: #F7F5F0;
    --link-hover: #F7F5F0;
    --accent: #7A2140;
    --accent-hover: #8A2A4C;
    --on-accent: #F7F5F0;
    --accent-line: #F7F5F0;
    --featured-ring: #F7F5F0;
    --error: #F7F5F0;
    --focus: #F7F5F0;
    --deco: #4A4A50;
    --border: rgba(247, 245, 240, 0.16);
    --line-strong: #98938B;
    --inverse-bg: #2A2A2F;
    --inverse-text: #F7F5F0;
    --inverse-soft: rgba(247, 245, 240, 0.8);
    --inverse-muted: #98938B;
    --inverse-line: rgba(247, 245, 240, 0.18);
    --header-bg: rgba(24, 24, 26, 0.92);
    --hero-tile: #7A2140;
    --hero-mark: #F7F5F0;
    --brand-mark: #F7F5F0;
    --brand-sep: #F7F5F0;
    --shadow: rgba(24, 24, 26, 0.7);
    color-scheme: dark;
  }
}

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

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem; /* 16/28, the brand system's Body role */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

/* Type scale, from the real brand system doc (CLAUDE.md), fixed sizes, not ad hoc */
h1 { font-size: 2.25rem; line-height: 2.625rem; } /* 36/42 */
h2 { font-size: 1.5rem; line-height: 2rem; } /* 24/32 */
h3 { font-size: 1.15rem; line-height: 1.5rem; }

.text-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem); /* up to 56/60 */
  line-height: 1.07;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

.lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem; /* 20/32 */
  line-height: 2rem;
  color: var(--text);
  max-width: 60ch;
}

p { margin: 0 0 1em; max-width: 65ch; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Focus states, visible everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -6rem;
  background: var(--inverse-bg);
  color: var(--inverse-text);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Chamfer motif, the signature cut corner */
.chamfer {
  clip-path: polygon(
    var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)
  );
}
.chamfer-sm {
  clip-path: polygon(
    var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)
  );
}

/* Gapless chamfer borders.
   A native `border` is drawn on the box's rectangular edges only, clip-path crops the
   render but never adds a stroke along the new diagonal edge it creates, so a bordered
   chamfered element shows a bare gap at each cut corner. Fix: stop drawing a real border:
   the element's own background becomes the "ring" color, clipped to the outer chamfer,
   and an inset ::before (clipped to a smaller, matching chamfer) paints the real fill on
   top, leaving a uniform ring, including along the diagonal, with no native border at all.
   ::before gets z-index:-1 (scoped by the element's own stacking context) so it paints
   above the ring but below the element's real content. */
.btn-secondary.chamfer,
.tier-card.chamfer-sm,
.form-panel.chamfer-sm,
.portal-project.chamfer-sm {
  position: relative;
  isolation: isolate;
  border: none;
}
.btn-secondary.chamfer::before,
.tier-card.chamfer-sm::before,
.form-panel.chamfer-sm::before,
.portal-project.chamfer-sm::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  pointer-events: none;
}

.btn-secondary.chamfer {
  background: var(--text);
}
.btn-secondary.chamfer::before {
  background: var(--bg);
  clip-path: polygon(
    var(--chamfer-inner) 0, 100% 0, 100% calc(100% - var(--chamfer-inner)),
    calc(100% - var(--chamfer-inner)) 100%, 0 100%, 0 var(--chamfer-inner)
  );
}
.bg-dim .btn-secondary.chamfer::before { background: var(--bg-alt); }
.btn-secondary.chamfer:hover::before { background: var(--text); }

.tier-card.chamfer-sm,
.form-panel.chamfer-sm,
.portal-project.chamfer-sm {
  background: var(--border);
}
.tier-card.chamfer-sm::before,
.form-panel.chamfer-sm::before,
.portal-project.chamfer-sm::before {
  background: var(--card);
  clip-path: polygon(
    var(--chamfer-inner-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-inner-sm)),
    calc(100% - var(--chamfer-inner-sm)) 100%, 0 100%, 0 var(--chamfer-inner-sm)
  );
}
.bg-dim .tier-card.chamfer-sm::before,
.bg-dim .form-panel.chamfer-sm::before {
  background: var(--card-on-alt);
}
.tier-card.is-featured.chamfer-sm { background: var(--featured-ring); }

/* service-teaser only ever carries a border-LEFT accent, never a full outline, so the
   two-layer ring trick above is overkill, but the default two-corner chamfer still
   clips the diagonal through the top of that left accent bar, truncating it at an angle
   instead of a clean corner. Cut only the bottom-right corner here, so the accent bar's
   own corner stays intact. */
.service-teaser.chamfer-sm {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  container-type: inline-size; /* lets the nav collapse by rem width, so large text collapses it too */
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Wordmark, the real lockup: "Dunieski [mark-sep glyph] Designs", uppercase, tracked, Unbounded 600 */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }

/* Horizontal, primary lockup: mark + wordmark, per the brand guidelines.
   Wine mark on paper surfaces; paper mark on ink/wine surfaces. Gap = clear space. */
.mark-icon, .mark-sep { fill: currentColor; }
.mark-icon {
  width: 28px;
  height: 28px;
  color: var(--brand-mark);
  flex: none;
  margin-right: 10px;
}
.footer-wordmark .mark-icon { color: var(--inverse-text); }

.mark-sep {
  width: 0.6em;
  height: 0.82em;
  color: var(--brand-sep);
  display: inline-block;
  vertical-align: -0.06em;
  margin: 0 0.14em;
  flex: none;
}
.footer-wordmark .mark-sep { color: var(--inverse-text); }

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--link);
  text-decoration: none;
  border-bottom-color: var(--accent-line);
}

.nav-links .nav-login {
  margin-left: 0.5rem;
  padding-left: 2rem;
  border-left: 1px solid var(--border);
}
.nav-links .nav-login a { font-weight: 400; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  margin: 4px 0;
}

@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }

  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1rem var(--gutter) 1.5rem;
    gap: 1rem;
  }
  .nav-links .nav-login {
    margin-left: 0;
    padding-left: 0;
    padding-top: 1rem;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.btn-secondary:hover { background: var(--text); color: var(--bg); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--link);
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost:hover { color: var(--link-hover); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ---------- Sections ---------- */
section { padding: 5rem 0; }
.section-tight { padding: 3rem 0; }

.section-head {
  max-width: 620px;
  margin-bottom: 2.5rem;
}
.section-head p { color: var(--text); }

.bg-ink {
  background: var(--inverse-bg);
  color: var(--inverse-text);
}
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--inverse-text); }
.bg-ink p { color: var(--inverse-soft); }
.bg-ink a:not(.btn) { color: var(--inverse-text); }

.bg-dim { background: var(--bg-alt); }

/* ---------- Cards (varied, not one repeated kit) ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2rem;
}

.tier-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
/* .tier-card.is-featured's wine ring comes from .tier-card.is-featured.chamfer-sm above
   (background: var(--wine)), part of the gapless chamfer-border technique. */
.tier-card { padding-top: 3.75rem; }
.tier-badge {
  /* In normal flow, pulled up into the card's top padding with a negative margin, so a
     badge that wraps (narrow card, big text) pushes the tier name down instead of
     covering it. One line sits where the old absolute badge did. */
  align-self: flex-start;
  max-width: 100%;
  margin: -2.5rem 0 -0.44rem;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  letter-spacing: 0.02em;
}
.tier-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--text);
  font-size: 0.95rem;
}
.tier-card li { padding-left: 1.1rem; position: relative; }
.tier-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--accent-line);
}
.tier-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}
.tier-subtitle { color: var(--text); font-size: 0.9rem; margin: 0; }
.tier-card .btn {
  width: 100%;
  white-space: nowrap;
  justify-content: center;
  margin-top: auto;
}
.tier-card { min-width: 0; }
.tier-card .tier-meta { margin-top: auto; min-height: 4.2rem; }
.tier-card .tier-meta + .btn { margin-top: 0; }

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

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

/* Service teaser cards (homepage), distinct treatment from tier cards */
.service-teaser {
  border-left: 3px solid var(--accent-line);
  padding: 1.75rem 1.75rem 1.75rem 1.5rem;
  background: var(--card);
}
.service-teaser h3 { margin-bottom: 0.4rem; }
.service-teaser p { color: var(--text); margin-bottom: 1rem; }

/* Portfolio */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-btn:hover { border-color: var(--accent-line); }
.filter-btn.is-active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.project-card {
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.project-card:hover {
  text-decoration: none;
  box-shadow: 0 8px 24px var(--shadow);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .project-card:hover { transform: none; }
}
.project-card.is-hidden { display: none; }
.project-card .project-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--bg-alt), var(--card));
  overflow: hidden;
}
.project-card .project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-card .project-body { padding: 1.5rem; }
/* project-card always has its own light (paper-dim) fill, even inside a dark .bg-ink
   section, so its text must stay dark regardless of the ambient .bg-ink h3/p rules. */
.project-card .project-body h3,
.project-card .project-body p { color: var(--text); }
.bg-ink .project-card { background: var(--card-on-inverse); }
.project-tag {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--link);
  border: 1px solid var(--link);
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.75rem;
}

/* Case study */
.case-hero {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  padding: 4rem 0;
}
.case-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 1.5rem;
}
.case-section { padding: 3rem 0; border-bottom: 1px solid var(--border); }
.case-section:last-of-type { border-bottom: none; }

/* Case-study hero photo, directly under the title block */
.case-hero-image,
.case-wide-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-top: 2.5rem;
}
.case-hero-image img,
.case-wide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Concept line: the one pull-quote borrowed verbatim from a client's own brand system doc */
.concept-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--link);
  margin: 1.75rem 0;
  max-width: 20ch;
}

/* Approach-section image walkthrough: 2x2 on desktop, stacked on mobile */
.case-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.case-gallery figure {
  margin: 0;
}
.case-gallery .gallery-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.case-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-gallery figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .case-gallery { grid-template-columns: 1fr; }
}
/* Testimonials */
.testimonial {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testimonial p { color: var(--text); font-size: 1.02rem; }
.testimonial .author { color: var(--text-muted); font-size: 0.88rem; }
.testimonial .author strong { color: var(--text); }

/* Process */
.process-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.process-step {
  padding-top: 1.5rem;
  border-top: 2px solid var(--accent-line);
}
.process-step .step-num {
  font-family: var(--font-display);
  color: var(--text-muted);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
}
@media (max-width: 940px) { .process-list { grid-template-columns: 1fr; } }

/* FAQ accordion */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--link);
  flex: none;
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 0 1.5rem; color: var(--text); }

/* Forms */
.form-panel {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2.25rem;
  max-width: 560px;
}
.form-field { margin-bottom: 1.25rem; }
.form-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--text);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.honeypot-field { position: absolute; left: -9999px; }

.form-success {
  display: none;
  background: var(--card);
  border-left: 3px solid var(--accent-line);
  padding: 1.5rem;
}
.form-success.is-visible { display: block; }
.form-panel.is-submitted form { display: none; }

/* Hero mark animation */
.hero {
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-mark-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mark-stage {
  background: var(--hero-tile);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
}

#hero-mark {
  width: 100%;
  max-width: 220px;
  height: auto;
  overflow: visible;
}

/* The real two-facet mark: each piece slides in from an opposite angle along
   their shared seam and locks into place (CLAUDE.md motion spec, supersedes
   the earlier 16-facet placeholder concept). */
.mark-facet {
  fill: var(--hero-mark);
  opacity: 0;
}
.mark-facet-a {
  transform: translate(-120px, -90px) scale(0.85);
  animation: facet-lock-a 0.9s var(--ease) forwards;
}
.mark-facet-b {
  transform: translate(120px, 90px) scale(0.85);
  animation: facet-lock-b 0.9s var(--ease) forwards;
  animation-delay: 0.12s;
}

@keyframes facet-lock-a {
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes facet-lock-b {
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}

.mark-sweep-mask {
  mix-blend-mode: overlay;
}
.mark-sweep-rect {
  opacity: 0;
  animation: mark-sweep-move 4.5s ease-in-out 1.1s infinite;
}
@keyframes mark-sweep-move {
  0% { transform: translateX(-260px); opacity: 0; }
  8% { opacity: 1; }
  55% { opacity: 1; }
  65%, 100% { transform: translateX(760px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mark-facet-a, .mark-facet-b { animation: none; opacity: 1; transform: none; }
  .mark-sweep-rect { animation: none; opacity: 0; }
}

/* Footer */
.site-footer {
  container-type: inline-size;
  background: var(--inverse-bg);
  color: var(--inverse-soft);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-grid h4,
.footer-grid .footer-heading {
  color: var(--inverse-text);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-grid a { color: var(--inverse-soft); display: inline-block; padding: 0.15rem 0; }
.footer-grid a:hover { color: var(--inverse-text); }
.footer-wordmark { color: var(--inverse-text); margin-bottom: 0.75rem; }
.footer-bottom {
  border-top: 1px solid var(--inverse-line);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
}
.footer-bottom { align-items: center; }
.footer-bottom span:last-child { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-bottom a { color: var(--inverse-soft); display: inline-block; padding: 0.35rem 0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Page hero (non-home pages) */
.page-hero { padding: 4rem 0 3rem; }
.page-hero p { color: var(--text); font-size: 1.25rem; line-height: 2rem; font-weight: 500; }
/* Caption/eyebrow role: 12px/18, Inter 500, uppercase, 0.22em tracking per the type scale.
   Smoke, not wine, wine stays the single accent per view, not a label color. */
.eyebrow {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: inline-block;
}

/* Case study privacy caption: quiet, no box */
.case-caption {
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--text-muted);
  margin: 1.5rem 0 0;
}

/* Closing CTA button pair: side by side, stacked on mobile */
.btn-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}
@media (max-width: 640px) {
  .btn-row { flex-direction: column; align-items: stretch; }
}
#contact-form { scroll-margin-top: 6rem; }

/* By-invitation panel: quieter than the service cards */
.invite-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: 1.75rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--border);
}
.invite-panel h3 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.invite-panel p { margin: 0; font-size: 0.95rem; max-width: 60ch; }
.invite-panel .eyebrow { margin-bottom: 0.4rem; }
@media (max-width: 640px) {
  .invite-panel { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
}
.invite-badge {
  display: table;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

/* Legal pages (terms, privacy) */
.legal { max-width: 70ch; }
.legal h2 { margin: 2.5rem 0 1rem; scroll-margin-top: 6rem; }
.legal h3 { font-size: 1.1rem; margin: 1.75rem 0 0.75rem; }
.legal p, .legal li { line-height: 1.75rem; }
.legal ul, .legal ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
#brand-audit { scroll-margin-top: 4rem; }
.legal li { margin-bottom: 0.5rem; }
.legal ul ul { margin: 0.5rem 0 0; }
.legal hr { border: 0; border-top: 1px solid var(--border); margin: 2.25rem 0 0; }
.legal-meta { color: var(--text-muted); font-size: 0.9rem; }
.legal-contact { margin-top: 0.5rem; }

/* Client portal */
.portal-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.portal-who { font-size: 1rem !important; line-height: 1.75rem !important; font-weight: 400 !important; margin: 0; }
.portal-msg { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--accent-line); background: var(--inset); font-size: 0.95rem; }
.portal-msg[hidden] { display: none; }
.portal-msg-err { border-left-color: var(--text); }
.portal-help { margin: 1.5rem 0 0; font-size: 0.9rem; }
.portal-projects { display: grid; gap: 1.75rem; }
.portal-empty { background: var(--card); border: 1px solid var(--border); padding: 2.25rem; max-width: 560px; }
.portal-empty[hidden] { display: none; }
.portal-project { background: var(--card); border: 1px solid var(--border); padding: 2.25rem; }
.pp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pp-head h2 { margin: 0; }
.status-pill { border: 1px solid var(--text); color: var(--text); font-size: 0.8rem; font-weight: 500; padding: 0.3rem 0.85rem; white-space: nowrap; }
.pp-progress-label { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.4rem; }
.progress-track { height: 10px; background: var(--inset); border: 1px solid var(--border); }
.progress-fill { height: 100%; background: var(--accent-line); transition: width 0.4s var(--ease); }
.pp-dates { margin: 1rem 0 0; font-size: 0.9rem; color: var(--text); white-space: pre-wrap; }
.pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.pp-cols h3 { font-size: 1rem; margin: 0 0 1rem; }
.pp-empty { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
.ms-list, .up-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.ms { display: flex; gap: 0.75rem; align-items: flex-start; }
.ms-mark { flex: none; width: 14px; height: 14px; margin-top: 0.35rem; border: 2px solid var(--text-muted); background: transparent; }
.ms-in-progress .ms-mark { border-color: var(--accent-line); }
.ms-done .ms-mark { border-color: var(--accent-line); background: var(--accent-line); }
.ms-body { display: flex; flex-direction: column; }
.ms-title { font-weight: 500; }
.ms-done .ms-title { color: var(--text); }
.ms-meta { font-size: 0.8rem; color: var(--text-muted); }
.up { padding-left: 0.9rem; border-left: 2px solid var(--border); }
.up-date { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.up-msg { margin: 0.2rem 0 0.3rem; font-size: 0.95rem; line-height: 1.6rem; }
@media (max-width: 720px) {
  .pp-cols { grid-template-columns: 1fr; gap: 2rem; }
  .portal-project { padding: 1.5rem; }
}


/* ---------- Accessibility (WCAG 2.2 AA) ---------- */
/* Dark surfaces keep the lighter smoke, which passes there (5.8:1 on ink). */
.bg-ink .eyebrow, .case-hero .eyebrow, .site-footer .eyebrow,
.case-hero .case-meta, .case-hero .case-meta span { color: var(--inverse-muted); }
main:focus { outline: none; }
/* Focus ring: wine on light surfaces, paper on dark surfaces (both >= 3:1). */
.bg-ink a:focus-visible, .bg-ink button:focus-visible,
.site-footer a:focus-visible, .site-footer button:focus-visible,
.case-hero a:focus-visible, .case-hero button:focus-visible {
  outline-color: var(--inverse-text);
}
.skip-link:focus, .skip-link:focus-visible { top: 1rem; outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--bg); }
/* Links inside text are underlined so color is not the only cue. */
main p a:not(.btn):not(.btn-ghost), main li a:not(.btn), main td a:not(.btn),
.faq-answer a, .form-success a, .portal-msg a, .portal-help a, .legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-ghost { display: inline-block; padding-top: 0.35rem; padding-bottom: 0.35rem; text-decoration: underline; text-underline-offset: 4px; }
.btn-ghost, .link-btn, .filter-btn, .nav-links a, .footer-grid a { min-height: 24px; }
.nav-links a { display: inline-block; padding: 0.4rem 0; }
.filter-btn { min-width: 24px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
/* Form fields: 3:1 borders, visible errors that do not rely on color */
.form-field input, .form-field textarea { border: 1px solid var(--line-strong); min-height: 44px; }
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border: 2px solid var(--error); }
.field-error { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--error); font-weight: 500; }
.field-error::before { content: "Error: "; font-weight: 500; }
.field-error[hidden] { display: none; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* FAQ accordion (buttons) */
.faq-q { margin: 0; font-size: inherit; line-height: inherit; font-family: inherit; letter-spacing: 0; }
.faq-trigger {
  width: 100%; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer;
  padding: 1.5rem 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.5rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px;
}
.faq-trigger::after { content: '+'; font-size: 1.5rem; color: var(--link); flex: none; transition: transform 0.25s var(--ease); }
.faq-trigger[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-panel[hidden] { display: none; }
.faq-panel { padding: 0 0 1.5rem; }
/* Reduced motion: no animation or movement anywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mark-sweep-rect { animation: none !important; }
}
.form-status { margin-top: 1rem; padding: 1rem 1.25rem; border-left: 3px solid var(--accent-line); background: var(--inset); font-size: 0.95rem; }
.form-status[hidden] { display: none; }
.link-list { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.link-list a { display: inline-block; padding: 0.4rem 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Theme toggle ---------- */
.nav-theme { display: none; }
.js .nav-theme { display: list-item; }
.nav-links .nav-theme { margin-left: 0.25rem; }
.theme-toggle {
  background: none; border: 0; color: var(--text); cursor: pointer; padding: 0;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
}
.theme-toggle:hover { color: var(--link); }
.theme-toggle svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.theme-toggle .ic { display: none; }
html:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .theme-toggle .ic-system,
html[data-theme-pref="light"] .theme-toggle .ic-light,
html[data-theme-pref="dark"] .theme-toggle .ic-dark { display: block; }
.theme-label { display: none; }
@media (max-width: 940px) {
  .nav-links .nav-theme { margin-left: 0; }
  .theme-toggle { width: auto; height: auto; min-height: 40px; justify-content: flex-start; }
  .theme-label { display: inline; }
}

/* ---------- Hero headline ----------
   Desktop and tablet: one sentence per line, sized to the column so neither line wraps
   (Unbounded 600: the longer line is about 15.4em wide). Mobile: natural wrap, balanced. */
.hero-copy { container-type: inline-size; }
.hero-title {
  font-size: clamp(1.5rem, 7.2vw, 2.25rem);
  line-height: 1.1;
  text-wrap: balance;
}
@media (min-width: 600px) {
  .hero-title {
    font-size: 2.25rem; /* fallback where container query units are unsupported */
    font-size: min(3.5rem, 6.3cqi);
    text-wrap: nowrap;
  }
  .hero-title .hl { display: block; white-space: nowrap; }
}

/* ---------- Loading skeletons ----------
   Only where content actually loads: portal projects and portfolio/case-study images.
   Shimmer is a soft diagonal sweep of theme surface colors, 1.5s loop. */
.js .project-media,
.js .case-hero-image,
.js .case-wide-image,
.js .gallery-media,
.skeleton-bar, .skeleton-pill {
  background-color: var(--inset);
  background-image: linear-gradient(115deg, transparent 30%, var(--card) 50%, transparent 70%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 120% 0;
  animation: dd-shimmer 1.5s linear infinite;
}
.js .project-media:has(img.is-loaded),
.js .case-hero-image:has(img.is-loaded),
.js .case-wide-image:has(img.is-loaded),
.js .gallery-media:has(img.is-loaded) { animation: none; background-image: none; }
.js .project-media img,
.js .case-hero-image img,
.js .case-wide-image img,
.js .gallery-media img { opacity: 0; transition: opacity 0.4s var(--ease); }
.js .project-media img.is-loaded,
.js .case-hero-image img.is-loaded,
.js .case-wide-image img.is-loaded,
.js .gallery-media img.is-loaded { opacity: 1; }
@keyframes dd-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* Portal skeleton cards mirror .portal-project so nothing shifts on swap */
.skeleton-card { pointer-events: none; }
.skeleton-card .skeleton-bar { height: 0.9rem; background-color: var(--inset); }
.skeleton-card .sk-title { height: 1.6rem; width: min(18rem, 60%); margin-top: 0.4rem; }
.skeleton-card .sk-eyebrow { width: 8rem; }
.skeleton-pill { width: 6rem; height: 1.9rem; background-color: var(--inset); }
.skeleton-card .sk-track { height: 10px; margin-top: 0.4rem; }
.skeleton-card .sk-lines { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.5rem; }
.skeleton-card .sk-lines .skeleton-bar:nth-child(2) { width: 85%; }
.skeleton-card .sk-lines .skeleton-bar:nth-child(3) { width: 70%; }
.skeleton-bar, .skeleton-pill { background-image: linear-gradient(115deg, transparent 30%, var(--card) 50%, transparent 70%); }

/* ---------- Tap and press feedback ---------- */
html { -webkit-tap-highlight-color: transparent; }
a, button, .btn, .filter-btn, .theme-toggle { -webkit-tap-highlight-color: transparent; }
/* scale on the clipped element itself, so the chamfer shape is kept */
.btn:active {
  transform: scale(0.97);
  transition: transform 0.12s ease-out, background 0.12s ease-out, color 0.12s ease-out;
}
.btn-primary:active { background: var(--accent-hover); }
.btn-secondary:active { background: var(--text); color: var(--bg); }
.project-card:active {
  transform: scale(0.985);
  box-shadow: 0 2px 8px var(--shadow);
  transition-duration: 0.12s;
}
.nav-links a, .footer-grid a, .filter-btn, .theme-toggle { transition: color 0.12s ease-out, background 0.12s ease-out, border-color 0.12s ease-out, transform 0.12s ease-out; }
.nav-links a:active, .footer-grid a:active { color: var(--link-hover); transform: scale(0.96); }
.filter-btn:active { transform: scale(0.96); background: var(--inset); }
.filter-btn.is-active:active { background: var(--accent-hover); }
.theme-toggle:active { transform: scale(0.88); color: var(--link-hover); }
.nav-links a:active, .theme-toggle:active { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar, .skeleton-pill,
  .js .project-media, .js .case-hero-image, .js .case-wide-image, .js .gallery-media { animation: none; background-image: none; }
  .js .project-media img, .js .case-hero-image img, .js .case-wide-image img, .js .gallery-media img { transition: none; }
  .btn:active, .project-card:active, .nav-links a:active, .footer-grid a:active,
  .filter-btn:active, .theme-toggle:active { transform: none; box-shadow: none; }
  .btn-primary:active { background: var(--accent-hover); }
  .project-card:active { background: var(--bg-alt); }
}

/* ---------- Community page ---------- */
.plain-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; max-width: 60ch; }
.plain-list li { padding-left: 1.25rem; position: relative; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; background: var(--accent-line); }
.check-group { border: 0; margin: 0 0 1.25rem; padding: 0; }
.check-group legend { padding: 0; font-weight: 500; margin-bottom: 0.6rem; }
.check-field { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start; margin-bottom: 0.5rem; }
.check-field input { width: 22px; height: 22px; margin: 0.15rem 0 0; accent-color: var(--accent); }
.check-field label { cursor: pointer; }
.check-field .field-error { grid-column: 2; grid-row: 2; margin-top: 0.3rem; }
.check-consent { margin: 1.5rem 0; }
.check-group .check-field label { margin: 0; }
.check-field input { grid-column: 1; grid-row: 1; }
.check-field label { grid-column: 2; grid-row: 1; }

/* ---------- Homepage community section ---------- */
#community-form { scroll-margin-top: 6rem; }
.community-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem 4rem; align-items: start; }
.community-copy h2 { margin-bottom: 1rem; }
.community-copy p { max-width: 60ch; }
.community-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.community-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.community-steps li { padding-top: 1.25rem; border-top: 2px solid var(--accent-line); }
.community-steps .step-num { font-family: var(--font-display); color: var(--text-muted); font-size: 0.9rem; display: block; margin-bottom: 0.4rem; }
.community-steps p { margin: 0; }
@media (max-width: 940px) { .community-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .community-actions .btn { width: 100%; justify-content: center; } }
.community-note { margin-top: 1.5rem; max-width: 60ch; }
.community-terms-link { margin: 1rem 0 0; font-size: 0.9rem; }
.community-terms-link a { text-decoration: underline; }
.contact-aside { align-self: start; }
.contact-aside p { margin-bottom: 1.5rem; }

/* ---------- Form confirmations: 18+ box, agreement boxes, consent line ---------- */
.form-confirm { margin: 1.5rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.form-confirm .check-field { margin: 0; }
.form-consent { margin: 0.25rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--text); }
.form-consent a, .check-field label a { text-decoration: underline; }

/* The above-the-fold priority image paints as soon as it arrives (no fade), so it never delays LCP */
.js img[fetchpriority="high"] { opacity: 1; transition: none; }
/* Service links inside the case-study meta line keep the meta color, underlined */
.case-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* FAQ: with JavaScript on, answers start collapsed from the first paint, so collapsing them later causes no layout shift */
.js .faq-panel { display: none; }
.js .faq-panel.is-open { display: block; }

/* Portal: long unbroken text from the database (names, update messages, links) wraps instead of overflowing */
.portal-project, .pp-head > div, .ms-body, .up { min-width: 0; }
.portal-project h2, .ms-title, .up-msg, .up a { overflow-wrap: anywhere; }

/* ---------- Studio (private admin dashboard) ---------- */
body[data-studio] [hidden] { display: none !important; }
.studio-hero { padding-bottom: 1.5rem; }
.studio-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; border-bottom: 1px solid var(--border); margin-top: 0.5rem; }
.studio-tabs a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.75rem 0; color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 500; }
.studio-tabs a:hover { border-bottom-color: var(--deco); }
.studio-tabs a[aria-current="page"] { border-bottom-color: var(--accent-line); }
.studio-tabs a:active { opacity: 0.7; }
.badge { background: var(--accent); color: var(--on-accent); font-size: 0.75rem; font-weight: 500; padding: 0.05rem 0.45rem; min-width: 1.4rem; text-align: center; }
.studio-status { min-height: 1.5rem; margin: 0.75rem 0 0; font-size: 0.95rem; }
.studio-status.is-error { border-left: 3px solid var(--text); padding-left: 0.75rem; font-weight: 500; }
.studio-sec h2 { margin-bottom: 1.5rem; }
.studio-sec h3 { margin: 2.5rem 0 1rem; font-size: 1.1rem; }
.studio-sec h3:first-of-type { margin-top: 0; }
.studio-sec h4 { margin: 1.25rem 0 0.5rem; font-size: 1rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1rem; }
.stat { background: var(--card); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.stat-num { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; overflow-wrap: anywhere; }
.stat-label { font-size: 0.85rem; color: var(--text-muted); }

.grid-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 0.75rem; }
.grid-tools .tool { display: flex; flex-direction: column; gap: 0.3rem; }
.grid-tools label { font-size: 0.85rem; font-weight: 500; }
.grid-tools input, .grid-tools select, .studio-sec select, .grid-table input, .grid-table select, .detail-panel input, .detail-panel select, .detail-panel textarea, .quote-layout input[type="number"], .quote-layout select, .studio-sec .form-field input, .studio-sec .form-field textarea {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: var(--field-bg);
  border: 1px solid var(--line-strong); padding: 0.45rem 0.6rem; min-height: 40px; max-width: 100%;
}
.grid-count { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.5rem; }
.grid-wrap { overflow-x: auto; border: 1px solid var(--border); background: var(--card); }
.grid-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 64rem; }
.price-table { min-width: 48rem; }
.grid-table th, .grid-table td { padding: 0.5rem 0.6rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.grid-table th { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.grid-table td input[type="text"], .grid-table td input[type="email"], .grid-table td input[type="date"], .grid-table td input[type="number"], .grid-table td select { width: 100%; min-width: 7rem; }
.grid-table td input[type="number"] { min-width: 5.5rem; }
.grid-table td input[type="checkbox"], .detail-panel input[type="checkbox"], .quote-layout input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }
.grid-empty td { color: var(--text-muted); }
.sort-btn { background: none; border: 0; padding: 0.2rem 0; font: inherit; color: var(--text-muted); cursor: pointer; min-height: 24px; }
.sort-btn:hover { color: var(--text); }
th[aria-sort="ascending"] .sort-btn::after { content: " (ascending)"; }
th[aria-sort="descending"] .sort-btn::after { content: " (descending)"; }
th[aria-sort="ascending"] .sort-btn, th[aria-sort="descending"] .sort-btn { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cell-actions, .cell-stack { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.grid-table .btn, .detail-panel .btn, .confirm-bar .btn, .inbox-actions .btn, .quote-ticket .btn { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.tag { font-size: 0.8rem; color: var(--text-muted); }

.confirm-bar { margin: 1rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--text); background: var(--inset); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.confirm-bar p { margin: 0 auto 0 0; flex: 1 1 18rem; font-weight: 500; overflow-wrap: anywhere; }

.detail-panel { margin: 1.5rem 0 2rem; padding: 1.5rem; background: var(--card); border: 1px solid var(--border); }
.detail-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.detail-head h3 { margin: 0 !important; overflow-wrap: anywhere; }
.detail-note { font-size: 0.9rem; color: var(--text-muted); margin: 0.75rem 0; }
.detail-group { border: 0; padding: 0; margin: 1.25rem 0 0; min-width: 0; }
.detail-group legend { font-weight: 500; padding: 0; margin-bottom: 0.5rem; }
.detail-panel .form-field { max-width: 32rem; }
.detail-panel .form-field textarea { width: 100%; min-height: 90px; }
.detail-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.detail-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.detail-row input[type="text"] { flex: 1 1 12rem; }
.detail-update { align-items: flex-start; border-left: 2px solid var(--border); padding-left: 0.75rem; }
.detail-update .up-msg { flex: 1 1 16rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.detail-link { font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; flex-basis: 100%; }
.detail-form { max-width: 32rem; margin-top: 1rem; }

.inbox-layout { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 70vh; overflow-y: auto; }
.inbox-item { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left; background: var(--card); color: var(--text); border: 1px solid var(--border); border-left: 4px solid transparent; padding: 0.75rem 1rem; font: inherit; cursor: pointer; min-width: 0; }
.inbox-item:active { opacity: 0.8; }
.inbox-item.is-unread { border-left-color: var(--accent-line); }
.inbox-item.is-unread .inbox-name { font-weight: 600; }
.inbox-item.is-selected { border-color: var(--text); border-left-color: var(--text); }
.inbox-name, .inbox-snippet { overflow-wrap: anywhere; }
.inbox-meta { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.inbox-snippet { font-size: 0.85rem; color: var(--text-muted); }
.inbox-empty { color: var(--text-muted); padding: 0.5rem 0; }
.inbox-detail { background: var(--card); border: 1px solid var(--border); padding: 1.5rem; min-width: 0; }
.inbox-detail h3 { margin-top: 0 !important; overflow-wrap: anywhere; }
.inbox-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; margin: 1rem 0; }
.inbox-fields dt { font-size: 0.85rem; color: var(--text-muted); }
.inbox-fields dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.inbox-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.inbox-actions a.btn { text-decoration: none; }

.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; align-items: start; }
.quote-group { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; }
.quote-group legend { font-family: var(--font-display); font-weight: 600; font-size: 1rem; padding: 0; margin-bottom: 0.6rem; }
.quote-group legend small { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.tier-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.5rem; }
.tier-pick { position: relative; display: flex; flex-direction: column; gap: 0.2rem; background: var(--card); border: 1px solid var(--border); padding: 0.75rem; cursor: pointer; min-width: 0; }
.tier-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tier-pick.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.tier-pick:focus-within, .tier-none:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.tier-pick:active { opacity: 0.85; }
.tier-pick .tn { font-weight: 500; font-size: 0.9rem; }
.tier-pick .td { font-size: 0.8rem; color: var(--text-muted); }
.tier-pick .tp { font-weight: 500; font-variant-numeric: tabular-nums; }
.tier-none { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem; cursor: pointer; font-size: 0.9rem; }
.addons { border-top: 1px solid var(--border); }
.addon-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.addon-row label { min-width: 0; cursor: pointer; }
.addon-row .an { font-weight: 500; display: block; }
.addon-row .ad { font-size: 0.8rem; color: var(--text-muted); display: block; }
.addon-row .ap { font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.addon-row .qty { width: 4.5rem; }
.quote-adjust { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem 1.5rem; align-items: end; }
.quote-adjust .form-field { margin: 0; }
.quote-adjust .form-field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; }
.check-inline { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; min-height: 40px; }
.quote-prices { margin-top: 1rem; }
.quote-prices summary { cursor: pointer; font-weight: 500; padding: 0.5rem 0; }
.quote-ticket { position: sticky; top: 1rem; background: var(--card); padding: 1.5rem; min-width: 0; }
.quote-ticket h3 { margin: 0 0 1rem !important; }
.quote-ticket h3 small { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.quote-ticket .lines { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.quote-ticket .lines li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); font-variant-numeric: tabular-nums; }
.quote-ticket .lines li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.quote-ticket .lines .empty { color: var(--text-muted); border: 0; }
.quote-ticket .tot { margin-top: 0.9rem; display: grid; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.quote-ticket .tot > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.quote-ticket .tot .muted { color: var(--text-muted); font-size: 0.85rem; }
.quote-ticket .tot .big { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin: 0.3rem 0; }
.quote-ticket .monthly { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.quote-ticket .form-field { margin: 1rem 0 0; }
.quote-ticket .form-field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.3rem; }
.quote-ticket .form-field select { width: 100%; }
.quote-out { width: 100%; min-height: 9rem; margin-top: 0.75rem; font: 0.8rem/1.45 ui-monospace, Menlo, Consolas, monospace; background: var(--field-bg); color: var(--text); border: 1px solid var(--line-strong); padding: 0.5rem; }
.quote-saved { margin-top: 1rem; }
.quote-saved h3 { font-size: 1rem; margin: 0 0 0.5rem !important; }

.connect-panel { background: var(--card); padding: 1.75rem; max-width: 40rem; }
.connect-panel h3 { margin-top: 0 !important; }
.analytics-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.analytics-top .grid-table { min-width: 0; }
.key-box { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0 0.25rem; }
.key-text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.08em; background: var(--inset); border: 1px solid var(--line-strong); padding: 0.6rem 0.8rem; overflow-wrap: anywhere; user-select: all; flex: 1 1 14rem; min-width: 0; }
.key-note { display: block; font-size: 0.85rem; color: var(--text-muted); min-height: 1.3rem; margin-bottom: 0.75rem; }
#studio-mfa .form-panel, #settings-root .form-panel { margin-bottom: 1.5rem; }

@media (max-width: 900px) {
  .quote-layout, .inbox-layout, .analytics-cols { grid-template-columns: minmax(0, 1fr); }
  .quote-ticket { position: static; }
  .inbox-list { max-height: 22rem; }
}
/* Phones: each spreadsheet row becomes a labelled card. */
@media (max-width: 900px) {
  .grid-wrap { border: 0; background: transparent; overflow: visible; }
  .grid-table, .grid-table tbody, .grid-table tr, .grid-table td { display: block; width: 100%; min-width: 0; }
  .grid-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .grid-table tr { background: var(--card); border: 1px solid var(--border); padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
  .grid-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.5rem; align-items: center; border: 0; padding: 0.35rem 0; }
  .grid-table td::before { content: attr(data-label); font-size: 0.8rem; color: var(--text-muted); }
  .grid-table td[data-label="Actions"]::before { content: ""; }
  .grid-table td input[type="checkbox"] { justify-self: start; }
  .grid-empty td { display: block; }
  .grid-empty td::before { content: none; }
}
@media (max-width: 480px) {
  .grid-table td { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .addon-row { grid-template-columns: auto minmax(0, 1fr); }
  .addon-row .ap, .addon-row .qty { grid-column: 2; }
}

.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tier-none input, .check-inline input, .addon-row input[type="checkbox"] { accent-color: var(--accent); }
.grid-table { font-size: 0.85rem; }
.grid-table td input[type="text"], .grid-table td input[type="email"], .grid-table td input[type="date"], .grid-table td select { min-width: 5.5rem; padding: 0.4rem 0.45rem; }
.grid-table td input[type="number"] { min-width: 4.5rem; }

/* Studio: package builder */
.quote-ticket .tier-cards { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; }
.quote-ticket .tier-card { background: var(--inset); border-left: 3px solid var(--accent-line); padding: 0.75rem 0.9rem; min-width: 0; }
.quote-ticket .tier-card h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.tier-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.2rem 0.75rem; margin: 0; font-size: 0.85rem; }
.tier-facts dt { color: var(--text-muted); }
.tier-facts dd { margin: 0; overflow-wrap: anywhere; }
.quote-ticket .lines .lines-head { display: block; border: 0; padding: 0.7rem 0 0.15rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.quote-ticket .lines .is-free span:last-child { color: var(--text-muted); }
.suggest { margin-top: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.suggest p { margin: 0; font-size: 0.9rem; font-weight: 500; flex: 1 1 14rem; }
.quick-start .quick-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.quick-start .quick-label { min-width: 5rem; font-weight: 500; font-size: 0.9rem; }
.quick-start .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.addon-row .ap { white-space: normal; text-align: right; max-width: 11rem; }
.addon-row .ap-tier { color: var(--text-muted); }
.addon-row .ap.is-included { color: var(--text-muted); font-style: normal; }
.quote-ticket .tot .big span:last-child { overflow-wrap: anywhere; }
.saved-sum { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.price-panel { margin-bottom: 2rem; }
.price-panel h3 { margin: 0 0 0.5rem !important; }
.price-panel > p { max-width: 70ch; }

.quote-ticket .tot .big { flex-wrap: wrap; align-items: baseline; font-size: 1.25rem; }
.quote-ticket .tot .big span:last-child { margin-left: auto; white-space: nowrap; }

/* Services pages: portfolio link before the final call to action */
.portfolio-section { padding-top: 0; }
.portfolio-link { text-align: center; }
.portfolio-link p { margin: 0 auto 1rem; }

/* Homepage: why work with us */
.why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.why-card.service-teaser { background: var(--card-on-alt); display: flex; flex-direction: column; }
.why-card .why-num { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--text); margin-bottom: 0.6rem; }
.why-card h3 { margin-bottom: 0.5rem; }
.why-card p { margin-bottom: 0; }
.why-cta { text-align: center; margin-top: 2.5rem; }
.why-cta p { margin: 0 auto 1.25rem; }
@media (max-width: 760px) { .why-list { grid-template-columns: minmax(0, 1fr); } }

.studio-note { font-size: 0.85rem; color: var(--text-muted); margin: -0.75rem 0 1.25rem; }

/* ---------- Mobile and zoom robustness ----------
   Text zoom changes rem but not px media queries, so the nav and the footer grid also
   switch on a container width in rem: the more the text grows, the earlier they collapse. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem; /* sticky header never covers an anchor target */
}
@container (max-width: 58.75rem) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1rem var(--gutter) 1.5rem;
    gap: 1rem;
  }
  .nav-links .nav-login {
    margin-left: 0;
    padding-left: 0;
    padding-top: 1rem;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .nav-links .nav-theme { margin-left: 0; }
  .theme-toggle { width: auto; height: auto; min-height: 44px; justify-content: flex-start; }
  .theme-label { display: inline; }
}
@container (max-width: 40rem) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Header: wrap instead of overflowing, wordmark may break onto two lines at huge text */
.nav-bar { flex-wrap: wrap; gap: 0.5rem 1rem; padding-top: 12px; padding-bottom: 12px; }
.wordmark { white-space: normal; flex-wrap: wrap; min-width: 0; }
@media (pointer: coarse) { .wordmark { min-height: 44px; } }
.nav-links { flex-wrap: wrap; gap: 0.25rem 2rem; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.footer-grid > *, .footer-bottom > * { min-width: 0; }
.footer-grid a, .footer-bottom a { overflow-wrap: anywhere; }
/* Long words, emails and URLs wrap instead of pushing the page wider */
h1, h2, h3, h4, p, li, dd, label, .field-error, .lead { overflow-wrap: break-word; }
.legal, .faq-answer, .form-success, .portal-msg { overflow-wrap: anywhere; }
/* Buttons and tier cards hold text 30 to 40 percent longer (translation) and large text */
.btn, .tier-card .btn { white-space: normal; text-align: center; justify-content: center; }
.tier-card .btn { min-height: 44px; }
.btn-ghost, .filter-btn { min-height: 44px; display: inline-flex; align-items: center; }
/* Tap targets: 44px on touch and small screens */
@media (pointer: coarse), (max-width: 940px) {
  .footer-grid a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .footer-grid ul { gap: 0; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .nav-links.is-open a { display: flex; align-items: center; min-height: 44px; }
  .check-field { min-height: 44px; }
  .check-field input { width: 24px; height: 24px; margin: 0.35rem 0 0; }
  .check-field label { padding: 0.35rem 0; }
}
@container (max-width: 58.75rem) {
  .nav-links.is-open a { display: flex; align-items: center; min-height: 44px; }
}

/* Layout collapses on the container width in rem (same thresholds as the px media queries
   above at normal size), so text zoom stacks columns instead of squeezing them. */
body:not([data-studio]):not([data-portal]) main { container-type: inline-size; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.grid-3 { --cols: 3; }
.grid-4 { --cols: 4; }
.grid > *, .hero-grid > *, .community-grid > *, .process-list > *, .case-gallery > * { min-width: 0; }
.eyebrow, .case-meta, .tier-badge, .invite-badge { overflow-wrap: anywhere; }
@container (max-width: 60rem) {
  .grid-3, .grid-4 { --cols: 2; }
}
@container (max-width: 58.75rem) {
  .process-list, .community-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 56.25rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 47.5rem) {
  .why-list { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 40rem) {
  .grid-2, .grid-3, .grid-4 { --cols: 1; }
  .case-gallery { grid-template-columns: minmax(0, 1fr); }
}
/* Side padding yields to the screen width, so big text keeps a readable measure inside cards */
.form-panel, .tier-card { padding-left: min(2.25rem, 9vw); padding-right: min(2.25rem, 9vw); }
.card { padding-left: min(2rem, 8vw); padding-right: min(2rem, 8vw); }
.btn { padding-left: min(1.6rem, 6vw); padding-right: min(1.6rem, 6vw); }
.btn-ghost { padding-left: 0; padding-right: 0; }
.faq-trigger { overflow-wrap: anywhere; }
/* Extreme text sizes (400 percent text only): break inside a word before the page scrolls sideways */
.wordmark, .btn, .btn-ghost, .filter-btn, .check-field label, legend, label,
h1, h2, h3, h4, .service-teaser, .process-step { overflow-wrap: anywhere; }
.service-teaser { padding-left: min(1.5rem, 5vw); padding-right: min(1.75rem, 6vw); }
.skip-link { max-width: calc(100vw - 2rem); }
.skip-link { overflow-wrap: anywhere; }
.invite-panel { padding-left: min(2rem, 7vw); padding-right: min(2rem, 7vw); }
.invite-panel > * { min-width: 0; }
@media (max-width: 640px) { .invite-panel { padding-left: min(1.25rem, 6vw); padding-right: min(1.25rem, 6vw); } }
.invite-panel > * { max-width: 100%; }
@media (pointer: coarse), (max-width: 940px) {
  .footer-grid a, .footer-bottom a, .nav-links a, .btn-ghost { min-width: 44px; }
  .eyebrow a { display: inline-block; padding: 0.75rem 0.25rem; margin: -0.75rem -0.25rem; }
}
.skip-link:not(:focus):not(:focus-visible) { clip-path: inset(50%); }
/* Narrow phones: keep wordmark and menu button on one row (the header is sticky, so a second row costs screen height) */
@media (max-width: 359px) {
  .nav-bar { column-gap: 0.5rem; }
  .wordmark { font-size: 0.85rem; }
}
/* Studio: the tab bar lives in the page, so the header scrolls away instead of covering tabs and links on phones */
body[data-studio] .site-header { position: static; }

/* ---------- Leads (Studio) and the public "let's talk" form ---------- */
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  background: var(--field-bg);
  color: var(--text);
  min-height: 44px;
}
.form-hint { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); }
.form-hint.is-error { color: var(--error); font-weight: 500; }
.talk-panel { max-width: 640px; }
.talk-panel .check-group { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.talk-panel .form-status.is-error { border-left-color: var(--text); font-weight: 500; }
.talk-panel .form-success p { margin: 0 0 1rem; }

.lead-chips, .lead-quick { margin-bottom: 1rem; }
.lead-quick { align-items: center; }
.lead-test { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; min-height: 44px; cursor: pointer; }
.lead-test input { width: 22px; height: 22px; accent-color: var(--accent); }
.lead-es { display: inline-block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; padding: 0.05rem 0.4rem; border: 1px solid var(--line-strong); color: var(--text-muted); vertical-align: middle; }
.lead-open { text-align: left; min-height: 24px; overflow-wrap: anywhere; }
.lead-more { margin-top: 1rem; }

.lead-dialog {
  background: var(--card); color: var(--text); border: 0; padding: 1.5rem;
  width: calc(100% - 2rem); max-width: 46rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow-y: auto; overscroll-behavior: contain;
}
.lead-dialog::backdrop { background: color-mix(in srgb, var(--inverse-bg) 65%, transparent); }
.lead-dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.lead-dlg-head h2 { margin: 0; overflow-wrap: anywhere; }
.lead-dlg-head h2:focus { outline: none; }
.lead-dialog .form-field { max-width: none; margin-bottom: 1rem; }
.lead-dialog .form-field input, .lead-dialog .form-field select, .lead-dialog .form-field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--field-bg);
  border: 1px solid var(--line-strong); padding: 0.6rem 0.75rem; min-height: 44px;
}
.lead-dialog .form-field textarea { min-height: 5rem; resize: vertical; }
.lead-dialog .btn { padding: 0.7rem 1.1rem; font-size: 0.95rem; min-height: 44px; }
.lead-dialog .check-field { margin: 0 0 0.5rem; }
.lead-close { flex: none; }
.lead-live { min-height: 1.5rem; }
.lead-facts .detail-list li { overflow-wrap: anywhere; }
.lead-log { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.lead-log-item { display: flex; flex-direction: column; gap: 0.1rem; border-left: 2px solid var(--border); padding-left: 0.75rem; }
.lead-log-time { font-size: 0.8rem; color: var(--text-muted); }
.lead-log-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.lead-log-empty { color: var(--text-muted); }
.lead-danger { margin-top: 1.5rem; }
.lead-result h3 { margin: 0 0 0.75rem; }

.lead-fab {
  position: fixed; z-index: 90; min-height: 48px; padding: 0.8rem 1.4rem; font-size: 1rem;
  right: calc(1rem + env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom));
}
body[data-studio] .site-footer { padding-bottom: 6rem; }

@media (max-width: 640px) {
  .lead-sheet { margin: auto 0 0; width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .lead-detail { margin: auto 0 0; width: 100%; max-width: none; max-height: 94vh; max-height: 94dvh; }
}
@media (prefers-reduced-motion: no-preference) {
  .lead-dialog[open] { animation: lead-in 0.18s ease-out; }
  @keyframes lead-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
}