/* Layout: light pages, left-aligned, generous white space, thin nav, one cyan accent rule. Views switch on the URL hash. What we do: six large selector boxes, the chosen outcome opens in a panel below. */
:root{
  --bg:#fbfcfd; --surface:#f3f6f9; --fg:#374151; --head:#0f2446; --muted:#4b5563;
  --line:#e3e8ef; --accent:#1da1dc; --accent-txt:#0f6f9c; --btn-bg:#0f2446; --btn-fg:#ffffff; --green:#12a06c; --green-txt:#0b7a52; --orange:#ee6f1f;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1522; --surface:#152033; --fg:#c9d5e6; --head:#f2f6fb; --muted:#8a9bb5;
    --line:#223149; --accent:#27b3ea; --accent-txt:#27b3ea; --btn-bg:#27b3ea; --btn-fg:#0c1a33; --green:#2fd08f; --green-txt:#2fd08f; --orange:#ff8a3d;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1522; --surface:#152033; --fg:#c9d5e6; --head:#f2f6fb; --muted:#8a9bb5;
  --line:#223149; --accent:#27b3ea; --accent-txt:#27b3ea; --btn-bg:#27b3ea; --btn-fg:#0c1a33; --green:#2fd08f; --green-txt:#2fd08f; --orange:#ff8a3d;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--fg);
  background:radial-gradient(60vw 40vw at 88% 6%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(40vw 30vw at 72% 88%, color-mix(in srgb, var(--orange) 9%, transparent), transparent 70%), var(--bg);
  font-family:var(--font-ui); font-size:18px; line-height:1.6;
  padding-block:0;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column}
header.top{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:28px 0 20px; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:28px; letter-spacing:-.025em; color:var(--head); text-decoration:none}
.brand sup{font-size:.4em; font-weight:700; color:var(--accent-txt); margin-left:2px; vertical-align:super}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:28px; flex-wrap:wrap}
nav a{
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; letter-spacing:.02em;
  padding:6px 0; border-bottom:2px solid transparent;
}
nav a:hover{color:var(--head)}
nav a:focus-visible,.cta:focus-visible,.brand:focus-visible,.pick:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
nav a[aria-current="page"]{color:var(--head); border-bottom-color:var(--accent)}

main{flex:1; padding:clamp(48px,9vw,112px) 0 clamp(40px,7vw,80px)}
main.inner{padding-top:clamp(40px,7vw,80px)}
.eyebrow .bar{color:var(--muted); margin:0 .6em}
@media (max-width:640px){.eyebrow .bar{display:block; font-size:0; line-height:0; margin:0; height:0}}
.eyebrow{font-size:clamp(17px,2vw,22px); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-txt); margin:0 0 24px; line-height:1.3; text-wrap:balance}
h1{
  font-size:clamp(40px,7.2vw,76px); line-height:1.04; letter-spacing:-.03em; font-weight:800;
  color:var(--head); margin:0 0 24px; max-width:14ch; text-wrap:balance;
}
h1.page{font-size:clamp(32px,5.4vw,58px); line-height:1.08; max-width:20ch}
h1 .g,h2 .g{color:var(--green)}
.g{color:var(--green-txt)}
h1 .g,h2 .g{color:var(--green)}
h1 .o{color:var(--orange)}
.rule{width:56px; height:3px; background:var(--accent); margin:0 0 28px}
.sub{font-size:clamp(20px,2.4vw,26px); line-height:1.4; font-weight:500; color:var(--head); max-width:38ch; margin:0 0 clamp(36px,5vw,56px); text-wrap:balance}
.copy{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start}
.copy p{margin:0; max-width:56ch}
.copy .team{
  border:1px solid var(--line); border-top:2px solid var(--accent); padding:22px 24px; color:var(--head); font-weight:500;
  background:linear-gradient(color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg) 70%);
}
.cta-row{margin-top:clamp(36px,5vw,56px)}
.cta{
  display:inline-block; background:var(--btn-bg); color:var(--btn-fg); text-decoration:none;
  font-weight:600; font-size:16px; letter-spacing:.02em; padding:15px 28px; border-radius:2px;
  transition:opacity .15s ease;
}
.cta:hover{opacity:.88}

