/* Morning Dew Partners
   Shared stylesheet.

   Rules enforced here: sentence case everywhere, no uppercase transforms,
   Playfair on the brand name and nowhere else, no emoji, no two columns of
   loose text. Where a section needs two columns of prose, both sides are cards.
   Prose is only ever paired with an image.

   Rhythm: mint hero, ivory logo band, white cards, mint-pale ladder,
   navy scorecard block, white founder, mint close, compact navy footer.
   One navy block mid-page, one small one at the foot. Not a dark bottom third. */

:root{
  --mint:#CDE8E3; --mint-deep:#A9D4CC; --mint-pale:#EAF5F2; --mint-wash:#F3FAF8;
  --teal:#0F9D92; --teal-dk:#0B7A71; --teal-deep:#075E58;
  --navy:#0B2340; --navy-lift:#12365F; --charcoal:#24303A;
  --gray:#F5F7F6; --white:#fff; --ivory:#FBF8F3; --ivory-deep:#F4EFE6;
  --gold:#F6B042; --gold-dk:#C98A22; --gold-pale:#FDF3E2;
  --muted:#58697A; --muted-lt:#54666F; --border:#DCEAE7; --border-warm:#EBE3D6;
  --r-sm:8px; --r-md:14px; --r-lg:24px;
  --sh-sm:0 1px 3px rgba(11,35,64,.04), 0 6px 20px rgba(11,35,64,.05);
  --sh-md:0 2px 6px rgba(11,35,64,.05), 0 16px 44px rgba(11,35,64,.09);
  --sh-lg:0 30px 70px rgba(11,35,64,.16);
  --tr:.3s cubic-bezier(.4,0,.2,1);
  --nav-h:76px;
  --pad:clamp(24px,5.4vw,64px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  color:var(--charcoal); background:var(--white);
  font-size:17px; line-height:1.66;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button{cursor:pointer;font-family:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;line-height:1.14;font-weight:600;color:var(--navy)}
h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.03em}
h2{font-size:clamp(25px,3vw,37px);letter-spacing:-.022em}
h3{font-size:clamp(18px,1.8vw,21px);letter-spacing:-.01em}
h2{margin-bottom:.36em}
h3{margin-bottom:.4em}
p{margin-bottom:.9em;text-wrap:pretty}
/* text-wrap:pretty keeps paragraphs from ending on a single word. Browsers that
   do not support it fall back to normal wrapping, so nothing breaks. */
li{text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* The brand name is the only place Playfair appears. */
.wordmark{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-style:normal}

.eyebrow{
  font-family:'Poppins',system-ui,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.11em;color:var(--teal-dk);display:flex;align-items:center;
  gap:10px;margin-bottom:15px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);flex-shrink:0;border-radius:2px}
.eyebrow-on-dark{color:var(--mint)}
.eyebrow-on-dark::before{background:var(--gold)}

.container{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(56px,6.4vw,92px) 0}
.lead{font-size:clamp(18px,1.45vw,20.5px);line-height:1.58;color:var(--charcoal);max-width:34em;text-wrap:pretty}
.muted{color:var(--muted)}
.narrow{max-width:40em}

/* Icons. Inline SVG, stroked with currentColor. No emoji anywhere. */
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.ico-wrap{
  width:44px;height:44px;border-radius:12px;background:var(--mint-pale);
  color:var(--teal-deep);display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;flex-shrink:0;transition:background var(--tr),color var(--tr);
}
.card:hover .ico-wrap{background:var(--mint);color:var(--navy)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Poppins',system-ui,sans-serif;font-size:14.5px;font-weight:600;
  padding:13px 25px;border-radius:var(--r-sm);text-decoration:none;
  border:1.5px solid transparent;transition:all var(--tr);cursor:pointer;
}
.btn .ar{font-size:17px;line-height:1;transition:transform var(--tr)}
.btn:hover .ar{transform:translateX(3px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 3px 14px rgba(15,157,146,.28)}
.btn-primary:hover{background:var(--teal-dk);box-shadow:0 6px 22px rgba(15,157,146,.34)}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 3px 14px rgba(246,176,66,.34)}
.btn-gold:hover{background:#EDA636}
.btn-outline{border-color:var(--teal);color:var(--teal-dk);background:transparent}
.btn-outline:hover{background:var(--mint-pale)}
.btn-white{background:rgba(255,255,255,.95);color:var(--navy);box-shadow:0 3px 16px rgba(3,32,28,.2)}
.btn-white:hover{background:#fff}
.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.72)}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px;align-items:center}

