/* ============================================================
   The Crisfield Group
   Three-layer tokens: primitive -> semantic -> component.
   Components never hold a raw hex.
   ============================================================ */

/* ---------- 1. PRIMITIVE ---------- */
:root{
  --canopy-900:#1D2419;
  --canopy-800:#263024;
  --canopy-700:#2F3A2B;
  --canopy-600:#3C4737;

  --oak-700:#5C6330;
  --oak-600:#666D34;
  --oak-500:#7C8440;
  --oak-300:#B8C86A;
  --oak-100:#E4E8D3;

  --trunk-800:#3A3A36;
  --trunk-700:#4A4A46;
  --trunk-500:#6E6E66;

  --brass-500:#B9A15A;
  --stone-200:#D8D5CA;
  --stone-100:#E9E7DF;
  --paper-50:#F8F7F5;
  --paper-100:#F1F0EA;
  --white:#FFFFFF;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-pill:100px;

  --font-display:Fraunces,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --measure:68ch;
  --page-max:1200px;
}

/* ---------- 2. SEMANTIC ---------- */
:root{
  --color-bg:var(--paper-50);
  --color-bg-alt:var(--paper-100);
  --color-bg-invert:var(--canopy-800);
  --color-bg-invert-deep:var(--canopy-900);
  --color-surface:var(--white);
  --color-surface-invert:rgba(255,255,255,.05);

  --color-text:var(--trunk-800);
  --color-text-muted:var(--trunk-500);
  --color-text-invert:var(--paper-50);
  --color-text-invert-muted:#A9B3A0;

  --color-accent:var(--oak-600);          /* text-safe on light */
  --color-accent-graphic:var(--oak-500);  /* marks only */
  --color-accent-invert:var(--oak-300);   /* text-safe on canopy */
  --color-accent-warm:var(--brass-500);

  --color-rule:var(--stone-200);
  --color-rule-invert:rgba(255,255,255,.16);
  --color-focus:var(--oak-500);

  --shadow-card:0 1px 2px rgba(38,48,36,.04), 0 10px 28px -16px rgba(38,48,36,.22);
}

/* ---------- 3. COMPONENT ---------- */
:root{
  --nav-height:88px;
  --btn-bg:var(--color-bg-invert);
  --btn-fg:var(--color-text-invert);
  --btn-bg-hover:var(--canopy-900);
  --card-bg:var(--color-surface);
  --card-border:var(--color-rule);
  --card-pad:var(--space-6);
  --axis-line:var(--color-rule);
  --axis-node:var(--color-accent-graphic);
  --stat-rule:var(--color-accent-graphic);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* No smooth scrolling. A fragment arriving with the page starts a long animated
   scroll that the browser cancels while the page is still painting, so the visitor
   is left at the top. Measured: /case-studies#executive-coaching stopped at 46px
   with smooth, lands at 3846px without it. This is what Steve reported. */

/* Deep links from the homepage and services cards land on a discipline heading.
   Without this the sticky header covers the heading and the jump reads as "it
   went to the top of the page", which is exactly what Steve reported. */
:target,section[id]{scroll-margin-top:calc(var(--nav-height) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.12;margin:0}
p{margin:0 0 1em}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--color-accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--canopy-800)}
:focus-visible{outline:2.5px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-sm)}

.wrap{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--space-5)}
.measure{max-width:var(--measure)}
.skip{position:absolute;left:-9999px;top:0;background:var(--color-bg-invert);color:var(--color-text-invert);padding:var(--space-3) var(--space-5);z-index:200;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--nav-height);
  background:rgba(248,247,245,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-rule);
}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text)}
.brand img{width:auto;height:46px;flex:none}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font-family:var(--font-display);font-size:1.02rem;font-weight:500;letter-spacing:.005em;line-height:1.1;white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav a{color:var(--color-text);text-decoration:none;font-size:15px;font-weight:500;display:inline-flex;align-items:center;min-height:34px;padding:0 2px}
.nav a:hover{color:var(--color-accent)}
@media (max-width:900px){.nav{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font:inherit;font-size:15px;font-weight:600;text-decoration:none;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);
  padding:13px 26px;border-radius:var(--radius-pill);cursor:pointer;
  transition:background .15s,transform .12s;white-space:nowrap;
}
.btn:hover{background:var(--btn-bg-hover);color:var(--btn-fg);transform:translateY(-1px)}
.btn--sm{padding:10px 20px;font-size:14px}
.btn--ghost{background:transparent;color:var(--color-text-invert);border-color:var(--color-rule-invert)}
.btn--ghost:hover{background:rgba(255,255,255,.08);color:var(--color-text-invert)}

/* ============================================================
   Sections
   ============================================================ */
section{padding:var(--space-9) 0;position:relative}
.sec--alt{background:var(--color-bg-alt)}
.sec--invert{background:var(--color-bg-invert);color:var(--color-text-invert)}
.sec--invert h2,.sec--invert h3{color:var(--color-text-invert)}
.sec--invert p{color:var(--color-text-invert-muted)}

