/* Layout: a lit studio "sweep" behind the emblem in the hero, then quiet paper
   sections; brass double rules (the shield's rim) mark only the three objects
   that matter: the hero photo, the featured service, the closing call.        */
:root{
  /* Colour, sampled from the emblem render */
  --paper:#F3F1EC;        /* page ground, the lower studio sweep */
  --sweep:#E5E1DC;        /* upper studio sweep */
  --surface:#FBFAF7;      /* raised panels */
  --ink:#141815;          /* matte black of the server */
  --muted:#4F5A53;        /* green-biased grey for secondary text */
  --enamel:#143F2A;       /* shield enamel */
  --enamel-deep:#0C2A1B;
  --brass:#B38C3C;        /* rules and ornament only, not body text */
  --brass-text:#7E6022;   /* brass dark enough to read on paper */
  --brass-hi:#E3C980;     /* brass highlight on enamel */
  --line:#D8D2C6;
  --on-enamel:#EFE9DA;
  --fill-bg:#F6E9B8;      /* marks text you still need to replace */
  --fill-fg:#5B4510;

  /* Type */
  --display:"Marcellus","Trajan Pro","Palatino Linotype",Georgia,serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  /* Scale */
  --s-1:.8125rem; --s0:1.0625rem; --s1:1.25rem; --s2:1.6rem; --s3:2.2rem; --s4:clamp(2.4rem,5.2vw,3.9rem);
  --gutter:clamp(16px,4vw,40px);
  --wrap:1160px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0C1912; --sweep:#E5E1DC; --surface:#112419; --ink:#ECE6D6; --muted:#A9B5AC;
  --enamel:#1A4D34; --enamel-deep:#0F3021; --brass:#C9A453; --brass-text:#D9B867; --brass-hi:#E7CD86;
  --line:#26402F; --on-enamel:#EFE9DA; --fill-bg:#4A3C12; --fill-fg:#F3DE9C; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0C1912; --sweep:#E5E1DC; --surface:#112419; --ink:#ECE6D6; --muted:#A9B5AC;
  --enamel:#1A4D34; --enamel-deep:#0F3021; --brass:#C9A453; --brass-text:#D9B867; --brass-hi:#E7CD86;
  --line:#26402F; --on-enamel:#EFE9DA; --fill-bg:#4A3C12; --fill-fg:#F3DE9C; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font:400 var(--s0)/1.65 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:.005em}
h2{font-size:var(--s3)}
h3{font-size:var(--s1)}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.eyebrow{font:500 var(--s-1)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text)}
.lede{font-size:var(--s1);color:var(--muted);max-width:34em}
.fill{background:var(--fill-bg);color:var(--fill-fg);padding:0 .25em;border-radius:3px;font-style:normal}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font:600 var(--s0)/1 var(--body);padding:.95em 1.4em;border-radius:3px;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s}
.btn-primary{background:var(--enamel);color:var(--on-enamel);border-color:var(--enamel);box-shadow:inset 0 0 0 1px var(--brass)}
.btn-primary:hover{background:var(--enamel-deep)}
.btn-quiet{border-color:var(--line);color:var(--ink)}
.btn-quiet:hover{border-color:var(--brass)}

/* Double brass rule, after the shield rim */
.plate{position:relative;border:1px solid var(--brass);outline:1px solid var(--brass);outline-offset:5px}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand img{width:34px;height:auto}
.brand b{display:block;font:400 1.3rem/1 var(--display)}
.brand small{display:block;font:500 .66rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-text);margin-top:.25rem}
.nav{display:flex;gap:1.4rem;font-size:.95rem}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.site-head .btn{padding:.7em 1.1em;font-size:.92rem}
@media (max-width:900px){.nav{display:none}}
@media (max-width:420px){.site-head .btn{display:none}}

/* Hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5rem)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.hero .wrap > .hero-eyebrow{grid-column:1 / -1;margin-bottom:calc(-1 * clamp(1rem,3vw,2.5rem))}
@media (min-width:700px){.hero-eyebrow{white-space:nowrap}}
.hero-media{display:grid;gap:1.6rem;justify-items:center;min-width:0}
.hero-media .photo{margin:6px;width:calc(100% - 12px)}
.hero-media .photo.plate{max-width:420px}
.hero-media .photo-server{aspect-ratio:auto;max-width:380px;background:none}
.hero-media .photo-server img{height:auto;object-fit:contain}
.hero-copy{display:grid;gap:1.4rem;min-width:0}
.hero h1{font-size:var(--s4)}
.hero h1 em{font-style:normal;color:var(--enamel)}
:root[data-theme="dark"] .hero h1 em{color:var(--brass-hi)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero h1 em{color:var(--brass-hi)}}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}
.photo{margin:6px;background:linear-gradient(180deg,var(--sweep),#F4F3EF);aspect-ratio:1/1;max-width:100%}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero-media .photo.plate{max-width:360px}.hero-media .photo-server{max-width:320px}}

/* Spec plate: the server's nameplate */
.spec{margin-top:.6rem;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;font:400 var(--s-1)/1.5 var(--mono);border-top:1px solid var(--line);padding-top:1rem;max-width:34rem}
.spec dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.spec dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

