/* v2 production extras - additions on top of the canonical handoff CSS
   (brand.css / home.css / inner.css are adopted as-is; keep them untouched). */

/* Imagery inside migrated blog articles (mirrored Wix media) */
.article-body figure { margin-block: 2rem 0; }
.article-body img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Tables inside migrated blog articles */
.article-body .table-wrap { margin-top: 1.2rem; overflow-x: auto; }
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.55;
}
.article-body th,
.article-body td {
  border: 1px solid var(--line);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}
.article-body tr:first-child th,
.article-body tr:first-child td {
  font-weight: 650;
  color: var(--ink);
  background: var(--surface);
}

/* Blog index: reuse the homepage evidence-card grid for post cards */
.blog-index .cases-grid { margin-top: 0; }
.blog-index .case-card .case-body { padding-bottom: 0.4rem; }

/* Case-card thumbnail (hub grids + related sections) - same border/radius treatment as
   migrated body imagery, reusing the canonical tokens. */
.case-card .case-thumb {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Case-card Problem/Solution rows: home.css makes .case-body a grid (gap 0.9rem)
   but leaves the inner <dl> as a plain block, and the global reset (* { margin: 0 })
   zeroes the default <dl> margin - so the two .case-row blocks stacked flush. Make
   the <dl> a grid so Problem→Solution carries the same rhythm as h3→Problem. */
.case-card dl { display: grid; gap: 0.9rem; }

/* Contact form (Slice B). Two-column info+form layout (D-10) with a single-column responsive
   collapse, input/textarea styling, the canonical .btn.btn--primary submit, and full
   idle/submitting/success/error status visuals - all from canonical tokens, append-only.
   brand.css / home.css / inner.css are NEVER edited (D-11). */

/* Two-column grid: contact info LEFT, form RIGHT. Collapses to one column at the inner.css
   880px breakpoint (matches existing .split / article breakpoints). */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
/* Wider shell on /contact-us only. inner.css caps the reading shell at 720px and is a canonical
   handoff file, so it is not edited; the two-class selector out-specifies its single-class
   .article-shell whatever the link order. 880px - 18rem info - 2.5rem gap leaves a ~552px form
   column with the info column at about its old width. Phones stay scroll-free: the shell is still
   width: var(--col), and the 880px block below collapses the grid. */
.article-shell.article-shell--contact { max-width: 55rem; } /* = 880px at the fixed 16px root (brand.css) */
/* First + last name on one line. Declared BEFORE the 880px block on purpose: the override below
   has the same specificity, so source order is the only thing that makes it win. The two child
   .field divs keep their own margin-bottom, and box-sizing: border-box is global (brand.css:48),
   so 1fr 1fr with width:100% inputs at 0.8rem padding cannot overflow. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .field-row { grid-template-columns: 1fr; }
}

/* LEFT column - verbatim contact info. */
.contact-info { display: grid; gap: 0.4rem; }
.contact-info__lead { margin: 0; color: var(--ink-2); line-height: 1.6; }
.contact-info__lead:not(:first-child) { margin-top: 1.2rem; }
.contact-info__value { margin: 0; font-size: 1.2rem; font-weight: 650; color: var(--ink); }
.contact-info__value a { color: var(--accent-text); }
.contact-info__value a:hover { color: var(--ink); }

/* RIGHT column - form fields. */
.contact-grid .field { margin-bottom: 1rem; display: grid; gap: 0.35rem; }
.contact-grid .field label { font-size: 0.9rem; color: var(--ink-2); font-weight: 650; }
.contact-grid input,
.contact-grid textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.contact-grid input:focus,
.contact-grid textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.contact-grid textarea { min-height: 9rem; resize: vertical; }
.contact-grid button[type="submit"] { margin-top: 0.4rem; }

/* Verbatim privacy text below submit (D-03 - static, no consent checkbox). */
.contact-privacy { margin-top: 1rem; font-size: 0.85rem; line-height: 1.6; color: var(--ink-2); }
.contact-privacy a { color: var(--accent-text); text-decoration: underline; }
.contact-privacy a:hover { color: var(--ink); }

/* Off-screen honeypot - visually hidden but still focusable/fillable by bots (do NOT
   use display:none / type=hidden, which bots skip). */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Submit status - idle is empty (no box); the three live states reuse the tokens. */
.form-status { margin-top: 1rem; font-size: 0.95rem; }
.form-status:empty { display: none; }
.form-status.submitting {
  color: var(--ink-2);
}
.form-status.success {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.7rem 0.9rem;
}
.form-status.error {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.7rem 0.9rem;
}

/* Per-field validation errors - client-side gate + backend 400 field mapping (contact.js sets
   .field--error on the .field and fills its .field-error span). The brand palette has no danger
   token, so --form-error is defined locally here and NEVER added to brand.css (D-11). */
.contact-grid { --form-error: #c0362c; }
.field-error {
  color: var(--form-error);
  font-size: 0.82rem;
  line-height: 1.4;
}
.field-error:empty { display: none; }
.field--error input,
.field--error textarea {
  border-color: var(--form-error);
}
.field--error input:focus,
.field--error textarea:focus {
  outline-color: var(--form-error);
}
.field--error label {
  color: var(--form-error);
}

/* Success panel (FORM-04): replaces the form body after a successful submit - the fields are hidden
   (#formBody[hidden]) and this is shown, with an "Another enquiry" button to restore the form. */
#formBody[hidden] { display: none; }
.form-success {
  display: grid;
  gap: 0.8rem;
  justify-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.5rem;
}
.form-success[hidden] { display: none; }
.form-success p { color: var(--ink-2); line-height: 1.6; }
.form-success a { color: var(--accent-text); text-decoration: underline; }
.form-success a:hover { color: var(--ink); }
.form-success .btn { margin-top: 0.4rem; }

/* Footer legal links (privacy / terms / cookie settings) - append-only, canonical tokens. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1.2rem;
  font-size: 0.85rem;
}
.footer-legal a { color: var(--ink-2); }
.footer-legal a:hover { color: var(--ink); }

/* Cookie-consent banner (self-hosted). Hidden by default; consent.js adds .is-visible when there's
   no stored choice. Fixed to the viewport bottom, above all content. */
.cookie-consent {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
  padding: 1rem 0;
}
.cookie-consent.is-visible { display: block; }
/* UK/EU/EEA/CH first visit, not Belarus/Russia (consent.js sets html.cc-pending): everything but the banner is blurred
   until Accept or Reject. */
html.cc-pending body > :not(.cookie-consent) {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}
.cc-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.cc-text {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 64ch;
}
.cc-text a { color: var(--accent-text); }
.cc-text a:hover { color: var(--ink); }
.cc-actions {
  display: flex;
  gap: 0.7rem;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .cc-inner { flex-direction: column; align-items: flex-start; }
  .cc-actions { width: 100%; }
  .cc-actions .btn { flex: 1; text-align: center; }
}

/* Engagement-model card modifier: a subtle accent top rule to distinguish the model grid from the
   plain PM/delivery cards, reusing canonical tokens. */
.engagement-card { border-top: 2px solid var(--accent); }

/* Pricing decision-helper labeled lines (Best when / Not ideal when / How budget works) - a small
   inline uppercase label above each line so the model cards read as a scannable comparison. */
.model-card__line { margin-top: 0.7rem; font-size: 0.92rem; line-height: 1.55; }
.model-card__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.15rem;
}

/* UXE-1: /pricing#<anchor> lands the model card below the sticky header (~69px) instead of under
   it. Only the /pricing cards carry ids, so the /how-we-work link cards are unaffected. */
.engagement-card[id] { scroll-margin-top: 6rem; }

/* UXE-2: the project group has two models, so it gets a 2-col grid (no empty third slot). The
   mobile rule is required: v2.css loads after inner.css, so without it this modifier would beat
   inner.css's 1-col rule at equal specificity. */
.feature-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .feature-grid--two { grid-template-columns: 1fr; }
}
/* Spacing between the project/team model groups and under each group label. */
.model-group + .model-group { margin-top: 2.5rem; }
.model-group__label { margin-bottom: 1rem; }

