/* ===========================
   Meridian Partners — independent strategy office
=========================== */

:root {
  --color-navy: #10192e;
  --color-navy-light: #1c2942;
  --color-gold: #9c7a45;
  --color-gold-light: #c9a877;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f8fa;
  --color-text: #1b2233;
  --color-text-muted: #5b6478;
  --color-border: #e5e7ec;

  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);

  --max-width: 1180px;
  --radius: 8px;
  --transition: 0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Serif for actual prose headings and names only — everything else that
   rode on --font-heading (brand mark, badges, step numbers, labels) stays
   on Inter, so the serif reads as an editorial choice, not a font change
   applied everywhere at once. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-navy);
}

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 12px;
}

.section {
  padding: 88px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-header {
  max-width: 560px;
  margin-bottom: 44px;
}

.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header p {
  color: var(--color-text-muted);
  margin-top: 10px;
  font-size: 1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn-primary {
  background: var(--color-navy);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-navy-light);
}

.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-navy);
}

.btn-outline.on-dark {
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}

.btn-outline.on-dark:hover {
  border-color: #fff;
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--color-border);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-navy);
}

.brand-mark {
  width: 30px;
  height: 30px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-navy);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px;
  background: var(--color-gold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  display: block;
  transition: transform var(--transition), opacity var(--transition);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--color-navy);
  color: #fff;
  padding: 108px 0 96px;
  text-align: center;
}

.hero .container {
  max-width: 720px;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  margin-bottom: 18px;
}

.hero p {
  color: rgba(255,255,255,0.68);
  font-size: 1.08rem;
  max-width: 520px;
  margin: 0 auto 32px;
}

.hero .eyebrow { color: rgba(255,255,255,0.55); }

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 64px;
  flex-wrap: wrap;
}

.hero-stat .num {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}

.hero-stat .label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

/* ---------- Logo strip ---------- */
.logo-strip {
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}

.logo-strip .container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.logo-strip .strip-label {
  display: flex;
  align-items: center;
  padding: 22px 28px 22px 0;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.strip-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.strip-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 14px;
  border-left: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--color-navy);
  text-align: center;
}

/* ---------- Cards / grid ---------- */
.grid {
  display: grid;
  gap: 24px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 30px;
  transition: border-color var(--transition);
}

.card:hover {
  border-color: var(--color-navy);
}

.card-icon svg { width: 22px; height: 22px; stroke: var(--color-navy); margin-bottom: 18px; }

.card h3 { margin-bottom: 8px; font-size: 1.08rem; }
.card p { color: var(--color-text-muted); font-size: 0.93rem; }

/* ---------- Testimonials ---------- */
.testimonial-card {
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.testimonial-card p.quote {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 20px;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-navy);
  font-size: 0.82rem;
  background: var(--color-bg-alt);
  object-fit: cover;
}

.story-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.testimonial-person .name { font-weight: 600; font-size: 0.92rem; }
.testimonial-person .role { color: var(--color-text-muted); font-size: 0.82rem; }

/* ---------- CTA banner ---------- */
.cta-banner {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 56px;
  text-align: center;
}

.cta-banner h2 { margin-bottom: 10px; }
.cta-banner p { color: var(--color-text-muted); max-width: 480px; margin: 0 auto 26px; }

/* ---------- Footer ---------- */
footer {
  background: var(--color-navy);
  color: rgba(255,255,255,0.6);
  padding: 64px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { font-size: 0.88rem; max-width: 280px; }

.footer-col h4 {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.88rem; transition: color var(--transition); }
.footer-col ul li a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-socials { display: flex; gap: 10px; }

.footer-socials a {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition);
}

