/* Site chrome shared by every page: the therefore mark, the skip link, keyboard focus, and the
 * fixes that have to hold on all twenty pages at once (2026-10-01 UI/UX pass).
 *
 * The mark: an amber apex over two white dots — two measurements and the conclusion that
 * follows from them (adopted 2026-09-21). The amber is the conclusion; never move it onto a
 * base dot, and never let a blend mode recolour it.
 */

/* ------------------------------------------------------------------ the mark */

.brand { align-items: flex-start; }
.brand-mark { display: block; line-height: 0; font-size: 0; }
.brand-mark svg { display: block; width: 34px; height: 34px; }
.brand-mark .mk-base { fill: #fff; }
.brand-mark .mk-apex { fill: #c88800; }

/* The small "MARKETINGZ" under the mark was 0.65 opacity: 3.9:1 against the night ground, under
   the 4.5:1 that small text needs (axe, 14 page views). Full opacity in the text tone passes. */
.brand-name { opacity: 1; color: var(--text); }

/* Footer: the mark beside the name, at caption size. */
.footer-brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.footer-brand svg, .footer-mark svg { width: 18px; height: 18px; flex: none; }
.footer-mark { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 0.6rem; }
.footer-mark .mk-base, .footer-brand .mk-base { fill: #fff; }

/* ---------------------------------------------------------------- buttons */
/* Moved from business.css so articles, the 404 page and the ad pages share one button. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  font-family: var(--caps);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.btn-primary { background: var(--accent); color: #05070a; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--text); border-color: var(--text); }
.btn-ghost { color: var(--text); border-color: var(--field); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--accent); color: var(--accent); }
.cap-actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ------------------------------------------------------------- skip + focus */

.skip-link {
  position: absolute;
  left: var(--pad, 22px);
  top: 0;
  z-index: 300;
  padding: 0.85rem 1.2rem;
  min-height: 44px;
  background: #e8e6e2;
  color: #05070a;
  font-family: var(--caps, Georgia, serif);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-120%);
}
.skip-link:focus { transform: none; outline: 3px solid #4fbfb8; outline-offset: 2px; }

/* Keyboard users had no visible focus anywhere except the form fields. Mouse clicks do not
   trigger :focus-visible, so this costs the pointer experience nothing. */
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #4fbfb8;
  outline-offset: 3px;
}

/* -------------------------------------------- room for the floating button */

/* The floating "Book a call" button sits over the bottom-right corner; the last line of every
   page gets that much extra room so nothing is hidden underneath it once you reach the end. */
.footer, .legal-footer { padding-bottom: calc(var(--pad, 22px) + 64px); }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* --------------------------------------------------------------- blog list */
/* Each post with its picture (Blog checklist: a preview is a thumbnail, a title and a line). */
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--space-5, 24px);
  align-items: start;
  padding: var(--space-5, 24px) 0;
  border-top: 1px solid var(--rule, #1b2128);
}
.post-card--text { grid-template-columns: minmax(0, 1fr); }
.post-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.post-card h2 { margin-top: 0; }
@media (max-width: 640px) {
  .post-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-3, 12px); }
}

/* ------------------------------------------------------------ end of a post */
/* Blog post checklist: lead conversion content, social sharing, and a way to more writing.
   Share links are plain links; nothing from LinkedIn, Facebook or X loads until a click. */
