@font-face{font-family:"Juturu";src:url("../fonts/juturu-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Juturu";src:url("../fonts/juturu-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Juturu";src:url("../fonts/juturu-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Billion Butterfly";src:url("../fonts/billion-butterfly.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Billion Butterfly";src:url("../fonts/billion-butterfly-italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap;}

:root{
  /* Structure and proportions from kindsight.io.
     Greens rebuilt around Luminel's logo colour #0B1F1E, which is far deeper
     than Kindsight's olive — so lime, cream, coral and greys are all retuned
     to sit correctly against it. */
  --off-white:#FCFDF9;
  --off-black:#0B1F1E;      /* the brand green doubles as the text colour */
  --cream:#F5F7F1;          /* cooled from Kindsight's warm #FAF5F0 */
  --cream-off:#E3E7DE;
  --cream-light:#C4CCBF;
  --grey:#E1E6DE;
  --grey-safe:#5E6F67;      /* green-grey, replaces the warm #7A6C5F */

  --lime:#DCEF7E;           /* eased back a touch; reads hotter on near-black */
  --lime-fade:#E7EFC9;
  --lime-white:#F4FBD2;

  --green:#0B1F1E;          /* Luminel logo green — primary dark surface */
  --green-500:#12332F;      /* raised surface on dark */
  --green-deep:#071614;
  --green-deeper:#040F0E;
  --green-light:#3E5A54;
  --green-fade:#8FA89F;

  --coral:#BC5029;          /* deepened until white text clears 4.5:1 */
  --coral-dark:#A8451F;
  --coral-ink:#9E3F1B;      /* coral as text on cream — meets 4.5:1 */

  --disp:"Billion Butterfly","Times New Roman",Georgia,serif;
  --sans:"Juturu","Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  --wrap:1265px;
  --pad:32px;
  --r-card:24px;
  --r-btn:10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--cream);color:var(--off-black);
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0;}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}

/* Kindsight's display treatment: very large, very tight tracking, sub-1 line-height */
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;margin:0;color:var(--off-black);}
h1{font-size:clamp(46px,7.2vw,94px);line-height:.82;letter-spacing:-.045em;}
h2{font-size:clamp(38px,5.9vw,80px);line-height:.90;letter-spacing:-.046em;}
h3{font-size:clamp(32px,4.4vw,60px);line-height:.86;letter-spacing:-.04em;}
h4{font-size:clamp(22px,2.2vw,30px);line-height:1;letter-spacing:-.03em;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.sec{padding:76px 0 92px;}
.sec--green{background:var(--green);color:var(--cream);}
.sec--green h2,.sec--green h3{color:var(--lime);}
.sec--cream{background:var(--cream);}

/* ---------- buttons (radius 10, asymmetric padding as on source) ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:18px;font-weight:500;
  padding:15px 35px 15px;border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn--coral{background:var(--coral);color:var(--off-white);}
.btn--coral:hover{background:var(--coral-dark);}
.btn--lime{background:var(--lime);color:var(--off-black);}
.btn--lime:hover{background:var(--lime-white);}
.btn--ghost{border-color:rgba(255,255,255,.4);color:var(--cream);}
.btn--ghost:hover{background:rgba(255,255,255,.1);}
.btn--outline{border-color:var(--off-black);color:var(--off-black);}
.btn--outline:hover{background:var(--off-black);color:var(--cream);}

/* the oversized pill CTA */
.btn-xl{
  display:inline-block;font-family:var(--disp);font-weight:400;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;
  background:var(--green);color:var(--off-white);
  padding:26px 68px 30px;border-radius:50px;transition:background-color .3s ease,transform .3s ease;
}
.btn-xl:hover{background:var(--green-deep);transform:translateY(-2px);}
.btn-xl.on-green{background:var(--lime);color:var(--off-black);}
.btn-xl.on-green:hover{background:var(--lime-white);}

/* ---------- header ---------- */
.hdr{background:var(--green);position:sticky;top:0;z-index:60;}
.hdr > .wrap{display:flex;align-items:center;gap:38px;min-height:78px;padding-top:10px;padding-bottom:10px;}
.hdr > .wrap .logo img{height:28px;width:auto;filter:brightness(0) invert(1);}
.hnav{display:flex;gap:30px;margin-left:auto;font-size:17px;font-weight:400;letter-spacing:.005em;color:var(--cream);}
.hnav a{padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .2s ease;}
.hnav a:hover{border-bottom-color:var(--lime);}
.hdr .acts{display:flex;align-items:center;gap:14px;}
.hdr .plain{color:var(--coral);font-size:18px;}
.hdr .btn{font-size:17px;padding:12px 26px;white-space:nowrap;}
.burger{
  display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;
  border-radius:8px;cursor:pointer;margin-left:auto;
  min-width:44px;min-height:44px;font-size:17px;line-height:1;
}
@media(max-width:1040px){.hnav{display:none;}.burger{display:block;}}
@media(max-width:620px){
  .hdr .acts{display:none;}
  .hdr > .wrap{gap:14px;min-height:68px;}
  .hdr > .wrap .logo img{height:25px;}
}

/* ---------- hero ---------- */
.hero{background:var(--green);padding:24px 0 92px;}
.hero-in{display:flex;align-items:center;gap:56px;}
.hero-art{flex:0 0 37%;border-radius:var(--r-card);overflow:hidden;
  /* soft lime halo — reads as light rather than as a border, and lifts the
     photo off the deep green ground where its own dark edges would blend in */
  box-shadow:0 0 90px -18px rgba(220,239,126,.50);}
.hero-art img{width:100%;height:clamp(380px,62vh,552px);object-fit:cover;object-position:center 52%;}
.hero-copy{flex:1;}
.hero h1{color:var(--lime);max-width:17ch;}
.hero p{color:var(--cream);font-size:clamp(18px,1.7vw,24px);font-weight:300;
  line-height:1.33;margin:30px 0 0;max-width:46ch;}
.hero .cta-row{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
@media(max-width:900px){
  .hero-in{flex-direction:column;align-items:stretch;gap:34px;}
  .hero-art{flex:none;}
  .hero-art img{height:360px;object-position:center 50%;}
}

/* ---------- practice profile strip ----------
   Was four flex-wrapped cards, which orphaned the fourth onto its own row and
   set non-numeric facts ("Public health") in display type, so they read as
   statistics. Now one panel, four equal columns, plain type. */
.profile{padding:66px 0 78px;}
.profile h2{font-size:clamp(30px,3.6vw,50px);max-width:19ch;margin-bottom:36px;}
.pf-panel{
  background:var(--off-white);border:1px solid var(--cream-off);border-radius:var(--r-card);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.pf-col{
  padding:30px 28px 34px;border-left:1px solid var(--cream-off);
  position:relative;overflow:hidden;
  transition:background-color .38s ease;
}
.pf-col:first-child{border-left:0;}

/* accent rule wipes in from the left along the top of the hovered column.
   Alternating lime / coral so four columns read as a rhythm rather than
   four identical blocks. Both colours are already in the palette. */
.pf-col::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.pf-col:nth-child(odd)::before{background:var(--lime);}
.pf-col:nth-child(even)::before{background:var(--coral);}
.pf-col:hover::before{transform:scaleX(1);}

.pf-col:nth-child(odd):hover{background:var(--lime-fade);}
.pf-col:nth-child(even):hover{background:rgba(188,80,41,.065);}

/* label and body shift with the wash */
.pf-col .k{transition:color .3s ease;}
.pf-col:nth-child(odd):hover .k{color:var(--green);}
.pf-col:nth-child(even):hover .k{color:var(--coral-ink);}
.pf-col .v{transition:transform .4s cubic-bezier(.4,0,.2,1);}
.pf-col:hover .v{transform:translateY(-2px);}
.pf-col .k{
  font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey-safe);
}
.pf-col .v{margin-top:14px;font-size:17px;line-height:1.45;color:var(--off-black);}
@media(max-width:900px){
  .pf-panel{grid-template-columns:1fr 1fr;}
  .pf-col:nth-child(3){border-left:0;}
  .pf-col:nth-child(n+3){border-top:1px solid var(--cream-off);}
}
@media(max-width:560px){
  .pf-panel{grid-template-columns:1fr;}
  .pf-col{border-left:0;border-top:1px solid var(--cream-off);}
  .pf-col:first-child{border-top:0;}
}

/* ---------- stacked story listing (Kindsight's 3-up alternating) ---------- */
.stories{padding:44px 0 96px;}
.story{display:flex;align-items:center;gap:64px;padding:52px 0;}
.story:nth-child(even){flex-direction:row-reverse;}
.story .txt{flex:1;}
.story .txt h3{max-width:15ch;}
.story .txt p{margin-top:22px;font-size:18px;line-height:1.5;color:var(--off-black);max-width:52ch;}
.story .txt .lnk{display:inline-block;margin-top:24px;font-size:17px;color:var(--coral-ink);
  border-bottom:1px solid var(--coral-ink);padding-bottom:2px;}
.story .art{flex:0 0 44%;border-radius:var(--r-card);overflow:hidden;background:var(--lime-fade);}
.story .art img{width:100%;height:clamp(240px,34vh,352px);object-fit:cover;}
.story .art.tint{display:grid;place-content:center;height:clamp(240px,34vh,352px);padding:40px;}
.story .art.tint .big{font-family:var(--disp);font-size:clamp(56px,7vw,104px);line-height:.86;
  letter-spacing:-.05em;color:var(--green);text-align:center;}
.story .art.tint .cap{text-align:center;font-size:15px;color:var(--green-light);margin-top:14px;}
@media(max-width:900px){
  .story,.story:nth-child(even){flex-direction:column;gap:28px;padding:34px 0;}
  .story .art{flex:none;width:100%;}
}

/* ---------- card collection ---------- */
.cards-head{max-width:19ch;margin-bottom:44px;}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.card{
  background:var(--off-white);border-radius:var(--r-card);padding:38px 36px 34px;
  display:flex;flex-direction:column;transition:transform .3s ease;
}
.card:hover{transform:translateY(-5px);}
.card.on-lime{background:var(--lime-fade);}
.card.on-green{background:var(--green);color:var(--cream);}
.card.on-green h4{color:var(--lime);}
.card .no{font-size:12px;font-weight:500;letter-spacing:.13em;color:var(--grey-safe);margin-bottom:16px;}
.card.on-green .no{color:var(--green-fade);}
.card h4{margin-bottom:14px;}
.card p{font-size:17px;line-height:1.5;color:var(--grey-safe);}
.card.on-green p{color:rgba(245,247,241,.8);}
.card .go{margin-top:auto;padding-top:24px;font-size:16.5px;color:var(--coral-ink);}
.card.on-green .go{color:var(--lime);}
@media(max-width:820px){.cards{grid-template-columns:1fr;}}

/* ---------- marquee ---------- */
.marq{background:var(--cream);padding:70px 0 46px;overflow:hidden;}
.marq h2{text-align:center;font-size:clamp(28px,3.8vw,54px);max-width:22ch;margin:0 auto 40px;}
.marq-track{display:flex;gap:16px;width:max-content;animation:slide 34s linear infinite;}
.marq-track:hover{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.chip{
  border:1px solid var(--cream-light);border-radius:50px;padding:14px 30px;
  font-size:17px;color:var(--green);white-space:nowrap;background:var(--off-white);
}
.chip-logo{
  border:1px solid var(--cream-light);border-radius:50px;padding:14px 28px;
  min-height:72px;display:flex;align-items:center;justify-content:center;
  background:var(--off-white);
}
.chip-logo img{height:auto;width:auto;max-height:44px;max-width:130px;display:block;}
@media(max-width:620px){.chip-logo{min-height:60px;padding:10px 22px;}.chip-logo img{max-height:36px;max-width:110px;}}
@media(prefers-reduced-motion:reduce){
  .marq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
}

/* ---------- FAQ ----------
   Answers sit in the HTML on load (details/summary), never injected on click,
   so answer engines can read them. Paired with FAQPage JSON-LD below. */
.faq{padding:16px 0 100px;}
.faq h2{max-width:20ch;margin-bottom:38px;}
.faq-panel{background:var(--off-white);border:1px solid var(--cream-off);
  border-radius:var(--r-card);overflow:hidden;}
details.q{border-top:1px solid var(--cream-off);}
details.q:first-child{border-top:0;}
details.q summary{
  list-style:none;cursor:pointer;display:flex;gap:24px;align-items:flex-start;
  padding:26px 32px;font-family:var(--disp);font-size:clamp(19px,1.85vw,25px);
  line-height:1.18;letter-spacing:-.022em;color:var(--off-black);
}
details.q summary::-webkit-details-marker{display:none;}
details.q summary:hover{background:var(--lime-fade);}
details.q .sign{margin-left:auto;flex:none;width:20px;height:20px;position:relative;margin-top:5px;}
details.q .sign::before,details.q .sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--coral);
  transform:translate(-50%,-50%);
}
details.q .sign::before{width:14px;height:2px;}
details.q .sign::after{width:2px;height:14px;transition:transform .25s ease;}
details.q[open] .sign::after{transform:translate(-50%,-50%) scaleY(0);}
details.q .a{padding:0 64px 28px 32px;font-size:16.5px;line-height:1.62;color:var(--grey-safe);}
@media(max-width:620px){
  details.q summary{padding:22px 22px;gap:16px;}
  details.q .a{padding:0 22px 24px 22px;}
}

/* ---------- big quote ---------- */
.quote-sec{background:var(--cream);padding:40px 0 116px;}
.quote-card{background:var(--green);border-radius:var(--r-card);padding:64px 64px 58px;
  display:flex;gap:56px;align-items:center;}
.quote-card blockquote{margin:0;flex:1;font-family:var(--disp);color:var(--lime);
  font-size:clamp(28px,3.5vw,52px);line-height:.96;letter-spacing:-.04em;}
.quote-card .who{flex:0 0 236px;color:var(--cream);font-size:16px;line-height:1.6;}
.quote-card .who b{display:block;font-weight:400;font-family:var(--disp);font-size:24px;
  letter-spacing:-.02em;margin-bottom:6px;color:var(--off-white);}
@media(max-width:880px){.quote-card{flex-direction:column;gap:32px;align-items:flex-start;padding:40px 32px;}
  .quote-card .who{flex:none;}}

/* ---------- sectors ---------- */
.sectors{padding:120px 0 96px;}
.sectors h2{max-width:20ch;margin-bottom:46px;}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.sec-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1080px){.sec-grid.cols-4{grid-template-columns:repeat(2,1fr);}}
.sector{background:var(--off-white);border-radius:var(--r-card);padding:32px 28px 30px;
  border:1px solid var(--cream-off);transition:background-color .3s ease;}
.sector:hover{background:var(--lime-fade);}
.sector .n{font-size:12px;font-weight:500;letter-spacing:.13em;color:var(--grey-safe);}
.sector h4{font-size:clamp(21px,1.9vw,26px);margin:12px 0 10px;}
.sector p{font-size:15.5px;color:var(--grey-safe);line-height:1.5;}
/* 3 items, so go straight from 3 columns to 1. A 2-column step orphans the third. */
@media(max-width:900px){.sec-grid{grid-template-columns:1fr;}}

/* ---------- difference ---------- */
.diff{padding:20px 0 104px;}
.diff h2{max-width:22ch;margin-bottom:44px;}

/* ---------- questionnaire / closing ---------- */
.closing{background:var(--green);padding:104px 0 112px;text-align:center;}
.closing h2{color:var(--lime);max-width:16ch;margin:0 auto;}
.closing p{color:var(--cream);font-size:clamp(17px,1.6vw,22px);max-width:52ch;margin:26px auto 40px;line-height:1.45;}
.closing .fine{margin-top:26px;font-size:15px;color:var(--green-fade);}

/* ---------- footer ---------- */
.ftr{background:var(--green-deep);color:rgba(245,247,241,.72);padding:72px 0 0;}
.ftr-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding-bottom:54px;}
.ftr .logo img{height:36px;width:auto;filter:brightness(0) invert(1);}
.ftr h4{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--off-white);
  letter-spacing:0;margin-bottom:16px;}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15.5px;}