.footer-socials a:hover { border-color: #fff; }
.footer-socials svg { width: 14px; height: 14px; stroke: #fff; }

/* ---------- Page header (inner pages) ---------- */
.page-header {
  background: var(--color-navy);
  color: #fff;
  padding: 64px 0;
  text-align: center;
}

.page-header h1 { color: #fff; margin-bottom: 8px; }
.page-header p { color: rgba(255,255,255,0.6); }
.breadcrumb { font-size: 0.82rem; color: rgba(255,255,255,0.45); margin-bottom: 14px; }
.breadcrumb a:hover { color: #fff; }

/* ---------- Team ---------- */
.team-card { text-align: center; }
/* A slightly heavier, brand-toned ring so four photos shot on four different
   backgrounds still read as one consistent team grid rather than four
   unrelated headshots. */
.team-card .avatar { width: 72px; height: 72px; font-size: 1.25rem; margin: 0 auto 16px; border-width: 2px; border-color: var(--color-gold-light); }
.team-card h3 { font-size: 1rem; margin-bottom: 4px; }
.team-card .role { color: var(--color-gold); font-size: 0.82rem; font-weight: 600; margin-bottom: 10px; }
.team-card p.bio { color: var(--color-text-muted); font-size: 0.86rem; }

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  padding-left: 28px;
  border-left: 1px solid var(--color-border);
}

.timeline-item { position: relative; padding-bottom: 36px; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -33px; top: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-gold);
}

.timeline-item .year {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.timeline-item p { color: var(--color-text-muted); }

/* ---------- Values ---------- */
.value-row {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
}

.value-row:last-child { border-bottom: none; }

.value-num {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-gold);
  min-width: 40px;
}

/* ---------- Process steps ---------- */
.process-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.process-step .step-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* ---------- Contact page ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact-info-card {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-info-card:last-child { border-bottom: none; }

.contact-info-card .icon-box {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.contact-info-card .icon-box svg { width: 20px; height: 20px; stroke: var(--color-navy); }

.map-placeholder {
  margin-top: 28px;
  border-radius: var(--radius);
  height: 200px;
  background:
    linear-gradient(var(--color-border) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  gap: 8px;
}

.form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--color-navy);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  background: var(--color-bg-alt);
  transition: border-color var(--transition), background var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-navy);
  background: #fff;
}

.form-group textarea { resize: vertical; min-height: 110px; }

.form-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 14px;
}

.form-success {
  display: none;
  background: #f0f6f4;
  border: 1px solid #cfe3dd;
  color: #206e58;
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.form-success.visible { display: block; }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--color-navy);
  text-align: left;
}

.faq-question .plus {
  transition: transform var(--transition);
  color: var(--color-text-muted);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item.open .plus { transform: rotate(45deg); }

/* Animated max-height, driven from scrollHeight in main.js. The grid
   0fr -> 1fr technique is the better-behaved pattern and was tried here, but it
   cannot collapse: padding sits outside min-height, so the row floors at the
   answer's 18px padding-bottom and every closed question keeps a strip of
   --color-bg-alt. Fixing that needs a padding-free wrapper element inside each
   panel. Worth doing if this markup is ever touched; not worth the churn for a
   transition that runs once per click. */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
  background: var(--color-bg-alt);
}

