/* Layout: a single briefing column. The hero pairs the promise with one sample change report, the product's most characteristic object; the rest reads like a short dossier with ruled sections. Dark graphite with champagne first (the War room look), ivory and gold in light mode. */
:root{
  --bg:#08090B; --panel:#0E0E10; --panel2:#151517; --line:#26231F; --line2:#3A362F;
  --ink:#EDE9E1; --ink2:#BFB8AC; --ink3:#958E82;
  --gold:#E8D3A2; --on-gold:#0A0A0B; --gold-hi:#F3E3BC; --money:#E8C77F;
  --alert:#F2A54A; --alert-bg:rgba(242,165,74,.09); --alert-line:rgba(242,165,74,.42);
  --ins:rgba(127,190,150,.16); --ins-ink:#A9DDBC; --del:rgba(220,120,110,.16); --del-ink:#F0B2AA;
  --ok:#8FD0A8; --aura1:rgba(232,200,140,.09); --aura2:rgba(150,175,200,.05);
  --shadow:0 30px 70px rgba(0,0,0,.55); --sheen:rgba(255,236,200,.06);
  --f-display:"Cinzel","Trajan Pro",Georgia,serif;
  --f-read:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  --f-ui:"Instrument Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F6F1E7; --panel:#FFFCF6; --panel2:#F7F1E5; --line:#E4D9C5; --line2:#D0C1A6;
  --ink:#16130E; --ink2:#3E372B; --ink3:#675C4A;
  --gold:#8A6526; --on-gold:#FFFBF2; --gold-hi:#6F501B; --money:#8A6220;
  --alert:#9A520A; --alert-bg:rgba(154,82,10,.07); --alert-line:rgba(154,82,10,.38);
  --ins:rgba(40,130,80,.12); --ins-ink:#1D6A3F; --del:rgba(180,60,50,.10); --del-ink:#972C22;
  --ok:#2E8A54; --aura1:rgba(205,160,70,.16); --aura2:rgba(90,125,160,.07);
  --shadow:0 24px 60px rgba(90,62,18,.14); --sheen:rgba(255,255,255,.9);
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#F6F1E7; --panel:#FFFCF6; --panel2:#F7F1E5; --line:#E4D9C5; --line2:#D0C1A6;
  --ink:#16130E; --ink2:#3E372B; --ink3:#675C4A;
  --gold:#8A6526; --on-gold:#FFFBF2; --gold-hi:#6F501B; --money:#8A6220;
  --alert:#9A520A; --alert-bg:rgba(154,82,10,.07); --alert-line:rgba(154,82,10,.38);
  --ins:rgba(40,130,80,.12); --ins-ink:#1D6A3F; --del:rgba(180,60,50,.10); --del-ink:#972C22;
  --ok:#2E8A54; --aura1:rgba(205,160,70,.16); --aura2:rgba(90,125,160,.07);
  --shadow:0 24px 60px rgba(90,62,18,.14); --sheen:rgba(255,255,255,.9);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(60% 40% at 70% 0%,var(--aura1),transparent 70%),radial-gradient(40% 30% at 0% 30%,var(--aura2),transparent 70%);background-repeat:no-repeat}
a{color:var(--gold);text-underline-offset:3px;text-decoration-color:var(--line2)}
a:hover{text-decoration-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.lbl{font:600 11px/1.3 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* header */
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-block:22px}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--gold);text-decoration:none}
.logo svg{width:28px;height:28px;fill:currentColor}
.logo span{font:400 16px/1 var(--f-display);letter-spacing:.34em}
.status{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--f-ui);color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:7px 13px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--alert);flex:none}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-block:40px 72px}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
h1{font:400 clamp(44px,6.4vw,76px)/1.02 var(--f-read);letter-spacing:-.02em}
h1 em{font-style:italic;color:var(--gold)}
.lede{font:400 21px/1.5 var(--f-read);color:var(--ink2);max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--gold);color:var(--on-gold);font:600 14.5px/1 var(--f-ui);text-decoration:none;letter-spacing:.01em}
.btn:hover{background:var(--gold-hi)}
.note{font-size:13.5px;color:var(--ink3)}

/* sample change report */
.report{margin:0;background:var(--panel);border:1px solid var(--line2);border-radius:22px;box-shadow:var(--shadow),inset 0 1px 0 var(--sheen);overflow:hidden;min-width:0}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line)}
.rhead b{font:500 17px/1.2 var(--f-read)}
.tag{font:600 10px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);border:1px solid var(--line2);border-radius:4px;padding:4px 7px;white-space:nowrap}
.rbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px}
.alert{border:1px solid var(--alert-line);background:var(--alert-bg);border-radius:12px;padding:11px 14px;font-size:13.5px;color:var(--ink2)}
.alert b{color:var(--alert);font-weight:600}
.diff{font:400 17px/1.55 var(--f-read);color:var(--ink)}
del{background:var(--del);color:var(--del-ink);text-decoration:line-through;border-radius:2px;padding:0 2px}
ins{background:var(--ins);color:var(--ins-ink);text-decoration:none;border-radius:2px;padding:0 2px}
.claims{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.claims li{display:flex;flex-direction:column;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line)}
.claims li:last-child{border-bottom:0}
.claims .t{font:400 15.5px/1.4 var(--f-read)}
.claims .m{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:var(--ink3)}
.flag{font:600 10px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--alert)}
.fp{font:400 11.5px/1.5 var(--f-mono);color:var(--ink3);word-break:break-all}