.eyebrow{
  display:flex;align-items:center;gap:var(--space-3);
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--color-accent);margin:0 0 var(--space-4);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.sec--invert .eyebrow,.hero .eyebrow{color:var(--color-accent-invert)}

h2{font-size:clamp(2rem,4vw,2.9rem);max-width:20ch}
h3{font-size:1.24rem;margin-bottom:var(--space-2)}
.lede{font-size:1.19rem;line-height:1.6;color:var(--color-text-muted);max-width:60ch;margin-top:var(--space-4)}
.sec--invert .lede{color:var(--color-text-invert-muted)}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;background:var(--color-bg-invert-deep);color:var(--color-text-invert);
  padding:var(--space-10) 0;overflow:hidden;min-height:min(84vh,780px);display:flex;align-items:center;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:1}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, var(--canopy-900) 0%, rgba(29,36,25,.96) 30%, rgba(29,36,25,.72) 52%, rgba(29,36,25,.34) 76%, rgba(29,36,25,.18) 100%),
    linear-gradient(to top, rgba(29,36,25,.85), transparent 42%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{
  font-size:clamp(2.7rem,6.2vw,4.6rem);font-weight:300;max-width:15ch;
  color:var(--paper-50);letter-spacing:-.02em;
}
.hero h1 em{font-style:normal;color:var(--color-accent-invert)}
.hero .lede{color:#D5DCCB;max-width:48ch;font-size:1.2rem}
.hero__actions{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-7)}
.hero__note{font-size:14.5px;color:var(--color-text-invert-muted);max-width:34ch}
.hero .btn{background:var(--color-accent-invert);color:var(--canopy-900);border-color:var(--color-accent-invert)}
.hero .btn:hover{background:#C7D488;color:var(--canopy-900)}

/* ============================================================
   Grid + cards
   ============================================================ */
.grid{display:grid;gap:var(--space-5)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.grid--2{grid-template-columns:1fr}}

.card{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
}
.card__media{
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--space-5);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;background:var(--color-bg-alt);
}
.card__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card ul{list-style:none;padding:0;margin:var(--space-4) 0 0}
.card li{position:relative;padding-left:20px;margin-bottom:7px;font-size:15px;color:var(--color-text-muted)}
.card li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  background:var(--color-accent-graphic);border-radius:50% 50% 50% 0;transform:rotate(-45deg);
}
.card__link{margin-top:auto;padding-top:var(--space-5);min-height:26px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.card__link:hover{gap:10px;transition:gap .15s}

/* ============================================================
   Attributed stats  (the number is nothing without its method)
   ============================================================ */
.stats{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:var(--space-7)}
.stat{border-top:2px solid var(--stat-rule);padding-top:var(--space-5)}
.stat__n{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,3.5rem);font-weight:400;line-height:1;color:var(--color-accent-invert)}
.stat__label{font-size:1.05rem;font-weight:600;margin-top:var(--space-3);color:var(--color-text-invert)}
.stat__method{font-size:14px;line-height:1.55;color:var(--color-text-invert-muted);margin-top:var(--space-3)}

/* ============================================================
   Time axis  — the signature device
   ============================================================ */
.axis{position:relative;margin-top:var(--space-8)}
.axis__line{position:absolute;left:0;right:0;top:11px;height:1px;background:var(--axis-line)}
.axis__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6);position:relative}
.axis__step{position:relative;padding-top:var(--space-7)}
.axis__step::before{
  content:"";position:absolute;top:5px;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--color-bg);border:2px solid var(--axis-node);
}
.sec--alt .axis__step::before{background:var(--color-bg-alt)}
.axis__step:first-child::before{background:var(--axis-node)}
.axis__when{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--color-accent);margin-bottom:var(--space-2);
}
.axis__step h3{font-size:1.12rem}
.axis__step p{font-size:15px;color:var(--color-text-muted);margin:0}
.axis__note{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--color-rule);font-size:14px;color:var(--color-text-muted);max-width:62ch}
@media (max-width:780px){
  .axis__line{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .axis__step{padding-top:0;padding-left:var(--space-6);padding-bottom:var(--space-6)}
  .axis__step::before{top:4px}
}


/* ============================================================
   Quotes
   ============================================================ */
.quote{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-card)}
.quote blockquote{margin:0;font-family:var(--font-display);font-size:1.16rem;line-height:1.55;font-weight:300;color:var(--canopy-800)}
.quote figcaption{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-rule);font-size:13.5px;color:var(--color-text-muted)}

/* ============================================================
   Bio
   ============================================================ */
.bio{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:var(--space-8);align-items:start}
@media (max-width:820px){.bio{grid-template-columns:1fr;gap:var(--space-6)}}
.bio__portrait{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-invert);aspect-ratio:4/5}
.bio__portrait img{width:100%;height:100%;object-fit:cover}
.creds{list-style:none;padding:0;margin:var(--space-5) 0 0;display:grid;gap:var(--space-3)}
.creds li{position:relative;padding-left:22px;font-size:15.5px;color:var(--color-text-invert-muted)}
.creds li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--color-accent-invert);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}

/* ============================================================
   Closing
   ============================================================ */