/* Tooling pills (MISSING from the canonical CSS - the deck markup used pill spans with
   black/yellow styling; this is the v2 re-skin: subtle bordered surface pills, no deck yellow).
   Shared by /about-us and the /how-we-work stack rows. */
.model-group__label {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tech-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tech-pill {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tech-pill:hover { border-color: var(--accent); background: var(--accent-tint); }

/* QA & security points: a standalone styled layout. The canonical .checklist is only skinned under
   .split, so a bare .checklist here falls back to browser bullets - this gives it a real layout: a
   2-up grid of bordered surface rows, each with an accent check, collapsing to 1 column on mobile. */
.checklist--grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin: 0;
  padding: 0;
}
.checklist--grid li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--body);
}
.checklist--grid li::before {
  content: "✓";
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--accent-text);
  flex: none;
}
@media (max-width: 640px) {
  .checklist--grid { grid-template-columns: 1fr; }
}
/* On a .continuity band (/pricing "How we quote") the section background is already --surface, so
   surface-filled rows blend into it and read as one flat block. Make the rows white there so each
   item stays a distinct card; the border is unchanged. */
.continuity .checklist--grid li { background: var(--bg); }

/* Outbound product link on the /about-us product cards - a small accent CTA under the blurb/tags,
   reusing canonical tokens (no deck yellow). */
