/* Eyebrook Technologies — shared stylesheet
   Design tokens and components per the design handoff.
   Desktop canvas 1440px; sharp corners, no shadows. */

:root{
  /* colour */
  --bg:#08090a;
  --panel:#0b0c0d;
  --card:#0c0e0f;
  --well:#101314;
  --gold:#c8b97a;
  --gold-hi:#e0d39a;
  --head:#f4f2eb;
  --head2:#f2f0e9;
  --text:#e8e6df;
  --body:#d8d6cf;
  --muted:#b7b5ac;
  --muted2:#a8a69d;
  --dim:#9a988f;
  --mono-c:#8a8a82;
  --faint:#7a7a72;
  --faint2:#6f6f68;
  --place:#5f5f58;
  --hair-gold:rgba(200,185,122,.2);
  --hair-gold-soft:rgba(200,185,122,.18);
  --hair:rgba(255,255,255,.07);
  --btn-dark:#0a0b0c;
  /* type */
  --bebas:'Bebas Neue',sans-serif;
  --barlow:'Barlow',sans-serif;
  --stm:'Share Tech Mono',monospace;
  /* layout */
  --gutter:56px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);font-family:var(--barlow),sans-serif;color:var(--body);-webkit-font-smoothing:antialiased;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--gold-hi);}
img{max-width:100%;}

.wrap{max-width:1440px;margin:0 auto;position:relative;}

/* Blueprint grid overlay */
.egrid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(200,185,122,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(200,185,122,.045) 1px,transparent 1px);
  background-size:60px 60px;}

/* ---------- Header ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px var(--gutter);border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:20;background:rgba(8,9,10,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.brand{display:flex;align-items:center;gap:14px;}
.brand img{height:40px;width:auto;display:block;}
.wordmark{font-family:var(--bebas);font-size:22px;letter-spacing:.16em;color:var(--text);}
.nav{display:flex;align-items:center;gap:40px;font-family:var(--stm);font-size:12px;letter-spacing:.18em;}
.nav a{color:var(--mono-c);}
.nav a:hover{color:var(--gold-hi);}
.nav .active{color:var(--text);}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--stm);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;}
.btn-primary{background:var(--gold);color:var(--btn-dark);border:none;padding:16px 34px;}
.btn-primary:hover{background:var(--gold-hi);color:var(--btn-dark);}
.btn-secondary{color:var(--text);border:1px solid rgba(255,255,255,.2);padding:16px 34px;}
.btn-cta{padding:17px 40px;}

/* ---------- Generic band / section ---------- */
.band{position:relative;border-bottom:1px solid var(--hair);}
.band.alt{background:var(--panel);}

.eyebrow{position:relative;font-family:var(--stm);font-size:12px;letter-spacing:.3em;color:var(--gold);margin-bottom:20px;}

.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;}
.h2{font-family:var(--bebas);font-weight:400;font-size:40px;letter-spacing:.06em;margin:0;color:var(--text);}
.h2-44{font-size:clamp(32px,4.5vw,44px);letter-spacing:.05em;}
.sec-label{font-family:var(--stm);font-size:11px;letter-spacing:.2em;color:var(--mono-c);}
.link-label{font-family:var(--stm);font-size:12px;letter-spacing:.16em;}

/* ---------- Page-title band ---------- */
.page-title{position:relative;padding:72px var(--gutter) 60px;border-bottom:1px solid var(--hair);overflow:hidden;}
.page-title h1{position:relative;font-family:var(--bebas);font-weight:400;font-size:clamp(46px,7.6vw,96px);
  line-height:.92;letter-spacing:.02em;margin:0;color:var(--head);max-width:1100px;}
.lead{position:relative;max-width:760px;margin:28px 0 0;font-size:19px;line-height:1.7;color:var(--muted);font-weight:300;}

/* ---------- HOME: hero ---------- */
.hero{position:relative;padding:96px var(--gutter) 104px;text-align:center;border-bottom:1px solid var(--hair);overflow:hidden;}
.hero-mark{position:relative;height:clamp(200px,34vw,420px);width:auto;margin:0 auto 52px;display:block;}
.strapline{position:relative;font-family:var(--stm);font-size:clamp(16px,3.4vw,34px);letter-spacing:.52em;color:var(--gold);margin-bottom:32px;}
.hero h1{position:relative;font-family:var(--bebas);font-weight:400;font-size:clamp(46px,9vw,120px);
  line-height:.9;letter-spacing:.02em;margin:0 auto;max-width:1120px;color:var(--head);}
.hero-lead{position:relative;max-width:700px;margin:34px auto 0;font-size:19px;line-height:1.7;color:var(--muted);font-weight:300;}
.btn-row{position:relative;display:flex;gap:18px;justify-content:center;margin-top:46px;flex-wrap:wrap;}