/* labels for kinds of statement */
.lab{display:inline-flex;align-items:center;gap:6px;font:600 9.5px/1 var(--f-ui);letter-spacing:.15em;text-transform:uppercase;padding:5px 10px 5px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.lab::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.lab.fact{border-color:var(--ink3);color:var(--ink)}
.lab.allegation{border-style:dashed}.lab.allegation::before{background:none;box-shadow:inset 0 0 0 1px currentColor}
.lab.inference::before{border-radius:1px;transform:rotate(45deg)}
.lab.interpretation{font-style:italic}.lab.interpretation::before{background:none;box-shadow:inset 0 0 0 1px currentColor;border-radius:1px}
.lab.speculation{border-style:dotted}.lab.speculation::before{opacity:.5}

/* sections */
section.block{border-top:1px solid var(--line)}
section.block .wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 56px;padding-block:64px}
.shead{display:flex;flex-direction:column;gap:12px}
h2{font:400 34px/1.12 var(--f-read);letter-spacing:-.012em}
.sbody{display:flex;flex-direction:column;gap:22px;min-width:0}
.sbody>p{font:400 19px/1.6 var(--f-read);color:var(--ink2);max-width:36em}
.promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.promises li{background:var(--panel);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.promises li.wide{grid-column:1/-1}
.promises h3{font:500 12px/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.promises p{font:400 17.5px/1.5 var(--f-read);color:var(--ink)}
.labs{display:flex;flex-wrap:wrap;gap:8px}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.facts li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:6px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts li:first-child{padding-top:0}
.facts li:last-child{border-bottom:0}
.facts b{font:500 15px/1.4 var(--f-ui);color:var(--ink)}
.facts span{font:400 17px/1.5 var(--f-read);color:var(--ink2)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.plan{border:1px solid var(--line2);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:10px;background:var(--panel)}
.plan h3{font:500 24px/1.2 var(--f-read)}
.plan ul{margin:0;padding-left:18px;color:var(--ink2);font-size:15px;display:flex;flex-direction:column;gap:5px}
.road{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.road li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;position:relative;padding-bottom:22px}
.road li:last-child{padding-bottom:0}
.road li::after{content:"";position:absolute;left:5px;top:18px;bottom:2px;width:1px;background:var(--line2)}
.road li:last-child::after{display:none}
.road i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line2);margin-top:6px;background:var(--bg)}
.road li.done i{background:var(--ok);border-color:var(--ok)}
.road li.now i{border-color:var(--gold);background:var(--gold)}
.road b{display:block;font:500 15.5px/1.4 var(--f-ui)}
.road span{display:block;font:400 16.5px/1.5 var(--f-read);color:var(--ink2)}
.contact{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.addr{font:500 20px/1.2 var(--f-mono);color:var(--ink);user-select:all}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:28px 40px;font-size:13.5px;color:var(--ink3)}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:36px;padding-block:20px 56px}
  section.block .wrap{grid-template-columns:minmax(0,1fr);padding-block:48px}
  .lede{font-size:19px}
}
@media (max-width:620px){
  .promises,.plans{grid-template-columns:minmax(0,1fr)}
  .facts li{grid-template-columns:minmax(0,1fr)}
  h2{font-size:29px}
  .rbody{padding:16px}
  .rhead{padding:12px 16px}
}
@media (prefers-reduced-motion:no-preference){
  .report{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .report .alert{animation:glow 3.2s ease-in-out 1s infinite}
  @keyframes rise{from{transform:translateY(10px)}}
  @keyframes glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px var(--alert-bg)}}
}

/* header navigation, prices, footer links */
header nav{display:flex;flex-wrap:wrap;gap:6px 22px}
header nav a{color:var(--ink2);text-decoration:none;font:500 14px/1 var(--f-ui);padding:6px 0}
header nav a:hover{color:var(--ink)}
.hero-copy .status{align-self:flex-start}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:16px}
.price{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.amt{font:500 26px/1 var(--f-read);color:var(--gold);font-variant-numeric:lining-nums}
.amt span{font:400 13.5px/1 var(--f-ui);color:var(--ink3)}
.flinks{display:flex;gap:18px}
footer a{color:var(--ink2)}

/* legal pages */
.doc .wrap{max-width:760px;padding-block:24px 72px;display:flex;flex-direction:column;gap:18px}
.doc h1{font-size:clamp(38px,6vw,52px)}
.doc h2{font-size:26px;margin-top:14px}
.doc p,.doc li{font:400 18px/1.6 var(--f-read);color:var(--ink2)}
.doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.doc .updated{font:500 13px/1.4 var(--f-ui);color:var(--ink3)}

/* design preview pictures */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
.shot{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.shot a{display:block;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto;max-width:100%}
.shot a:hover{border-color:var(--gold)}
.shot figcaption{display:flex;flex-direction:column;gap:4px}
.shot figcaption b{font:500 12px/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.shot figcaption span{font:400 17px/1.5 var(--f-read);color:var(--ink2)}
@media (max-width:620px){.shots{grid-template-columns:minmax(0,1fr)}}
.shots-wrap{grid-column:1/-1;display:flex;flex-direction:column;gap:22px;min-width:0}

/* Keyboard access and small-screen navigation */
.skip-link{position:fixed;top:12px;left:20px;z-index:10;padding:10px 16px;background:var(--gold);color:var(--on-gold);border-radius:6px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
header nav a{display:inline-flex;align-items:center;min-height:36px}
.addr{overflow-wrap:anywhere}
.doc .btn{align-self:flex-start;color:var(--on-gold)}
