/* ===========================================================================
   SITE — flat editorial system. Near-black ink + electric cobalt accent on
   warm paper. No card shadows, no icon badges, no gradients, square corners
   throughout. Numerals replace icons.
   Note: the --gold-* token names are historical; they now hold the cobalt
   accent ramp (see tokens.css).
   =========================================================================== */


.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); min-width: 0; }
.container-narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--space-5); }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-md);
  color: var(--text-brand);
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; color: var(--text-brand); }
.wordmark span { color: var(--gold-600); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--font-label);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--text-strong);
}
.nav-links a:hover { text-decoration: none; color: var(--navy-700); }
.nav-right { display: flex; align-items: center; gap: var(--space-4); }
.btn.nav-cta { padding: 10px 18px; font-size: var(--text-2xs); letter-spacing: 0.06em; }
.nav-cta-short { display: none; }

.lang-switch { display: inline-flex; border: 1.5px solid var(--navy-800); overflow: hidden; }
.lang-switch button {
  font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); padding: 6px 12px; background: transparent; color: var(--navy-800);
  border: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.lang-switch button[aria-pressed="true"] { background: var(--navy-800); color: var(--white); }

.nav-toggle { display: none; border: none; background: none; padding: 6px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy-800); margin: 4px 0; border-radius: 1px; }

/* ---- Buttons — square corners, flat, no glow ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; font-family: var(--font-label); font-size: var(--text-sm); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.08em;
  line-height: 1; border-radius: 0; cursor: pointer; white-space: nowrap; border: 1.5px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
/* Three button roles only:
     .btn-primary    cobalt fill   the main action of a section
     .btn-secondary  ink outline   the alternative action
     .btn-oncolor    white fill    only on the cobalt book bar          */
.btn-primary { background: var(--gold-500); color: var(--white); border-color: var(--gold-500); }
.btn-primary:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn-secondary:hover { background: var(--navy-900); color: var(--white); text-decoration: none; }
.btn-oncolor { background: var(--white); color: var(--gold-600); border-color: var(--white); }
.btn-oncolor:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); text-decoration: none; }
.btn-sm { padding: 10px 18px; font-size: var(--text-2xs); }

/* ---- Sections ---- */
section { padding-block: var(--space-9); }
.bg-cream { background: var(--cream); }
.bg-white { background: var(--white); }
.bg-dark { background: var(--navy-900); color: rgba(255,255,255,0.86); }
.bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--white); }
.bg-dark p { color: rgba(255,255,255,0.72); }
/* Tinted statement panel. Swap --gold-100 for --gold-500 (white text) or
   #0f1b3d for the bolder / darker variants. */
.bg-tint { background: var(--gold-100); }
.bg-tint p { color: var(--text-body); }
.section-wash { background: var(--cream); }
/* adjacent same-background sections would otherwise stack two full
   paddings into one undifferentiated gap */
.bg-cream + .bg-cream, .bg-white + .bg-white,
.bg-tint + .bg-tint, .bg-dark + .bg-dark { padding-top: 0; }
.eyebrow { display: block; margin-bottom: var(--space-3); }
h2.section-title { text-wrap: balance; font-size: var(--text-2xl); margin-bottom: var(--space-3); letter-spacing: -0.025em; }
.section-lede { color: var(--text-muted); font-size: var(--text-md); max-width: 640px; margin-bottom: var(--space-7); text-wrap: pretty; }
.section-head { max-width: 720px; }

/* ---- Section divider — "LABEL ————————" ---- */
.eyebrow-numbered { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.eyebrow-numbered .label { font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--gold-600); white-space: nowrap; }
.eyebrow-numbered .rule { flex: 1; height: 1px; background: var(--cream-line); min-width: 24px; }
.bg-dark .eyebrow-numbered .label { color: var(--gold-300); }
.bg-tint .eyebrow-numbered .label { color: var(--gold-600); }
.bg-tint .eyebrow-numbered .rule { background: rgba(35,64,232,0.22); }
.bg-dark .eyebrow-numbered .rule { background: rgba(255,255,255,0.18); }

/* ---- Hero — bold cover statement ---- */
.hero { background: var(--cream); padding-block: var(--space-10) var(--space-8); }
/* A plain block inside .container, so it starts at the container edge. It
   used to carry the .container class itself, which centred its 920px and
   pushed the headline 140px in from the wordmark above it. */
.hero-inner { max-width: 920px; }
.hero h1 {
  font-size: clamp(2.5rem, 4vw + 1.5rem, 5.25rem);
  color: var(--navy-900);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-bottom: var(--space-6);
}
.hero h1 mark { background: none; color: var(--gold-600); }
.hero-sub { font-size: var(--text-md); color: var(--grey-600); max-width: 58ch; margin-bottom: var(--space-7); text-wrap: pretty; }
.hero-cta-row, .btn-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.btn-row { margin-top: var(--space-5); }

/* ---- Why section — dark, asymmetric two-column statement ---- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.why-grid h2 {
  font-size: clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
}
.why-body p { font-size: var(--text-md); margin-bottom: var(--space-5); }
.why-body p:last-child { margin-bottom: 0; }

/* ---- Value props ---- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.value-card { text-align: left; border-top: 2px solid var(--navy-900); padding-top: var(--space-5); }
.value-card h3 { font-size: var(--text-md); margin-bottom: var(--space-3); letter-spacing: -0.015em; }
.value-card p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; text-wrap: pretty; }

/* ---- About ---- */
.about-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: start; }
.portrait-wrap { position: relative; }
.portrait {
  width: 240px; height: 240px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border-soft); outline: 6px solid var(--white);
}
.about-name { font-size: var(--text-2xl); letter-spacing: -0.025em; margin-bottom: 4px; }
.about-tagline { font-family: var(--font-label); font-weight: var(--fw-bold); color: var(--navy-600); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.about-body p { max-width: 68ch; color: var(--text-body); }

.about-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-9); }
.about-action-shot { margin: 0; }
.about-action-shot img { width: 100%; height: 340px; object-fit: cover; }
.about-gallery-caption {
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  letter-spacing: 0.02em;
  margin: var(--space-3) 0 0;
}

/* ---- Services — two-column "what it is / what you get", no bullets ---- */
.service-card {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5); align-items: start;
  background: transparent; border-top: 2px solid var(--navy-900);
  padding-block: var(--space-7);
}
.service-num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--navy-900); padding-top: 3px; letter-spacing: -0.02em; }
.service-badge { font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--gold-600); display: block; margin-bottom: var(--space-3); }
.service-title { font-size: var(--text-xl); margin-bottom: var(--space-5); letter-spacing: -0.025em; }

.service-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.service-col-label {
  font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-faint);
  padding-bottom: var(--space-2); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--cream-line);
}
.service-col p { font-size: var(--text-sm); color: var(--text-body); line-height: var(--leading-normal); margin: 0; text-wrap: pretty; }

.service-note { font-size: var(--text-sm); color: var(--navy-900); font-weight: var(--fw-bold); margin: var(--space-5) 0 0; }

/* Two distinct strands within one service (fundamentals vs certification) */
.service-strands { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.service-strand { padding-left: var(--space-5); border-left: 2px solid var(--gold-500); }
.strand-title { font-size: var(--text-md); margin-bottom: var(--space-3); letter-spacing: -0.015em; }
.service-strand p { font-size: var(--text-sm); color: var(--text-body); line-height: var(--leading-normal); margin: 0; text-wrap: pretty; }

.audience-bar { display: flex; align-items: baseline; gap: var(--space-3); border-top: 1px solid var(--border-soft); padding-top: var(--space-5); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-body); }

/* ---- Case study teaser — flat dark, no gradient ---- */
.cs-teaser {
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.cs-teaser h3 { color: var(--white); font-size: var(--text-2xl); }
.cs-teaser p { color: rgba(255,255,255,0.8); }
.cs-quote { border-left: 3px solid var(--gold-300); padding-left: var(--space-5); font-style: italic; font-size: var(--text-md); color: var(--white); }
.cs-quote footer { margin-top: var(--space-3); font-style: normal; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--gold-300); font-weight: var(--fw-bold); }

/* ---- Testimonials — pull quotes, no glyph, attribution pinned to baseline ---- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.testimonial-card {
  border-top: 2px solid var(--navy-900);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  font-style: normal;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  text-wrap: pretty;
  flex-grow: 1;
  margin: 0 0 var(--space-6);
}
.testimonial-attr { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--cream-line); }
.testimonial-name {
  display: block;
  font-family: var(--font-label);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--navy-900);
}
.testimonial-context {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---- FAQ groups ---- */
.faq-group { max-width: 820px; margin-inline: auto; margin-bottom: var(--space-8); }
.faq-group:last-of-type { margin-bottom: 0; }
.faq-group-title {
  font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--gold-600);
  margin-bottom: var(--space-4);
}