/* Nav */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
  background:rgba(251,248,243,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-warm);transition:box-shadow var(--tr),background var(--tr);
}
#nav.scrolled{box-shadow:0 1px 0 var(--border-warm),0 8px 26px rgba(11,35,64,.06);background:rgba(251,248,243,.97)}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 var(--pad);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:42px;width:auto;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none}
.nav-links a{
  font-family:'Poppins',system-ui,sans-serif;font-size:13.5px;font-weight:500;
  color:var(--charcoal);text-decoration:none;padding-bottom:4px;position:relative;white-space:nowrap;
  transition:color var(--tr);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform var(--tr);
}
.nav-links a:hover{color:var(--teal-dk)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--teal-dk)}
.nav-div{width:1px;height:20px;background:var(--border-warm);flex-shrink:0}
.nav-cta{
  background:var(--gold);color:var(--navy)!important;padding:10px 19px!important;
  border-radius:var(--r-sm);font-weight:600!important;transition:background var(--tr);
}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:#EDA636}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px}
.hamburger span{width:23px;height:2px;background:var(--charcoal);border-radius:2px;transition:transform var(--tr),opacity var(--tr)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:890;
  background:var(--ivory);border-bottom:1px solid var(--border-warm);
  transform:translateY(-130%);transition:transform var(--tr);padding:10px 0 22px;
}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav ul{list-style:none}
.mobile-nav a{
  display:block;padding:12px var(--pad);
  font-family:'Poppins',system-ui,sans-serif;font-size:16px;font-weight:500;
  color:var(--charcoal);text-decoration:none;
}
.mobile-nav a:hover{color:var(--teal-dk);background:var(--mint-pale)}

main{padding-top:var(--nav-h)}

/* ---------- Hero ----------
   Two real columns. Text left, the leaf photo bleeding off the right edge and
   fading into the mint field. No floating low opacity decoration. */
.hero{
  position:relative;overflow:hidden;
  /* The descent. Deep teal-green at the crown, resolving down through Dew Teal
     into mint and out to the ivory of the band below, so the hero does not sit
     beside the page, it becomes it.

     The leaf is a duotone mapped onto the brand ramp. The source photograph is a
     yellow-green at 81 degrees hue and the palette lives at 164 to 178, so even
     at ten percent the original dragged the whole field warm. Now it carries
     texture and luminance only, and every colour in the hero is on palette. */
  background-color:#032624;
  background-image:
    linear-gradient(178deg,
      rgba(3,34,32,.86)    0%,
      rgba(4,42,40,.84)    18%,
      rgba(6,55,52,.82)    36%,
      rgba(9,74,70,.80)    52%,
      rgba(14,100,94,.79)  63%,
      rgba(31,143,134,.78) 72%,
      rgba(112,190,180,.82) 80%,
      rgba(178,217,210,.90) 87%,
      rgba(228,242,238,.98) 93%,
      rgba(251,248,243,1)   97%,
      rgba(251,248,243,1)  100%),
    url('/img-leaf-teal.jpg');
  background-size:cover,cover;
  background-position:center,58% 44%;
  background-repeat:no-repeat;
  padding:clamp(66px,7.4vw,112px) 0 clamp(112px,11.5vw,178px);
}
/* Type on the descent runs light. Everything below the hero runs dark on light. */
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero .lead{color:rgba(255,255,255,.9)}
.hero .eyebrow{color:var(--mint)}
.hero .eyebrow::before{background:var(--gold)}
.hero-inner{position:relative;z-index:2;max-width:34rem}
.hero h1{text-wrap:balance;margin-bottom:20px;text-shadow:0 1px 24px rgba(3,32,28,.34)}


/* ---------- Page heads (inner pages) ---------- */
.page-head{
  position:relative;overflow:hidden;
  /* Mint, teal and cream. The depth comes from three things rather than a dark
     field: a diagonal wash, a soft teal bloom in the upper right, and the
     duotone leaf carrying texture underneath. The leaf is on palette now, so at
     low opacity it reads as material instead of a smudge. */
  background:
    radial-gradient(120% 88% at 88% 4%, rgba(15,157,146,.20) 0%, rgba(15,157,146,0) 62%),
    linear-gradient(152deg, var(--mint) 0%, var(--mint-pale) 44%, var(--ivory) 100%);
  padding:clamp(52px,5.8vw,84px) 0 clamp(48px,5.2vw,72px);
  border-bottom:1px solid var(--border);
}
.page-head::before{
  content:"";position:absolute;right:-8%;top:-32%;width:min(58%,720px);height:172%;
  background:url('/img-leaf-teal.jpg') center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.22;pointer-events:none;
  mask-image:radial-gradient(closest-side,#000 34%,transparent 82%);
  -webkit-mask-image:radial-gradient(closest-side,#000 34%,transparent 82%);
}
.page-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--teal) 0%,var(--mint-deep) 34%,rgba(205,232,227,0) 72%);
}
.page-head h1{margin-bottom:15px;text-wrap:balance;position:relative;z-index:2;color:var(--navy)}
.page-head .lead{position:relative;z-index:2;color:var(--charcoal);text-wrap:pretty}
.page-head .eyebrow{position:relative;z-index:2;color:var(--teal-deep)}
.page-head .eyebrow::before{background:var(--gold)}
.page-head .hero-leaf{display:none}

/* ---------- Founder's foundation band ----------
   Optically balanced. Each mark gets a fixed slot and a tuned height so a
   square crest and a wide wordmark carry the same weight. */
.roots{background:var(--ivory);border-top:none;border-top:1px solid var(--border-warm);border-bottom:1px solid var(--border-warm);padding:22px 0}
.roots-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4.2vw,60px);flex-wrap:wrap}
.roots-lbl{
  font-family:'Poppins',system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.11em;color:var(--muted-lt);white-space:nowrap;flex-shrink:0;
}
.roots-logos{display:flex;align-items:center;justify-content:space-evenly;gap:clamp(24px,4.4vw,60px);flex-wrap:wrap;flex:1}
.roots-logos img{width:auto;object-fit:contain;opacity:.82;transition:opacity var(--tr);filter:saturate(.92)}
.roots-logos img:hover{opacity:1;filter:none}
.rl-deloitte{height:23px}
.rl-google{height:27px}
.rl-columbia{height:50px}
.rl-stony{height:19px}
.rl-auc{height:37px}

/* ---------- Section headers ---------- */
.sh{margin-bottom:clamp(30px,3.2vw,44px);max-width:40rem}
.sh h2{margin-bottom:14px;text-wrap:balance}
.sh p{color:var(--muted);font-size:17.5px;max-width:36em}
.sh-center{margin-left:auto;margin-right:auto;text-align:center}
.sh-center .eyebrow{justify-content:center}

/* ---------- Backgrounds ---------- */
.bg-white{background:var(--white)}
.bg-gray{background:var(--gray)}
.bg-mint{background:var(--mint-pale)}
.bg-wash{background:var(--mint-wash)}
.bg-ivory{background:var(--ivory)}
.bg-navy{background:var(--navy);color:rgba(255,255,255,.84)}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy .sh p{color:rgba(255,255,255,.68)}

/* ---------- Grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,18px)}
/* A column of prose beside an image. Never prose beside prose. */
.with-figure{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,68px);align-items:center}
.with-figure.flip .figure{order:-1}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
  padding:clamp(22px,2.3vw,30px);box-shadow:var(--sh-sm);
  transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--mint-deep)}
.card h3{margin-bottom:10px;text-wrap:balance}
.card p{font-size:16px;color:var(--muted)}
.card-top-teal{border-top:3px solid var(--teal)}
.card-top-gold{border-top:3px solid var(--gold)}
.card-quote{
  font-size:17px;line-height:1.4;color:var(--navy);font-weight:600;
  font-family:'Poppins',system-ui,sans-serif;margin-bottom:11px;text-wrap:balance;
}
.grid-4 .card{padding:clamp(18px,1.7vw,22px)}
.card-flat{background:var(--gray);box-shadow:none;border-color:transparent}
.card-flat:hover{transform:none;box-shadow:none}

