@import url('/assets/fonts/fonts.css');

/* ==========================================================================
   Gronari — site stylesheet
   Palette is the brand board, verified for WCAG 2.2 AA contrast.
   Ember #D47A1F reaches only 2.87:1 on ivory, so small text on light grounds
   uses --ember-ink #9C5410 (5.14:1). Ember remains the fill/rule/icon accent.
   Photography is shown at its own aspect ratio; nothing is stretched.
   ========================================================================== */

:root{
  /* brand palette */
  --ivory:#F7F3EB;
  --white:#FFFFFF;
  --sand:#D8C4A4;
  --sand-tint:#EFE7D7;
  --ink:#2D2D2D;
  --ink-muted:#4F5B53;
  --green-950:#152B20;
  --green-900:#1D3826;   /* matches the logo tile ground exactly */
  --green-800:#214936;
  --green-700:#1E5B43;
  --ember:#D47A1F;
  --ember-ink:#9C5410;   /* AA-safe ember for small text on light */
  --rule:#E2DACA;
  --rule-dark:#31493A;

  /* spacing scale */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:128px;

  /* radii + depth */
  --r-sm:6px; --r-md:10px; --r-lg:20px; --r-img:24px; --r-tile:22%;
  --shadow-img:0 32px 64px -36px rgba(21,43,32,.5);
  --shadow-card:0 22px 44px -30px rgba(21,43,32,.4);

  --container:1200px;
  --measure:62ch;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;

  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;      /* 17px */
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}
figure{margin:0;}

/* ---------- type scale ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--green-800);
  margin:0;
  text-wrap:balance;
}
h1{
  font-weight:700;
  font-size:clamp(2.4rem,1.45rem + 4vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.032em;
}
h2{
  font-weight:700;
  font-size:clamp(1.8rem,1.25rem + 2.2vw,2.8rem);
  line-height:1.08;
  letter-spacing:-.024em;
}
h3{
  font-weight:600;
  font-size:clamp(1.15rem,1.03rem + .45vw,1.4rem);
  line-height:1.28;
  letter-spacing:-.01em;
}
h4{
  font-family:var(--body);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ember-ink);
  margin:0 0 var(--s2);
}
p{margin:0 0 var(--s4);max-width:var(--measure);}
p:last-child{margin-bottom:0;}

.lead{
  font-size:clamp(1.1rem,1.03rem + .35vw,1.28rem);
  line-height:1.55;
  color:var(--ink-muted);
  max-width:56ch;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--s3);
  font-family:var(--body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember-ink);
  margin:0 0 var(--s4);
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--ember);
  flex:none;
}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--s5);
}
@media (min-width:900px){ .wrap{padding-inline:var(--s7);} }

.band{padding-block:var(--s9);}
@media (min-width:900px){ .band{padding-block:var(--s11);} }
.band--tight{padding-block:var(--s8);}
@media (min-width:900px){ .band--tight{padding-block:var(--s10);} }

.band--ivory{background:var(--ivory);}
.band--white{background:var(--white);}
.band--sand{background:var(--sand-tint);}
.band--deepest{background:var(--green-950);}

/* text colours inside dark bands */
.band--deepest,.band--cta{color:var(--ivory);}
.band--deepest h1,.band--deepest h2,.band--deepest h3,
.band--cta h1,.band--cta h2,.band--cta h3{color:var(--ivory);}
.band--deepest .lead,.band--cta .lead{color:var(--sand);}

/* Eyebrow + label text on every dark ground uses sand (7.50:1). Ember stays
   as the 2px rule and icon accent, where 4.01:1 clears the 3:1 non-text bar. */
.band--deepest .eyebrow,.band--cta .eyebrow,
.hero .eyebrow,.page-head .eyebrow,.panel--accent .eyebrow{color:var(--sand);}

.section-head{max-width:62ch;margin-bottom:var(--s8);}
.section-head h2 + p{margin-top:var(--s4);}
.section-head p:not(.eyebrow){color:var(--ink-muted);}
.band--deepest .section-head p:not(.eyebrow){color:var(--sand);}

/* editorial head: title left, standfirst right, bottom-aligned */
.section-head--row{max-width:none;display:grid;gap:var(--s4);}
@media (min-width:900px){
  .section-head--row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s10);align-items:end;}
  .section-head--row > p{margin-bottom:6px;}
}

