/* ============================================================
   pages.css — styles for internal pages (About, What We Do).
   Loaded IN ADDITION TO styles.css, never instead of it.
   Homepage (index.html) does not reference this file.
   ============================================================ */

/* ---------- Internal page hero (full photo, matches homepage hero treatment) ---------- */
.page-hero{
  min-height:78vh; display:flex; align-items:center;
  padding:150px 0 90px; position:relative; overflow:hidden; z-index:0;
  background:
    radial-gradient(120% 85% at 50% 20%, rgba(8,6,6,0) 0%, rgba(8,6,6,0.35) 55%, rgba(8,6,6,0.72) 100%),
    linear-gradient(180deg, rgba(8,6,6,0.66) 0%, rgba(8,6,6,0.14) 30%, rgba(8,6,6,0.22) 58%, rgba(6,5,5,0.9) 100%),
    linear-gradient(115deg, rgba(13,73,64,0.42) 0%, rgba(131,52,84,0.24) 48%, rgba(13,73,64,0.3) 100%),
    var(--hero-photo, url('images/flower-red-roses.jpg')) var(--hero-pos, center 40%)/cover no-repeat;
  text-align:center; color:var(--cloud);
}
@media (hover:hover) and (pointer:fine){
  .page-hero{ background-attachment:fixed, fixed, fixed, fixed; }
}
.page-hero-inner{ max-width:820px; margin:0 auto; position:relative; z-index:1; }
.page-hero .tag{ display:inline-flex; align-items:center; gap:8px; justify-content:center; color:var(--blush); text-shadow:0 2px 14px rgba(0,0,0,0.4); }
.page-hero h1{
  margin-top:18px; font-family:var(--serif); font-weight:500; color:var(--cloud);
  font-size:clamp(40px,6.4vw,74px); line-height:1.1; text-shadow:0 4px 30px rgba(0,0,0,0.25);
}
.page-hero h1 em{ font-style:italic; color:var(--blush); }
.page-hero p.lead{
  margin-top:26px; font-size:clamp(18px,1.9vw,22px); line-height:1.6; color:rgba(242,242,233,0.9);
  max-width:660px; margin-left:auto; margin-right:auto;
}

/* ---------- Generic section header (eyebrow + h2 + p) ---------- */
.sec-head{ max-width:720px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.sec-head .tag{ display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.sec-head h2{ margin-top:14px; font-size:clamp(28px,4vw,44px); color:var(--teal); line-height:1.15; font-weight:500; }
.sec-head .accent{ color:var(--berry); }
.sec-head p{ margin-top:18px; font-size:16px; line-height:1.6; color:#2f6259; }

/* ---------- Opening statement / core essence (About) — editorial two-column with photo ---------- */
.essence{ padding:110px 0; position:relative; overflow:hidden; }
.essence-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;
  position:relative; z-index:1;
}
.essence-photo-wrap{ display:flex; justify-content:center; }
.essence-photo{
  position:relative; background:#f2f2e9; padding:14px 14px 58px;
  border-radius:0; max-width:340px; width:100%;
  box-shadow:0 26px 60px rgba(13,73,64,0.22), 0 4px 14px rgba(13,73,64,0.10);
  transform:rotate(3deg);
  opacity:0; transform-origin:center;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.essence-photo.in{ opacity:1; }
.essence-photo-wrap:hover .essence-photo{ transform:rotate(0.5deg) scale(1.02); }
.essence-photo .frame{ position:relative; border-radius:0; overflow:hidden; aspect-ratio:4/5; }
.essence-photo .frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.essence-photo .frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(13,73,64,0.30), rgba(131,52,84,0.18) 60%, rgba(13,73,64,0.06));
  mix-blend-mode:multiply;
}
.essence-photo-tag{
  position:absolute; left:14px; right:14px; bottom:16px; z-index:2;
  display:flex; align-items:center; gap:8px;
}
.essence-photo-tag svg{ width:20px; height:20px; flex-shrink:0; color:var(--teal); }
.essence-photo-tag > span{ color:var(--teal); font-family:var(--logo); font-size:16px; }
.essence-pin{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:26px; height:26px; border-radius:0; background:var(--mint); opacity:.85;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
}
.essence-copy{ text-align:left; opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,1,.36,1) .1s, transform .7s cubic-bezier(.22,1,.36,1) .1s; }
.essence-copy.in{ opacity:1; transform:translateY(0); }
.essence-copy .tag{ display:inline-flex; align-items:center; gap:8px; }
.essence h2{
  margin-top:16px; font-size:clamp(24px,3.2vw,34px); line-height:1.5; font-weight:400; color:var(--teal);
  font-family:var(--sans);
}
.essence .accent{ color:var(--berry); font-weight:600; }
.essence-quote{
  margin-top:30px; font-family:var(--hand); font-size:24px; color:var(--berry);
  border-left:3px solid var(--berry); padding-left:22px; line-height:1.4;
}

/* ---------- The Seven Cues (values grid) ---------- */
.values{ padding:110px 0 120px; background:var(--cloud); position:relative; overflow:hidden; }
.values-grid{
  margin-top:60px; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  position:relative; z-index:1;
}
.value-card{
  background:#fff; border:1px solid var(--mint); border-radius:0;
  padding:36px 28px 32px; text-align:left; position:relative; overflow:hidden;
  box-shadow:0 16px 36px -26px rgba(13,73,64,.3);
  opacity:0; transform:translateY(44px) scale(.96);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease, border-color .35s ease;
}
.value-card.in{ opacity:1; transform:translateY(0) scale(1); }
.value-card:hover{ box-shadow:0 26px 50px -26px rgba(13,73,64,.4); transform:translateY(-6px); border-color:transparent; }
.value-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--berry); transform:scaleX(0); transform-origin:left;
  transition:transform .7s cubic-bezier(.22,1,.36,1) .2s;
}
.value-card.in::before{ transform:scaleX(1); }
.value-card:nth-child(3n+2)::before{ background:var(--teal); }
.value-card:nth-child(3n+3)::before{ background:var(--orange); }
.value-icon{
  width:52px; height:52px; border-radius:0; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blush); color:var(--berry);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.value-card:nth-child(3n+2) .value-icon{ background:var(--mint); color:var(--teal); }
