/* ============================================================================
   asesoria_formacion — archetype.css

   Expertise-led professional gravitas. Cool slate + muted-blue palette
   with a single restrained brick-red accent (signal). Serif headings
   (Fraunces) over sans-serif body (Inter Tight). Three sector variants
   are dispatched from main.html via business.sector substring matching;
   the structural shell stays identical across all three (academia /
   asesoría fiscal / servicios jurídicos).

   Departures from the older ``servicios`` archetype:

   * Internal-link nav + footer anchors (#servicios, #equipo, #contacto,
     #faq) so the SEO ``internal_links_count`` signal counts > 0. The
     prior audit identified this as a shared weakness across the
     existing three archetypes.
   * A dedicated ``#equipo`` (team / credentials) section — required
     for trust on this archetype family. Hidden gracefully when the
     fixture has no team_members data, but the template encourages
     populating it.
   * A footer credentials line that surfaces colegio profesional /
     bar association numbers (required by ethical standards for the
     jurídicos variant, optional for the other two).

   Layout DNA: vertical broadsheet, sections alternate paper / bone,
   type carries the visual weight, photography is people-focused
   (interior + team headshots, not stock handshakes).
   ============================================================================ */

/* ---------- Fonts (self-hosted, no CDN) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Fraunces-Variable.woff2") format("woff2-variations"),
       url("fonts/Fraunces-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Fraunces-Italic-Variable.woff2") format("woff2-variations"),
       url("fonts/Fraunces-Italic-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/InterTight-Variable.woff2") format("woff2-variations"),
       url("fonts/InterTight-Variable.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Palette — slate + muted blue + restrained brick accent. */
  --paper: #F7F6F3;       /* primary background — slight warm grey, never #FFFFFF */
  --ink: #1F2733;         /* primary type — slate near-black, never #000000 */
  --bone: #E8E6E0;        /* alternating section background */
  --slate: #475569;       /* secondary text, section labels */
  --blue-muted: #3B5266;  /* accent: links, underlines, section numbers */
  --signal: #A23E2C;      /* single strong accent — CTAs only, once per viewport */
  --mute: #8A8C8E;        /* captions, metadata, secondary type */

  /* Tonal derivations used in a handful of edges. */
  --ink-soft: #2E3744;
  --bone-soft: #F0EFE9;
  --rule: #D3D1CA;        /* hairlines, derived from bone */

  --serif: "Fraunces", "EB Garamond", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fraunces SOFT axis lower than servicios (more restrained for the
     gravitas register); opsz scaled via clamp on titles below. */
  --serif-soft: "SOFT" 30, "opsz" 72;
  --serif-soft-display: "SOFT" 20, "opsz" 144;

  --pad-x: clamp(20px, 4vw, 64px);
  --pad-y: clamp(72px, 9vw, 132px);
  --container: 1240px;
  --container-tight: 920px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.skip {
  position: absolute; left: -9999px; top: 8px; padding: 8px 14px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 14px;
}
.skip:focus { left: 8px; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.wordmark {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1;
  color: var(--ink);
}
.site-nav {
  display: flex; align-items: center; gap: 28px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.005em;
}
/* ``:not(.btn)`` excludes nav CTAs from the link color/hover so the
   ``.btn-ink``/``.btn-signal`` colors win (a bare ``.site-nav a`` rule has
   higher specificity than ``.btn-ink`` and was painting the primary CTA
   dark-on-dark). */
.site-nav a:not(.btn) {
  color: var(--ink-soft);
  transition: color 120ms ease;
}
.site-nav a:not(.btn):hover { color: var(--signal); }
.site-nav .lang {
  font-feature-settings: "tnum";
  border: 1px solid var(--rule);
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.site-nav .lang:hover { color: var(--ink); border-color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
  border-radius: 0;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--signal); }
.btn-signal { background: var(--signal); color: var(--paper); }
.btn-signal:hover { background: var(--ink); }
.btn-large { padding: 16px 28px; font-size: 15px; }

/* ---------- Eyebrow + section meta ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 32px;
}
.eyebrow-rule {
  display: inline-block; width: 32px; height: 1px;
  background: var(--blue-muted);
}

.section-num {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--blue-muted);
  margin: 0 0 14px;
  letter-spacing: 0;
}
.section-title {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft-display);
  font-weight: 400;
  /* 2026-05-31 operator review (mirrors the peluqueria fix): section titles
     were clamp(34px, 4.6vw, 58px) — ~58px on a 1440px desktop, close enough
     to the hero (clamp(44px, 6.8vw, 92px)) that "Áreas de práctica" read as
     oversized. The hero must stay the dominant element; section titles drop
     to a calmer single scale, clearly smaller and consistent across every
     section. */
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 18px;
  color: var(--ink);
}
.section-title em { font-style: italic; color: var(--blue-muted); }
.section-kicker {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--slate);
  margin: 4px 0 0;
  max-width: 50ch;
  letter-spacing: -0.005em;
}
.section-head { margin-bottom: clamp(48px, 6vw, 80px); max-width: 740px; }