.closing{text-align:center}
.closing h2{margin:0 auto;max-width:16ch;font-size:clamp(2rem,4.4vw,3.1rem);font-weight:300}
.closing .attr{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);margin-top:var(--space-5)}
.closing .measure{margin:var(--space-6) auto 0;text-align:left;max-width:52ch}
.closing .btn{margin-top:var(--space-6)}
.closing .alt{font-size:14.5px;color:var(--color-text-muted);margin-top:var(--space-4)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--color-bg-invert-deep);color:var(--color-text-invert-muted);padding:var(--space-8) 0 var(--space-6);font-size:14.5px}
.site-footer a{color:#C3CCBA;text-decoration:none}
.site-footer a:hover{color:var(--color-accent-invert)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-7)}
@media (max-width:780px){.footer__grid{grid-template-columns:1fr;gap:var(--space-6)}}
.site-footer .foot-h{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--color-text-invert);margin-bottom:var(--space-4);font-family:var(--font-body);font-weight:700}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
.site-footer li{display:flex;align-items:center;min-height:26px}
.site-footer ul a{display:inline-flex;align-items:center;min-height:26px}
.footer__base{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--color-rule-invert);display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;font-size:13px}
.footer__brand img{height:52px;width:auto;margin-bottom:var(--space-5)}
.footer__brand svg{width:38px;height:38px;margin-bottom:var(--space-4)}

@media (max-width:600px){
  :root{--nav-height:72px}
  .eyebrow{letter-spacing:.11em;font-size:11.5px}
  .hero__actions{gap:var(--space-4)}
  .brand img{height:38px}
  body{font-size:16px}
  section{padding:var(--space-8) 0}
  .hero{padding:var(--space-8) 0 var(--space-7)}
  :root{--card-pad:var(--space-5)}
}

/* ============================================================
   Interior pages
   ============================================================ */
.page-head{padding-top:var(--space-9);padding-bottom:var(--space-8)}
.page-head--tight{padding-bottom:var(--space-6)}
.page-head h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:300;max-width:18ch;letter-spacing:-.02em}
.page-head .lede{margin-top:var(--space-5)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--space-8);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:var(--space-5)}}

/* the four promises */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin-top:var(--space-9);border-top:1px solid var(--color-rule)}
.promise div{padding:var(--space-6) var(--space-5) var(--space-5) 0;border-right:1px solid var(--color-rule);font-family:var(--font-display);font-size:1.5rem;color:var(--canopy-800)}
.promise div:last-child{border-right:0}
.promise span{display:block;font-family:var(--font-body);font-size:11.5px;letter-spacing:.14em;color:var(--color-accent);font-weight:700;margin-bottom:var(--space-3)}
@media (max-width:620px){.promise div{border-right:0;border-bottom:1px solid var(--color-rule);padding:var(--space-5) 0}.promise div:last-child{border-bottom:0}}

.creds-head{font-family:var(--font-body);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--color-accent-invert);margin:var(--space-6) 0 var(--space-3)}

/* services rows */
.svc{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--space-8);align-items:start}
.svc--flip .svc__media{order:2}
@media (max-width:900px){.svc{grid-template-columns:1fr;gap:var(--space-6)}.svc--flip .svc__media{order:0}}
.svc__media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-rule);background:var(--color-bg-alt);position:sticky;top:calc(var(--nav-height) + 24px)}
@media (max-width:900px){.svc__media{position:static}}
.svc__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.svc__sub{font-family:var(--font-body);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--color-accent);margin:var(--space-6) 0 var(--space-4)}
.list--two{columns:2;column-gap:var(--space-6)}
@media (max-width:620px){.list--two{columns:1}}
.proofline{margin:var(--space-6) 0;padding-left:var(--space-5);border-left:3px solid var(--color-accent-graphic)}
.proofline b{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--canopy-800);font-weight:500}
.proofline span{display:block;font-size:14.5px;color:var(--color-text-muted);margin-top:var(--space-2)}

/* case studies */
.cs__head{margin-bottom:var(--space-7)}
.cs__item{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--space-7);padding:var(--space-7) 0;border-top:1px solid var(--color-rule)}
@media (max-width:860px){.cs__item{grid-template-columns:1fr;gap:var(--space-4)}}
.cs__meta{position:sticky;top:calc(var(--nav-height) + 24px);align-self:start}
@media (max-width:860px){.cs__meta{position:static}}
.cs__when{font-family:var(--font-display);font-size:1.6rem;color:var(--color-accent);margin:0;line-height:1}
.cs__who{font-size:13px;letter-spacing:.05em;color:var(--color-text-muted);margin:var(--space-3) 0 0}
.cs__body h3{font-size:1.4rem;margin-bottom:var(--space-4)}
.cs__body p{max-width:66ch}
.cs__result{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-md)}
.sec--alt .cs__result{background:var(--white)}
.cs__result b{color:var(--color-accent)}