.post-end { margin-top: var(--space-7, 56px); padding-top: var(--space-6, 40px); border-top: 1px solid var(--rule, #1b2128); }
.post-end .cap-actions { justify-content: flex-start; margin-top: var(--space-4, 16px); }
.post-share { margin-top: var(--space-6, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-4, 16px); }
.post-share a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border-bottom: 1px solid var(--field, #5b5f64); }
.post-more { margin-top: var(--space-4, 16px); }

/* ------------------------------------------------------------ text pages */
/* legal.css styles every link on a text page as an underlined accent link (.legal a). That
   reached the nav, and turned primary buttons into accent text on an accent fill: a solid box
   with no visible words (measured 2026-10-01 on the 404 page, the ad pages and post endings). */
.legal .nav a, .legal a.skip-link { color: inherit; text-decoration: none; }
.legal a.skip-link { color: #05070a; }
.legal a.btn { text-decoration: none; }
.legal a.btn-primary { color: #05070a; }
.legal a.btn-ghost { color: var(--text); }
.legal a.btn-ghost:hover, .legal a.btn-ghost:focus-visible { color: var(--accent); }
.legal .post-share a, .legal .post-more a, .legal .post-thumb { text-decoration: none; }

/* A reading page needs a header you can read through: the floating negative nav sat on top
   of paragraph text once you scrolled. Text pages get a solid bar; the home pages keep the
   floating one over their video. */
body.legal .nav, body:has(> main.legal) .nav {
  mix-blend-mode: normal;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding-top: var(--space-4, 16px);
  padding-bottom: var(--space-4, 16px);
}

/* ----------------------------------------------------- price cards, text pages */
/* .legal p (1.02rem, line-height 1.75, margin-bottom) out-ranks the card's own classes, so on
   the prices pages the price itself rendered at body size and the labels at paragraph size,
   and .pricing-desc's margin-top:auto pinned the first description to the card's bottom edge
   (measured 2026-10-01, marketing.html at 1440). Restated here at .legal specificity. */
.legal .pricing-card p { margin: 0; opacity: 1; }
.legal .pricing-name {
  font-family: var(--caps);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--muted);
  min-height: 0;
}
.legal .pricing-featured .pricing-name { color: var(--accent); }
.legal .pricing-amount {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.7rem);
  line-height: 1.05;
  margin-top: var(--space-3, 12px);
  color: var(--text);
}
.legal .pricing-unit {
  font-family: var(--caps);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: var(--space-3, 12px);
}
.legal .pricing-desc { font-size: 0.95rem; line-height: 1.65; color: var(--body-text, #b4b7bb); margin-top: 0; }
.legal .pricing-desc + .pricing-desc { margin-top: var(--space-3, 12px); }
.legal .pricing-tag { font-size: 0.66rem; letter-spacing: 0.14em; line-height: 1.4; color: var(--bg); margin-bottom: var(--space-2, 8px); }

/* ----------------------------------------------------------- contact area */
/* The four ways to reach us ran together as one line ("Or call us… Or email… Or book…"). One
   per line, and the form's own submit becomes the primary button it is. */
.closing .mail { display: flex; width: fit-content; margin-top: var(--space-2, 8px); }
.closing form + .mail { margin-top: var(--space-6, 40px); }
.contact-form button[type="submit"] {
  background: var(--accent);
  color: #05070a;
  border-color: var(--accent);
  font-family: var(--caps);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-height: 48px;
  padding: 0 1.6rem;
}
.contact-form button[type="submit"]:hover, .contact-form button[type="submit"]:focus-visible { background: var(--text); border-color: var(--text); color: #05070a; }

/* ------------------------------------------------------- phones: solid nav */
/* On a phone the floating negative nav sat on top of every section heading as you scrolled
   ("MARKETINGZ" across "Six practices"). Below 900px every page gets the solid bar the text
   pages use. Desktop keeps the floating nav over the video. Anchor jumps stop below the bar
   instead of under it. */
@media (max-width: 900px) {
  .nav {
    mix-blend-mode: normal;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding-top: var(--space-3, 12px);
    padding-bottom: var(--space-3, 12px);
  }
  main [id], section[id], #main { scroll-margin-top: 96px; }
}

/* ------------------------------------------------------------- newsletter */
/* The weekly briefing sign-up (newsletter.js, api/subscribe.js), in the contact form's field
   language: underlined input, small-caps label. The consent box is a real checkbox, unticked,
   with the whole sentence as its label (CASL: express consent, opt-in). */
.newsletter { margin-top: var(--space-6, 40px); max-width: 34rem; }
.newsletter-lede { margin-top: var(--space-2, 8px); }
.newsletter-label {
  display: block;
  margin-top: var(--space-4, 16px);
  font-family: var(--caps);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.newsletter-row { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); align-items: flex-end; margin-top: var(--space-2, 8px); }
.newsletter input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--field);
  border-radius: 0;
  min-height: 48px;
  padding: 0.5rem 0;
}
.newsletter input[type="email"]:focus { outline: none; border-color: var(--accent); }
.newsletter button[type="submit"] { flex: none; cursor: pointer; }
.newsletter button[type="submit"]:disabled { opacity: 0.5; cursor: default; }
.newsletter-consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: var(--space-4, 16px);
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
}
.newsletter-consent input { flex: none; width: 24px; height: 24px; margin: 0.1rem 0 0; accent-color: var(--accent); cursor: pointer; }
.newsletter-fine { margin-top: var(--space-3, 12px); font-size: 0.82rem; line-height: 1.6; color: var(--muted); }
.newsletter-status { min-height: 1.4em; margin-top: var(--space-2, 8px); font-size: 0.92rem; color: var(--accent); }
.newsletter-status.is-error { color: #d98a7a; }
/* .legal p (font-size, colour, margin) out-ranks single classes, as it did the price cards:
   inside the form it would pull the parts apart and blow the fine print up to body size. */
.legal .newsletter p { margin-bottom: 0; }
.legal .newsletter-fine { font-size: 0.82rem; line-height: 1.6; color: var(--muted); }
.legal .newsletter-status { font-size: 0.92rem; color: var(--accent); }
.legal .newsletter-status.is-error { color: #d98a7a; }

/* Confirmation pages (newsletter-confirmed / infolettre-confirmee): the action sits under the
   left-aligned text, not centred like the home page bands. */
.confirm-actions { justify-content: flex-start; margin-top: var(--space-5, 24px); }

/* ------------------------------------------------------------ post charts */
/* Charts and key figures in the weekly briefing (axis src/agency/briefing-charts.mjs): inline
   SVG coloured by the page's own travelling tokens, so a chart reads as part of the article.
   No chart library and nothing third-party; the numbers are also in a table under each one. */
.post-chart { margin: var(--space-6, 40px) 0; }
.post-chart .pc-svg { display: block; width: 100%; max-width: 34rem; height: auto; overflow: visible; }
.pc-bar--hi { fill: var(--accent); }
.pc-bar--lo { fill: var(--field); }
.pc-label, .pc-tick { fill: var(--muted); font-family: var(--caps); font-size: 12px; letter-spacing: 0.04em; }
.pc-value { fill: var(--text); font-family: var(--body); font-size: 13px; }
.pc-axis { stroke: var(--field); stroke-width: 1; }
.pc-grid { stroke: var(--rule); stroke-width: 1; }
.pc-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pc-line--0 { stroke: var(--accent); } .pc-dot--0 { fill: var(--accent); }
.pc-line--1 { stroke: var(--text); } .pc-dot--1 { fill: var(--text); }
.pc-line--2 { stroke: var(--muted); stroke-dasharray: 5 4; } .pc-dot--2 { fill: var(--muted); }
.pc-legend { list-style: none; padding: 0; margin: var(--space-3, 12px) 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.85rem; color: var(--muted); }
.pc-swatch { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 0.45rem; }
.pc-swatch--0 { background: var(--accent); } .pc-swatch--1 { background: var(--text); } .pc-swatch--2 { background: var(--muted); }
.post-chart figcaption { margin-top: var(--space-3, 12px); display: flex; flex-direction: column; gap: 0.25rem; }
.pc-title { font-family: var(--display); font-size: 1.05rem; color: var(--text); }
.pc-note { font-size: 0.95rem; color: var(--body-text, #b4b7bb); }
.pc-source { font-size: 0.8rem; color: var(--muted); }
.pc-data { margin-top: var(--space-2, 8px); font-size: 0.9rem; }
.pc-data summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-family: var(--caps); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.pc-data table { border-collapse: collapse; margin-top: var(--space-2, 8px); }
.pc-data caption { text-align: left; color: var(--muted); font-size: 0.8rem; padding-bottom: 0.4rem; }
.pc-data th, .pc-data td { text-align: left; padding: 0.35rem 1.2rem 0.35rem 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.pc-data td { color: var(--text); font-variant-numeric: tabular-nums; }

/* Key figures: a row of big numbers, each with its own source. */
.post-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-5, 24px); margin: var(--space-6, 40px) 0; }
.post-stat { border-top: 2px solid var(--accent); padding-top: var(--space-3, 12px); }
/* .legal p out-ranks single classes (as it did the price cards), so these sit at .legal level. */
.legal .post-stat-value, .post-stat-value { font-family: var(--display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1.05; margin: 0; color: var(--text); }
.legal .post-stat-label, .post-stat-label { margin: 0.45rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--body-text, #b4b7bb); }
.legal .post-stat-source, .post-stat-source { margin: 0.45rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
.legal .post-chart figcaption a, .legal .post-stat-source a { color: inherit; }

/* Footer services list and NAP line (2026-10-04): each sits on its own row of the footer. */
.footer-services, .footer-nap { flex-basis: 100%; margin: 0; line-height: 1.6; }
.footer-services-label { margin-right: 0.6rem; opacity: 0.7; }