/* ============================================================
   Phronesis Labs — site styles
   Palette, type, and a golden-section spacing rhythm.
   ============================================================ */

/* ---- Self-hosted fonts (SIL Open Font License) ---- */
@font-face{
  font-family:"EB Garamond";
  src:url("/assets/fonts/EBGaramond.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("/assets/fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight:400 800; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("/assets/fonts/HankenGrotesk.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:swap;
}

/* ---- Tokens ---- */
:root{
  --navy:#15263F;
  --navy-deep:#0F1B2E;
  --teal:#EE5A1A;
  --teal-soft:#F4A06A;
  --gold:#EE5A1A;
  --gold-soft:#F2A074;
  --orange-deep:#D24E12;
  --parchment:#FFFFFF;
  --paper:#FFFFFF;
  --ink:#1B2A40;
  --muted:#5E6B7D;
  --line:#E6E8EC;

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  /* golden-ratio spacing scale (phi ~1.618) */
  --s1:0.5rem; --s2:0.81rem; --s3:1.31rem; --s4:2.12rem;
  --s5:3.43rem; --s6:5.55rem; --s7:8.98rem;

  --maxw:1120px;
  --radius:14px;
  --shadow:0 1px 2px rgba(21,38,63,.06),0 8px 30px rgba(21,38,63,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:3px}

.container{width:100%; max-width:var(--maxw); margin-left:auto; margin-right:auto;
  padding-left:var(--s4); padding-right:var(--s4)}
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:.6rem 1rem; z-index:100}
.skip:focus{left:8px; top:8px}

/* ---- Type ---- */
h1,h2,h3{font-family:var(--sans); color:var(--navy); line-height:1.1; font-weight:700; margin:0}
h1{font-size:clamp(2.5rem,6vw,4rem); letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:-.005em}
h3{font-size:1.4rem}
p{margin:0 0 var(--s3)}
.lead{font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.55; color:#2c3a51}
.eyebrow{font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:.78rem; color:var(--gold); margin:0 0 var(--s2)}
.greek{font-family:var(--serif); font-style:italic}
.accent{color:var(--gold)}
.teal{color:var(--teal)}

/* gold golden-section divider */
.rule{height:2px; width:64px; background:var(--gold); border:0; margin:var(--s3) 0}

/* ---- Header ---- */
.site-header{position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-block:.75rem}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--navy)}
.brand:hover{text-decoration:none}
.brand svg{width:34px; height:auto}
.brand .name{font-family:var(--sans); font-weight:700; font-size:1.3rem; color:var(--navy)}
.nav-links{display:flex; align-items:center; gap:var(--s4); list-style:none; margin:0; padding:0}
.nav-links a{font-family:var(--sans); font-weight:500; color:var(--navy); font-size:.98rem}
.nav-links a[aria-current="page"]{color:var(--teal); text-decoration:underline; text-underline-offset:5px}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:.4rem;
  color:var(--navy)}
.nav-toggle svg{width:26px;height:26px}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans);
  font-weight:600; font-size:1rem; padding:.7rem 1.25rem; border-radius:10px;
  border:2px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn.primary{background:var(--gold); color:#fff}
.btn.primary:hover{background:var(--orange-deep)}
.btn.ghost{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn.ghost:hover{background:rgba(21,38,63,.05)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3)}

/* ---- Sections ---- */
.section{padding-block:var(--s6)}
.section.tight{padding-block:var(--s5)}
.section.navy{background:var(--navy); color:var(--parchment)}
.section.navy h1,.section.navy h2{color:var(--parchment)}
.section.navy .eyebrow{color:var(--gold-soft)}

/* ---- Hero (golden-section split) ---- */
.hero{padding-block:var(--s6) var(--s5); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.618fr 1fr; gap:var(--s5); align-items:center}
.hero h1{margin-bottom:var(--s3)}
.hero .lead{max-width:54ch}
.hero-mark{justify-self:center; width:min(360px,90%)}
.hero-mark svg{width:100%; filter:drop-shadow(0 12px 30px rgba(21,38,63,.12))}

/* ---- The Test block ---- */
.test{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--s5)}
.test .q{display:flex; gap:var(--s3); align-items:flex-start; padding-block:var(--s3)}
.test .q+.q{border-top:1px solid var(--line)}
.test .num{font-family:var(--sans); font-weight:800; font-size:2.2rem; color:var(--gold); line-height:1;
  min-width:1.4em}