/* asymmetric editorial split */
.split{display:grid;gap:var(--s7);}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s10);align-items:start;}
}
.split__aside{align-self:start;}
@media (min-width:900px){
  .split__aside{position:sticky;top:100px;}
}
.split__aside h2 + p{margin-top:var(--s4);color:var(--ink-muted);}
.split__aside .plate,.split__aside .frame{margin-top:var(--s7);}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:var(--s4);top:-100px;
  z-index:200;
  background:var(--green-700);color:var(--ivory);
  padding:var(--s3) var(--s5);
  border-radius:var(--r-md);
  font-weight:600;text-decoration:none;
  transition:top .15s var(--ease);
}
.skip:focus{top:var(--s4);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--green-900);
  border-bottom:1px solid var(--rule-dark);
  transition:box-shadow .2s var(--ease);
}
.site-header[data-scrolled="true"]{
  box-shadow:0 8px 24px rgba(11,26,18,.32);
  border-bottom-color:transparent;
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);
  min-height:64px;
}
@media (min-width:900px){ .site-header__inner{min-height:74px;} }

.brand{
  display:inline-flex;align-items:center;gap:var(--s3);
  text-decoration:none;color:var(--ivory);
  flex:none;
}
.brand__mark{
  width:38px;height:38px;
  border-radius:var(--r-tile);
  flex:none;
}
.brand__name{
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.12em;
  line-height:1;
}
.brand__sub{
  display:block;
  font-family:var(--body);
  font-size:.575rem;
  font-weight:600;
  letter-spacing:.19em;
  color:var(--sand);
  margin-top:3px;
}

.nav{display:none;}
@media (min-width:900px){
  .nav{display:flex;align-items:center;gap:var(--s1);}
}
.nav a{
  position:relative;
  display:inline-block;
  padding:var(--s2) var(--s4);
  border-radius:var(--r-md);
  color:var(--ivory);
  opacity:.84;
  text-decoration:none;
  font-size:.945rem;
  font-weight:500;
  transition:opacity .18s var(--ease),background-color .18s var(--ease);
}
.nav a:not(.btn)::after{
  content:"";
  position:absolute;left:var(--s4);right:var(--s4);bottom:5px;
  height:2px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav a:hover{opacity:1;}
.nav a:hover::after,.nav a[aria-current="page"]:not(.btn)::after{transform:scaleX(1);}   /* shape, not colour alone */
.nav a[aria-current="page"]{opacity:1;}
.nav .btn{margin-left:var(--s4);opacity:1;}

/* mobile toggle */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:transparent;
  border:1px solid rgba(247,243,235,.28);
  color:var(--ivory);
  border-radius:var(--r-md);
  padding:9px var(--s4);
  font:inherit;font-size:.875rem;font-weight:600;
  cursor:pointer;
  min-height:42px;
}
@media (min-width:900px){ .nav-toggle{display:none;} }
.nav-toggle__bars{display:block;width:16px;height:10px;position:relative;}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;
  transition:transform .2s var(--ease),top .2s var(--ease);
}
.nav-toggle__bars::before{top:0;}
.nav-toggle__bars::after{top:8px;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:4px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:4px;transform:rotate(-45deg);}

.mobile-nav{
  display:none;
  background:var(--green-950);
  border-bottom:1px solid var(--rule-dark);
}
.mobile-nav[data-open="true"]{display:block;}
@media (min-width:900px){ .mobile-nav{display:none !important;} }
.mobile-nav ul{list-style:none;margin:0;padding:var(--s3) 0 var(--s5);}
.mobile-nav li + li{border-top:1px solid var(--rule-dark);}
.mobile-nav a{
  display:block;
  padding:var(--s4) 0;
  color:var(--ivory);
  text-decoration:none;
  font-weight:500;
  font-size:1.05rem;
}
.mobile-nav a[aria-current="page"]{
  color:var(--ivory);font-weight:600;
  box-shadow:inset 3px 0 0 var(--ember);   /* shape, not colour alone */
  padding-left:var(--s4);
}
.mobile-nav .btn{margin-top:var(--s5);width:100%;justify-content:center;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:13px var(--s6);
  min-height:48px;
  border-radius:999px;
  font-family:var(--body);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  text-align:center;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px);}
.btn--sm{padding:9px var(--s5);min-height:42px;font-size:.925rem;}

/* primary: forest green + ivory = 7.21:1 */
.btn--primary{background:var(--green-700);color:var(--ivory);border-color:var(--green-700);}
.btn--primary:hover{background:var(--green-800);border-color:var(--green-800);box-shadow:0 10px 24px -14px rgba(21,43,32,.7);}

