/* ===========================================================================
   MERIDIAN, concept 2A

   One stylesheet for all Meridian pages: the landing page, the portfolio
   directory and the three case pages.

   The page previously carried every rule in a style attribute. That made two
   things impossible: a media query, and a shared page. Both are now here.

   Type: body is 18px. The old page ran 12.5px to 15px through most of the
   content, which read as small on a 1440px screen and unreadable on a phone.
   Every step of the scale moved up with it.
   =========================================================================== */

:root{
  /* palette */
  --pine:#1E4440;
  --pine-lift:#255852;
  --pine-line:rgba(30,68,64,.12);
  --pinot:#8C2344;
  --tang:#D67C46;
  --cream:#F7F0EC;
  --white:#ffffff;
  --ink:#26313f;
  --ink-2:#4a5663;
  --ink-3:#69737f;
  --ink-4:#5f6a78;          /* the lightest grey that still passes on cream */
  /* Brand Tangerine on Dark Pine measures 3.6:1, which is under the 4.5 bar for
     text below 18.66px. This is the same hue lifted until it passes at 4.7:1.
     Use --tang for fills, borders and dots; --tang-text for words on Pine. */
  --tang-text:#E89660;
  --on-pine:rgba(247,240,236,.74);
  --on-pine-dim:rgba(247,240,236,.55);

  /* type scale, 18px base */
  --fs-body:18px;
  --fs-lead:20px;
  --fs-small:15px;
  --fs-micro:13px;
  --fs-eyebrow:12px;
  --lh-body:1.65;

  --h1:clamp(38px,6.2vw,68px);
  --h2:clamp(28px,3.5vw,42px);
  --h3:clamp(21px,2vw,25px);

  /* rhythm */
  --pad-x:clamp(20px,4.4vw,56px);
  --pad-y:clamp(52px,6vw,84px);
  --gap:clamp(16px,1.6vw,22px);

  --r:8px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* motion layer palette, see assets/motion.css */
  --m-menu-bg:#1E4440;
  --m-menu-fg:#F7F0EC;
  --m-menu-accent:#D67C46;
  --m-accent:#8C2344;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

/* the warm grade that keeps mixed photography on brand */
.page img:not(.raw){filter:saturate(1.06) contrast(1.03) sepia(.08) hue-rotate(-6deg) brightness(1.01)}

:focus-visible{outline:2px solid var(--tang);outline-offset:3px;border-radius:2px}

/* ---------------------------------------------------------------- sections */
.sec{padding:var(--pad-y) var(--pad-x)}
.sec-tight{padding:clamp(34px,4vw,56px) var(--pad-x)}
.on-cream{background:var(--cream)}
.on-white{background:var(--white)}
.on-pine{background:var(--pine);color:var(--cream)}
.on-pine p{color:var(--on-pine)}

.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,44px);
}
.sec-head h2{margin:0;max-width:20ch}
.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 20px;
}
.on-pine .eyebrow{color:var(--tang-text)}
.sec-head .eyebrow{margin:0}

h1,h2,h3,h4{margin:0;text-wrap:balance}
h1{font-size:var(--h1)}
h2{font-size:var(--h2);font-weight:500;line-height:1.1;letter-spacing:-.01em;color:var(--pine)}
.on-pine h2,.on-pine h3,.on-pine h4{color:var(--cream)}
h3{font-size:var(--h3);font-weight:600;line-height:1.2;color:var(--pine)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);max-width:56ch}
.on-pine .lead{color:var(--on-pine)}
.measure{max-width:60ch}

.display{
  font-family:'Archivo Condensed','Archivo Narrow','Arial Narrow','Archivo',sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:1;
}

