/* ============================================================
   HermanWa Marketing Design System — "Paper & Screen"
   ============================================================
   The record is paper: warm architectural white, ink, deep pine,
   brass reserved for sign-off. Live surfaces are dark instrument
   screens (.screen scope) with a phosphor-green trace.

   Legacy aliases (--bg, --card, --text, --accent, …) are kept so
   existing inline styles across marketing pages keep working.
   ============================================================ */

@font-face{font-family:'Bricolage';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/BricolageGrotesque-600.woff2) format('woff2')}
@font-face{font-family:'Bricolage';font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/BricolageGrotesque-800.woff2) format('woff2')}
@font-face{font-family:'PlexMono';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexMono-400.woff2) format('woff2')}
@font-face{font-family:'PlexMono';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexMono-500.woff2) format('woff2')}
@font-face{font-family:'PublicSans';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/PublicSans-400.woff2) format('woff2')}
@font-face{font-family:'PublicSans';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/PublicSans-600.woff2) format('woff2')}

:root{
  /* paper world */
  --paper:#F5F2E9;
  --sheet:#FBF9F2;
  --well:#EDE9DC;
  --ink:#182619;
  --ink-muted:#63705F;
  --pine:#1D4A37;
  --pine-solid:#123626;
  --on-pine:#F1F5EC;
  --brass:#997323;
  --brass-soft:rgba(153,115,35,.1);
  --red-hw:#BC4326;
  --red-soft:rgba(188,67,38,.08);
  --line-hw:#D6D0BE;
  --line-soft:#E5E0D0;
  --grid:rgba(29,74,55,.075);
  --shadow-hw:0 1px 2px rgba(24,38,25,.05),0 14px 40px rgba(24,38,25,.08);

  /* screen world (live surfaces) */
  --screen-bg:#0A1410;
  --screen-bg2:#101C15;
  --screen-ink:#DCEBE0;
  --screen-muted:#7E967F;
  --screen-line:#243A2B;
  --screen-line-soft:#182A1E;
  --trace:#3FD68F;
  --amber:#E8B84B;

  /* type */
  --display:'Bricolage',system-ui,sans-serif;
  --body:'PublicSans',system-ui,sans-serif;
  --mono:'PlexMono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ---- legacy aliases (old neon theme names, new values) ---- */
  --bg:var(--paper);
  --card:var(--sheet);
  --surface:var(--sheet);
  --surface2:var(--well);
  --text:var(--ink);
  --muted:var(--ink-muted);
  --line:var(--line-hw);
  --border:var(--line-hw);
  --accent:var(--pine);
  --accent2:var(--brass);
  --warm:var(--brass);
  --accent-glow:rgba(29,74,55,.12);
  --shadow:var(--shadow-hw);
  --radius:6px;
  --max:1140px;
}

/* ---- screen scope: flips any subtree to the instrument world ---- */
.screen{
  --sheet:var(--screen-bg);
  --card:var(--screen-bg);
  --surface:var(--screen-bg);
  --well:var(--screen-bg2);
  --surface2:var(--screen-bg2);
  --paper:var(--screen-bg);
  --bg:var(--screen-bg);
  --ink:var(--screen-ink);
  --text:var(--screen-ink);
  --ink-muted:var(--screen-muted);
  --muted:var(--screen-muted);
  --line-hw:var(--screen-line);
  --line:var(--screen-line);
  --border:var(--screen-line);
  --line-soft:var(--screen-line-soft);
  --pine:var(--trace);
  --accent:var(--trace);
  --pine-solid:#1E4B38;
  --on-pine:#E9F5EC;
  --brass:#C9A455;
  --accent2:#C9A455;
  --brass-soft:rgba(201,164,85,.12);
  --red-hw:#E06B4F;
  --red-soft:rgba(224,107,79,.12);
  background:var(--screen-bg);
  color:var(--screen-ink);
}

/* ---- base ---- */
[id]{scroll-margin-top:80px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}

h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(40px,4.6vw,63px);line-height:1.0;margin:0 0 22px}
h2{font-weight:600;font-size:clamp(26px,3.2vw,38px);line-height:1.1;margin:0 0 14px}
h3{font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px}
.lead{color:var(--ink-muted);font-size:16.5px;margin:0 0 24px;max-width:56ch}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:5px;text-decoration:none;cursor:pointer;
  border:1px solid var(--line-hw);color:var(--ink);background:transparent;
  transition:background .15s,border-color .15s,color .15s,filter .15s;
}
.btn:hover{border-color:var(--ink-muted)}
.btn.primary{background:var(--pine);color:var(--on-pine);border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}
.btn.large{padding:15px 28px;font-size:16px}
.btn.ghost{background:transparent;border-color:var(--line-hw);color:var(--ink)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---- structural vernacular ---- */
.eyebrow,.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pine);
  background:none;border:none;padding:0;border-radius:0;
}
.eyebrow::before,.kicker::before{content:"";width:22px;height:1px;background:var(--brass);flex:none}
.kicker-dot{display:none}
.sec-mark{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin:0 0 14px;
  display:flex;align-items:center;gap:12px;
}
.sec-mark::after{content:"";height:1px;background:var(--line-hw);flex:1;max-width:120px}
.tag{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brass);
  border:1px solid var(--brass);border-radius:4px;background:var(--brass-soft);
  padding:3px 9px;margin-bottom:12px;
}

/* ---- sections & cards ---- */
.section{padding:78px 0;border-bottom:1px solid var(--line-hw)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.box,.card{
  background:var(--sheet);border:1px solid var(--line-hw);border-radius:6px;
  padding:24px;box-shadow:var(--shadow-hw);
}
.box p,.card p{color:var(--ink-muted);font-size:14px;line-height:1.6;margin:0}
.box ul{color:var(--ink-muted);font-size:14px;line-height:1.7;margin:12px 0 0;padding-left:18px}
.value-icon{
  width:40px;height:40px;border:1.5px solid var(--pine);border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:var(--pine);
  background:transparent;margin-bottom:14px;
}
.value-icon svg{width:20px;height:20px}
.value-icon.warm{border-color:var(--brass);color:var(--brass)}
.value-icon.purple{border-color:var(--pine);color:var(--pine)}

/* ---- footer title block ---- */
.tblock{
  margin-top:40px;border:1px solid var(--line-hw);background:var(--sheet);
  display:grid;grid-template-columns:2fr 1fr 1fr 2fr;
}
.tcell{padding:12px 16px;border-left:1px solid var(--line-hw)}
.tcell:first-child{border-left:none}
.tcell .k{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted);display:block;margin-bottom:3px}
.tcell .v{font-family:var(--mono);font-size:12px;color:var(--ink)}

/* ---- forms ---- */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  font-family:var(--body);font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-hw);border-radius:5px;
  padding:10px 12px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(29,74,55,.08)}
label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);display:block;margin:12px 0 5px}

/* ---- reveal ---- */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .fade-in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive ---- */
@media (max-width:960px){
  .grid2,.grid3{grid-template-columns:1fr}
  .tblock{grid-template-columns:1fr 1fr}
  .tcell{border-top:1px solid var(--line-hw)}
  .tcell:nth-child(-n+2){border-top:none}
  .tcell:nth-child(odd){border-left:none}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
}