/* on dark grounds: ivory + green-900 = 11.53:1 */
.btn--light{background:var(--ivory);color:var(--green-900);border-color:var(--ivory);}
.btn--light:hover{background:var(--white);border-color:var(--white);box-shadow:0 12px 28px -14px rgba(0,0,0,.55);}

.btn--ghost{background:transparent;color:var(--green-800);border-color:var(--rule);}
.btn--ghost:hover{border-color:var(--green-700);background:var(--white);}

.btn--ghost-dark{background:transparent;color:var(--ivory);border-color:rgba(247,243,235,.34);}
.btn--ghost-dark:hover{border-color:var(--ivory);background:rgba(247,243,235,.08);}

/* arrow CTA: a chevron that nudges on hover */
.btn--arrow::after{
  content:"";
  width:.5em;height:.5em;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:.15em;
  transition:transform .2s var(--ease);
}
.btn--arrow:hover::after{transform:translateX(3px) rotate(45deg);}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7);}

/* ---------- links & focus ---------- */
a{color:var(--green-700);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--green-800);}
.band--deepest a:not(.btn),.band--cta a:not(.btn){color:var(--sand);}

:focus-visible{
  outline:3px solid var(--ember);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.band--deepest :focus-visible,
.band--cta :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.panel--accent :focus-visible,
.site-header :focus-visible,
.mobile-nav :focus-visible,
.site-footer :focus-visible{outline-color:var(--sand);}

/* ---------- photography ---------- */
/* Every image is shown at its own aspect ratio: width 100%, height auto. */
.frame{
  position:relative;
  border-radius:var(--r-img);
  overflow:hidden;
  background:var(--sand-tint);
  box-shadow:var(--shadow-img);
}
.frame img{width:100%;height:auto;}

/* A few files carry a blank strip along one edge. The frame's ratio is set to
   the picture area and object-position slides the strip out of view. This is
   the only place object-fit is used on a framed image. */
.frame--trim{aspect-ratio:var(--ar);}
.frame--trim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);}

/* offset sand plate behind a frame — editorial depth without a second file */
.plate{position:relative;}
.plate::before{
  content:"";
  position:absolute;inset:0;
  transform:translate(14px,14px);
  border-radius:var(--r-img);
  background:var(--sand);
}
.plate .frame{position:relative;}
.band--sand .plate::before{background:var(--white);}
@media (max-width:600px){ .plate::before{transform:translate(8px,8px);} }

/* full-width landscape under a section heading */
.frame--wide{margin-bottom:var(--s8);}

/* edge-to-edge band; on phones the strip is framed taller, positioned so the
   wall lettering stays in view */
.band--bleed{background:var(--white);}
.bleed{border-radius:0;box-shadow:none;background:var(--green-950);}
@media (max-width:700px){
  .bleed{aspect-ratio:16 / 10;}
  .bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--green-900);
  color:var(--ivory);
  padding-block:var(--s8) var(--s9);
  border-bottom:1px solid var(--rule-dark);
}
@media (min-width:900px){ .hero{padding-block:var(--s10) var(--s10);} }
/* the ring motif — a nod to the circular mark */
.hero::before,.page-head::before,.band--cta::before{
  content:"";
  position:absolute;
  width:62vw;height:62vw;max-width:820px;max-height:820px;
  right:-14vw;top:-30vw;
  border-radius:50%;
  border:1px solid rgba(216,196,164,.18);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:38vw;height:38vw;max-width:520px;max-height:520px;
  right:-4vw;top:-16vw;
  border-radius:50%;
  border:1px solid rgba(216,196,164,.12);
  pointer-events:none;
}
.hero .wrap,.page-head .wrap{position:relative;}
.hero h1{color:var(--ivory);max-width:14ch;}
.hero .lead{color:var(--sand);max-width:44ch;margin-top:var(--s5);}
.hero__grid{display:grid;gap:var(--s8);}
@media (min-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--s10);align-items:center;}
}
.hero .plate::before{background:rgba(212,122,31,.6);}
.hero .frame{box-shadow:0 40px 80px -40px rgba(0,0,0,.7);}

