/* Clearview Developments
   Built on the Clearview Development design tokens.
   Navy and azure carried from the Advisory heritage; horizon amber is the
   Developments signature accent. */

:root{
  --navy-950:#04091F; --navy-900:#081325; --navy-800:#0E1E33; --navy-700:#16293F;
  --blue-700:#02607F; --blue-600:#03729A; --blue-500:#0381AD; --blue-100:#D3EBF4; --blue-50:#EEF8FB;
  --amber-600:#C97E2B; --amber-500:#E49A41; --amber-100:#FDF1E0;
  --grey-900:#161C25; --grey-800:#232B36; --grey-700:#3A4451; --grey-600:#545E6C;
  --grey-500:#717B89; --grey-300:#BAC2CC; --grey-200:#D8DDE4; --grey-150:#E5E9EE;
  --grey-100:#EEF1F5; --grey-50:#F6F8FA; --white:#fff;

  --ink:var(--navy-950); --body:var(--grey-800); --muted:var(--grey-600);
  --rule:var(--grey-200); --rule-strong:var(--grey-300);

  --display:'Space Grotesk',Segoe UI,system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wide:1240px; --measure:68ch; --gut:24px;
  --h:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--body);
  font-size:17px; line-height:1.62; background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue-600); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid rgba(3,129,173,.45); outline-offset:2px; border-radius:2px}

h1,h2,h3,h4{font-family:var(--display); color:var(--ink); font-weight:700; letter-spacing:-.018em; margin:0}
h1{font-size:clamp(2.2rem,4.4vw,3.5rem); line-height:1.06}
h2{font-size:clamp(1.6rem,2.7vw,2.3rem); line-height:1.14}
h2 + p, h2 + .lead, h3 + p, h1 + p{margin-top:.85rem}
.sec h2 + p, .sec h2 + .lead{margin-top:1rem}
h3{font-size:1.2rem; line-height:1.3; letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lead{font-size:1.19rem; line-height:1.55; color:var(--grey-700)}
.measure{max-width:var(--measure)}

.eyebrow{
  font-family:var(--mono); font-size:.705rem; letter-spacing:.155em;
  text-transform:uppercase; color:var(--blue-600); margin:0 0 .85rem
}
.eyebrow--rev{color:var(--amber-500)}

.wrap{max-width:var(--wide); margin:0 auto; padding:0 var(--gut)}
.sec{padding:72px 0}
.sec--tight{padding:48px 0}
.sec--wide{padding:104px 0}
.sec--grey{background:var(--grey-50); border-block:1px solid var(--rule)}
.sec--navy{background:var(--navy-900); color:rgba(255,255,255,.80)}
.sec--navy h2,.sec--navy h3{color:#fff}
.rule{border:0; border-top:1px solid var(--rule); margin:0}

/* header */
.hdr{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--rule)}
.hdr__in{display:flex; align-items:center; gap:28px; height:var(--h); max-width:var(--wide); margin:0 auto; padding:0 var(--gut)}
.hdr__logo img{height:42px; width:auto; display:block}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a{font-size:.925rem; color:var(--grey-700); text-decoration:none; white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--amber-500)}
.btn{display:inline-block; font-family:var(--sans); font-size:.925rem; font-weight:600;
  padding:.62em 1.25em; border:1px solid transparent; cursor:pointer; text-decoration:none!important}
