/* ==========================================================================
   CyberCraft
   Tokens from DESIGN.md, applied under the restraint rules:
   purple is the only interactive accent, gold is reserved for primary CTAs,
   eyebrows on dark, and highlighted numbers. No gradients. No lavender wash
   across large areas.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root{
  /* the seven core roles */
  --white:#ffffff;
  --surface:#f7f5fb;      /* lavender mist */
  --ink:#1e2a4a;          /* ink navy, headings */
  --muted:#6b6b8b;        /* slate */
  --line:#ede9f5;         /* lavender line */
  --accent:#7b5ea7;       /* cyber purple */
  --gold:#e2b340;         /* signal gold */

  /* measured support tokens, each with a named job */
  --navy:#1a1a2e;         /* hero and footer backgrounds only */
  --body:#4a4a6a;         /* paragraph text */
  --ok:#16a34a;
  --warn:#d97706;
  --alert:#e53e3e;
  --gold-light:#f4d47c;
  --purple-dark:#5d4580;

  /* derived, not new colour: tints of the tokens above */
  --line-2:#ded6ec;
  --rung-num:#8d80b0;   /* 40px/800 index numerals, 3.59:1 white, 3.32:1 lavender */
  --accent-tint:#f1ecf7;
  --gold-tint:#fbf3de;
  --on-navy:#e8e6f0;
  --on-navy-dim:#a8a6bd;

  --fs:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI',
       'Helvetica Neue', Arial, sans-serif;

  --wrap:1200px;
  --gutter:32px;
  --pad:clamp(48px, 6vw, 80px);
  --r:8px;      /* buttons */
  --rc:14px;    /* cards */
}

/* --------------------------------------------------------------- reset -- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--fs);
  font-size:clamp(16px, 12.8px + 0.25vw, 19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--purple-dark)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:2px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--navy); font-weight:700;
  padding:12px 20px; border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------- type -- */

h1,h2,h3,h4{
  color:var(--ink); font-weight:800; letter-spacing:-0.5px;
  line-height:1.16; margin:0 0 .5em;
}
h1{font-size:clamp(1.95rem, 1.5rem + 1.8vw, 2.6rem); line-height:1.1}
h2{font-size:clamp(1.5rem, 1.24rem + 1.05vw, 2.05rem)}
h3{font-size:clamp(1.15rem, 1.03rem + .48vw, 1.42rem); letter-spacing:-0.3px}
h4{font-size:clamp(1.02rem, .97rem + .22vw, 1.14rem); letter-spacing:-0.2px}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700; color:var(--ink)}
q{quotes:'\201C' '\201D'}

.eyebrow{
  font-size:.72rem; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); margin:0 0 .85em;
}
.lede{
  font-size:clamp(1.02rem, .96rem + .3vw, 1.2rem);
  color:var(--body); max-width:66ch; margin-bottom:0;
}
.muted{color:var(--muted)}
.tight{max-width:70ch}

/* ------------------------------------------------------------- layout -- */

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,32px)}
section{padding:var(--pad) 0}
section.alt{background:var(--surface); border-block:1px solid var(--line)}
section.navy{background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden}
section.navy h2,section.navy h3,section.navy h4{color:#fff}
section.navy .lede,section.navy p{color:var(--on-navy)}
section.navy .eyebrow{color:var(--gold)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter)}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter)}
.grid2-wide{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:start}
.grid-side{display:grid; grid-template-columns:1fr 340px; gap:clamp(28px,4vw,56px); align-items:start}
.stack-lg{margin-top:clamp(28px,3.6vw,44px)}
.stack-md{margin-top:clamp(20px,2.6vw,32px)}

