/*
  PHW shared stylesheet (phwltd.com and subdomains)
  Loaded absolutely as /_shared/phw/site.css

  COMPONENT CLASSES (every page reuses these; do not rename)
  Layout:    .wrap .hero .eyebrow .lede section h1 h2 h3 .sub
  Header:    header header .wrap header nav .menu-btn .menu-btn span .navlist
  Footer:    footer footer .wrap footer nav
  Buttons:   .btn .btn.ghost .btn.alt .btn.block
  Cards:     .grid .card .card .tag .card a.go   |   .prod .prod .code .prod .why .prod a.mb
  Strip:     .strip .strip .item
  Callouts:  .call .call.warn .call .lbl
  Verify:    .verify-box .verify-box .row
  Sample:    .sample .sample .lbl
  Tables:    .tw table (wrap any <table> in a div.tw for horizontal scroll)
  FAQ:       .faq details .faq summary
  Chips:     .chips .chip .chip.active
  Contents:  .contents .contents ol
  Forms:     form .fgrid .fgrid .full .field label input select textarea .honey button
  Banner:    .sent-banner .sent-banner.show
  Photo:     .photo (add data-slot="name" for Manus; shows a finished dark gradient fallback with no image)

  BRAND (24 Sep restyle): light ground to match the certificates and the phw-verify
  pages, PHW blue in place of the old dark-teal look. --teal/--teal-d/--ink kept as
  token NAMES (values changed) so nothing referencing them breaks; new tokens added:
  --ribbon1/--ribbon2 (logo ribbon accent), --dark/--dark2 (charcoal band, hero+footer),
  --ok/--ok-bg/--warn/--warn-bg (status colours, matched to phw-verify).
*/

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

:root{
  --bg:#f4f7fa; --bg2:#eef2f6; --card:#ffffff; --card2:#f8fafc;
  --line:#dfe6ee; --line2:#c9d3de;
  --tx:#0d1b2a; --mid:#5a6b7d; --dim:#7c8ea1;
  --teal:#1170b8; --teal-d:#0b568f; --ink:#ffffff;
  --ribbon1:#8ec8f0; --ribbon2:#3b4fa3;
  --dark:#2b2f33; --dark2:#1a1d20;
  --amber:#8a6d1f; --red:#b23b3b; --green:#0f7a4d;
  --ok:#0f7a4d; --ok-bg:#e8f6ef; --warn:#8a6d1f; --warn-bg:#fff4e0;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--tx);
  font:400 17px/1.62 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.011em;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ---------- header ---------- */
header{
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px); position:sticky; top:0; z-index:50;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;gap:16px}
header img{height:40px;width:auto;display:block}
header nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
header nav a{color:var(--mid);font-size:14.5px;white-space:nowrap}
header nav a:hover{color:var(--tx);text-decoration:none}
header nav a.btn{color:var(--ink)}
.menu-btn{
  display:none; width:40px; height:40px; border-radius:9px; border:1px solid var(--line2);
  background:transparent; cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:5px; flex-shrink:0;
}
.menu-btn span{display:block;width:19px;height:2px;background:var(--tx);border-radius:2px}

/* ---------- hero (dark charcoal band, white text; ribbon accent rule on top) ---------- */
.hero{
  padding:74px 0 58px; border-bottom:1px solid var(--dark2);
  background:linear-gradient(165deg,var(--dark) 0%,var(--dark2) 100%);
  position:relative; color:#fff;
}
.hero:before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--ribbon1),var(--ribbon2));
}
.eyebrow{color:var(--ribbon1);font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;margin-bottom:20px}
h1{font-size:clamp(30px,5.4vw,50px);line-height:1.08;letter-spacing:-.031em;font-weight:680;margin-bottom:24px;max-width:20ch;color:#fff}
h1 em{font-style:normal;color:var(--ribbon1)}
.lede{font-size:20px;line-height:1.55;color:rgba(255,255,255,.76);max-width:62ch}
.lede strong{color:#fff;font-weight:600}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero .btn.ghost,.hero .btn.alt{color:#fff;border-color:rgba(255,255,255,.35)}
.hero .btn.ghost:hover,.hero .btn.alt:hover{border-color:var(--ribbon1);color:var(--ribbon1);background:transparent}

/* ---------- sections / type ---------- */
section{padding:60px 0;border-bottom:1px solid var(--line)}
h2{font-size:27px;letter-spacing:-.023em;font-weight:660;margin-bottom:10px;color:var(--tx)}
.sub{color:var(--dim);font-size:15px;margin-bottom:32px;max-width:64ch}
h3{font-size:18px;font-weight:640;margin-bottom:10px;letter-spacing:-.012em;color:var(--tx)}
p{margin-bottom:16px;color:var(--mid)}
p strong{color:var(--tx);font-weight:600}
p:last-child{margin-bottom:0}
ul{list-style:none;margin-bottom:16px}
li{padding-left:23px;position:relative;margin-bottom:9px;color:var(--mid);font-size:15.5px}
li:before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
li strong{color:var(--tx);font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--teal); color:var(--ink); text-decoration:none; font-weight:640;
  padding:13px 22px; border-radius:11px; font-size:15px; border:1px solid var(--teal); text-align:center;
  cursor:pointer;
}
.btn:hover{background:var(--teal-d);border-color:var(--teal-d);text-decoration:none}
.btn.ghost,.btn.alt{background:transparent;color:var(--tx);border:1px solid var(--line2)}
.btn.ghost:hover,.btn.alt:hover{border-color:var(--teal);color:var(--teal);background:transparent}
.btn.block{display:block;width:100%}

/* ---------- grid / cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card,.prod{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:24px 24px 22px;transition:border-color .18s}
.card:hover,.prod:hover{border-color:var(--teal)}
.card .tag,.prod .code{display:inline-block;color:var(--teal);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.card p,.prod .why{font-size:15px;margin-bottom:18px;color:var(--mid)}
.card a.go,.prod a.mb{font-weight:600;font-size:14.5px;display:inline-block}

.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.strip .item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.strip .item h3{font-size:16px;margin-bottom:8px}
.strip .item p{font-size:14.5px;margin-bottom:12px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{background:var(--card);border:1px solid var(--line2);color:var(--mid);font-size:13.5px;font-weight:600;
  padding:8px 15px;border-radius:20px;cursor:pointer}
.chip.active{background:var(--teal);color:var(--ink);border-color:var(--teal)}

.contents{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:26px 28px}
.contents ol{list-style:none;counter-reset:c}
.contents li{padding-left:40px;margin-bottom:11px}
.contents li:before{counter-increment:c;content:counter(c,decimal-leading-zero);background:none;
  color:var(--teal);font-weight:640;font-size:12.5px;width:28px;left:0;top:2px;
  font-variant-numeric:tabular-nums;letter-spacing:.03em}

/* ---------- callouts ---------- */
.call{border-left:3px solid var(--teal);background:var(--card2);padding:20px 24px;border-radius:0 13px 13px 0;margin:26px 0}
.call.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.call p:last-child{margin-bottom:0}
.call .lbl{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);font-weight:640;margin-bottom:8px}
.call.warn .lbl{color:var(--warn)}

