/* ============================================================
   HACT Collaborative — mockup stylesheet
   Tokens here mirror the design-system table in the handoff doc.
   ============================================================ */

:root{
  --navy-900:#08174F;
  --navy-700:#0D2170;
  --navy-500:#1B3A8F;
  --cream:#FAF8F4;
  --white:#FFFFFF;
  --sky-100:#E7EFF7;
  --sky-300:#C3D8EC;
  --amber-600:#A85F12;
  --amber-400:#E9A13B;
  --amber-100:#FFF1DA;
  --ink:#17213D;
  --ink-muted:#55617F;
  --line:#E7E1D7;

  --wrap:1140px;
  --gut:28px;
  --r-card:10px;
  --shadow:0 1px 2px rgba(13,33,112,.05), 0 6px 18px rgba(13,33,112,.05);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Poppins',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- type ---------- */
h1,h2,h3,h4,.serif{font-family:'Lora',Georgia,serif;font-weight:600;color:var(--navy-700);letter-spacing:-.01em}
h1{font-size:46px;line-height:1.18}
h2{font-size:32px;line-height:1.25}
h3{font-size:20px;line-height:1.35}
p{color:var(--ink);}
.lead{font-size:17px;color:var(--ink-muted);line-height:1.7}
.muted{color:var(--ink-muted)}
.small{font-size:14px;line-height:1.6}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber-600);
}
.eyebrow.on-navy{color:var(--amber-400)}

.center{text-align:center}
.stack-sm > * + *{margin-top:10px}
.stack   > * + *{margin-top:18px}

/* ---------- header ---------- */
.hdr{background:var(--navy-700);}
.hdr .wrap{display:flex;align-items:center;gap:32px;height:74px}
.brand{display:flex;align-items:center;gap:11px}
.brand-txt{color:#fff;font-family:'Lora',serif;line-height:1.12}
.brand-txt b{display:block;font-size:15px;font-weight:600;letter-spacing:.01em}
.brand-txt span{display:block;font-size:9px;font-weight:400;opacity:.82;letter-spacing:.02em}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{color:#fff;text-decoration:none;font-size:14px;font-weight:500;opacity:.93}
.nav a.on{opacity:1;border-bottom:2px solid var(--amber-400);padding-bottom:3px}
.nav .pill{
  border:1.5px solid rgba(255,255,255,.6);border-radius:999px;
  padding:8px 20px;font-weight:600;font-size:13.5px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border-radius:999px;padding:11px 26px;
  font-size:14px;font-weight:600;text-decoration:none;line-height:1.4;
}
.btn-primary{background:var(--navy-700);color:#fff}
.btn-ghost{background:transparent;color:var(--navy-700);border:1.5px solid var(--navy-700)}
.btn-onnavy{background:#fff;color:var(--navy-700)}
.btn-sm{padding:9px 20px;font-size:13px}
.link{
  color:var(--navy-500);font-size:13.5px;font-weight:600;text-decoration:none;
}

/* ---------- sections ---------- */
.sec{padding:68px 0}
.sec-tight{padding:46px 0}
.sec-sky{background:var(--sky-100)}
.sec-navy{background:var(--navy-700);color:#fff}
.sec-navy h1,.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy p{color:rgba(255,255,255,.86)}
.hdg{max-width:720px;margin:0 auto 40px}
.hdg.left{margin-left:0}

/* ---------- grid ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-split{grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.g-split > img{width:100%;height:430px;object-fit:cover;border-radius:var(--r-card);display:block}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px;box-shadow:var(--shadow);
}
.card h3{margin-bottom:8px}
.card p{font-size:14px;color:var(--ink-muted);line-height:1.62}

.chip{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
}
.chip-amber{background:var(--amber-100)}
.chip-sky{background:#DCE8F5}

/* media card */
.mcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow);
}
.mcard .body{padding:20px 22px 24px}
.mcard img{width:100%;height:194px;object-fit:cover;display:block}
.mcard .cat{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-600);margin-bottom:7px}
.mcard h3{font-size:18px;margin-bottom:8px}
.mcard p{font-size:13.5px;color:var(--ink-muted);margin-bottom:14px}

/* photo-slot placeholder (no approved photo available yet) */
.slot{
  height:194px;display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(135deg,#EEF3F9 0 12px,#E6EDF6 12px 24px);
  border-bottom:1px solid var(--line);
}
.slot span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7789A8}
.slot.tall{height:300px;border:1px solid var(--line);border-radius:var(--r-card)}

/* ---------- hero ---------- */
.hero{padding:66px 0 60px}
.hero img{width:100%;height:378px;object-fit:cover;border-radius:var(--r-card);display:block}
.hero h1{margin:16px 0 18px}
.hero .btns{display:flex;gap:12px;margin-top:26px}
.amber-word{color:var(--amber-600)}

.band img{width:100%;height:330px;object-fit:cover;border-radius:var(--r-card);display:block}

/* ---------- lists ---------- */
.ticks{list-style:none}
.ticks li{
  display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink);
  line-height:1.55;margin-bottom:12px;
}
.ticks li::before{
  content:"";flex:none;width:17px;height:17px;border-radius:50%;margin-top:3px;
  background:var(--navy-700);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/></svg>") center/13px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/></svg>") center/13px no-repeat;
}