.ftr a:hover{color:var(--lime);}
.ftr .blurb{font-size:15.5px;margin:20px 0 18px;max-width:32ch;line-height:1.6;}
.ftr-base{border-top:1px solid rgba(255,255,255,.14);padding:22px 0 32px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;
  color:rgba(245,247,241,.45);}
@media(max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr;}}

/* ---------- mobile menu ---------- */
.m-menu{display:none;background:var(--green-deep);border-top:1px solid rgba(255,255,255,.14);}
.m-menu.open{display:block;}
.m-menu ul{list-style:none;margin:0;padding:6px 0 20px;}
.m-menu li a{
  display:block;padding:16px 0;color:var(--cream);font-size:19px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.m-menu li a:hover{color:var(--lime);}
.m-menu .m-cta{display:inline-block;margin-top:20px;}
@media(min-width:1041px){.m-menu{display:none !important;}}

/* ---------- small-screen rhythm ---------- */
@media(max-width:620px){
  .hero{padding:18px 0 56px;}
  .profile{padding:44px 0 54px;}
  .stories{padding:24px 0 56px;}
  .story{padding:26px 0;}
  .sec{padding:52px 0 60px;}
  .marq{padding:48px 0 34px;}
  .quote-sec{padding:24px 0 70px;}
  .sectors{padding:64px 0 58px;}
  .diff{padding:12px 0 68px;}
  .faq{padding:8px 0 66px;}
  .closing{padding:64px 0 72px;}
  .ftr{padding:52px 0 0;}
  .btn-xl{padding:20px 34px 23px;}
  .quote-card{padding:32px 24px;}
  .card{padding:30px 26px 28px;}
  .hero .cta-row{gap:10px;}
  .hero .cta-row .btn{width:100%;text-align:center;}
}

/* ==========================================================================
   Additions below this line are for the inner pages (About, Approach,
   service detail pages, Who We Work With, Insights, Contact, legal pages).
   Everything above this line is the original homepage build; nothing above
   was changed, so the homepage is unaffected by what follows.
   ========================================================================== */

/* ---------- inner-page banner ---------- */
.page-head{background:var(--green);padding:52px 0 64px;}
.page-head .crumb{font-size:13px;color:var(--green-fade);margin-bottom:20px;}
.page-head .crumb a{color:var(--green-fade);border-bottom:1px solid transparent;}
.page-head .crumb a:hover{color:var(--lime);border-bottom-color:var(--lime);}
.page-head .crumb .sep{margin:0 8px;color:var(--green-light);}
.page-head .crumb .here{color:var(--cream);}
.page-head .eyebrow{
  display:block;font-size:13.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);margin-bottom:16px;
}
.page-head h1{color:var(--lime);max-width:19ch;font-size:clamp(38px,5.6vw,68px);}
.page-head p{color:var(--cream);font-size:clamp(17px,1.35vw,20px);font-weight:300;
  line-height:1.48;margin-top:22px;max-width:58ch;}
@media(max-width:620px){.page-head{padding:34px 0 46px;}}

/* ---------- long-form prose (About, Approach, legal pages) ---------- */
.prose-wrap{padding:64px 0 24px;}
.prose{max-width:74ch;}
.prose h2{font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-.02em;margin:52px 0 16px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:clamp(19px,2.1vw,24px);line-height:1.2;letter-spacing:-.015em;margin:34px 0 12px;}
.prose p{margin:0 0 20px;font-size:17px;line-height:1.72;color:var(--off-black);}
.prose p:last-child{margin-bottom:0;}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px;font-size:17px;line-height:1.72;color:var(--off-black);}
.prose li{margin-bottom:8px;}
.prose li:last-child{margin-bottom:0;}
.prose strong{font-weight:600;}
.prose .text-link{margin-top:0;}
.prose blockquote{border-left:3px solid var(--lime);padding-left:22px;margin:28px 0;
  font-style:italic;color:var(--grey-safe);}
@media(max-width:620px){.prose-wrap{padding:40px 0 8px;}}

/* generic version of the coral underline link used inside .story .txt,
   for reuse anywhere outside that specific scope */
.text-link{display:inline-block;margin-top:18px;font-size:16.5px;color:var(--coral-ink);
  border-bottom:1px solid var(--coral-ink);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;}