/* ---- FAQ teaser / accordion — flat, hairline dividers ---- */
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border-soft); padding-block: var(--space-5); }
.faq-item:first-of-type { border-top: 1px solid var(--border-soft); }
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4em; color: var(--gold-600); flex-shrink: 0; transition: transform var(--dur-normal) var(--ease-standard); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--text-body); margin: var(--space-3) 0 0; }
.faq-cta { text-align: center; margin-top: var(--space-7); }

/* ---- Contact ----------------------------------------------------------
   No card chrome: the two columns are separated by a single hairline, the
   same device used by the services, testimonial and FAQ sections. Fields are
   underlined rather than boxed, so the form belongs to the same system as the
   rest of the page instead of looking like a bolted-on widget.            */
/* Booking block. Capped at 900px: Calendly needs about 700px for its
   two-pane date-and-times layout, and looks sparse much beyond that. */
.contact-book { max-width: 820px; min-width: 0; }
.contact-book h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.contact-book-lede { color: var(--text-muted); font-size: var(--text-sm); max-width: 52ch; }

/* The hand-off to the form. A rule plus a question, so the two paths read as
   a sequence rather than as a choice to weigh up. */
.contact-alt {
  max-width: 820px; margin: var(--space-9) 0 var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.contact-alt h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.contact-alt p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; text-wrap: pretty; }

/* Form. Never full width: fields past roughly 700px are unpleasant to fill. */
.contact-write { max-width: 700px; min-width: 0; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
/* Grid/flex children default to min-width:auto, so a long <option> or a wide
   input can refuse to shrink and push the page into horizontal scroll. */
.form-row, .form-field { min-width: 0; }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
/* standalone fields (not inside a .form-row) carry their own spacing */
#contact-form > .form-field { margin-bottom: var(--space-6); }

/* micro-label, matching .eyebrow and .service-col-label elsewhere */
.form-field label {
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-faint);
}

.form-field input, .form-field select, .form-field textarea {
  width: 100%; max-width: 100%; min-width: 0;
  font: inherit; font-size: var(--text-base); color: var(--text-strong);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--border-hairline); border-radius: 0;
  padding: 6px 0; outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
/* inset shadow rather than a thicker border, so focus never shifts layout */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-bottom-color: var(--gold-500);
  box-shadow: inset 0 -1px 0 var(--gold-500);
}
.form-field.error input, .form-field.error textarea {
  border-bottom-color: var(--status-danger);
  box-shadow: inset 0 -1px 0 var(--status-danger);
}
.form-field .error-msg { font-size: var(--text-xs); color: var(--status-danger); display: none; }
.form-field.error .error-msg { display: block; }
.form-field textarea { resize: vertical; min-height: 96px; }

/* native select needs its own chevron once the frame is gone */
.form-field select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--space-5); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy-900) 50%),
                    linear-gradient(135deg, var(--navy-900) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#contact-form .btn { margin-top: var(--space-3); }
.form-msg { font-size: var(--text-sm); margin-top: var(--space-3); display: none; }
.form-msg.visible { display: block; }
.form-msg.success { color: var(--status-success); }
.form-msg.error { color: var(--status-danger); }
.form-msg.note { color: var(--text-muted); }
.honeypot { position: absolute; left: -9999px; }

/* ---- Footer ---- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.7); padding-block: var(--space-8) var(--space-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); margin-bottom: var(--space-7); }
.footer-brand { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-lg); color: var(--white); margin-bottom: var(--space-3); }
.footer-brand span { color: var(--gold-300); }
.footer-col h4 { color: var(--white); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { color: rgba(255,255,255,0.7); }
.footer-col a:hover { color: var(--gold-300); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-5); text-align: center; font-size: var(--text-xs); color: rgba(255,255,255,0.5); }

/* ---- Sub-page hero (case study / FAQ) — flat dark ---- */
.page-hero { background: var(--cream); padding-block: var(--space-9) var(--space-8); text-align: center; }
.page-hero .eyebrow { color: var(--gold-600); justify-content: center; text-align: center; }
.page-hero h1 { color: var(--navy-900); font-size: var(--text-3xl); letter-spacing: -0.03em; max-width: 760px; margin-inline: auto; }
.page-hero p { color: var(--text-muted); max-width: 640px; margin-inline: auto; }
.breadcrumb { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--gold-600); }