/* ---------- pathway ---------- */
.path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:14px}
.path .step{text-align:center;padding:0 6px}
.path .step .chip{margin:0 auto 14px}
.path .step h3{font-size:17px;margin-bottom:6px}
.path .step p{font-size:13px;color:var(--ink-muted);line-height:1.55}
.path .arw{color:#8FA9CC;font-size:22px;margin-top:12px}

/* ---------- stats / progress ---------- */
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 18px;text-align:center}
.stat b{display:block;font-family:'Lora',serif;font-size:28px;color:var(--navy-700);line-height:1.2}
.stat span{font-size:12px;color:var(--ink-muted);letter-spacing:.02em}
.stat .tbd{font-family:'Poppins',sans-serif;font-size:13px;color:#8C97AF;font-weight:600;letter-spacing:.08em}

/* ---------- accordion (FAQ) ---------- */
.acc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.acc .q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:17px 22px;border-bottom:1px solid var(--line);
}
.acc .q:last-child{border-bottom:none}
.acc .q p{font-family:'Lora',serif;font-weight:600;font-size:16px;color:var(--navy-700)}
.acc .q .pm{color:var(--navy-500);font-size:19px;font-weight:400;flex:none}
.acc .a{padding:0 22px 20px;border-bottom:1px solid var(--line)}
.acc .a p{font-size:14.5px;color:var(--ink-muted);line-height:1.68}
.acc .a .link{display:inline-block;margin-top:8px}
.faq-group{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--amber-600);margin:34px 0 14px}
.faq-group:first-of-type{margin-top:0}

/* ---------- forms ---------- */
.field{
  background:var(--white);border:1px solid var(--line);border-radius:7px;
  padding:13px 15px;font-size:14px;color:#98A2B8;margin-bottom:13px;
}
.field.area{height:120px}
.sub-row{display:flex;gap:10px;max-width:460px;margin:0 auto}
.sub-row .field{flex:1;margin:0}

/* contact info rows */
.crow{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.crow .chip{width:38px;height:38px;border-radius:9px;margin:0;flex:none;background:var(--navy-700)}
.crow b{display:block;font-family:'Lora',serif;font-size:15px;color:var(--navy-700);margin-bottom:2px}
.crow span{font-size:14px;color:var(--ink-muted)}

/* ---------- footer ---------- */
.ftr{background:var(--navy-900);color:#fff;padding:44px 0 24px;margin-top:0}
.ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.ftr h4{color:#fff;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}
.ftr a,.ftr li{color:rgba(255,255,255,.76);font-size:13.5px;text-decoration:none;line-height:2}
.ftr ul{list-style:none}
.ftr .base{
  border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:18px;
  font-size:12px;color:rgba(255,255,255,.6);text-align:center;
}

/* ---------- annotation label used on mockup sheets ---------- */
.plate{padding:26px 30px 0}
.plate .n{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#93A0B8}
.plate .t{font-family:'Lora',serif;font-size:22px;font-weight:600;color:var(--navy-700);margin-top:2px}
.plate .u{font-family:'DejaVu Sans Mono',monospace;font-size:12px;color:var(--amber-600);margin-top:4px}
.frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 30px 30px;box-shadow:var(--shadow)}

/* ============================================================
   RESPONSIVE
   Breakpoints: 1024px (tablet)  /  640px (phone)
   ============================================================ */

@media (max-width:1024px){
  :root{--gut:22px}
  h1{font-size:36px}
  h2{font-size:27px}
  .sec{padding:52px 0}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g-split{grid-template-columns:1fr;gap:28px}
  .g-split > img{height:320px}
  .path{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .path .arw{display:none}
  .ftr .cols{grid-template-columns:repeat(2,1fr);gap:26px}
}

@media (max-width:640px){
  :root{--gut:18px}
  body{font-size:15px}
  h1{font-size:29px;line-height:1.24}
  h2{font-size:23px}
  h3{font-size:18px}
  .lead{font-size:15.5px}
  .sec{padding:40px 0}
  .sec-tight{padding:32px 0}
  .hero{padding:34px 0 32px}

  /* Mobile nav: links collapse behind a menu button, brand + CTA stay visible */
  .hdr .wrap{height:64px;gap:12px}
  .nav a:not(.pill){display:none}
  .nav .pill{padding:9px 15px;font-size:12px;white-space:nowrap}
  .nav::after{
    content:"";width:24px;height:24px;margin-left:14px;background:#fff;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18M3 12h18M3 18h18' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/22px no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18M3 12h18M3 18h18' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/22px no-repeat;
  }
  .brand-txt b{font-size:13.5px}
  .brand-txt span{font-size:8px}

  /* everything stacks to one column */
  .g2,.g3,.g4,.path{grid-template-columns:1fr}
  .grid{gap:16px}
  .g-split > img{height:230px}
  .hero img{height:230px}
  .band img{height:210px}
  .path .step{text-align:left;display:grid;grid-template-columns:auto 1fr;gap:0 16px}
  .path .step .chip{margin:0;grid-row:span 2}

  .card{padding:20px}
  .mcard img,.slot{height:180px}
  .slot.tall{height:200px}

  /* tap targets stay >=44px tall */
  .btn{padding:13px 24px;display:block;text-align:center}
  .hero .btns{flex-direction:column;gap:10px}
  .btn-sm{display:inline-block}

  .sub-row{flex-direction:column;max-width:none}
  .acc .q{padding:15px 18px}
  .acc .q p{font-size:15px}
  .acc .a{padding:0 18px 18px}
  .ftr .cols{grid-template-columns:1fr;gap:22px}
}