/* What we do: selector boxes and the opened panel */
.picks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 16px}
.pick{
  display:flex; flex-direction:column; gap:8px; text-align:left; cursor:pointer; margin:0;
  font:inherit; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-top:3px solid var(--line); padding:22px 52px 24px 24px; position:relative;
  transition:border-color .15s ease, background .15s ease;
}
.pick::after{
  content:""; position:absolute; top:24px; right:22px; width:16px; height:16px;
  background:linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat, linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat;
}
.pick[aria-selected="true"]::after{background:linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat}
.nudge{font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-txt); margin:0 0 14px}
.sub.tight{margin-bottom:clamp(24px,3.5vw,36px)}
.pick .t{font-size:clamp(21px,2.4vw,26px); font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--head)}
.pick .d{font-size:16px; line-height:1.45}
.pick:hover{border-top-color:var(--accent)}
.pick[aria-selected="true"]{
  border-color:var(--accent); border-top-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.pick[aria-selected="true"] .t{color:var(--accent-txt)}
.panel{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,64px);
  padding:clamp(28px,4.5vw,52px); border:1px solid var(--line); border-top:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 4%, var(--bg));
}
.label{font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-txt); margin:0 0 14px}
.o-head h2{
  font-size:clamp(26px,3.2vw,36px); line-height:1.15; letter-spacing:-.02em; font-weight:800;
  color:var(--head); margin:0 0 20px; text-wrap:balance;
}
.panel .g{color:var(--green)}
.panel .o{color:var(--orange)}
.rw{background:var(--surface); padding:10px 14px; font-size:14px; line-height:1.5; border-left:2px solid var(--accent)}
.rw b{display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-txt); margin-bottom:2px}
.o-body .lead{font-size:20px; line-height:1.45; font-weight:500; color:var(--head); margin:0 0 24px; max-width:46ch}
.o-body p.sit{margin:0 0 26px; max-width:52ch}
ol.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
ol.steps li{counter-increment:s; position:relative; padding-left:44px; max-width:52ch}
ol.steps li:before{
  content:counter(s); position:absolute; left:0; top:2px; width:28px; height:28px; border-radius:50%;
  background:var(--btn-bg); color:var(--btn-fg); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;
}
ol.steps b{color:var(--head); font-weight:700}
.principle{display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; margin-top:clamp(28px,4vw,44px); padding:18px 24px; border:1px solid var(--line); border-left:4px solid var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg))}
.principle .label{margin:0; min-width:110px}
.principle p{margin:0; flex:1 1 320px; color:var(--head); font-weight:600}
.principle .g{color:var(--green-txt)}