@media (max-width:900px){
  .grid2,.grid3,.grid2-wide,.grid-side{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- nav --- */

.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:clamp(8px,1.4vw,22px); padding-block:13px; flex-wrap:wrap}
.brand{
  font-weight:800; font-size:1.14rem; letter-spacing:-0.5px;
  color:var(--ink); text-decoration:none; margin-right:auto;
}
.brand:hover{color:var(--accent)}
.brand span{color:var(--accent)}
.nav .n{
  color:var(--body); text-decoration:none; font-size:.88rem; font-weight:600;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.nav .n:hover{color:var(--accent); border-bottom-color:var(--line-2)}
.nav .n.here{color:var(--ink); border-bottom-color:var(--accent)}

.btn{
  display:inline-block; background:var(--gold); color:var(--navy);
  font-weight:800; font-size:.88rem; letter-spacing:.1px;
  padding:11px 20px; border-radius:var(--r); text-decoration:none;
  border:1px solid var(--gold); transition:background .15s, transform .15s;
}
.btn:hover{background:var(--gold-light); border-color:var(--gold-light); color:var(--navy); transform:translateY(-1px)}
.btn.lg{font-size:.98rem; padding:14px 26px}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.ghost:hover{background:var(--accent-tint); border-color:var(--accent); color:var(--accent)}
section.navy .btn.ghost{color:#fff; border-color:#4a4a6a}
section.navy .btn.ghost:hover{background:rgba(255,255,255,.08); border-color:var(--on-navy-dim); color:#fff}

.go{
  display:inline-block; color:var(--accent); font-weight:700; font-size:.92rem;
  text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px;
}
.go:hover{border-bottom-color:var(--accent)}

/* --------------------------------------------------------------- hero -- */

.hero{
  background-color:var(--navy);
  background-image:var(--hero, none);
  background-size:cover; background-position:center;
  color:var(--on-navy); position:relative; overflow:hidden;
  padding:clamp(52px,7vw,92px) 0 clamp(44px,5.5vw,72px);
}
.hero::before{                     /* navy scrim, keeps reversed text legible */
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(26,26,46,.94) 0%, rgba(26,26,46,.86) 52%, rgba(26,26,46,.72) 100%);
}
.hero > .wrap{position:relative; z-index:2}
.hero h1{color:#fff}
.hero .eyebrow{color:var(--gold)}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(26px,4vw,58px); align-items:end}
.hero-side p{color:var(--on-navy); font-size:1.02rem; margin-bottom:.85em}
.hero-side p:last-child{margin-bottom:0}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; align-items:start} }

/* faint AU/NZ landmass watermark, white on navy at about 4% */
.watermark{
  position:absolute; right:-3%; bottom:-14%; width:min(62%, 720px);
  height:auto; display:block;
  opacity:.045; pointer-events:none; z-index:1;
}
section.navy .watermark{bottom:-30%; right:-6%; opacity:.035}

/* --------------------------------------------------------------- doors -- */

.doors{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(30px,4vw,52px)}
.door{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rc); padding:clamp(20px,2.4vw,28px);
  backdrop-filter:blur(6px);
}
.door .q{
  color:var(--gold); font-weight:700; font-size:.86rem;
  letter-spacing:.3px; margin:0 0 .55em;
}
.door h3{color:#fff; margin-bottom:.5em}
.door p{color:var(--on-navy); font-size:.96rem; margin-bottom:1em}
.door .go{color:var(--gold); border-bottom-color:rgba(226,179,64,.4)}
.door .go:hover{color:var(--gold-light); border-bottom-color:var(--gold-light)}
.doors-note{margin-top:18px; color:var(--on-navy-dim); font-size:.9rem}
@media (max-width:768px){ .doors{grid-template-columns:1fr} }

/* --------------------------------------------------------------- trust -- */

.trust{background:var(--surface); border-bottom:1px solid var(--line)}
.trust .wrap{
  display:flex; flex-wrap:wrap; gap:10px clamp(16px,2.6vw,34px);
  padding-block:14px; font-size:.83rem; color:var(--muted); font-weight:600;
}
.trust .t1{color:var(--ink); font-weight:800}

/* ------------------------------------------------------------- crumbs -- */

.crumbs{font-size:.8rem; color:var(--muted); padding:14px 0 0}
.crumbs a{color:var(--body); text-decoration:none}
.crumbs a:hover{color:var(--accent); text-decoration:underline}
.crumbs span{color:var(--muted); padding:0 7px}

/* --------------------------------------------------- page head (inner) -- */

.phead{padding:clamp(34px,4.4vw,60px) 0 clamp(26px,3vw,40px); border-bottom:1px solid var(--line)}
.phead h1{margin-bottom:.4em}
.phead .lede{max-width:72ch}

/* --------------------------------------------------------------- cards -- */

.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--rc); padding:clamp(20px,2.2vw,28px);
  box-shadow:0 1px 2px rgba(30,42,74,.04);
  transition:transform .16s, box-shadow .16s;
}
.card.hoverable:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(30,42,74,.09)}
.card.ruled{border-top:3px solid var(--accent)}
section.alt .card{border-color:var(--line-2)}

/* pain quotes */
.pain{
  background:var(--white); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--rc); padding:clamp(17px,1.9vw,23px);
}
.pain q{display:block; color:var(--ink); font-weight:600; font-size:1rem; line-height:1.45; margin-bottom:.7em}
.pain .route{font-size:.83rem; font-weight:700; color:var(--accent)}