/* ---------- Card lists ---------- */
.deliv{list-style:none}
.deliv li{position:relative;padding-left:22px;margin-bottom:9px;font-size:16px;line-height:1.5}
.deliv li::before{content:"\203A";position:absolute;left:0;top:-2px;color:var(--teal);font-size:18px}
.deliv li:last-child{margin-bottom:0}
.deliv b{font-family:'Poppins',system-ui,sans-serif;color:var(--navy);font-weight:600}

/* ---------- The ladder ----------
   A real sequence, so it gets a spine and numbered nodes. This is the
   signature element of the site. Everything around it stays quiet. */
.ladder{position:relative;padding-left:clamp(38px,4.6vw,62px)}
.ladder::before{
  content:"";position:absolute;left:clamp(13px,1.6vw,21px);top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--teal) 0%,var(--teal) 62%,var(--mint-deep) 100%);
  border-radius:2px;
}
.rung{
  position:relative;display:grid;grid-template-columns:16.6rem 1fr;
  gap:clamp(20px,3.4vw,48px);align-items:start;
  padding:clamp(24px,2.7vw,34px) 0;border-bottom:1px solid var(--border);
}
.rung:last-child{border-bottom:none;padding-bottom:0}
.rung::before{
  content:"";position:absolute;left:calc(clamp(38px,4.6vw,62px) * -1 + clamp(13px,1.6vw,21px) - 5px);
  top:clamp(28px,2.9vw,38px);width:12px;height:12px;border-radius:50%;
  background:var(--white);border:2.5px solid var(--teal);
}
.rung.rung-live::before{background:var(--teal);box-shadow:0 0 0 5px rgba(15,157,146,.16)}
.rung-step{
  font-family:'Poppins',system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.11em;color:var(--teal);margin-bottom:9px;display:block;
}
.rung-name{margin-bottom:9px}
.rung-price{
  font-family:'Poppins',system-ui,sans-serif;font-size:21px;font-weight:600;
  color:var(--navy);line-height:1.25;letter-spacing:-.02em;
}
.rung-price.scoped{font-size:15.5px;font-weight:500;color:var(--muted)}
.rung-dur{font-size:14.5px;color:var(--muted);margin-top:3px}
.rung-q{
  font-family:'Poppins',system-ui,sans-serif;font-size:15px;font-weight:500;
  color:var(--teal-dk);margin-bottom:9px;
}
.rung-body p{font-size:16.5px}
.rung-note{margin-top:14px;font-size:14.5px;color:var(--muted);border-left:2px solid var(--gold);padding-left:13px}
.rung-tag{
  display:inline-block;margin-top:10px;font-family:'Poppins',system-ui,sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--navy);
  background:var(--gold-pale);border:1px solid #EFD6A6;border-radius:20px;padding:4px 11px;
}

/* ---------- Numbered reasons ---------- */
.di{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--border)}
.di:last-child{border-bottom:none;padding-bottom:0}
.dn{font-family:'Poppins',system-ui,sans-serif;font-size:14.5px;font-weight:600;color:var(--teal);opacity:.6;padding-top:4px}
.di h3{margin-bottom:8px}
.di p{font-size:16.5px;color:var(--muted)}

/* ---------- Scorecard block, the one dark moment mid page ---------- */
.dark-split{
  background:var(--navy);color:rgba(255,255,255,.85);position:relative;overflow:hidden;
}
.dark-split .leafwash{
  position:absolute;right:-4%;top:-30%;width:min(48%,620px);
  mix-blend-mode:screen;opacity:.14;pointer-events:none;
  mask-image:radial-gradient(closest-side,#000 40%,transparent 86%);
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 86%);
}
.dark-split .inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.6vw,64px);align-items:center}
.dark-split h2{text-wrap:balance;margin-bottom:14px}
.dark-split p{color:rgba(255,255,255,.72);font-size:17.5px}
.score-panel{
  background:rgba(255,255,255,.055);border:1px solid rgba(205,232,227,.2);
  border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px);
}
.score-lbl{font-family:'Poppins',system-ui,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.11em;color:var(--gold);margin-bottom:12px}
.score-big{
  font-family:'Poppins',system-ui,sans-serif;font-size:clamp(19px,2.1vw,25px);
  font-weight:600;color:#fff;line-height:1.28;text-wrap:balance;margin-bottom:12px;letter-spacing:-.018em;
}
.score-panel p{font-size:16px}
.score-meta{margin-top:18px;padding-top:16px;border-top:1px solid rgba(205,232,227,.16);font-size:14.5px;color:rgba(255,255,255,.6)}

