/* Atelier Chouette — design system.
   Exactly the five brand hexes, no gradients, no tints, no sixth colour.
   Two type weights only: Bricolage Grotesque 500, Inter 400. Never 700. */

:root {
  /* ---- palette: these five, and nothing else ---- */
  --bleu-nuit: #042C53;
  --bleu-chouette: #185FA5;
  --bleu-givre: #85B7EB;
  --ambre: #EF9F27;
  --blanc-neige: #F1EFE8;

  /* Secondary text is a real palette colour, not navy at reduced opacity.
     Opacity-muted navy is a sixth colour by another name. */
  --ink: var(--bleu-nuit);
  --ink-muted: var(--bleu-chouette);

  /* ---- spacing: 4px grid, every value in the sheet snaps to it ---- */
  --s1: 0.25rem;   /*  4px */
  --s2: 0.5rem;    /*  8px */
  --s3: 0.75rem;   /* 12px */
  --s4: 1rem;      /* 16px */
  --s5: 1.5rem;    /* 24px */
  --s6: 2rem;      /* 32px */
  --s7: 3rem;      /* 48px */
  --s8: 4rem;      /* 64px */
  --s9: 6rem;      /* 96px */

  /* ---- type scale: seven steps, widely separated on purpose ---- */
  --fs-xs: 0.8125rem;   /* 13px — footnotes, tick labels */
  --fs-sm: 0.875rem;    /* 14px — labels, eyebrows, notes */
  --fs-base: 1.0625rem; /* 17px — body */
  --fs-md: 1.125rem;    /* 18px — lede */
  --fs-lg: 1.375rem;    /* 22px — contact name, tagline */
  --fs-h2: clamp(1.5rem, 3.5vw, 2rem);
  --fs-h1: clamp(1.9rem, 6vw, 3.1rem);
  --fs-stat: clamp(2.25rem, 5vw, 3rem);

  --radius: 3px;

  --gutter-sm: var(--s5);
  --gutter-md: var(--s7);
  --gutter-lg: 4.5rem;

  /* Motion. Fast in, slow out — symmetric easing is what reads as "default". */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* form controls, scrollbars and tap highlight follow the palette, not the OS */
  color-scheme: light;
  /* no horizontal jump between short and long pages */
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

/* `clip` not `hidden`: hidden silently creates a scroll container that breaks
   position:sticky and scroll anchoring. Nothing here is sticky today — this is
   so it stays that way if something becomes sticky later. */
body {
  overflow-x: clip;
  margin: 0;
  background: var(--blanc-neige);
  color: var(--ink);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.6;
  /* Belt and braces on the no-700 rule: never let the browser fake a bold
     from the 500 file if a <strong> ever escapes the rule below. */
  font-synthesis: none;
}

::selection {
  background: var(--bleu-givre);
  color: var(--bleu-nuit);
}

/* Headings: line-height self-tightens as size grows (the fixed rem part
   shrinks proportionally), so one rule works from 1.5rem to 3.1rem. */
h1, h2, h3 {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  line-height: calc(1em + 0.35rem);
  margin: 0 0 var(--s4);
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.028em;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
}

/* No weight-700 anywhere: emphasis borrows the heading face instead of faux-bold. */
strong, b {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
}

/* Granted: amber may highlight a specific word or phrase outside the CTA, used sparingly. */
.accent { color: var(--ambre); }

/* Every figure on the site uses tabular lining figures. This is a case study
   about numbers — digits that jitter and fail to align undercut the argument. */
.tnum,
.stat-number,
.viz-percent,
.gauge-tick-label,
.timeline-date {
  font-variant-numeric: tabular-nums lining-nums;
}

p {
  margin: 0 0 var(--s5);
  max-width: 32rem;
}

@supports (text-wrap: pretty) {
  p { text-wrap: pretty; }
}

a {
  color: var(--bleu-chouette);
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
  transition: color 0.16s var(--ease-ui);
}

:focus-visible {
  outline: 2px solid var(--bleu-nuit);
  outline-offset: 3px;
  border-radius: var(--radius);
}

:focus:not(:focus-visible) { outline: none; }

ul { padding-left: 1.1em; margin: 0 0 var(--s5); max-width: 32rem; }
li { margin-bottom: var(--s2); }

/* shared underline-reveal: inline links, checklist links, signoff, contact rows */
.link-reveal,
.checklist a,
.signoff a,
.contact-info dd a {
  position: relative;
  text-decoration: none;
}

.link-reveal::after,
.checklist a::after,
.signoff a::after,
.contact-info dd a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease-out);
}

.link-reveal:focus-visible::after,
.checklist a:focus-visible::after,
.signoff a:focus-visible::after,
.contact-info dd a:focus-visible::after {
  transform: scaleX(1);
}

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

.page {
  padding-inline: var(--gutter-sm);
  max-width: 88rem;
  margin-inline: auto;
}

@media (min-width: 700px) {
  .page { padding-inline: var(--gutter-md); }
}

@media (min-width: 1200px) {
  .page { padding-inline: var(--gutter-lg); }
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.015em;
  transition: color 0.16s var(--ease-ui);
}

.wordmark .logo-mark {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.site-header nav a,
.lang-switch a,
.lang-switch span {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--bleu-nuit);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
}

.site-header nav a {
  transition: color 0.2s var(--ease-ui), background-color 0.2s var(--ease-ui),
              transform 0.24s var(--ease-ui);
}

.site-header nav a .icon { width: 0.85em; height: 0.85em; }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--bleu-nuit);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang-switch a,
.lang-switch span {
  border: none;
  border-radius: 0;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-xs);
}

.lang-switch span {
  background: var(--bleu-nuit);
  color: var(--blanc-neige);
}

.lang-switch a { transition: background-color 0.2s var(--ease-ui); }

/* ---------- icons ---------- */

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon-fill { fill: currentColor; stroke: none; }

/* ---------- full-bleed breakout ---------- */

.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

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

.hero-wrap {
  position: relative;
  background: var(--bleu-nuit);
  padding-top: var(--s5);
  padding-bottom: var(--s7);
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(12px);
  transform: scale(1.08);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(241, 239, 232, 0.62);
}

.hero-text {
  position: relative;
  z-index: 1;
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}

.hero-wrap .hero-text {
  padding-top: 0;
  padding-bottom: 0;
}

.eyebrow {
  display: block;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--s3);
}

/* A full sentence set in uppercase stops being a label and becomes a wall.
   Uppercase is for 2–5 words; longer eyebrows stay sentence case. */
.eyebrow.is-sentence {
  text-transform: none;
  letter-spacing: 0.01em;
}

.hero-text h1 { max-width: 18ch; }

.lede {
  font-size: var(--fs-md);
  max-width: 38ch;
  color: var(--ink);
  margin-top: var(--s5);
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: var(--s1) var(--s3);
  background: var(--blanc-neige);
  border: 1px solid var(--bleu-givre);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}

.rating-badge .icon { color: var(--bleu-chouette); width: 0.95em; height: 0.95em; }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s6);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-decoration: none;
}

.scroll-cue .icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform 0.24s var(--ease-ui);
}

/* ---------- sections ---------- */

section {
  padding-block: var(--s7);
  scroll-margin-top: var(--s6);
}

.prose { max-width: 36rem; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.section-number {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.section-head h2 { margin: 0; }

/* ---------- timeline ---------- */

.timeline {
  list-style: none;
  margin: 0 0 var(--s6);
  padding: 0;
  max-width: 26rem;
  position: relative;
}

.timeline-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}

.timeline li {
  position: relative;
  padding: 0 0 var(--s5) 0;
  margin: 0;
}

.timeline li:last-child { padding-bottom: 0; }

.timeline-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.timeline-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--blanc-neige);
  border: 2px solid var(--bleu-chouette);
  flex-shrink: 0;
}

.timeline li.is-current .timeline-dot {
  background: var(--ambre);
  border-color: var(--ambre);
}

.timeline-date {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.timeline-text {
  display: block;
  font-size: var(--fs-base);
  margin: var(--s1) 0 0 calc(11px + var(--s3));
}

/* ---------- checklist ---------- */

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s5);
  max-width: 34rem;
}

.checklist li {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--bleu-givre);
  align-items: flex-start;
  break-inside: avoid;
}