/* ------------------------------------------------------------------- chrome */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--pad-x);
  background:rgba(247,240,236,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(30,68,64,.08);
  transition:padding .42s var(--ease),box-shadow .42s ease,background .42s ease;
}
.nav.small-nav{
  padding-top:9px;padding-bottom:9px;
  background:rgba(247,240,236,.95);
  box-shadow:0 8px 30px -16px rgba(30,68,64,.34);
}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.nav .brandmark{width:28px;height:28px;flex:none;transition:width .42s var(--ease),height .42s var(--ease)}
.nav.small-nav .brandmark{width:22px;height:22px}
.nav .wordmark{
  font-size:17px;font-weight:500;letter-spacing:.06em;color:var(--pine);
  transition:font-size .42s var(--ease);
}
.nav.small-nav .wordmark{font-size:15px}
.navlinks{display:flex;align-items:center;gap:clamp(16px,2vw,30px);font-size:var(--fs-small);font-weight:500}
.navlink{color:#3a4654;text-decoration:none;transition:color .2s ease}
.navlink:hover,.navlink[aria-current]{color:var(--pinot)}
.nav-end{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.nav-end .ghost{font-size:var(--fs-small);font-weight:500;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.m-burger{display:none}

@media(max-width:1080px){
  .navlinks{display:none}
  .m-burger{display:block}
  .nav-end .ghost{display:none}
}
@media(max-width:560px){
  .nav-end .btn{display:none}
}

/* -------------------------------------------------------------------- links */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;
  padding:14px 26px;border-radius:3px;border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),filter .25s ease,background .25s ease,color .25s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-pinot{background:var(--pinot);color:var(--cream)}
.btn-pine{background:var(--pine);color:var(--cream)}
.btn-line{border-color:rgba(247,240,236,.34);color:var(--cream)}
.btn-line:hover{background:rgba(247,240,236,.1);filter:none}
.btn-line-dark{border-color:var(--pine);color:var(--pine)}
.btn-line-dark:hover{background:var(--pine);color:var(--cream);filter:none}
.btn-sm{padding:10px 18px;font-size:var(--fs-small)}

.arrowlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:600;text-decoration:none;color:var(--pinot);
}
.on-pine .arrowlink{color:var(--tang-text)}
.arrowlink .a{transition:transform .28s var(--ease)}
.arrowlink:hover .a{transform:translateX(5px)}

/* -------------------------------------------------------------------- cards */
.card{
  background:var(--white);border:1px solid var(--pine-line);
  border-radius:var(--r);padding:clamp(22px,2.4vw,30px);
}
.card-pine{background:var(--pine);color:var(--cream);border-color:transparent}
.card-pine p{color:var(--on-pine)}
/* Every dark surface in one place. A heading defaults to Dark Pine, so any new
   dark card added outside this list will render its title invisible. Add the
   class here at the same time you add the surface. */
.card-pine h2,.card-pine h3,.card-pine h4,
.offercard-dark h2,.offercard-dark h3,.offercard-dark h4,
.pffeature h2,.pffeature h3,.pffeature h4{color:var(--cream)}
.card-pine .arrowlink,.offercard-dark .arrowlink,.pffeature .arrowlink{color:var(--tang-text)}
/* .case-head and .dir-head are Dark Pine surfaces too, but they are page
   headers rather than .on-pine sections, so they need the same overrides. */
.card-pine .eyebrow,.offercard-dark .eyebrow,
.case-head .eyebrow,.dir-head .eyebrow{color:var(--tang-text)}
.case-head .chip,.dir-head .chip,.offercard-dark .chip{
  background:rgba(247,240,236,.12);color:var(--cream);border-color:rgba(214,124,70,.34);
}
.lift{transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.lift:hover{transform:translateY(-5px);box-shadow:0 26px 50px -26px rgba(30,68,64,.45)}

.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* Two column splits. The ratio comes in as --cols so the mobile rule below can
   still win: an inline grid-template-columns would outrank any media query. */
.split{
  display:grid;align-items:center;
  gap:clamp(30px,4.4vw,60px);
  grid-template-columns:var(--cols,1fr 1fr);
}
.split-top{align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ------------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;
  background:rgba(30,68,64,.06);color:var(--pine);
  border:1px solid rgba(30,68,64,.1);white-space:nowrap;
}
.chip-pinot{background:rgba(140,35,68,.09);color:var(--pinot);border-color:rgba(140,35,68,.16)}
.chip-tang{background:rgba(214,124,70,.13);color:#a4552a;border-color:rgba(214,124,70,.24)}
.chip-money{background:var(--pine);color:var(--cream);border-color:transparent}
.on-pine .chip{background:rgba(247,240,236,.08);color:var(--cream);border-color:rgba(214,124,70,.3)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.65}

/* -------------------------------------------------------------- stat blocks */
.statrow{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}
@media(max-width:680px){.statrow{grid-template-columns:1fr}}
.stat{
  background:var(--white);border-radius:var(--r);padding:26px 28px;
  border-top:3px solid var(--pinot);
  box-shadow:0 26px 50px -24px rgba(30,68,64,.4);
}
.stat .n{font-size:clamp(32px,3.4vw,40px);font-weight:500;line-height:1;color:var(--pine)}
.stat .l{font-size:var(--fs-small);color:#5a6675;margin-top:8px;line-height:1.5}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(214,124,70,.26);border:1px solid rgba(214,124,70,.26);border-radius:var(--r);overflow:hidden}
@media(max-width:600px){.metrics{grid-template-columns:1fr}}
.metrics > div{background:var(--pine);padding:22px 24px}
.metrics .n{font-size:26px;font-weight:600;line-height:1.1;color:var(--cream)}
.metrics .l{font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--tang-text);margin-top:8px}

/* --------------------------------------------------------------- data table */
.deftable{border:1px solid var(--pine-line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.deftable .row{
  display:grid;grid-template-columns:200px 1fr;gap:20px;
  padding:22px 26px;border-bottom:1px solid var(--pine-line);
}
.deftable .row:last-child{border-bottom:0}
.deftable dt,.deftable .k{font-size:var(--fs-small);font-weight:600;color:var(--pinot);margin:0}
.deftable dd,.deftable .v{font-size:var(--fs-body);line-height:1.6;margin:0;color:var(--ink)}
.on-pine .deftable{background:transparent;border-color:rgba(214,124,70,.26)}
.on-pine .deftable .row{border-color:rgba(214,124,70,.26)}
.on-pine .deftable dt,.on-pine .deftable .k{color:var(--tang-text)}
.on-pine .deftable dd,.on-pine .deftable .v{color:var(--on-pine)}
.deftable.compact{border:0}
.deftable.compact .row{grid-template-columns:118px 1fr;gap:14px;padding:13px 0}
@media(max-width:680px){
  .deftable .row{grid-template-columns:1fr;gap:6px;padding:18px 20px}
  .deftable.compact .row{padding:12px 0}
}

/* ------------------------------------------------------------------- footer */
.foot-cta{
  background:var(--cream);padding:var(--pad-y) var(--pad-x);
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
}
.foot-cta h2{max-width:18ch}

.sitefoot{background:var(--pine);color:var(--on-pine-dim)}
.footgrid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(26px,3.4vw,48px);
  padding:clamp(44px,5vw,64px) var(--pad-x) clamp(32px,3.4vw,44px);
}
@media(max-width:900px){.footgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footgrid{grid-template-columns:1fr}}
.sitefoot .brand{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:18px;font-weight:500;letter-spacing:.06em;color:var(--cream);margin-bottom:16px;
}
.sitefoot h4{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tang-text);margin:0 0 16px;
}
.sitefoot p{font-size:var(--fs-small);line-height:1.7;color:var(--on-pine-dim);margin:0 0 10px;max-width:38ch}
.sitefoot a:not(.brand){
  display:block;font-size:var(--fs-small);line-height:1.9;color:var(--on-pine);
  text-decoration:none;transition:color .2s ease;
}
.sitefoot a:not(.brand):hover{color:var(--tang)}
.footbar{
  border-top:1px solid rgba(214,124,70,.22);
  padding:20px var(--pad-x);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:var(--fs-micro);
}
.footbar span{color:var(--on-pine-dim)}

.backhome{
  position:fixed;bottom:16px;left:16px;z-index:9999;
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  background:rgba(21,23,28,.86);color:#fff;font-size:var(--fs-micro);font-weight:600;
  text-decoration:none;backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.backhome:hover{background:#15171c}

/* ----------------------------------------------------------- scroll reveals */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===========================================================================
   LANDING PAGE
   =========================================================================== */

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;overflow:hidden;color:var(--cream);
  background-color:var(--pine);
  background-image:radial-gradient(130% 95% at 80% -10%,var(--pine-lift) 0%,var(--pine) 55%);
  padding:clamp(48px,5vw,88px) var(--pad-x) clamp(96px,10vw,132px);
}
.hero .watermark{position:absolute;right:-90px;top:-120px;width:520px;height:520px;pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{
  font-family:'Archivo Condensed','Archivo Narrow','Arial Narrow','Archivo',sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:.98;
  margin:0 0 24px;color:var(--cream);
}
.hero .eyebrow{color:var(--tang);margin-bottom:24px}
.hero .lead{color:var(--on-pine);max-width:52ch;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.hero-media{position:relative}
.hero-shot{
  position:relative;aspect-ratio:4/5;max-height:480px;border-radius:var(--r);overflow:hidden;
  box-shadow:0 50px 90px -28px rgba(0,0,0,.65);
}
.hero-shot img{width:100%;height:100%;object-fit:cover}
.hero-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,68,64,.05),rgba(30,68,64,.45))}
.hero-tag{
  position:absolute;right:-14px;top:26px;z-index:2;
  background:var(--tang);color:var(--pine);
  font-size:11px;font-weight:600;letter-spacing:.14em;
  padding:8px 13px;border-radius:4px;box-shadow:0 14px 26px -8px rgba(0,0,0,.5);
}
.hero-note{
  position:absolute;left:-30px;bottom:-36px;z-index:2;max-width:230px;
  background:var(--cream);color:var(--pine);padding:20px 24px;border-radius:7px;
  box-shadow:0 28px 55px -14px rgba(0,0,0,.55);
}
.hero-note .k{font-size:11px;font-weight:600;letter-spacing:.18em;color:#a4552a;margin-bottom:8px}
.hero-note .n{font-size:38px;font-weight:500;line-height:1}
.hero-note .l{font-size:var(--fs-micro);line-height:1.5;color:var(--ink-2);margin-top:6px}

/* Hidden below 640px so the condensed headline wraps to the column instead of
   running off the side of the phone. */
@media(max-width:640px){.br-lg{display:none}}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  /* min() not a flat 440px: on a 390px phone a flat 440 pushes the whole
     document wider than the viewport and every page scrolls sideways. */
  .hero-media{max-width:min(440px,100%)}
  .hero-shot{aspect-ratio:3/2;max-height:none}
  .hero-tag{right:12px}
  .hero-note{left:auto;right:12px;bottom:-28px}
}
@media(max-width:560px){
  .hero{padding-bottom:120px}
  .hero-note{position:static;max-width:none;margin-top:16px;box-shadow:none;border:1px solid rgba(30,68,64,.12)}
  .hero-note .n{font-size:32px}
  .hero-actions .btn{flex:1 1 auto}
}

/* A cream card that hangs off the corner of a photo. Used in the hero and
   again in the investment block. */
.floatnote{
  position:absolute;z-index:2;max-width:250px;
  background:var(--cream);color:var(--pine);padding:20px 24px;border-radius:7px;
  box-shadow:0 28px 55px -14px rgba(0,0,0,.55);
}
.floatnote .k{font-size:11px;font-weight:600;letter-spacing:.18em;color:#a4552a;margin-bottom:10px}
.floatnote .t{font-size:17px;line-height:1.45;font-weight:500;color:var(--pine)}
@media(max-width:640px){
  .floatnote{position:static;max-width:none;margin-top:16px;box-shadow:none;border:1px solid rgba(30,68,64,.12)}
}

/* floating stats over the hero seam */
.hero-stats{position:relative;z-index:3;margin-top:-58px;padding:0 var(--pad-x)}
.hero-stats .stat:nth-child(2){transform:translateY(-14px)}
@media(max-width:680px){
  .hero-stats{margin-top:-40px}
  .hero-stats .stat:nth-child(2){transform:none}
}

/* -------------------------------------------------------- audience router */
.router{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.router{grid-template-columns:1fr}}
.router a{text-decoration:none;display:block}
.router .k{font-size:var(--fs-small);font-weight:500;margin-bottom:14px;color:var(--pinot)}
.router .card-pine .k{color:var(--tang)}
.router h3{margin-bottom:12px}
.router p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-bottom:18px}
.router .card-pine p{color:var(--on-pine)}

/* ===========================================================
   THE OFFER, the two things a company can buy
   Two full cards, generously spaced. No overlap, no toggle: the
   point is that both are available, so both are always readable.
   =========================================================== */
.offer{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px)}
@media(max-width:860px){.offer{grid-template-columns:1fr}}

.offercard{
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r);
  text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--pine-line);
  box-shadow:0 24px 50px -34px rgba(30,68,64,.4);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s ease;
}
.offercard:hover{transform:translateY(-6px);box-shadow:0 36px 66px -32px rgba(30,68,64,.55)}
.offercard-dark{background:var(--pine);color:var(--cream);border-color:transparent}