/* ---------- Section base + alternating bands ---------- */
.section { padding: var(--pad-y) 0; }
.band-bone { background: var(--bone); }
.band-bone + .band-bone { border-top: 1px solid var(--rule); }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(88px, 12vw, 160px) 0 clamp(72px, 10vw, 120px);
  position: relative;
}
.hero-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 104px);
  /* 2026-05-31 operator review: ``align-items: end`` bottom-aligned the two
     columns, so the shorter column (the headline) was pushed down and left an
     empty white band above the aside's portrait + CTAs. Top-aligning both
     columns removes that dangling gap — the portrait and the eyebrow start on
     the same baseline directly under the header. */
  align-items: start;
}
.hero-headline { min-width: 0; }
.hero-title {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft-display);
  font-weight: 400;
  font-size: clamp(44px, 6.8vw, 92px);
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
  max-width: 20ch;
}
.hero-title em { font-style: italic; color: var(--blue-muted); }
.hero-aside {
  display: flex; flex-direction: column; gap: 28px;
  max-width: 44ch;
}
.lede {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: -0.005em;
}
.cta-row {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.cta-secondary {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-style: italic;
  font-size: 16px;
  color: var(--blue-muted);
  border-bottom: 1px solid var(--blue-muted);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.cta-secondary:hover { color: var(--signal); border-color: var(--signal); }
.cta-secondary-large { font-size: 18px; }

/* Schema 0.6 social-proof badge. */
.hero-social-proof {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.hero-social-proof-attribution {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  opacity: 0.75;
  margin-left: 4px;
}

.hero-aside-figure {
  margin: 12px 0 0;
  padding: 0;
}
.hero-aside-figure img {
  /* Cool duotone — slate-blue tint via filter. People-focused photos
     (team headshots, classroom interior) survive this treatment
     better than warm sepia. */
  width: 100%;
  filter: grayscale(0.78) contrast(1.04) brightness(0.97);
  background: var(--bone);
}
.hero-aside-figure figcaption {
  font-family: var(--sans); font-size: 12px; color: var(--mute);
  letter-spacing: 0.04em; margin-top: 8px;
}

/* ---------- Hero wordmark + professional headshot (composition profile) ----------
   2026-05-31 operator insight: an abogados / asesoría landing leads with the
   LOGO/WORDMARK + a real HEADSHOT of the professional + text, NOT a generic
   office stock background. There is no logo-image field in the schema this
   round, so the wordmark IS the identity (the styled business name). */
.hero-wordmark {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.02em;
  color: var(--blue-muted);
  margin: 0 0 20px;
  /* A small underline rule reads as a mark, not body text. */
  display: inline-block;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
/* The headshot is a contained PORTRAIT (3:4), not a full-bleed band. Sits at
   the top of the aside column so the page opens on a face + a name. */
.hero-portrait {
  margin: 0 0 8px;
  padding: 0;
}
.hero-portrait img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Cool, restrained tint — keeps faces legible while reading editorial. */
  filter: grayscale(0.42) contrast(1.03);
  background: var(--bone);
}
.hero-portrait-caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
  max-width: 320px;
}
.hero-portrait-name {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.hero-portrait-role {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-muted);
}
/* No-photo hero: collapse to a single typographic column so a firm without a
   headshot does NOT show an empty aside or a fake office photo. */
.hero-wrap-typographic {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  max-width: var(--container-tight);
}
.hero-wrap-typographic .hero-aside { max-width: 56ch; }

/* ---------- Services (typographic TABLE) ---------- */
.service-table {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--ink);
}
.service-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.service-row-index {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-style: italic;
  font-size: 22px;
  color: var(--blue-muted);
  letter-spacing: 0;
}
.service-row-name h3 {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.service-row-name p {
  margin: 14px 0 0;
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 60ch;
}
.service-row-meta {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--mute);
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
}
.service-row-meta .meta-line { margin: 0; color: var(--ink-soft); }
.service-row-meta .meta-line span {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 11px; color: var(--mute);
  margin-right: 6px;
}
.service-detail {
  margin-top: 10px;
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-style: italic;
  font-size: 15px;
  color: var(--blue-muted);
  border-bottom: 1px solid var(--blue-muted);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.service-detail:hover { color: var(--signal); border-color: var(--signal); }

/* ---------- Team / Credentials (dedicated for this archetype) ---------- */
.team-intro {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
/* Typographic monogram card for a team member with no headshot — never a
   broken image or empty figure. */
.team-card-monogram {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  margin: 0 0 18px;
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft-display);
  font-style: italic;
  font-size: clamp(56px, 6vw, 88px);
  color: var(--blue-muted);
  line-height: 1;
}
.team-card {
  padding-top: 22px;
  border-top: 1px solid var(--blue-muted);
}
.team-card-figure {
  margin: 0 0 18px;
  padding: 0;
  background: var(--bone);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.team-card-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cool restrained tint, lighter than the hero so faces stay legible. */
  filter: grayscale(0.35) contrast(1.02);
}
.team-card h3 {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.team-card-role {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-muted);
  margin: 0 0 14px;
}
.team-card-bio {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.team-card-credential {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-style: italic;
  font-size: 13px;
  color: var(--slate);
  margin: 12px 0 0;
}

/* ---------- Method / Process ---------- */
.method-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.method-steps li {
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.method-steps h3 {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  color: var(--ink);
}
.method-steps p {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 34ch;
}

/* ---------- Testimonials ---------- */
.testimonial-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(36px, 5vw, 72px);
}
.testimonial {
  margin: 0; padding: 28px 0 0;
  border-top: 1px solid var(--blue-muted);
}
.testimonial-quote {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-weight: 400;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin: 0;
}
.testimonial-foot {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.testimonial-foot cite {
  font-style: normal;
  color: var(--ink-soft);
  font-weight: 500;
}
.testimonial-city { color: var(--mute); }

/* ---------- Ambience (secondary photo strip) ---------- */
.ambience-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
}
.ambience-figure {
  margin: 0;
  padding: 0;
  background: var(--ink);
}
.ambience-figure img {
  width: 100%;
  /* Same cool restrained tint as team cards. */
  filter: grayscale(0.55) contrast(1.04) brightness(0.94);
  opacity: 0.95;
  background: var(--bone);
}
.ambience-figure figcaption {
  font-family: var(--sans); font-size: 12px; color: var(--mute);
  letter-spacing: 0.04em; margin-top: 8px;
}
.ambience-caption {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -0.008em;
  margin: 0;
  padding-left: clamp(16px, 1.8vw, 28px);
  border-left: 1px solid var(--blue-muted);
}
.ambience-caption em { font-style: italic; color: var(--blue-muted); }

/* ---------- FAQ (accordion via <details>/<summary>) ----------
   2026-05-30 (known-bugs.md) — markup migrated for native disclose UX. */
.faq-list {
  margin: 0; padding: 0;
  counter-reset: faq;
  border-top: 1px solid var(--ink);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  counter-increment: faq;
  padding: 0;
  transition: background 220ms ease;
}
.faq-item[open] { background: rgba(0, 0, 0, 0.02); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(28px, 3.5vw, 44px) 0;
  display: grid;
  grid-template-columns: 64px 1fr 28px;
  column-gap: clamp(24px, 3vw, 48px);
  align-items: baseline;
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-weight: 400;
  font-size: clamp(20px, 1.85vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: counter(faq, decimal-leading-zero) ".";
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-style: italic;
  font-size: 22px;
  color: var(--blue-muted);
}
.faq-item summary::after {
  content: "+";
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--blue-muted);
  text-align: right;
  line-height: 1;
  transition: transform 280ms ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--blue-muted);
  outline-offset: 6px;
}
.faq-answer {
  padding: 0 0 clamp(22px, 2.8vw, 32px);
  display: grid;
  grid-template-columns: 64px 1fr 28px;
  column-gap: clamp(24px, 3vw, 48px);
  animation: faqFadeIn 320ms ease both;
}
.faq-answer p {
  grid-column: 2;
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.62;
  max-width: 66ch;
}
@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Contact ---------- */
.contact-wrap { }
.contact-header { max-width: 660px; margin-bottom: clamp(40px, 5vw, 64px); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
  border-top: 1px solid var(--ink);
  padding-top: clamp(28px, 3vw, 40px);
}
.contact-channels {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
}
.contact-channels > div { display: flex; flex-direction: column; gap: 6px; }
.contact-channels dt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.contact-channels dd {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.008em;
}
.contact-channels dd a {
  border-bottom: 1px solid var(--blue-muted);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.contact-channels dd a:hover { color: var(--signal); border-color: var(--signal); }

.contact-hours { font-family: var(--sans); }
.contact-hours-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 14px;
}
.contact-hours table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.contact-hours th, .contact-hours td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.contact-hours th {
  font-weight: 500;
  color: var(--ink);
  text-transform: capitalize;
  width: 38%;
  font-feature-settings: "tnum";
}
.contact-hours td {
  color: var(--ink-soft);
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
}
.contact-hours .hours-text {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
/* Compact hours (shared ``hours_compact`` filter): one line per day-range,
   day + windows on the SAME row, no repeated day names. */
.hours-compact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-feature-settings: "tnum";
}
.hours-compact li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.hours-compact-day {
  font-weight: 500;
  color: var(--ink);
}
.hours-compact-time {
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  text-align: right;
}

.contact-action {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(56px, 7vw, 96px) 0 32px;
}
.footer-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.footer-wordmark {
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-size: 26px;
  font-weight: 500;
  color: var(--paper);
  margin: 0;
  letter-spacing: -0.014em;
}
.footer-tag {
  color: rgba(247, 246, 243, 0.7);
  margin: 14px 0 0;
  max-width: 48ch;
  font-size: 14px;
  line-height: 1.55;
  font-family: var(--sans);
}
.footer-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(247, 246, 243, 0.5);
  margin: 0 0 12px;
  font-family: var(--sans);
}
.site-footer ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.site-footer ul a {
  color: rgba(247, 246, 243, 0.86);
  font-size: 14px;
  font-family: var(--sans);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 120ms ease, color 120ms ease;
}
.site-footer ul a:hover {
  color: var(--paper);
  border-bottom-color: var(--blue-muted);
}
.footer-address {
  color: rgba(247, 246, 243, 0.76);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.footer-credentials {
  color: rgba(247, 246, 243, 0.65);
  font-family: var(--serif);
  font-variation-settings: var(--serif-soft);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  margin: 14px 0 0;
}
.footer-fine {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(247, 246, 243, 0.14);
  padding-top: 24px;
  margin: 36px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(247, 246, 243, 0.5);
  letter-spacing: 0.06em;
}

/* ---------- Sticky mobile CTA bar ---------- */
.cta-bar {
  display: none; /* desktop: hidden — the header CTA is enough */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.cta-bar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  background: var(--signal);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   BODY-RHYTHM DEPTH LAYER (Landing P1, 2026-06-07)
   --------------------------------------------------------------------------
   The hero is premium, the body airy-but-flat: bone-on-paper section bands
   with near-zero contrast and hairline-ruled lists with no elevation. This
   layer transfers the marketing site's section-rhythm craft at a register that
   respects minimalism's restraint: a cleaner alt-ground step + a hairline
   glowing divider, whisper-light elevated cards (method / testimonial / FAQ),
   and a DESIGNED monogram empty-state (the placeholder card is the brief's
   "looks cheap" target).

   Driven by the design-language depth tokens, each falling back to the native
   flat value, GATED behind html[data-skin] for the assertive transforms — an
   UNSKINNED render keeps the native airy baseline.
   ========================================================================== */
:root {
  --bg-section-alt: var(--bone);
  --bg-surface: var(--paper);
  --bg-surface-2: var(--paper);
  --shadow-card: none;
  --shadow-lift: none;
  --card-edge: var(--rule);
  --divider-glow: var(--blue-muted);
  --ground-glow: transparent;
  --proof-ground: var(--ink);
  --proof-ink: var(--paper);
  --panel-pad: 0px;
  --panel-radius: 0px;
}

/* ---- The existing .band-bone alternation gains the skin's cleaner alt ground +
   a hairline glowing divider thread + a faint glow pool, so the cadence reads as
   a deliberate step (not bone-on-paper mush). Skinned-only. ---- */
html[data-skin] .band-bone {
  background: var(--bg-section-alt);
  position: relative;
}
html[data-skin] .band-bone::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(200px, 56%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--divider-glow), transparent);
  opacity: 0.55; pointer-events: none;
}
html[data-skin] .band-bone::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 240px;
  background: radial-gradient(60% 100% at 50% 0%, var(--ground-glow) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
html[data-skin] .band-bone > .wrap { position: relative; z-index: 1; }

/* ---- Method steps → whisper-light elevated cards (was: a top-hairline column).
   Skinned-only. ---- */
html[data-skin] .method-steps li {
  background: var(--bg-surface);
  border: 1px solid var(--card-edge);
  border-top: 1px solid var(--card-edge);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 36px);
  transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease;
}
html[data-skin] .method-steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* ---- Testimonials → light cards with a quiet lift. Skinned-only. ---- */
html[data-skin] .testimonial {
  background: var(--bg-surface);
  border: 1px solid var(--card-edge);
  border-top: 1px solid var(--card-edge);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 36px);
  transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease;
}
html[data-skin] .testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* ---- Team cards (with photo) → lift the figure off the ground. Skinned-only. */
html[data-skin] .team-card { border-top: 0; }
html[data-skin] .team-card-figure {
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-card);
  transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease;
}
html[data-skin] .team-card:hover .team-card-figure { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* ---- MONOGRAM PLACEHOLDER → a DESIGNED empty-state, not a flat bone box.
   A soft tinted-gradient ground, a refined edge, a subtle ring framing the
   initial + a quiet inner shadow, so a headshot-less team member reads as an
   intentional monogram plate rather than a cheap placeholder. Applies on every
   render (skinned + native) because the native flat bone box is itself the
   "looks cheap" target the brief named — this is a baseline empty-state upgrade,
   kept tasteful + restrained so it suits the minimalism register too. ---- */
.team-card-monogram {
  position: relative;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--blue-muted) 12%, var(--bone)) 0%, var(--bone) 70%);
  border: 1px solid color-mix(in srgb, var(--blue-muted) 18%, var(--rule));
  border-radius: max(var(--panel-radius), 6px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), var(--shadow-card);
  overflow: hidden;
}
/* A quiet ring framing the initial so the plate reads as a designed mark. */
.team-card-monogram::after {
  content: "";
  position: absolute;
  inset: clamp(18px, 14%, 36px);
  border: 1px solid color-mix(in srgb, var(--blue-muted) 28%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

/* ---- FAQ → whisper-light elevated disclosure cards. Skinned-only — unskinned
   keeps the native hairline-ruled accordion. ---- */
html[data-skin] .faq-list { border-top: 0; display: grid; gap: clamp(10px, 1.4vw, 14px); }
html[data-skin] .faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--card-edge);
  border-bottom: 1px solid var(--card-edge);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-card);
  padding: 0 clamp(20px, 2.6vw, 32px);
  transition: box-shadow 280ms ease;
}
html[data-skin] .faq-item:hover,
html[data-skin] .faq-item[open] { box-shadow: var(--shadow-lift); background: var(--bg-surface); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-wrap,
  .hero-wrap-typographic,
  .ambience-wrap,
  .contact-grid { grid-template-columns: 1fr; }
  .hero-aside { max-width: none; }
  /* On phones the headshot leads the aside; cap its width so it reads as a
     portrait card, not a full-width band. */
  .hero-portrait img { max-width: 240px; }
  .hero-portrait-caption { max-width: 240px; }
  .method-steps { grid-template-columns: 1fr; }
  /* Reveal the sticky CTA and reserve its height so the footer is never
     covered. */
  .cta-bar { display: block; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .service-row {
    grid-template-columns: 48px 1fr;
    row-gap: 12px;
  }
  .service-row-meta { grid-column: 1 / -1; padding-left: 48px; flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: baseline; }
  .service-row-meta .meta-line { font-size: 13px; }
  .service-detail { margin-top: 0; }
  .footer-wrap { grid-template-columns: 1fr; gap: 36px; }
  .contact-channels { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-nav { gap: 16px; }
  .site-nav a:not(.btn):not(.lang) { display: none; }
  .header-wrap { height: 64px; }
  .hero { padding-top: clamp(64px, 16vw, 96px); }
  .faq-item summary,
  .faq-answer { grid-template-columns: 40px 1fr 24px; }
}