.checklist li:last-child { border-bottom: 1px solid var(--bleu-givre); }

/* optical offset that centres a 1em icon on the first line of 1.6 leading */
.checklist .icon,
.callout .icon {
  color: var(--bleu-chouette);
  margin-top: 0.3em;
}

/* ---------- callout ---------- */

.callout {
  border: 1px solid var(--bleu-chouette);
  padding: var(--s4) var(--s5);
  max-width: 30rem;
  margin: 0;
  display: flex;
  gap: var(--s3);
  height: fit-content;
}

.callout p { margin: 0; max-width: none; font-size: var(--fs-sm); }

/* ---------- data visualisations ----------
   Honest proportions and comparisons only. Every bar's width is the real
   figure; animation changes how it arrives, never what it says. */

.viz {
  margin: 0 0 var(--s6);
  max-width: 30rem;
}

.viz-row { margin-bottom: var(--s5); }
.viz-row:last-child { margin-bottom: 0; }

.viz-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.viz-percent {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.viz-row-text { font-size: var(--fs-sm); }

.viz-row-text small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: 0.1rem;
}

/* Hairlines, not UI progress bars. The numeral carries the value; the rule
   underneath is texture that lets you compare rows at a glance. */
.viz-track,
.viz-split {
  height: 4px;
  background: var(--bleu-givre);
}

.viz-fill {
  height: 100%;
  background: var(--bleu-nuit);
}

.viz-split {
  display: flex;
  overflow: hidden;
}

.viz-split span:first-child { background: var(--bleu-nuit); }
.viz-split span:last-child  { background: var(--bleu-givre); }

.viz-legend {
  display: flex;
  gap: var(--s5);
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.viz-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

.viz-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ---------- funnel ---------- */

.funnel {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s6);
  max-width: 30rem;
}

.funnel-step {
  border: 1px solid var(--bleu-givre);
  padding: var(--s4) var(--s5);
  display: flex;
  align-items: baseline;
  gap: var(--s4);
}

.funnel-step + .funnel-step { border-top: none; }

.stat-number {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-stat);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}

.stat-label {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* The arrow carries the real conversion rate where one is defensible.
   Impressions → clicks is Search Console CTR. Clicks → requests is NOT
   labelled: conversion tracking was never configured, so any rate there
   would assert an attribution the data cannot support. */
.funnel-arrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-muted);
  padding: var(--s2) var(--s5);
  font-size: var(--fs-xs);
}

.funnel-arrow .icon { width: 1.1em; height: 1.1em; }

.funnel-rate {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.funnel-note {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin: var(--s3) 0 0;
  max-width: none;
}

/* ---------- position gauge ---------- */

.gauge {
  margin: 0 0 var(--s6);
  max-width: 30rem;
}

.gauge-title {
  font-size: var(--fs-sm);
  color: var(--ink);
}

.gauge-note {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin: var(--s1) 0 0;
}

.nobreak { white-space: nowrap; }

/* top margin leaves room for the marker flags, which hang above the track */
.gauge-track {
  position: relative;
  height: 4px;
  background: var(--bleu-givre);
  margin-top: 4rem;
}

/* first ten results: the half of the scale that actually gets traffic */
.gauge-page1 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background: var(--bleu-chouette);
}

/* measured scale, not a slider: ticks at results 5, 10 and 15 */
.gauge-tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 10px;
  background: var(--bleu-nuit);
  opacity: 0.35;
}

.gauge-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--blanc-neige);
  box-shadow: 0 0 0 1px var(--bleu-nuit);
}

/* Both markers are navy. They used to be colour-coded to a legend; now that
   each is labelled in place, colour carried no information — and the mid-blue
   one vanished against the mid-blue page-one fill. */
.gauge-marker.is-avg,
.gauge-marker.is-best { background: var(--bleu-nuit); }

/* Markers labelled in place — no colour-to-legend lookup.
   Width is capped so the two labels wrap instead of colliding: the markers
   sit at 35.5% and 71%, so anything wider than ~7rem overlaps at 375px. */
.gauge-flag {
  position: absolute;
  bottom: calc(100% + var(--s3));
  transform: translateX(-50%);
  max-width: 6.5rem;
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
}