.offercard .shot{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--pine)}
.offercard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.offercard:hover .shot img{transform:scale(1.05)}
/* Sits on the photo, not notched out of it, so both cards read the same height. */
.offercard .num{
  position:absolute;left:18px;top:18px;z-index:2;
  padding:7px 14px;border-radius:999px;
  background:var(--cream);color:var(--pinot);
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.55);
}
.offercard-dark .num{background:var(--tang);color:var(--pine)}

.offercard .body{
  padding:clamp(26px,2.8vw,36px);
  display:flex;flex-direction:column;gap:16px;flex:1;
}
.offercard h3{font-size:clamp(21px,2.2vw,26px)}
.offercard p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0}
.offercard-dark p{color:var(--on-pine)}

.offerlist{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:11px}
.offerlist li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:var(--fs-small);line-height:1.5;color:var(--ink-2);
}
.offercard-dark .offerlist li{color:var(--on-pine)}
.offerlist li::before{
  content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;
  background:var(--pinot);
}
.offercard-dark .offerlist li::before{background:var(--tang)}
.offercard .go{margin-top:auto;padding-top:6px}

/* the line that ties the two cards together */
.offernote{
  margin-top:clamp(24px,3vw,36px);
  border-left:3px solid var(--tang);padding:4px 0 4px 22px;
  font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);max-width:64ch;
}