/* testimonials */
.quotes{columns:2;column-gap:var(--space-5)}
@media (max-width:860px){.quotes{columns:1}}
.quotes .quote{break-inside:avoid;margin:0 0 var(--space-5);display:inline-block;width:100%}
/* <figure> carries a UA default margin of 1em 40px. Without clearing the inline margins the
   card sits 40px right of its column and overflows the viewport on a phone. */
.quote--lead blockquote{font-size:1.32rem}
.quote figcaption span{display:block;color:var(--color-text-muted);margin-top:3px;font-size:12.5px}
.quote figcaption{font-weight:600;color:var(--color-text)}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-8);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:var(--space-7)}}
.contact__form{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:var(--space-7);box-shadow:var(--shadow-card)}
@media (max-width:600px){.contact__form{padding:var(--space-5)}}
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--color-text)}
.help{font-size:13px;color:var(--color-text-muted);margin:-2px 0 9px}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;font:inherit;font-size:16px;color:var(--color-text);background:var(--color-bg);
  border:1px solid var(--color-rule);border-radius:10px;padding:12px 14px;
  transition:border-color .15s,box-shadow .15s;
}
textarea{resize:vertical;line-height:1.55}
input:focus,textarea:focus{border-color:var(--color-accent-graphic);box-shadow:0 0 0 3px rgba(124,132,64,.16);outline:none}
.field{margin-bottom:var(--space-5)}
.status{font-size:14px;margin-top:var(--space-4);min-height:1.4em}
.status--err{color:#8C2E1F;font-weight:600}
.contact__h{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;font-family:var(--font-body);color:var(--color-accent);margin-bottom:var(--space-5)}
.contact__list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-5)}
.contact__list li{display:grid;gap:2px;font-size:1.05rem}
.contact__list span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600}
.contact__list a{min-height:26px;display:inline-flex;align-items:center}
.contact__note{margin-top:var(--space-7);padding:var(--space-5);background:var(--color-bg-alt);border-radius:var(--radius-md);font-size:15px;color:var(--color-text-muted)}
.done{text-align:center;padding:var(--space-9) var(--space-5)}
.done h2{margin:var(--space-5) auto var(--space-3);font-size:2rem}
.done svg{margin:0 auto}

/* reading list */
.reading{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--color-rule)}
.reading__note{font-size:13.5px;color:var(--color-text-muted);margin-top:var(--space-5);max-width:52ch}

/* headings need air before body copy follows them */
h1 + p, h2 + p, h3 + p, h2 + .list, h3 + .list{margin-top:var(--space-4)}
.svc h2 + p, .cs__body h3 + p{margin-top:var(--space-4)}
.page-head h1 + .lede{margin-top:var(--space-5)}

.page-banner{padding:0;line-height:0}
.page-banner img{width:100%;height:clamp(210px,27vw,400px);object-fit:cover;object-position:center 62%}

/* ============================================================
   Client logo wall
   ============================================================ */
.logowall{
  list-style:none; padding:0; margin:var(--space-7) 0 0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:var(--space-4);
}
.logowall li{
  display:grid; place-items:center; padding:var(--space-5) var(--space-4);
  background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--radius-md); min-height:104px;
}
.logowall img{
  width:100%; max-width:140px; height:auto; max-height:46px;
  object-fit:contain; opacity:.95;
  transition:opacity .2s, transform .2s;
}
.logowall li:hover img{opacity:1; transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.logowall img{transition:none}
.logowall li:hover img{transform:none}}
.logowall__note{font-size:13px; color:var(--color-text-muted); margin-top:var(--space-5)}
@media (max-width:520px){
  .logowall{grid-template-columns:repeat(2,1fr); gap:var(--space-3)}
  .logowall li{min-height:88px; padding:var(--space-4) var(--space-3)}
}

/* case study figures */
.cs__fig{margin:var(--space-6) 0}
.cs__fig img{width:100%;height:auto;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-surface)}
.cs__fig figcaption{font-size:13.5px;color:var(--color-text-muted);margin-top:var(--space-3);max-width:60ch}

/* portraits */
.bio__portrait{background:transparent;border:0;aspect-ratio:auto}
.bio__portrait img{width:100%;height:auto;object-fit:contain}
.contact__who{margin:0 0 var(--space-6);display:grid;gap:var(--space-4);justify-items:start}
.contact__who img{width:100%;max-width:210px;height:auto;border-radius:var(--radius-md);background:var(--color-bg-alt)}
.contact__who figcaption{font-size:14.5px;line-height:1.4}
.contact__who figcaption b{display:block;color:var(--color-text)}
.contact__who figcaption span{color:var(--color-text-muted);font-size:13px}

/* the bio credential list is long; keep the portrait alongside it and
   fade the cut edge so the cutout sits into the canopy instead of ending abruptly */
