/* ============================================================================
   Azteca Granite — redesign v2 ("Obsidian Ledger")
   Contract: ./DESIGN.md. Nothing below :root may introduce a raw colour,
   a raw font size, or an off-scale spacing value.
   ========================================================================== */

/* --- Self-hosted variable fonts (latin subset, wght axis as published) ----- */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("assets/fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/jost.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url("assets/fonts/newsreader-var.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/newsreader-italic-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("assets/fonts/plex-mono-500.woff2") format("woff2");
}

/* ============================ 1. TOKENS ================================== */
:root{
  /* surfaces */
  --obsidian:#0C0B0A;
  --charcoal:#131110;
  --stone:#1C1916;
  --stone-2:#24201C;
  /* structure */
  --hairline:#2C2823;
  --hairline-lt:#3A3530;
  /* the one accent */
  --gold:#C89B4A;
  --gold-bright:#E2BC72;
  --on-gold:#17130A;
  /* text */
  --cream:#F2EAD9;
  --sand:#A99B84;
  --champagne:#D9C9A8;
  --danger:#E08A6B;
  --scrim:rgba(10,9,8,.72);

  /* Four faces, four jobs — see DESIGN.md § Typography.
     display = headlines · serif = editorial prose and quotes
     body    = UI, controls, titles · mono = labels, numerals, spec text */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-body:"Jost","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --fs-display-xl:64px; --lh-display-xl:1.05; --ls-display-xl:-1.5px;
  --fs-display-lg:44px; --lh-display-lg:1.10; --ls-display-lg:-1px;
  --fs-display-md:32px; --lh-display-md:1.15; --ls-display-md:-.5px;
  --fs-title-lg:24px;   --lh-title-lg:1.30;
  --fs-title-sm:17px;   --lh-title-sm:1.40;
  --fs-lead:19px;       --lh-lead:1.60;
  --fs-body:17px;       --lh-body:1.60;
  --fs-body-sm:15px;    --lh-body-sm:1.55;
  --fs-quote-lg:26px;   --lh-quote-lg:1.35;
  --fs-quote:21px;      --lh-quote:1.40;
  --fs-caption:13px;    --lh-caption:1.45; --ls-caption:.09em;
  --fs-button:14px;     --ls-button:1px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px;

  --radius-sm:2px; --radius-md:4px; --radius-lg:6px; --radius-pill:999px;

  --container:1200px; --container-narrow:760px;
  --section:96px;

  --ease:cubic-bezier(.2,0,0,1);
  --dur-1:160ms; --dur-2:240ms; --dur-3:480ms;
  --reveal-dist:16px;
  --shadow:0 18px 40px rgba(8,7,6,.55);
}

/* ============================ 2. BASE ==================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s16)}
body{
  margin:0;
  background:var(--obsidian);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:400;color:var(--cream)}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
blockquote{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--radius-sm)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--on-gold);
  padding:var(--s3) var(--s4);z-index:20}
.skip:focus{left:var(--s4);top:var(--s4)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{width:min(100% - 2 * var(--s6),var(--container));margin-inline:auto}
.gold{color:var(--gold)}

/* ============================ 3. TYPE ==================================== */
.display-xl{font-family:var(--font-display);font-size:var(--fs-display-xl);
  line-height:var(--lh-display-xl);letter-spacing:var(--ls-display-xl);font-weight:400}
.display-lg{font-family:var(--font-display);font-size:var(--fs-display-lg);
  line-height:var(--lh-display-lg);letter-spacing:var(--ls-display-lg);font-weight:400}
.display-md{font-family:var(--font-display);font-size:var(--fs-display-md);
  line-height:var(--lh-display-md);letter-spacing:var(--ls-display-md)}
.title-lg{font-family:var(--font-display);font-size:var(--fs-title-lg);
  line-height:var(--lh-title-lg);font-weight:600}
.title-sm{font-family:var(--font-body);font-size:var(--fs-title-sm);
  line-height:var(--lh-title-sm);font-weight:500;color:var(--cream)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--sand);max-width:52ch}