.test .q p{margin:0; font-size:1.15rem; color:#2c3a51}
.test .q strong{color:var(--navy); font-weight:600}

/* ---- Cards / product grid ---- */
.grid{display:grid; gap:var(--s4)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.6rem}
.card h3{font-family:var(--sans); font-weight:700}
.card p{margin:0; color:#3a4759; font-size:1rem}
.card .card-foot{margin-top:auto; padding-top:var(--s3)}
.badge{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans);
  font-weight:600; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:999px}
.badge.live{background:rgba(238,90,26,.14); color:#C2440F}
.badge.dev{background:rgba(21,38,63,.08); color:var(--navy)}
.badge.soon{background:#EEF0F3; color:var(--muted)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.cardlink{font-weight:600}

/* ---- Mission strip / pull statement ---- */
.statement{font-family:var(--sans); font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.35; color:var(--navy); max-width:24ch}
.section.navy .statement{color:var(--parchment)}

/* ---- Prose (about / privacy) ---- */
.prose{max-width:68ch}
.prose h2{margin-top:var(--s5); margin-bottom:var(--s2)}
.prose h2:first-child{margin-top:0}
.prose p{color:#2c3a51}
.prose ul{padding-left:1.2em; margin:0 0 var(--s3)}
.prose li{margin-bottom:.4rem}

/* ---- Contact form ---- */
.field{margin-bottom:var(--s3)}
.field label{display:block; font-weight:600; color:var(--navy); margin-bottom:.35rem; font-size:.95rem}
.field input,.field textarea{width:100%; font-family:var(--sans); font-size:1rem;
  padding:.7rem .85rem; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--teal)}
.field textarea{min-height:140px; resize:vertical}
.formnote{font-size:.88rem; color:var(--muted)}
#formmsg{display:none; margin-top:var(--s3); padding:.85rem 1rem; border-radius:10px;
  background:rgba(238,90,26,.1); color:#A23A10; font-weight:500}

/* ---- Footer ---- */
.site-footer{background:var(--navy); color:#c8d2e0; padding-block:var(--s5)}
.footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s4);
  align-items:flex-start}
.footer-brand{display:flex; align-items:center; gap:.7rem}
.footer-brand svg{width:40px}
.footer-brand .name{font-family:var(--sans); font-weight:700; font-size:1.25rem; color:var(--parchment)}
.seal{font-family:var(--serif); margin-top:.5rem}
.seal .gk{font-style:italic; color:var(--gold-soft); font-size:1.25rem}
.seal .en{color:#9fb0c4; font-size:.95rem; font-family:var(--sans)}
.footer-nav{display:flex; flex-direction:column; gap:.5rem}
.footer-nav a{color:#c8d2e0}
.footer-bottom{margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.86rem; color:#8fa0b6}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:var(--s4); text-align:left}
  .hero-mark{order:-1; width:min(260px,70%); justify-self:start}
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .nav-links{
    position:absolute; top:100%; right:0; left:0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--parchment); border-bottom:1px solid var(--line);
    padding:var(--s2) var(--s4); display:none}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block; padding:.7rem 0; width:100%}
  .nav-toggle{display:inline-flex}
}
@media (max-width:560px){
  :root{--s6:3.6rem; --s5:2.6rem}
  .container{padding-left:1.25rem; padding-right:1.25rem}
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .test{padding:var(--s4)}
  h1{font-size:clamp(2.1rem,9vw,2.8rem)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}


/* ---- Product favicons on What We Make cards ---- */
.card-top{display:flex; align-items:center; justify-content:space-between}
.ficon{width:46px; height:46px; display:flex; align-items:center; justify-content:center}
.ficon img,.ficon svg{display:block}
.ficon-tile{border-radius:10px; object-fit:cover}
.ficon-tile-gt{width:46px; height:46px; border:0.75px solid #003117; border-radius:10px;
  background:#fff; display:flex; align-items:center; justify-content:center}
.ficon-tile-gt img{object-fit:contain}
.sub-eyebrow{font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:.74rem; color:var(--muted); margin:0 0 .4rem}