.hero__facts{
  display:grid;gap:var(--s4);
  margin:var(--s9) 0 0;
}
@media (min-width:760px){ .hero__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);} }
.hero__facts > div{
  border:1px solid var(--rule-dark);
  border-radius:var(--r-lg);
  padding:var(--s5);
  background:rgba(21,43,32,.45);
}
.hero__facts dt{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sand);margin-bottom:var(--s2);
}
.hero__facts dd{margin:0;color:var(--ivory);font-size:.97rem;line-height:1.55;}

/* page header (inner pages) */
.page-head{
  position:relative;overflow:hidden;
  background:var(--green-900);
  color:var(--ivory);
  padding-block:var(--s7) var(--s9);
  border-bottom:1px solid var(--rule-dark);
}
@media (min-width:900px){ .page-head{padding-block:var(--s8) var(--s10);} }
.page-head h1{color:var(--ivory);max-width:18ch;}
.page-head .lead{color:var(--sand);margin-top:var(--s5);}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.82rem;margin-bottom:var(--s6);color:var(--sand);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;}
.crumbs li::after{content:"/";margin-left:var(--s2);opacity:.5;}
.crumbs li:last-child::after{content:"";}
.crumbs a{color:var(--sand);display:inline-block;padding-block:5px;}
.crumbs [aria-current="page"]{opacity:.72;}

/* ---------- icon tiles ---------- */
.icon-tile{
  width:50px;height:50px;
  border-radius:14px;
  background:rgba(30,91,67,.09);
  color:var(--green-700);
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;
}
.icon{width:26px;height:26px;}

/* ---------- service cards ---------- */
.cards{display:grid;gap:var(--s4);}
@media (min-width:700px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);} }
@media (min-width:1100px){ .cards{grid-template-columns:repeat(4,minmax(0,1fr));} }
.card{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:rgba(30,91,67,.35);}
.card .icon-tile{margin-bottom:var(--s2);}
.card h3{font-size:1.2rem;}
.card p{color:var(--ink-muted);font-size:.98rem;line-height:1.6;}

/* ---------- numbered reasons ---------- */
.reasons{list-style:none;margin:0;padding:0;}
.reasons li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s4) var(--s5);
  padding:var(--s6) 0;
  border-top:1px solid var(--rule);
}
.reasons li:last-child{border-bottom:1px solid var(--rule);}
.reasons__n{
  font-family:var(--display);font-weight:700;
  font-size:2.2rem;line-height:1;
  color:var(--ember-ink);
  font-variant-numeric:tabular-nums;
  min-width:2.3ch;
}
@media (min-width:900px){ .reasons__n{font-size:2.8rem;} }
.reasons h3{margin-bottom:var(--s2);}
.reasons p{color:var(--ink-muted);}

/* ---------- stepper (home: five stages) ---------- */
.stepper{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.stepper li{position:relative;padding:0 0 var(--s7) 68px;}
.stepper li::before{
  content:"";position:absolute;left:23px;top:52px;bottom:0;width:2px;background:var(--rule);
}
.stepper li:last-child{padding-bottom:0;}
.stepper li:last-child::before{display:none;}
.stepper__n{
  position:absolute;left:0;top:0;
  width:48px;height:48px;border-radius:50%;
  background:var(--white);border:2px solid var(--ember);
  color:var(--ember-ink);
  font-family:var(--display);font-weight:700;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.stepper h3{margin:8px 0 var(--s2);font-size:1.18rem;}
.stepper p{color:var(--ink-muted);font-size:.98rem;line-height:1.55;}
@media (min-width:1100px){
  .stepper{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s6);}
  .stepper li{padding:68px 0 0;}
  .stepper li::before{left:56px;right:-40px;top:23px;bottom:auto;width:auto;height:2px;}
  .stepper h3{margin-top:0;}
}

/* ---------- standards (six pillars) ---------- */
.standards{margin:0;display:grid;gap:var(--s6) var(--s7);}
@media (min-width:700px){ .standards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1000px){ .standards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);} }
.standards__item{border-top:1px solid var(--rule-dark);padding-top:var(--s5);}
.standards dt{
  font-family:var(--display);font-weight:700;
  font-size:1.3rem;letter-spacing:-.01em;
  color:var(--ivory);
  display:flex;align-items:baseline;gap:var(--s3);
  margin-bottom:var(--s3);
}
.standards__n{
  font-family:var(--body);font-weight:600;
  font-size:.75rem;letter-spacing:.14em;
  color:var(--sand);
}
.standards dd{margin:0;color:var(--sand);font-size:.98rem;line-height:1.6;}

