/* SKIN: luxe — black + metallic premium (insurance, financial, legal, high-end services).
   Piloted on aries-surety-llc, 2026-09-24. Feel: calm, expensive, trustworthy.

   HOW IT READS THE TOKENS (all set in config.php):
     --dark     near-black. Header, footer and hero backdrop are all this colour, so a
                client's gold/cream mark keyed to transparency sits on it cleanly.
     --accent   the METAL (gold, champagne, copper). A FILL colour: buttons, rules,
                markers. As TEXT it is only ever placed on dark grounds (header links,
                .section-noir). Gold text on the ivory paper measures ~2:1 — never.
     --primary  a DARK metallic (bronze). The text colour for eyebrows, links and card
                numbers on the light paper, so it must clear 4.5:1 there (aries: 6.19:1).

   Rules this file follows on purpose (each one is a Log entry in site-factory/CLAUDE.md):
     - base rules ABOVE their media queries (the CSS ordering trap);
     - every .btn variant restated AFTER .btn (laundry / meeting-house);
     - .hero has a dark background-color, because render-check scores hero text against
       .hero's own background, not the photo (circle-of-care);
     - NO broad descendant colour rules like `.section-noir p` or `.section-noir a` —
       those bleed into white components (the lead form) placed inside a dark band
       (miracle-braid's four-times bug). Dark-band text is styled by named classes only. */

:root{
  --paper:#FBF8F2; --ink:#1A1712; --muted:#5A5244;
  --noir:#141210;                /* dark band — a hair lighter than --dark so bands read as bands */
  --noir-2:#1C1915;              /* a card sitting inside a dark band */
  --on-noir:#EFE8DA;             /* body text on dark: 15.3:1 on --noir */
  --on-noir-muted:#C9BFAC;       /* secondary text on dark: 10.6:1 on --noir */
  --line-gold:color-mix(in srgb, var(--accent) 30%, transparent);
  --radius:4px;
  --shadow:0 1px 2px rgba(20,18,16,.06),0 10px 28px rgba(20,18,16,.08);
  --tile-border:1px solid #E6DDCB;
  --header-line:1px solid var(--line-gold);
  --section-bg-alt:#F3ECDF;
  --hero-overlay:linear-gradient(90deg,rgba(10,9,7,.88) 0%,rgba(10,9,7,.70) 46%,rgba(10,9,7,.45) 100%),
                 linear-gradient(0deg,rgba(10,9,7,.55) 0%,rgba(10,9,7,0) 40%);
}

/* ---------- type: a touch larger for an audience that skews older ---------- */
html{font-size:106.25%}
body{background:var(--paper)}
h1,h2{font-weight:700;letter-spacing:.01em;line-height:1.16}
h1{font-size:clamp(2rem,4.3vw,3.15rem)}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-family:var(--body);font-weight:700;letter-spacing:0;line-height:1.3}
/* Wide Roman capitals leave one-word last lines ("…FOR THE LONG / RUN"); balance
   evens them out. Ignored by browsers without support - nothing breaks. */
h1,h2,.eyebrow,.pledge{text-wrap:balance}
.eyebrow{letter-spacing:.2em;color:var(--primary)}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;margin-right:.65rem;
  vertical-align:middle;background:var(--accent)}
.sub{color:var(--muted);max-width:62ch}
.lede{font-size:1.12rem;color:var(--ink);max-width:62ch}
.prose > * + *{margin-top:1rem}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem;font-size:1.12rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-top:.4rem}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--primary);font-weight:600}
.center{text-align:center}
.center .sub,.center .lede{margin-left:auto;margin-right:auto}
.narrow{max-width:780px}
.page-top{padding-top:9.5rem}
.fine-print{font-size:.84rem;color:var(--muted);max-width:86ch;margin-top:2rem;line-height:1.55}