/* Editorial prose: the interior bands read in the text serif, so a section carries
   a different voice from the UI chrome around it. The hero stays sans-led on purpose. */
.band .lead,.band-sub{font-family:var(--font-serif);font-weight:400;line-height:1.55}
/* Labels and numerals are the mono voice: eyebrows, spec tags, ledger numbers. */
.caption{font-family:var(--font-mono);font-size:var(--fs-caption);line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--champagne);font-weight:400}

/* ============================ 4. BUTTONS ================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s6);
  font-family:var(--font-body);font-size:var(--fs-button);font-weight:500;
  letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease);
}
.btn--primary{background:var(--gold);color:var(--on-gold)}
.btn--primary:hover{background:var(--gold-bright)}
.btn--secondary{background:transparent;color:var(--cream);border-color:var(--hairline-lt)}
.btn--secondary:hover{border-color:var(--gold);color:var(--gold)}
.btn--ghost{background:transparent;color:var(--sand);border-color:transparent;
  padding-inline:var(--s3);text-decoration:underline;text-underline-offset:4px}
.btn--ghost:hover{color:var(--gold)}
.btn--lg{min-height:52px;padding-inline:var(--s8)}

/* ============================ 5. HEADER ================================== */
.site-head{position:sticky;top:0;z-index:10;background:var(--obsidian);
  border-bottom:1px solid var(--hairline)}
.head-row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);padding-block:var(--s3);min-height:72px}
.brand{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;
  font-family:var(--font-display);font-size:var(--fs-title-lg);letter-spacing:.02em;color:var(--cream)}
.brand em{font-style:normal;color:var(--gold);margin-left:.25em}
.nav{display:flex;gap:var(--s6)}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  padding-inline:var(--s2);text-decoration:none;
  font-size:var(--fs-body-sm);letter-spacing:.04em;color:var(--sand);
  transition:color var(--dur-1) var(--ease)}
.nav a:hover{color:var(--cream)}
.head-actions{display:flex;align-items:center;gap:var(--s3)}
.lang{font-size:var(--fs-caption);letter-spacing:var(--ls-caption);color:var(--sand);
  text-transform:uppercase}
.lang-sep{color:var(--hairline-lt)}
.lang a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s1);
  color:var(--champagne)}

/* ============================ 6. BANDS =================================== */
.band{padding-block:var(--section)}
.band--alt{background:var(--charcoal);border-block:1px solid var(--hairline)}
.band--dark{background:var(--stone);border-block:1px solid var(--hairline)}
.band-head{max-width:var(--container-narrow);margin-bottom:var(--s12)}
.band-head .caption{margin-bottom:var(--s3)}
.band-sub{margin-top:var(--s4);color:var(--sand);font-size:var(--fs-lead);line-height:var(--lh-lead)}

/* ============================ 7. HERO ==================================== */
.hero{padding-block:var(--s16) var(--s24)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s16);align-items:center}
.hero-copy .caption{margin-bottom:var(--s4)}
.hero-copy .lead{margin-top:var(--s6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.hero-lang{margin-top:var(--s4);font-size:var(--fs-body-sm);color:var(--sand)}
.hero-lang a{color:var(--champagne)}
.hero-media{margin:0}
.hero-media img{width:100%;height:auto;border-radius:var(--radius-lg)}
.hero-media .caption{display:block;margin-top:var(--s3);color:var(--sand)}

.stats{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s12);
  padding-top:var(--s6);border-top:1px solid var(--hairline)}
.stats dt{font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  text-transform:uppercase;color:var(--champagne)}
/* Numerals are mono everywhere. Cormorant's i/l-height figures make "10+" read as "IO+". */
.stats dd{margin:var(--s1) 0 0;font-family:var(--font-mono);font-weight:500;
  font-size:var(--fs-display-md);line-height:1;letter-spacing:-.02em;color:var(--cream)}

/* ============================ 8. TRUST =================================== */
.trust{background:var(--charcoal);border-block:1px solid var(--hairline);
  padding-block:var(--s4)}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);justify-content:space-between}