.value-card:nth-child(3n+3) .value-icon{ background:rgba(215,60,41,0.12); color:var(--orange); }
.value-card:hover .value-icon{ transform:scale(1.12) rotate(-6deg); }
.value-card:hover:nth-child(3n+1) .value-icon{ background:var(--berry); color:#fff; }
.value-card:hover:nth-child(3n+2) .value-icon{ background:var(--teal); color:#fff; }
.value-card:hover:nth-child(3n+3) .value-icon{ background:var(--orange); color:#fff; }
.value-card .value-num{
  position:absolute; top:32px; right:28px;
  font-family:var(--serif); font-size:14px; color:var(--mint); letter-spacing:0.08em;
}
.value-card h3{
  margin-top:2px; font-family:var(--serif); font-weight:500; font-size:22px; color:var(--teal);
}
.value-card p{ margin-top:10px; font-size:14.5px; line-height:1.55; color:#2f6259; }

/* ---------- Team ---------- */
.team{ padding:110px 0 120px; position:relative; overflow:hidden; background:var(--cloud); }
.team-grid{
  margin-top:60px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;
  position:relative; z-index:1;
}
.team-photo-wrap{ display:flex; justify-content:center; }
.team-photo{
  position:relative; background:#f2f2e9; padding:14px 14px 52px;
  border-radius:0; max-width:270px; width:100%;
  box-shadow:0 26px 60px rgba(13,73,64,0.22), 0 4px 14px rgba(13,73,64,0.10);
  transform:rotate(-3deg);
  opacity:0;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.team-photo.in{ opacity:1; }
.team-photo-wrap:hover .team-photo{ transform:rotate(-0.5deg) scale(1.02); }
.team-photo-frame{
  position:relative; border-radius:0; overflow:hidden; aspect-ratio:4/5;
  background:linear-gradient(135deg, var(--teal), var(--berry));
  display:flex; align-items:center; justify-content:center;
}
.team-photo-frame span{ font-family:var(--serif); font-size:62px; color:var(--cloud); }
.team-photo-tag{
  position:absolute; left:14px; right:14px; bottom:16px; z-index:2;
  display:flex; align-items:center; gap:8px;
}
.team-photo-tag svg{ width:18px; height:18px; flex-shrink:0; color:var(--teal); }
.team-photo-tag > span{ color:var(--teal); font-family:var(--logo); font-size:15px; }
.team-pin{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:26px; height:26px; border-radius:0; background:var(--blush); opacity:.8;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
}
.team-copy{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.team-copy.in{ opacity:1; transform:translateY(0); }
.team-copy .role{ font-size:13.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--berry); font-weight:700; }
.team-copy h3{ margin-top:8px; font-family:var(--serif); font-weight:500; font-size:32px; color:var(--teal); }
.team-copy p.bio{ margin-top:16px; font-size:16px; line-height:1.65; color:#2f6259; max-width:480px; }
.team-note{
  max-width:640px; margin:44px auto 0; text-align:center; font-size:15px; color:#2f6259; line-height:1.6;
  position:relative; z-index:1; font-style:italic;
}

/* ---------- Sustainability strip ---------- */
.sustain-strip{
  margin-top:60px; border-radius:0; padding:44px 48px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; text-align:center;
  position:relative; z-index:1; overflow:hidden;
  background:
    linear-gradient(120deg, rgba(13,73,64,0.82), rgba(131,52,84,0.72)),
    url('images/flower-iridescent-leaves.jpg') center 30%/cover no-repeat;
  color:var(--cloud);
}
.sustain-strip::after{
  content:''; position:absolute; top:-40%; right:-10%; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%); pointer-events:none;
}
.sustain-strip .stat{ display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; }
.sustain-strip .stat strong{ font-family:var(--serif); font-size:clamp(28px,3.2vw,38px); color:var(--cloud); font-weight:500; }
.sustain-strip .stat span{ font-size:13.5px; color:rgba(242,242,233,0.85); line-height:1.4; }

/* ---------- What We Do: intro strip (full photo hero, matches page-hero) ---------- */
.wwd-intro{
  min-height:70vh; display:flex; align-items:center;
  padding:150px 0 80px; text-align:center; position:relative; overflow:hidden; z-index:0;
  background:
    radial-gradient(120% 85% at 50% 20%, rgba(8,6,6,0) 0%, rgba(8,6,6,0.35) 55%, rgba(8,6,6,0.72) 100%),
    linear-gradient(180deg, rgba(8,6,6,0.66) 0%, rgba(8,6,6,0.14) 30%, rgba(8,6,6,0.22) 58%, rgba(6,5,5,0.9) 100%),
    linear-gradient(115deg, rgba(13,73,64,0.42) 0%, rgba(131,52,84,0.24) 48%, rgba(13,73,64,0.3) 100%),
    var(--hero-photo, url('images/petal-burgundy.jpg')) center 42%/cover no-repeat;
  color:var(--cloud);
}
@media (hover:hover) and (pointer:fine){
  .wwd-intro{ background-attachment:fixed, fixed, fixed, fixed; }
}
.wwd-intro .tag{ display:inline-flex; align-items:center; gap:8px; justify-content:center; position:relative; z-index:1; color:var(--blush); text-shadow:0 2px 14px rgba(0,0,0,0.4); }
.wwd-intro h1{
  margin-top:18px; font-family:var(--serif); font-weight:500; color:var(--cloud); position:relative; z-index:1;
  font-size:clamp(34px,5vw,58px); line-height:1.15; max-width:840px; margin-left:auto; margin-right:auto;
  text-shadow:0 4px 30px rgba(0,0,0,0.25);
}
.wwd-intro h1 em{ font-style:italic; color:var(--blush); }
.wwd-intro p.lead{ margin-top:22px; font-size:17px; line-height:1.65; color:rgba(242,242,233,0.88); max-width:600px; margin:22px auto 0; position:relative; z-index:1; }

/* ---------- Four strategic pillars (accordion cards, dramatic dark expand) ---------- */
.pillars{ padding:80px 0 50px; background:var(--cloud); }
.pillars-list{ max-width:920px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.pillar{
  background:#fff; border:1px solid var(--mint); border-radius:0; overflow:hidden;
  box-shadow:0 14px 34px -28px rgba(13,73,64,.3);
  opacity:0; transform:translateY(34px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease;
}
.pillar.in{ opacity:1; transform:translateY(0); }
.pillar:hover{ box-shadow:0 22px 44px -26px rgba(13,73,64,.35); }
.pillar-head{
  display:flex; align-items:center; gap:22px; padding:28px 32px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; position:relative; z-index:1;
}
.pillar-num{
  flex-shrink:0; width:58px; height:58px; border-radius:0; display:flex; align-items:center; justify-content:center;
  color:var(--teal); background:var(--mint); position:relative;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.pillar-num svg{ width:26px; height:26px; }
.pillar:nth-child(1) .pillar-num{ background:var(--blush); color:var(--berry); }
.pillar:nth-child(3) .pillar-num{ background:rgba(215,60,41,0.12); color:var(--orange); }
.pillar.open .pillar-num{ transform:scale(1.08); background:rgba(13,73,64,0.14); color:var(--teal); }
.pillar-head-text{ flex:1; }
.pillar-head-text span.pillar-eyebrow{ display:block; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--berry); font-weight:700; margin-bottom:4px; transition:color .4s ease; }
.pillar-head h3{ font-family:var(--serif); font-weight:500; font-size:20px; color:var(--teal); line-height:1.3; transition:color .4s ease; }
.pillar-head .pillar-caret{
  flex-shrink:0; width:36px; height:36px; border-radius:0; border:1px solid var(--mint);
  display:flex; align-items:center; justify-content:center; color:var(--teal);
  transition:transform .35s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.pillar.open .pillar-head .pillar-caret{ transform:rotate(135deg); background:var(--orange); border-color:var(--orange); color:#fff; }
.pillar-body{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.22,1,.36,1); position:relative; }
.pillar.open .pillar-body{ max-height:900px; }
.pillar.open .pillar-head{ background:transparent; }
/* Each pillar's expanded state uses a light version of its own icon color,
   so it keeps its visual identity instead of collapsing into one dark green. */
.pillar:nth-child(1).open{ background:linear-gradient(135deg, var(--blush) 0%, #f3d9da 100%); }
.pillar:nth-child(2).open{ background:linear-gradient(135deg, var(--mint) 0%, #dce2d2 100%); }
.pillar:nth-child(3).open{ background:linear-gradient(135deg, #f3d9da 0%, #ecc6c7 100%); }
.pillar:nth-child(4).open{ background:linear-gradient(135deg, #dfe4d8 0%, #cad3c1 100%); }
.pillar-body-inner{ padding:6px 32px 32px; margin:0 32px; border-top:1px dashed rgba(13,73,64,0.15); padding-left:80px; }
.pillar-body-inner p.pillar-purpose{ font-size:14.5px; color:var(--berry); font-style:italic; margin:20px 0 16px; }

/* ---------- Action Labs grid ---------- */
.action-labs{ padding:50px 0 120px; position:relative; overflow:hidden; }
.labs-grid{ margin-top:60px; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; position:relative; z-index:1; }
.lab-card{
  background:#fff; border:1px solid var(--mint); border-radius:0; padding:32px 26px;
  opacity:0; transform:translateY(34px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease, border-color .3s ease;
  box-shadow:0 14px 30px -26px rgba(13,73,64,.25);
}
.lab-card.in{ opacity:1; transform:translateY(0); }
.lab-card:hover{ box-shadow:0 24px 46px -26px rgba(13,73,64,.4); transform:translateY(-5px); border-color:transparent; }
.lab-card .lab-icon{
  width:48px; height:48px; border-radius:0; background:var(--mint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.lab-card:nth-child(3n+1) .lab-icon{ background:var(--blush); color:var(--berry); }
.lab-card:nth-child(3n+3) .lab-icon{ background:rgba(215,60,41,0.12); color:var(--orange); }
.lab-card:hover .lab-icon{ transform:scale(1.1) rotate(-6deg); }
.lab-card:hover:nth-child(3n+1) .lab-icon{ background:var(--berry); color:#fff; }
.lab-card:hover:nth-child(3n+2) .lab-icon{ background:var(--teal); color:#fff; }
.lab-card:hover:nth-child(3n+3) .lab-icon{ background:var(--orange); color:#fff; }
.lab-card h4{ font-family:var(--serif); font-weight:500; font-size:18px; color:var(--teal); line-height:1.3; }
.lab-card p{ margin-top:9px; font-size:14px; line-height:1.55; color:#2f6259; }

/* ---------- Final CTA (shared style for both pages) ---------- */
.page-cta{
  padding:100px 0 120px; text-align:center; background:var(--cloud); position:relative; overflow:hidden;
}
.page-cta-glow{
  position:absolute; top:50%; left:50%; width:520px; height:520px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(202,211,193,0.5) 0%, rgba(202,211,193,0) 65%);
  pointer-events:none; z-index:0;
}
.page-cta > .wrap{ position:relative; z-index:1; }
.page-cta h2{ font-family:var(--serif); font-weight:500; color:var(--teal); font-size:clamp(28px,3.8vw,42px); }
.page-cta p{ margin-top:16px; font-size:16px; color:#2f6259; max-width:480px; margin-left:auto; margin-right:auto; }
.page-cta .cta-row{ margin-top:32px; display:flex; align-items:center; gap:40px; justify-content:center; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .team-grid{ grid-template-columns:1fr; gap:40px; text-align:center; }
  .team-photo-wrap{ order:-1; }
  .team-copy p.bio{ margin-left:auto; margin-right:auto; }
  .essence-grid{ grid-template-columns:1fr; gap:40px; text-align:center; }
  .essence-photo-wrap{ order:-1; }
  .essence-copy{ text-align:center; }
  .essence-quote{ text-align:left; max-width:480px; margin:30px auto 0; }
}
@media(max-width:900px){
  .values-grid{ grid-template-columns:repeat(2, 1fr); }
  .labs-grid{ grid-template-columns:repeat(2, 1fr); }
  .sustain-strip{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:700px){
  .page-hero{ padding:120px 0 60px; min-height:60vh; }
  .wwd-intro{ padding:120px 0 50px; min-height:56vh; }
  .values-grid{ grid-template-columns:1fr; }
  .labs-grid{ grid-template-columns:1fr; }
  .sustain-strip{ grid-template-columns:1fr; padding:32px 26px; }
  .pillar-head{ padding:22px 20px; gap:16px; }
  .pillar-body-inner{ padding:6px 20px 26px; margin:0 20px; padding-left:20px; }
  .pillar-body-inner ul{ grid-template-columns:1fr; }
  .pillar-num{ width:46px; height:46px; }
  .pillar-num svg{ width:22px; height:22px; }
  .essence-photo{ max-width:280px; }
}

/* ---------- Action Labs decorative watermark ---------- */
.action-labs-watermark{
  position:absolute; bottom:-40px; right:-60px; left:auto; transform:none;
  width:min(26vw, 220px); height:auto; opacity:.07; color:var(--teal); pointer-events:none; z-index:0;
}

/* ---------- CTA row scribble button alignment override ---------- */
.page-cta .cta-row .cta-wrap{ margin-top:0; margin-right:20px; color:rgba(13,73,64,0.4); }
.banner .cta-row .cta-wrap{ margin-top:0; margin-right:20px; }

/* ---------- Section spacing overrides (tighten gaps between same-background sections) ---------- */
#about-video.video-sec{ padding-bottom:50px; }
.team{ padding-top:60px; padding-bottom:70px; }
.page-cta{ padding-top:70px; }

/* ---------- What We Do page spacing overrides ---------- */
.wwd-intro{ padding-bottom:40px; }
.pillars{ padding-top:50px; }
.action-labs{ padding-bottom:110px; } /* same gap before the teal banner as Home */
/* banner padding restored to match Home/About (was overridden shorter here) */

/* ============================================================
   Added: marquee spacing, animated stat band, expandable
   value/lab cards — for structural variety and real interaction
   beyond static grids.
   ============================================================ */

/* ---------- Stat band (dark, animated counters) ---------- */
.stat-band{
  padding:70px 0; background:var(--teal); position:relative; overflow:hidden; text-align:center;
}
.stat-band-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; position:relative; z-index:1;
}
.stat-band .stat-item{
  opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.stat-band .stat-item.in{ opacity:1; transform:translateY(0); }
.stat-band .stat-num{
  display:block; font-family:var(--serif); font-weight:500; font-size:clamp(34px,4.4vw,52px); color:var(--blush); line-height:1;
}
.stat-band .stat-item span.stat-label{ display:block; margin-top:10px; font-size:13.5px; color:rgba(242,242,233,0.8); letter-spacing:0.03em; }
.stat-band-ring{
  position:absolute; top:50%; left:50%; width:520px; height:520px; transform:translate(-50%,-50%);
  border:1px dashed rgba(242,242,233,0.15); border-radius:50%; pointer-events:none;
}

/* ---------- Expandable value cards (click to reveal "in practice") ---------- */
.value-card{ cursor:pointer; }
.value-card .value-more{
  max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.22,1,.36,1);
}
.value-card.open .value-more{ max-height:200px; }
.value-card .value-more-inner{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--mint);
  font-size:13.5px; color:var(--berry); font-style:italic; line-height:1.5;
}
.value-card .value-toggle{
  display:inline-flex; align-items:center; gap:5px; margin-top:14px;
  font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--teal);
}
.value-card .value-toggle svg{ width:12px; height:12px; transition:transform .35s ease; }
.value-card.open .value-toggle svg{ transform:rotate(180deg); }

/* ---------- Expandable lab cards (click to reveal "you'll learn") ---------- */
.lab-card{ cursor:pointer; }
.lab-card .lab-more{
  max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.22,1,.36,1);
}
.lab-card.open .lab-more{ max-height:220px; }
.lab-card .lab-more-inner{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--mint);
}
.lab-card .lab-more-inner ul{ list-style:none; margin:0; padding:0; }
.lab-card .lab-more-inner li{ font-size:13px; line-height:1.5; color:#2f6259; padding-left:16px; position:relative; margin-bottom:6px; }
.lab-card .lab-more-inner li::before{ content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--orange); }
.lab-card .lab-toggle{
  display:inline-flex; align-items:center; gap:5px; margin-top:14px;
  font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--teal);
}
.lab-card .lab-toggle svg{ width:11px; height:11px; transition:transform .35s ease; }
.lab-card.open .lab-toggle svg{ transform:rotate(180deg); }

/* ---------- Section header alignment variants (break the centered monotony) ---------- */
.sec-head.align-left{ text-align:left; margin-left:0; }
.sec-head.align-left .tag{ justify-content:flex-start; }

@media(max-width:900px){
  .stat-band-grid{ grid-template-columns:repeat(2, 1fr); gap:32px 24px; }
}
@media(max-width:700px){
  .stat-band{ padding:50px 0; }
}

/* ---------- Standalone poll section (reuses homepage's poll-card component) ---------- */
.page-poll{
  padding:100px 0 110px; position:relative; overflow:hidden; background:var(--cloud);
}
.page-poll-inner{
  max-width:1180px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;
}
.page-poll .sec-head{ text-align:left; margin:0; }
.page-poll .sec-head .tag{ justify-content:flex-start; }
.page-poll-card-col{ position:relative; }
.page-poll .poll-card{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.page-poll .poll-card.in{ opacity:1; transform:translateY(0); }
.page-poll-stat{
  margin-top:22px; display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.22,1,.36,1) .15s, transform .7s cubic-bezier(.22,1,.36,1) .15s;
}
.page-poll-stat.in{ opacity:1; transform:translateY(0); }
.page-poll-stat .num{ font-family:var(--hand); font-size:34px; color:var(--berry); font-weight:600; }
.page-poll-stat .label{ font-size:13px; color:#2f6259; line-height:1.4; max-width:220px; }
.page-poll-glow{
  position:absolute; top:10%; left:-10%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(236,198,199,0.32) 0%, rgba(236,198,199,0) 65%);
  pointer-events:none; z-index:0;
}
.page-poll-watermark{
  position:absolute; top:50%; right:-40px; transform:translateY(-50%);
  width:280px; height:280px; opacity:.05; color:var(--teal); pointer-events:none; z-index:0;
}

/* ---------- Additional spacing overrides ---------- */
.essence{ padding-bottom:50px; }
.values{ padding-top:50px; }

@media(max-width:900px){
  .page-poll-inner{ grid-template-columns:1fr; gap:36px; }
  .page-poll .sec-head{ text-align:center; }
  .page-poll .sec-head .tag{ justify-content:center; }
  .page-poll-stat{ justify-content:center; }
}

/* ---------- Fix: breathing room between timeline card and banner ---------- */
#how-we-work.what-we-do{ padding-bottom:70px; }

/* ---------- Fix: give the poll's vote-count number a highlighted chip ---------- */
.page-poll-stat{
  align-items:center; background:#fff; border:1px solid var(--mint); border-radius:0;
  padding:14px 20px; box-shadow:0 12px 28px -20px rgba(13,73,64,.3); display:inline-flex;
}
.page-poll-stat .num{
  background:var(--blush); color:var(--berry); padding:6px 14px; border-radius:0; line-height:1;
}

/* ---------- Fix: hand-note contrast on light .page-cta background ---------- */
.page-cta .hand-note{ color: var(--berry); }
.page-cta .hand-note-icon{ color: var(--berry); }

/* ---------- Fix: prevent hand-note from overlapping wrapped "Book a Call" button on mobile ---------- */
@media(max-width:700px){
  .page-cta .cta-row .cta-wrap{ margin-bottom:76px; }
}

/* ---------- Fix: delay CTA hand-note until curve finishes drawing (1.28s) ---------- */
.cta-wrap-delayed:hover .hand-note-icon, .cta-wrap-delayed:focus-within .hand-note-icon{
  transition-delay: 1.28s;
}

/* ============================================================
   Contact page
   ============================================================ */

/* ---------- Contact intro / form section ---------- */
.contact-main{ padding:100px 0 110px; background:var(--cloud); position:relative; overflow:hidden; }
.contact-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;
  position:relative; z-index:1;
}
.contact-info{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.contact-info.in{ opacity:1; transform:translateY(0); }
.contact-info h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.6vw,38px); color:var(--teal); margin-top:14px; line-height:1.2; }
.contact-info > p.lead{ margin-top:16px; font-size:16px; line-height:1.65; color:#2f6259; max-width:420px; }
.contact-list{ margin-top:36px; display:flex; flex-direction:column; gap:20px; }
.contact-item{
  display:flex; align-items:flex-start; gap:16px; text-decoration:none;
  padding:16px; margin:-16px; border-radius:0; transition:background .25s ease;
}
.contact-item:hover{ background:#fff; }
.contact-item .ci-icon{
  flex-shrink:0; width:44px; height:44px; border-radius:0; background:var(--blush); color:var(--berry);
  display:flex; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.contact-item:nth-child(2) .ci-icon{ background:var(--mint); color:var(--teal); }
.contact-item:nth-child(3) .ci-icon{ background:rgba(215,60,41,0.12); color:var(--orange); }
.contact-item:nth-child(4) .ci-icon{ background:var(--blush); color:var(--berry); }
.contact-item:hover .ci-icon{ transform:scale(1.08) rotate(-6deg); }
.contact-item .ci-text span.label{ display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--berry); font-weight:700; margin-bottom:3px; }
.contact-item .ci-text span.value{ display:block; font-size:16px; color:var(--teal); font-weight:500; }
.contact-social{ margin-top:32px; display:flex; gap:12px; }
.contact-social a{
  width:44px; height:44px; border-radius:0; border:1px solid var(--mint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; transition:.25s;
}
.contact-social a:hover{ background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-3px); }

/* ---------- Contact form card ---------- */
.contact-form-col{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,1,.36,1) .1s, transform .7s cubic-bezier(.22,1,.36,1) .1s; }
.contact-form-col.in{ opacity:1; transform:translateY(0); }
.contact-form-card{
  background:#fff; border:1px solid var(--mint); border-radius:0; padding:44px;
  box-shadow:0 26px 60px -30px rgba(13,73,64,.3); position:relative; overflow:hidden;
}
.contact-form-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--berry), var(--teal), var(--orange));
}
.contact-form-card h3{ font-family:var(--serif); font-weight:500; font-size:22px; color:var(--teal); }
.contact-form-card p.sub{ margin-top:8px; font-size:14px; color:#2f6259; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.cf-field{ display:flex; flex-direction:column; gap:8px; }
.cf-field.full{ grid-column:1 / -1; }
.cf-field label{ font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--teal); }
.cf-field input, .cf-field select, .cf-field textarea{
  font-family:var(--sans); font-size:15px; color:var(--teal); background:var(--cloud);
  border:1.5px solid var(--mint); border-radius:0; padding:13px 16px; outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{ border-color:var(--teal); background:#fff; }
.cf-field textarea{ resize:vertical; min-height:120px; font-family:var(--sans); }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:#a4b7a7; }
.contact-form-card .btn{ margin-top:28px; width:100%; text-align:center; border:none; cursor:pointer; font-size:16px; }
.contact-form-note{ margin-top:16px; font-size:12.5px; color:#8aaa9a; text-align:center; }

/* ---------- Contact page hero watermark accent ---------- */
.contact-glow{
  position:absolute; top:-10%; right:-8%; width:560px; height:560px;
  background:radial-gradient(circle, rgba(202,211,193,0.4) 0%, rgba(202,211,193,0) 65%);
  pointer-events:none; z-index:0;
}

/* ---------- Book a call banner strip ---------- */
.book-strip{
  margin-top:64px; background:var(--teal); border-radius:0; padding:36px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  position:relative; overflow:hidden; z-index:1;
}
.book-strip::after{
  content:''; position:absolute; top:-50%; right:-5%; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(236,198,199,0.25) 0%, rgba(236,198,199,0) 70%); pointer-events:none;
}
.book-strip-text h4{ font-family:var(--serif); font-weight:500; font-size:20px; color:var(--cloud); }
.book-strip-text p{ margin-top:6px; font-size:14px; color:rgba(242,242,233,0.8); }

@media(max-width:1024px){
  .contact-grid{ grid-template-columns:1fr; gap:48px; }
}
@media(max-width:700px){
  .contact-main{ padding:60px 0 80px; }
  .contact-form-card{ padding:30px 24px; }
  .cf-row{ grid-template-columns:1fr; gap:16px; }
  .book-strip{ flex-direction:column; text-align:center; padding:30px 28px; }
}

/* ---------- Brand statement (replaces stats strip on About) ---------- */
.brand-statement{ padding:90px 0; text-align:center; background:var(--cloud); }
.brand-statement p{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(24px,3.2vw,36px); color:var(--teal); line-height:1.4;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.brand-statement p.in{ opacity:1; transform:translateY(0); }
.accent-logo{ font-family:var(--logo); font-style:normal; color:var(--berry); }

/* ---------- Team carousel ---------- */
.team-carousel{ display:flex; align-items:center; gap:16px; margin-top:60px; }
.team-track-wrap{ flex:1; overflow:hidden; }
.team-track{ display:flex; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.team-slide{ flex:0 0 100%; display:flex; align-items:center; }
.team-slide > *{ width:100%; }
/* first slide: full-width group photo */
/* the photo fills the slide, so the carousel keeps one height and nothing
   jumps up or down when you move between slides */
.team-slide-group{ display:flex; }
.team-group{ margin:0; position:relative; display:flex; flex-direction:column; width:100%; }
.team-group img{
  display:block; width:100%; flex:0 0 auto; height:clamp(240px, 36vh, 400px);
  object-fit:cover; background:var(--mint);
}
.team-group figcaption{
  margin-top:14px; text-align:center; font-size:13px; color:#527c73;
}
@media(max-width:640px){
  .team-group img{ height:clamp(200px, 32vh, 300px); }
}
.team-nav-btn{
  flex-shrink:0; width:48px; height:48px; border-radius:0; border:1px solid var(--mint);
  background:#fff; color:var(--teal); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.25s;
}
.team-nav-btn:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }
.team-nav-btn:disabled{ opacity:.35; cursor:default; }
.team-nav-btn:disabled:hover{ background:#fff; color:var(--teal); }
.team-dots{ display:flex; justify-content:center; gap:8px; margin-top:24px; }
.team-dot{ width:8px; height:8px; border-radius:0; background:var(--mint); transition:.25s; }
.team-dot.active{ background:var(--berry); width:22px; border-radius:0; }
.team-photo-frame-pending{
  background:var(--mint); display:flex; align-items:center; justify-content:center;
}
.team-photo-frame-pending span{ font-family:var(--serif); font-size:44px; color:var(--teal); opacity:.5; }

/* ---------- Podcast strip ---------- */
.podcast-strip{ padding:80px 0; background:var(--cloud); }
.podcast-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.podcast-copy h3{ margin-top:12px; font-family:var(--serif); font-weight:500; font-size:clamp(24px,3vw,32px); color:var(--teal); }
.podcast-copy p{ margin-top:16px; font-size:15px; line-height:1.6; color:#2f6259; }
.podcast-credit{ margin-top:14px; font-size:13px; font-style:italic; color:var(--berry) !important; }
.podcast-link{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px;
  color:var(--teal); text-decoration:none; border-bottom:1.5px solid var(--teal); padding-bottom:2px;
}
.podcast-eps{ display:flex; flex-direction:column; gap:14px; }
.podcast-ep{
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--mint);
  border-radius:0; padding:16px 18px; transition:border-color .25s, box-shadow .25s;
}
.podcast-ep.playing{ border-color:var(--berry); box-shadow:0 8px 22px -14px rgba(131,52,84,.4); }
.podcast-ep-thumb{
  flex-shrink:0; width:42px; height:42px; border-radius:0; background:var(--berry); color:#fff;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.podcast-ep-thumb:hover{ background:var(--teal); transform:scale(1.05); }
.podcast-ep-body{ flex:1; min-width:0; }
.podcast-ep-title{ display:block; font-size:14px; font-weight:700; color:var(--teal); margin-bottom:3px; }
.podcast-ep p{ font-size:13px; color:#527c73; line-height:1.4; margin:0; }
.podcast-ep-bar{
  margin-top:10px; height:4px; border-radius:0; background:var(--mint); overflow:hidden; cursor:pointer;
}
.podcast-ep-fill{ height:100%; width:0%; background:var(--berry); border-radius:0; transition:width .1s linear; }
.podcast-ep-time{ margin-top:5px; display:flex; justify-content:space-between; font-size:11px; color:#a4b7a7; font-variant-numeric:tabular-nums; }

.podcast-actions{ margin-top:22px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.podcast-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px;
  color:var(--teal); text-decoration:none; border:none; background:none; padding:0;
  border-bottom:1.5px solid var(--teal); padding-bottom:2px; cursor:pointer; font-family:var(--sans);
}
.podcast-link-outline{ color:#527c73; border-bottom-color:#bcc7b8; }
.podcast-link-outline:hover{ color:var(--teal); border-bottom-color:var(--teal); }

/* ---------- Podcast trailer video modal ---------- */
.podcast-modal{
  position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; padding:24px;
}
.podcast-modal.open{ display:flex; }
.podcast-modal-backdrop{ position:absolute; inset:0; background:rgba(8,26,22,0.78); }
.podcast-modal-box{
  position:relative; z-index:1; width:100%; max-width:860px; background:#000; border-radius:0; overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,0.5);
}
.podcast-modal-box video{ width:100%; display:block; aspect-ratio:16/9; background:#000; }
.podcast-modal-close{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:0;
  background:rgba(8,26,22,0.55); border:1px solid rgba(242,242,233,0.4); color:var(--cloud);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; z-index:2;
}
.podcast-modal-close:hover{ background:var(--orange); border-color:var(--orange); }

@media(max-width:900px){
  .podcast-grid{ grid-template-columns:1fr; gap:32px; }
}
@media(max-width:700px){
  .team-carousel{ gap:8px; }
  .team-nav-btn{ width:38px; height:38px; }
}

/* ---------- Flip cards (replace bullet lists inside pillar capabilities) ---------- */
.flip-grid{ margin-top:20px; display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.flip-card{ perspective:1000px; height:96px; cursor:pointer; }
.flip-card-inner{
  position:relative; width:100%; height:100%; text-align:left;
  transform-style:preserve-3d; transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }
.flip-card-front, .flip-card-back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:0; padding:14px 16px; display:flex; align-items:center;
  border:1px solid rgba(242,242,233,0.35);
}
.flip-card-front{
  background:rgba(255,255,255,0.55); border-color:rgba(13,73,64,0.18);
}
.flip-card-front span{ font-size:14px; font-weight:600; color:var(--teal); line-height:1.35; }
.flip-card-back{
  background:var(--teal); transform:rotateY(180deg); color:var(--cloud); border-color:var(--teal);
}
.flip-card-back span{ font-size:12.5px; line-height:1.4; color:var(--cloud); }
.flip-card-hint{
  position:absolute; bottom:6px; right:8px; font-size:9px; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(13,73,64,0.45);
}
.flip-card:hover .flip-card-front{ border-color:var(--berry); }
@media(max-width:700px){
  .flip-grid{ grid-template-columns:1fr; }
  .flip-card{ height:88px; }
}

/* ---------- Bridge statement (replaces poll+stats between pillars and action labs) ---------- */
.bridge-statement{ padding:70px 0; text-align:center; background:var(--cloud); }
.bridge-statement h3{
  font-family:var(--serif); font-weight:500; font-size:clamp(24px,3.2vw,34px); color:var(--teal); line-height:1.3;
}
.bridge-statement p{ margin-top:14px; font-size:15px; color:#2f6259; max-width:560px; margin-left:auto; margin-right:auto; }

/* ---------- Teal banner on What We Do ----------
   Its line fits on one row, so the section came out shorter than Home's and the
   dashed outer ring got cut off top and bottom. Give it Home's height and
   keep the text centred, so the rings sit whole around it just like on Home. */
.banner{
  min-height:380px; /* matches Home, so the dashed ring isn't clipped */
  display:flex; flex-direction:column; justify-content:center;
}
.banner + .page-cta{ padding-top:100px; }

/* The larger classic loop reaches ~44px left of its button; give it room so it
   doesn't cross the neighbouring "Start a conversation" button. */
.page-cta .cta-row .cta-wrap.cta-classic{ margin-left:30px; margin-right:30px; }


/* ============================================================
   Inner-page colour blending (same language as Home): soft blush and
   sage glows inside sections, plus the occasional tinted band that fades
   in from cream and back out. Every glow fades out before its section's
   top/bottom edge, and every band starts and ends on cream, so sections
   flow into each other without seams.
   ============================================================ */
:root{
  --band-blush: color-mix(in srgb, var(--blush) 55%, var(--cloud));
  --band-sage:  color-mix(in srgb, var(--mint) 60%, var(--cloud));
}

/* About */
.essence{
  background:
    radial-gradient(40% 45% at 22% 50%, rgba(236,198,199,0.38) 0%, rgba(236,198,199,0) 70%),
    radial-gradient(35% 40% at 88% 55%, rgba(202,211,193,0.35) 0%, rgba(202,211,193,0) 65%),
    var(--cloud);
}
.values{
  background:linear-gradient(to bottom,
    var(--cloud) 0,
    color-mix(in srgb, var(--band-sage) 40%, var(--cloud)) 70px,
    var(--band-sage) 170px,
    var(--band-sage) calc(100% - 170px),
    color-mix(in srgb, var(--band-sage) 40%, var(--cloud)) calc(100% - 70px),
    var(--cloud) 100%);
}
.brand-statement{
  background:
    radial-gradient(40% 60% at 50% 50%, rgba(236,198,199,0.45) 0%, rgba(236,198,199,0) 70%),
    var(--cloud);
}
.team{
  background:
    radial-gradient(38% 35% at 12% 40%, rgba(236,198,199,0.35) 0%, rgba(236,198,199,0) 70%),
    radial-gradient(40% 35% at 92% 62%, rgba(202,211,193,0.4) 0%, rgba(202,211,193,0) 65%),
    var(--cloud);
}
.podcast-strip{
  background:linear-gradient(to bottom,
    var(--cloud) 0,
    color-mix(in srgb, var(--band-blush) 40%, var(--cloud)) 60px,
    var(--band-blush) 140px,
    var(--band-blush) calc(100% - 140px),
    color-mix(in srgb, var(--band-blush) 40%, var(--cloud)) calc(100% - 60px),
    var(--cloud) 100%);
}

/* What We Do */
.pillars{
  background:
    radial-gradient(40% 25% at 10% 30%, rgba(236,198,199,0.35) 0%, rgba(236,198,199,0) 70%),
    radial-gradient(40% 25% at 92% 70%, rgba(202,211,193,0.4) 0%, rgba(202,211,193,0) 65%),
    var(--cloud);
}
.bridge-statement{
  background:
    radial-gradient(40% 70% at 50% 50%, rgba(202,211,193,0.45) 0%, rgba(202,211,193,0) 65%),
    var(--cloud);
}
.action-labs{
  background:linear-gradient(to bottom,
    var(--cloud) 0,
    color-mix(in srgb, var(--band-blush) 40%, var(--cloud)) 70px,
    var(--band-blush) 170px,
    var(--band-blush) calc(100% - 170px),
    color-mix(in srgb, var(--band-blush) 40%, var(--cloud)) calc(100% - 70px),
    var(--cloud) 100%);
}

/* Contact */
.contact-main{
  background:
    radial-gradient(35% 35% at 12% 35%, rgba(236,198,199,0.38) 0%, rgba(236,198,199,0) 70%),
    radial-gradient(35% 35% at 92% 70%, rgba(202,211,193,0.4) 0%, rgba(202,211,193,0) 65%),
    var(--cloud);
}


/* ---------- Assessment page: map ---------- */
/* Opaque background is load-bearing: the footer pins (position:fixed) while
   this section is still on screen, and a transparent section lets it show
   through — the map floated over the footer panel and the "Open in Google
   Maps" link landed on dark teal. */
.contact-map{ padding:0 0 130px; position:relative; z-index:2; background:var(--cloud); } /* above the section that follows, so the link can never be covered */
.map-frame{
  position:relative; width:100%; height:clamp(280px, 48vh, 460px);
  border:1px solid var(--mint); background:var(--mint); overflow:hidden;
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.9); }
.map-link-row{ margin:20px 0 0; }
.map-link{
  display:inline-block; font-size:14px; font-weight:600;
  color:var(--teal); border-bottom:1.5px solid var(--mint); padding-bottom:2px;
}
.map-link:hover{ border-bottom-color:var(--teal); }
@media(max-width:640px){ .contact-map{ padding-bottom:70px; } }


/* ---------- Book a Call page: copy column + Calendly embed ---------- */
.booking{ padding:100px 0 110px; background:var(--cloud); position:relative; overflow:hidden; }
.booking-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;
  position:relative; z-index:1;
}
.booking-copy h2{ font-family:var(--serif); font-weight:500; color:var(--teal); font-size:clamp(28px,3.6vw,40px); margin-top:12px; }
.booking-copy .lead{ margin-top:16px; font-size:16px; color:#2f6259; max-width:420px; }

.booking-steps{ list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; gap:22px; }
.booking-steps li{ display:flex; gap:16px; align-items:flex-start; }
.bs-num{
  flex-shrink:0; font-family:var(--serif); font-size:13px; font-weight:600; letter-spacing:.08em;
  color:var(--berry); background:var(--blush); padding:6px 9px; line-height:1;
}
.booking-steps h4{ font-family:var(--serif); font-weight:500; color:var(--teal); font-size:18px; }
.booking-steps p{ margin-top:5px; font-size:14.5px; line-height:1.6; color:#2f6259; }

.booking-alt{ margin-top:38px; padding-top:26px; border-top:1px solid color-mix(in srgb, var(--mint) 70%, var(--cloud)); }
.booking-alt-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--berry); margin-bottom:12px;
}

/* The widget renders in an iframe, so it can't inherit the site's type —
   the frame around it carries the brand instead. */
.booking-embed{
  border:1px solid var(--mint); background:#fff; padding:6px;
  box-shadow:0 26px 54px -34px rgba(13,73,64,.5); min-height:760px;
}
.booking-embed .calendly-inline-widget{ width:100%; }
.booking-fallback{ padding:40px 24px; text-align:center; font-size:15px; color:#2f6259; }
.booking-fallback a{ color:var(--berry); font-weight:600; border-bottom:1.5px solid var(--blush); }
.booking-note{ margin-top:16px; font-size:13.5px; color:#527c73; }
.booking-note a{ color:var(--berry); font-weight:600; border-bottom:1.5px solid var(--mint); }
.booking-note a:hover{ border-bottom-color:var(--berry); }

@media(max-width:1000px){
  .booking-grid{ grid-template-columns:1fr; gap:44px; }
  .booking-copy .lead{ max-width:none; }
}
@media(max-width:640px){
  .booking{ padding:60px 0 80px; }
  .booking-embed{ min-height:700px; padding:4px; }
}

/* ---------- Brand motif: the repeated "n" arch band (from the guidelines) ----------
   Footer only. The arch band was removed from the statement sections — the
   client didn't want it reading as a section separator. */
footer{ position:relative; }
footer::after{
  content:''; position:absolute; top:16px; left:0; right:0; height:26px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2252%22%20height%3D%2234%22%20viewBox%3D%220%200%2052%2034%22%3E%3Cpath%20d%3D%22M12%2031V16a10%2010%200%200%201%2020%200v15%22%20fill%3D%22none%22%20stroke%3D%22%23cad3c1%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat:repeat-x; background-size:auto 26px;
  opacity:.22; pointer-events:none; z-index:0;
}
.brand-statement, .bridge-statement{ position:relative; }

/* ============================================================
   Insights page
   ============================================================ */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.insight-featured{ padding:100px 0 90px; position:relative;
  background:
    radial-gradient(40% 40% at 12% 40%, rgba(236,198,199,0.38) 0%, rgba(236,198,199,0) 70%),
    radial-gradient(38% 36% at 92% 62%, rgba(202,211,193,0.42) 0%, rgba(202,211,193,0) 65%),
    var(--cloud);
}
.insight-featured-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.insight-featured-media{ position:relative; }
.insight-featured-media img{ display:block; width:100%; height:clamp(260px,40vh,420px); object-fit:cover; }
.insight-featured-badge{
  position:absolute; top:16px; left:16px; background:var(--berry); color:var(--cloud);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:7px 14px; font-weight:600;
}
.insight-featured-copy h2{ font-family:var(--serif); font-weight:500; color:var(--teal); font-size:clamp(26px,3.4vw,38px); margin-top:12px; }
.insight-featured-copy p{ margin-top:16px; font-size:16px; color:#2f6259; max-width:480px; }

.insight-list{ padding:0 0 100px;
  background:linear-gradient(to bottom,
    var(--cloud) 0,
    color-mix(in srgb, var(--mint) 30%, var(--cloud)) 90px,
    color-mix(in srgb, var(--mint) 55%, var(--cloud)) 200px,
    color-mix(in srgb, var(--mint) 55%, var(--cloud)) calc(100% - 200px),
    color-mix(in srgb, var(--mint) 30%, var(--cloud)) calc(100% - 90px),
    var(--cloud) 100%);
}
.insight-list .sec-head{ padding-top:90px; }
.insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.insight-card{
  background:#fff; padding:28px 26px 22px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 20px 40px -32px rgba(13,73,64,.45); transition:transform .3s ease, box-shadow .3s ease;
}
.insight-card:hover{ transform:translateY(-4px); box-shadow:0 26px 46px -28px rgba(13,73,64,.5); }
.insight-card h3{ font-family:var(--serif); font-weight:500; color:var(--teal); font-size:21px; }
.insight-card p{ font-size:15px; color:#2f6259; line-height:1.6; flex:1; }
.insight-tag{
  align-self:flex-start; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; padding:6px 12px; color:var(--teal);
}
.insight-tag.c-blush{ background:var(--blush); color:var(--berry); }
.insight-tag.c-mint{ background:var(--mint); }
.insight-tag.c-lime{ background:#dad8a0; }
.insight-tag.c-lavender{ background:#c2a5c1; color:#5c1b3b; }
.insight-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--mint) 70%, var(--cloud)); }
.insight-date{ font-size:13px; color:#527c73; }
.insight-link{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--berry); }
.insight-link:hover{ color:var(--orange); }

/* opaque for the same reason as .contact-map — the pinned footer sits behind it */
.insight-signup{ padding:0 0 110px; background:var(--cloud); }
.insight-signup-inner{
  background:var(--teal); color:var(--cloud); padding:44px 48px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center;
}
.insight-signup h3{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,30px); }
.insight-signup p{ margin-top:10px; font-size:15px; color:rgba(242,242,233,.82); }
.insight-form{ display:flex; gap:12px; flex-wrap:wrap; }
.insight-form input{
  flex:1 1 220px; min-width:0; font-family:var(--sans); font-size:15px; padding:14px 16px;
  border:1.5px solid rgba(242,242,233,.35); background:rgba(242,242,233,.06); color:var(--cloud); outline:none;
}
.insight-form input::placeholder{ color:rgba(242,242,233,.55); }
.insight-form input:focus{ border-color:var(--cloud); }
.insight-form-note{ flex-basis:100%; font-size:13.5px; color:var(--blush); margin-top:4px; }

@media(max-width:900px){
  .insight-featured-grid{ grid-template-columns:1fr; gap:30px; }
  .insight-grid{ grid-template-columns:1fr 1fr; }
  .insight-signup-inner{ grid-template-columns:1fr; padding:34px 28px; }
}
@media(max-width:640px){
  .insight-featured{ padding:70px 0 60px; }
  .insight-grid{ grid-template-columns:1fr; }
  .insight-list{ padding-bottom:70px; }
  .insight-list .sec-head{ padding-top:70px; }
  .insight-signup{ padding-bottom:80px; }
}