/* ---------- Figures. Portraits are framed, never cropped at the crown. ---------- */
.figure{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
.portrait{aspect-ratio:4/5;max-width:420px;position:relative}
.portrait img{object-position:50% 8%}
.portrait-frame{position:relative;max-width:440px;margin-left:auto}
.portrait-frame::before{
  content:"";position:absolute;left:-16px;bottom:-16px;width:62%;height:58%;
  background:var(--mint);border-radius:var(--r-lg);z-index:0;
}
.portrait-frame .portrait{position:relative;z-index:1}

/* ---------- Certification badges ---------- */
.certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.certs span{
  font-family:'Poppins',system-ui,sans-serif;font-size:12.5px;font-weight:500;
  color:var(--navy);background:var(--gold-pale);border:1px solid #EFD6A6;
  border-radius:20px;padding:6px 14px;white-space:nowrap;
}
.certs span.pending{background:var(--white);border-color:var(--border-warm);color:var(--muted)}

/* ---------- Closing CTA. Light, not another dark slab. ---------- */
.cta{
  background:linear-gradient(155deg,var(--mint) 0%,var(--mint-pale) 55%,var(--ivory) 100%);
  text-align:center;position:relative;overflow:hidden;
}
.cta .container{position:relative;z-index:2}
.cta h2{margin-bottom:14px;text-wrap:balance;max-width:20em;margin-left:auto;margin-right:auto}
.cta p{color:var(--muted);font-size:17.5px;max-width:38em;margin-left:auto;margin-right:auto}
.cta .btn-row{justify-content:center}

/* ---------- Footer. Compact. Three short columns, one bar, nothing else. ---------- */
.site-foot{background:var(--navy);color:rgba(255,255,255,.62);padding:44px 0 26px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
.foot-brand{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:21px;color:#fff;margin-bottom:9px}
.site-foot p{font-size:15px;line-height:1.6;max-width:26em}
.foot-h{font-family:'Poppins',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--mint);margin-bottom:12px}
.foot-links{list-style:none}
.foot-links li{margin-bottom:8px}
.foot-links a{text-decoration:none;transition:color var(--tr)}
.foot-links a:hover{color:#fff}
.foot-bar{
  margin-top:32px;padding-top:18px;border-top:1px solid rgba(205,232,227,.14);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;
}
.foot-certs{display:flex;gap:16px;flex-wrap:wrap;color:rgba(255,255,255,.5)}

/* ---------- Reveal ---------- */
.js .fade{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1)}
.js .fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .fade{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .with-figure,.dark-split .inner{grid-template-columns:1fr;gap:32px}
  .with-figure.flip .figure{order:0}
  .portrait-frame{margin-left:0;max-width:360px}
  .hero-inner{max-width:none}
  .rung{grid-template-columns:1fr;gap:14px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .roots-in{flex-direction:column;justify-content:center;gap:14px}
  .roots-logos{justify-content:center;gap:28px 34px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}

  .btn{width:100%;justify-content:center}
  .btn-row{gap:10px}
  .ladder{padding-left:30px}
  .ladder::before{left:9px}
  .rung::before{left:-26px;top:26px}
  .foot-bar{flex-direction:column;align-items:flex-start}
}

/* ------------------------------------------------------------------
   Inner page compatibility.
   The home page has been rebuilt on the classes above. About, Contact,
   Institutional, Sales Engine and Why Partner still use the earlier set.
   These rules keep those pages intact until each gets its own pass.
   ------------------------------------------------------------------ */

/* Page head leaf, the old absolutely positioned image */
.hero-leaf{
  position:absolute;right:-6%;top:-20%;width:min(52%,660px);
  mix-blend-mode:multiply;opacity:.26;pointer-events:none;
  mask-image:radial-gradient(closest-side,#000 42%,transparent 88%);
  -webkit-mask-image:radial-gradient(closest-side,#000 42%,transparent 88%);
}
.page-head .hero-leaf{opacity:.22;top:-26%}

/* Old ladder wrapper, before the spine */
.rungs{border-top:1px solid var(--border)}
.rungs .rung{padding-left:0}
.rungs .rung::before{display:none}
.rungs .rung:last-child{border-bottom:1px solid var(--border);padding-bottom:clamp(24px,2.7vw,34px)}

/* Nav link that used to be greyed out. It is a real destination, so it reads
   like one now, set apart by the divider rather than by being dimmed. */
.nav-inst{color:var(--charcoal)}
.roots-sep{width:1px;height:22px;background:var(--border-warm);flex-shrink:0}

/* Buttons the inner pages still call for. The closing CTA is a light field
   now, so btn-light reads as an outline unless it sits on a dark section. */
.btn-light{border-color:var(--teal);color:var(--teal-dk);background:transparent}
.btn-light:hover{background:var(--mint-pale)}
.bg-navy .btn-light,.dark-split .btn-light{border-color:rgba(255,255,255,.42);color:#fff;background:transparent}
.bg-navy .btn-light:hover,.dark-split .btn-light:hover{background:rgba(255,255,255,.12)}
.btn-sm{font-size:13.5px;padding:10px 19px}

/* Gold icon variant */
.ico-wrap.gold{background:var(--gold-pale);color:var(--gold-dk)}
.card:hover .ico-wrap.gold{background:#FBE9CC;color:var(--navy)}

/* Pull box */
.pull{
  background:var(--mint-pale);border-left:3px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:clamp(20px,2.3vw,28px) clamp(22px,2.7vw,32px);
}
.pull .lab{font-family:'Poppins',system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--teal-dk);margin-bottom:8px}
.pull .big{font-family:'Poppins',system-ui,sans-serif;font-size:clamp(19px,2vw,24px);font-weight:600;color:var(--navy);line-height:1.28;text-wrap:balance;margin-bottom:10px}
.pull p{font-size:16.5px}

/* Two up image band. Flagged for removal on the About pass. */
.band{display:grid;grid-template-columns:repeat(2,1fr);position:relative}
.band img{width:100%;height:clamp(150px,20vw,240px);object-fit:cover}
.leafblend{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;opacity:.3;pointer-events:none}

/* Tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:600px}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.tbl th{font-family:'Poppins',system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--teal-dk);background:var(--mint-wash)}
.tbl tr:last-child td{border-bottom:none}

/* Contact form */
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.fg-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fg label{font-family:'Poppins',system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--navy)}
.fg input,.fg select,.fg textarea{
  font-family:inherit;font-size:16px;color:var(--charcoal);background:#fff;
  border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;width:100%;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,157,146,.14)}
.fg textarea{min-height:130px;resize:vertical}
.hidden-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-ok{background:var(--mint-pale);border:1px solid var(--mint-deep);border-radius:var(--r-md);padding:22px}
.gold{color:var(--gold-dk)}
@media (max-width:640px){.fg-row{grid-template-columns:1fr}}


/* ---------- Routing rows on the Sales Engine page ----------
   The section below this one uses a dark statement band, and the one above uses
   cards. This one is hairline rows so the three blocks never read as the same
   device twice. */
.route{border-top:1px solid var(--border)}
.route-row{
  display:grid;grid-template-columns:3.2rem 1fr 1.05fr;gap:clamp(16px,2.6vw,36px);
  padding:clamp(22px,2.5vw,30px) 0;border-bottom:1px solid var(--border);align-items:start;
  transition:background var(--tr);
}
.route-row:hover{background:var(--mint-wash)}
.route-n{
  font-family:'Poppins',system-ui,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.08em;color:var(--teal);opacity:.7;padding-top:5px;
}
.route-said{
  font-family:'Poppins',system-ui,sans-serif;font-size:clamp(17px,1.6vw,19.5px);
  font-weight:600;color:var(--navy);line-height:1.34;text-wrap:balance;letter-spacing:-.012em;
}
.route-body p{font-size:16.5px;color:var(--muted);margin-bottom:12px}
.route-go{
  display:inline-flex;align-items:center;gap:7px;font-family:'Poppins',system-ui,sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--teal-dk);
  background:var(--mint-pale);border:1px solid var(--mint-deep);border-radius:20px;padding:5px 13px;
}

/* ---------- Statement band. Three commitments, no card chrome. ---------- */
.stband{background:var(--navy);color:rgba(255,255,255,.78);position:relative;overflow:hidden}
.stband .leafwash{
  position:absolute;left:-6%;bottom:-46%;width:min(44%,560px);
  mix-blend-mode:screen;opacity:.13;pointer-events:none;
  mask-image:radial-gradient(closest-side,#000 38%,transparent 84%);
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,transparent 84%);
}
.stband .container{position:relative;z-index:2}
.stband h2{color:#fff}
.stband .sh p{color:rgba(255,255,255,.66)}
.stgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stcol{padding:0 clamp(20px,2.6vw,34px);border-left:1px solid rgba(205,232,227,.2)}
.stcol:first-child{padding-left:0;border-left:none}
.stcol:last-child{padding-right:0}
.stcol h3{color:#fff;font-size:clamp(17px,1.65vw,19.5px);margin-bottom:11px;text-wrap:balance}
.stcol p{font-size:16px;color:rgba(255,255,255,.72)}
.stcol .ico-wrap{background:rgba(246,176,66,.15);color:var(--gold);margin-bottom:15px;border:1px solid rgba(246,176,66,.28)}
@media (max-width:1000px){
  .stgrid{grid-template-columns:1fr;gap:28px}
  .stcol{padding:0;border-left:none;border-top:1px solid rgba(205,232,227,.2);padding-top:26px}
  .stcol:first-child{border-top:none;padding-top:0}
  .route-row{grid-template-columns:2.4rem 1fr;gap:14px}
  .route-body{grid-column:2}
}
@media (max-width:640px){
  .route-row{grid-template-columns:1fr;gap:12px}
  .route-body{grid-column:1}
}


/* ---------- Certification band ----------
   About carries the badges only. Institutional owns the detail, so this band
   ends in a link rather than an explanation. */
.certband{background:var(--ivory);border-top:1px solid var(--border-warm);border-bottom:1px solid var(--border-warm);padding:24px 0}
.certband-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.certband-lbl{
  font-family:'Poppins',system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.11em;color:var(--muted-lt);white-space:nowrap;flex-shrink:0;
}
.certband .certs{margin-top:0;flex:1;justify-content:center}
.certband-link{
  font-family:'Poppins',system-ui,sans-serif;font-size:13.5px;font-weight:600;
  color:var(--teal-deep);text-decoration:none;white-space:nowrap;display:inline-flex;
  align-items:center;gap:7px;flex-shrink:0;
}
.certband-link:hover{color:var(--teal)}

/* ---------- Contact routes. Hairline rows, no card chrome. ---------- */
.routes{border-top:1px solid var(--border)}
.route-item{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--border);
}
.route-item h3{font-size:18px;margin-bottom:7px}
.route-item p{font-size:16.5px;color:var(--muted);margin-bottom:12px}
.route-item .ico-wrap{margin-bottom:0;width:40px;height:40px}

/* Contact layout: prose on the left, the form card on the right */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.4vw,60px);align-items:start}
@media (max-width:1000px){
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .certband-in{flex-direction:column;text-align:center}
  .certband .certs{justify-content:center}
}
@media (max-width:640px){
  .route-item{grid-template-columns:1fr;gap:12px}
}


/* ---------- Credential rows ----------
   A four column table put each cell at roughly 260px, which stranded a word in
   almost every one. Rows give each credential the full measure. */
.creds{border-top:1px solid var(--border)}
.cred{
  display:grid;grid-template-columns:15rem 1fr;gap:clamp(18px,3vw,44px);
  padding:clamp(20px,2.3vw,28px) 0;border-bottom:1px solid var(--border);align-items:start;
}
.cred-name{
  font-family:'Poppins',system-ui,sans-serif;font-size:19px;font-weight:600;
  color:var(--navy);letter-spacing:-.015em;margin-bottom:9px;
}
.cred-status{
  display:inline-block;font-family:'Poppins',system-ui,sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.06em;border-radius:20px;padding:4px 12px;
  background:var(--gold-pale);border:1px solid #EFD6A6;color:var(--navy);
}
.cred-status.wip{background:var(--white);border-color:var(--border-warm);color:var(--muted)}
.cred-lbl{
  font-family:'Poppins',system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;color:var(--muted-lt);margin-bottom:5px;
}
.cred-body p{font-size:16.5px;margin-bottom:14px}
.cred-body p:last-child{margin-bottom:0}
@media (max-width:760px){ .cred{grid-template-columns:1fr;gap:12px} }


/* ---------- Photography ----------
   The four source photographs sat at 34 to 60 degrees hue against a palette
   that lives at 164 to 178, which is why they read as stock dropped onto the
   page. They are graded: desaturated, shadows pushed toward Dew Teal,
   highlights lifted toward ivory, luminance matched across the set. Full width
   uses also take a mint veil, per the brand rule about leaves and organic
   imagery blending via multiply with soft edge fades. */

.photoband{position:relative;overflow:hidden;line-height:0}
.photoband img{
  width:100%;height:clamp(220px,25vw,330px);object-fit:cover;display:block;
}
.photoband::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(120deg,rgba(205,232,227,.5) 0%,rgba(205,232,227,.14) 46%,rgba(15,157,146,.2) 100%);
  mix-blend-mode:multiply;
}
.photoband::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,var(--fade-top,rgba(255,255,255,.92)) 0%,rgba(255,255,255,0) 22%),
    linear-gradient(0deg,var(--fade-bot,rgba(255,255,255,.92)) 0%,rgba(255,255,255,0) 22%);
}
.photoband.on-mint{--fade-top:rgba(234,245,242,.95);--fade-bot:rgba(234,245,242,.95)}
.photoband.on-ivory{--fade-top:rgba(251,248,243,.95);--fade-bot:rgba(251,248,243,.95)}
.photoband.top-mint{--fade-top:rgba(234,245,242,.95)}
.photoband.bot-mint{--fade-bot:rgba(234,245,242,.95)}
.photoband.top-navy{--fade-top:rgba(11,35,64,.9)}
.photoband.bot-navy{--fade-bot:rgba(11,35,64,.9)}