.trust-row span{font-size:var(--fs-body-sm);color:var(--sand)}
.trust-row span+span{border-left:1px solid var(--hairline);padding-left:var(--s8)}

/* ============================ 9. SERVICES LEDGER ========================= */
.ledger{border-top:1px solid var(--hairline)}
.ledger li{
  display:grid;grid-template-columns:64px minmax(200px,1fr) 1.4fr;
  gap:var(--s6);align-items:baseline;
  padding-block:var(--s6);border-bottom:1px solid var(--hairline);
  transition:background-color var(--dur-1) var(--ease);
}
.ledger li:hover{background:var(--charcoal)}
.ledger li p{font-family:var(--font-serif);font-weight:400;color:var(--sand);
  font-size:var(--fs-body);line-height:var(--lh-body-sm)}
.ledger-num{font-family:var(--font-mono);font-size:var(--fs-body-sm);font-weight:500;
  color:var(--gold);letter-spacing:.06em}

/* ============================ 10. MATERIALS ============================== */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.swatches li{border-top:1px solid var(--hairline);padding-top:var(--s4)}
.swatches img{width:100%;height:auto;border-radius:var(--radius-md);
  aspect-ratio:800/1024;object-fit:cover}
.swatches h3{margin-top:var(--s4)}
.swatches .caption{margin-top:var(--s1);color:var(--sand)}

/* ============================ 11. GALLERY ================================
   Multi-column masonry. Every photograph is portrait (0.46–0.75); each keeps
   its native aspect ratio so the slab is never cropped out of frame.
   ======================================================================== */
.gal{column-count:3;column-gap:var(--s3);margin-top:var(--s4)}
.gal figure{margin:0 0 var(--s3);break-inside:avoid}
.gal img{width:100%;height:auto;border-radius:var(--radius-md);background:var(--charcoal)}
.gal figcaption{padding-top:var(--s2);font-size:var(--fs-body-sm);color:var(--cream)}
.gal figcaption .caption{display:block;margin-top:var(--s1);color:var(--sand)}

/* ============================ 12. COST =================================== */
.cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:start}
.cost-list{display:grid;gap:var(--s6)}
.cost-list li{border-top:1px solid var(--hairline-lt);padding-top:var(--s4)}
.cost-list p{margin-top:var(--s2);font-family:var(--font-serif);font-weight:400;
  color:var(--sand);font-size:var(--fs-body);line-height:1.5}
.spec-tag{display:inline-block;margin-top:var(--s12);padding:var(--s2) var(--s4);
  border:1px dashed var(--hairline-lt);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:400;
  letter-spacing:var(--ls-caption);line-height:var(--lh-caption);
  text-transform:uppercase;color:var(--champagne)}
.spec-tag--inline{margin-top:0;vertical-align:middle}

/* ============================ 13. STEPS ================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.steps li{border-top:1px solid var(--hairline);padding-top:var(--s4)}
.steps .ledger-num{display:block;margin-bottom:var(--s3)}
.steps p{margin-top:var(--s2);font-family:var(--font-serif);font-weight:400;
  color:var(--sand);font-size:var(--fs-body);line-height:1.5}

/* ============================ 14. QUOTE ================================== */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:start}
.ticks{margin-top:var(--s6);display:grid;gap:var(--s2)}
.ticks li{padding-left:var(--s6);position:relative;color:var(--champagne);font-size:var(--fs-body-sm)}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:var(--s3);height:1px;
  background:var(--gold)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin-top:var(--s8)}
.facts dt{font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:400;
  letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--champagne);
  padding-top:.25em}
.facts dd{margin:0;color:var(--sand);font-size:var(--fs-body-sm)}
.facts a{color:var(--champagne);display:inline-flex;align-items:center;min-height:44px}
.pending{color:var(--danger);font-style:italic}