/* Sections */
section{padding-block:clamp(3.5rem,8vw,6rem)}
.band{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{display:grid;gap:.9rem;max-width:44rem;margin-bottom:2.6rem}
.sec-head p{color:var(--muted)}

/* Problem */
.risks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.risk{display:grid;gap:.7rem;align-content:start;border-top:2px solid var(--enamel);padding-top:1.2rem;min-width:0}
.risk p{color:var(--muted)}
.risk cite{font:400 .8rem/1.4 var(--mono);color:var(--brass-text);font-style:normal}
@media (max-width:860px){.risks{grid-template-columns:1fr}}

/* Comparison table */
.table-scroll{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:620px}
th,td{text-align:left;padding:1rem 1.2rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:500 var(--s-1)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
thead th:last-child{color:var(--on-enamel);background:var(--enamel)}
tbody th{font-weight:600;width:28%}
tbody td:last-child{background:color-mix(in srgb,var(--enamel) 7%,transparent)}
tbody tr:last-child>*{border-bottom:0}

/* Process: a real sequence, so numbered */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:step;list-style:none;margin:0;padding:0}
.steps li{counter-increment:step;display:grid;gap:.6rem;align-content:start;min-width:0}
.steps li::before{content:counter(step,upper-roman);font:400 1.9rem/1 var(--display);color:var(--brass-text);border-bottom:1px solid var(--brass);padding-bottom:.6rem}
.steps p{color:var(--muted);font-size:.98rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Services */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:start}
.tier{display:grid;gap:1rem;padding:1.8rem;border:1px solid var(--line);background:var(--surface);min-width:0}
.tier.plate{margin:6px;border-color:var(--brass)}
.tier .price{font:400 2.1rem/1 var(--display)}
.tier .price small{font:400 var(--s-1) var(--body);color:var(--muted)}
.tier ul{margin:0;padding-left:1.1rem;color:var(--muted);display:grid;gap:.35rem}
.tier .tag{justify-self:start;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--enamel);color:var(--on-enamel);padding:.45em .7em}
@media (max-width:900px){.tiers{grid-template-columns:1fr;max-width:34rem}}

/* Two-column prose blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.split>*{min-width:0}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.7rem}
.checks li{padding-left:1.6rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:.75rem;height:1px;background:var(--brass)}
.not li::before{background:var(--muted)}
.ordered{counter-reset:o;list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.8rem}
.ordered li{counter-increment:o;display:grid;grid-template-columns:2rem 1fr;gap:.6rem}
.ordered li::before{content:counter(o);font:500 .85rem/1.9 var(--mono);color:var(--brass-text)}

/* About */
.about{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.portrait{aspect-ratio:4/5;max-width:100%;border:1px dashed var(--brass);display:grid;place-items:center;text-align:center;font:400 var(--s-1)/1.4 var(--mono);color:var(--muted);padding:1rem}
.about .prose{display:grid;gap:1rem;max-width:40rem;min-width:0}
@media (max-width:640px){.about{grid-template-columns:1fr}.portrait{max-width:200px}}

/* FAQ */
.faq{display:grid;max-width:48rem}
.faq details{border-top:1px solid var(--line);padding-block:1.1rem}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.3rem/1 var(--display);color:var(--brass-text)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:.7rem;color:var(--muted)}

/* Closing call */
.closing{background:var(--enamel-deep);color:var(--on-enamel)}
.closing .card{margin:6px;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;border-color:var(--brass-hi);outline-color:var(--brass-hi)}
.closing h2{color:var(--on-enamel)}
.closing p{color:color-mix(in srgb,var(--on-enamel) 78%,transparent);margin-top:.8rem;max-width:36em}
.closing .contact{display:grid;gap:.8rem;justify-items:start}
.closing .addr{font:500 var(--s0)/1.3 var(--mono);color:var(--brass-hi);user-select:all}
.closing .btn-primary{background:var(--brass-hi);color:#0C2A1B;border-color:var(--brass-hi);box-shadow:none}
.closing .btn-primary:hover{background:#F1DEA6}
@media (max-width:760px){.closing .card{grid-template-columns:1fr}}

/* Footer */
footer{padding-block:2.5rem;font-size:.88rem;color:var(--muted)}
footer .wrap{display:grid;gap:1rem}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer nav{display:flex;flex-wrap:wrap;gap:1.2rem}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* Multi-page additions */
.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:.45em}
h1.page-title{font-size:var(--s3)}
.page-top{padding-top:clamp(2.5rem,6vw,4.5rem)}
.next{display:flex;justify-content:flex-end;padding-block:0 clamp(2.5rem,6vw,4rem)}
.next a{font:500 var(--s-1)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:.3em}
.next a:hover{color:var(--ink)}
.overview{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.overview a{display:grid;gap:.6rem;align-content:start;padding:1.6rem;border:1px solid var(--line);background:var(--surface);text-decoration:none;min-width:0;transition:border-color .2s}
.overview a:hover{border-color:var(--brass)}
.overview p{color:var(--muted);font-size:.98rem}
.overview .more{font:500 var(--s-1)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text)}
@media (max-width:900px){.overview{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.overview{grid-template-columns:1fr}}