/* the four moves */
.moves{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(26px,3.4vw,42px)}
.move{background:var(--white); border:1px solid var(--line); border-radius:var(--rc); padding:20px}
.move .n{
  width:30px; height:30px; border-radius:50%; background:var(--accent-tint);
  color:var(--accent); font-weight:800; font-size:.9rem;
  display:grid; place-items:center; margin-bottom:.75em;
}
.move h4{margin-bottom:.4em}
.move p{font-size:.9rem; margin-bottom:.9em}
.move .hrs{
  display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.8px;
  text-transform:uppercase; color:var(--purple-dark);
  background:var(--accent-tint); padding:4px 9px; border-radius:var(--r);
}
.moves-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){ .moves,.moves-5{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .moves,.moves-5{grid-template-columns:1fr} }

.sum{
  margin-top:18px; padding:15px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--rc);
  font-size:.94rem; color:var(--body);
}

/* SKU / price cards */
.skus{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(26px,3.4vw,42px)}
.skus-3{grid-template-columns:1fr 1fr 1fr}
.sku{
  background:var(--white); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:var(--rc); padding:clamp(20px,2.3vw,28px);
}
section.alt .sku{border-color:var(--line-2); border-top-color:var(--accent)}
.sku h3{margin-bottom:.35em}
.sku .price{
  font-size:clamp(1.7rem, 1.4rem + 1.1vw, 2.3rem); font-weight:800;
  letter-spacing:-1px; color:var(--ink); line-height:1.05; margin:.15em 0 .3em;
}
.sku .price .u{font-size:.42em; font-weight:600; letter-spacing:0; color:var(--muted)}
.sku .terms{font-size:.79rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted)}
.sku ul{margin:1.1em 0 0; padding:0; list-style:none}
.sku li{position:relative; padding-left:20px; margin-bottom:.62em; font-size:.94rem}
.sku li:last-child{margin-bottom:0}
.sku li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}
@media (max-width:900px){ .skus,.skus-3{grid-template-columns:1fr} }

/* the printed arithmetic */
.maths{
  margin-top:clamp(26px,3.2vw,40px); background:var(--navy); color:var(--on-navy);
  border-radius:var(--rc); padding:clamp(24px,3vw,38px); position:relative; overflow:hidden;
}
.maths .calc{
  font-size:clamp(1.25rem, 1.05rem + .8vw, 1.7rem); font-weight:800;
  color:var(--gold); letter-spacing:-.5px; line-height:1.25; margin-bottom:.6em;
}
.maths p{color:var(--on-navy); font-size:.97rem}

/* rungs */
.rung{display:grid; grid-template-columns:64px 1fr; gap:clamp(16px,2vw,28px); padding:clamp(24px,3vw,38px) 0; border-top:1px solid var(--line)}
.rung:first-child{border-top:0; padding-top:0}
.rung .num{
  font-size:2.5rem; font-weight:800; line-height:1; color:var(--rung-num);
  letter-spacing:-2px;
}
.rung h3{margin-bottom:.3em}
@media (max-width:768px){ .rung{grid-template-columns:1fr; gap:8px} .rung .num{font-size:1.9rem} }

.prods{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; margin-top:1.2em}
.prod{
  display:flex; flex-direction:column; gap:.45em;
  background:var(--white); border:1px solid var(--line); border-radius:var(--rc);
  padding:17px 19px; transition:transform .16s, box-shadow .16s, border-color .16s;
}
.prod:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(30,42,74,.08); border-color:var(--line-2)}
section.alt .prod{border-color:var(--line-2)}
.prod .pn{font-weight:800; color:var(--ink); font-size:1rem; letter-spacing:-.2px}
.prod .pd{font-size:.89rem; color:var(--body); flex:1}
.prod .pp{
  font-size:.86rem; font-weight:800; color:var(--purple-dark);
  background:var(--accent-tint); align-self:flex-start;
  padding:4px 10px; border-radius:var(--r);
}

/* -------------------------------------------------- buyer's paperwork -- */