.text-link:hover{color:var(--coral-dark);border-color:var(--coral-dark);}
.text-link.on-green{color:var(--lime);border-color:var(--lime);}
.text-link.on-green:hover{color:var(--lime-white);border-color:var(--lime-white);}

/* ---------- legal pages: cross-links between Privacy / Accessibility / Terms ---------- */
.legal-links{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 8px;padding-bottom:26px;
  border-bottom:1px solid var(--cream-off);font-size:14.5px;}
.legal-links a{color:var(--grey-safe);border-bottom:1px solid transparent;padding-bottom:2px;}
.legal-links a:hover{color:var(--off-black);}
.legal-links a[aria-current="page"]{color:var(--off-black);border-bottom-color:var(--coral-ink);}
.legal-meta{font-size:13.5px;color:var(--grey-safe);margin-bottom:36px;}

/* ---------- stage cross-nav (service detail pages: "where this fits") ---------- */
.stage-nav{padding:8px 0 72px;}
.stage-nav h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:24px;}
.stage-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.stage-item{
  display:block;padding:20px 20px 22px;border:1px solid var(--cream-off);border-radius:14px;
  background:var(--off-white);transition:border-color .2s ease,background-color .2s ease;
}
.stage-item:hover{background:var(--lime-fade);}
.stage-item .no{font-size:12px;font-weight:500;letter-spacing:.13em;color:var(--grey-safe);}
.stage-item .nm{display:block;margin-top:8px;font-family:var(--disp);font-size:19px;
  letter-spacing:-.015em;color:var(--off-black);}