/* ============================ 15. TESTIMONIALS =========================== */
.reviews{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s16);align-items:start}
.review--lead{border-top:1px solid var(--hairline);padding-top:var(--s6)}
/* Quotes switch to the text serif (italic on the lead quote): the testimonial band is
   the one place the visitor is reading someone else's words, so it changes voice. */
.review blockquote,.review-list blockquote{
  font-family:var(--font-serif);font-weight:400;font-size:var(--fs-quote-lg);
  line-height:var(--lh-quote-lg);color:var(--cream)}
.review--lead blockquote{font-style:italic}
.review-list blockquote{font-size:var(--fs-quote);line-height:var(--lh-quote)}
.review figcaption,.review-list .caption{margin-top:var(--s4);color:var(--sand);
  font-family:var(--font-body);text-transform:none;letter-spacing:0;
  font-size:var(--fs-body-sm)}
.review-list{display:grid;gap:var(--s8)}
.review-list li{border-top:1px solid var(--hairline);padding-top:var(--s6)}
.stars{display:inline-flex;gap:var(--s1);margin-bottom:var(--s3)}
.stars svg{width:13px;height:13px;fill:var(--gold)}
.stars svg.off{fill:var(--hairline-lt)}

/* ============================ 16. ABOUT ================================== */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s16);align-items:start}
.about-grid p{margin-top:var(--s6);font-family:var(--font-serif);font-size:var(--fs-body);
  line-height:1.6;color:var(--sand);max-width:58ch}
.pullquote{margin-top:var(--s8);padding-left:var(--s6);border-left:2px solid var(--gold);
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:var(--fs-quote-lg);line-height:var(--lh-quote-lg)}
.pullquote cite{display:block;margin-top:var(--s3);font-family:var(--font-body);
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;
  color:var(--champagne);font-style:normal}
.visit{border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:var(--s8);background:var(--charcoal)}
.visit .facts{margin-top:var(--s6)}
.visit .btn{margin-top:var(--s8)}
.map{width:100%;height:240px;margin-top:var(--s6);border:1px solid var(--hairline);
  border-radius:var(--radius-md);filter:grayscale(1) contrast(1.05)}

/* ============================ 17. FOOTER ================================= */
.site-foot{border-top:1px solid var(--hairline);padding-block:var(--s16) var(--s8)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s8)}
.site-foot p{color:var(--sand);font-size:var(--fs-body-sm)}
.site-foot .caption{margin-bottom:var(--s3)}
.site-foot a{display:block;padding-block:var(--s3);color:var(--sand);
  font-size:var(--fs-body-sm);text-decoration:none;
  transition:color var(--dur-1) var(--ease)}
.site-foot a:hover{color:var(--gold)}
.copy{margin-top:var(--s12);padding-top:var(--s4);border-top:1px solid var(--hairline);
  text-align:center;color:var(--sand);font-size:var(--fs-caption)}

/* ============================ 18. SCROLL REVEAL ==========================
   Opacity and transform only. `[data-reveal]` starts hidden ONLY when <html>
   carries `.js` (set by the inline head script, and only when IntersectionObserver
   exists), so a blocked or failed reveal.js leaves the page fully readable.
   The transition list also re-declares the interaction properties so hover states
   on revealed rows keep animating.
   ======================================================================== */
.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-dist));
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),
             background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease);
}
.js [data-reveal].is-in{opacity:1;transform:none}
/* Short cascade down the repetitive lists. Delays only ever shorten the wait. */
.ledger li:nth-child(2),.swatches li:nth-child(2),.steps li:nth-child(2),
.review-list li:nth-child(2),.gal figure:nth-child(2){transition-delay:60ms}
.ledger li:nth-child(3),.swatches li:nth-child(3),.steps li:nth-child(3),
.review-list li:nth-child(3),.gal figure:nth-child(3){transition-delay:120ms}
.ledger li:nth-child(4),.swatches li:nth-child(4),.steps li:nth-child(4),
.review-list li:nth-child(4),.gal figure:nth-child(4){transition-delay:180ms}
.ledger li:nth-child(5),.steps li:nth-child(5),.gal figure:nth-child(5){transition-delay:240ms}
.ledger li:nth-child(6),.steps li:nth-child(6),.gal figure:nth-child(6){transition-delay:300ms}