.gauge-flag b {
  display: block;
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.gauge-flag small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: var(--s2);
  font-variant-numeric: tabular-nums;
}

/* ---------- CTA ---------- */

.cta-section { padding-block: var(--s8) var(--s9); }

.btn-amber,
.btn-outline {
  display: inline-block;
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  text-decoration: none;
  padding: var(--s4) var(--s6);
  border-radius: var(--radius);
  margin-top: var(--s5);
  transition: background-color 0.2s var(--ease-ui), color 0.2s var(--ease-ui),
              border-color 0.2s var(--ease-ui), transform 0.24s var(--ease-ui);
}

.btn-amber {
  background: var(--ambre);
  color: var(--bleu-nuit);
  border: 1px solid var(--ambre);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--bleu-nuit);
}

.btn-amber:active,
.btn-outline:active { transform: translateY(0); }

.btn-amber .icon, .btn-outline .icon {
  margin-left: var(--s1);
  transition: transform 0.2s var(--ease-ui);
}

/* Both CTA buttons always stack, always match width, always share a left
   edge — at every viewport. Side-by-side made their alignment depend on
   whatever column width a breakpoint happened to leave, which broke twice. */
.cta-grid .btn-amber,
.cta-grid .btn-outline {
  display: block;
  width: 17rem;
  max-width: 100%;
  text-align: center;
}

.signoff {
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--bleu-givre);
  font-size: var(--fs-sm);
}

.signoff a,
.contact-info dd a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

.signoff .tagline {
  display: block;
  margin-top: var(--s3);
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--ink);
}

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

.site-footer {
  padding-block: var(--s6);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  border-top: 1px solid var(--bleu-givre);
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* ---------- contact page ---------- */

.contact-grid { display: block; }

.contact-info { margin-bottom: var(--s6); }

.contact-info .name {
  font-family: 'Bricolage Grotesque', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
  margin-bottom: var(--s2);
}

.contact-info dl { margin: var(--s5) 0 0; }

.contact-info dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-top: var(--s4);
}

.contact-info dd {
  margin: var(--s1) 0 0;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.contact-info dd .icon {
  color: var(--bleu-chouette);
  transition: transform 0.2s var(--ease-ui);
}

/* Scattered decorative owl marks, contact page only. Hand-placed with
   clearance so none ever touch. Kept off the case study: too playful there. */

.contact-main { position: relative; }

.bg-owl {
  position: absolute;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}

.bg-owl-1 { width: 5rem; height: 5rem; top: 1%; left: 90%; }
.bg-owl-2 { width: 8rem; height: 8rem; top: 20%; left: 2%; }
.bg-owl-3 { width: 4rem; height: 4rem; top: 38%; left: 93%; }
.bg-owl-4 { width: 9rem; height: 9rem; top: 62%; left: 1%; }
.bg-owl-5 { width: 6rem; height: 6rem; top: 86%; left: 89%; }

@media (max-width: 700px) {
  /* mobile has no gutter to scatter into — keep the three smallest, at the edge */
  .bg-owl-2, .bg-owl-4 { display: none; }
  .bg-owl-1 { width: 3.5rem; height: 3.5rem; left: 78%; }
  .bg-owl-3 { width: 3rem; height: 3rem; left: 82%; }
  .bg-owl-5 { width: 4rem; height: 4rem; left: 75%; }
}

.response-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--bleu-givre);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}

.response-badge .icon { color: var(--bleu-chouette); width: 0.95em; height: 0.95em; }

form.contact-form { max-width: 30rem; }

.field {
  margin-bottom: var(--s5);
  display: flex;
  flex-direction: column;
}

.field label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--s1);
}

.field input,
.field textarea {
  font-family: 'Inter', Arial, sans-serif;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--blanc-neige);
  border: 1px solid var(--bleu-givre);
  border-radius: var(--radius);
  padding: var(--s3);
  transition: border-color 0.2s var(--ease-ui);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--bleu-chouette);
}

/* only flags a bad value after the field is left, never mid-typing */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--ambre);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--bleu-chouette);
}

.field textarea { resize: vertical; min-height: 8rem; }

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  max-width: 30rem;
  margin-top: var(--s4);
}