/* ===========================================================
   PORTFOLIO PREVIEW on the landing page, three real cases
   =========================================================== */
.pfgrid{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.pfgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.pfgrid{grid-template-columns:1fr}}

.pfcard{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--pine-line);border-radius:var(--r);
  overflow:hidden;transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s ease;
}
.pfcard:hover{transform:translateY(-6px);box-shadow:0 30px 56px -28px rgba(30,68,64,.5);border-color:rgba(140,35,68,.3)}
.pfcard .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--pine)}
.pfcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pfcard:hover .shot img{transform:scale(1.06)}
.pfcard .ticket{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:var(--pine);color:var(--cream);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;
  padding:6px 12px;border-radius:999px;
}
.pfcard .mono{
  position:absolute;right:14px;top:14px;z-index:2;
  width:44px;height:44px;border-radius:7px;
  background:rgba(247,240,236,.94);color:var(--pine);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;letter-spacing:.02em;
}
.pfcard .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;gap:12px}
.pfcard h3{font-size:21px}
.pfcard .where{font-size:var(--fs-small);font-weight:500;color:var(--ink-3);margin-top:-6px}
.pfcard .desc{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0;flex:1}
.pfcard .go{font-size:var(--fs-small);font-weight:600;color:var(--pinot);display:inline-flex;gap:7px;align-items:center}
.pfcard:hover .go .a{transform:translateX(5px)}
.pfcard .go .a{transition:transform .28s var(--ease)}

