/* ============================================================
   Ocalt (Pty) Ltd — ocalt.co.za
   Stylesheet. Single source of truth for the site.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:        #101A21;
  --slate:      #1C2B35;
  --slate-2:    #2A3C48;
  --slate-3:    #3B4F5C;
  --mist:       #7B8C98;
  --rule:       #D2D7D2;
  --rule-soft:  #E2E6E1;
  --bone:       #F2F3F0;
  --bone-2:     #E8EAE5;
  --white:      #FFFFFF;
  --brass:      #A5761F;
  --brass-lit:  #D2A144;
  --brass-soft: #F4EBD8;
  --red:        #9E3A2B;
  --green:      #2F6B4F;

  --ff-ui: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-prose: "Source Serif 4", Georgia, "Times New Roman", serif;

  --maxw: 1200px;
  --measure: 66ch;
  --gut: clamp(1.25rem, 4vw, 3rem);

  --t: 180ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--ff-prose);
  font-size:1.0625rem;
  line-height:1.65;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--brass-lit); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Type ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--ff-ui);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.08;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 5.6vw, 4.6rem); letter-spacing:-0.035em; font-weight:700; }
h2{ font-size:clamp(1.85rem, 3.4vw, 2.85rem); letter-spacing:-0.03em; }
h3{ font-size:clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing:-0.015em; line-height:1.2; }
h4{ font-size:1.0625rem; letter-spacing:-0.01em; }

p{ margin:0 0 1.15em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.2em; }
a:hover{ text-decoration-color:var(--brass); }

strong{ font-weight:600; }

.lede{
  font-size:clamp(1.125rem, 1.7vw, 1.3rem);
  line-height:1.55;
  color:var(--slate-2);
  max-width:56ch;
}

.note{
  font-family:var(--ff-ui);
  font-size:.8125rem;
  line-height:1.5;
  color:var(--slate-3);
  max-width:64ch;
}

.num{ font-family:var(--ff-ui); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* Section marker — encodes the section's role, not decoration */
.marker{
  font-family:var(--ff-ui);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--brass);
  display:block;
  margin:0 0 .9rem;
  padding-left:.85rem;
  border-left:2px solid var(--brass);
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ max-width:1420px; }

section{ padding-block:clamp(3.5rem, 8vw, 7rem); }
section.tight{ padding-block:clamp(2.5rem, 5vw, 4rem); }

.band-dark{ background:var(--slate); color:var(--bone); }
.band-dark h1,.band-dark h2,.band-dark h3{ color:var(--white); }
.band-dark .lede{ color:#B9C6CF; }
.band-dark .note{ color:#8FA0AC; }
.band-ink{ background:var(--ink); color:var(--bone); }
.band-ink h2,.band-ink h3{ color:var(--white); }
.band-soft{ background:var(--bone-2); }
.band-white{ background:var(--white); }

.rule-top{ border-top:1px solid var(--rule); }

.grid{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:980px){ .split{ grid-template-columns:1fr; } }

.stack > * + *{ margin-top:1rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ff-ui); font-size:.95rem; font-weight:600; letter-spacing:-0.005em;
  padding:.85rem 1.5rem;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--bone);
  border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.btn:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn-light{ background:var(--brass-lit); border-color:var(--brass-lit); color:var(--ink); }
.btn-light:hover{ background:var(--white); border-color:var(--white); }
.btn-onDark{ background:transparent; border-color:#5D7383; color:var(--bone); }
.btn-onDark:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn[disabled]{ opacity:.35; pointer-events:none; }
.btn-sm{ padding:.6rem 1rem; font-size:.875rem; }

.btnrow{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(242,243,240,.88);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.site-head .bar{
  display:flex; align-items:center; gap:2rem;
  height:4.25rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.brand img{ width:30px; height:30px; }
.brand span{
  font-family:var(--ff-ui); font-weight:700; font-size:1.15rem; letter-spacing:-0.04em; color:var(--ink);
}
.brand small{
  font-family:var(--ff-ui); font-weight:500; font-size:.75rem; color:var(--mist); letter-spacing:0;
  align-self:flex-end; padding-bottom:.28rem;
}
.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav a{
  font-family:var(--ff-ui); font-size:.9rem; font-weight:500; color:var(--slate-2);
  text-decoration:none; padding:.3rem 0; border-bottom:1.5px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--brass); }
/* The CTA is an anchor inside .nav, so it needs to out-specify `.nav a` */
.nav a.btn{
  color:var(--bone); background:var(--ink); border:1px solid var(--ink);
  border-bottom-color:var(--ink); padding:.6rem 1.15rem; font-weight:600;
}
.nav a.btn:hover,.nav a.btn[aria-current="page"]{
  color:var(--ink); background:var(--brass-lit);
  border-color:var(--brass-lit); border-bottom-color:var(--brass-lit);
}
.nav-cta{ margin-left:.4rem; }
.menu-btn{ display:none; }

@media (max-width:900px){
  .nav{
    position:fixed; inset:4.25rem 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bone); border-bottom:1px solid var(--rule);
    padding:.5rem var(--gut) 1.5rem;
    max-height:calc(100dvh - 4.25rem); overflow:auto;
  }
  .nav[hidden]{ display:none; }
  .nav a{ padding:.85rem 0; border-bottom:1px solid var(--rule-soft); font-size:1rem; }
  .nav .btn{ margin-top:1rem; }
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.5rem; height:2.5rem; padding:0;
    background:transparent; border:1px solid var(--rule); border-radius:2px; cursor:pointer;
  }
  .menu-btn span{ display:block; width:16px; height:1.5px; background:var(--ink); position:relative; }
  .menu-btn span::before,.menu-btn span::after{
    content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--ink);
  }
  .menu-btn span::before{ top:-5px; } .menu-btn span::after{ top:5px; }
}