/* ---------- HOME: capabilities ---------- */
.section-pad{position:relative;padding:64px var(--gutter);}
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair-gold-soft);margin-top:36px;}
.cap{padding:28px 24px 32px;border-right:1px solid var(--hair);}
.cols-4 .cap:last-child{border-right:none;}
.cap-num{font-family:var(--stm);font-size:12px;color:var(--gold);margin-bottom:16px;}
.cap h3{font-family:var(--bebas);font-weight:400;font-size:26px;letter-spacing:.04em;margin:0 0 10px;color:var(--text);}
.cap p{font-size:14px;line-height:1.6;color:var(--dim);margin:0;font-weight:300;}

/* ---------- Centred statement ---------- */
.statement{position:relative;padding:88px var(--gutter);text-align:center;border-bottom:1px solid var(--hair);}
.eyebrow-c{font-family:var(--stm);font-size:12px;letter-spacing:.3em;color:var(--gold);margin-bottom:28px;}
.statement p{max-width:920px;margin:0 auto;font-family:var(--barlow);font-weight:300;font-size:32px;line-height:1.4;color:var(--text);}
.statement.s30 p{max-width:940px;font-size:30px;line-height:1.45;}
.statement .gold{color:var(--gold);}

/* ---------- HOME: programmes ---------- */
.programmes{position:relative;padding:56px var(--gutter);}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px;}
.prog-card{border:1px solid var(--hair-gold);background:var(--card);display:block;color:inherit;}
.prog-card:hover{color:inherit;}
.well{position:relative;height:210px;background:var(--well);overflow:hidden;border-bottom:1px solid var(--hair-gold);}
.well svg{position:absolute;inset:0;width:100%;height:100%;}
.prog-body{padding:26px 24px 28px;}
.prog-body h3{font-family:var(--bebas);font-weight:400;font-size:40px;letter-spacing:.03em;margin:0 0 8px;color:var(--head2);}
.prog-sub{font-family:var(--stm);font-size:12px;letter-spacing:.06em;color:var(--muted2);margin-bottom:12px;}
.prog-body p{font-size:14px;line-height:1.6;color:var(--dim);margin:0;font-weight:300;}

