/* Breakwater site styles. Single stylesheet for all pages.
   Tokens mirror assets/tokens.css. Fonts: Newsreader, IBM Plex Sans, IBM Plex Mono (all OFL). */

:root{
  --ink:#15191A;
  --slate:#3C4448;
  --steel:#656E73;
  --fog:#D6DBDC;
  --haze:#EDF0F0;
  --white:#FFFFFF;
  --rust:#A93A0A;
  --rust-hover:#8E3008;
  --signal:#E85D0D;
  --ember:#FBE7DA;
  --display:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --max:1200px;
  --measure:680px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.narrow{max-width:860px;}

h1,h2{font-family:var(--display); font-weight:400; letter-spacing:-.015em; margin:0;}
h1{font-size:clamp(36px,6.2vw,60px); line-height:1.02;}
h2{font-size:clamp(26px,3.4vw,34px); line-height:1.18;}
h3{font-family:var(--sans); font-size:18px; font-weight:500; line-height:1.4; margin:0 0 10px;}
p{margin:0 0 18px; max-width:var(--measure);}
a{color:var(--rust);}
strong{font-weight:600;}

.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; color:var(--steel);
  margin:0 0 20px;
}
.lede{font-size:19px; line-height:1.6; color:var(--slate); max-width:var(--measure);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-size:16px; font-weight:500;
  background:var(--rust); color:var(--white); text-decoration:none;
  padding:13px 26px; border-radius:4px; border:1px solid var(--rust);
  transition:background .15s ease;
}
.btn:hover{background:var(--rust-hover); border-color:var(--rust-hover);}
.btn-outline{
  display:inline-block; font-family:var(--sans); font-size:16px; font-weight:500;
  background:transparent; color:var(--ink); text-decoration:none;
  padding:13px 26px; border-radius:4px; border:1px solid var(--fog);
}
.btn-outline:hover{border-color:var(--ink);}
.btn-quiet{
  display:inline-block; font-size:16px; color:var(--ink); text-decoration:none;
  padding:13px 4px; border-bottom:1px solid var(--fog);
}
.btn-quiet:hover{border-bottom-color:var(--ink);}
a:focus-visible,.btn:focus-visible,.btn-outline:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--rust); outline-offset:3px;
}
.actions{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:12px;}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--fog);}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);}
.brand svg{width:22px; height:22px; display:block;}
.brand span{font-family:var(--display); font-size:23px; letter-spacing:-.015em;}
.nav{display:flex; align-items:center; gap:28px;}
.nav a{font-size:15px; color:var(--slate); text-decoration:none;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);}
.nav a.nav-cta{color:var(--ink); border-bottom:1px solid var(--fog); padding-bottom:2px;}

/* ---------- sections ---------- */
.sec{padding:88px 0;}
.sec-tight{padding:64px 0;}
.sec-alt{background:var(--haze); border-top:1px solid var(--fog); border-bottom:1px solid var(--fog);}
.sec p{color:var(--slate); font-size:17px;}
.sec h2{margin-bottom:26px; max-width:15em;}
.sec h2 + .lede{margin-top:-8px;}

.page-head{padding:76px 0 8px;}
.page-head h1{max-width:14em;}
.page-head .lede{margin-top:24px;}

/* ---------- hero (homepage) ---------- */
.hero{padding:88px 0 76px;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:72px; align-items:start;}
.hero-sub{
  margin-top:22px; margin-bottom:30px;
  font-family:var(--display); font-size:clamp(21px,2.5vw,27px); line-height:1.3;
  color:var(--slate); max-width:16em;
}
.hero p{color:var(--slate); font-size:17px;}

/* ---------- week grid (homepage signature) ---------- */
.week{border:1px solid var(--fog); padding:26px 26px 22px; background:var(--white);}
.week-label{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin:0 0 18px;}
.week-days{display:grid; grid-template-columns:repeat(5,1fr); gap:9px;}
.day{display:flex; flex-direction:column; gap:5px;}
.day-name{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin-bottom:3px;}
.blk{height:17px; border-radius:2px;}
.blk-core{background:var(--ink);}
.blk-drop{background:transparent; border:1px solid var(--fog);}
.week-key{display:flex; flex-direction:column; gap:7px; margin-top:20px; padding-top:16px; border-top:1px solid var(--fog);}
.key{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--slate);}
.key i{width:13px; height:13px; border-radius:2px; flex:none; display:block;}
.key .k-core{background:var(--ink);}
.key .k-drop{border:1px solid var(--fog);}
.week-note{font-size:12px; color:var(--steel); margin:14px 0 0; line-height:1.5; max-width:none;}

/* ---------- proof band ---------- */
.proof{background:var(--haze); border-top:1px solid var(--fog); border-bottom:1px solid var(--fog); padding:52px 0;}
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:36px;}
.stat b{display:block; font-family:var(--mono); font-weight:400; font-size:clamp(26px,3.2vw,36px); line-height:1.1; color:var(--ink);}
.stat span{display:block; font-size:14px; color:var(--slate); margin-top:9px; line-height:1.45;}
.proof-press{font-size:13px; color:var(--steel); margin:34px 0 0; max-width:none;}

