/* Dyalex site styles — palette and type match the pitch deck */
:root{
  --navy:#14213d; --ink:#3a4660; --muted:#5a6578; --teal:#2f6f6a;
  --paper:#f2f4f1; --rule:#6b7a99; --sky:#d3dfe9; --sage:#dce7e1;
  --mono:'IBM Plex Mono','Courier New',monospace; --sans:'IBM Plex Sans',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{font-family:var(--sans);color:var(--navy);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:13px}

/* hero: gradient + grain + blueprint grid, as on the deck cover */
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--sky) 0%,var(--sage) 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.13 0 0 0 0 0.24 1.4 0 0 0 -0.45'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(20,33,61,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(20,33,61,.08) 1px,transparent 1px);
  background-size:64px 64px}
.hero > *{position:relative;z-index:1}
.topbar{background:var(--paper);border-bottom:1px solid rgba(20,33,61,.15)}
header{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
header img{height:44px;width:auto;display:block}
header a.cta{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--navy);padding:10px 16px}
header a.cta:hover{background:var(--navy);color:var(--paper)}

.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;padding:40px 0 72px}
.eyebrow{color:var(--teal);margin-bottom:20px}
h1{font-weight:300;font-size:clamp(30px,4vw,48px);line-height:1.2;color:var(--ink);letter-spacing:-.01em}
h1 strong{font-weight:500;color:var(--navy)}
.lede strong{font-weight:500;color:var(--navy)}
.lede{margin-top:24px;font-size:18px;color:var(--ink);max-width:34em}

.figure{position:relative}
.figure img{width:100%;height:auto;display:block}
.code{position:absolute;top:-6%;left:-2%;font-family:var(--mono);font-size:clamp(11px,1.2vw,15px);line-height:1.45;pointer-events:none}
.code span{display:block;white-space:pre}
.labels{display:flex;justify-content:space-between;margin-top:12px;color:var(--teal);text-align:center}
.labels span{flex:1}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}
.hero-cta .btn{font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:var(--navy);color:var(--paper);padding:14px 22px}
.hero-cta .btn:hover{background:var(--teal)}
.hero-cta .link{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}

/* body sections */
section.band{padding:80px 0;border-top:1px solid rgba(20,33,61,.15)}
h2{font-weight:500;font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.01em;margin-bottom:12px}
.sub{color:var(--muted);font-size:17px;max-width:42em}
.sub.turn{margin-top:16px;color:var(--navy);font-weight:500}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.point{border-top:1px solid var(--rule);padding-top:20px}
.point .mono{color:var(--teal);margin-bottom:10px}
.point p{color:var(--ink)}

ol.points{list-style:none}
.point h4{font-weight:400;color:var(--teal);margin-bottom:10px}
.steps-label{font-weight:400;margin-top:48px;margin-bottom:0}
.steps-label + .points{margin-top:16px}

/* ---- proof cards ---- */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.proof-item:last-child:nth-child(odd){grid-column:1 / -1}
.proof-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#fff;border:1px solid rgba(20,33,61,.15);
  text-decoration:none;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.proof-item:hover{border-color:var(--teal);box-shadow:0 2px 12px rgba(20,33,61,.08)}
.proof-badge{flex:none;min-width:84px;text-align:center;font-size:14px;font-weight:500;color:var(--paper);background:var(--navy);padding:8px 12px}
.proof-text{flex:1;font-size:16px}
.proof-link{flex:none;color:var(--teal);font-size:11px;white-space:nowrap}
@media (max-width:860px){.proof{grid-template-columns:1fr}}
@media (max-width:480px){.proof-link{display:none}}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;margin-top:24px}
.person{border-top:1px solid var(--rule);padding-top:20px}
.person .mono{color:var(--teal);margin-bottom:8px}
.person h4{font-weight:500;font-size:22px;margin-bottom:6px}
.person h4 a{text-decoration:none}
.person h4 a:hover{text-decoration:underline}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.person p{color:var(--ink)}