/* The landing preview is asymmetric on purpose: one company gets the room,
   two sit beside it, and the rest live on the directory page. */
.pfsplit{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gap);align-items:stretch}
@media(max-width:900px){.pfsplit{grid-template-columns:1fr}}
.pfstack{display:grid;gap:var(--gap);align-content:start}

.pffeature{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:440px;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--cream);
  background:var(--pine);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
}
.pffeature:hover{transform:translateY(-6px);box-shadow:0 34px 64px -30px rgba(30,68,64,.6)}
.pffeature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pffeature:hover img{transform:scale(1.05)}
.pffeature::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,68,64,.15) 0%,rgba(30,68,64,.62) 48%,rgba(24,52,49,.94) 100%);
}
.pffeature .inner{position:relative;z-index:2;padding:clamp(24px,3vw,36px)}
.pffeature .flag{
  position:absolute;top:clamp(18px,2vw,24px);left:clamp(18px,2vw,24px);z-index:2;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine);background:var(--tang);padding:7px 12px;border-radius:4px;
}
.pffeature h3{font-size:clamp(23px,2.6vw,30px);color:var(--cream);margin-bottom:8px}
.pffeature .where{font-size:var(--fs-small);color:var(--tang-text);font-weight:500;margin-bottom:14px}
.pffeature p{font-size:16px;line-height:1.6;color:rgba(247,240,236,.8);margin:0 0 18px;max-width:46ch}
.pffeature .chips{margin-bottom:18px}
.pffeature .chip{background:rgba(247,240,236,.15);color:var(--cream);border-color:rgba(247,240,236,.24)}
.pffeature .go{font-size:16px;font-weight:600;color:var(--cream);display:inline-flex;gap:8px;align-items:center}
.pffeature .go .a{transition:transform .28s var(--ease)}
.pffeature:hover .go .a{transform:translateX(5px)}

.pfmini{
  display:grid;grid-template-columns:112px 1fr;gap:0;align-items:stretch;
  background:var(--white);border:1px solid var(--pine-line);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;
}
.pfmini:hover{transform:translateY(-4px);box-shadow:0 24px 46px -26px rgba(30,68,64,.45);border-color:rgba(140,35,68,.28)}
.pfmini .shot{position:relative;overflow:hidden;background:var(--pine)}
.pfmini .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pfmini:hover .shot img{transform:scale(1.06)}
.pfmini .body{padding:20px 22px;display:flex;flex-direction:column;gap:9px}
.pfmini h3{font-size:19px}
.pfmini .where{font-size:var(--fs-micro);font-weight:500;color:var(--ink-3)}
.pfmini p{font-size:var(--fs-small);line-height:1.55;color:var(--ink-2);margin:0}
@media(max-width:420px){
  .pfmini{grid-template-columns:1fr}
  .pfmini .shot{aspect-ratio:16/9}
}