.product-link { margin-top: 0.9rem; font-size: 0.92rem; }
.product-link a { color: var(--accent-text); font-weight: 650; }

/* Company-facts block (/about-us) - a definition-style grid of label/value rows on a bordered
   surface, reusing v2 tokens. Collapses to stacked rows on mobile. */
.company-facts {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.company-facts .fact {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.company-facts .fact:last-child { border-bottom: 0; }
.company-facts .fact-k {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.company-facts .fact-v { color: var(--body); line-height: 1.55; }
@media (max-width: 640px) {
  .company-facts .fact { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Core services grid (homepage redesign) - overrides home.css .continuity-* rules.
   v2.css loads after home.css, so equal-specificity declarations here win; the
   handoff files (brand/home/inner.css) stay untouched. Cards become white bordered
   tiles in a 3-col / 8px-gap grid with the icon top-left and text bottom-anchored. */
.continuity-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 0;
  border-left: 0;
}
.continuity-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  min-height: 200px;
}
.continuity-item .ci-icon img { display: block; }
.continuity-item .ci-t {
  display: block;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.continuity-item .ci-d {
  display: block;
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 880px) {
  .continuity-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .continuity-list { grid-template-columns: 1fr; }
  .br-desktop { display: none; }
}

/* How we work process flow (homepage redesign) - overrides home.css .process-flow /
   .step rules by load order (v2.css comes after home.css). Each item gets a STEP
   badge pill above a bordered-less step block with a left divider line and a
   surface-tinted icon tile at the bottom. Handoff files stay untouched. */
.process-flow {
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 0;
  border-left: 0;
}
.pf-item {
  display: flex;
  flex-direction: column;
}
.pf-badge {
  height: 40px;
  display: flex;
  align-items: center;
  background: var(--bg);
}
.pf-badge .step-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  padding: 20px;
  min-height: 249px;
  background: var(--bg);
  border: 0;
}
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: #d9d9d9;
}
.step::after { content: none; }
.step .step-t {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.step .step-body p {
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
  margin-top: 4px;
}
.step-icon {
  width: 100%;
  height: 92px;
  background: var(--surface);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 16px;
}
.step-icon img { display: block; }
@media (max-width: 1024px) {
  .process-flow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .process-flow { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  /* home.css re-declares a "↓" arrow at this breakpoint - re-neutralize here. */
  .step::after { content: none; }
}

/* Technology stack columns (homepage redesign) - the new markup uses new class
   names (.tech-grid/.tech-cols/.tech-col/.tech-item), so every old home.css
   TECHNOLOGY selector (.tech-rows/.tech-row/.tech-cat/.tech-items) matches
   nothing and needs no neutralization. Only the #technology background and the
   section-head margin are true overrides (v2.css loads after home/brand.css). */
#technology { background: var(--surface); }
.tech-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 20px;
  align-items: start;
}
#technology .section-head { margin-bottom: 0; }
.tech-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tech-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}
.tech-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.tech-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 12px 0 11px;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
}
.tech-item img { display: block; flex: none; }
@media (max-width: 1024px) {
  .tech-grid { grid-template-columns: 1fr; }
  #technology .section-head { margin-bottom: 32px; }
  .tech-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tech-cols { grid-template-columns: 1fr; gap: 32px; }
  .tech-col-title { font-size: 15px; line-height: 20px; margin-bottom: 12px; }
  .tech-col-title::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--accent);
    flex: none;
  }
  .tech-list { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 0; }
  .tech-item {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg);
    height: 40px;
    padding: 8px;
  }
}

/* Blog article in-body links - Wix-sourced posts carry literal <u> tags around link text, but
   native posts use clean semantic <a> only, which inner.css leaves visually indistinguishable
   from body text. Underline all article-body links so both sources read identically. */
.article-body a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.article-body a:hover { color: var(--ink); }

/* ════════════════════════════════════════════
   HEALTHCARE (/healthcare-software-development) - bespoke structured industry layout
   Rebuilds the original Wix page's 7-section marketing structure in the v2 design system.
   All classes are hc-* scoped; append-only on canonical tokens (reuses .section/.container/
   .section-head/.h-section/.on-dark/.grid-texture/.cta-band/.btn). Only this one industry
   route uses these; every other industry route stays on the flat .article-body template.
   ════════════════════════════════════════════ */

/* Two-column intro / hire split - 5fr/7fr like .industries-wrap, collapses on mobile. */
.hc-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hc-split-lead p { color: var(--muted); line-height: 1.6; margin-top: 1rem; }