.bio__portrait{position:sticky; top:calc(var(--nav-height) + 28px)}
.bio__portrait img{
  -webkit-mask-image:linear-gradient(to bottom, #000 76%, transparent 99%);
          mask-image:linear-gradient(to bottom, #000 76%, transparent 99%);
}
@media (max-width:820px){
  .bio__portrait{position:static; max-width:280px}
}

/* home bio: the full length portrait needs a wider column than the About crop */
.bio--full{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.bio--full .bio__portrait{position:static}
.bio--full .bio__portrait img{-webkit-mask-image:none;mask-image:none}
@media (max-width:820px){.bio--full{grid-template-columns:1fr}.bio--full .bio__portrait{max-width:260px}}

/* reading list */
.reading__img{margin:var(--space-7) 0 0;max-width:620px}
.reading__img img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--color-rule)}

/* ============================================================
   Page banner, option C: title anchored to the bottom of the image
   ============================================================ */
.page-banner{position:relative;overflow:hidden;padding:0;line-height:0}
.page-banner img{
  width:100%;height:clamp(300px,36vw,500px);
  object-fit:cover;object-position:center 55%;display:block;
}
.page-banner__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(29,36,25,.97) 0%, rgba(29,36,25,.95) 20%, rgba(29,36,25,.86) 34%,
    rgba(29,36,25,.55) 52%, rgba(29,36,25,.16) 76%, transparent 100%);
}
.page-banner__inner{position:absolute;left:0;right:0;bottom:0;padding-bottom:var(--space-7);line-height:1.65}
.page-banner .eyebrow{color:var(--oak-100)}
.page-banner h1{
  font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:300;
  color:var(--paper-50);max-width:22ch;letter-spacing:-.02em;
}
.page-banner__sub{color:#C6CCBE;max-width:56ch;margin:var(--space-4) 0 0;font-size:1.08rem}
/* narrower viewports wrap the headline onto more lines, so it climbs into the
   brighter part of the photograph. Carry the stronger scrim up to tablet. */
@media (max-width:1100px){
  .page-banner__scrim{background:linear-gradient(to top,
    rgba(29,36,25,.97) 0%, rgba(29,36,25,.96) 32%, rgba(29,36,25,.90) 52%,
    rgba(29,36,25,.58) 74%, rgba(29,36,25,.12) 100%)}
}
@media (max-width:600px){
  .page-banner img{height:clamp(320px,62vw,420px);object-position:center 50%}
  .page-banner__inner{padding-bottom:var(--space-6)}
}
/* the head block that follows now only carries supporting copy */
.page-head--after-banner{padding-top:var(--space-7)}

/* core values sit two up; keep the measure comfortable at the wider card width
   and let the acorn mark tie them to the rest of the system */
.values .card{padding:var(--space-6) var(--space-6) var(--space-6) var(--space-7);position:relative}
.values .card::before{
  content:"";position:absolute;left:var(--space-5);top:calc(var(--space-6) + .55em);
  width:11px;height:11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--color-accent-graphic);
}
.values .card p{max-width:56ch;margin-bottom:0}
.values .card h3{margin-bottom:var(--space-3)}
@media (max-width:600px){
  .values .card{padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6)}
  .values .card::before{left:var(--space-4)}
}

/* ============================================================
   Acorn mark, two colour. Cap in Oak Leaf, nut in Crisfield Brass.
   Replaces the rotated-square bullet everywhere.
   ============================================================ */
:root{
  --acorn-mark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2021%22%3E%3Cpath%20d%3D%22M10%202.9V1.2%22%20stroke%3D%22%237C8440%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4.5%208.8h11c-.1%205.7-3.2%209.6-5.5%2011.3C7.7%2018.4%204.6%2014.5%204.5%208.8z%22%20fill%3D%22%23B9A15A%22%2F%3E%3Cpath%20d%3D%22M2.5%206.1C2.5%203.8%205.9%201.9%2010%201.9s7.5%201.9%207.5%204.2c0%201.2-.6%202.1-1.8%202.8H4.3C3.1%208.2%202.5%207.3%202.5%206.1z%22%20fill%3D%22%237C8440%22%2F%3E%3Cpath%20d%3D%22M4.3%208.85h11.4%22%20stroke%3D%22%237C8440%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
  --acorn-mark-invert:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2021%22%3E%3Cpath%20d%3D%22M10%202.9V1.2%22%20stroke%3D%22%23B8C86A%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4.5%208.8h11c-.1%205.7-3.2%209.6-5.5%2011.3C7.7%2018.4%204.6%2014.5%204.5%208.8z%22%20fill%3D%22%23DCC57F%22%2F%3E%3Cpath%20d%3D%22M2.5%206.1C2.5%203.8%205.9%201.9%2010%201.9s7.5%201.9%207.5%204.2c0%201.2-.6%202.1-1.8%202.8H4.3C3.1%208.2%202.5%207.3%202.5%206.1z%22%20fill%3D%22%23B8C86A%22%2F%3E%3Cpath%20d%3D%22M4.3%208.85h11.4%22%20stroke%3D%22%23B8C86A%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
}

/* list bullets */
ul.list li{padding-left:30px}
ul.list li::before{
  content:"";position:absolute;left:0;top:.28em;
  width:17px;height:18px;border-radius:0;transform:none;background:
  var(--acorn-mark) center/contain no-repeat;
}
ul.list.no li::before{
  background:none;border:1.5px solid #C4B79E;border-radius:2px;
  width:8px;height:8px;top:.6em;left:2px;
}
.sec--invert ul.list li::before{background-image:var(--acorn-mark-invert)}

