/* ==========================================================================
   Sudur Tech public site — editorial design system (compiled CSS, no Node).
   Paper surface, ink text, hairline 1px borders, square corners, Fraunces
   display + Inter body. Dark bands stay charcoal (--ink) by design and do NOT
   follow the CMS brand colour. Colours are runtime-tuned via the inline
   :root block emitted from CMS settings (ThemeStyle port).
   ========================================================================== */

* { box-sizing: border-box; border-color: var(--line, #e5e5e9); }

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

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink, #111113);
  background: var(--surface, #f9f9fb);
}

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

h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 500; line-height: 1.15; margin: 0; }

a { color: inherit; text-decoration: none; }

.container-x { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

.section { padding: 72px 0; }
.section-tight { padding: 36px 0; }

/* Homepage rhythm: the home page carries only the five-part narrative, so its
   sections are tightened a notch to read as one continuous scan. Interior
   pages keep the measured 72/104px rhythm above. */
.page-home .section { padding: 52px 0; }
.page-home .section-tight { padding: 28px 0; }
.page-home .hero { padding-top: 20px; }
@media (min-width: 768px) { .page-home .section { padding: 72px 0; } }
.section-tinted { background: #fff; border-top: 1px solid var(--line, #e5e5e9); border-bottom: 1px solid var(--line, #e5e5e9); }

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

/* ------------------------------------------------------------------ type */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brand, #1e3a8a); margin: 0 0 14px;
}

.display { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.02em; margin-bottom: 18px; }
.section-heading { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 12px; }
.heading-highlight { color: var(--brand, #1e3a8a); font-style: italic; }
.section-sub { color: var(--muted, #5a5c64); max-width: 640px; margin: 0 0 22px; }
.feature-title { font-size: 1.05rem; margin-bottom: 6px; }
.feature-text { color: var(--muted, #5a5c64); font-size: 14px; margin: 0; }
.fine-print { color: var(--muted, #5a5c64); font-size: 12.5px; margin-top: 14px; }
.fine-light { color: rgb(255 255 255 / 0.6); }

/* ------------------------------------------------------------------ bands */

.band { background: var(--ink, #111113); color: #fff; padding: 88px 0; }
.band-inner { max-width: 900px; margin: 0 auto; padding: 0 20px; text-align: center; }
.band-inner .btn-row { justify-content: center; gap: 16px; margin-top: 28px; }
/* Dark-band rescues: the shared .eyebrow/.section-sub colours are tuned for
   paper backgrounds and fail WCAG on charcoal (brand blue 1.82:1, muted
   2.83:1). White mixes restore legibility without touching the light pages. */
.band .eyebrow { color: rgb(255 255 255 / 0.72); }
.band .section-sub { color: rgb(255 255 255 / 0.78); }
.band .eyebrow-light { color: rgb(255 255 255 / 0.6); }
.band-statement { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.2; margin: 0 0 16px; }
.band-sub { color: rgb(255 255 255 / 0.7); margin: 0 0 24px; }
.band-phone { margin-top: 18px; color: rgb(255 255 255 / 0.75); }
.band-phone a { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
  border: 1px solid var(--brand, #1e3a8a); background: var(--brand, #1e3a8a);
  color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--brand-dark, #172a68); border-color: var(--brand-dark, #172a68); }
.btn-ghost { background: transparent; color: var(--ink, #111113); border-color: var(--ink, #111113); }
.btn-ghost:hover { background: var(--ink, #111113); color: #fff; }
.band .btn { background: #fff; border-color: #fff; color: var(--ink, #111113); }
.band .btn:hover { background: transparent; color: #fff; }
.band .btn-ghost { background: transparent; border-color: rgb(255 255 255 / 0.5); color: #fff; }
.band .btn-ghost:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ------------------------------------------------------------------ header */

.topbar { background: var(--ink, #111113); color: rgb(255 255 255 / 0.8); font-size: 12.5px; padding: 8px 20px; text-align: center; }
.topbar a { color: #fff; font-weight: 600; /* invisible touch-area growth: the 12.5px inline link measured 86x15 (WCAG 2.5.8 wants 24x24); padding grows the hit box to ~31px while negative margins keep the line box and visual position unchanged */ display: inline-block; padding: 8px 10px; margin: -8px -10px -8px 0; }

.site-header { background: var(--surface, #f9f9fb); border-bottom: 1px solid var(--line, #e5e5e9); position: sticky; top: 0; z-index: 40; }
.header-inner { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; }
.site-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; }
/* Header brand logo. Both variants are sized together: `.site-logo-img` is the
   slot used once `brand.logo` is set, `.site-logo-mark` is the letter-mark
   shown until then — sizing only one would leave the visible brand unchanged.
   `width: auto` + `object-fit: contain` keep an SVG/image at its own aspect
   ratio, and the flex parent centres it against the nav links. */
.site-logo-img { height: 44px; max-height: 48px; width: auto; display: block; object-fit: contain; }
.site-logo-mark { display: grid; place-items: center; width: 44px; height: 44px; background: var(--brand, #1e3a8a); color: #fff; border-radius: 11px; font-weight: 800; flex: 0 0 auto; }
/* Wordmark sits with the nav links (16.8px) rather than noticeably under
   them now that the mark next to it is 44px tall. */
.site-logo-name { font-size: 17px; }
/* Belt-and-braces: a header nav list must never render bullets or markers even
   if an older/partial stylesheet is in play. The .nav-list rule below is the
   real styling; this just guarantees the structural default. */
header ul, header ol { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-item { display: flex; align-items: center; position: relative; }
.primary-nav { display: none; margin-left: auto; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--muted, #5a5c64); }
.nav-link:hover { color: var(--brand, #1e3a8a); }
@media (min-width: 768px) { .primary-nav { display: block; } }

/* ------------------------------------------------------------------ hero */

.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-img, .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line, #e5e5e9); }
.img-placeholder { display: block; background: var(--brand-soft, #f0f2f6); }
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line, #e5e5e9); border: 1px solid var(--line, #e5e5e9); margin-top: 48px; }
.hero-stat { background: var(--surface, #f9f9fb); padding: 18px; }
.hero-stat-value { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; }
.hero-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted, #5a5c64); }
.hero-card { border: 1px solid var(--line, #e5e5e9); background: #fff; padding: 16px; margin-top: -60px; margin-left: 20px; position: relative; width: fit-content; }
.hero-card-title { font-weight: 600; margin: 0; font-size: 14px; }
.hero-card-text { margin: 4px 0 0; font-size: 13px; color: var(--muted, #5a5c64); }

/* ------------------------------------------------------------------ lists */

.index-list { border-top: 1px solid var(--line, #e5e5e9); }
.index-row, .post-row { display: grid; grid-template-columns: 56px 1fr; gap: 8px 18px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--line, #e5e5e9); }
@media (min-width: 768px) { .index-row, .post-row { grid-template-columns: 56px 1fr auto; } }
.index-row:hover, .post-row:hover { background: #fff; }
.index-number { font-family: 'Fraunces', Georgia, serif; color: var(--brand, #1e3a8a); font-size: 1.1rem; }
.index-main { display: grid; gap: 4px; }
.index-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; }
.index-text { color: var(--muted, #5a5c64); font-size: 13.5px; }
.index-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted, #5a5c64); }

.feature-grid, .card-grid-3 { display: grid; gap: 1px; background: var(--line, #e5e5e9); border: 1px solid var(--line, #e5e5e9); }
@media (min-width: 768px) { .feature-grid, .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.feature-cell, .service-card, .price-card { background: var(--surface, #f9f9fb); padding: 26px; display: block; color: inherit; }
.feature-icon { display: inline-block; font-size: 1.2rem; margin-bottom: 12px; color: var(--brand, #1e3a8a); }

/* ------------------------------------------------------------------ splits */

.text-image { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .text-image { grid-template-columns: 1fr 1fr; } .text-image.is-reversed > .text-image-copy { order: 2; } }
.text-image-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line, #e5e5e9); }
.check-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 26px; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--brand, #1e3a8a); font-weight: 700; }

.process-list { border-top: 1px solid var(--line, #e5e5e9); }
.process-row { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 26px 4px; border-bottom: 1px solid var(--line, #e5e5e9); }

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: rgb(255 255 255 / 0.15); border: 1px solid rgb(255 255 255 / 0.15); }
.band .stats-row { margin-top: 12px; }
.section-tinted .stats-row { background: var(--line, #e5e5e9); border-color: var(--line, #e5e5e9); }
.stat-cell { padding: 30px 22px; text-align: center; }
.band .stat-cell { background: var(--ink, #111113); color: #fff; }
.section-tinted .stat-cell { background: #fff; }
.stat-number { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 2.4rem; }
.stat-suffix { font-size: 1.2rem; color: var(--brand, #1e3a8a); }
.band .stat-suffix { color: rgb(255 255 255 / 0.7); }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted, #5a5c64); }
.band .stat-label { color: rgb(255 255 255 / 0.6); }

/* ------------------------------------------------------------------ quotes/team/cases */

.quote-columns { display: grid; gap: 1px; background: var(--line, #e5e5e9); border: 1px solid var(--line, #e5e5e9); }
@media (min-width: 768px) { .quote-columns { grid-template-columns: repeat(3, 1fr); } }
/* Orphan-free variants: the container background is the hairline colour, so a
   missing cell in the last row reads as a grey void. Even counts that don't
   fill a 3-across row go 2-up; a lone item spans the width; and any single
   orphan left in a 3-column row (e.g. 7 items) spans the full row instead of
   leaving two grey tracks beside it. */
@media (min-width: 768px) {
  .quote-columns.is-two { grid-template-columns: repeat(2, 1fr); }
  .quote-columns.is-one { grid-template-columns: 1fr; }
  .quote-columns:not(.is-two):not(.is-one) > .quote-col:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
.quote-col { background: var(--surface, #f9f9fb); padding: 26px; margin: 0; }
.quote-text { font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; line-height: 1.5; margin: 0 0 16px; }
.quote-by { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.quote-stars { color: var(--brand, #1e3a8a); margin: 10px 0 0; font-size: 13px; }

.team-grid { display: grid; gap: 1px; background: var(--line, #e5e5e9); border: 1px solid var(--line, #e5e5e9); }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
/* Exactly four members: a centred 2x2 instead of 3 + a stranded fourth card
   (matches the testimonials grid's orphan-free rule). */
@media (min-width: 768px) {
  .team-grid.is-two { grid-template-columns: repeat(2, 1fr); max-width: 56rem; margin-left: auto; margin-right: auto; }
}
.team-cell { background: var(--surface, #f9f9fb); padding: 22px; }
.team-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line, #e5e5e9); margin-bottom: 14px; }
/* CTA cell that completes a services card grid (fills the last empty cell). */
.card-grid-3 > .card-cta-cell { background: var(--surface, #f9f9fb); display: flex; align-items: center; justify-content: center; padding: 26px; text-align: center; }
.card-cta-cell .btn-row { margin: 0; justify-content: center; }

.case-list { display: grid; gap: 56px; }
.case-row { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .case-row { grid-template-columns: 1fr 1fr; } .case-row.is-flipped > .case-media { order: 2; } }
.case-media img, .case-media .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line, #e5e5e9); }
.case-result { color: var(--brand, #1e3a8a); font-weight: 600; font-size: 14px; }
.tick { color: var(--brand, #1e3a8a); }
.cross { color: var(--muted, #5a5c64); }

/* ------------------------------------------------------------------ gallery */

.gallery-grid { display: grid; gap: 14px; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } .gallery-item.is-lead { grid-column: span 2; grid-row: span 2; } }
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border: 1px solid var(--line, #e5e5e9); }
.gallery-item figcaption { font-size: 12.5px; color: var(--muted, #5a5c64); margin-top: 8px; }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--line, #e5e5e9); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; }
.compare-table th, .compare-table td { padding: 12px 16px; border-bottom: 1px solid var(--line, #e5e5e9); text-align: left; }
.compare-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #5a5c64); background: var(--brand-soft, #f0f2f6); }
.compare-table .is-highlight { background: rgb(var(--brand-rgb, 30 58 138) / 0.06); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--brand, #1e3a8a); color: #fff; }

/* ------------------------------------------------------------------ forms */

.lead-form-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .lead-form-grid { grid-template-columns: 1fr 1fr; } }
.lead-form { display: grid; gap: 4px; background: #fff; border: 1px solid var(--line, #e5e5e9); padding: 26px; }
.field { margin-bottom: 12px; }
.field-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.input { width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; border: 1px solid var(--line, #e5e5e9); background: #fff; }
.input:focus-visible { outline: 2px solid var(--brand, #1e3a8a); outline-offset: 1px; }
.hp-field { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.form-status { font-size: 13.5px; margin-top: 10px; }
.form-status.is-ok { color: #047857; }
.form-status.is-err { color: #b91c1c; }
.contact-grid { display: grid; gap: 1px; background: var(--line, #e5e5e9); border: 1px solid var(--line, #e5e5e9); }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { background: var(--surface, #f9f9fb); padding: 24px; display: block; color: inherit; }
.map-embed { margin-top: 20px; border: 1px solid var(--line, #e5e5e9); min-height: 120px; }

/* ------------------------------------------------------------------ prose */

.prose { color: var(--muted, #5a5c64); line-height: 1.75; }
.prose > * + * { margin-top: 16px; }
.prose h2 { color: var(--ink, #111113); margin-top: 36px; font-size: 1.4rem; }
.prose h3 { color: var(--ink, #111113); margin-top: 28px; }
.prose strong { color: var(--ink, #111113); }
.prose a { color: var(--brand, #1e3a8a); text-decoration: underline; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 24px; margin-top: 8px; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--brand, #1e3a8a); }
.prose blockquote { border-left: 2px solid var(--brand, #1e3a8a); padding-left: 20px; font-style: italic; color: var(--ink, #111113); }
.prose img { border: 1px solid var(--line, #e5e5e9); margin-top: 20px; }

/* ------------------------------------------------------------------ detail pages */

.detail-header { padding-bottom: 0; }
.detail-banner { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border: 1px solid var(--line, #e5e5e9); margin-top: 30px; }
.detail-meta { font-size: 14px; color: var(--muted, #5a5c64); }
.detail-meta strong { color: var(--ink, #111113); }
.post-body { margin-top: 10px; }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--ink, #111113); color: rgb(255 255 255 / 0.75); margin-top: 40px; }
.footer-inner { display: grid; gap: 36px; padding: 64px 20px 28px; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-title { color: #fff; font-weight: 600; font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; margin: 0 0 12px; }
.footer-text { font-size: 13.5px; margin: 0; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13.5px; }
.footer-links a:hover { color: #fff; }
.footer-badge { display: inline-block; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 6px; padding: 3px 10px; font-size: 11.5px; margin: 0 6px 6px 0; }
.footer-social { display: flex; gap: 14px; margin-top: 16px; font-size: 12.5px; text-transform: capitalize; }
/* The 12.5px text alone is only ~21px tall, under the 24px minimum touch
   target (WCAG 2.5.8) the visual audit enforces. inline-flex + min-height
   grows the clickable box without changing the text size or position. */
.footer-social a { display: inline-flex; align-items: center; min-height: 26px; }
.footer-legal { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / 0.14); padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.muted { color: var(--muted, #5a5c64); }
.site-footer .muted { color: rgb(255 255 255 / 0.5); }

/* ------------------------------------------------------------------ floating */

/* Fixed stack in the bottom-right corner; the safe-area insets keep it clear
   of the home indicator and rounded corners on notched phones. z-index 50 sits
   above page content and below the open drawer (`.site-header` is lifted to 60
   by `body.nav-open`). */
.floating-actions {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid; gap: 8px; z-index: 50;
}
.float-btn { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand, #1e3a8a); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
/* WhatsApp float: icon-only, so the old 11px "WhatsApp" label (which the 52px
   circle clipped) is gone — the glyph carries the brand and the words live in
   the anchor's aria-label. The deeper #11843f existed for white-on-green TEXT
   contrast (4.78:1); with no text in the button that constraint no longer
   applies, so the official #25D366 is used. `overflow: hidden` guarantees no
   stray text or pseudo-content can leak outside the circle. */
.float-wa {
  background: #25d366; color: #fff; overflow: hidden;
  box-shadow: 0 6px 16px rgb(17 17 19 / 0.22);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.float-wa svg { width: 28px; height: 28px; fill: none; stroke: currentColor; }
.float-wa:hover,
.float-wa:focus-visible {
  background: #1ebe5b;
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgb(17 17 19 / 0.28);
}

/* ------------------------------------------------------------------ announce */

.announce { background: var(--brand-soft, #f0f2f6); border-bottom: 1px solid var(--line, #e5e5e9); text-align: center; font-size: 13px; padding: 9px 16px; }
.announce a { color: var(--brand, #1e3a8a); font-weight: 600; }

/* ------------------------------------------------------------------ logos */

.logos-title { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted, #5a5c64); margin-bottom: 18px; }
/* Partner strip: a calm centred flex row, not a bordered table. Generous
   horizontal gap and nowrap words (they wrap cleanly between items instead
   of stacking inside a cell). */
.logos-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 52px; background: transparent; border: 0; }
.logo-cell { background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 0; text-align: center; }
/* Client/partner logos show in their original brand colours: no grayscale
   filter and full opacity, so nothing is washed out. */
.logo-cell img { max-height: 36px; width: auto; filter: none; opacity: 1; }
.logo-word { font-family: 'Fraunces', Georgia, serif; color: var(--muted, #5a5c64); white-space: nowrap; }

/* ------------------------------------------------------------------ faq */

.faq-list { border-top: 1px solid var(--line, #e5e5e9); }
.faq-row { border-bottom: 1px solid var(--line, #e5e5e9); }
.faq-row summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 18px 4px; list-style: none; }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after { content: '+'; float: right; color: var(--brand, #1e3a8a); font-weight: 700; }
.faq-row[open] summary::after { content: '–'; }
.faq-answer { padding: 0 4px 18px; color: var(--muted, #5a5c64); }

/* ------------------------------------------------------------------ rich centered */

.rich-text.is-centered { text-align: center; }
.rich-text.is-centered .prose { text-align: left; }

/* ------------------------------------------------------------------
   Side-by-side audit additions (session 9): components whose classes
   were rendered by the PHP templates but had no rules above. Ported
   from the Node originals' computed intent (nav dropdown panel,
   service icon tile, pricing feature card, hero/text-image wrappers).
   ------------------------------------------------------------------ */

/* Layout shell: keep short pages (404, legal) from collapsing. */
.site-main { min-height: 60vh; }

/* Hero wrappers. */
.hero { padding-top: 36px; }
.hero-copy { display: grid; justify-items: start; }
.hero-media { position: relative; }
.hero-media > img, .hero-media > .img-placeholder
  { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line, #e5e5e9); }

/* Cards. `.card` is the standalone white panel (contact form wrapper);
   pricing cells need flex so the CTA aligns to the bottom like the
   Node Project/Retainer cards. */
.card { background: #fff; border: 1px solid var(--line, #e5e5e9); padding: 26px; }
.card-grid-3 > .price-card { display: flex; flex-direction: column; }
.price-card .check-list { margin-bottom: 6px; }
.price-card .btn { margin-top: auto; align-self: flex-start; }

/* Pricing figures: hairline top rule + baseline pair, Node parity. */
.price-line { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 12px; padding-top: 16px; border-top: 1px solid var(--line, #e5e5e9); }
.price-line .stat-number { font-size: 2.1rem; letter-spacing: -0.02em; color: var(--ink, #111113); }
.price-line .stat-suffix { font-size: 13.5px; color: var(--muted, #5a5c64); }

/* Featured plan: brand-tinted card + dark chip (Node: brand-50 bg,
   "Most popular" ink chip). */
.price-card { position: relative; }
.is-featured { background: var(--brand-soft, #f0f2f6); }
.pill-new { background: var(--ink, #111113); color: #fff; }
.price-card .pill { position: absolute; top: 20px; right: 20px; }

/* Service icon tile (Node: 48px bordered square, brand glyph). */
.service-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line, #e5e5e9); margin-bottom: 14px; color: var(--brand, #1e3a8a); font-size: 1.15rem; }
.service-icon svg, .feature-icon svg { width: 20px; height: 20px; display: block; }
.feature-icon svg { width: 22px; height: 22px; }

/* Service-card internals: title and excerpt stack as blocks (the generic
   .index-title/.index-text spans are inline elsewhere). */
.service-card .service-card-title { display: block; font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-size: 1.05rem; margin-bottom: 6px; }
.service-card .service-card-text { display: block; color: var(--muted, #5a5c64); font-size: 14px; line-height: 1.6; }

/* Case study copy column: shrink-to-fit stack so headings/badges don't
   stretch full width. */
.case-copy { display: grid; gap: 14px; justify-items: start; }

/* Text/image media wrapper (image itself styled via .text-image-img). */
.text-image-media { position: relative; }
.text-image-media > img, .text-image-media > .img-placeholder
  { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line, #e5e5e9); }

/* Contact form: phone+company and service+budget pairs sit two-up from
 640px (Node: sm:grid-cols-2). */
.form-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }

/* Segmented inquiry-type selector: one form offering two lead types.
   The native radio IS the pill — appearance:none plus inset:0 sizes it to the
   whole segment — so the control the tap-target audit measures is the visible
   44px target itself rather than a hidden input, while keyboard and
   screen-reader users keep a real radio group. */
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segment { position: relative; display: block; border: 1px solid var(--line, #e5e5e9); border-radius: 999px; background: transparent; }
/* The checked fill lives on the LABEL (an ancestor of the text), not on the
   sibling input, so the label's background resolves to the brand colour when
   the contrast audit walks up the tree. */
.segment:has(input:checked) { background: var(--brand, #1e3a8a); border-color: var(--brand, #1e3a8a); }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.segment span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--muted, #5a5c64); text-align: center; pointer-events: none; }
.segment input:checked + span { color: #fff; }
.segment input:focus-visible { outline: 2px solid var(--brand, #1e3a8a); outline-offset: 2px; }

/* Nav dropdown: hover-reveal panel below the parent link, Node parity
   (w-72 bordered panel, fade/slide in, bordered items). The invisible
   ::before bridge keeps the panel open while moving the mouse to it. */
.nav-item > .nav-dropdown
  { position: absolute; left: 0; top: 100%; z-index: 40; min-width: 288px;
    background: var(--surface, #f9f9fb); border: 1px solid var(--line, #e5e5e9); padding: 4px 0;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.nav-item > .nav-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-link:hover + .nav-dropdown,
.nav-dropdown:hover, .nav-dropdown:focus-within
  { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: 10px 16px; font-size: 13.5px; color: var(--ink, #111113); }
.nav-dropdown a + a { border-top: 1px solid var(--line, #e5e5e9); }
.nav-dropdown a:hover { background: var(--brand-soft, #f0f2f6); color: var(--brand, #1e3a8a); }

/* Footer about column + badge paragraph wrapper. */
.footer-about { max-width: 46ch; }
.footer-badges { margin: 14px 0 0; }
.footer-col { min-width: 0; }

/* ------------------------------------------------------------------
   Pricing banner (minimal starting-price statement, replaces the
   detailed per-plan cards) + comparison-table rebalance after the DIY
   column was removed from the offer.
   ------------------------------------------------------------------ */

.price-banner { max-width: 720px; margin: 0 auto; text-align: center; padding: 6px 0 2px; }
.price-banner-prefix { margin: 0 0 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand, #1e3a8a); }
.price-banner-figure { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.price-banner-amount { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink, #111113); }
.price-banner-note { font-size: 14px; color: var(--muted, #5a5c64); }
/* Statement mode: when the pricing banner has no figure, the note stands
   alone as the message (max-width so a full sentence stays readable). */
.price-banner-note--solo { max-width: 560px; margin: 0 auto; font-size: 1.05rem; line-height: 1.55; }
.price-banner .btn-row { justify-content: center; margin-top: 22px; }

/* Two-column comparison table: keep it visually centred and calm now
   that the DIY column is gone. */
.table-wrap { max-width: 880px; margin-left: auto; margin-right: auto; }
.compare-table th, .compare-table td { vertical-align: top; }
.compare-table tbody td:first-child { font-weight: 500; color: var(--ink, #111113); }
.compare-table .is-highlight { box-shadow: inset 2px 0 0 var(--brand, #1e3a8a); }
@media (min-width: 768px) {
  .compare-table { font-size: 14px; }
  .compare-table th, .compare-table td { padding: 14px 20px; }
}

/* ------------------------------------------------------------------
   Team index + specialist profiles (/team, /team/{slug}). Asymmetric
   portrait rows and an oversized charcoal hero — the case-row pattern
   tuned for people, plus skill chips and an editorial bio column.
   ------------------------------------------------------------------ */

.team-row { display: grid; gap: 28px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line, #e5e5e9); text-decoration: none; color: inherit; }
.team-row:first-child { border-top: 1px solid var(--line, #e5e5e9); }
.team-media { order: 0; }
.team-media img, .team-media .image-placeholder { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; display: block; }
.team-row.is-flipped .team-media { order: 1; }
@media (min-width: 768px) {
  .team-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 56px 0; }
  .team-copy { max-width: 54ch; }
}
.team-row:hover .team-link { color: var(--brand, #1e3a8a); }
.team-link { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.92rem; }
.team-row:hover .team-link::after { content: " \2192"; }
.team-skills-inline { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.pill-owner { background: var(--ink, #111113); }

/* Profile hero: charcoal, oversized type, portrait breaking the grid. */
.member-hero { background: var(--ink, #111113); color: #fff; padding: 64px 0; }
.member-hero .eyebrow { color: rgb(255 255 255 / 0.72); }
.member-hero .section-sub { color: rgb(255 255 255 / 0.78); max-width: 46ch; }
.member-hero-grid { display: grid; gap: 40px; align-items: end; }
@media (min-width: 768px) {
  .member-hero { padding: 104px 0 96px; }
  .member-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
  .member-hero-photo { margin-bottom: -64px; } /* portrait breaks into the next section */
}
.member-hero-photo img, .member-hero-photo .image-placeholder { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }
.member-name { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em; margin: 12px 0 20px; }
.member-hero .member-intro { font-size: 1.15rem; line-height: 1.6; max-width: 44ch; margin-bottom: 28px; }
.member-hero .btn { background: #fff; border-color: #fff; color: var(--ink, #111113); }
.member-hero .btn:hover { background: transparent; color: #fff; }
.member-hero .btn-ghost { background: transparent; border-color: rgb(255 255 255 / 0.5); color: #fff; }
.member-hero .btn-ghost:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }

/* Skill chips: outlined tags; generous padding keeps them airy at 13.5px. */
.skill-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.skill-chip { display: inline-block; padding: 9px 18px; border: 1px solid var(--line, #e5e5e9); border-radius: 999px; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; background: #fff; color: var(--ink, #111113); }
.skill-chip--sm { padding: 4px 12px; font-size: 0.78rem; }
.skill-chip--more { background: transparent; color: var(--muted, #5a5c64); }

/* Editorial bio: rail + column, the site's asymmetric two-column rhythm. */
.member-bio-grid { display: grid; gap: 32px; }
@media (min-width: 768px) {
  .member-bio-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 80px; }
  .member-bio-rail { position: sticky; top: 36px; align-self: start; }
}
.member-bio { max-width: 60ch; font-size: 1.09rem; line-height: 1.78; }
.member-bio p { margin: 0 0 1.15em; }
.member-bio h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.55rem; line-height: 1.25; margin: 1.7em 0 0.55em; letter-spacing: -0.01em; }
.member-bio h2:first-child { margin-top: 0; }
.member-bio ul { padding-left: 22px; margin: 0 0 1.15em; display: grid; gap: 6px; }
.member-bio li::marker { color: var(--brand, #1e3a8a); }
.member-social { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.member-social a { display: inline-block; padding: 6px 0; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.member-social a:hover { color: var(--brand, #1e3a8a); }

/* Projects-led-by: the portfolio rows, slightly tightened. */
.member-projects-head { align-items: end; margin-bottom: 12px; }
.member-case-list .case-row { padding: 36px 0; }
.member-case-list .case-row:first-child { border-top: 1px solid var(--line, #e5e5e9); }
.member-role-on-project { margin-top: 12px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand, #1e3a8a); }

/* ==========================================================================
   Responsive shell, mobile navigation & touch ergonomics
   --------------------------------------------------------------------------
   Desktop is a hover-revealed horizontal bar; below the breakpoint the same
   CMS-driven list becomes a collapsible panel behind an accessible toggle,
   with a dimming backdrop, a body scroll lock and a smooth open/close
   transition. Additive throughout — the desktop layout is untouched.
   ========================================================================== */

/* --- Page-level overflow guard ------------------------------------------- */
/* `clip`, not `hidden`: `overflow: hidden` would turn html/body into a scroll
   container and break the sticky `.site-header`. `clip` has no scroll port, so
   the header keeps sticking while a stray wide child cannot pan the page. */
html, body { max-width: 100%; overflow-x: clip; }

/* Notched phones in landscape: keep the gutter clear of the cutout. */
.container-x, .band-inner {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* Long tables and code blocks scroll inside their own box instead of
   widening the document. */
table, pre { max-width: 100%; overflow-x: auto; }
.table-wrap, pre { -webkit-overflow-scrolling: touch; }

/* Media never exceeds its column. `svg` keeps its natural display (inline
   icons and logos depend on it); only its width is capped, as before. */
img, picture, video { max-width: 100%; height: auto; }

/* Gesture-bar devices: the footer's last line must clear the home indicator. */
.footer-inner { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* --- Touch ergonomics ---------------------------------------------------- */
/* WCAG 2.5.8 asks for 24x24 CSS px; 44x44 is the Apple/Android baseline and is
   what every control here guarantees. */
.btn, .nav-link, .mobile-nav-toggle, .drawer-close-btn { min-height: 44px; }
.mobile-nav-toggle { min-width: 44px; }
.site-header-cta { justify-content: center; }

/* --- Toggle & backdrop (hidden on desktop) ------------------------------- */
.mobile-nav-toggle, .nav-overlay, .drawer-header { display: none; }

.mobile-nav-toggle {
  align-items: center; justify-content: center; flex-direction: column;
  gap: 5px; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line, #e5e5e9);
  color: var(--ink, #111113); cursor: pointer;
}
.hamburger-bar {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  .header-inner { gap: 12px; }

  /* Above the drawer and the backdrop so the close glyph stays tappable
     while the menu is open. */
  .mobile-nav-toggle { display: flex; margin-left: auto; position: relative; z-index: 4; }

  /* Backdrop: fixed, dims the page, and is a large tap-to-close target. */
  .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 2;
    background: rgb(17 17 19 / 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .nav-overlay.is-active { opacity: 1; pointer-events: auto; }

  /* Right-slide off-canvas drawer. `visibility`, not `display`, so the
     closed drawer stays out of the tab order yet can slide off-screen.
     A flex COLUMN: the top bar is a non-shrinking flex item pinned above the
     scroll area, so long menus can never scroll under the close button. */
  .primary-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; flex-direction: column; margin: 0;
    width: min(280px, 80vw);
    height: 100vh; height: 100dvh;
    overflow: hidden; box-sizing: border-box;
    background: var(--surface, #f9f9fb);
    border-left: 1px solid var(--line, #e5e5e9);
    box-shadow: -12px 0 32px rgb(17 17 19 / 0.14);
    visibility: hidden; transform: translateX(100%);
    transition: transform .3s ease, visibility .3s;
  }
  .primary-nav.is-open { visibility: visible; transform: none; }

  /* Fixed top bar of the drawer; carries its own safe-area padding so a
     notch never crowds the close button. */
  .drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-shrink: 0;
    padding: calc(14px + env(safe-area-inset-top))
             max(20px, env(safe-area-inset-right)) 14px
             max(20px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line, #e5e5e9);
  }
  .drawer-title { font-weight: 700; font-size: 1.05rem; color: var(--ink, #111113); }
  .drawer-close-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--line, #e5e5e9);
    border-radius: 6px; font-size: 1.5rem; line-height: 1;
    color: var(--ink, #111113); cursor: pointer;
  }
  .drawer-close-btn:hover,
  .drawer-close-btn:focus-visible { background: var(--brand-soft, #f0f2f6); color: var(--brand, #1e3a8a); }

  /* The only scroll container inside the drawer. `min-height: 0` is load-
     bearing: a flex item defaults to `min-height: auto` and would refuse to
     shrink below its content, making the whole drawer overflow instead. */
  .drawer-body {
    flex: 1 1 auto; min-height: 0; box-sizing: border-box;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px max(20px, env(safe-area-inset-right))
             max(24px, env(safe-area-inset-bottom))
             max(20px, env(safe-area-inset-left));
  }

  /* The children are always shown once the drawer is actually OPEN (hover
     reveals nothing on touch), but stay hidden — and out of the tab order —
     while the drawer is closed and parked off-screen. */
  .primary-nav.is-open .nav-item > .nav-dropdown { opacity: 1; visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .nav-item { flex-direction: column; align-items: stretch; position: static; }
  .nav-link {
    display: flex; align-items: center; width: 100%;
    padding: 12px 0; font-size: 1.05rem;
    border-bottom: 1px solid var(--line, #e5e5e9);
  }
  .nav-cta { margin-top: 12px; }
  .nav-cta .btn { width: 100%; }

  /* The hover dropdown is flattened into in-flow indented rows — hover
     reveals nothing on a touch screen, so the children must not depend on it
     (their visibility is raised by `.primary-nav.is-open` above). */
  .nav-item > .nav-dropdown {
    position: static; min-width: 0;
    transform: none; border: 0; padding: 0; background: transparent;
    box-shadow: none;
  }
  .nav-item > .nav-dropdown::before { display: none; }
  .nav-item > .nav-dropdown a { padding: 12px 0 12px 18px; }

  /* Lock the page behind the open menu, and lift the header above the
     floating call/WhatsApp buttons (z-index 50) so the drawer and backdrop
     paint over them. Lock the ROOT element too: `html`'s overflow-x is `clip`
     (not `visible`), so the body's `overflow` no longer propagates to the
     viewport and locking the body alone left the window scrolling behind the
     drawer. */
  html.nav-open,
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { z-index: 60; }

  /* The drawer owns the only close control. The header toggle sits in the
     same top-right corner ABOVE the drawer (z-index 4 vs 3) and its bars
     morph into an "X" while aria-expanded is true, so leaving it visible put
     two close glyphs on screen at once. `visibility` (not `display`) keeps
     the box and the computed transform intact for the state CSS, and the
     toggle returns — focusable — the moment `nav-open` is removed. */
  body.nav-open .mobile-nav-toggle { visibility: hidden; }
}

/* Active item in the CMS-driven nav (see sudur_site_header()). The dropdown
   children matter most on mobile, where they are always visible. */
.nav-link.is-active, .nav-dropdown a.is-active { color: var(--brand, #1e3a8a); font-weight: 600; }
/* Image alignment written by the CMS rich editor (assets/js/editor.js).
   These are CLASSES rather than inline styles on purpose: sudur_sanitize_html()
   preserves only a whitelist of inline style declarations, while class
   attributes always survive the save/reload round-trip. Mirrors the classes the
   editor's own canvas uses, so the preview matches the published page. */
img.align-left { float: left; margin: 0 1rem 1rem 0; }
img.align-right { float: right; margin: 0 0 1rem 1rem; }
img.align-center { display: block; margin: 1rem auto; }