/* A caption sitting on the band, for the one photograph that is a real room. */
.photoband .cap{
  position:absolute;left:0;right:0;bottom:clamp(16px,2.4vw,26px);z-index:4;
  pointer-events:none;
}
.photoband .cap .container{line-height:1.5}
.photoband .cap span{
  display:inline-block;font-family:'Poppins',system-ui,sans-serif;font-size:12.5px;
  font-weight:600;letter-spacing:.05em;color:var(--navy);
  background:rgba(251,248,243,.92);border:1px solid var(--border-warm);
  border-radius:20px;padding:6px 15px;
}

/* Framed figures inside sections */
.figure-soft{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);position:relative}
.figure-soft img{width:100%;height:100%;object-fit:cover;display:block}
.figure-soft::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(205,232,227,.34) 0%,rgba(205,232,227,0) 52%,rgba(15,157,146,.16) 100%);
  mix-blend-mode:multiply;
}
.figure-tall{aspect-ratio:4/3}
.figure-wide{aspect-ratio:16/10}
.frame-offset{position:relative}
.frame-offset::before{
  content:"";position:absolute;right:-16px;bottom:-16px;width:58%;height:56%;
  background:var(--mint);border-radius:var(--r-lg);z-index:0;
}
.frame-offset > *{position:relative;z-index:1}

/* NAICS codes */
.naics{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.naics-item{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:9px 14px;min-width:0;
}
.naics-code{
  font-family:'Poppins',system-ui,sans-serif;font-size:15px;font-weight:600;
  color:var(--navy);letter-spacing:.01em;display:block;
}
.naics-item small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
@media (max-width:640px){
  .photoband img{height:clamp(180px,44vw,240px)}
}