/* ---- Case study page — flat, hairline dividers ---- */
.cs-meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-8); }
.cs-meta-item { padding: var(--space-5); border-left: 1px solid var(--border-soft); }
.cs-meta-item:first-child { border-left: none; }
.cs-meta-item h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--gold-600); margin-bottom: var(--space-2); }
.cs-meta-item p { margin: 0; font-weight: var(--fw-medium); }
.cs-section { margin-bottom: var(--space-8); }
.cs-section h2 { font-size: var(--text-xl); }
.cs-quote-block { border-left: 3px solid var(--gold-500); padding-left: var(--space-5); margin-block: var(--space-6); }
.cs-quote-block p { font-style: italic; font-size: var(--text-md); margin-bottom: var(--space-2); }
.cs-quote-block footer { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); font-weight: var(--fw-bold); }

/* ---- Insights: index list ------------------------------------------------
   A stacked list, not a card grid. Long editorial titles read badly in narrow
   columns, and a list stays legible whether there are three articles or forty.
   Each row is opened by the same 2px ink rule used by services and testimonials. */
.insight-list { display: block; max-width: 820px; margin-inline: auto; }
.insight-item {
  display: block;
  border-top: 2px solid var(--navy-900);
  padding-block: var(--space-6);
  text-decoration: none;
  color: inherit;
}
.insight-item:last-child { border-bottom: 2px solid var(--navy-900); }
.insight-item:hover { text-decoration: none; }
.insight-item:hover .insight-title { color: var(--gold-600); }

.insight-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.insight-topic {
  font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--gold-600);
}
.insight-dot { width: 3px; height: 3px; background: var(--grey-400); flex: none; }
.insight-date, .insight-read {
  font-family: var(--font-label); font-size: var(--text-2xs); color: var(--text-faint);
  letter-spacing: 0.02em;
}
/* Articles keep the language they were written in. The badge says which, so a
   reader is never surprised by a page that does not follow the site toggle. */
.insight-lang {
  font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); color: var(--text-faint);
  border: 1px solid var(--border-hairline); padding: 1px 5px;
}
.insight-title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-xl); letter-spacing: -0.025em; line-height: 1.12;
  color: var(--text-strong); margin: 0 0 var(--space-3); max-width: 24ch;
  transition: color var(--dur-fast) var(--ease-standard);
  text-wrap: balance;
}
.insight-standfirst {
  font-size: var(--text-sm); color: var(--text-muted); margin: 0;
  max-width: 68ch; text-wrap: pretty;
}

/* Placeholder rows. Delete this rule once real articles replace the samples. */
.insight-item.is-placeholder { opacity: 0.55; }
.insight-item.is-placeholder .insight-topic { color: var(--text-faint); }

.insights-empty {
  border-top: 2px solid var(--navy-900);
  padding-block: var(--space-7);
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 60ch;
}

/* ---- Insights: article page ---- */
.article-head { max-width: 760px; margin-inline: auto; }
.article-title {
  font-size: clamp(2rem, 3vw + 1.2rem, 3.25rem);
  letter-spacing: -0.035em; line-height: 1.02;
  margin-bottom: var(--space-5);
}
.article-standfirst {
  font-size: var(--text-md); color: var(--text-muted);
  max-width: 60ch; margin-bottom: 0; text-wrap: pretty;
}

/* Body copy sits in a single narrow measure. Long-form reading needs about
   65 characters per line; the site container is far too wide for that. */
.article-body { max-width: 68ch; margin-inline: auto; }
.article-body p { font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0 0 var(--space-5); }
.article-body h2 { font-size: var(--text-xl); letter-spacing: -0.025em; margin: var(--space-8) 0 var(--space-4); }
.article-body h3 { font-size: var(--text-md); letter-spacing: -0.015em; margin: var(--space-7) 0 var(--space-3); }
.article-body ul, .article-body ol { margin: 0 0 var(--space-5); padding-left: var(--space-5); }
.article-body li { font-size: var(--text-md); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); }
.article-body a { color: var(--gold-600); text-decoration: underline; text-underline-offset: 2px; }
.article-body strong { color: var(--text-strong); }

.article-body blockquote {
  border-left: 3px solid var(--gold-500);
  padding-left: var(--space-5);
  margin: var(--space-7) 0;
}
.article-body blockquote p {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-lg); line-height: 1.35; letter-spacing: -0.015em;
  color: var(--text-strong); margin: 0;
}

.article-body figure { margin: var(--space-7) 0; }
.article-body figcaption {
  font-family: var(--font-label); font-size: var(--text-2xs);
  color: var(--text-faint); letter-spacing: 0.02em; margin-top: var(--space-3);
}