.artifact{
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--rc);
  box-shadow:0 14px 40px rgba(30,42,74,.10); overflow:hidden;
}
.art-head{
  display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
  padding:clamp(17px,2vw,23px) clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--line); background:var(--surface);
}
.art-head .k{
  font-size:.7rem; font-weight:800; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--muted); margin-bottom:.45em;
}
.art-head h4{margin:0}
.stamp{
  display:block; width:max-content; max-width:100%; margin-left:auto; align-self:flex-start;
  background:var(--gold-tint); color:#8a6510; border:1px solid #edd9a4;
  font-size:.64rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r); flex:none;
}
.memo .stamp{margin-bottom:.9em}
.art-body{padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px) clamp(18px,2.2vw,24px)}
.art-row{
  display:flex; gap:18px; justify-content:space-between; align-items:baseline;
  padding:9px 0; border-bottom:1px dashed var(--line);
  font-size:.93rem; color:var(--body);
}
.art-row:last-of-type{border-bottom:0}
.art-row .v{font-weight:800; color:var(--ink); text-align:right; flex:none; font-variant-numeric:tabular-nums}
.art-verdict{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:space-between;
  margin-top:14px; padding-top:15px; border-top:2px solid var(--ink);
}
.tag{
  font-size:.7rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  background:var(--accent-tint); color:var(--purple-dark);
  padding:5px 11px; border-radius:var(--r);
}
.tag.build{background:var(--gold-tint); color:#8a6510}
.art-note{margin-top:14px; font-size:.86rem; color:var(--muted)}

.memo{
  background:var(--white); border:1px solid var(--line); border-radius:var(--rc);
  padding:clamp(19px,2.2vw,26px); display:flex; flex-direction:column;
}
.memo .k{font-size:.7rem; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.5em}
.memo h3{margin-bottom:.5em}
.memo p{font-size:.93rem; flex:1}
.memo .verdict{
  align-self:flex-start; margin-top:1em;
  font-size:.72rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:#8a2020; background:#fbeaea; border:1px solid #f0cccc;
  padding:5px 11px; border-radius:var(--r);
}

/* --------------------------------------------------------- calculator -- */

.calcbox{background:var(--white); border:1px solid var(--line-2); border-radius:var(--rc); padding:clamp(20px,2.4vw,30px)}
.calc-rows{display:flex; flex-direction:column; margin-bottom:1.3em}
.calc-rows > div{
  display:flex; gap:18px; justify-content:space-between; align-items:baseline;
  padding:10px 0; border-bottom:1px dashed var(--line); font-size:.93rem;
}
.calc-rows > div:last-child{border-bottom:0}
.calc-rows .v{font-weight:800; color:var(--ink); flex:none; text-align:right; font-variant-numeric:tabular-nums}
.calc-out{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:1.2em}
.calc-out > div{background:var(--surface); border:1px solid var(--line); border-radius:var(--rc); padding:16px 18px}
.calc-out .k{display:block; font-size:.76rem; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--muted); margin-bottom:.4em}
.calc-out .big{font-size:clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-weight:800; color:var(--ink); letter-spacing:-1px; font-variant-numeric:tabular-nums}
.calc-out .win{color:#15603f}
.working{
  background:var(--navy); color:var(--on-navy); border-radius:var(--rc);
  padding:17px 20px; font-size:.9rem; line-height:1.62;
}
.working strong{color:var(--gold)}
@media (max-width:768px){ .calc-out{grid-template-columns:1fr} }

/* ------------------------------------------------------- gates / faq --- */

.gates{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.gate{display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:start}
.gate .n{
  width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--gold);
  font-weight:800; display:grid; place-items:center; font-size:.95rem;
}
.gate h4{margin-bottom:.3em}
.gate p{font-size:.92rem; margin:0}
@media (max-width:768px){ .gates{grid-template-columns:1fr} }

.faq{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,34px)}
.faq > div{border-top:2px solid var(--line-2); padding-top:16px}
.faq h4{margin-bottom:.4em; color:var(--ink)}
.faq p{font-size:.93rem; margin:0}
@media (max-width:768px){ .faq{grid-template-columns:1fr} }

.risk-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px}
.risk-grid > div{background:var(--white); border:1px solid var(--line); border-radius:var(--rc); padding:19px}
section.alt .risk-grid > div{border-color:var(--line-2)}
.risk-grid h4{margin-bottom:.35em}
.risk-grid p{font-size:.89rem; margin:0}

.spec{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:clamp(22px,2.6vw,32px);
  padding-top:18px; border-top:1px solid var(--line);
  font-size:.84rem; color:var(--muted); font-weight:600;
}

/* -------------------------------------------------------------- people -- */

.people{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px)}
.person{display:grid; grid-template-columns:104px 1fr; gap:18px; align-items:start}
.person .ph{
  width:104px; height:130px; border-radius:var(--rc);
  background:var(--surface); border:1px dashed var(--line-2);
  display:grid; place-items:center; text-align:center;
  font-size:.7rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color:var(--muted); line-height:1.4;
}
.person h4{margin-bottom:.15em}
.person .role{display:block; font-size:.82rem; font-weight:700; color:var(--accent); margin-bottom:.6em}
.person p{font-size:.92rem; margin:0}
.tier2{margin-top:clamp(20px,2.4vw,30px); padding-top:clamp(20px,2.4vw,30px); border-top:1px solid var(--line)}
.tier2 .person{max-width:560px}
@media (max-width:768px){ .people{grid-template-columns:1fr} }
@media (max-width:420px){ .person{grid-template-columns:1fr} .person .ph{width:100%; height:96px} }