/* Accent-marker feature/hire lists (no default bullets). */
.hc-feature-list { display: grid; gap: 0.85rem; list-style: none; }
.hc-feature-list li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.5;
  color: var(--ink);
}
.hc-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background: var(--accent);
}

/* Service media rows - text + image, alternating side on desktop, stacked on mobile. */
.hc-media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
/* Image column is the narrower one, whichever side it sits on - keeps the media
   images a touch smaller than the text column without leaving floating whitespace. */
.hc-media-row--reverse { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
.hc-media-row--reverse .hc-media-text { order: 2; }
.hc-media-row--reverse .hc-media-img { order: 1; }
.hc-media-text h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.hc-media-text p { color: var(--muted); line-height: 1.6; margin-bottom: 0.85rem; }
.hc-media-text p:last-child { margin-bottom: 0; }
.hc-media-text ul { display: grid; gap: 0.5rem; padding-left: 1.2rem; margin-bottom: 0.85rem; }
.hc-media-text li { line-height: 1.5; }
.hc-media-img img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Card grids - 3-up services / 2x2 industries / 2-up case studies; single column on mobile. */
.hc-card-grid { display: grid; gap: 1.25rem; }
.hc-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hc-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hc-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.5rem 1.4rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hc-card h3 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.hc-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }

/* Case-study cards on the dark band - image on top, readable light text/surfaces. */
.hc-case {
  display: grid;
  align-content: start;
  background: var(--dark-900);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.hc-case-img { aspect-ratio: 16 / 10; overflow: hidden; }
.hc-case-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-case-body { display: grid; gap: 0.6rem; padding: 1.5rem 1.4rem; }
.hc-case-body h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.hc-case-body p { color: var(--dark-text); line-height: 1.55; font-size: 0.92rem; }
.hc-case-body strong { color: #fff; }

/* Why-choose reasons - accent-marker list with bold leads. */
.hc-reasons { display: grid; gap: 1rem; list-style: none; max-width: 70ch; }
.hc-reasons li {
  position: relative;
  padding-left: 1.7rem;
  line-height: 1.6;
  color: var(--muted);
}
.hc-reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  background: var(--accent);
}
.hc-reasons strong { color: var(--ink); font-weight: 700; }

/* CTA band - copy group + actions (the band itself is the shared .cta-band flex row). */
.cta-band .cta-copy { display: grid; gap: 0.5rem; max-width: 46ch; }
.cta-band .cta-copy p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.cta-band .cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

@media (max-width: 960px) {
  .hc-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hc-split { grid-template-columns: 1fr; }
  .hc-media-row { grid-template-columns: 1fr; }
  .hc-media-row--reverse .hc-media-text { order: 0; }
  .hc-media-row--reverse .hc-media-img { order: 0; }
  .hc-card-grid--3,
  .hc-card-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   Services redesign - hub category bands + icon cards, feature-card
   icons, proof band, styled FAQ, and related-service cards.
   Append-only; brand.css / home.css / inner.css untouched (D-11).
   All from canonical tokens. .reveal already ships an opacity:1
   no-JS default (page.js only hides below-fold when motion+IO exist),
   so no extra reveal fallback is needed here.
   ============================================================ */

/* ── Hub: category bands ── */
.services-hub .svc-band { padding-block: 2.4rem; border-top: 1px solid var(--line-light); }
.services-hub .svc-band:first-of-type { border-top: 0; padding-top: 2rem; }
.svc-band-head { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1.3rem; }
.svc-band-ic {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.svc-band-ic img { display: block; width: 26px; height: 26px; }
.svc-band-head h2 { margin: 0; }
.svc-band-blurb { margin: 0.35rem 0 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; max-width: 60ch; }

/* ── Hub: icon service cards (the whole card is the link) ── */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.svc-grid .svc-card {
  display: flex; flex-direction: column; gap: 0.55rem; padding: 1.15rem;
  min-height: 8.5rem; transition: border-color var(--speed), background var(--speed);
}
.svc-card-ic { width: 40px; height: 40px; }
.svc-card-ic img { display: block; width: 34px; height: 34px; }
.svc-card-body { display: grid; gap: 0.3rem; }
.svc-card .svc-card-t { margin: 0; font-size: 1rem; }
.svc-card-x { color: var(--ink-2); font-size: 0.85rem; line-height: 1.45; }
.svc-card-foot { margin-top: auto; }
.svc-grid .svc-card:hover { border-color: var(--ink); background: var(--accent-tint); }

/* ── Feature-card icons (rich pages) ── */
.feat-card .feat-ic { width: 26px; height: 26px; color: var(--ink); }

/* ── Proof band (all service pages, before the CTA) ── */
.proof-band { background: var(--surface); border-block: 1px solid var(--line); padding-block: 2.1rem; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.proof-stat { display: grid; gap: 0.15rem; }
.proof-v { font-size: 2rem; font-weight: 730; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.proof-k { color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; }

/* ── FAQ (rich pages) ── */
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 62rem; }
.faq-item { padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.faq-q { font-size: 1.02rem; font-weight: 650; margin: 0 0 0.4rem; }
.faq-a { margin: 0; color: var(--ink-2); line-height: 1.6; font-size: 0.95rem; max-width: 66ch; }

/* ── Related-service cards (replaces the old bullet list) ── */
.svc-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.svc-rel-grid .svc-rel-card {
  display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.1rem;
  transition: border-color var(--speed), background var(--speed);
}
.svc-rel-ic { flex: none; width: 34px; height: 34px; }
.svc-rel-ic img { display: block; width: 34px; height: 34px; }
.svc-rel-t { flex: 1; font-weight: 650; font-size: 0.95rem; line-height: 1.3; }
.svc-rel-card .link-arrow { flex: none; }
.svc-rel-grid .svc-rel-card:hover { border-color: var(--ink); background: var(--accent-tint); }

/* ── Responsive (matches inner.css 880 / 640 breakpoints) ── */
@media (max-width: 880px) {
  .svc-grid, .svc-rel-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-grid, .svc-rel-grid { grid-template-columns: 1fr; }
  .svc-band-head { gap: 0.7rem; }
}

/* ── Optional capability diagram: a supporting HERO visual (rich pages that define `diagram`).
   Lives inside .page-hero so the numbered section spine stays identical to sibling pages. ── */
.svc-hero-visual { margin-top: 1.6rem; max-width: 60rem; }
.svc-flow { display: flex; align-items: stretch; gap: 0.6rem; flex-wrap: wrap; }
.svc-flow-node {
  flex: 1 1 12rem; display: grid; gap: 0.35rem; align-content: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); padding: 1rem 1.1rem;
}
.svc-flow-node--accent { border-color: var(--ink); background: var(--accent-tint); }
.svc-flow-k {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-text);
}
.svc-flow-node--accent .svc-flow-k { color: var(--ink); }
.svc-flow-t { font-weight: 650; font-size: 0.95rem; line-height: 1.35; color: var(--ink); }
.svc-flow-arr {
  align-self: center; font-family: var(--font-mono); color: var(--ink-2);
  font-size: 1.1rem; flex: 0 0 auto;
}
@media (max-width: 760px) {
  .svc-flow { flex-direction: column; }
  .svc-flow-arr { transform: rotate(90deg); align-self: flex-start; margin-left: 1.2rem; }
}

/* ── InvaBlog category hubs: chip nav (issue-4 topic clusters) ── */
.category-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem;
}
.cat-chip {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em;
  padding: 0.34rem 0.72rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
a.cat-chip:hover { color: var(--ink); border-color: var(--ink); }
.cat-chip.is-active { color: var(--ink); border-color: var(--ink); background: var(--accent-tint); }

/* ── /how-we-work technical-dossier layout (quick-260918-p2b) ──
   The approved design direction C: a compact --surface hero band, then a sticky contents rail
   beside four dense sections. Values lifted from .design/how-we-work/{Main,Mobile}.dc.html but
   expressed in brand.css tokens, never the mockups' literal hex. New classes only - the canonical
   handoff stylesheets (brand/home/inner.css) are never edited. */

.hww-hero { background: var(--surface); }
/* Two-part selector REQUIRED: inner.css already sets `.page-hero .container { display:grid; gap }`,
   so a single `.hww-hero-grid` would lose on specificity. v2.css loads after inner.css (layout.mjs),
   so at equal specificity this wins. Same reasoning as the .feature-grid--two note above. */
.page-hero .hww-hero-grid {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
}
.hww-hero-main { display: grid; gap: 0.9rem; }

.hww-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-block: 4rem;
}

/* top: 6rem (not the mockup's 2rem) clears the 69px sticky .site-header - the same offset as the
   scroll-margin-top convention used for anchor landings below. */
.hww-rail { position: sticky; top: 6rem; display: grid; gap: 0; }
.hww-rail-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.8rem;
}
.hww-rail-items { display: grid; gap: 0; }
.hww-rail-item {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.hww-rail-items .hww-rail-item:last-child { border-bottom: 1px solid var(--line); }
.hww-rail-idx { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.hww-rail-items .hww-rail-item:first-child .hww-rail-idx { color: var(--accent-text); }
.hww-rail-t { font-size: 0.92rem; color: var(--body); }
.hww-rail-items .hww-rail-item:first-child .hww-rail-t { font-weight: 600; color: var(--ink); }
.hww-rail-item:hover .hww-rail-t { color: var(--ink); }
.hww-rail-cta {
  margin-top: 1.6rem;
  padding: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
}
.hww-rail-cta p { font-size: 0.88rem; line-height: 1.55; margin-bottom: 0.9rem; }
.hww-rail-cta .btn { width: 100%; min-height: 44px; font-size: 0.85rem; }

.hww-body { display: grid; gap: 4rem; }
/* D-06: a rail anchor must land its <h2> below the 69px sticky header, not under it. Mirrors the
   .engagement-card[id] fix used on /pricing. */
.hww-sec[id] { scroll-margin-top: 6rem; }
.hww-sec-head { display: grid; gap: 0.7rem; margin-bottom: 1.4rem; }

.hww-thead,
.hww-row { display: grid; gap: 2rem; }
.hww-thead { padding-bottom: 0.7rem; }
.hww-row { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.hww-table .hww-row:last-child { border-bottom: 1px solid var(--line); }
.hww-table--sdlc .hww-thead,
.hww-table--sdlc .hww-row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); }
.hww-table--models .hww-thead,
.hww-table--models .hww-row { grid-template-columns: 200px minmax(0, 1fr) 150px; }
.hww-table--models .hww-row { padding: 1.1rem 0; }
.hww-row p { font-size: 0.92rem; line-height: 1.55; }

.hww-col-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hww-col-label--ai,
.hww-stack-row--ai .hww-col-label { color: var(--accent-text); }

.hww-stage { display: grid; gap: 0.15rem; align-content: start; }
.hww-stage-name { font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.hww-stage-idx { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.hww-ai { border-left: 2px solid var(--accent); padding-left: 0.9rem; color: var(--body); }

.hww-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.hww-def { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.hww-def--wide { grid-column: span 2; border-bottom: 1px solid var(--line); }
.hww-def-t {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.hww-def p { font-size: 0.9rem; line-height: 1.5; }

.hww-model-name { font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
/* The model name is an <h3> wrapping the /pricing deep link, so the anchor takes the heading's
   colour and only the hover state differs. */
.hww-model-name a { color: inherit; }
.hww-model-name a:hover { color: var(--accent-text); }
.hww-shape { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.hww-shape--project { color: var(--accent-text); }
.hww-shape--team { color: var(--muted); }

.hww-stack { display: grid; gap: 1.2rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.hww-stack-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 2rem;
  align-items: baseline;
}
.hww-stack-row--qa { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.hww-stack-row--ai .tech-pill { background: var(--accent-tint); border-color: var(--accent); }

.hww-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hww-checks li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--body);
}
.hww-checks li::before {
  content: "\2713";
  font-family: var(--font-mono);
  color: var(--accent-text);
  flex: none;
}

/* Mobile reflow per Mobile.dc.html. ONE breakpoint: a 260px rail plus a three-track table is
   already cramped by 900px, and an intermediate state would be dead weight. */
@media (max-width: 900px) {
  .page-hero .hww-hero-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .hww-shell { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.2rem; }
  .hww-body { gap: 2.6rem; }

  .hww-rail { position: static; }
  .hww-rail-label { padding-bottom: 0.7rem; }
  .hww-rail-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .hww-rail-item { border-top: 0; padding: 0.6rem 0.7rem; border: 1px solid var(--line); }
  .hww-rail-items .hww-rail-item:first-child { background: var(--surface); }
  .hww-rail-items .hww-rail-item:last-child { border-bottom: 1px solid var(--line); }
  /* superseded by .hww-hero-cta - on mobile the CTA belongs in the hero, not mid-rail */
  .hww-rail-cta { display: none; }

  /* the mono header row is meaningless once every row stacks */
  .hww-table .hww-thead { display: none; }

  .hww-table--sdlc .hww-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.1rem 0; }
  .hww-stage { display: flex; gap: 0.7rem; align-items: baseline; }
  .hww-stage-idx { order: -1; letter-spacing: 0.12em; }
  .hww-ai {
    background: var(--accent-tint);
    padding: 0.7rem 0.9rem;
    border-left: 2px solid var(--accent);
  }

  .hww-table--models .hww-row {
    grid-template-columns: 1fr auto;
    gap: 0.3rem 0.7rem;
    align-items: baseline;
  }
  .hww-table--models .hww-row p { grid-column: 1 / -1; order: 3; }
  .hww-table--models .hww-shape { order: 2; justify-self: end; }

  .hww-defs { grid-template-columns: 1fr; }
  .hww-def--wide { grid-column: auto; }

  .hww-stack-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .hww-rail-cta .btn { min-height: 44px; }
}

/* ── /how-we-work mobile-only affordances (quick-260923-5gz) ──
   Both elements are emitted unconditionally in how-we-work.mjs and hidden here by default, so the
   reviewed desktop page is byte-identical apart from two display:none nodes. */
.hww-ai-label { display: none; }
.hww-hero-cta { display: none; }

@media (max-width: 900px) {
  /* HWW-M1: the stacked AI panels lose their column header (.hww-thead is hidden above), so each
     panel carries the same literal label the thead used. */
  .hww-ai-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 0.2rem;
  }

  /* HWW-M2: alternate 02/04 onto --surface bands so the column reads as four sections rather than
     one white scroll. The bleed is DERIVED from --col rather than hardcoded: .container is
     width:var(--col) with auto margins, so half of (parent - --col) is exactly the gutter. Both
     percentages resolve against the same containing block, and --col's calc branch always wins
     below --max, so this stays correct across the 3rem/2.2rem gutter switch (home.css:629) that a
     literal -1.5rem would overflow by 6px. No 100vw - that would count the scrollbar. */
  .hww-body > #delivery,
  .hww-body > #stack {
    --hww-bleed: calc((100% - var(--col)) / 2);
    background: var(--surface);
    border-block: 1px solid var(--line);
    padding: 2.2rem var(--hww-bleed);
    margin-inline: calc(-1 * var(--hww-bleed));
  }

  /* HWW-M3: .btn is inline-flex; flex + width:100% gives the mockup's full-width hero button. */
  .hww-hero-cta {
    display: flex;
    width: 100%;
    min-height: 48px;
    margin-top: 0.4rem;
  }
}

@media (max-width: 640px) {
  /* HWW-M4: the 36px .kicker hairline wraps to its own line once the section head is this narrow.
     Scoped to the dossier heads - the sitewide .kicker rule must not change. */
  .hww-sec-head .kicker::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   /contact-us booking step (quick 261009-vl8) - the optional 30-min-call picker revealed after a
   successful submit, plus the dial-code phone row above it.
   NAMING: the element IDs are ai-landing's (#bookingPanel, #bk-days, #bk-slots, …) so the ported
   JS needs no churn; the CSS CLASSES are main-portal kebab-case to match the rest of this file.
   Canonical tokens only - brand.css / home.css / inner.css are never edited (D-11). The error
   colour reuses --form-error, declared on .contact-grid above.
   ════════════════════════════════════════════════════════════════ */

/* Phone field: dial-code select shrinks to its content, the number takes the rest. */
.phone-row { display: flex; gap: 0.5rem; align-items: stretch; }
.contact-grid .phone-row input { flex: 1 1 auto; min-width: 0; }

/* Masked select + overlay face, ported from ai-landing (.phoneRow/.dialSelect/.dialFace in
   src/main.css, commit 6e40eee) so /contact-us and mvp /start-b look the same. 5.5rem, not mvp's
   5rem: the longest DIAL_CODES entry is 4 glyphs (+972/+971/+966/+353) and mvp gets away with the
   narrower box only because its face is 0.92rem against a 0.92rem control - main-portal's inputs
   are `font: inherit` (1rem), so the box widens here instead. */
.dial-wrap { position: relative; flex: 0 0 auto; width: 5.5rem; }
.dial-select {
  width: 100%;
  appearance: none;
  cursor: pointer;
  padding: 0.65rem 1.7rem 0.65rem 0.8rem;
  font: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Masks the long closed-state option text (`<flag> +1 United States`); .dial-face paints the
     dial code back on top. */
  color: transparent;
  /* Chrome autofill forces `color` with a UA !important, which would un-mask the flag + country
     name - -webkit-text-fill-color is the property that actually holds the mask. */
  -webkit-text-fill-color: transparent;
  /* `appearance: none` is required, not cosmetic: Firefox paints the native dropdown arrow in the
     select's own `color`, so the transparency above would erase the affordance. Supply it as a
     data-URI instead. The stroke is the literal hex of --muted, not a token violation: a data-URI
     cannot read a CSS custom property. */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236F6D63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}
/* Keep the OPEN list readable - the select's own text is transparent. */
.dial-select option { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.dial-select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* The visible closed value - just the dial code. `left` matches .contact-grid input's 0.8rem
   inline padding so the face lines up with the number beside it; 0.92rem is carried from mvp's
   .dialFace (src/main.css:1686) and is the parity target, not a nicety - at the inherited 1rem a
   4-glyph code runs under the arrow. Kept in sync by public/v2/contact.js. */
.dial-face {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

/* Panel 2 of 3: #formBody -> #bookingPanel -> #formSuccess. */
.booking-panel { display: grid; gap: 0.9rem; justify-items: start; }
.booking-panel[hidden] { display: none; }
.booking-lede { color: var(--ink-2); line-height: 1.6; }
.booking-who { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
.booking-who:empty { display: none; }

/* Calendar. max-width keeps the day cells a sane size on desktop; minmax(0, 1fr) columns mean the
   grid can never overflow .contact-col at the 880px single-column collapse or at 375px. */
.booking-cal { width: 100%; max-width: 24rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cal-month { font-weight: 650; color: var(--ink); }
.cal-nav {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
.cal-nav:hover:not(:disabled) { background: var(--accent-tint); }
.cal-nav:disabled { color: var(--muted); border-color: var(--line-light); cursor: default; }
.cal-dow,
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-dow {
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-align: center;
  color: var(--muted);
}
.cal-days { margin-top: 2px; }
.cal-day {
  aspect-ratio: 1;
  min-height: 44px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
.cal-day:hover:not(:disabled) { background: var(--accent-tint); }
.cal-day:disabled { color: var(--muted); background: var(--surface); border-color: var(--line-light); cursor: default; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); font-weight: 650; }

/* Timeslots for the picked day - labelled in the visitor's own timezone. */
.booking-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
.slot-btn {
  min-height: 44px;
  padding: 0 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
.slot-btn:hover { background: var(--accent-tint); }
.slot-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); font-weight: 650; }
.booking-hint { font-size: 0.9rem; color: var(--ink-2); }
.booking-tz { font-size: 0.82rem; color: var(--muted); }
.booking-tz:empty { display: none; }

.booking-error {
  color: var(--form-error);
  font-size: 0.9rem;
  line-height: 1.5;
}
.booking-error[hidden] { display: none; }

/* Quiet text button, deliberately NOT a .btn - Back is secondary to Confirm. */
.booking-back {
  min-height: 44px;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent-text);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.booking-back:hover { color: var(--ink); }

/* The brand .btn has no :disabled state, and Confirm ships disabled until a slot is picked - it
   must not look pressable. Scoped to the panel so the sitewide .btn is unchanged. */
.booking-panel .btn:disabled { opacity: 0.45; cursor: default; }

/* ============================================================
   Homepage testimonial carousel (quick 261010-lft) - all 5 original
   Wix testimonials on a CSS scroll-snap track; page.js adds prev/next/
   dots by setting .is-ready. Append-only; brand.css / home.css /
   inner.css untouched. All from canonical tokens.
   ============================================================ */
.t-carousel,
.t-track { min-width: 0; }

/* No padding/gap on the track: page.js derives the index as
   scrollLeft / clientWidth, which needs every slide exactly track-wide.
   flex-start, not stretch: the quotes range from ~4 to ~12 lines, and stretching
   them to the tallest left a tall empty gap under the short ones. page.js sizes
   the track to the active slide instead (no-JS: track = tallest slide). */
.t-track {
  display: flex;
  align-items: flex-start;
  transition: height var(--speed);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.t-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding-inline-end: clamp(1rem, 3vw, 2rem);
}
.t-slide .quote p + p { margin-top: 0.9em; }

/* Controls are dead without JS, so they stay hidden until page.js runs;
   the scrollbar is the no-JS scroll affordance, so it only goes then too.
   They sit ABOVE the track (order: -1) because the track height follows the
   active quote - below it, the arrows would jump out from under the pointer. */
.t-controls {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1.4rem;
  padding-left: clamp(1.2rem, 2.5vw, 2rem);
}
.t-carousel.is-ready { display: flex; flex-direction: column; }
.t-carousel.is-ready .t-controls { display: flex; order: -1; }
.t-dots { display: flex; }
@media (prefers-reduced-motion: reduce) { .t-track { transition: none; } }
.t-carousel.is-ready .t-track { scrollbar-width: none; }
.t-carousel.is-ready .t-track::-webkit-scrollbar { display: none; }

.t-prev,
.t-next {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color var(--speed);
}
.t-prev:hover,
.t-next:hover { border-color: var(--ink); }

/* 24px wide clears the WCAG 2.5.8 target minimum; 2x44 + 5x24 fits 375px. */
.t-dot {
  width: 24px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.t-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--muted);
  background: transparent;
}
.t-dot[aria-current="true"]::before {
  background: var(--ink);
  border-color: var(--ink);
}

/* Homepage hero integration map: each node links to its service page (Clarity showed visitors
   clicking them). Keep the card look; signal the link on hover/focus only. */
a.pl-node { color: inherit; text-decoration: none; border-radius: 6px; margin-inline: -0.4rem; padding-inline: 0.4rem; transition: background-color 0.15s ease; }
a.pl-node:hover, a.pl-node:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); }
a.pl-node:hover .pl-t, a.pl-node:focus-visible .pl-t { text-decoration: underline; text-underline-offset: 3px; }
a.pl-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }