/* ============================================================
   CONCORD MANAGEMENT CONSULTANCY
   Ivory & black editorial system — vanilla CSS, no build step.
   Order: tokens → reset → type → primitives → layout → sections
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette — ivory + black only. No third colour. */
  --ink:        #0A0A0A;
  --ink-2:      #16150F;
  --ivory:      #F5F2E9;
  --ivory-2:    #EDE9DC;
  --muted:      #33312A;   /* body text on ivory - darkened for readability */
  --muted-inv:  #D9D5C9;   /* body text on ink   - lightened for readability */
  --line:       rgba(10, 10, 10, .16);
  --line-soft:  rgba(10, 10, 10, .08);
  --line-inv:   rgba(245, 242, 233, .18);
  --line-inv-soft: rgba(245, 242, 233, .09);

  /* Type.
     Sabon is a licensed desktop/web font and is not served by Google Fonts.
     It is listed first so it is used wherever it is installed or self-hosted;
     EB Garamond (same Garamond lineage) carries the design everywhere else.
     See README → "Fonts" to self-host the real Sabon. */
  --font-display: "Sabon", "Sabon Next LT", "Sabon LT Std", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Futura", "Century Gothic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale */
  --fs-display-1: clamp(2.4rem, 11.5vw, 10.5rem);
  --fs-display-2: clamp(2.9rem, 7vw, 6rem);
  --fs-display-3: clamp(2.1rem, 3.9vw, 3.35rem);
  --fs-h3:        clamp(1.35rem, 2vw, 1.75rem);
  --fs-lede:      clamp(1.15rem, 1.5vw, 1.45rem);
  --fs-body:      clamp(1.02rem, 1.1vw, 1.14rem);
  --fs-small:     .95rem;
  --fs-micro:     .78rem;
  --fs-nav:       .72rem;   /* nav bar only, so the larger micro size cannot crowd it */
  --fs-eyebrow:   clamp(.82rem, 1vw, .96rem);

  /* Spacing scale */
  --sp-1: .5rem;   --sp-2: .875rem; --sp-3: 1.25rem; --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4.5rem;  --sp-7: 7rem;    --sp-8: 10rem;
  --section-y: clamp(5rem, 11vw, 10.5rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --shell: 1440px;

  /* Consistent geometry — this brand is sharp, not rounded. */
  --radius: 0px;
  --radius-sm: 0px;
  --border: 1px;

  --shadow-1: 0 1px 2px rgba(10,10,10,.05);
  --shadow-2: 0 18px 48px -24px rgba(10,10,10,.35);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .22s;
  --dur-2: .45s;
  --dur-3: .9s;

  --header-h: 84px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: var(--border) solid var(--line); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--ivory); }

::selection { background: var(--ink); color: var(--ivory); }
.section--dark ::selection, .site-footer ::selection { background: var(--ivory); color: var(--ink); }

.skip-link {
  position: fixed; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--ink); color: var(--ivory);
  padding: .75rem 1.25rem;
  font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: 1rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 3. Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.display em { font-style: italic; }
.display--2 { font-size: var(--fs-display-2); }
.display--3 { font-size: var(--fs-display-3); line-height: 1.05; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--muted);
}
.section--dark .lede { color: var(--muted-inv); }

p { color: var(--muted); }
.section--dark p { color: var(--muted-inv); }

.eyebrow {
  display: flex; align-items: center; gap: .9rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow--light { color: var(--ivory); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-small); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: .35rem;
  border-bottom: var(--border) solid var(--line);
  transition: border-color var(--dur-1) var(--ease), gap var(--dur-1) var(--ease);
}
.link-arrow__ico { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover { border-color: currentColor; }
.link-arrow:hover .link-arrow__ico { transform: translateX(5px); }

/* ---------- 4. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--dark { background: var(--ink); color: var(--ivory); }
.section--dark .display { color: var(--ivory); }

.section__head { max-width: 62ch; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__head .display { margin-top: var(--sp-3); }
.section__intro { margin-top: var(--sp-3); max-width: 52ch; }
.section__head--center .section__intro { margin-inline: auto; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-bd: currentColor;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: .9rem 2.1rem;
  border: var(--border) solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
/* wipe fill on hover — one shared treatment across the site */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill, var(--ivory));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }

.btn--solid { --btn-bg: var(--ivory); --btn-fg: var(--ink); --btn-bd: var(--ivory); --btn-fill: transparent; }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--ivory); background: transparent; }

.btn--ghost { --btn-fg: var(--ivory); --btn-bd: rgba(245,242,233,.5); --btn-fill: var(--ivory); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: var(--ivory); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--ivory); --btn-bd: var(--ink); --btn-fill: transparent; }
.btn--dark:hover, .btn--dark:focus-visible { color: var(--ink); background: transparent; }

/* ---------- 6. Header & navigation ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: 2px; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--ivory);
  transform: scaleX(0); transform-origin: left;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.scroll-progress.is-on span { opacity: 1; }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  color: var(--ivory);
  /* black liquid glass — translucent ink + blur, at every scroll position */
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: var(--border) solid rgba(245, 242, 233, .10);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
/* no backdrop-filter (older Firefox): fall back to solid ink so it is never see-through */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(10, 10, 10, .94); }
}
.header__inner {
  /* deliberately NOT .shell — on a 2560px screen a centred 1440px bar leaves the
     logo stranded mid-air. Full bleed, gutter padding, logo pinned left. */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
}
.header__right {
  display: flex; align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.75rem);
}

/* transparent-over-hero → solid on scroll */
.site-header { color: var(--ivory); }
.site-header.is-stuck {
  /* over ivory sections it has to read as black, not grey */
  background: rgba(10, 10, 10, .90);
  border-bottom-color: rgba(245, 242, 233, .16);
}

.logo { display: flex; align-items: center; gap: .8rem; }
.logo__mark {
  width: auto; height: 52px;
  fill: currentColor;
  flex: none;
}
.logo__type { display: grid; gap: .18em; }
.logo__name {
  font-family: var(--font-display);
  font-size: 1.62rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  line-height: 1;
}
.logo__sub {
  font-size: .58rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  line-height: 1; opacity: .82;
}

.nav__list { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.nav__link {
  position: relative;
  display: block;
  padding: .5rem 0;
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .88;
  transition: opacity var(--dur-1) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__link:hover, .nav__link.is-active { opacity: 1; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.burger { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 0; min-height: 44px; }
.burger__box { display: block; width: 26px; height: 12px; position: relative; }
.burger__box i {
  position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease);
}
.burger__box i:first-child { top: 0; }
.burger__box i:last-child { bottom: 0; }
.burger[aria-expanded="true"] .burger__box i:first-child { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:last-child { transform: translateY(-5.5px) rotate(-45deg); }


/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* avoids the mobile URL-bar jump */
  display: flex; align-items: flex-end;
  padding-block: calc(var(--header-h) + 3rem) clamp(5rem, 12vh, 8rem);
  background: var(--ink);           /* fallback if the photo is missing */
  color: var(--ivory);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }

/* Fallback backdrop: a stone-arch silhouette drawn in CSS, visible when
   assets/hero-arches.jpg is absent or still loading. */
.hero__media::before {
  content: ""; position: absolute; inset: 0;
  background-color: #14120E;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201600%201000%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22s%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%234A4335%22/%3E%3Cstop%20offset=%22.6%22%20stop-color=%22%232B2620%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%231A1713%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22t%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%238A8069%22%20stop-opacity=%22.8%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%233A342A%22%20stop-opacity=%22.95%22/%3E%3C/linearGradient%3E%3CradialGradient%20id=%22glow%22%20cx=%22.5%22%20cy=%22.62%22%20r=%22.55%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%236B5F45%22%20stop-opacity=%22.55%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%236B5F45%22%20stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width=%221600%22%20height=%221000%22%20fill=%22url(%23s)%22/%3E%3Crect%20width=%221600%22%20height=%221000%22%20fill=%22url(%23glow)%22/%3E%3Cg%20fill=%22url(%23t)%22%3E%3Crect%20x=%22120%22%20y=%22470%22%20width=%22120%22%20height=%22530%22/%3E%3Crect%20x=%22250%22%20y=%22330%22%20width=%22150%22%20height=%22670%22/%3E%3Crect%20x=%22390%22%20y=%22540%22%20width=%22100%22%20height=%22460%22/%3E%3Crect%20x=%22660%22%20y=%22300%22%20width=%22130%22%20height=%22700%22/%3E%3Crect%20x=%22790%22%20y=%22190%22%20width=%22160%22%20height=%22810%22/%3E%3Crect%20x=%22950%22%20y=%22410%22%20width=%22120%22%20height=%22590%22/%3E%3Crect%20x=%221180%22%20y=%22360%22%20width=%22140%22%20height=%22640%22/%3E%3Crect%20x=%221330%22%20y=%22240%22%20width=%22150%22%20height=%22760%22/%3E%3Crect%20x=%221480%22%20y=%22500%22%20width=%22110%22%20height=%22500%22/%3E%3C/g%3E%3Cpath%20d=%22M0%200H1600V1000H0ZM80%201000L80%20520Q80%20255%20280%20165Q480%20255%20480%20520L480%201000ZM600%201000L600%20520Q600%20255%20800%20165Q1000%20255%201000%20520L1000%201000ZM1120%201000L1120%20520Q1120%20255%201320%20165Q1520%20255%201520%20520L1520%201000Z%22%20fill=%22%230C0B09%22%20fill-rule=%22evenodd%22/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease-out);
  will-change: transform;
}
.hero__img.is-loaded { opacity: 1; transform: scale(1); }

/* Gradient scrim — guarantees headline contrast over any photograph. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,10,10,.72) 0%,
      rgba(10,10,10,.34) 26%,
      rgba(10,10,10,.42) 52%,
      rgba(10,10,10,.86) 88%,
      rgba(10,10,10,.94) 100%),
    linear-gradient(94deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.12) 62%, rgba(10,10,10,.34) 100%);
}
.hero__grain {
  position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.012em;
  text-transform: uppercase;
  margin-block: clamp(1.2rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: block; }

/* Outlined display word. Solid fill is the fallback; the stroke is applied
   only where -webkit-text-stroke is actually supported. */
.outline { color: var(--ivory); }
@supports (-webkit-text-stroke: 1px currentColor) {
  .outline {
    color: transparent;
    -webkit-text-stroke: clamp(1.3px, .17vw, 2.6px) var(--ivory);
    paint-order: stroke fill;
  }
}

.hero__lede {
  max-width: 46ch;
  font-size: var(--fs-lede);
  color: rgba(245, 242, 233, .93);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: clamp(2rem, 4vw, 3rem); }


/* ---------- 8. About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head body" "head stat";
  column-gap: clamp(2rem, 7vw, 7rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.about__head { grid-area: head; }
.about__body { grid-area: body; display: grid; gap: var(--sp-3); justify-items: start; }
.about__body .link-arrow { margin-top: var(--sp-2); }
.about__head .display { margin-top: var(--sp-3); }

.stat {
  grid-area: stat;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  margin-top: var(--sp-3);
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.stat__aside { display: grid; }
.stat__figure {
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 7vw, 6rem);
  line-height: .9; letter-spacing: -.04em;
  color: var(--ivory);
  display: flex; align-items: flex-start;
}
.stat__unit { font-size: .42em; margin-top: .28em; margin-left: .06em; opacity: .6; }
.stat__label {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ivory);
}
.stat__rule { margin-block: var(--sp-2); border-top-color: var(--line-inv); }
.stat__note { font-size: var(--fs-small); color: var(--muted-inv); max-width: 42ch; }

/* ---------- 9. Services ---------- */
/* Hairline grid: one shared rule between cells, no boxed cards. */
.grid-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--border);
  background: var(--line-inv-soft);
  border-block: var(--border) solid var(--line-inv-soft);
}
.svc { background: var(--ink); }
.svc__btn {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  width: 100%;
  min-height: 268px;
  padding: clamp(1.75rem, 2.6vw, 2.75rem);
  text-align: left;
  color: var(--ivory);
  grid-template-rows: 1fr auto;
  isolation: isolate;
  transition: color var(--dur-2) var(--ease);
}
.svc__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ivory);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dur-2) var(--ease-out);
}
.svc__btn:hover, .svc__btn:focus-visible { color: var(--ink); }
.svc__btn:hover::before, .svc__btn:focus-visible::before { transform: scaleY(1); }


.svc__body { display: grid; gap: .6rem; align-content: start; }
.svc__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: .01em;
  line-height: 1.2;
}
.svc__desc { font-size: var(--fs-small); color: var(--muted-inv); transition: color var(--dur-2) var(--ease); max-width: 34ch; }
.svc__btn:hover .svc__desc, .svc__btn:focus-visible .svc__desc { color: var(--muted); }

.svc__more {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  opacity: .65;
  transition: opacity var(--dur-2) var(--ease), gap var(--dur-2) var(--ease);
}
.svc__btn:hover .svc__more, .svc__btn:focus-visible .svc__more { opacity: 1; gap: .95rem; }


/* ---------- 10. Why Concord ---------- */
.grid-why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.pillar {
  display: grid; gap: var(--sp-2); align-content: start;
  padding-top: var(--sp-4);
  border-top: var(--border) solid var(--line);
}

.pillar__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 400;
  letter-spacing: .01em;
  margin-top: var(--sp-1);
}
.pillar__desc { font-size: var(--fs-small); color: var(--muted); max-width: 30ch; }

/* ---------- 11. Testimonials ---------- */
.quotes__stage { position: relative; max-width: 62rem; margin-inline: auto; text-align: center; }
.quotes__mark {
  height: 44px; width: auto; fill: var(--ivory); opacity: .28;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
}
.quotes__viewport { position: relative; display: grid; }
.quote {
  grid-area: 1 / 1;
  display: grid; gap: var(--sp-4);
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
  pointer-events: none;
}
.quote.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.9vw, 2.35rem);
  font-weight: 400; font-style: italic;
  line-height: 1.32; letter-spacing: -.015em;
  color: var(--ivory);
  text-wrap: balance;
}
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after  { content: "\201D"; }
.quote figcaption { display: grid; gap: .3rem; }
.quote__name {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ivory);
}
.quote__role { font-size: var(--fs-small); color: var(--muted-inv); }

.quotes__nav {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.qbtn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: var(--border) solid var(--line-inv);
  color: var(--ivory);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.qbtn:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.quotes__dots { display: flex; align-items: center; gap: .55rem; }
.qdot {
  width: 30px; height: 44px;
  position: relative;
}
.qdot::after {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 100%; height: 1px; background: var(--ivory); opacity: .3;
  transition: opacity var(--dur-1) var(--ease), height var(--dur-1) var(--ease);
}
.qdot.is-active::after { opacity: 1; height: 2px; }

/* ---------- 12. Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: start;
}
.contact__intro .display { margin-top: var(--sp-3); }
.contact__intro .lede { margin-top: var(--sp-3); max-width: 44ch; }

.details { margin-top: clamp(2.25rem, 4vw, 3.25rem); display: grid; }
.details__row {
  display: grid;
  grid-template-columns: minmax(88px, 130px) 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-top: var(--border) solid var(--line);
}
.details__row:last-child { border-bottom: var(--border) solid var(--line); }
.details dt {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
}
.details dd { font-size: var(--fs-small); color: var(--muted); }
.details dd a {
  border-bottom: var(--border) solid var(--line);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.details dd a:hover { color: var(--ink); border-color: var(--ink); }

/* Form */
.form { display: grid; gap: var(--sp-3); }
.field { display: grid; gap: .5rem; }
.field label {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
}
.field input, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: .85rem 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border) solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  transition: border-color var(--dur-1) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(51, 49, 42, .62); }
.field input:hover, .field textarea:hover { border-bottom-color: rgba(10,10,10,.34); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.field__err {
  font-size: .85rem; color: var(--ink); opacity: 0;
  height: 0; overflow: hidden;
  transition: opacity var(--dur-1) var(--ease);
}
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--ink); border-bottom-width: 2px; }
.field.is-invalid .field__err { opacity: .9; height: auto; padding-top: .15rem; }
.field.is-invalid label { text-decoration: underline; text-underline-offset: 4px; }

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

.form__submit { margin-top: var(--sp-2); justify-self: start; min-width: 220px; }
.form__submit[disabled] { opacity: .55; cursor: progress; }
.form__spinner {
  display: none;
  width: 14px; height: 14px; margin-left: .7rem;
  border: 1px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.form.is-sending .form__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  font-size: var(--fs-small);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line);
  min-height: 0;
  opacity: 0; height: 0; overflow: hidden;
  transition: opacity var(--dur-2) var(--ease);
}
.form__status.is-shown { opacity: 1; height: auto; padding-block: .35rem; }
.form__status.is-ok { border-left-color: var(--ink); color: var(--ink); }
.form__status.is-error { border-left-color: var(--ink); color: var(--ink); }

/* ---------- 13. Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--ivory);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
}
.footer__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.footer__cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.fcol__title {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ivory); margin-bottom: var(--sp-2);
}
.fcol ul { display: grid; gap: .5rem; }
.fcol a { font-size: var(--fs-small); color: var(--muted-inv); transition: color var(--dur-1) var(--ease); }
.fcol a:hover { color: var(--ivory); }


/* brand, centred and low on the page */
.footer__brand {
  justify-self: center; text-align: center;
  display: grid; justify-items: center; gap: 1.1rem;
  margin-top: clamp(1rem, 3vw, 2.5rem);
}
.footer__brand .logo__mark { height: clamp(46px, 6vw, 64px); width: auto; fill: currentColor; }
.footer__brand .logo__type { display: grid; gap: .3em; justify-items: center; }
.footer__brand .logo__name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.75rem); font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
}
.footer__brand .logo__sub {
  font-size: clamp(.5rem, .9vw, .62rem); letter-spacing: .38em;
  text-transform: uppercase; line-height: 1; opacity: .72;
}

.footer__rule { width: 100%; border-top-color: var(--line-inv); }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
  width: 100%; font-size: .85rem; color: var(--muted-inv);
}

/* ---------- 14. Dropdown navigation ---------- */
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: .45rem; }

.nav__caret {
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  opacity: .7;
  transition: rotate var(--dur-2) var(--ease), translate var(--dur-2) var(--ease);
}
.has-menu:hover .nav__caret,
.has-menu:focus-within .nav__caret { rotate: 225deg; translate: 0 1px; }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 246px;
  padding: .5rem;
  background: rgba(10, 10, 10, .88);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: var(--border) solid rgba(245, 242, 233, .16);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden;
  transform: translateY(-7px);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease-out),
              visibility var(--dur-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu { background: rgba(10, 10, 10, .97); }
}
/* a small bridge so the pointer can cross the gap without the panel closing */
.menu::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 14px; }

.has-menu:hover .menu,
.has-menu:focus-within .menu,
.nav__item.is-open .menu {
  opacity: 1; visibility: visible; transform: none;
}

.menu__list { display: grid; }
.menu__list a {
  display: block;
  padding: .7rem .9rem;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 242, 233, .78);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              padding-left var(--dur-1) var(--ease);
}
.menu__list a:hover, .menu__list a:focus-visible {
  background: rgba(245, 242, 233, .1);
  color: var(--ivory);
  padding-left: 1.25rem;
}

/* ---------- 14b. Site menu panel ----------
   One panel, two behaviours:
   • wide screens — a full-screen overview of every page and section
   • phones       — a sidebar that slides in from the left and covers the screen */
.menu-panel {
  position: fixed; inset: 0; z-index: 105;
  background: var(--ink);
  color: var(--ivory);
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2);
}
.menu-panel[hidden] { display: none; }
.menu-panel.is-open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

.menu-panel__inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  display: grid; gap: clamp(2rem, 4vw, 3.25rem);
  align-content: start;
}
.menu-panel__eyebrow {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted-inv);
}

.menu-panel__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: var(--border) solid var(--line-inv-soft);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.mgroup {
  display: grid; gap: var(--sp-2); align-content: start;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease-out);
}
.menu-panel.is-open .mgroup { opacity: 1; transform: none; }
.menu-panel.is-open .mgroup:nth-child(1) { transition-delay:  90ms; }
.menu-panel.is-open .mgroup:nth-child(2) { transition-delay: 150ms; }
.menu-panel.is-open .mgroup:nth-child(3) { transition-delay: 210ms; }
.menu-panel.is-open .mgroup:nth-child(4) { transition-delay: 270ms; }
.menu-panel.is-open .mgroup:nth-child(5) { transition-delay: 330ms; }

.mgroup__title {
  /* reserve two lines so a wrapping title ("Why Concord") does not push its
     sub-list out of line with the neighbouring columns */
  min-height: 2.3em;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  font-weight: 400; line-height: 1.15;
  letter-spacing: .03em; text-transform: uppercase;
  padding-bottom: .2rem;
}
.mgroup__title.is-active { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.mgroup__list { display: grid; gap: .1rem; }
.mgroup__list a {
  display: block; padding: .4rem 0; min-height: 34px;
  font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-inv);
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease);
}
.mgroup__list a:hover, .mgroup__list a:focus-visible { color: var(--ivory); padding-left: .5rem; }

.menu-panel__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  border-top: var(--border) solid var(--line-inv-soft);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.menu-panel__mail {
  font-size: var(--fs-small); color: var(--muted-inv);
  border-bottom: var(--border) solid var(--line-inv);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.menu-panel__mail:hover { color: var(--ivory); border-color: var(--ivory); }

/* ---------- 14c. Inner-page hero ---------- */
.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--ivory);
  padding-block: calc(var(--header-h) + clamp(3.5rem, 9vw, 7rem)) clamp(3.5rem, 8vw, 6.5rem);
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 130% at 12% 0%, rgba(107, 95, 69, .3) 0%, rgba(10, 10, 10, 0) 62%);
}
.page-hero > * { position: relative; }
.page-hero--short { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.display--1b {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  font-weight: 400; line-height: .96; letter-spacing: -.02em;
  color: var(--ivory);
  margin-top: var(--sp-3);
}
.display--1b em { font-style: italic; }
.page-hero__lede {
  margin-top: var(--sp-3);
  max-width: 48ch;
  font-size: var(--fs-lede);
  color: rgba(245, 242, 233, .8);
}

/* ---------- 14d. Split layout (aside + body) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 7vw, 7rem);
  row-gap: var(--sp-4);
  align-items: start;
}
.split__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
.split__aside .display { margin-top: var(--sp-3); }
.split__body { display: grid; gap: var(--sp-3); justify-items: start; }

.note { font-size: var(--fs-small); }
.note a { border-bottom: var(--border) solid var(--line); }
.note a:hover { border-color: currentColor; }

.factgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; width: 100%; margin-top: var(--sp-3);
  border-top: var(--border) solid var(--line);
}
.factgrid > div { padding-block: var(--sp-3); border-bottom: var(--border) solid var(--line); }
.factgrid dt {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.factgrid dd { font-family: var(--font-display); font-size: 1.25rem; margin-top: .3rem; }

/* ---------- 14e. Team ---------- */
.grid-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.member {
  /* an implicit `auto` track sizes to max-content and can exceed the column,
     pushing the card past the gutter on narrow screens */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .5rem; align-content: start;
}
.member > * { min-width: 0; }
.member__portrait {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  background: rgba(245, 242, 233, .05);
  border: var(--border) solid var(--line-inv-soft);
  margin-bottom: var(--sp-2);
}
.member__portrait svg { height: 34%; width: auto; fill: rgba(245, 242, 233, .2); }
.member__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; }
.member__role {
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory); opacity: .75;
}
.member__bio { font-size: var(--fs-small); color: var(--muted-inv); }