/* ---------- doors ---------- */
.doors{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;}
.door{background:var(--white); border:1px solid var(--fog); padding:34px 32px 32px; display:flex; flex-direction:column;}
.door-lead{border-color:var(--steel);}
.door .eyebrow{margin-bottom:16px;}
.door h3{font-family:var(--display); font-weight:400; font-size:25px; line-height:1.2; letter-spacing:-.01em; margin-bottom:14px;}
.door p{font-size:15.5px; color:var(--slate); margin-bottom:26px; flex:1;}
.door-foot{margin-top:auto;}

/* ---------- ladder ---------- */
.ladder{margin-top:44px; border-top:1px solid var(--fog);}
.rung{display:grid; grid-template-columns:64px 1fr 200px; gap:32px; padding:30px 0; border-bottom:1px solid var(--fog); align-items:start;}
.rung-num{font-family:var(--mono); font-size:13px; color:var(--steel); padding-top:4px;}
.rung h3{margin-bottom:8px; font-size:19px;}
.rung p{font-size:15.5px; color:var(--slate); margin:0;}
.rung-q{font-size:14px; color:var(--steel); margin:0 0 10px; font-style:italic;}
.rung-price{font-family:var(--mono); font-size:14px; color:var(--ink); padding-top:5px;}
.rung-price em{display:block; font-style:normal; font-family:var(--sans); font-size:13px; color:var(--steel); margin-top:5px;}

/* ---------- tiers ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px;}
.tier{background:var(--haze); border:1px solid var(--fog); padding:30px 26px; display:flex; flex-direction:column;}
.tier-lead{background:var(--white); border:1px solid var(--steel);}
.tier h3{font-family:var(--display); font-weight:400; font-size:23px; letter-spacing:-.01em; margin-bottom:6px;}
.tier-price{font-family:var(--mono); font-size:26px; margin:0 0 16px; color:var(--ink);}
.tier p{font-size:15px; color:var(--slate); flex:1;}
.tier .eyebrow{margin-bottom:12px; color:var(--rust);}
.tier-foot{margin-top:22px;}

/* ---------- lists ---------- */
.marks{list-style:none; padding:0; margin:0 0 22px; max-width:var(--measure);}
.marks li{position:relative; padding-left:26px; margin-bottom:11px; font-size:16px; color:var(--slate);}
.marks li::before{
  content:""; position:absolute; left:0; top:10px;
  width:10px; height:1px; background:var(--steel);
}
.marks li strong{color:var(--ink);}

/* ---------- callout ---------- */
.callout{background:var(--ember); padding:28px 30px; margin:36px 0; max-width:var(--measure);}
.callout p{margin:0; color:var(--ink); font-size:16px;}
.callout p + p{margin-top:14px;}

/* ---------- two column prose ---------- */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.pair p{font-size:16px;}

/* ---------- photo placeholder ---------- */
.photo{
  background:var(--haze); border:1px solid var(--fog); aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
}
img.photo{display:block; width:100%; height:auto; padding:0; object-fit:cover;}
.photo span{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); line-height:1.7;}
.founders{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;}

/* ---------- bios ---------- */
.bios{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:40px;}
.bio h3{font-family:var(--display); font-weight:400; font-size:24px; letter-spacing:-.01em; margin-bottom:4px;}
.bio .role{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); margin:0 0 16px;}
.bio p{font-size:16px; color:var(--slate);}

/* ---------- form ---------- */
.form{max-width:560px; margin-top:36px;}
.field{margin-bottom:22px;}
.field label{display:block; font-size:14px; font-weight:500; margin-bottom:7px; color:var(--ink);}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--fog); border-radius:4px; background:var(--white);
}
.field textarea{min-height:130px; resize:vertical;}
.field-note{font-size:13px; color:var(--steel); margin:7px 0 0;}

/* ---------- closing ---------- */
.closing{background:var(--ink); color:var(--haze); padding:96px 0;}
.closing h2{color:var(--white); margin-bottom:24px;}
.closing p{color:#B4BBBD; font-size:17px;}
.closing .btn{background:var(--signal); border-color:var(--signal); color:var(--ink); margin-top:14px;}
.closing .btn:hover{background:#F4762B; border-color:#F4762B;}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--fog); padding:44px 0; font-size:14px; color:var(--steel);}
.foot-inner{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.foot-inner a{color:var(--slate); text-decoration:none; margin-right:22px;}
.foot-inner a:hover{color:var(--ink);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .wrap{padding:0 22px;}
  .hero{padding:56px 0 48px;}
  .hero-grid,.founders,.pair,.bios{grid-template-columns:1fr; gap:44px;}
  .proof-grid{grid-template-columns:1fr 1fr; gap:30px;}
  .doors,.tiers{grid-template-columns:1fr;}
  .sec{padding:64px 0;}
  .page-head{padding:52px 0 4px;}
  .closing{padding:72px 0;}
  .rung{grid-template-columns:44px 1fr; gap:18px; row-gap:14px;}
  .rung-price{grid-column:2; padding-top:0;}
  .head-inner{flex-wrap:wrap; row-gap:14px;}
  .nav{flex-wrap:wrap; gap:18px;}
  .nav a{font-size:14px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}