/* service card bullets */
.card li{padding-left:26px}
.card li::before{
  content:"";position:absolute;left:0;top:.24em;
  width:15px;height:16px;border-radius:0;transform:none;
  background:var(--acorn-mark) center/contain no-repeat;
}
section.deep .card li::before,.sec--invert .card li::before{background-image:var(--acorn-mark-invert)}

/* credential lists sit on canopy */
.creds li{padding-left:28px}
.creds li::before{
  content:"";position:absolute;left:0;top:.3em;
  width:16px;height:17px;border-radius:0;transform:none;
  background:var(--acorn-mark-invert) center/contain no-repeat;
}

/* core value cards get the largest mark */
.values .card{padding-left:var(--space-8)}
.values .card::before{
  left:var(--space-5);top:calc(var(--space-6) + .12em);
  width:26px;height:27px;border-radius:0;transform:none;background:
  var(--acorn-mark) center/contain no-repeat;
}
@media (max-width:600px){
  .values .card{padding-left:var(--space-7)}
  .values .card::before{left:var(--space-4);width:22px;height:23px}
}

/* ============================================================
   Text with a portrait image alongside it
   ============================================================ */
.withside{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:var(--space-8); align-items:center; margin-top:var(--space-6);
}
.withside--flip{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.withside--flip .withside__img{order:-1}
.withside__img{margin:0}
.withside__img img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius-lg); border:1px solid var(--color-rule);
}
.sec--invert .withside__img img{border-color:var(--color-rule-invert)}
@media (max-width:900px){
  .withside,.withside--flip{grid-template-columns:1fr; gap:var(--space-6)}
  .withside--flip .withside__img{order:0}
  .withside__img{max-width:380px}
}

/* services rows are portrait 4:5; the homepage cards stay 3:2 */
.svc__media img{aspect-ratio:4/5}

/* ============================================================
   Hero, version two: the oak avenue
   The avenue plate is considerably brighter than the canopy plate,
   so it needs its own scrim rather than inheriting the original.
   ============================================================ */
.hero--avenue .hero__media img{object-position:center 58%}
/* The avenue reads as a tunnel with a bright vanishing point, so the scrim has to be
   heavy where the copy sits on the left and then get out of the way, or the whole
   reason Steve picked this composition disappears behind a wash of green. */
.hero--avenue .hero__scrim{
  background:
    linear-gradient(to right,
      rgba(29,36,25,.95) 0%,
      rgba(29,36,25,.90) 30%,
      rgba(29,36,25,.66) 48%,
      rgba(29,36,25,.30) 66%,
      rgba(29,36,25,.12) 82%,
      rgba(29,36,25,.20) 100%),
    linear-gradient(to top,
      rgba(29,36,25,.60) 0%,
      rgba(29,36,25,.18) 46%,
      rgba(29,36,25,.30) 100%);
}
.hero--avenue .lede{max-width:50ch}
.hero--avenue .hero__lede-2{margin-top:var(--space-4);font-size:1.06rem;opacity:.94}
@media (max-width:900px){
  .hero--avenue .hero__scrim{
    background:linear-gradient(to top,
      rgba(29,36,25,.97) 0%, rgba(29,36,25,.94) 34%,
      rgba(29,36,25,.86) 62%, rgba(29,36,25,.72) 100%);
  }
  .hero--avenue .hero__lede-2{font-size:1rem}
}

/* Steve's copy is longer than version one's, four headline lines plus two paragraphs.
   Left alone it pushes the call to action off a 900px laptop screen, so this variant
   runs a slightly tighter scale. The words are his and stay untouched. */
.hero--avenue{min-height:min(88vh,860px);padding:var(--space-8) 0}
.hero--avenue h1{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.06}
.hero--avenue .lede{font-size:1.06rem;line-height:1.55}
.hero--avenue .hero__lede-2{font-size:1rem;margin-top:var(--space-3)}
.hero--avenue .hero__actions{margin-top:var(--space-6)}
@media (max-width:900px){
  .hero--avenue{min-height:auto;padding:var(--space-7) 0}
}

/* Short desktop windows. Steve runs Chrome maximised on a 1080p display at 125% Windows
   scaling, which leaves about 1534x732 CSS px. min(88vh,860px) is fine at 905px of page
   height, but the copy block is about 625px tall, so under ~880px the button and its note
   fell below the fold — exactly what his screenshot showed.

   A single fixed step only rescued his size: at 1280x720 (630 CSS px of page) the button
   still overflowed by 27px. So every height-driving value below is capped by a vh term as
   well as a fixed one, and shrinks continuously as the window gets shorter. The vw/rem
   caps are chosen so that at Steve's 732px the type is exactly the size the fixed step
   gave (h1 stays 43.2px); only the vertical rhythm moves, by 3px. Above 960px of height
   none of this applies and the full size treatment is untouched. Steve's words are
   untouched.

   Floor: this holds the whole hero above the fold down to about 560 CSS px of page
   height. Below that the copy cannot shrink further without becoming unreadable, and the
   page scrolls, which is what a browser at 150% zoom expects anyway. */