/* ---------- 14f. Careers ---------- */
.openings { width: 100%; border-top: var(--border) solid var(--line); }
.opening {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-bottom: var(--border) solid var(--line);
  transition: padding-left var(--dur-2) var(--ease);
}
.opening:hover { padding-left: .75rem; }
.opening__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; }
.opening__meta { font-size: var(--fs-small); color: var(--muted); margin-top: .2rem; }
.opening__cta {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.opening__cta span { transition: transform var(--dur-2) var(--ease-out); }
.opening:hover .opening__cta span { transform: translateX(5px); }

/* ---------- 14g. Services page ---------- */
.jump {
  position: sticky; top: var(--header-h); z-index: 90;
  background: var(--ivory);
  border-bottom: var(--border) solid var(--line-soft);
}
.jump__inner {
  display: flex; gap: clamp(1rem, 2.4vw, 2.4rem);
  overflow-x: auto; scrollbar-width: none;
  padding-block: var(--sp-2);
}
.jump__inner::-webkit-scrollbar { display: none; }
.jump__link {
  flex: none; min-height: 44px; display: inline-flex; align-items: center;
  font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.jump__link:hover, .jump__link.is-active { color: var(--ink); border-bottom-color: var(--ink); }

.svc-row { border-bottom: var(--border) solid var(--line); scroll-margin-top: calc(var(--header-h) + 60px); }
.svc-row__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 7vw, 7rem); row-gap: var(--sp-4); align-items: start;
}
.svc-row--flip .svc-row__lead { order: 2; }
.svc-row--flip .svc-row__body { order: 1; }

.svc-row__lead .lede { margin-top: var(--sp-3); }
.svc-row__body { display: grid; gap: var(--sp-3); justify-items: start; }
.svc-row__label {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink);
}
.ticklist { display: grid; gap: .6rem; width: 100%; }
.ticklist li {
  display: grid; grid-template-columns: 14px 1fr; gap: .85rem; align-items: start;
  font-size: var(--fs-small); color: var(--muted);
}
.ticklist li::before {
  content: ""; width: 8px; height: 8px; margin-top: .58em; background: var(--ink); rotate: 45deg;
}
.section--dark .ticklist li::before { background: var(--ivory); }

.custom { text-align: center; display: grid; justify-items: center; gap: var(--sp-3); }
.custom__plus {
  font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(245, 242, 233, .5);
}
@supports not (-webkit-text-stroke: 1px currentColor) { .custom__plus { color: rgba(245,242,233,.4); } }
.custom .lede { max-width: 52ch; }

/* ---------- 14h. Why Concord page ---------- */
.steps { display: grid; gap: var(--sp-4); width: 100%; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.step__num {
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(10, 10, 10, .4);
}
@supports not (-webkit-text-stroke: 1px currentColor) { .step__num { color: rgba(10,10,10,.35); } }
.step__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; margin-bottom: .4rem; }
.step p { font-size: var(--fs-small); }

.grid-results {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--border); background: var(--line-inv-soft);
  border-block: var(--border) solid var(--line-inv-soft);
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.result { background: var(--ink); padding: clamp(1.5rem, 2.6vw, 2.5rem); display: grid; gap: .45rem; }
.result__figure {
  font-family: var(--font-display); font-size: clamp(3rem, 5.5vw, 4.5rem); line-height: .9;
  letter-spacing: -.03em; color: var(--ivory); display: flex; align-items: flex-start;
}
.result__unit { font-size: .4em; margin-top: .35em; margin-left: .08em; opacity: .6; }
.result__title {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ivory); margin-top: .3rem;
}
.result__desc { font-size: var(--fs-small); color: var(--muted-inv); }

.quotes__stage--compact { max-width: 54rem; }
.quotes__stage--compact .quote blockquote { font-size: clamp(1.25rem, 2.3vw, 1.85rem); }

.phases { display: grid; gap: 0; width: 100%; border-top: var(--border) solid var(--line); }
.phase { padding-block: var(--sp-3); border-bottom: var(--border) solid var(--line); }
.phase__title {
  display: flex; align-items: baseline; gap: .9rem;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; margin-bottom: .4rem;
}
.phase__num { font-size: .72em; color: var(--muted); }
.phase p { font-size: var(--fs-small); max-width: 62ch; }

/* ---------- 14i. CTA band ---------- */
.cta { background: var(--ink); color: var(--ivory); padding-block: clamp(4rem, 9vw, 7rem); }
.cta__inner { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); }
.cta .display { color: var(--ivory); }
.cta p { color: var(--muted-inv); }
.cta .btn { margin-top: var(--sp-2); }

/* ---------- 14j. Contact page ---------- */
.mapcard {
  display: grid; width: 100%; margin-top: clamp(2rem, 4vw, 3rem);
  border: var(--border) solid var(--line);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.mapcard:hover { border-color: var(--ink); transform: translateY(-3px); }
.mapcard__art { display: block; overflow: hidden; }
.mapcard__art svg { width: 100%; height: auto; display: block; }
.mapcard__body {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-3);
  border-top: var(--border) solid var(--line);
}
.mapcard__title { font-family: var(--font-display); font-size: 1.2rem; }
.mapcard__meta {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.mapcard:hover .mapcard__meta { color: var(--ink); }

.contact__form-wrap .eyebrow { margin-bottom: var(--sp-3); }
.field__opt { font-weight: 300; letter-spacing: .06em; text-transform: none; opacity: .6; }
.field select {
  width: 100%; min-height: 52px; padding: .85rem 0;
  background: transparent; border: 0;
  border-bottom: var(--border) solid var(--line);
  border-radius: var(--radius-sm); font-size: var(--fs-body);
  transition: border-color var(--dur-1) var(--ease);
}
.field select:hover { border-bottom-color: rgba(10, 10, 10, .34); }
.field select:focus { outline: none; border-bottom-color: var(--ink); border-bottom-width: 2px; }
.form__privacy { font-size: .85rem; color: var(--muted); opacity: 1; }


/* ---------- 16. Responsive ---------- */
@media (max-width: 1180px) {
  .menu-panel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-4); }
}

@media (max-width: 1080px) {
  .grid-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }

  /* the dropdown bar goes; the burger (already always visible) takes over */
  .nav { display: none; }

  /* panel enters from the left edge and covers the screen */
  .menu-panel {
    opacity: 1;
    transform: translateX(-100%);
    transition: transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
  }
  .menu-panel.is-open { transform: translateX(0); }
  .menu-panel__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .mgroup__title { min-height: 0; }
  .menu-panel__foot { flex-direction: column; align-items: stretch; text-align: center; }
  .menu-panel__foot .btn { width: 100%; }
  .mgroup__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split, .svc-row__inner { grid-template-columns: minmax(0, 1fr); }
  .split__aside { position: static; }
  .svc-row--flip .svc-row__lead,
  .svc-row--flip .svc-row__body { order: 0; }
  .grid-results { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jump { top: var(--header-h); }

  .about__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "stat";
  }
  .stat { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); align-items: start; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .section__head { max-width: none; }
}