.person-photo{width:96px;height:96px;object-fit:cover;border-radius:50%;margin-bottom:16px;display:block}
.people-compact{list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:32px}
.people-compact .name{font-weight:500}
.people-compact .mono{color:var(--teal);margin-left:8px}

.contact{background:var(--navy);color:var(--paper)}
.contact h2{color:var(--paper)}
.contact .sub{color:#c9d6e3}
.contact .actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.contact a{font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:14px 20px;border:1px solid #a9c4be;color:var(--paper)}
.contact a.primary{background:var(--teal);border-color:var(--teal)}
.contact a:hover{border-color:var(--paper)}

footer{background:var(--navy);color:#a9c4be;border-top:1px solid #2c3b5c}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;padding-bottom:32px}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:32px;padding-top:16px}
  .points{grid-template-columns:1fr}
  .code{font-size:10px;left:0}
  header img{height:36px}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .labels{font-size:11px}
  header a.cta{padding:8px 10px;font-size:11px}
}


/* ---------- contact form: style A (underline, floating labels) ---------- */
.contact-form{margin-top:36px;max-width:760px}
.contact-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.contact-form .field{position:relative;margin-bottom:22px}
.contact-form input[type=text],.contact-form input[type=email],.contact-form select,.contact-form textarea{
  width:100%;font:inherit;font-size:16px;color:var(--paper);background:transparent;border:0;border-bottom:1px solid #4a5a7a;
  border-radius:0;outline:none;appearance:none;padding:26px 0 8px}
.contact-form select option{color:var(--navy)}
.contact-form textarea{border:1px solid #4a5a7a;padding:28px 14px 10px;min-height:140px;resize:vertical}
.contact-form label{position:absolute;left:0;top:18px;font-size:16px;color:#9fb0c6;pointer-events:none;transition:all .18s ease}
.contact-form .field-message label{left:14px}
.contact-form .num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#5d7090;margin-right:8px}
.contact-form .optional{font-size:13px;color:#6d7f99}
/* float the label up once focused, filled, or a select */
.contact-form .is-up label,
.contact-form input:focus + label,.contact-form textarea:focus + label,
.contact-form input:not(:placeholder-shown) + label,.contact-form textarea:not(:placeholder-shown) + label{
  top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a9c4be}
/* teal line draws in on focus */
.contact-form .field::after{content:"";position:absolute;left:0;top:calc(26px + 1.5em + 8px - 1px);height:2px;width:0;background:#7fc4b8;transition:width .25s ease}
.contact-form .field:focus-within::after{width:100%}
.contact-form .field-message::after{display:none}
.contact-form .field-message textarea:focus{border-color:#7fc4b8}
.contact-form .select-arrow{position:absolute;right:2px;top:30px;color:#a9c4be;font-size:12px;pointer-events:none}
/* states */
.contact-form .ok{position:absolute;right:2px;top:30px;color:#7fc4b8;font-size:15px}
.contact-form .field-message .ok{right:14px}
.contact-form .has-error input,.contact-form .has-error select{border-bottom-color:#e39b8f}
.contact-form .has-error textarea{border-color:#e39b8f}
.contact-form .has-error label{color:#f0b3a8}
.contact-form .field-error,.contact-form .form-errors{color:#f0b3a8;font-size:14px;margin-top:6px}
.contact-form .form-errors{margin-bottom:16px}
.contact-form .form-errors ul{list-style:none}
.contact-form .captcha{margin:8px 0 18px}
.contact-form .submit{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--teal);
  color:var(--paper);border:1px solid var(--teal);padding:14px 26px;cursor:pointer}
.contact-form .submit .arrow{display:inline-block;margin-left:10px;transition:transform .2s ease}
.contact-form .submit:hover{border-color:var(--paper)}
.contact-form .submit:hover .arrow{transform:translateX(5px)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-alt{margin-top:28px;color:#c9d6e3;font-size:15px}
.contact .contact-alt a{color:var(--paper);font-family:var(--sans);font-size:inherit;letter-spacing:0;text-transform:none;padding:0;border:0;text-decoration:underline}

/* ---------- simple notice pages (success, unsubscribed, ...) ---------- */
.notice{min-height:50vh}
.notice .back{margin-top:24px}
.notice .back a{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}

@media (max-width:640px){
  .contact-form .form-grid{grid-template-columns:1fr}
}


/* ---- team & publication detail pages ---- */
.person .more{display:inline-block;margin-top:12px;color:var(--teal);text-decoration:none;font-size:12px}
.person .more:hover{text-decoration:underline}
.people-compact a.name{text-decoration:none}
.people-compact a.name:hover{text-decoration:underline}

.wrap.narrow{max-width:860px}
section.detail{border-top:0;padding-top:40px}
.detail .back{display:inline-block;color:var(--teal);text-decoration:none;font-size:12px;margin-bottom:32px}
.detail .back:hover{text-decoration:underline}
.detail-head{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start}
.detail-photo{width:200px;height:200px;object-fit:cover;border-radius:4px;display:block}
.detail .eyebrow{margin-bottom:12px}
.detail .lede{margin-top:16px}
.detail .links{display:flex;gap:20px;margin-top:20px;font-size:12px}
.detail .links a{color:var(--teal)}
.prose{margin-top:40px;color:var(--ink);font-size:17px;max-width:42em}
.prose p + p{margin-top:1em}
.meta{margin-top:40px;border-top:1px solid var(--rule)}
.meta-row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid rgba(20,33,61,.15)}
.meta dt{color:var(--teal);font-size:12px;padding-top:3px}
.meta dd{color:var(--ink)}
.meta dd .prose,.meta dd.prose{margin-top:0;font-size:16px}
.meta ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.meta a,.pub-list a{color:var(--navy)}
.muted{color:var(--muted)}
.detail-h2{margin-top:56px}
.pub-h1{font-size:clamp(26px,3.2vw,38px)}
.pub-list{list-style:none;display:flex;flex-direction:column;gap:20px;margin-top:16px}
.pub-list .pub-title{font-weight:500;text-decoration:none}
.pub-list .pub-title:hover{text-decoration:underline}
.pub-list .pub-cite{display:block;color:var(--muted);font-size:15px;margin-top:4px}

@media (max-width:700px){
  .detail-head{grid-template-columns:1fr;gap:20px}
  .detail-photo{width:140px;height:140px}
  .meta-row{grid-template-columns:1fr;gap:4px}
}

/* ---- problem line, statement band, single team section ---- */
.problem{font-size:clamp(20px,2vw,24px);font-weight:300;line-height:1.4;color:var(--ink);max-width:36em;margin-bottom:56px}
section.band .eyebrow{margin-bottom:12px}
.statement{position:relative;overflow:hidden;text-align:center;padding:112px 0;border-top:0;
  background:linear-gradient(120deg,var(--sage) 0%,var(--sky) 100%)}
.statement::before{content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.13 0 0 0 0 0.24 1.4 0 0 0 -0.45'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}
.statement .wrap{position:relative}
.statement h2{font-weight:300;font-size:clamp(30px,4vw,48px);line-height:1.2;color:var(--ink);margin:0 auto 20px;max-width:18em;text-wrap:balance}
.statement h2 strong{font-weight:500;color:var(--navy)}
.statement .sub{margin:0 auto;color:var(--ink)}
.statement + section.band{border-top:0}
.team-group{margin-top:40px}
.team-group + .team-group{margin-top:56px}
.group-label{color:var(--teal);font-weight:500}


.subawards{margin-top:12px;color:var(--ink);font-size:16px}
.source{margin-top:20px;font-size:11px;color:var(--muted)}
.source a{color:var(--teal)}

/* ---- mobile: hero buttons below the drawing ---- */
@media (max-width:860px){
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-text{display:contents}
  .figure{order:1;margin-top:36px}
  .hero-cta{order:2;margin-top:28px}
}