/* ---------- header: dark, so the metallic logo sits on its own colour ---------- */
.site-header{background:var(--dark);color:var(--on-noir);padding:12px 26px}
.brand img{height:60px}
.main-nav{gap:20px}
.main-nav a,.nav-item > a{color:var(--on-noir);white-space:nowrap}
.main-nav a:hover,.main-nav a[aria-current],
.nav-item > a:hover,.nav-item > a[aria-current],.nav-item > a.is-ancestor{color:var(--accent)}
.nav-caret{color:var(--on-noir)}
.sub-menu{background:var(--noir);border:1px solid var(--line-gold);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sub-menu a{color:var(--on-noir)}
.sub-menu a:hover,.sub-menu a[aria-current]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.tel-mini{color:var(--on-noir)}
.tel-mini:hover{color:var(--accent)}
.menu-btn{background:transparent;color:var(--accent);border:1.5px solid var(--accent);min-height:44px}
.mobile-nav{background:var(--dark);border-bottom:1px solid var(--line-gold)}
.mobile-nav a{color:var(--on-noir);border-bottom-color:rgba(255,255,255,.09)}
.m-row{border-bottom-color:rgba(255,255,255,.09)}
.m-toggle{color:var(--accent)}
/* the bronze focus ring is ~3:1 on black; on dark grounds use the metal instead */
.site-header :focus-visible,.mobile-nav :focus-visible,.hero :focus-visible,
.section-noir :focus-visible,.site-footer :focus-visible{outline-color:var(--accent)}
/* The phone link is the first thing to go: logo + 4 nav items + phone + CTA need
   ~930px, and the desktop nav is standard down to 860 (laundry-skin lesson). The
   number stays in the mobile menu, the footer and every page CTA. */
@media (max-width:1100px){.tel-mini{display:none}}
@media (max-width:860px){
  .brand img{height:44px}
  .site-header{padding:12px 20px}
  .mobile-nav{top:69px;max-height:calc(100vh - 69px)}   /* 12 + 44 + 12 + 1px border */
}

/* ---------- buttons (variants restated AFTER .btn — equal specificity, later wins) ---------- */
.btn{border-radius:var(--radius);border:1.5px solid var(--ink);background:#fff;color:var(--ink);
  font-weight:700;letter-spacing:.02em;box-shadow:none;transition:transform .12s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{box-shadow:0 8px 20px rgba(20,18,16,.16)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-text,var(--dark))}
.btn-accent:hover{background:color-mix(in srgb,var(--accent) 86%,#fff)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-ghost{background:transparent;border-color:color-mix(in srgb,var(--on-noir) 65%,transparent);color:var(--on-noir)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}

/* ---------- hero ---------- */
.hero{background-color:var(--dark);min-height:82vh;padding:8.4rem 0 4.4rem}
.hero h1{color:#fff;max-width:19ch}
.hero h1 + .sub{margin-top:1rem}
.hero-page{min-height:58vh;padding:8.2rem 0 3.6rem}
.hero-page h1{max-width:22ch}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem 1.5rem;margin-top:1.5rem;
  font-size:.95rem;color:rgba(255,255,255,.9)}
.hero-points li{display:flex;align-items:center;gap:.55rem}
.hero-points li::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--accent);flex:0 0 auto}
.hero .lead-panel{box-shadow:0 24px 60px rgba(0,0,0,.5)}
/* beside the form the text column is ~560px: a smaller H1 keeps it to three lines */
.hero-grid.has-form h1{font-size:clamp(2rem,3.6vw,2.75rem)}

/* ---------- lead form panel ---------- */
.lead-panel{border-top:3px solid var(--accent)}
.lead-head{background:var(--dark);color:var(--accent);border-bottom:0;letter-spacing:.04em}
.lead-form input,.lead-form textarea,.lead-form select{border-radius:var(--radius)}
.lead-form select{font-family:var(--body);font-size:.95rem;padding:.72rem .8rem;
  border:1.5px solid #c9c9c4;background:#fff;color:var(--ink)}
.lead-form select:focus{outline:3px solid var(--primary);outline-offset:0}
.lead-form .fine a{color:var(--primary);white-space:nowrap}
/* <button> does not inherit the page font - without this the submit renders in Arial */
button.btn,.lead-form button{font-family:var(--body)}
@media (max-width:560px){.lead-form select{font-size:16px;padding:.8rem .85rem}}

/* ---------- sections ---------- */
.section-alt{background:var(--section-bg-alt)}
.section-noir{background:var(--noir);color:var(--on-noir);position:relative;overflow:hidden}
.section-noir .wrap{position:relative;z-index:1}
.section-noir h2,.section-noir h3{color:#FBF3E2}
.section-noir .eyebrow{color:var(--accent)}
.section-noir .sub,.section-noir .lede,.section-noir .noir-text{color:var(--on-noir-muted)}
.section-noir .noir-link{color:var(--accent);font-weight:700}
.section-noir .tile{background:var(--noir-2);border:1px solid var(--line-gold);box-shadow:none}
.section-noir .tile h3{color:#F6E7C4}
.section-noir .tile p{color:var(--on-noir-muted)}
/* the client's shield as a faint watermark in dark bands (decorative, aria-hidden) */
.watermark{position:absolute;z-index:0;right:-70px;top:50%;transform:translateY(-50%);
  width:440px;max-width:60%;height:auto;opacity:.07;pointer-events:none}
.pledge{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.5vw,1.85rem);
  line-height:1.4;color:#FBF3E2;max-width:32ch}
.center .pledge{margin-left:auto;margin-right:auto}

/* ---------- tiles, cards ---------- */
.tile{border-radius:var(--radius)}
.tile h3{color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:2.4rem}
.card{display:flex;flex-direction:column;gap:.5rem;padding:1.7rem 1.6rem 1.5rem;background:#fff;
  border:var(--tile-border);border-top:3px solid var(--accent);border-radius:var(--radius);
  box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(20,18,16,.14)}
.card .num{font-family:var(--display);font-weight:700;color:var(--primary);letter-spacing:.1em;font-size:.95rem}
.card h3{font-size:1.22rem}
.card p{color:var(--muted);font-size:.97rem}
.card .for{font-size:.9rem;color:var(--ink)}
.card .more{margin-top:auto;padding-top:.5rem;font-weight:700;color:var(--primary)}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}
@media (max-width:760px){.cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- comparison table (stacks into cards on phones) ---------- */
.compare-wrap{margin-top:2.2rem}
.compare{width:100%;border-collapse:collapse;background:#fff;border:var(--tile-border);font-size:.96rem}
.compare th,.compare td{padding:.9rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid #E6DDCB}
.compare thead th{background:var(--dark);color:var(--on-noir);font-weight:700;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase}
.compare tbody th{font-weight:700;color:var(--ink)}
.compare tbody th a{color:var(--primary)}
.compare tbody tr:nth-child(even) > *{background:#FAF5EA}
@media (max-width:760px){
  .compare thead{display:none}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
  .compare{border:0;background:transparent}
  .compare tr{background:#fff;border:var(--tile-border);border-top:3px solid var(--accent);
    border-radius:var(--radius);margin-bottom:1rem}
  .compare tbody tr:nth-child(even) > *{background:transparent}
  .compare th{font-size:1.05rem;border-bottom:1px solid #E6DDCB}
  .compare td{border-bottom:0;padding:.55rem 1rem}
  .compare td::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}

/* ---------- small components ---------- */
.hours-table{border-collapse:collapse;margin-top:.6rem;width:100%;max-width:420px;font-size:.97rem}
.hours-table th,.hours-table td{padding:.5rem .15rem;border-bottom:1px solid #E6DDCB;text-align:left}
.hours-table th{font-weight:600;color:var(--ink)}
.hours-table td{color:var(--muted);text-align:right;white-space:nowrap}
ol.plain-steps{padding-left:1.3rem;margin-top:.6rem}
.plain-steps li{margin-top:.4rem;color:var(--muted)}
.plain-steps li::marker{color:var(--primary);font-weight:700}
.ticks.cols1{columns:1}
.ticks.cols3{columns:3}
.more-link{color:var(--primary)}
@media (max-width:760px){.ticks.cols3{columns:2}}
.note{background:#fff;border:var(--tile-border);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow);margin-top:1.4rem}
.note b{display:block;margin-bottom:.25rem}
.split img{box-shadow:0 0 0 1px var(--line-gold),var(--shadow)}
.steps li::before{border-radius:var(--radius)}
.faq summary{font-family:var(--body);font-weight:700;font-size:1.06rem}
.logo-plate{background:var(--dark);border-radius:var(--radius);padding:2.4rem 2rem;display:flex;
  justify-content:center;align-items:center;box-shadow:var(--shadow)}
/* must undo .split img (ratio box + object-fit:cover would crop the logo) — same
   specificity, and this file loads after base.css, so it wins */
.logo-plate img{width:min(300px,100%);max-width:100%;height:auto;aspect-ratio:auto;
  object-fit:contain;margin:0;border-radius:0;box-shadow:none}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line-gold)}
.foot-logo{height:46px}
.foot-head{color:#F6E7C4;letter-spacing:.04em}