/* ---------- Hero ---------- */
.hero{
  background:var(--slate);
  color:var(--bone);
  padding-block:clamp(3.5rem,8vw,6.5rem);
  position:relative;
  overflow:hidden;
}
.hero h1{ color:var(--white); margin-bottom:1.1rem; }
.hero .lede{ color:#BCC9D2; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width:1020px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-price{
  margin:2rem 0 1.75rem;
  padding:1.1rem 0 0;
  border-top:1px solid #3E5260;
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
}
.hero-price b{
  font-family:var(--ff-ui); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.6rem);
  letter-spacing:-0.04em; color:var(--brass-lit); font-variant-numeric:tabular-nums;
}
.hero-price em{
  font-family:var(--ff-ui); font-style:normal; font-size:.95rem; color:#9FB0BB; font-weight:500;
}

/* ---------- Ledger (hero centrepiece) ---------- */
.ledger{
  background:#16242D;
  border:1px solid #33454F;
  border-radius:3px;
  overflow:hidden;
  font-family:var(--ff-ui);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7);
}
.ledger-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid #33454F;
  background:#101D25;
}
.ledger-head h3{ font-size:.9rem; font-weight:600; margin:0; color:#DCE4E9; letter-spacing:0; }
.ledger-head span{ font-size:.75rem; color:#7B8C98; }
.ledger-body{ padding:.35rem 0; }
.lrow{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.36rem 1.1rem;
  font-size:.82rem; line-height:1.45;
  color:#A9BAC5;
}
.lrow b{ font-weight:500; color:#C9D5DD; }
.lrow span{ font-variant-numeric:tabular-nums; color:#8FA2AE; white-space:nowrap; }
.ledger-total{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.95rem 1.1rem;
  border-top:1px solid #33454F;
  background:#101D25;
  font-size:.85rem; color:#9FB0BB;
}
.ledger-total strong{
  font-size:1.35rem; font-weight:700; color:#E8EEF2; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}
.ledger-swap{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.95rem 1.1rem;
  background:var(--brass);
  color:#1A1305;
}
.ledger-swap b{ font-size:.85rem; font-weight:600; }
.ledger-swap strong{ font-size:1.35rem; font-weight:700; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }

/* one orchestrated load sequence */
.anim .lrow{ opacity:0; transform:translateY(6px); animation:rowIn .34s forwards; }
.anim .ledger-total{ opacity:0; animation:fadeIn .4s .95s forwards; }
.anim .ledger-swap{ opacity:0; transform:translateY(8px); animation:rowIn .4s 1.25s forwards; }
@keyframes rowIn{ to{ opacity:1; transform:none; } }
@keyframes fadeIn{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .anim .lrow,.anim .ledger-total,.anim .ledger-swap{ opacity:1; transform:none; animation:none; }
}

/* ---------- Roster ---------- */
.roster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.role{
  background:var(--white);
  padding:1.4rem 1.35rem;
}
.role h3{ margin:0 0 .45rem; font-size:1.02rem; }
.role p{ font-size:.925rem; line-height:1.55; color:var(--slate-3); margin:0; }
.role .tag{
  font-family:var(--ff-ui); font-size:.7rem; font-weight:600; color:var(--brass);
  display:block; margin-bottom:.5rem;
}

/* ---------- Tables ---------- */
.tablewrap{ overflow-x:auto; border:1px solid var(--rule); background:var(--white); }
table.data{
  width:100%; min-width:640px; border-collapse:collapse;
  font-family:var(--ff-ui); font-size:.9rem;
}
table.data caption{
  text-align:left; padding:1rem 1.1rem; font-size:.85rem; color:var(--slate-3);
  border-bottom:1px solid var(--rule); background:var(--bone-2);
}
table.data th,table.data td{
  padding:.75rem 1.1rem; text-align:left; border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
}
table.data thead th{
  font-weight:600; font-size:.8rem; color:var(--slate-2);
  border-bottom:1px solid var(--rule); background:var(--bone-2);
  white-space:nowrap;
}
table.data td.n,table.data th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.data tbody tr:last-child td{ border-bottom:none; }
table.data tr.sum td{ background:var(--bone-2); font-weight:600; border-top:1px solid var(--rule); }
table.data tr.win td{ background:#1C2B35; color:var(--white); font-weight:600; }
table.data tr.win td em{ font-style:normal; color:var(--brass-lit); }

/* ---------- Fact cards ---------- */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.fact{ background:var(--white); padding:1.5rem 1.35rem; }
.fact b{
  display:block; font-family:var(--ff-ui); font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-0.035em; color:var(--ink);
  font-variant-numeric:tabular-nums; margin-bottom:.35rem;
}
.fact p{ font-size:.9rem; color:var(--slate-3); margin:0; }
.band-dark .facts,.band-ink .facts{ background:#354854; border-color:#354854; }
.band-dark .fact,.band-ink .fact{ background:#1C2B35; }
.band-dark .fact b{ color:var(--brass-lit); }
.band-dark .fact p{ color:#A6B6C1; }

/* ---------- Checklist ---------- */
ul.check,ul.extra,ul.plain{ list-style:none; padding:0; margin:0 0 1.15em; max-width:var(--measure); }
ul.check li,ul.extra li,ul.plain li{
  position:relative; padding-left:1.6rem; margin-bottom:.6rem;
  font-size:.975rem; line-height:1.55;
}
ul.check li::before{
  content:"✓"; position:absolute; left:0; top:0;
  font-family:var(--ff-ui); font-weight:700; color:var(--green); font-size:.95rem;
}
ul.extra li::before{
  content:"+"; position:absolute; left:.1rem; top:-1px;
  font-family:var(--ff-ui); font-weight:700; color:var(--brass); font-size:1.05rem;
}
ul.plain li::before{
  content:""; position:absolute; left:.25rem; top:.72em;
  width:5px; height:5px; background:var(--brass); border-radius:50%;
}
.band-dark ul.check li::before{ color:#6ECFA3; }

/* ---------- Process (real sequence: numbering earned) ---------- */
.steps{ counter-reset:s; display:grid; gap:0; border-top:1px solid var(--rule); }
.step{
  counter-increment:s;
  display:grid; grid-template-columns:3.5rem minmax(0,1fr); gap:1.5rem;
  padding:1.65rem 0; border-bottom:1px solid var(--rule);
}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--ff-ui); font-weight:700; font-size:1rem; color:var(--brass);
  font-variant-numeric:tabular-nums; padding-top:.15rem;
}
.step h3{ margin:0 0 .4rem; }
.step p{ margin:0; font-size:.975rem; color:var(--slate-3); }
@media (max-width:620px){ .step{ grid-template-columns:2.5rem minmax(0,1fr); gap:1rem; } }

/* ---------- Service cards ---------- */
.svc{ background:var(--white); border:1px solid var(--rule); padding:1.6rem 1.45rem; }
.svc h3{ margin-bottom:.5rem; }
.svc p{ font-size:.95rem; color:var(--slate-3); margin:0; }

/* ---------- Pull / callout ---------- */
.callout{
  border-left:3px solid var(--brass);
  background:var(--brass-soft);
  padding:1.25rem 1.4rem;
  margin:1.75rem 0;
  max-width:70ch;
}
.callout p{ margin:0; font-size:.975rem; }
.callout h3{ margin:0 0 .4rem; font-size:1rem; }

/* ---------- Legal pages ---------- */
.legal{ max-width:74ch; }
.legal h2{ font-size:clamp(1.35rem,2.2vw,1.7rem); margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid var(--rule); }
.legal h2:first-of-type{ border-top:none; padding-top:0; margin-top:1.5rem; }
.legal h3{ margin-top:1.75rem; font-size:1.05rem; }
.legal ol,.legal ul{ padding-left:1.25rem; max-width:var(--measure); }
.legal li{ margin-bottom:.55rem; }
.legal .toc{
  background:var(--white); border:1px solid var(--rule); padding:1.25rem 1.4rem; margin-bottom:2.5rem;
  font-family:var(--ff-ui); font-size:.9rem;
}
.legal .toc ol{ margin:0; padding-left:1.1rem; columns:2; column-gap:2rem; }
@media (max-width:620px){ .legal .toc ol{ columns:1; } }
.legal .toc li{ margin-bottom:.4rem; break-inside:avoid; }
.legal .meta{
  font-family:var(--ff-ui); font-size:.85rem; color:var(--slate-3);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.9rem 0; margin-bottom:2rem;
}
.legal .meta div + div{ margin-top:.25rem; }

/* ---------- Footer ---------- */
.site-foot{ background:var(--ink); color:#9FB0BB; padding-block:clamp(3rem,6vw,4.5rem) 2rem; font-size:.9rem; }
.site-foot a{ color:#C9D5DD; text-decoration:none; }
.site-foot a:hover{ color:var(--brass-lit); text-decoration:underline; }
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem);
}
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h4{
  font-size:.8rem; font-weight:600; color:var(--white); margin:0 0 .85rem; letter-spacing:0;
}
.foot-grid ul{ list-style:none; padding:0; margin:0; font-family:var(--ff-ui); font-size:.875rem; }
.foot-grid li{ margin-bottom:.55rem; }
.foot-brand{ display:flex; align-items:center; gap:.55rem; margin-bottom:.9rem; }
.foot-brand img{ width:28px; height:28px; }
.foot-brand span{ font-family:var(--ff-ui); font-weight:700; font-size:1.1rem; color:var(--white); letter-spacing:-0.04em; }
.foot-note{ max-width:44ch; font-size:.875rem; line-height:1.6; }
.foot-base{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid #2A3C48;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-family:var(--ff-ui); font-size:.8rem; color:#7B8C98;
}

/* ---------- Skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--bone); padding:.75rem 1.25rem;
  font-family:var(--ff-ui); font-size:.9rem;
}
.skip:focus{ left:0; }

/* ============================================================
   Step-by-step service builder
   ============================================================ */
.builder{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
@media (max-width:1040px){
  .builder{ grid-template-columns:1fr; }
  .builder .quote{ position:static; order:-1; }
}

/* progress rail */
.rail{
  display:flex; gap:.4rem; margin-bottom:2.5rem; flex-wrap:wrap;
  font-family:var(--ff-ui);
}
.rail button{
  flex:1 1 90px; min-width:0;
  background:transparent; border:none; border-top:2px solid var(--rule);
  padding:.6rem 0 0; text-align:left; cursor:pointer;
  font-family:inherit; font-size:.72rem; font-weight:500; color:var(--mist);
  transition:color var(--t), border-color var(--t);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail button[data-state="done"]{ border-top-color:var(--brass); color:var(--slate-2); }
.rail button[data-state="current"]{ border-top-color:var(--ink); color:var(--ink); font-weight:600; }
.rail button:disabled{ cursor:default; }

.stepcard{ background:var(--white); border:1px solid var(--rule); padding:clamp(1.5rem,3.5vw,2.75rem); }
.stepcard[hidden]{ display:none; }
.stepcard > header{ margin-bottom:2rem; }
.stepcard > header h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.5rem; }
.stepcard > header p{ font-size:1rem; color:var(--slate-3); margin:0; }
.stepcount{
  font-family:var(--ff-ui); font-size:.78rem; font-weight:600; color:var(--brass);
  display:block; margin-bottom:.75rem;
}

.field{ margin-bottom:1.75rem; }
.field > label,.field > legend,.fieldlabel{
  display:block; font-family:var(--ff-ui); font-size:.875rem; font-weight:600;
  color:var(--ink); margin-bottom:.2rem; padding:0;
}
.field .hint{
  font-family:var(--ff-ui); font-size:.8rem; color:var(--slate-3);
  margin:0 0 .75rem; max-width:60ch; line-height:1.5;
}
fieldset{ border:none; padding:0; margin:0 0 1.75rem; }

input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea{
  width:100%; font-family:var(--ff-ui); font-size:.95rem; color:var(--ink);
  background:var(--bone); border:1px solid var(--rule); border-radius:2px;
  padding:.72rem .85rem;
  transition:border-color var(--t), background var(--t);
}
input:focus,select:focus,textarea:focus{ background:var(--white); border-color:var(--slate-2); outline:none; box-shadow:0 0 0 3px rgba(165,118,31,.16); }
textarea{ min-height:120px; resize:vertical; font-family:var(--ff-prose); font-size:1rem; line-height:1.55; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--slate-3) 50%),linear-gradient(135deg,var(--slate-3) 50%,transparent 50%); background-position:calc(100% - 20px) 51%,calc(100% - 14px) 51%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.5rem; }

.opts{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt span{
  display:block; height:100%;
  border:1px solid var(--rule); border-radius:2px; background:var(--bone);
  padding:.85rem 1rem; cursor:pointer;
  font-family:var(--ff-ui); font-size:.9rem; font-weight:500; color:var(--slate-2);
  transition:border-color var(--t), background var(--t), color var(--t);
}
.opt span small{ display:block; font-weight:400; font-size:.78rem; color:var(--slate-3); margin-top:.2rem; line-height:1.4; }
.opt span:hover{ border-color:var(--slate-3); }
.opt input:checked + span{ border-color:var(--ink); background:var(--white); color:var(--ink); box-shadow:inset 3px 0 0 var(--brass); }
.opt input:focus-visible + span{ outline:2px solid var(--brass); outline-offset:2px; }

.stepper{ display:flex; align-items:center; gap:.75rem; }
.stepper button{
  width:2.6rem; height:2.6rem; flex:none;
  border:1px solid var(--rule); background:var(--bone); border-radius:2px; cursor:pointer;
  font-family:var(--ff-ui); font-size:1.15rem; font-weight:600; color:var(--ink); line-height:1;
}
.stepper button:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.stepper input{ width:5.5rem; text-align:center; font-weight:600; font-size:1.05rem; }
.stepper em{ font-style:normal; font-family:var(--ff-ui); font-size:.85rem; color:var(--slate-3); }

.navrow{
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--rule);
}

/* estimate panel */
.quote{ position:sticky; top:5.5rem; }
.quote-inner{ background:var(--slate); color:var(--bone); border-radius:3px; overflow:hidden; font-family:var(--ff-ui); }
.quote-inner h3{ font-size:.85rem; font-weight:600; color:var(--white); margin:0; letter-spacing:0; }
.quote-head{ padding:1rem 1.25rem; border-bottom:1px solid #354854; background:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.quote-head span{ font-size:.72rem; color:#7B8C98; }
.quote-total{ padding:1.4rem 1.25rem; border-bottom:1px solid #354854; }
.quote-total b{ display:block; font-size:2.2rem; font-weight:700; letter-spacing:-0.04em; color:var(--brass-lit); font-variant-numeric:tabular-nums; line-height:1.05; }
.quote-total i{ font-style:normal; font-size:.8rem; color:#9FB0BB; display:block; margin-top:.3rem; }
.quote-lines{ padding:.5rem 0; }
.qline{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 1.25rem; font-size:.8rem; color:#A9BAC5; }
.qline span{ font-variant-numeric:tabular-nums; white-space:nowrap; color:#C9D5DD; }
.qline.dim{ color:#7B8C98; } .qline.dim span{ color:#7B8C98; }
.qline.credit span{ color:#6ECFA3; }
.quote-foot{ padding:1rem 1.25rem; border-top:1px solid #354854; background:var(--ink); font-size:.75rem; color:#7B8C98; line-height:1.5; }
.quote-empty{ padding:1.25rem; font-size:.82rem; color:#8FA0AC; line-height:1.55; }

/* review summary */
.review{ border:1px solid var(--rule); background:var(--bone); font-family:var(--ff-ui); font-size:.9rem; margin-bottom:1.75rem; }
.rrow{ display:flex; justify-content:space-between; gap:1.5rem; padding:.7rem 1.1rem; border-bottom:1px solid var(--rule-soft); }
.rrow:last-child{ border-bottom:none; }
.rrow b{ font-weight:600; color:var(--slate-2); flex:none; }
.rrow span{ text-align:right; color:var(--ink); }

.sendbox{ background:var(--bone-2); border:1px solid var(--rule); padding:1.4rem; margin-top:1.75rem; }
.sendbox h3{ font-size:1rem; margin-bottom:.5rem; }

.err{
  font-family:var(--ff-ui); font-size:.85rem; color:var(--red); margin-top:.5rem;
  border-left:2px solid var(--red); padding-left:.6rem;
}
.err[hidden]{ display:none; }

.copied{ font-family:var(--ff-ui); font-size:.85rem; color:var(--green); font-weight:600; }
.copied[hidden]{ display:none; }

/* ---------- Utilities ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.center{ text-align:center; margin-inline:auto; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }