/* Cordero Mgmt — pack-faithful tokens */
:root{
  --forest:#1F2C26;
  --forest-deep:#182420;
  --cream:#F6F1E9;
  --cream-dim:rgba(246,241,233,.72);
  --copper:#C77B43;
  --gold:#C08552;
  --hairline:rgba(246,241,233,.16);
  --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  background:var(--forest);
  color:var(--cream);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* type */
.display{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.01em;line-height:1.12}
.accent{color:var(--copper)}
em{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500}
.eyebrow{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--copper);font-weight:600;
}
.lead{font-size:19px;color:var(--cream-dim);max-width:62ch}

/* header */
header.site{
  position:sticky;top:0;z-index:20;
  background:rgba(31,44,38,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px}
.brand .star{width:30px;height:30px;flex:none}
.brand .word{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;font-size:21px}
.brand .word small{font-style:italic;font-size:12px;color:var(--cream-dim);margin-left:2px}
.nav ul{display:flex;gap:26px;list-style:none;font-size:14px;letter-spacing:.04em}
.nav ul a{color:var(--cream-dim);transition:color .2s}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--cream)}
@media(max-width:760px){.nav ul{gap:16px;font-size:13px}.nav ul .hide-m{display:none}}

/* sections */
section{padding:88px 0;border-bottom:1px solid var(--hairline)}
section:last-of-type{border-bottom:none}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:44px}
h1.display{font-size:clamp(38px,6vw,64px)}
h2.display{font-size:clamp(30px,4.4vw,44px)}
h3.display{font-size:clamp(22px,3vw,28px)}

/* hero */
.hero{padding:120px 0 100px;border-bottom:1px solid var(--hairline)}
.hero .tag{margin-top:22px;font-size:clamp(18px,2.4vw,23px);font-family:"Fraunces",Georgia,serif;font-style:italic;color:var(--cream-dim)}
.btn{
  display:inline-block;margin-top:36px;padding:14px 28px;
  border:1px solid var(--copper);color:var(--copper);
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--copper);color:var(--forest)}

/* founder */
.founder{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.founder .portrait{
  width:280px;height:280px;border-radius:50%;overflow:hidden;
  border:1px solid var(--hairline);
}
.founder .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.founder blockquote{color:var(--cream-dim);display:flex;flex-direction:column;gap:18px;font-size:17px}
.founder .sig{margin-top:26px}
.founder .sig strong{display:block;font-size:17px;color:var(--cream)}
.founder .sig span{font-size:14px;color:var(--cream-dim)}
@media(max-width:820px){.founder{grid-template-columns:1fr}.founder .portrait{width:200px;height:200px}}

/* lens */
.lens-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.lens-grid img{width:100%;height:100%;object-fit:cover;border:1px solid var(--hairline)}
.lens{display:flex;flex-direction:column;gap:18px;max-width:66ch;color:var(--cream-dim)}
.lens p strong{color:var(--copper);font-weight:600}
@media(max-width:820px){.lens-grid{grid-template-columns:1fr;gap:30px}}

/* team network diagram */
.network{margin-top:16px}
.network img{width:100%;height:auto}

/* three-up columns */
.threeup{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.threeup h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);margin-bottom:14px;font-weight:600}
.threeup p{font-size:15.5px;color:var(--cream-dim)}
@media(max-width:820px){.threeup{grid-template-columns:1fr;gap:32px}}

/* numbered problems */
.problems{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px}
.problem{display:flex;gap:20px;align-items:baseline}
.problem .num{font-family:"Fraunces",Georgia,serif;font-size:44px;font-weight:600;color:var(--copper);line-height:1}
.problem p{color:var(--cream-dim)}
@media(max-width:760px){.problems{grid-template-columns:1fr}}

/* house */
.house{margin-top:8px}
.roof{display:block;width:100%;height:auto;margin-bottom:-1px}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid rgba(246,241,233,.5)}
.room{
  padding:40px 30px 44px;border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:14px;
  transition:background .25s;
}
.room:last-child{border-right:none}
.room:hover{background:rgba(246,241,233,.04)}
.room .name{font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);font-weight:600}
.room .role{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:18px;color:var(--cream)}
.room .desc{font-size:15px;color:var(--cream-dim)}
.room .enter{margin-top:auto;padding-top:18px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);font-weight:600}
.house-foot{
  border-top:2px solid rgba(246,241,233,.5);
  padding-top:22px;text-align:center;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
}
@media(max-width:820px){
  .rooms{grid-template-columns:1fr}
  .room{border-right:none;border-bottom:1px solid var(--hairline)}
  .room:last-child{border-bottom:none}
}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:34px 24px;margin-top:12px}
.member{display:flex;flex-direction:column;align-items:center;gap:12px}
.member .ph{width:120px;height:120px;border-radius:50%;overflow:hidden;border:1px solid var(--hairline)}
.member .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .35s}
.member:hover .ph img{filter:grayscale(0)}
.member span{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:17px}

/* expect */
.expect{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.expect h3{font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:14px;font-weight:700}
.expect p{font-size:15.5px;color:var(--cream-dim)}
.expect-foot{margin-top:52px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:18px;color:var(--cream-dim);text-align:center}
@media(max-width:820px){.expect{grid-template-columns:1fr;gap:30px}}

/* contact */
.contact-rows{margin-top:36px;display:flex;flex-direction:column;gap:16px;font-size:18px}
.contact-rows .row{display:flex;gap:28px;align-items:baseline}
.contact-rows .lbl{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--copper);font-weight:600;width:70px;flex:none}
.contact-rows a:hover{color:var(--copper)}

/* room pages */
.roompage{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:start}
.roompage .narrative{display:flex;flex-direction:column;gap:18px;color:var(--cream-dim)}
.roompage .narrative p strong{color:var(--copper);font-weight:600}
.services h3{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--copper);font-weight:600;margin-bottom:8px}
.services ul{list-style:none}
.services li{padding:16px 0;border-bottom:1px solid var(--hairline);font-family:"Fraunces",Georgia,serif;font-size:18px}
.services li:last-child{border-bottom:none}
@media(max-width:820px){.roompage{grid-template-columns:1fr;gap:44px}}
.backlink{display:inline-block;margin-bottom:34px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.backlink:hover{color:var(--copper)}

/* footer */
footer.site{padding:44px 0 56px;border-top:1px solid var(--hairline);font-size:13.5px;color:var(--cream-dim)}
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a:hover{color:var(--copper)}
footer .links{display:flex;gap:20px;flex-wrap:wrap}

/* privacy page prose */
.prose{max-width:66ch;display:flex;flex-direction:column;gap:16px;color:var(--cream-dim)}
.prose h2{font-family:"Fraunces",Georgia,serif;font-size:24px;color:var(--cream);margin-top:22px}
.prose a{color:var(--copper)}

/* lab pointer on practice page */
.lab-note{margin-top:26px;font-size:14.5px;color:var(--cream-dim);font-style:italic;font-family:"Fraunces",Georgia,serif}
.lab-note a{color:var(--copper)}
.lab-note a:hover{text-decoration:underline}

/* ===== elevation pass ===== */

::selection{background:var(--copper);color:var(--forest)}

/* film grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* hero: orchestrated entrance + ambient star */
.hero{position:relative;overflow:hidden;min-height:78vh;display:flex;align-items:center}
.hero .wrap{position:relative;z-index:2}
.hero::before{
  content:"";position:absolute;inset:auto -10% -40% auto;width:70%;height:120%;z-index:0;
  background:radial-gradient(ellipse at 70% 80%, rgba(199,123,67,.13), transparent 60%);
}
.hero-star{
  position:absolute;right:-160px;top:50%;transform:translateY(-50%);
  width:560px;height:560px;opacity:.05;z-index:1;
  animation:starturn 240s linear infinite;
}
@keyframes starturn{to{transform:translateY(-50%) rotate(360deg)}}
.hero h1.display{font-size:clamp(44px,7.5vw,84px)}
.hero .tag{max-width:34ch}
.hero .eyebrow,.hero h1,.hero .tag,.hero .btn{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1{animation-delay:.15s}
.hero .tag{animation-delay:.3s}
.hero .btn{animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}

/* scroll reveals (classes applied by main.js) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* the house: roof draws itself */
.roof path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .15s}
.house.in-view .roof path{stroke-dashoffset:0}
.house .rooms,.house .house-foot,#rooms .sec-head + .house > p{opacity:0;transition:opacity .8s ease 1s}
.house.in-view .rooms,.house.in-view .house-foot,.house.in-view > p{opacity:1}
.room{position:relative}
.room::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--copper);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.room:hover::after{width:100%}
.room .enter{transition:letter-spacing .3s}
.room:hover .enter{letter-spacing:.2em}

/* numerals + button micro-interactions */
.problem .num{font-style:italic;transition:color .3s}
.problem:hover .num{color:var(--gold)}
.btn{position:relative;overflow:hidden;z-index:0}
.btn::before{content:"";position:absolute;inset:0;background:var(--copper);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover{background:transparent;color:var(--forest)}
.btn:hover::before{transform:scaleX(1)}

/* nav scrolled state */
header.site{transition:box-shadow .3s,background .3s}
header.site.scrolled{background:rgba(24,36,32,.96);box-shadow:0 1px 0 rgba(246,241,233,.08)}

/* footer star */
footer .brandmark{width:22px;height:22px;opacity:.5;margin-bottom:10px}

@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .tag,.hero .btn{animation:none;opacity:1;transform:none}
  .hero-star{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .roof path{stroke-dashoffset:0;transition:none}
  .house .rooms,.house .house-foot,.house > p{opacity:1;transition:none}
}
@media(max-width:820px){.hero{min-height:64vh}.hero-star{width:340px;height:340px;right:-120px}}

/* team constellation */
#team-graph{width:100%;position:relative}
#team-graph canvas{display:block}
#team-graph-fallback{display:none;width:100%;height:auto}
.graph-legend{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:12.5px;letter-spacing:.08em;color:var(--cream-dim)}
.graph-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px}
.graph-legend .hint{margin-left:auto;font-style:italic;letter-spacing:.02em}
@media(max-width:760px){.graph-legend{gap:14px}.graph-legend .hint{margin-left:0;width:100%;text-align:center}}

/* room hero banners — old-site imagery duotoned into the forest ground */
.room-hero{
  position:relative;padding:130px 0 64px;border-bottom:1px solid var(--hairline);
  background:
    linear-gradient(180deg, rgba(24,36,32,.42) 0%, rgba(31,44,38,.78) 55%, var(--forest) 96%),
    linear-gradient(rgba(199,123,67,.10), rgba(199,123,67,.10)),
    var(--hero) center/cover no-repeat;
}
.room-hero .sec-head{margin-bottom:0}
.room-hero .backlink{color:var(--cream-dim)}
.room-hero h2.display{text-shadow:0 1px 24px rgba(24,36,32,.55)}
.room-hero + section{border-top:none}
@media(max-width:820px){.room-hero{padding:96px 0 48px}}

/* what-we-do band on home */
.wedo-band{
  background:
    linear-gradient(180deg, rgba(31,44,38,.94), rgba(31,44,38,.965)),
    var(--hero) center/cover no-repeat;
}

/* contact band — night horizon, the star on the water echoing the compass */
.contact-band{
  background:
    linear-gradient(180deg, var(--forest) 0%, rgba(31,44,38,.82) 40%, rgba(31,44,38,.9)),
    var(--hero) center 70%/cover no-repeat;
}

/* ===== mobile polish pass ===== */
@media(max-width:480px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  section{padding:64px 0}
  .nav ul{gap:12px;font-size:12.5px}
  .brand .word{font-size:18px}
  .hero{min-height:58vh;padding:88px 0 72px}
  .hero h1.display{font-size:clamp(40px,12vw,56px)}
  .founder .portrait{width:160px;height:160px}
  .problem .num{font-size:34px}
  .room{padding:30px 22px 34px}
  .contact-rows{font-size:16px}
  .contact-rows .row{flex-direction:column;gap:4px}
  .contact-rows .lbl{width:auto}
  .lab-note{font-size:14px}
  footer .cols{flex-direction:column;gap:16px}
}
/* larger touch targets */
@media(pointer:coarse){
  .nav ul a{padding:10px 2px;display:inline-block}
  .btn{padding:15px 30px}
}

/* room icons — line-art marks in the compass-star family */
.room-icon{width:46px;height:46px;display:block}
.room .room-icon{margin-bottom:4px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.room:hover .room-icon{transform:translateY(-3px)}
.room-hero .room-icon{width:54px;height:54px;margin-bottom:14px}
@media(max-width:480px){.room-icon{width:40px;height:40px}}

/* what sets us apart — the human marks and the thread that holds them */
.apart-icon{width:46px;height:46px;margin-bottom:16px}
.apart-thread{
  height:1px;background:linear-gradient(90deg, transparent, var(--copper) 12%, var(--copper) 88%, transparent);
  opacity:.45;margin:6px 0 40px;transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s cubic-bezier(.4,0,.2,1) .2s;
}
section.in-view .apart-thread{transform:scaleX(1)}
.threeup.apart > div{position:relative;padding-top:6px}
@media (prefers-reduced-motion:reduce){.apart-thread{transform:none;transition:none}}
@media(max-width:820px){.apart-thread{display:none}}

/* what we do — staggered recognition + bridge into the house */
section.in-view .problem{opacity:1;transform:none}
.problem{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.problems .problem:nth-child(1){transition-delay:.05s}
.problems .problem:nth-child(2){transition-delay:.17s}
.problems .problem:nth-child(3){transition-delay:.29s}
.problems .problem:nth-child(4){transition-delay:.41s}
.problems-bridge{
  margin-top:52px;text-align:center;
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:18px;color:var(--cream-dim);
  opacity:0;transition:opacity .8s ease .7s;
}
section.in-view .problems-bridge{opacity:1}
@media (prefers-reduced-motion:reduce){
  .problem,.problems-bridge{opacity:1;transform:none;transition:none}
}

/* footer groups */
footer .links{align-items:baseline}
.fgroup{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);font-weight:600;margin-left:10px}
.fgroup:first-child{margin-left:0}
@media(max-width:760px){footer .links{row-gap:10px}.fgroup{width:100%;margin-left:0;margin-top:6px}}

/* problems: column-flow on desktop so DOM order 1,2,3,4 renders 1/2 left, 3/4 right — and stacks 1,2,3,4 on mobile */
.problems{grid-auto-flow:column;grid-template-rows:repeat(2,auto)}
@media(max-width:760px){.problems{grid-auto-flow:row;grid-template-rows:none}}
.problems-bridge a{color:var(--copper)}
.problems-bridge a:hover{text-decoration:underline}/* Product "Live" pill (footer + product showcase) — adapts to light/dark. */
.live{font-size:.64em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.85;white-space:nowrap}
.live::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:#39b26a;margin-right:.42em;vertical-align:.04em;box-shadow:0 0 0 3px rgba(57,178,106,.18)}