@media (min-width:900px) and (max-height:960px){
  .hero--avenue{
    min-height:calc(100vh - var(--nav-height) - 12px);
    padding:min(var(--space-6), 2.7vh) 0;
  }
  .hero--avenue .eyebrow{margin-bottom:min(var(--space-3), 1.25vh)}
  .hero--avenue h1{font-size:clamp(1.62rem, min(3.6vw, 6.15vh), 2.7rem);line-height:1.04}
  .hero--avenue .lede{
    font-size:clamp(.86rem, min(.99rem, 2.26vh), .99rem);
    line-height:1.5;margin-top:min(var(--space-3), 1.8vh);
  }
  .hero--avenue .hero__lede-2{
    font-size:clamp(.84rem, min(.96rem, 2.18vh), .96rem);
    margin-top:min(var(--space-2), 1.3vh);
  }
  .hero--avenue .hero__actions{margin-top:min(var(--space-5), 2.9vh)}
}

/* Steve wants the corporate mark prominent, so version two carries it in the hero over the
   trunks on the right. It repeats the header lockup, so it is decorative and hidden from
   assistive tech. The pool behind it is a wide, low soft vignette that reads as depth in the
   canopy, deliberately not the glow treatment we are steering him away from on the logo itself. */
/* Steve does not want the mark sitting on a white field. Stacked drop-shadows give a true
   aura instead: drop-shadow follows the alpha channel, so the glow hugs the tree and the
   letterforms rather than sitting behind a rectangle. Three passes, tight to wide, so it
   reads as light coming off the mark rather than a blurred copy of it. */
.hero--avenue .hero__mark{
  position:absolute;z-index:2;pointer-events:none;
  right:clamp(20px,5vw,72px);bottom:clamp(20px,4vw,56px);
  width:clamp(230px,27vw,400px);
}
.hero--avenue .hero__mark img{
  width:100%;height:auto;display:block;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,1))
    drop-shadow(0 0 6px rgba(255,255,255,.99))
    drop-shadow(0 0 14px rgba(255,255,255,.94))
    drop-shadow(0 0 30px rgba(255,255,255,.74))
    drop-shadow(0 0 60px rgba(255,255,255,.46));
}
@media (max-width:1100px){
  .hero--avenue .hero__mark{width:clamp(170px,22vw,240px);top:auto;bottom:8%;transform:none}
}
@media (max-width:900px){
  .hero--avenue .hero__mark{display:none}
}

/* ============================================================
   Working page: what we need from you
   Temporary, deleted with _pages/what-we-need.html once the
   open items are settled. Nothing here is used by the site.
   ============================================================ */
.wwn-head{background:var(--canopy-900);color:var(--paper-50);padding:var(--space-9) 0 var(--space-8)}
.wwn-head h1{color:#fff;margin-top:var(--space-3);font-size:clamp(2.1rem,4.4vw,3.2rem)}
.wwn-head .lede{color:var(--oak-100);max-width:56ch;margin-top:var(--space-4)}
.wwn-head .eyebrow{color:var(--oak-300)}
.wwn-note{margin:var(--space-6) 0 0;font-size:13.5px;color:var(--oak-100);opacity:.72}

.wwn{padding:var(--space-9) 0}
.wwn__n{
  margin:0 0 var(--space-2);font-family:Fraunces,Georgia,serif;font-size:2.4rem;
  font-weight:300;line-height:1;color:var(--oak-500);
}
.wwn h2{margin-bottom:var(--space-4)}
.wwn .measure p + p{margin-top:var(--space-4)}

/* three logos, same visual weight, so the comparison is fair */
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-7)}
@media (max-width:900px){.cmp{grid-template-columns:1fr}}
.cmp__item{margin:0}
/* A definite height, not aspect-ratio. aspect-ratio is only a preference: the taller
   middle logo overrode it and knocked the three captions out of alignment. */
.cmp__frame{
  background:#fff;border:1px solid var(--color-rule);border-radius:var(--radius-lg);
  height:clamp(140px,13vw,180px);display:grid;place-items:center;
  padding:var(--space-5);overflow:hidden;
}
.cmp__frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cmp figcaption{margin-top:var(--space-4)}
.cmp figcaption b{display:block;font-size:15px}
.cmp figcaption span{display:block;margin-top:4px;font-size:14px;color:var(--color-text-muted);line-height:1.5}