.stage-item[aria-current="page"]{background:var(--green);border-color:var(--green);}
.stage-item[aria-current="page"] .no{color:var(--green-fade);}
.stage-item[aria-current="page"] .nm{color:var(--lime);}
@media(max-width:820px){.stage-row{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.stage-row{grid-template-columns:1fr;}}

/* ---------- inner-page photo band ----------
   A full-width photograph used to break up long stretches of prose and card
   grids on inner pages (About, Approach, the service detail pages). Same
   rounded-corner language as every other photo container on the site. */
.photo-band{padding:6px 0 66px;}
.photo-band figure{margin:0;border-radius:var(--r-card);overflow:hidden;}
.photo-band img{width:100%;height:clamp(260px,40vh,420px);object-fit:cover;display:block;}
@media(max-width:620px){.photo-band{padding:0 0 44px;}.photo-band img{height:280px;}}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
.contact-card{background:var(--off-white);border:1px solid var(--cream-off);border-radius:var(--r-card);
  padding:34px 32px;}
.contact-card + .contact-card{margin-top:20px;}
.contact-card .k{font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey-safe);margin-bottom:10px;}
.contact-card .v{font-family:var(--disp);font-size:26px;letter-spacing:-.02em;color:var(--off-black);}
.contact-card a.v{border-bottom:1px solid transparent;}
.contact-card a.v:hover{border-bottom-color:var(--coral-ink);color:var(--coral-ink);}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:28px;}}