.btn--p{background:var(--navy-900); color:#fff}
.btn--p:hover{background:var(--navy-700)}
.btn--a{background:var(--amber-500); color:var(--navy-950)}
.btn--a:hover{background:var(--amber-600); color:#fff}
.btn--g{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn--g:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn--o{background:transparent; color:var(--ink); border-color:var(--rule-strong)}
.btn--o:hover{border-color:var(--ink)}
.navtoggle{display:none; margin-left:auto; background:none; border:1px solid var(--rule-strong); padding:.45em .7em; font-family:var(--sans); font-size:.9rem}

/* hero */
.hero{position:relative; min-height:min(80vh,700px); display:flex; align-items:flex-end;
  background:var(--navy-950); overflow:hidden}
.hero--short{min-height:min(62vh,520px)}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero__scrim{position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(4,9,31,.92) 0%,rgba(4,9,31,.82) 34%,rgba(4,9,31,.36) 62%,rgba(4,9,31,.14) 100%)}
.hero__in{position:relative; padding:72px 0 58px; width:100%}
.hero h1{color:#fff; max-width:25ch}
.hero .lead{color:rgba(255,255,255,.88); max-width:56ch; margin-top:1.05rem}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:1.7rem}

/* generic layout helpers */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
.two--w{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.rows > *{padding:26px 0; border-top:1px solid var(--rule)}
.rows > *:last-child{border-bottom:1px solid var(--rule)}
.list{margin:0; padding:0; list-style:none}
.list li{position:relative; padding:0 0 .55em 1.1em}
.list li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:1px; background:var(--amber-500)}
.num{counter-reset:s; margin:0; padding:0; list-style:none}
.num li{counter-increment:s; position:relative; padding:0 0 1.15em 2.4em}
.num li::before{content:counter(s); position:absolute; left:0; top:.06em; font-family:var(--mono);
  font-size:.82rem; color:var(--blue-600); border-bottom:1px solid var(--amber-500); padding-bottom:1px}

table{border-collapse:collapse; width:100%; font-size:.965rem}
th,td{text-align:left; padding:.72em .9em .72em 0; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-family:var(--sans); font-weight:600; color:var(--ink); font-size:.86rem; letter-spacing:.01em}
td:first-child{padding-right:1.6em}

/* project cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:34px}
.card__img{aspect-ratio:3/2; object-fit:cover; width:100%}
.card h3{margin:.95rem 0 .55rem}
.meta{margin:0 0 .8rem; font-size:.855rem; font-family:var(--mono); color:var(--muted)}
.meta div{padding:.24em 0; border-bottom:1px solid var(--grey-150); display:flex; gap:.9em}
.meta dt{min-width:5.6em; color:var(--grey-500)}
.meta dd{margin:0; color:var(--grey-800)}
.tag{display:inline-block; font-family:var(--mono); font-size:.69rem; letter-spacing:.11em;
  text-transform:uppercase; padding:.34em .65em; background:var(--blue-50); color:var(--blue-700)}
.tag--amber{background:var(--amber-100); color:var(--amber-600)}

/* people */
.people{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px}
.person img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--navy-800)}
.roster{display:grid; gap:0; max-width:980px}
.tbl{border-collapse:collapse; width:100%; min-width:840px; font-size:.92rem}
.tbl th,.tbl td{text-align:left; vertical-align:top; padding:14px 22px 14px 0; border-bottom:1px solid var(--rule)}
.tbl thead th{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--azure-600,#0381AD); font-weight:500; border-bottom:1.5px solid var(--ink); padding-bottom:10px}
.tbl tbody th{font-weight:600; color:var(--ink); width:22%}
.tbl td{color:var(--grey-700,#3C4654)}
.figwrap{overflow-x:auto; margin:0 0 .4rem; -webkit-overflow-scrolling:touch}
.fig{display:block; width:100%; height:auto; min-width:880px}
.band{display:block; width:100%; line-height:0}
.band img{width:100%; height:clamp(220px,26vw,340px); object-fit:cover; object-position:50% 58%}
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:0 46px; margin-top:2.2rem}
.cap{padding:22px 0 24px; border-top:1px solid var(--rule)}
.cap h3{font-size:1.02rem; line-height:1.25; margin:0 0 .5rem}
.cap p{font-size:.93rem; color:var(--muted); margin:0}
.faq{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(390px,100%),1fr)); gap:36px 64px; margin-top:2rem; max-width:1000px}
.faq h3{font-size:1.06rem; margin:0 0 .5rem}
.faq p{margin:0}
.rost{display:grid; grid-template-columns:230px minmax(0,1fr); gap:44px; padding:34px 0;
  border-top:1px solid var(--rule)}