/* ============================ 19. DEMO MODULES (ag-*) ====================
   Styling for ../shared/demo.js. Class names come from that module.
   ======================================================================== */
.ag-badge{display:inline-block;margin-top:var(--s4);font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--champagne);
  border:1px dashed var(--hairline-lt);padding:var(--s1) var(--s3);border-radius:var(--radius-pill)}

.ag-stepbar{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.ag-stepbar-item{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;
  color:var(--sand);padding-bottom:var(--s2);border-bottom:2px solid var(--hairline)}
.ag-stepbar-item.is-active{color:var(--cream);border-color:var(--gold)}
.ag-stepbar-item.is-done{color:var(--champagne);border-color:var(--hairline-lt)}
.ag-stepbar-num{display:inline-flex;width:20px;height:20px;align-items:center;
  justify-content:center;border-radius:50%;border:1px solid currentColor;
  font-size:var(--fs-caption)}
.ag-stepbar-lbl{display:inline}
.ag-qh{font-family:var(--font-display);font-size:var(--fs-title-lg);font-weight:600;
  line-height:var(--lh-title-lg);margin-bottom:var(--s2)}
.ag-qp{color:var(--sand);font-size:var(--fs-body-sm);margin-bottom:var(--s6)}
.ag-choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.ag-choice{cursor:pointer;text-align:left;padding:var(--s4);background:var(--stone);
  color:var(--cream);border:1px solid var(--hairline);border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:var(--fs-body-sm);
  transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.ag-choice:hover{border-color:var(--gold);background:var(--stone-2)}
.ag-field{margin-bottom:var(--s4)}
.ag-field label,.ag-grouplabel{display:block;font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--champagne);
  margin-bottom:var(--s2)}
.ag-grouplabel{margin-bottom:var(--s3)}
.ag-field input,.ag-field select{width:100%;min-height:48px;padding:var(--s3) var(--s3);
  background:var(--stone);color:var(--cream);border:1px solid var(--hairline);
  border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--fs-body)}
.ag-field input:focus,.ag-field select:focus{border-color:var(--gold)}
.ag-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s6)}
.ag-swatch{cursor:pointer;padding:0;border:1px solid var(--hairline);
  border-radius:var(--radius-md);overflow:hidden;background:var(--stone);color:var(--sand);
  font-family:var(--font-body);font-size:var(--fs-caption);text-transform:uppercase;
  letter-spacing:.04em;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ag-swatch img{aspect-ratio:5/4;object-fit:cover;width:100%}
.ag-swatch span{display:block;padding:var(--s2) var(--s1)}
.ag-swatch.is-on{border-color:var(--gold);color:var(--gold)}
.ag-qnav{display:flex;gap:var(--s2);margin-top:var(--s2)}
.ag-btn{cursor:pointer;font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-button);letter-spacing:var(--ls-button);text-transform:uppercase;
  min-height:48px;padding:var(--s3) var(--s6);border-radius:var(--radius-md);
  border:1px solid transparent;
  transition:background-color var(--dur-2) var(--ease),color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease)}
.ag-btn-primary{background:var(--gold);color:var(--on-gold)}
.ag-btn-primary:hover{background:var(--gold-bright)}
.ag-btn-primary:disabled{opacity:.75;cursor:default}
.ag-btn-ghost{background:transparent;color:var(--cream);border-color:var(--hairline-lt)}
.ag-btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.ag-err{color:var(--danger);font-size:var(--fs-body-sm);margin:var(--s1) 0}
.ag-result{border:1px solid var(--hairline-lt);border-radius:var(--radius-lg);
  padding:var(--s6);background:var(--stone);margin-bottom:var(--s4)}
.ag-result-head{font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  text-transform:uppercase;color:var(--champagne)}
.ag-result-num{font-family:var(--font-display);font-size:var(--fs-display-md);
  color:var(--gold);line-height:1.1;margin:var(--s1) 0}