/* ---------- Standards strip ---------- */
.standards{position:relative;padding:44px var(--gutter);border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:48px;flex-wrap:wrap;}
.std-label{font-family:var(--stm);font-size:12px;letter-spacing:.24em;color:var(--gold);white-space:nowrap;}
.std-list{display:flex;gap:36px;flex-wrap:wrap;align-items:center;font-family:var(--stm);font-size:14px;letter-spacing:.14em;color:#c9c7bf;}
.std-list .sep{color:#3a3a36;}

/* ---------- CTA ---------- */
.cta{position:relative;padding:80px var(--gutter);text-align:center;border-bottom:1px solid var(--hair);}
.cta h2{font-family:var(--bebas);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:.95;letter-spacing:.02em;margin:0 0 32px;color:var(--head);}
.cta--home{padding:88px var(--gutter);background:var(--panel);}
.cta--home h2{font-size:clamp(38px,5.6vw,66px);margin:0;}
.cta--home .btn-wrap{margin-top:38px;}

/* ---------- Rail (label + content) layout ---------- */
.aside{position:relative;padding:72px var(--gutter);border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start;}
.rail-label{font-family:var(--stm);font-size:12px;letter-spacing:.24em;color:var(--gold);border-top:2px solid var(--gold);padding-top:16px;}
.stmt-30{font-family:var(--barlow);font-weight:300;font-size:clamp(24px,3.2vw,30px);line-height:1.45;color:var(--text);margin:0 0 28px;}
.stmt-30 .gold{color:var(--gold);}
.body-17{font-size:17px;line-height:1.75;color:var(--muted2);margin:0;font-weight:300;max-width:760px;}

/* ---------- 2x2 divided grid (bench / ethos) ---------- */
.grid22{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair-gold-soft);}
.grid22 .cell{padding:26px 28px 30px;}
.grid22 .cell:nth-child(odd){border-right:1px solid var(--hair);}
.grid22 .cell:nth-child(1),.grid22 .cell:nth-child(2){border-bottom:1px solid var(--hair);}
.grid22 .cell h3{font-family:var(--bebas);font-weight:400;font-size:24px;letter-spacing:.04em;margin:0 0 10px;color:var(--text);}
.grid22 .cell p{font-size:14px;line-height:1.65;color:var(--dim);margin:0;font-weight:300;}

/* ---------- ABOUT: founders ---------- */
.founders{position:relative;padding:72px var(--gutter);border-bottom:1px solid var(--hair);}
.founder{border:1px solid var(--hair-gold);background:var(--card);}
.founder-inner{padding:30px 28px 32px;}
.role-label{font-family:var(--stm);font-size:11px;letter-spacing:.16em;color:var(--gold);margin-bottom:10px;}
.founder h3{font-family:var(--bebas);font-weight:400;font-size:44px;letter-spacing:.03em;margin:0 0 16px;color:var(--head);}
.founder p{font-size:15px;line-height:1.7;color:var(--muted2);margin:0 0 18px;font-weight:300;}
.founder p:last-child{margin-bottom:0;}

/* ---------- PROJECTS ---------- */
.prog-section{position:relative;padding:76px var(--gutter);border-bottom:1px solid var(--hair);scroll-margin-top:88px;}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.prog-h2{font-family:var(--bebas);font-weight:400;font-size:clamp(56px,8vw,88px);line-height:.9;letter-spacing:.02em;margin:0 0 10px;color:var(--head);}
.prog-sub2{font-family:var(--stm);font-size:13px;letter-spacing:.08em;color:var(--gold);margin-bottom:24px;}
.body-17c{font-size:17px;line-height:1.75;color:#c9c7bf;margin:0 0 18px;font-weight:300;}
.body-16{font-size:16px;line-height:1.75;color:var(--muted2);margin:0;font-weight:300;}
.lead-19{font-size:19px;line-height:1.65;color:var(--text);margin:0 0 18px;font-weight:300;}
.well-lg{position:relative;height:300px;background:var(--well);overflow:hidden;border:1px solid var(--hair-gold);margin-bottom:24px;}
.well-lg svg{position:absolute;inset:0;width:100%;height:100%;}
.wp-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair-gold-soft);}
.wp-grid .wp-cell{padding:20px 20px 22px;}
.wp-grid .wp-cell:nth-child(odd){border-right:1px solid var(--hair);}
.wp-grid .wp-cell:nth-child(1),.wp-grid .wp-cell:nth-child(2){border-bottom:1px solid var(--hair);}
.wp-cell .wp-label{font-family:var(--stm);font-size:11px;letter-spacing:.12em;color:var(--gold);margin-bottom:8px;}
.wp-cell p{font-size:13px;line-height:1.6;color:var(--dim);margin:0;font-weight:300;}
.auris-tag{text-align:center;margin-bottom:52px;}
.auris-tag h2{font-family:var(--bebas);font-weight:400;font-size:clamp(30px,5vw,54px);line-height:.98;letter-spacing:.02em;margin:0;color:var(--head);}

/* Operating picture */
.op{margin-top:60px;border-top:1px solid rgba(255,255,255,.08);padding-top:48px;}
.op-eyebrow{font-family:var(--stm);font-size:12px;letter-spacing:.3em;color:var(--gold);margin-bottom:8px;}
.op-lead{max-width:820px;font-size:20px;line-height:1.55;color:var(--body);margin:0 0 40px;font-weight:300;}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.stat{border-top:2px solid var(--gold);padding-top:16px;}
.stat-num{font-family:var(--bebas);font-size:58px;line-height:1;color:var(--head2);}
.stat-cap{font-family:var(--stm);font-size:11px;letter-spacing:.1em;color:var(--mono-c);margin-top:10px;line-height:1.6;}