.rost:last-child{border-bottom:1px solid var(--rule)}
.rost__p img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--navy-800); display:block}
.rost__b h3{margin:0 0 .15rem; font-size:1.22rem}
.rost__b .role{font-size:.9rem; color:var(--muted); margin:0 0 1rem}
.rost__b p{max-width:62ch}
.rost__b p + p{margin-top:.8rem}
.rost__b > p:first-of-type + p{font-weight:600; color:var(--ink)}
.person h3{margin:.9rem 0 .18rem}
.person .role{font-size:.885rem; color:var(--muted); margin:0 0 .7rem}
.person p{font-size:.94rem; margin-bottom:.7em}
.creds{margin:0; padding:0; list-style:none; font-size:.875rem; color:var(--grey-700)}
.creds li{padding:.34em 0; border-top:1px solid var(--grey-150)}
.creds .at{color:var(--muted)}

/* doors */
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:0}
.door{padding:30px 28px 30px 0; border-top:2px solid var(--ink)}
.door + .door{padding-left:28px; border-left:1px solid var(--rule)}
.door h3{margin-bottom:.55rem; font-size:1.32rem}
.door .eyebrow{margin-bottom:.6rem}
.door p{font-size:.955rem}
.door__go{margin-top:1rem; font-size:.9rem}
.door__go a{font-weight:600}

/* stages */
.stages{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:8px}
.stage{padding:22px 22px 22px 0; border-top:2px solid var(--amber-500); position:relative}
.stage + .stage{padding-left:22px; border-left:1px solid var(--rule)}
.stage .n{font-family:var(--mono); font-size:.72rem; color:var(--blue-600); letter-spacing:.12em}
.stage h3{margin:.4rem 0 .5rem; font-size:1.06rem}
.stage p{font-size:.925rem; color:var(--grey-700); margin:0}

/* map */
.map{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:52px; align-items:center}
.map svg{width:100%; height:auto}

/* forms */
form{max-width:640px}
.f{margin:0 0 1.05rem}
.f label{display:block; font-size:.875rem; font-weight:600; color:var(--ink); margin-bottom:.34rem}
.f input,.f select,.f textarea{
  width:100%; font:inherit; font-size:.97rem; padding:.66em .78em;
  border:1px solid var(--rule-strong); background:#fff; color:var(--body); border-radius:0}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue-500); outline:none;
  box-shadow:0 0 0 3px rgba(3,129,173,.16)}
.f textarea{min-height:120px; resize:vertical}
.f .hint{font-size:.83rem; color:var(--muted); margin:.3rem 0 0}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}

/* footer */
.ftr{background:var(--navy-950); color:rgba(255,255,255,.62); padding:56px 0 34px; font-size:.915rem}
.ftr a{color:rgba(255,255,255,.82)}
.ftr a:hover{color:#fff}
.ftr__top{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:40px; padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.ftr img{height:36px; width:auto; margin-bottom:16px}
.ftr h2{font-family:var(--sans); font-size:.79rem; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.52); font-weight:600; margin:0 0 .85rem}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{padding:.2em 0}
.ftr__note{padding-top:22px; font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.42); max-width:62ch}
.ftr__btm{padding-top:14px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:.83rem; color:rgba(255,255,255,.45)}

@media (max-width:980px){
  .two,.two--w,.map{grid-template-columns:1fr; gap:34px}
  .stages{grid-template-columns:1fr 1fr}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .nav{display:none}
  .nav.open{display:flex; position:absolute; top:var(--h); left:0; right:0; flex-direction:column;
    align-items:flex-start; gap:0; background:#fff; border-bottom:1px solid var(--rule); padding:8px var(--gut) 18px}
  .nav.open a{padding:.72em 0; width:100%; border-bottom:1px solid var(--grey-150)}
  .nav.open .btn{margin-top:14px; width:100%; text-align:center; border-bottom:0}
  .navtoggle{display:block}
  .sec,.sec--wide{padding:52px 0}
  .stages{grid-template-columns:1fr}
  .stage,.stage + .stage{padding:20px 0; border-left:0; border-top:2px solid var(--amber-500)}
  .door,.door + .door{padding:24px 0; border-left:0}
  .fgrid{grid-template-columns:1fr}
  .rost{grid-template-columns:1fr; gap:22px; padding:28px 0}
  .rost__p{max-width:210px}
  .hero__scrim{background:linear-gradient(180deg,rgba(4,9,31,.46) 0%,rgba(4,9,31,.66) 52%,rgba(4,9,31,.84) 100%)}
  .hero h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
@media print{.hdr,.ftr,.hero__scrim{position:static}}