.ag-result-note{font-size:var(--fs-body-sm);color:var(--sand);margin:0}
.ag-summary{list-style:none;padding:0;margin:0 0 var(--s4)}
.ag-summary li{display:flex;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) 0;border-bottom:1px solid var(--hairline);font-size:var(--fs-body-sm)}
.ag-summary span{color:var(--sand)}

.ag-pv-wrap{position:relative}
.ag-pv-canvas{width:100%;height:auto;border-radius:var(--radius-md);
  border:1px solid var(--hairline);background:var(--stone);touch-action:none;cursor:grab}
.ag-pv-canvas:active{cursor:grabbing}
.ag-pv-hint{position:absolute;left:var(--s3);bottom:var(--s3);background:var(--scrim);
  color:var(--champagne);font-size:var(--fs-caption);letter-spacing:.04em;
  padding:var(--s1) var(--s3);border-radius:var(--radius-pill)}
.ag-pv-controls{margin-top:var(--s4)}
.ag-pv-controls .ag-swatches{margin-bottom:var(--s4)}
.ag-pv-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.ag-pv-upload{cursor:pointer}
.ag-pv-op{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  text-transform:uppercase;color:var(--champagne)}
.ag-pv-op input{accent-color:var(--gold)}
.ag-pv-op input[type="range"]{min-height:44px;width:180px}

.ag-loop-form{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:var(--s4);align-items:end}
.ag-loop-form .ag-field{margin:0}
.ag-loop-out{margin-top:var(--s6)}
.ag-loop-head{font-size:var(--fs-body-sm);color:var(--champagne);margin-bottom:var(--s3)}
.ag-loop-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s3);
  border:1px solid var(--hairline);border-radius:var(--radius-md);
  background:var(--stone);margin-bottom:var(--s2)}
.ag-loop-thumb{width:64px;height:48px;border-radius:var(--radius-sm);flex:none;
  background-size:cover;background-position:center}
.ag-loop-info{display:flex;flex-direction:column}
.ag-loop-info strong{font-weight:500}
.ag-loop-info span{font-size:var(--fs-caption);color:var(--sand)}
.ag-loop-price{margin-left:auto;font-family:var(--font-display);
  font-size:var(--fs-title-lg);color:var(--gold);text-align:right}
.ag-loop-price em{font-style:normal;color:var(--champagne);font-size:var(--fs-body-sm)}
.ag-loop-empty{color:var(--sand)}

/* ============================ 20. RESPONSIVE ============================= */
@media (max-width:1024px){
  :root{--section:64px;--fs-display-xl:48px;--fs-display-lg:36px;--fs-display-md:28px}
  .nav{display:none}
  .hero-grid,.cost-grid,.quote-grid,.about-grid,.reviews{grid-template-columns:1fr;gap:var(--s12)}
  .hero-media{order:-1}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gal{column-count:2}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s12)}
  .ag-loop-form{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  :root{--section:56px;--fs-display-xl:36px;--fs-display-lg:30px;--fs-display-md:24px;
        --fs-lead:17px}
  .lang,.head-actions .btn--ghost{display:none}
  /* Keeps the header button on one line at 375px without shrinking the type. */
  .head-actions .btn{padding-inline:var(--s4)}
  .hero{padding-block:var(--s8) var(--s12)}
  .ledger li{grid-template-columns:40px 1fr;gap:var(--s3)}
  .ledger li p{grid-column:2}
  .swatches,.steps,.ag-choices,.ag-swatches{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .gal{column-count:2}
  .foot-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:var(--s1)}
  .visit{padding:var(--s6)}
  .ag-loop-form{grid-template-columns:1fr}
}
@media (max-width:420px){
  .gal{column-count:1}
}

/* ============================ 21. REDUCED MOTION ========================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms;
    animation-iteration-count:1;
    transition-duration:.01ms;
  }
  html{scroll-behavior:auto}
  /* Belt and braces: revealed content is never held behind movement. */
  .js [data-reveal]{opacity:1;transform:none}
}