/* Foot of the article: source link, then back, then the booking action. */
.article-foot {
  max-width: 68ch; margin: var(--space-8) auto 0;
  border-top: 1px solid var(--border-soft); padding-top: var(--space-6);
}
.article-source { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-6); }
.article-nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.article-back {
  font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted);
}

/* ---- Services: facts strip ------------------------------------------------
   A buyer's first three questions are how long, for whom, and in what language.
   Answering them above the prose is what turns a description into an offer. */
.service-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--cream-line);
  border-bottom: 1px solid var(--cream-line);
}
.service-facts > div { margin: 0; min-width: 0; }
.service-facts dt {
  font-family: var(--font-label); font-weight: var(--fw-bold); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--text-faint); margin-bottom: 3px;
}
.service-facts dd {
  margin: 0; font-size: var(--text-sm); color: var(--text-strong);
  font-weight: var(--fw-medium); line-height: 1.35; text-wrap: pretty;
}

/* ---- Services: closing line under a card ---- */
.service-takeaway {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--cream-line);
  font-size: var(--text-sm); color: var(--text-body); text-wrap: pretty;
}
.service-takeaway b {
  font-family: var(--font-label); font-size: var(--text-2xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-faint);
  display: block; margin-bottom: var(--space-2);
}

/* ---- Calendly inline calendar --------------------------------------------
   Reserves its height before the widget loads so the contact section does not
   jump when the iframe arrives. The placeholder text is replaced by the
   widget itself once Calendly injects the iframe. */
.calendly-host {
  /* Calendly sizes its iframe against the parent's resolved height. A
     min-height alone leaves it at its 150px default. */
  height: 680px;
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.calendly-host::before {
  content: attr(data-loading);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--text-faint);
}
.calendly-host.is-ready::before { content: none; }
/* Calendly injects its own iframe; strip the padding it ships with. */
.calendly-host iframe { width: 100% !important; height: 100% !important; border: 0; }

/* ---- Responsive ---- */
/* The menu collapses earlier than the rest of the layout. Six entries in
   French ("Perspectives", "Temoignages") stop fitting alongside the wordmark
   and the booking button at about 1080px: measured at 1000px the gaps fall to
   zero. The grid below still reflows at 980px. */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--border-soft); padding: var(--space-4) var(--space-5);
    gap: var(--space-4); box-shadow: var(--shadow-md);
  }
}

@media (max-width: 980px) {
  /* Portrait centred, but body copy stays left-aligned: centred paragraphs
     of this length are hard to read. */
  .about-grid { grid-template-columns: 1fr; justify-items: stretch; text-align: left; }
  .portrait-wrap { justify-self: center; }
  .about-gallery { grid-template-columns: 1fr; }
  .service-card { grid-template-columns: 40px 1fr; gap: var(--space-4); }
  .service-cols { grid-template-columns: 1fr; gap: var(--space-5); }
  .service-facts { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .service-strands { grid-template-columns: 1fr; gap: var(--space-5); }
  .testimonial-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .calendly-host { height: 760px; }
  .contact-alt { margin-top: var(--space-8); }
  .form-row { grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
  .value-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .cs-teaser { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cs-meta { grid-template-columns: 1fr; }
  .cs-meta-item { border-left: none; border-top: 1px solid var(--border-soft); }
  .cs-meta-item:first-child { border-top: none; }
  .hero h1 { font-size: var(--text-3xl); }
  .insight-title { font-size: var(--text-lg); max-width: none; }
  .nav-right { gap: var(--space-3); }
}

/* ---- Small phones ---- */
@media (max-width: 560px) {
  :root { --header-h: 56px; }
  .container { padding-inline: var(--space-4); }
  section { padding-block: var(--space-8); }
  .hero { padding-block: var(--space-8) var(--space-7); }
  .hero-cta-row, .btn-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn, .btn-row .btn { width: 100%; }
  .btn { padding: 13px 20px; letter-spacing: 0.06em; }
  .nav-right { gap: var(--space-2); }
  .btn.nav-cta { padding: 8px 11px; letter-spacing: 0.03em; }
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
  .lang-switch button { padding: 6px 6px; }
  .wordmark { font-size: var(--text-sm); }
  .about-grid { gap: var(--space-6); }
  .portrait { width: 180px; height: 180px; }
  .about-action-shot img { height: 240px; }
  .service-card { grid-template-columns: 1fr; gap: var(--space-3); padding-block: var(--space-6); }
  .service-num { font-size: var(--text-md); }
  .service-facts { grid-template-columns: 1fr; }
  .footer-grid { gap: var(--space-6); }
}