.wwn__why{margin-top:var(--space-8)}
.wwn__why h3{font-size:1.15rem;margin-bottom:var(--space-5)}
.wwn__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-5)}
@media (max-width:900px){.wwn__grid{grid-template-columns:1fr}}
.wwn__card{
  background:var(--color-surface);border:1px solid var(--color-rule);
  border-radius:var(--radius-lg);padding:var(--space-6);
}
.wwn__card b{display:block;font-size:15.5px;margin-bottom:8px}
.wwn__card p{margin:0;font-size:14.5px;color:var(--color-text-muted);line-height:1.6}
.wwn__card code{font-size:13px;background:var(--color-bg-alt);padding:1px 5px;border-radius:4px}
.wwn__offer{
  margin-top:var(--space-6);padding:var(--space-6);border-left:3px solid var(--oak-500);
  background:var(--color-bg-alt);border-radius:0 var(--radius-md) var(--radius-md) 0;
  max-width:76ch;font-size:15.5px;line-height:1.65;
}
.wwn__list{list-style:none;padding:0;margin:var(--space-6) 0 0;display:grid;gap:10px;max-width:56ch}
.wwn__list li{position:relative;padding-left:24px;font-size:15.5px}
.wwn__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--oak-500);
}
.wwn__list--tight li{font-weight:600}
.wwn__ask{
  margin-top:var(--space-6);font-size:15.5px;font-weight:600;color:var(--canopy-800);
  max-width:70ch;
}
.wwn__actions{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-7)}
.wwn--close{padding-bottom:var(--space-10)}
.wwn--close h2{font-family:Fraunces,Georgia,serif;font-weight:300}
/* The site-wide .btn--ghost is built for dark panels. This working page is on paper,
   so it needs its own light variant, scoped so it cannot reach the real pages. */
.wwn .btn--ghost{background:transparent;color:var(--canopy-900);border:1.5px solid var(--canopy-800)}
.wwn .btn--ghost:hover{background:var(--canopy-900);color:var(--paper-50);border-color:var(--canopy-900)}
.cmp--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
@media (max-width:900px){.cmp--two{grid-template-columns:1fr}}

/* care plan block on the working page */
.care{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:var(--space-7);align-items:start;margin-top:var(--space-7)}
@media (max-width:760px){.care{grid-template-columns:1fr;gap:var(--space-5)}}
.care__price{
  background:var(--canopy-900);color:var(--paper-50);border-radius:var(--radius-lg);
  padding:var(--space-6);text-align:center;
}
.care__price b{display:block;font-family:Fraunces,Georgia,serif;font-weight:400;
  font-size:2.9rem;line-height:1;color:#fff}
.care__price span{display:block;margin-top:6px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oak-300)}
.care__list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-4)}
.care__list li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.6;
  color:var(--color-text-muted)}
.care__list li b{color:var(--color-text)}
.care__list li::before{
  content:"";position:absolute;left:0;top:.4em;width:12px;height:7px;
  border-left:2px solid var(--oak-600);border-bottom:2px solid var(--oak-600);
  transform:rotate(-45deg);
}

/* ---- go-live DNS table: has to be readable on a shared screen ---- */
.dns{margin-top:var(--space-7);border:1px solid var(--color-rule);border-radius:var(--radius-lg);
  overflow:hidden;background:#fff}
.dns__row{display:grid;grid-template-columns:90px 110px minmax(0,1fr) 90px;
  gap:var(--space-4);padding:var(--space-4) var(--space-5);align-items:center;
  border-bottom:1px solid var(--color-rule)}
.dns__row:last-child{border-bottom:0}
.dns__row--head{background:var(--color-bg-alt);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--color-text-muted)}
.dns__row code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px;background:var(--color-bg-alt);padding:4px 9px;border-radius:6px;
  color:var(--canopy-900);word-break:break-all}
.dns__row span{font-size:15px}
@media (max-width:760px){
  .dns__row{grid-template-columns:1fr;gap:6px;padding:var(--space-5)}
  .dns__row--head{display:none}
  .dns__row span::before{content:attr(data-l) " ";font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--color-text-muted);font-weight:700;margin-right:6px}
}
.dns__note{margin-top:var(--space-4);font-size:14.5px;color:var(--color-text-muted);max-width:70ch}
.dns__note code{font-family:ui-monospace,Menlo,monospace;font-size:13.5px}

.dns__warn{margin-top:var(--space-7);border-left:4px solid #B3261E;background:#FFF5F4;
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-6)}
.dns__warn h3{font-size:1.05rem;margin-bottom:8px;color:#8C1D18}
.dns__warn p{margin:0;font-size:15px;line-height:1.6;max-width:74ch;color:var(--color-text)}
.dns__warn ul{list-style:none;padding:0;margin:var(--space-5) 0 0;display:grid;gap:10px}
.dns__warn li{font-size:14.5px}
.dns__warn code{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;
  background:rgba(140,29,24,.08);padding:3px 7px;border-radius:5px}
.dns__h{font-size:1.05rem;margin:var(--space-7) 0 var(--space-3)}

/* discreet link to the working page, removed at go-live */
.foot-notes{color:inherit;opacity:.55;text-decoration:none;border-bottom:1px solid currentColor}
.foot-notes:hover{opacity:.9}
/* Steve asked for less air between the case studies intro line and the first discipline heading */
.page-head--tight{padding-bottom:var(--space-4)}
.page-head--tight + .cs{padding-top:var(--space-6)}

/* The sprig image is 900x1125 and the card window is 3:2, so a centred crop shows only 53%
   of the height and clips the leaf tips at y=216 against a window starting at y=262.
   Moving the window up to 30% starts it at y=157, which clears the leaves with headroom. */
.card__media--sprig img{object-position:50% 30%}