/* ------------------------------------------------------- investment tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:600px}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{background:rgba(255,255,255,.05);border:1px solid rgba(214,124,70,.26);border-radius:7px;padding:22px 20px}
.tile .k{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tang);margin-bottom:10px}
.tile .v{font-size:18px;font-weight:600;line-height:1.35;color:var(--cream)}

/* ------------------------------------------------------------ process rail */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(214,124,70,.26);border:1px solid rgba(214,124,70,.26);border-radius:var(--r);overflow:hidden}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.steps > div{background:var(--pine);padding:28px 26px;transition:background .3s ease}
.steps > div:hover{background:var(--pine-lift)}
.steps .k{font-size:var(--fs-small);font-weight:500;color:var(--tang-text);margin-bottom:14px}
.steps .t{font-size:20px;font-weight:600;color:var(--cream);margin-bottom:8px}
.steps .d{font-size:var(--fs-small);line-height:1.55;color:var(--on-pine)}

/* ------------------------------------------------------------- team strip */
.person{display:flex;align-items:center;gap:18px;background:var(--white);border:1px solid var(--pine-line);border-radius:var(--r);padding:22px 24px}
.person .mono{
  width:54px;height:54px;flex:none;border-radius:50%;
  background:var(--pine);color:var(--tang-text);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;
}
.person h3{font-size:19px;margin-bottom:3px}
.person .role{font-size:var(--fs-small);color:var(--ink-2)}
.person .loc{font-size:var(--fs-micro);font-weight:500;color:var(--ink-4);margin-top:5px}

.note{font-size:var(--fs-small);color:#5a6675;font-style:italic;margin-top:20px}

/* ===========================================================
   PORTFOLIO DIRECTORY page
   =========================================================== */
.dir-head{
  background-color:var(--pine);
  background-image:radial-gradient(120% 100% at 78% -20%,var(--pine-lift) 0%,var(--pine) 58%);
  color:var(--cream);padding:clamp(44px,5vw,72px) var(--pad-x) clamp(40px,4.4vw,58px);
}
.dir-head h1{
  font-family:'Archivo Condensed','Archivo Narrow','Arial Narrow','Archivo',sans-serif;
  font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:.01em;
  font-size:clamp(36px,5.4vw,60px);margin:0 0 20px;
}
.dir-head .lead{color:var(--on-pine)}
.dir-facts{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);margin-top:clamp(28px,3.4vw,40px)}
.dir-facts .f .n{font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1;color:var(--cream)}
.dir-facts .f .l{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--tang-text);margin-top:8px}

/* filter bar */
/* sits directly under the shrunken header, which settles at 47px */
.filters{
  position:sticky;top:47px;z-index:60;
  background:rgba(247,240,236,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pine-line);
  padding:16px var(--pad-x);
}
/* On a phone the facets stack three rows deep. Sticking that under a sticky
   header would leave almost no room for the results, so it scrolls away. */
@media(max-width:720px){.filters{position:static}}
.filters .line{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filters .line + .line{margin-top:12px}
.search{
  flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--pine-line);border-radius:999px;
  padding:10px 18px;transition:border-color .25s ease,box-shadow .25s ease;
}
.search:focus-within{border-color:var(--tang);box-shadow:0 0 0 3px rgba(214,124,70,.14)}
.search input{
  border:0;outline:0;background:transparent;flex:1;min-width:0;
  font-size:16px;color:var(--ink);
}
.search input::placeholder{color:var(--ink-3)}
.search svg{flex:none;opacity:.5}

.fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fgroup .lbl{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-right:2px;
}
.fbtn{
  border:1px solid rgba(30,68,64,.16);background:var(--white);cursor:pointer;
  font-size:var(--fs-micro);font-weight:600;color:var(--ink-2);
  padding:7px 14px;border-radius:999px;white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s var(--ease);
}
.fbtn:hover{transform:translateY(-1px);border-color:rgba(140,35,68,.4);color:var(--pinot)}
.fbtn[aria-pressed="true"]{background:var(--pine);color:var(--cream);border-color:var(--pine)}
.fbtn[aria-pressed="true"]:hover{color:var(--cream)}

.dir-status{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(24px,3vw,34px) var(--pad-x) 0;
}
.dir-status .count{font-size:var(--fs-small);font-weight:600;color:var(--ink-3)}
.dir-status .count b{color:var(--pine)}
.linkbtn{
  border:0;background:transparent;cursor:pointer;padding:0;
  font-size:var(--fs-small);font-weight:600;color:var(--pinot);text-decoration:underline;
  text-underline-offset:3px;
}
.linkbtn[hidden]{display:none}

/* directory rows, wider than the preview cards so three read as deliberate */
.dirlist{padding:clamp(20px,2.4vw,28px) var(--pad-x) var(--pad-y);display:grid;gap:var(--gap)}
.dirrow{
  display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,2.6vw,34px);
  background:var(--white);border:1px solid var(--pine-line);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;
}
.dirrow:hover{transform:translateY(-4px);box-shadow:0 28px 52px -28px rgba(30,68,64,.45);border-color:rgba(140,35,68,.28)}
.dirrow .shot{position:relative;overflow:hidden;background:var(--pine);min-height:210px}
.dirrow .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dirrow:hover .shot img{transform:scale(1.05)}
.dirrow .mono{
  position:absolute;left:14px;top:14px;z-index:2;width:46px;height:46px;border-radius:8px;
  background:rgba(247,240,236,.95);color:var(--pine);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
}
.dirrow .body{padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,34px) clamp(22px,2.4vw,30px) 0;display:flex;flex-direction:column;gap:14px}
.dirrow .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.dirrow h2{font-size:clamp(22px,2.2vw,27px);font-weight:600}
.dirrow .where{font-size:var(--fs-small);font-weight:500;color:var(--ink-3);margin-top:5px}
.dirrow .desc{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0;max-width:70ch}
/* not .foot: that class is the site footer, and it would paint this row dark */
.dirrow .rowfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.dirrow .outcome{font-size:var(--fs-small);color:var(--ink-3)}
.dirrow .outcome b{color:var(--pinot);font-weight:600}
.dirrow[hidden]{display:none}

@media(max-width:820px){
  .dirrow{grid-template-columns:1fr}
  .dirrow .shot{min-height:0;aspect-ratio:16/9}
  .dirrow .body{padding:22px}
}

.dir-empty{
  padding:60px var(--pad-x);text-align:center;color:var(--ink-3);
}
.dir-empty[hidden]{display:none}

.dir-note{
  margin-top:var(--gap);border:1px dashed rgba(30,68,64,.24);border-radius:var(--r);
  padding:26px 28px;background:rgba(30,68,64,.03);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.dir-note p{font-size:16px;color:var(--ink-2);margin:0;max-width:60ch}

/* ===========================================================
   CASE PAGE
   =========================================================== */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--pinot);z-index:200;transition:width .1s linear}

.case-head{
  position:relative;overflow:hidden;color:var(--cream);
  background:var(--pine);
  padding:clamp(40px,4.4vw,64px) var(--pad-x) clamp(44px,5vw,72px);
}
.case-head .crumb{font-size:var(--fs-small);color:var(--on-pine-dim);margin-bottom:26px}
.case-head .crumb a{color:var(--tang-text);text-decoration:none}
.case-head .crumb a:hover{text-decoration:underline}
.case-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:900px){.case-grid{grid-template-columns:1fr}}
.case-head h1{
  font-family:'Archivo Condensed','Archivo Narrow','Arial Narrow','Archivo',sans-serif;
  font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:.01em;
  font-size:clamp(32px,4.6vw,54px);margin:0 0 22px;
}
.case-head .sub{font-size:var(--fs-lead);line-height:1.6;color:var(--on-pine);max-width:52ch}
.case-shot{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:0 40px 80px -30px rgba(0,0,0,.65)}
.case-shot img{width:100%;height:100%;object-fit:cover}

.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--pine-line);border:1px solid var(--pine-line);border-radius:var(--r);overflow:hidden}
@media(max-width:900px){.terms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.terms{grid-template-columns:1fr}}
.terms > div{background:var(--white);padding:24px 26px}
.terms .k{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pinot);margin-bottom:10px}
.terms .v{font-size:19px;font-weight:600;color:var(--pine);line-height:1.3}
.terms .n{font-size:var(--fs-micro);color:var(--ink-3);margin-top:6px;line-height:1.5}