/* Insights */
.papers{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.paper{display:flex; flex-direction:column; border:1px solid var(--line); border-top:3px solid var(--accent); background:var(--bg)}
.paper .cover{display:block; background:#0c1830; line-height:0}
.paper .cover img{display:block; width:100%; height:auto}
.paper .pbody{display:flex; flex-direction:column; gap:10px; flex:1; padding:20px 22px 24px}
.paper .tag{margin:0; font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-txt)}
.paper h3{margin:0; font-size:clamp(20px,2.1vw,23px); line-height:1.2; letter-spacing:-.02em; font-weight:800; color:var(--head)}
.paper .hook{margin:0; font-size:16px; line-height:1.5}
.paper .read{margin-top:auto; padding-top:8px; font-size:16px; font-weight:700; color:var(--accent-txt); text-decoration:none}
.paper .read:hover{color:var(--head)}
.paper .discuss{margin:0; font-size:14px; color:var(--muted)}
.paper .discuss a{color:var(--accent-txt); font-weight:600}
.paper .discuss a:hover{color:var(--head)}
.paper .read:focus-visible,.paper .cover:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (max-width:620px){.papers{grid-template-columns:minmax(0,1fr)}}

/* About */
.person{display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
.photo{margin:0}
.photo img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%; border-radius:6px; border-top:3px solid var(--accent); background:#000}
.photo figcaption{margin-top:12px; font-size:14px; line-height:1.4; color:var(--muted)}
.photo figcaption b{display:block; font-size:16px; color:var(--head); font-weight:700}
.bio{font-size:clamp(18px,2vw,21px); line-height:1.5; font-weight:500; color:var(--head); margin:0; max-width:48ch}
.sect{margin-top:clamp(44px,6.5vw,80px)}
.sect h2{font-size:clamp(32px,4.4vw,48px); line-height:1.08; letter-spacing:-.03em; font-weight:800; color:var(--head); margin:0 0 10px; text-wrap:balance}
.lede{font-size:clamp(19px,2.2vw,24px); line-height:1.35; font-weight:500; color:var(--head); margin:0 0 26px; max-width:40ch; text-wrap:balance}
.lede .g{color:var(--green)}
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 18px}
.tile-card{border:1px solid var(--line); border-top:2px solid var(--accent); padding:20px 20px 22px; background:var(--bg)}
.tile-card .t{display:block; font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.25; color:var(--head); margin-bottom:8px}
.tile-card .d{display:block; font-size:16px; line-height:1.5}
.note{margin:0; max-width:64ch; color:var(--muted); font-size:16px}
ol.how{list-style:none; counter-reset:h; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
ol.how li{counter-increment:h; position:relative; padding-left:44px}
ol.how li:before{content:counter(h); position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:50%; background:var(--btn-bg); color:var(--btn-fg); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center}
ol.how b{display:block; color:var(--head); font-weight:700; margin-bottom:4px}
.terms{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:960px){.terms{grid-template-columns:minmax(0,1fr)}}
.term{display:flex; flex-direction:column}
.term .rw{margin-top:auto}
.flow{margin:0 0 26px; max-width:60ch; font-size:18px; line-height:1.5; color:var(--fg)}
.term{border:1px solid var(--line); border-top:3px solid var(--accent); padding:clamp(22px,3vw,32px); background:color-mix(in srgb, var(--accent) 4%, var(--bg))}
.term h3{font-size:clamp(20px,2.2vw,24px); line-height:1.2; letter-spacing:-.02em; font-weight:800; color:var(--head); margin:0 0 10px}
.term p{margin:0 0 18px; max-width:46ch}
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  ol.how{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .person,.terms{grid-template-columns:minmax(0,1fr)}
  .photo{max-width:240px}
}
@media (max-width:480px){
  .tiles{grid-template-columns:minmax(0,1fr)}
}

/* Contact */
.reach{border:1px solid var(--line); border-top:3px solid var(--accent); padding:clamp(24px,4vw,44px); background:color-mix(in srgb, var(--accent) 4%, var(--bg)); max-width:720px}
.reach .label{margin-bottom:10px}
.reach a.mail{display:inline-block; font-size:clamp(15px,4.2vw,36px); font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--accent-txt); text-decoration:none; border-bottom:2px solid var(--accent); overflow-wrap:anywhere}
.reach a.mail:hover{color:var(--head)}
.reach a.mail:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.reach .who{margin:20px 0 0; font-size:16px; color:var(--muted)}
.reach .who b{display:block; font-size:16px; color:var(--head); font-weight:700}

footer{
  display:flex; justify-content:space-between; gap:12px 32px; flex-wrap:wrap;
  padding:20px 0 28px; border-top:1px solid var(--line); font-size:13px; color:var(--muted);
}
.legal{flex:0 0 100%; margin:4px 0 0; font-size:12px; line-height:1.5; color:var(--muted)}
@media (max-width:900px){
  .picks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .copy,.panel{grid-template-columns:minmax(0,1fr)}
  nav ul{gap:20px}
  header.top{padding-top:20px}
}
@media (max-width:480px){
  .picks{gap:10px}
  .pick{padding:16px 36px 18px 16px}
  .pick::after{top:18px; right:14px; width:14px; height:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta,.pick{transition:none}}

/* Site additions */
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:16px; top:16px; z-index:100; background:var(--bg); color:var(--head); padding:8px 12px; border:2px solid var(--accent)}
.reach .who a{color:var(--accent-txt); font-weight:600}
.reach .who a:hover{color:var(--head)}
.reach .who+.who{margin-top:8px}

/* Home */
.intro{max-width:62ch; margin:0 0 clamp(24px,3.5vw,36px); font-size:18px; line-height:1.6}
.outcomes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.outcome{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-top:2px solid var(--accent); padding:18px 20px 20px; transition:border-color .15s ease, background .15s ease}
.outcome .t{font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.25; color:var(--head)}
.outcome .d{font-size:16px; line-height:1.45}
.outcome:hover{background:color-mix(in srgb, var(--accent) 7%, var(--bg)); border-color:var(--accent)}
.outcome:hover .t{color:var(--accent-txt)}
.outcome:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.person.sm{grid-template-columns:minmax(0,200px) minmax(0,1fr); align-items:start}
.person.sm .bio{font-size:clamp(18px,2vw,21px); font-weight:500; color:var(--head); max-width:52ch}
.person.sm .bio+.bio{margin-top:14px}
.textlinks{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:18px}
.textlinks a{font-weight:700; font-size:16px; color:var(--accent-txt); text-decoration:none}
.textlinks a:hover{color:var(--head)}
.textlinks a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (max-width:900px){.outcomes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.person.sm{grid-template-columns:minmax(0,1fr)} .person.sm .photo{max-width:200px}}
@media (max-width:520px){.outcomes{grid-template-columns:minmax(0,1fr)}}

.motto{font-size:clamp(20px,2.4vw,26px); line-height:1.4; font-weight:700; color:var(--head); max-width:42ch; margin:clamp(36px,5vw,56px) 0 0; text-wrap:balance}
.motto + .cta-row{margin-top:clamp(20px,3vw,28px)}
.motto .g{color:var(--green)}

.statement{margin-top:clamp(40px,6vw,72px); padding:clamp(28px,4vw,48px) clamp(24px,4vw,56px); background:#0f2446; border:1px solid var(--line); border-left:4px solid var(--accent); color:#fff}
.statement .label{margin:0 0 14px; color:#7fd3f5; font-size:clamp(16px,1.8vw,20px)}
.statement .line{margin:0; max-width:30ch; font-size:clamp(28px,4.4vw,48px); line-height:1.15; font-weight:800; letter-spacing:-.02em; color:#fff; text-wrap:balance}
.statement .g{color:#2fd08f; white-space:nowrap}
.statement .honest{margin:clamp(16px,2vw,24px) 0 0; max-width:46ch; font-size:clamp(17px,1.6vw,20px); line-height:1.45; font-weight:500; color:#d6e2f2; text-wrap:balance}
/* paper share pages */
.papers.single{grid-template-columns:minmax(0,1fr); max-width:680px}
.paper .ptitle{margin:0; font-size:clamp(24px,3vw,32px); line-height:1.15; letter-spacing:-.02em; font-weight:800; color:var(--head)}
.paper .pbody .cta{align-self:flex-start; margin-top:8px}
.more{margin-top:28px; font-size:16px}
.more a{color:var(--accent-txt); font-weight:600; text-decoration:none}
.eyebrow a{color:inherit; text-decoration:none}
/* home: is this a good fit */
.fit{margin-top:clamp(28px,4vw,48px)}
.fit-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.fit-col{
  border:1px solid var(--line); border-top:3px solid var(--accent);
  padding:clamp(20px,3vw,28px); background:color-mix(in srgb, var(--accent) 4%, var(--bg));
}
.fit-col h2{
  font-size:clamp(20px,2.2vw,24px); line-height:1.2; letter-spacing:-.02em; font-weight:800;
  color:var(--head); margin:0 0 14px;
}
.fit-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.fit-col li{position:relative; padding-left:16px; max-width:46ch; font-size:17px; line-height:1.45}
.fit-col li::before{
  content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.fit-col .offers li{padding-left:0}
.fit-col .offers li::before{content:none}
.fit-col b{color:var(--head); font-weight:700}
@media (max-width:900px){.fit-grid{grid-template-columns:minmax(0,1fr)}}

/* home: where we are and how the team flexes */
.based{max-width:62ch; margin:calc(-1 * clamp(8px,1.5vw,16px)) 0 clamp(24px,3.5vw,36px); padding:2px 0 2px 16px; border:0; border-left:3px solid var(--accent); font-size:18px; line-height:1.6; font-weight:500; color:var(--head)}
/* contact: book a call + email side by side */
.contact-opts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:960px}
.contact-opts .reach{max-width:none}
.reach.book{display:flex; flex-direction:column; gap:14px}
.reach.book .label{margin-bottom:0}
.reach.book .bk{margin:0; font-size:17px; line-height:1.5; color:var(--fg)}
.reach.book .cta{align-self:flex-start; margin-top:auto}
@media (max-width:760px){.contact-opts{grid-template-columns:minmax(0,1fr)}}
.contact-opts:has(> .reach:only-child){grid-template-columns:minmax(0,1fr); max-width:720px}
.contact-opts .reach a.mail{font-size:clamp(16px,1.8vw,22px)}