/* KOONTZ (k8ntz.com) shared styles. Colors from ../VISUAL-IDENTITY.md §2.
   No web fonts are loaded (no third-party requests): headings use Georgia as the
   stand-in for Cinzel, body uses the system sans. See README §5 to self-host Cinzel/Inter. */
:root{
  --ink:#0B151A; --ink2:#0F1E24; --card:#132831; --line:#24414B;
  --bone:#F4F1EA; --muted:#9FB3B8;
  --gold-d:#137A73; --gold:#2BB5A8; --gold-l:#8FE3D6;
  --serif:"Cinzel",Georgia,"Times New Roman",serif;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font:17px/1.6 var(--sans)}
img{max-width:100%;display:block}
a{color:var(--gold-l)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--bone);color:var(--ink);padding:6px 10px;z-index:9}

/* top bar */
.top{border-bottom:1px solid var(--line);background:var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand svg{height:26px;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px}
.nav a{color:var(--bone);text-decoration:none;opacity:.85}
.nav a:hover,.nav a[aria-current]{opacity:1;color:var(--gold-l)}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.2;letter-spacing:.01em}
h1{font-size:clamp(30px,6vw,52px);margin:10px 0 16px}
h2{font-size:clamp(25px,4vw,36px);margin:6px 0 12px}
h3{font-size:21px;margin:4px 0 8px}
.eyebrow{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:12.5px;font-weight:700}
.gold{color:var(--gold-l)}
.lead{color:var(--muted);max-width:680px;font-size:18px}
.small{font-size:14px;color:var(--muted)}
section{padding:56px 0;border-bottom:1px solid var(--line)}
section.alt{background:var(--ink2)}

/* hero */
.hero{padding:44px 0 52px;border-bottom:3px solid var(--gold-d)}
.hero .grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.hero p{max-width:620px;font-size:19px;color:#ddd7c9}
@media(min-width:820px){.hero .grid{grid-template-columns:1.35fr 1fr}.hero{padding:72px 0 80px}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-block;padding:13px 20px;border-radius:4px;font-weight:600;text-decoration:none;font-size:16px}
.btn.pri{background:var(--gold);color:var(--ink)}
.btn.pri:hover{background:var(--gold-l)}
.btn.sec{border:1px solid #5d5748;color:var(--bone)}
.btn.sec:hover{border-color:var(--gold)}

/* photo placeholders: real photos only (VISUAL-IDENTITY §5) */
.photo-slot{border:2px dashed var(--gold-d);border-radius:6px;background:repeating-linear-gradient(45deg,#121110,#121110 12px,#16150f 12px,#16150f 24px);
  color:var(--gold);display:grid;place-items:center;text-align:center;padding:18px;font-size:14px;line-height:1.45;min-height:220px}
.photo-slot b{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;color:var(--gold-l)}
.photo-slot.portrait{aspect-ratio:4/5;min-height:0;max-width:420px;width:100%;justify-self:center}
.photo-slot.round{width:120px;height:120px;min-height:0;border-radius:50%;padding:8px;font-size:11px;margin:0 auto 14px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.card{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold-d);border-radius:6px;padding:20px;display:flex;flex-direction:column}
.card p{margin:0 0 12px;color:#d6d0c2;font-size:16px}
.card .more{margin-top:auto;font-weight:600;text-decoration:none}
.card .num{font-family:var(--serif);color:var(--gold);font-size:14px;letter-spacing:.12em}
.price{font-family:var(--serif);font-size:30px;color:var(--gold-l);margin:4px 0}
.price small{font-family:var(--sans);font-size:14px;color:var(--muted)}
ul.ticks{list-style:none;padding:0;margin:0 0 14px}
ul.ticks li{padding-left:22px;position:relative;margin:6px 0;font-size:16px}
ul.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border:2px solid var(--gold);border-radius:50%}
ul.x li::before{border-radius:0;border-color:#7a7466;transform:rotate(45deg);width:8px;height:8px}

/* story / two-column */
.split{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:820px){.split{grid-template-columns:1fr 1.3fr;gap:48px}}
.facts{list-style:none;padding:0;margin:16px 0}
.facts li{border-left:3px solid var(--gold);padding:4px 0 4px 14px;margin:10px 0}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px}
.steps div{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px}
.steps div::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:700;margin-bottom:8px}

/* faq */
details{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin:10px 0}
summary{font-weight:600;cursor:pointer}
details p{color:#d6d0c2;margin:10px 0 2px}

/* notices */
.notice{border:1px solid var(--gold-d);background:#17140c;border-radius:6px;padding:16px 18px;margin:18px 0;font-size:16px}
.notice.crisis{border-color:#b9a15f;background:#1d1a10}
.notice b{color:var(--gold-l)}

/* contact */
.contact{text-align:center}
.contact .big{font-family:var(--serif);font-size:clamp(25px,4.5vw,40px);margin:8px 0}
.mail{display:inline-block;margin:6px 10px;font-size:18px;font-weight:600}

/* legal pages */
.doc{max-width:760px}
.doc h2{font-size:24px;margin-top:34px}
.doc p,.doc li{color:#ddd7c9}

/* footer */
footer{padding:28px 0 40px;font-size:14px;color:#958f80}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer a{color:#c9c2b2}
.draft{background:#3a2f0c;color:var(--gold-l);text-align:center;font-size:13px;padding:6px 12px}