/* ---------- feature row: photograph beside text, alternating ---------- */
.feature{display:grid;gap:var(--s7);align-items:center;}
@media (min-width:900px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s10);}
  .feature--reverse > .feature__media{order:2;}
  .feature--portrait{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);}
}
.feature__body .icon-tile{margin-bottom:var(--s5);}
.feature__body h2{margin-bottom:var(--s4);}
.feature__body .lead{margin-bottom:var(--s4);}

/* "what this covers" panel */
.covers{
  margin-top:var(--s6);
  background:var(--sand-tint);
  border-radius:var(--r-lg);
  padding:var(--s5);
}
.band--white .covers{background:var(--ivory);}
.covers h3{
  font-family:var(--body);
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-ink);
  margin-bottom:var(--s4);
}

/* ---------- tick / cross lists ---------- */
.ticks,.crosses{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);}
.ticks li,.crosses li{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s3);
  align-items:start;color:var(--ink-muted);font-size:.97rem;line-height:1.55;
}
.ticks svg,.crosses svg{width:20px;height:20px;margin-top:2px;}
.ticks svg{color:var(--green-700);}
.crosses svg{color:var(--ember-ink);}

/* ---------- fit panels (services scope) ---------- */
.fit{display:grid;gap:var(--s5);}
@media (min-width:820px){ .fit{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);} }
.fit__panel{
  background:var(--white);
  border:1px solid var(--rule);
  border-top:4px solid var(--green-700);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
}
@media (min-width:700px){ .fit__panel{padding:var(--s6);} }
.fit__panel--no{border-top-color:var(--ember);}
.fit__panel h3{margin-bottom:var(--s5);}

/* ---------- engagement stages (process page) ---------- */
.stages{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);}
.stages__item{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
  display:grid;gap:var(--s5);
}
@media (min-width:1000px){
  .stages__item{grid-template-columns:48px minmax(0,1fr) 300px;gap:var(--s7);padding:var(--s7);align-items:start;}
}
.stages__n{
  width:48px;height:48px;border-radius:50%;
  border:2px solid var(--ember);color:var(--ember-ink);
  font-family:var(--display);font-weight:700;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.stages__body h3{margin-bottom:var(--s2);}
.stages__body p{color:var(--ink-muted);}
.stages__ask{background:var(--sand-tint);border-radius:var(--r-md);padding:var(--s4) var(--s5);}
.stages__ask p{color:var(--ink);font-size:.97rem;line-height:1.55;}

/* ---------- commitments (dark grid) ---------- */
.commit{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);}
@media (min-width:700px){ .commit{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1000px){ .commit{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);} }
.commit li{
  border:1px solid var(--rule-dark);
  border-radius:var(--r-lg);
  padding:var(--s5);
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s3);
  color:var(--ivory);font-size:1rem;line-height:1.55;
  background:rgba(247,243,235,.035);
}
.commit svg{width:22px;height:22px;color:var(--ember);margin-top:2px;}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;
  cursor:pointer;
  font-family:var(--display);
  font-weight:600;
  font-size:1.08rem;
  line-height:1.4;
  color:var(--green-800);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";
  flex:none;
  width:12px;height:12px;margin-top:7px;
  border-right:2px solid var(--ember);
  border-bottom:2px solid var(--ember);
  transform:rotate(45deg);
  transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq details > div{padding:0 0 var(--s5);}
.faq p{color:var(--ink-muted);}

/* ---------- CTA band ---------- */
.band--cta{position:relative;overflow:hidden;background:var(--green-700);}
.band--cta::before{right:-16vw;top:-36vw;border-color:rgba(247,243,235,.2);}
.band--cta::after{
  content:"";position:absolute;
  width:34vw;height:34vw;max-width:460px;max-height:460px;
  right:-2vw;top:-18vw;
  border-radius:50%;border:1px solid rgba(247,243,235,.14);
  pointer-events:none;
}
.cta{position:relative;display:grid;gap:var(--s6);}
@media (min-width:900px){
  .cta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:var(--s10);}
  .cta .btn-row{justify-content:flex-end;}
}
.cta h2{max-width:18ch;}
.cta .lead{margin-top:var(--s4);}
.cta .btn-row{margin-top:0;}