/* ---------- CAREERS: roles ---------- */
.roles{position:relative;padding:72px var(--gutter);border-bottom:1px solid var(--hair);}
.role{display:block;color:inherit;border:1px solid var(--hair-gold);background:var(--card);padding:32px 32px 34px;margin-bottom:20px;}
.role:hover{color:inherit;}
.role.neutral{border:1px solid rgba(255,255,255,.1);background:#0a0b0c;margin-bottom:0;}
.role-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;}
.role-main{max-width:840px;}
.role-cat{font-family:var(--stm);font-size:11px;letter-spacing:.16em;color:var(--gold);margin-bottom:12px;}
.role h3{font-family:var(--bebas);font-weight:400;font-size:clamp(30px,4.4vw,40px);letter-spacing:.03em;margin:0 0 12px;color:var(--head);}
.role-main p{font-size:15px;line-height:1.7;color:var(--muted2);margin:0;font-weight:300;}
.role-side{text-align:right;white-space:nowrap;}
.pill{font-family:var(--stm);font-size:10px;letter-spacing:.12em;color:var(--btn-dark);background:var(--gold);padding:4px 10px;display:inline-block;margin-bottom:16px;}
.pill.outline{color:#c9c7bf;background:transparent;border:1px solid rgba(255,255,255,.2);}
.apply{font-family:var(--stm);font-size:12px;letter-spacing:.14em;color:var(--gold);}

/* ---------- CONTACT: form ---------- */
.contact-grid{position:relative;padding:64px var(--gutter);border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.field-label{display:block;font-family:var(--stm);font-size:11px;letter-spacing:.14em;color:var(--mono-c);margin-bottom:8px;}
.fld{width:100%;background:var(--card);border:1px solid rgba(255,255,255,.12);color:var(--text);
  font-family:var(--barlow),sans-serif;font-size:16px;font-weight:300;padding:14px 16px;outline:none;transition:border-color .15s;}
.fld:focus{border-color:var(--gold);}
.fld::placeholder{color:var(--place);}
textarea.fld{resize:vertical;min-height:140px;}
select.fld{appearance:none;-webkit-appearance:none;}
.form-note{font-family:var(--stm);font-size:10px;letter-spacing:.08em;color:var(--place);margin:20px 0 0;line-height:1.7;}
/* honeypot — visually hidden, off-screen */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
/* form status */
.form-status{margin-top:20px;font-family:var(--stm);font-size:12px;letter-spacing:.06em;line-height:1.7;display:none;}
.form-status.show{display:block;}
.form-status.ok{color:var(--gold);}
.form-status.err{color:#d98a7a;}
.form-status a{color:var(--gold);}

.details-follow{margin-bottom:32px;}
.details-sub{font-family:var(--stm);font-size:11px;letter-spacing:.14em;color:var(--mono-c);margin-bottom:8px;}
.details-linkedin{font-family:var(--bebas);font-size:30px;letter-spacing:.03em;color:var(--head);}
.details-company{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;}
.details-company p{font-family:var(--stm);font-size:12px;line-height:1.9;color:var(--muted2);margin:0;}

/* ---------- Footer ---------- */
.site-footer{position:relative;padding:44px var(--gutter) 48px;display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:32px;align-items:start;}
.footer-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.footer-brand-row img{height:34px;width:auto;}
.footer-wordmark{font-family:var(--bebas);font-size:18px;letter-spacing:.14em;color:var(--text);}
.fineprint{font-family:var(--stm);font-size:11px;line-height:1.9;color:var(--faint);margin:0;}
.footer-col{font-family:var(--stm);font-size:11px;line-height:2.1;letter-spacing:.1em;}
.footer-col-head{color:var(--gold);margin-bottom:6px;}
.footer-col a{display:block;color:var(--dim);}
.footer-col a:hover{color:var(--gold-hi);}
.footer-covenant{text-align:center;}
.footer-covenant img{height:80px;width:auto;display:block;margin:0 auto;}
.footer-covenant .cap{font-family:var(--stm);font-size:9px;letter-spacing:.1em;color:var(--faint2);margin-top:10px;}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .contact-grid{grid-template-columns:1fr;gap:48px;}
  .cols-4{grid-template-columns:1fr 1fr;}
  .cols-4 .cap{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);}
  .cols-4 .cap:nth-child(2n){border-right:none;}
}
@media(max-width:820px){
  :root{--gutter:24px;}
  .site-header{flex-wrap:wrap;gap:16px;padding:18px var(--gutter);}
  .nav{gap:18px;width:100%;flex-wrap:wrap;}
  .hero{padding:64px var(--gutter) 72px;}
  .cols-2,.split-2,.cols-3,.aside{grid-template-columns:1fr;gap:32px;}
  .aside{padding:48px var(--gutter);}
  .founders,.roles,.programmes,.section-pad,.prog-section,.statement,.cta,.cta--home{padding-left:var(--gutter);padding-right:var(--gutter);}
  .role-inner{flex-direction:column;gap:20px;}
  .role-side{text-align:left;}
  .site-footer{grid-template-columns:1fr 1fr;gap:28px;}
  .footer-covenant{grid-column:1 / -1;text-align:left;}
  .footer-covenant img{margin:0;}
}
@media(max-width:560px){
  .cols-4{grid-template-columns:1fr;}
  .cols-4 .cap:nth-child(2n){border-right:1px solid var(--hair);}
  .cols-4 .cap{border-right:none;}
  .grid22,.wp-grid{grid-template-columns:1fr;}
  .grid22 .cell:nth-child(odd),.wp-grid .wp-cell:nth-child(odd){border-right:none;}
  .grid22 .cell:nth-child(3),.wp-grid .wp-cell:nth-child(3){border-bottom:1px solid var(--hair);}
  .form-row{grid-template-columns:1fr;}
  .site-footer{grid-template-columns:1fr;}
  .strapline{letter-spacing:.32em;}
}