.absence{
  background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--rc);
  padding:clamp(22px,2.6vw,32px);
}
.absence h3{margin-bottom:.5em}

.owed{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:#8a5a00; background:#fdf1d8;
  border:1px solid #ecd2a0; padding:2px 8px; border-radius:var(--r);
  vertical-align:baseline; margin-right:5px;
}

/* ------------------------------------------------------------- contact -- */

.contact{background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden}
.contact h2{color:#fff}
.contact .eyebrow{color:var(--gold)}
.contact p{color:var(--on-navy)}
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,58px); align-items:start; position:relative; z-index:2}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }

.form-note{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rc); padding:clamp(18px,2.2vw,26px);
}
.field{margin-bottom:14px}
.field label{display:block; font-size:.79rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.contact .field label, section.navy .field label{color:var(--on-navy-dim)}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--fs); font-size:.95rem; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r); padding:11px 13px;
}
.field textarea{min-height:104px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7d7b96}

/* --------------------------------------------------------- page-to-page -- */

.pagenav{border-top:1px solid var(--line); background:var(--surface)}
.pagenav .wrap{display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-block:clamp(22px,2.8vw,34px)}
.pagenav a{
  display:block; text-decoration:none; background:var(--white);
  border:1px solid var(--line-2); border-radius:var(--rc); padding:18px 20px;
  transition:transform .16s, box-shadow .16s;
}
.pagenav a:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(30,42,74,.08)}
.pagenav .k{display:block; font-size:.7rem; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); margin-bottom:.4em}
.pagenav .t{display:block; font-weight:800; color:var(--ink); font-size:1.02rem; letter-spacing:-.2px}
.pagenav .d{display:block; font-size:.87rem; color:var(--body); margin-top:.3em}
@media (max-width:768px){ .pagenav .wrap{grid-template-columns:1fr} }

/* -------------------------------------------------------------- footer -- */

footer{background:var(--navy); color:var(--on-navy-dim); padding:clamp(40px,5vw,64px) 0 28px; position:relative; overflow:hidden}
footer .wrap{position:relative; z-index:2}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(20px,3vw,40px)}
footer h4{color:#fff; font-size:.82rem; letter-spacing:1.3px; text-transform:uppercase; margin-bottom:1em}
footer a{display:block; color:var(--on-navy-dim); text-decoration:none; font-size:.9rem; margin-bottom:.6em}
footer a:hover{color:var(--gold)}
footer p{font-size:.9rem; color:var(--on-navy-dim)}
.ack{
  margin-top:clamp(30px,4vw,48px); padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem; line-height:1.62; color:#8b899f;
}
.ack p{font-size:.82rem; color:#8b899f}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }

/* ------------------------------------------------------------ mobile --- */

@media (max-width:768px){
  .nav{position:static}
  .nav .wrap{gap:6px 14px}
}


/* ==========================================================================
   Public build.
   ========================================================================== */
.pricenote{background:var(--accent-tint); border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; padding:20px 24px; margin:1.6em 0}
.pricenote h4{margin:0 0 8px; font-size:1rem; color:var(--ink)}
.pricenote b{display:block; margin-bottom:8px; font-size:1rem; color:var(--ink)}
.pricenote p{margin:0 0 .7em; color:var(--body); font-size:.95rem; line-height:1.65}
.pricenote p:last-child{margin-bottom:0}

/* Portrait slots become initial discs. A dashed empty box reads as a missing
   thing, and a solid one reads as a deliberate avatar until the photographs
   arrive. Purple on lavender is 4.85:1, which clears AA at any size. */
.person .ph{background:var(--accent-tint); border:0; color:var(--accent);
  font-size:1.6rem; letter-spacing:1px}

/* The six cards under "one of two states" fill by column, so the three with a
   product answer sit together and the three that need the diagnosis first sit
   together, which is what the paragraph above them promises. Three explicit
   rows stop a seventh card silently starting a third column.
   Below 900px the container is already one column wide, and column flow there
   would lay all six out in a single tall column with the grouping lost, so the
   flow goes back to rows and the source order carries the grouping instead. */
.paincols{grid-auto-flow:column; grid-template-rows:repeat(3, auto)}
@media (max-width:900px){
  .paincols{grid-auto-flow:row; grid-template-rows:none}
}