.faq-answer p {
  padding: 0 22px 18px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-links { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: #fff; flex-direction: column; padding: 32px 24px; gap: 24px; transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; }
  .nav-links.open { transform: translateX(0); }
  .nav-toggle { display: flex; }
  .nav-actions .btn-primary { display: none; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-banner { padding: 36px 24px; }
  .section { padding: 56px 0; }
  .hero-stats { gap: 32px; }
}

/* Meridian editorial refresh */
:root { --color-navy:#0b1328; --color-navy-light:#172344; --color-gold:#b89454; --color-gold-light:#e2c48b; --radius:4px; }
.hero .container { max-width:var(--max-width); }
.btn { border-radius:999px; }
.btn-primary { background:var(--color-gold-light); color:var(--color-navy); }
.btn-primary:hover { background:#fff1c9; }
.hero { position:relative; overflow:hidden; padding:96px 0 0; text-align:left; }
.hero::before { content:""; position:absolute; width:720px; height:720px; top:-420px; right:-170px; border:1px solid rgba(226,196,139,.2); border-radius:50%; box-shadow:0 0 0 88px rgba(226,196,139,.035),0 0 0 176px rgba(226,196,139,.025); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); align-items:center; gap:clamp(44px,7vw,112px); min-height:500px; }
.hero h1 { font-size:clamp(3.4rem,5.1vw,5.1rem); max-width:740px; letter-spacing:-.045em; margin-bottom:26px; }
.hero h1 em { color:var(--color-gold-light); font-weight:400; }
.hero-copy > p { max-width:530px; margin:0 0 36px; }
.hero .eyebrow { color:var(--color-gold-light); }
.hero-actions { justify-content:flex-start; align-items:center; }
.text-link { font-size:.9rem; font-weight:600; color:rgba(255,255,255,.85); padding:12px 5px; }
.text-link span,.btn span,.card-link span { margin-left:6px; display:inline-block; transition:transform .2s ease; }
.text-link:hover span,.btn:hover span,.card-link:hover span { transform:translate(3px,-3px); }
.signal-card { position:relative; width:min(100%,420px); justify-self:end; background:rgba(255,255,255,.055); border:1px solid rgba(226,196,139,.32); padding:24px; min-height:410px; display:flex; flex-direction:column; justify-content:space-between; backdrop-filter:blur(10px); }
.signal-topline,.signal-footer { display:flex; justify-content:space-between; gap:16px; font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.signal-footer { display:block; border-top:1px solid rgba(255,255,255,.13); padding-top:16px; }.signal-footer strong { display:block; margin-top:5px; color:#fff; font-size:.9rem; letter-spacing:0; text-transform:none; }
.signal-orbit { position:relative; width:220px; height:220px; margin:5px auto; border:1px solid rgba(226,196,139,.38); border-radius:50%; }.signal-orbit::before,.signal-orbit::after { content:""; position:absolute; border-radius:50%; inset:28px; border:1px solid rgba(226,196,139,.2); }.signal-orbit::after { inset:70px; background:rgba(226,196,139,.12); }.orbit-core { position:absolute; inset:0; display:grid; place-items:center; color:var(--color-gold-light); font-family:var(--font-serif); font-size:2.2rem; z-index:2; }.orbit-label { position:absolute; color:rgba(255,255,255,.7); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }.orbit-label-one { top:8px; left:-13px; }.orbit-label-two { right:-37px; top:106px; }.orbit-label-three { bottom:12px; left:-25px; }.signal-card > p { color:rgba(255,255,255,.68); font-size:.88rem; line-height:1.55; max-width:290px; }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:58px; border-top:1px solid rgba(255,255,255,.15); }.hero-stat { padding:25px 0 27px; }.hero-stat + .hero-stat { border-left:1px solid rgba(255,255,255,.15); padding-left:28px; }.hero-stat .num { font-size:2rem; }.hero-stat .num span { color:var(--color-gold-light); font-size:.8em; }
.section-alt { background:#f1efe9; }.card { position:relative; padding:36px 30px 28px; transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition); }.card:hover { border-color:var(--color-gold); transform:translateY(-6px); box-shadow:0 18px 40px rgba(11,19,40,.09); }.card-link { display:inline-block; margin-top:25px; color:var(--color-navy); font-size:.8rem; font-weight:700; }
.cta-banner { background:var(--color-navy); color:#fff; padding:64px 56px; }.cta-banner h2 { color:#fff; }.cta-banner p { color:rgba(255,255,255,.63); }
@media (max-width:960px) { .hero-grid { grid-template-columns:1fr; min-height:0; }.signal-card { justify-self:start; max-width:520px; min-height:330px; } }
@media (max-width:720px) { .hero { padding-top:68px; }.hero h1 { font-size:clamp(2.8rem,14vw,4.1rem); }.hero-stats { grid-template-columns:1fr; margin-top:54px; }.hero-stat + .hero-stat { border-left:0; border-top:1px solid rgba(255,255,255,.15); padding-left:0; }.signal-card { min-height:300px; } }

/* ===========================================================
   Upgrade — hero photography, selected work, the engagement
   method and perspectives.
   =========================================================== */

/* --- Hero: a real photograph replaces the abstract orbit card --- */
.hero-figure {
  position: relative; justify-self: end; width: min(100%, 560px);
  border: 1px solid rgba(226,196,139,.28);
  padding: 10px; background: rgba(255,255,255,.04);
}
.hero-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-figure figcaption {
  margin-top: 10px; padding: 0 2px 2px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* --- Shared: a two-column section header --- */
.section-header.work-header {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: clamp(20px,4vw,64px); align-items: end; text-align: left;
  max-width: none; margin-bottom: 42px;
}
.section-header.work-header h2 { margin-bottom: 0; }
.section-header.work-header p { color: var(--color-text-muted); margin: 0; max-width: 46ch; }

/* --- Selected work --- */
.work-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 40px;
}
.work-tab {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  background: none; border: 0; border-left: 1px solid var(--color-border);
  padding: 18px 20px; font: inherit; color: var(--color-text-muted);
  position: relative; transition: background var(--transition), color var(--transition);
}
.work-tab:first-child { border-left: 0; }
.work-tab::after {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: var(--color-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.work-tab:hover { background: rgba(16,25,46,.03); color: var(--color-text); }
.work-tab.is-on { color: var(--color-text); }
.work-tab.is-on::after { transform: scaleX(1); }
.wt-client { font-weight: 600; font-size: 1rem; }
.wt-sector { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }

.work-panel {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) minmax(0,.62fr);
  gap: clamp(22px,3vw,44px); align-items: start;
}
.work-panel.is-swapping { animation: workIn .4s ease both; }
@keyframes workIn { from { opacity: 0; transform: translateY(10px); } }

.work-photo { border: 1px solid var(--color-border); padding: 8px; background: #fff; }
.work-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.work-brief {
  font-family: var(--font-serif); font-size: 1.12rem; font-style: italic;
  color: var(--color-text-muted); margin-bottom: 12px;
}
.work-body h3 { font-size: 1.5rem; margin-bottom: 12px; }
.work-detail { color: var(--color-text-muted); margin-bottom: 18px; }

.work-outcomes { display: grid; gap: 8px; margin-bottom: 22px; }
.work-outcomes li {
  position: relative; padding-left: 22px; font-size: .95rem; color: var(--color-text);
}
.work-outcomes li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--color-gold);
}

.work-quote { border-left: 2px solid var(--color-gold); padding: 2px 0 2px 18px; }
.work-quote p {
  font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.5;
  margin-bottom: 8px;
}
.work-quote cite { font-style: normal; font-size: .85rem; font-weight: 600; display: grid; }
.work-quote cite span { font-weight: 400; color: var(--color-text-muted); }

.work-metric {
  border: 1px solid var(--color-border); background: #fff;
  padding: 26px 24px; display: grid; gap: 6px; align-content: start;
}
.wm-figure {
  font-family: var(--font-serif); font-size: clamp(2.4rem,4vw,3.1rem);
  line-height: 1; color: var(--color-navy);
}
.wm-label { font-size: .86rem; color: var(--color-text-muted); }
.wm-meta { display: grid; gap: 12px; margin-top: 18px; border-top: 1px solid var(--color-border); padding-top: 18px; }
.wm-meta dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.wm-meta dd { font-weight: 600; font-size: .95rem; }

/* --- The engagement method --- */
.method-track {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0; margin-bottom: 34px; position: relative;
  border-top: 2px solid var(--color-border);
  --progress: .25;
}
.method-track::before {
  content: ''; position: absolute; top: -2px; left: 0; height: 2px;
  width: 100%; background: var(--color-gold);
  /* scaleX rather than an animated width: a solid bar scales identically and
     the transition stays off the layout path. */
  transform: scaleX(var(--progress)); transform-origin: left;
  transition: transform .35s ease;
}
.method-step { display: grid; }
.ms-btn {
  display: grid; gap: 4px; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 20px 22px 22px; font: inherit;
  color: var(--color-text-muted);
  transition: color var(--transition), background var(--transition);
}
.ms-btn:hover { color: var(--color-text); background: rgba(16,25,46,.03); }
.ms-btn.is-on { color: var(--color-text); }
.ms-n {
  font-family: var(--font-serif); font-size: .85rem; color: var(--color-gold);
  letter-spacing: .1em;
}
.ms-name { font-size: 1.24rem; font-weight: 600; }
.ms-btn.is-on .ms-name { color: var(--color-navy); }
.ms-len { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }

.method-detail {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  padding: clamp(26px,4vw,44px);
  display: grid; gap: 16px; max-width: 900px;
}
.method-detail.is-swapping { animation: workIn .38s ease both; }
.md-line { font-family: var(--font-serif); font-size: clamp(1.3rem,2.4vw,1.75rem); line-height: 1.32; color: var(--color-navy); }
.md-detail { color: var(--color-text-muted); max-width: 62ch; }
.md-gives {
  border-top: 1px solid var(--color-border); padding-top: 16px;
  font-size: .95rem; display: grid; gap: 4px;
}
.md-gives span {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-gold);
}

/* --- Perspectives --- */
.writing-list { border-top: 1px solid var(--color-border); }
.writing-row {
  display: grid; grid-template-columns: 190px minmax(0,1fr) 30px;
  gap: clamp(16px,3vw,40px); align-items: center;
  padding: 26px 4px; border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.writing-row:hover { background: rgba(16,25,46,.03); }
/* The slide used to be animated padding-left on the row, which reflowed the
   grid on every hover. Translating the two text cells reproduces it exactly —
   .wr-go is justify-self:end so it never moved with the padding either — and
   runs on the compositor. */
.wr-meta, .wr-main { transition: transform var(--transition); }
.writing-row:hover .wr-meta,
.writing-row:hover .wr-main { transform: translateX(14px); }
.wr-meta { display: grid; gap: 4px; }
.wr-tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-gold); font-weight: 600; }
.wr-date { font-size: .82rem; color: var(--color-text-muted); }
.wr-main { display: grid; gap: 5px; }
.wr-title { font-family: var(--font-serif); font-size: clamp(1.1rem,1.9vw,1.35rem); line-height: 1.3; color: var(--color-navy); }
.wr-line { font-size: .92rem; color: var(--color-text-muted); }
.wr-go { color: var(--color-gold); font-size: 1.1rem; justify-self: end; transition: transform var(--transition); }
.writing-row:hover .wr-go { transform: translateX(5px); }

/* --- Closing call to action --- */
.cta-banner {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(26px,4vw,64px); align-items: center; text-align: left;
}
.cta-copy h2 { margin-bottom: 12px; }
.cta-copy p { margin: 0; max-width: 44ch; }
.cta-copy .eyebrow { color: var(--color-gold-light); }
.cta-side { display: grid; gap: 20px; justify-items: start; }
.cta-facts { display: grid; gap: 10px; font-size: .92rem; color: rgba(255,255,255,.68); }
.cta-facts li { position: relative; padding-left: 20px; }
.cta-facts li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--color-gold-light);
}
.cta-facts strong { color: #fff; font-weight: 600; }

/* --- Responsive --- */
@media (max-width: 1020px) {
  .work-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .work-metric { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .hero-figure { justify-self: start; width: min(100%, 520px); }
  .section-header.work-header { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .method-track { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cta-banner { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .work-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .work-tab:nth-child(3) { border-left: 0; }
  .work-tab:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .work-panel { grid-template-columns: minmax(0,1fr); }
  .writing-row { grid-template-columns: minmax(0,1fr) 24px; }
  .wr-meta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-panel.is-swapping, .method-detail.is-swapping { animation: none; }
  .writing-row, .wr-go, .method-track::before { transition: none; }
}

/* HTML width/height attributes set a fixed CSS height, which cancels aspect-ratio.
   Let the ratio drive height for every photograph added by this upgrade. */
.hero-figure img, .work-photo img { height: auto; }

/* ===========================================================
   The three practices.

   Replaces a grid of bordered icon cards. The cards opted out of
   every device the rest of the page runs on, so this rail is built
   only from moves that already exist here: the hairline column
   dividers from .hero-stats, the gold ordinal from .ms-n, the
   italic-serif framing line from .work-brief, the gold dash list
   from .work-outcomes, and the scaleX gold rule from .work-tab.
   =========================================================== */
.practice-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
}

.practice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 34px 30px 0;
}

.practice + .practice {
  border-left: 1px solid var(--color-border);
  padding-left: 34px;
}

/* The gold rule rides the rail's own top border, same as .work-tab::after
   rides the tab strip's. */
.practice::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 34px;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s ease;
}

.practice + .practice::before { left: 34px; }
.practice:hover::before,
.practice:focus-within::before { transform: scaleX(1); }

.pr-n {
  font-family: var(--font-serif);
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--color-gold);
  margin-bottom: 14px;
}

.practice h3 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}

.pr-for {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--color-navy);
  margin-bottom: 14px;
}

/* Grows to absorb the slack so the three .pr-list rules land on one baseline
   however unevenly the prose above them wraps. */
.pr-body {
  flex-grow: 1;
  color: var(--color-text-muted);
  font-size: .95rem;
  margin-bottom: 22px;
}

.pr-list {
  display: grid;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.pr-list li {
  position: relative;
  padding-left: 22px;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--color-text);
}

.pr-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 1px;
  background: var(--color-gold);
}

.practice .card-link { padding-top: 26px; }

@media (max-width: 900px) {
  .practice-rail { grid-template-columns: minmax(0, 1fr); }
  .practice { padding: 30px 0 28px; }
  .practice + .practice {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
  }
  .practice::before,
  .practice + .practice::before { left: 0; right: 0; }
  .practice + .practice::before { top: -1px; }
}

/* --- Logo strip on narrow screens: the five cells stop fitting in a row --- */
@media (max-width: 860px) {
  .logo-strip .container { grid-template-columns: minmax(0, 1fr); }
  .logo-strip .strip-label {
    padding: 18px 0 12px;
    border-bottom: 1px solid var(--color-border);
    justify-content: center;
  }
  .strip-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .strip-list li { padding: 15px 10px; border-top: 1px solid var(--color-border); }
  .strip-list li:nth-child(odd) { border-left: 0; }
  .strip-list li:nth-child(-n+2) { border-top: 0; }
  .strip-list li:last-child { grid-column: 1 / -1; border-left: 0; }
}

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