.verify-box{background:var(--card2);border:1px solid var(--line2);border-radius:16px;padding:30px}
.verify-box .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.verify-box code{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:14px;color:var(--teal-d)}

.sample{background:var(--card);border:1px solid var(--teal);border-radius:15px;padding:28px}
.sample .lbl{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);font-weight:640;margin-bottom:10px}

/* ---------- tables (always wrap in .tw) ---------- */
.tw{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
th{text-align:left;padding:12px 15px;background:var(--card2);color:var(--dim);font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;font-weight:640;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:13px 15px;border-bottom:1px solid var(--line);color:var(--mid);vertical-align:top}
tr:last-child td{border-bottom:none}
td.hl{color:var(--tx);font-weight:600}
td.tl{color:var(--teal-d);font-weight:640;font-variant-numeric:tabular-nums}

/* ---------- FAQ ---------- */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:640;color:var(--tx);font-size:15.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:var(--teal);font-weight:400}
.faq details[open] summary:after{content:"\2212"}
.faq p{margin-top:12px;margin-bottom:0}

/* ---------- forms ---------- */
form{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:28px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid .full{grid-column:1/-1}
.field{margin-bottom:16px}
label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px;letter-spacing:.02em}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:9px;
  padding:11px 13px;color:var(--tx);font:inherit;font-size:15px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{min-height:100px;resize:vertical}
.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
form button{border:none}

.sent-banner{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok);
  border-radius:11px;padding:14px 18px;margin-bottom:24px;font-size:15px;display:none}
.sent-banner.show{display:block}

/* ---------- photo slots ----------
   Manus drops a real <img> inside; until then this shows a finished-looking
   navy-to-blue gradient fallback so the page never looks empty. */
.photo{
  position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(142,200,240,.22) 0%, rgba(142,200,240,0) 55%),
    linear-gradient(155deg, var(--dark) 0%, var(--teal-d) 65%, var(--teal) 100%);
  aspect-ratio:16/10; min-height:200px;
}
.photo:before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:34px 34px;
}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- footer (dark charcoal band, white text; italic tagline) ---------- */
footer{padding:44px 0 60px;color:rgba(255,255,255,.68);font-size:13.5px;line-height:1.7;
  background:var(--dark)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a{color:rgba(255,255,255,.68)}
footer a:hover{color:var(--ribbon1)}
footer strong{color:rgba(255,255,255,.85)}
footer .tagline{display:block;margin-top:14px;font-style:italic;color:rgba(255,255,255,.5)}

/* ---------- mobile ---------- */
@media(max-width:720px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .menu-btn{display:flex}
  header img{height:34px}
  header nav{
    display:none; position:fixed; inset:65px 0 0 0; background:var(--card);
    flex-direction:column; align-items:stretch; gap:0; padding:14px 20px; overflow-y:auto;
  }
  header nav.open{display:flex}
  header nav a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:16.5px}
  header nav a.btn{margin-top:14px;border-bottom:none;text-align:center}
  .hero{padding:48px 0 42px}
  section{padding:46px 0}
  h1{font-size:31px}
  .lede{font-size:17.5px}
  .grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  footer .wrap{flex-direction:column}
}

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