/* ---------- about: name lockup + mark ---------- */
.lockup{
  margin-top:var(--s2);
  font-size:clamp(3rem,1.9rem + 5.2vw,5.6rem);
  line-height:1;letter-spacing:-.045em;
}
.lockup__gro{color:var(--green-800);}
.lockup__plus{color:var(--sand);font-weight:400;}
.lockup__nar{color:var(--ember-ink);}
.lockup__ar{
  font-size:1.6rem;line-height:1;
  color:var(--ink-muted);
  margin:var(--s3) 0 0;max-width:none;
}
.mark-row{display:grid;gap:var(--s6);}
@media (min-width:700px){ .mark-row{grid-template-columns:auto minmax(0,1fr);gap:var(--s7);align-items:start;} }
.mark-tile{
  width:168px;height:168px;
  border-radius:var(--r-lg);
  background:var(--sand-tint);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.logo-large{width:120px;height:120px;border-radius:var(--r-tile);}

/* ---------- contact ---------- */
.contact{display:grid;gap:var(--s5);}
@media (min-width:900px){ .contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);align-items:start;} }
.panel{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
}
@media (min-width:700px){ .panel{padding:var(--s7);} }
.panel h2{margin-bottom:var(--s4);}
.panel--accent{background:var(--green-900);border-color:var(--green-900);color:var(--ivory);}
.panel--accent h2{color:var(--ivory);}
.panel--accent .lead{color:var(--sand);}
.panel--accent .btn-row{margin-top:var(--s6);}

.steps{list-style:none;margin:var(--s2) 0 0;padding:0;}
.steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  padding:var(--s5) 0;
  border-top:1px solid var(--rule);
}
.steps li:first-child{border-top:0;padding-top:0;}
.steps li:last-child{padding-bottom:0;}
.steps__n{
  font-family:var(--display);font-weight:700;font-size:1rem;
  color:var(--ember-ink);font-variant-numeric:tabular-nums;line-height:1.6;
}
.steps h3{margin-bottom:var(--s1);font-size:1.08rem;}
.steps p{color:var(--ink-muted);font-size:.97rem;}

/* ---------- prose (legal pages) ---------- */
.prose{
  max-width:var(--measure);
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
}
@media (min-width:700px){ .prose{padding:var(--s8);} }
.prose h2{margin:var(--s8) 0 var(--s4);font-size:clamp(1.32rem,1.15rem + .7vw,1.7rem);}
.prose ul{margin:0 0 var(--s4);padding-left:1.25em;color:var(--ink-muted);}
.prose li{margin-bottom:var(--s2);}
.prose p{color:var(--ink-muted);}
.prose__meta{
  font-size:.9rem;color:var(--ink-muted);
  padding-bottom:var(--s5);margin-bottom:var(--s7);
  border-bottom:1px solid var(--rule);
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--green-950);
  color:var(--sand);
  padding-block:var(--s9) var(--s7);
  font-size:.95rem;
}
.site-footer__top{
  display:grid;gap:var(--s8);
  padding-bottom:var(--s8);
  border-bottom:1px solid var(--rule-dark);
}
@media (min-width:820px){
  .site-footer__top{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:var(--s10);}
}
.site-footer .brand__mark{width:34px;height:34px;}
.site-footer h2{
  font-family:var(--body);
  font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ivory);margin-bottom:var(--s5);
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);}
.site-footer li a{display:inline-block;padding-block:6px;}   /* >=24px tap target */
.site-footer a{color:var(--sand);text-decoration:none;}
.site-footer a:hover{color:var(--ivory);text-decoration:underline;}
.site-footer__blurb{max-width:34ch;margin-top:var(--s5);color:var(--sand);}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
  justify-content:space-between;align-items:center;
  padding-top:var(--s6);
  font-size:.86rem;
}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);}
.site-footer__legal a{display:inline-block;padding-block:5px;}

.ext::after{
  content:"";
  display:inline-block;
  width:.62em;height:.62em;
  margin-left:.42em;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:translateY(-1px) rotate(45deg);
  opacity:.75;
}

/* ---------- motion ----------
   No entrance animations. Content never depends on JavaScript to become
   visible; transitions are limited to hover/focus states on controls. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .btn:hover,.card:hover{transform:none;}
}

/* ---------- utilities ---------- */
[id]{scroll-margin-top:88px;}     /* anchor offset under the sticky header */
main:focus{outline:none;}

/* Very small handsets (<360px): reclaim width so the brand lockup and the
   menu button always fit. The PEOPLE · OPERATIONS sub-label returns at 360px. */
@media (max-width:359px){
  .wrap{padding-inline:var(--s4);}
  .brand{min-width:0;}
  .brand__sub{display:none;}
  .nav-toggle{padding-inline:var(--s3);}
}