@media (max-width: 640px) {
  .grid-services { grid-template-columns: minmax(0, 1fr); }
  .grid-why { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .svc__btn { min-height: 0; gap: var(--sp-2); }
  .grid-team { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .mgroup__list { grid-template-columns: minmax(0, 1fr); }

  .member__portrait { aspect-ratio: 16 / 9; }
  .factgrid { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .opening { flex-direction: column; align-items: flex-start; }
  .step { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .mapcard__body { flex-direction: column; align-items: flex-start; }
  .cta .btn, .custom .btn { width: 100%; }
  .hero { min-height: 92svh; align-items: flex-end; }
  .hero__actions .btn { flex: 1 1 100%; }
  .footer__legal { flex-direction: column; align-items: center; text-align: center; }
  .logo__sub { font-size: .52rem; letter-spacing: .24em; }
  .details__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}

@media (max-width: 380px) {
  .logo__name { font-size: 1.25rem; }
  .logo__mark { height: 38px; }
  .logo__sub { display: none; }
}

/* Coarse pointers: don't strand hover-only affordances. */
@media (hover: none) {
  .svc__more { opacity: 1; }
  .link-arrow { border-color: currentColor; }
  .opening__cta { border-bottom: var(--border) solid var(--line); }
}

/* ---------- 17. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .mgroup { opacity: 1 !important; transform: none !important; }
  .menu-panel { transition: none; }
  .hero__title .line > [data-reveal],
  .hero__title .line > [data-reveal].is-in { transform: none !important; }
  .hero__img { opacity: 1; transform: none; }
}

/* ---------- 18. Print ---------- */
@media print {
  .site-header, .menu-panel, .scroll-progress, .quotes__nav, .form__submit, .jump { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .site-footer, .stat, .page-hero, .cta { background: #fff !important; color: #000 !important; }
  .section--dark p, .stat__note, .page-hero__lede { color: #333 !important; }
  .display, .section--dark .display, .page-hero .display { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ============================================================
   19. Motion system
   Scroll reveal, page transitions and click/hover feedback.
   NOTE: main.js has always set .is-in on [data-reveal] elements,
   but nothing styled them — the reveals below are what that
   existing script was written to drive.
   ============================================================ */

/* --- Scroll reveal ---
   The hidden state is scoped to html.js (set by an inline script in each
   page head) so a blocked or failed script can never leave content
   invisible — without JS these elements simply render as normal. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .8s var(--ease) var(--reveal-delay, 0ms),
    transform .8s var(--ease-out) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero headline: each word rises out of its own clipping line. */
.js .hero__title .line > [data-reveal] { transform: translateY(105%); }
.js .hero__title .line > [data-reveal].is-in { transform: none; }

/* Eyebrow labels draw their rule out beside the text as they enter. */
.eyebrow::before {
  content: ""; display: block; flex: none;
  width: clamp(26px, 4vw, 52px); height: 1px;
  background: currentColor; opacity: .6;
  transform-origin: left;
  transition: transform .7s var(--ease-out) var(--reveal-delay, 0ms);
}
.section__head--center .eyebrow::before { transform-origin: center; }
.js .eyebrow::before { transform: scaleX(0); }
.js .eyebrow.is-in::before { transform: scaleX(1); }

/* --- Page transition veil ---
   Injected by main.js, so it does not exist if the script never runs and
   can never be left covering the page. Always click-through. */
.page-veil {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink);
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s var(--ease);
}
.page-veil.is-clear   { opacity: 0; }
.page-veil.is-leaving { opacity: 1; transition-duration: .28s; }

/* --- Click + hover feedback --- */
.btn {
  transition: color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
}
.btn:active { transform: scale(.985); }

.svc__btn {
  transition: color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.svc__btn:active { transform: scale(.995); }

.qbtn:active { transform: scale(.94); }

.logo { transition: opacity var(--dur-2) var(--ease); }
.logo:hover { opacity: .82; }

.fcol a { display: inline-block; transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.fcol a:hover { transform: translateX(3px); }

.link-arrow:active, .opening:active { transform: scale(.995); }

/* ============================================================
   20. Header — larger logo, self-evident menu button
   ============================================================ */

/* The burger is bordered and shimmers on a slow loop so it reads as a
   control rather than three decorative lines. */
.burger {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0;
  width: 54px; height: 44px; min-height: 44px;
  padding: 0;
  border: var(--border) solid rgba(245, 242, 233, .3);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.burger::before {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg,
    rgba(245, 242, 233, 0) 0%,
    rgba(245, 242, 233, .5) 50%,
    rgba(245, 242, 233, 0) 100%);
  animation: burger-shimmer 3.8s var(--ease) infinite;
}
@keyframes burger-shimmer {
  0%   { left: -60%; }
  55%  { left: 115%; }
  100% { left: 115%; }
}
.burger:hover, .burger:focus-visible {
  border-color: var(--ivory);
  background: rgba(245, 242, 233, .09);
}
.burger[aria-expanded="true"] { border-color: var(--ivory); }
.burger[aria-expanded="true"]::before { animation: none; opacity: 0; }
.burger__box { width: 22px; }

/* ============================================================
   21. Why Concord — subject icons in place of the repeated logo
   ============================================================ */
.pillar { transition: border-top-color var(--dur-2) var(--ease); }
.pillar:hover { border-top-color: var(--ink); }
.pillar__ico {
  width: clamp(38px, 3.4vw, 46px); height: auto;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-2) var(--ease-out);
}
.pillar:hover .pillar__ico { transform: translateY(-3px) scale(1.04); }

/* ============================================================
   22. Footer — brand beside the link columns
   ============================================================ */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.footer__brand {
  /* the block sits at the left of the footer, but the mark centres over the
     wordmark below it rather than aligning to its left edge */
  justify-self: start; text-align: center;
  display: grid; justify-items: center; gap: 1rem;
  margin-top: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.footer__brand:hover { opacity: .82; }
.footer__brand .logo__type { justify-items: center; }
.footer__brand .logo__mark { height: clamp(44px, 5vw, 58px); }
.footer__brand .logo__name { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: .18em; }
.footer__brand .logo__sub { letter-spacing: .3em; opacity: .8; }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .logo__mark { height: 44px; }
}

/* ============================================================
   23. Reduced motion — additions for the sections above
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .burger::before { animation: none; opacity: 0; }
  .page-veil { display: none; }
  .eyebrow::before,
  .js .eyebrow::before { transform: scaleX(1) !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}