.prose{max-width:68ch}
.prose h2{font-size:clamp(24px,2.6vw,30px);margin:clamp(34px,4vw,50px) 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:var(--fs-body);line-height:1.75;color:var(--ink-2)}
.prose ul{margin:0 0 1em;padding-left:22px;color:var(--ink-2)}
.prose li{margin-bottom:10px;line-height:1.7}

.caseaside{display:grid;gap:var(--gap);align-content:start}
.case-body{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(30px,4vw,60px);align-items:start}
@media(max-width:900px){.case-body{grid-template-columns:1fr}}

.pullquote{
  border-left:3px solid var(--tang);padding-left:24px;
  font-size:clamp(20px,2.2vw,25px);line-height:1.45;color:var(--pine);
  margin:clamp(30px,3.4vw,44px) 0;
}
.pullquote .who{display:block;font-size:var(--fs-small);font-weight:500;color:var(--ink-3);margin-top:14px}

.nextcases{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media(max-width:680px){.nextcases{grid-template-columns:1fr}}

/* ------------------------------------------------------------ fit checker */
.fit{border:1px solid rgba(214,124,70,.28);border-radius:10px;padding:clamp(20px,2.4vw,28px)}
.fitbtn{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  font-size:16px;font-weight:600;padding:15px 18px;border-radius:7px;
  border:1px solid rgba(247,240,236,.2);background:rgba(247,240,236,.05);color:var(--cream);
  margin-bottom:10px;transition:background .25s ease,border-color .25s ease,transform .25s var(--ease);
}
.fitbtn:hover{transform:translateX(3px);border-color:rgba(214,124,70,.5)}
.fitbtn .box{
  width:22px;height:22px;flex:none;border-radius:5px;border:1.5px solid rgba(247,240,236,.45);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease;
}
.fitbtn .box svg{opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .25s var(--ease)}
.fitbtn[aria-pressed="true"]{background:rgba(214,124,70,.16);border-color:var(--tang)}
.fitbtn[aria-pressed="true"] .box{background:var(--tang);border-color:var(--tang)}
.fitbtn[aria-pressed="true"] .box svg{opacity:1;transform:none}
.fitfoot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:18px;border-top:1px solid rgba(214,124,70,.26);padding-top:18px;
}
.fitfoot .msg{font-size:var(--fs-small);font-weight:500;color:var(--tang-text)}
.fitmeter{height:4px;border-radius:99px;background:rgba(247,240,236,.14);overflow:hidden;margin-top:14px}
.fitmeter i{display:block;height:100%;width:0;background:var(--tang);transition:width .45s var(--ease)}

/* ----------------------------------------------------------------- form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.formgrid{grid-template-columns:1fr}}
.formrow{display:grid;gap:8px}
.formrow label{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.formrow input,.formrow select,.formrow textarea{
  font:inherit;font-size:16px;color:var(--ink);
  width:100%;padding:12px 14px;border-radius:5px;
  border:1px solid rgba(30,68,64,.2);background:var(--cream);
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.formrow textarea{resize:vertical;min-height:96px;line-height:1.6}
.formrow input:focus,.formrow select:focus,.formrow textarea:focus{
  outline:0;background:var(--white);border-color:var(--tang);
  box-shadow:0 0 0 3px rgba(214,124,70,.16);
}
.formrow input::placeholder,.formrow textarea::placeholder{color:var(--ink-3)}

/* ------------------------------------------------------------ coverage map */
.coverage{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--pine-line);border:1px solid var(--pine-line);border-radius:var(--r);overflow:hidden}
@media(max-width:900px){.coverage{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.coverage{grid-template-columns:1fr}}
.coverage > div{background:var(--cream);padding:26px 24px}
.coverage .dot{width:8px;height:8px;border-radius:50%;background:var(--pinot);margin-bottom:14px}
.coverage .n{font-size:19px;font-weight:600;color:var(--pine)}
.coverage .c{font-size:var(--fs-small);font-weight:500;color:var(--ink-3);margin-top:4px}
.coverage .r{font-size:var(--fs-micro);color:var(--ink-4);margin-top:10px}
.coverage .tally{background:var(--pine);color:var(--cream);display:flex;flex-direction:column;justify-content:center}
.coverage .tally .n{font-size:32px;font-weight:500;color:var(--cream)}
.coverage .tally .r{color:var(--on-pine-dim);font-size:var(--fs-small)}

/* --------------------------------------------------------------- reduce it */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn:hover,.lift:hover,.pfcard:hover,.dirrow:hover,.fbtn:hover,.fitbtn:hover{transform:none}
}