/* ---------- reveal (visible by default) ---------- */
.js-anim .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.js-anim .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js-anim .rv{opacity:1;transform:none;transition:none;}
  .btn,.card,.btn-xl,.sector{transition:none!important;}
  /* keep the colour change, drop the movement */
  .pf-col,.pf-col .k,.pf-col .v,.pf-col::before{transition:none!important;}
  .pf-col:hover .v{transform:none;}
  .pf-col:hover::before{transform:scaleX(1);}
}

/* ---------- WordPress ---------- */
.admin-bar .hdr{top:32px;}
@media(max-width:782px){.admin-bar .hdr{top:46px;}}
@media(max-width:600px){.admin-bar .hdr{top:0;}}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lime);color:var(--green);
  padding:10px 16px;border-radius:8px;font-weight:500;}
.skip-link:focus{top:12px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
/* With motion reduced the marquee wraps instead of sliding, so the looping copy would show twice. */
@media(prefers-reduced-motion:reduce){.marq-track .is-dup{display:none;}}
.ftr-contact{font-size:15.5px;line-height:1.9;}
.ftr-addr{color:rgba(245,247,241,.45);margin-top:8px;}
details.q .a p + p,.card p + p{margin-top:12px;}
.team-note{max-width:60ch;margin-top:36px;font-size:16.5px;line-height:1.6;color:var(--grey-safe);}
.contact-card .v.v-sm{font-size:19px;}
.contact-note{margin-top:8px;font-size:14.5px;color:var(--grey-safe);}
.pagination{margin-top:40px;}
.pagination .nav-links{display:flex;gap:16px;flex-wrap:wrap;font-size:16px;}
.pagination .page-numbers{color:var(--grey-safe);}
.pagination .page-numbers.current{color:var(--off-black);font-weight:500;}