.confirmation {
  display: none;
  border-top: 1px solid var(--bleu-givre);
  padding-top: var(--s5);
  max-width: 30rem;
}

body.form-sent .contact-form { display: none; }
body.form-sent .confirmation { display: block; }

/* ---------- desktop ---------- */

@media (min-width: 900px) {
  .hero-text h1 { max-width: 16ch; }
  section { padding-block: var(--s8); }

  .split-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s8);
    align-items: start;
  }

  .checklist.cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s6);
    max-width: 44rem;
  }
  .checklist.cols-2 li:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--bleu-givre);
  }

  .cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 18rem);
    gap: var(--s8);
    align-items: start;
  }

  .cta-grid .signoff {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--bleu-givre);
    padding-left: var(--s6);
  }

  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 26rem);
    gap: var(--s9);
    align-items: start;
  }
  .contact-info { margin-bottom: 0; }
}

/* ---------- hover ----------
   Gated on a real hover-capable pointer so states don't stick after a tap
   on touch devices. Hover is faster than the return trip: fast in, slow out. */

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--bleu-nuit); }

  .link-reveal:hover::after,
  .checklist a:hover::after,
  .signoff a:hover::after,
  .contact-info dd a:hover::after { transform: scaleX(1); }

  .wordmark:hover { color: var(--bleu-chouette); }

  .site-header nav a:hover {
    color: var(--blanc-neige);
    background: var(--bleu-nuit);
    transform: translateY(-2px);
    transition-duration: 0.14s;
  }

  .lang-switch a:hover { background: var(--bleu-givre); }

  /* palette-legal inversion instead of a darkened amber (which was a 6th colour) */
  .btn-amber:hover {
    background: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
    color: var(--ambre);
    transform: translateY(-2px);
    transition-duration: 0.14s;
  }

  .btn-outline:hover {
    background: var(--bleu-nuit);
    color: var(--blanc-neige);
    transform: translateY(-2px);
    transition-duration: 0.14s;
  }

  .btn-amber:hover .icon,
  .btn-outline:hover .icon { transform: translateX(3px); }

  .contact-info dd:hover .icon { transform: scale(1.15); }

  .field input:hover,
  .field textarea:hover { border-color: var(--bleu-chouette); }

  .scroll-cue:hover .icon { transform: translateY(3px); }
}

/* ---------- scroll-in animation ----------
   CSS only, below the fold, transform/opacity only, reduced-motion respected. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* clip-path rather than scaleX: scaling distorts the bar's end geometry,
     while clip keeps it undistorted on the same compositor path. */
  .viz-fill,
  .viz-split span,
  .gauge-page1 {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.9s var(--ease-out);
  }

  .viz.is-visible .viz-fill,
  .viz.is-visible .viz-split span,
  .gauge.is-visible .gauge-page1 {
    clip-path: inset(0 0 0 0);
  }

  /* real 3-step stagger — rows 2 and 3 previously both fired at 0.12s */
  .viz-row:nth-child(2) .viz-fill { transition-delay: 0.09s; }
  .viz-row:nth-child(3) .viz-fill,
  .viz-row:nth-child(3) .viz-split span { transition-delay: 0.18s; }

  .gauge-marker,
  .gauge-flag {
    opacity: 0;
    transition: opacity 0.4s var(--ease-out) 0.45s,
                transform 0.4s var(--ease-out) 0.45s;
  }

  .gauge-marker { transform: translate(-50%, -50%) scale(0.4); }
  .gauge-flag   { transform: translateX(-50%) translateY(4px); }

  .gauge.is-visible .gauge-marker {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .gauge.is-visible .gauge-flag {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .gauge.is-visible .gauge-marker.is-avg,
  .gauge.is-visible .gauge-flag.is-avg { transition-delay: 0.6s; }

  /* Arrows settle once on entry. The old infinite loop read as a widget. */
  .funnel.is-visible .funnel-arrow .icon {
    animation: funnel-drop 0.5s var(--ease-out) both;
  }
  /* arrows are the 2nd and 4th div children of .funnel */
  .funnel.is-visible .funnel-arrow:nth-of-type(4) .icon {
    animation-delay: 0.12s;
  }

  @keyframes funnel-drop {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}