/*
Theme Name: Giallo Siena Platform
Theme URI: https://giallosiena.com
Description: Single-stone vertical platform for Giallo Siena marble — specification first, provenance second, applications third. Zero-plugin core: custom post types, taxonomies, lead capture.
Version: 1.0.0
Author: Platform Engineering
License: MIT
Text Domain: giallosiena
*/

/* ============================================================================
   ⛔ THE COLOURS BELOW ARE NOT WRITTEN HERE.
   Every value in this file comes from config/giallosiena-theme.php, which is
   this station's own file. That is what makes fifty stations share one
   skeleton and still not look like the same site fifty times.
   The :root block below is a FALLBACK — it is what renders if the theme
   file is missing, and it is deliberately plain rather than pretty.
   ========================================================================= */
:root{
  --accent:#C9A86A; --accent-ink:#7A5C1E; --accent-soft:#F3E7CC; --accent-deep:#4A3A14;
  --paper:#FFFFFF; --paper-alt:#F7F6F3; --paper-tint:#F2EFE8;
  --ink:#16130F; --ink-2:#3A362F; --ink-3:#6E6B63;
  --line:#E4E1D9; --line-strong:#CFCBC0;
  --dark:#1E1B16; --dark-2:#2A261E; --on-dark:#F7F4ED; --on-dark-soft:#C3BCAC;
  --ok:#2F6B4F; --warn:#9A6B1F; --stop:#A3362A;
  --font-head:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --measure:38em; --measure-wide:58em;
  --size-base:16px; --size-small:14px; --size-tiny:12.5px;
  --size-h1:clamp(30px,4.4vw,50px); --size-h2:clamp(23px,2.9vw,33px);
  --size-h3:clamp(18px,1.9vw,21px); --size-h4:16.5px;
  --weight-normal:400; --weight-medium:500; --weight-semi:600; --weight-bold:700;
  --leading-body:1.72; --leading-tight:1.16; --leading-head:1.24;
  --tracking-wide:0.16em; --tracking-mid:0.06em;
  --maxw:1240px; --maxw-text:820px; --maxw-narrow:680px;
  --band:clamp(56px,7vw,104px); --band-tight:clamp(38px,4.6vw,68px);
  --gutter:clamp(18px,3.4vw,40px);
  --radius:3px; --radius-lg:5px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(22,19,15,.05); --shadow-lift:0 12px 34px rgba(22,19,15,.11);
  --shadow-accent:0 10px 26px rgba(122,92,30,.20);
  --transition:180ms cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--font-body);font-size:var(--size-base);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ⛔ IMAGES NEVER OVERFLOW THEIR COLUMN.
   A single oversized image is the most common way a stone page breaks
   on a phone, and the symptom reads as "the site is broken" rather than
   as "an image is too big". */
img{max-width:100%;height:auto;display:block}
svg{max-width:100%;height:auto}

/* ⛔ THE HEADINGS CARRY THE WEIGHT, NOT THE BROWSER.
   A platform reset leaves h1 at 400 and the page reads as a form.
   This station sets its own heading weights, and the hero sets its own
   separately — because a rule that sets h1..h4 to 600 will not reach a
   .hero h1 that is styled by its own class. */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;color:var(--ink);
  font-family:var(--font-head);font-weight:var(--weight-semi);
  line-height:var(--leading-head);letter-spacing:-.012em;
}
h1{font-size:var(--size-h1);line-height:1.1}
h2{font-size:var(--size-h2)}
h3{font-size:var(--size-h3);font-weight:var(--weight-semi)}
h4{font-size:var(--size-h4);font-weight:var(--weight-semi);letter-spacing:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--accent-ink);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent)}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.42em}
strong{color:var(--ink);font-weight:var(--weight-semi)}
small{font-size:var(--size-small)}
hr{border:0;border-top:1px solid var(--line);margin:var(--band-tight) 0}

/* ⛔ THE KICKER — the small uppercase line above a heading.
   This is the reference site's most recognisable device, and it is the
   one piece of its voice that is generic to the category rather than
   proprietary. Every station may use it; the wording differs. */
.kicker{
  display:block;margin:0 0 .7em;
  font-family:var(--font-head);font-size:var(--size-tiny);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--accent-ink);
}
.kicker--muted{color:var(--ink-3)}
.on-dark .kicker{color:var(--accent)}

.lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--ink-2);line-height:1.68}
.muted{color:var(--ink-3)}
.small{font-size:var(--size-small)}
.tiny{font-size:var(--size-tiny)}
.nowrap{white-space:nowrap}

/* ⛔ THE LAYOUT COLUMN.
   The measure is in em because a measure belongs to the type size, and
   `ch` — the width of a zero — has nothing to do with how long a line
   should be. It also moves when the face changes, which makes it a
   silent way for the line length to drift out of range. */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.container--text{max-width:calc(var(--maxw-text) + var(--gutter) * 2)}
.container--narrow{max-width:calc(var(--maxw-narrow) + var(--gutter) * 2)}
.section{padding-block:var(--band)}
.section--tight{padding-block:var(--band-tight)}
.section--alt{background:var(--paper-alt)}
.section--tint{background:var(--paper-tint)}
.section--dark{background:var(--dark);color:var(--on-dark-soft)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark)}

.grid{display:grid;gap:var(--gutter)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--sidebar{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(28px,4vw,64px);align-items:start}
.stack>*+*{margin-top:var(--flow,1rem)}

/* ============================================================================
   TOP BAR — the thin strip above the header
   ========================================================================= */
.topbar{
  background:var(--dark);color:var(--on-dark-soft);
  font-size:var(--size-tiny);letter-spacing:.03em;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;flex-wrap:wrap}
.topbar a{color:var(--on-dark-soft)}
.topbar a:hover{color:var(--accent)}
.topbar__list{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}
.topbar__list li{margin:0}
.topbar__tag{color:var(--accent);font-weight:var(--weight-semi)}

/* ============================================================================
   HEADER
   ========================================================================= */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:60}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.brand__mark{
  width:40px;height:40px;border-radius:var(--radius);flex-shrink:0;
  background:var(--accent);color:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:var(--weight-bold);
  font-size:15px;letter-spacing:.02em;
}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:var(--font-head);font-size:16.5px;font-weight:var(--weight-bold);color:var(--ink);letter-spacing:.01em}
.brand__tag{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* ⛔ THE NAV IS A ROW ON A WIDE SCREEN AND A PANEL ON A NARROW ONE.
   No JavaScript decides that: the panel is a checkbox, so it works
   before the script loads and still works if the script fails. */
.nav{margin-left:auto}
.nav__toggle{display:none;align-items:center;gap:9px;background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);padding:9px 13px;font-family:var(--font-head);font-size:var(--size-small);font-weight:var(--weight-semi);color:var(--ink);cursor:pointer}
.nav__toggle:hover{border-color:var(--accent)}
.nav__check{position:absolute;opacity:0;width:1px;height:1px}
.nav__list{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);list-style:none;margin:0;padding:0}
.nav__list>li{margin:0;position:relative}
.nav__list>li>a{
  display:block;padding:26px 0;font-family:var(--font-head);
  font-size:var(--size-small);font-weight:var(--weight-semi);
  letter-spacing:.03em;color:var(--ink);position:relative;
}
.nav__list>li>a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition);
}
.nav__list>li>a:hover,.nav__list>li.current-menu-item>a::after{transform:scaleX(1)}
.nav__list>li.current-menu-item>a{color:var(--accent-ink)}
.nav__list>li.has-children>a::after{right:12px}
.nav__list ul{
  position:absolute;top:100%;left:-14px;min-width:250px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lift);
  padding:8px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--transition),transform var(--transition),visibility var(--transition);
}
.nav__list>li:hover>ul,.nav__list>li:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0)}
.nav__list ul li{margin:0}
.nav__list ul a{
  display:block;padding:9px 12px;border-radius:var(--radius);
  font-size:var(--size-small);color:var(--ink-2);
}
.nav__list ul a:hover{background:var(--paper-tint);color:var(--accent-ink)}
.nav__cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--accent-deep);
  border-radius:var(--radius);padding:11px 19px;
  font-family:var(--font-head);font-size:var(--size-small);font-weight:var(--weight-bold);
  letter-spacing:.02em;white-space:nowrap;
}
.nav__cta:hover{background:var(--accent-ink);color:#fff}

/* ============================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:13px 26px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  font-family:var(--font-head);font-size:var(--size-small);font-weight:var(--weight-bold);
  letter-spacing:.02em;text-align:center;
  transition:background var(--transition),border-color var(--transition),color var(--transition),transform var(--transition);
}
.btn--primary{background:var(--accent);color:var(--accent-deep)}
.btn--primary:hover{background:var(--accent-ink);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-accent)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--paper-tint)}
.btn--dark{background:var(--dark);color:var(--on-dark)}
.btn--dark:hover{background:var(--accent);color:var(--accent-deep)}
.btn--block{width:100%}
/* ⛔ CONTROLS ARE AT LEAST 44×44.
   A 30-pixel button is a button a thumb cannot hit on a phone. */
.btn--sm{min-height:38px;padding:9px 16px;font-size:var(--size-tiny)}

/* ============================================================================
   HERO — ⛔ THE OPENING IS A SPECIFICATION, NOT A PICTURE.
   This is the station's first difference from the reference, and it is
   the reason a buyer who wants the figures gets them before the mood.
   ========================================================================= */
.hero{background:var(--paper-alt);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4.4vw,68px);align-items:center}
.hero__copy{padding-block:clamp(44px,6vw,88px)}
.hero__title{font-size:var(--size-h1);line-height:1.08;margin-bottom:.4em;letter-spacing:-.02em}
.hero__lede{font-size:clamp(16px,1.25vw,18px);color:var(--ink-2);max-width:34em;margin-bottom:1.6em}
.hero__actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:1.6em}
.hero__figure{margin:0;position:relative}
.hero__figure img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lift)}
.hero__figure figcaption{
  margin-top:11px;font-size:var(--size-tiny);color:var(--ink-3);
  padding-left:11px;border-left:2px solid var(--accent);
}
.hero__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:clamp(26px,3.4vw,44px)}
.hero__stat{background:var(--paper);padding:15px 17px}
.hero__stat dt{font-family:var(--font-head);font-size:11px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.hero__stat dd{margin:0;font-family:var(--font-head);font-size:17px;font-weight:var(--weight-semi);color:var(--ink);line-height:1.25}
.hero__stat dd span{display:block;font-family:var(--font-body);font-size:var(--size-tiny);font-weight:var(--weight-normal);color:var(--ink-3);letter-spacing:0;margin-top:2px}

/* ============================================================================
   SPEC TABLE — the centre of this station
   ========================================================================= */
.spec{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.spec__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.spec__row:last-child{border-bottom:0}
.spec__row>dt{padding:12px 16px;background:var(--paper-tint);font-size:var(--size-small);color:var(--ink-2);font-weight:var(--weight-medium)}
.spec__row>dd{padding:12px 16px;margin:0;font-size:var(--size-small);color:var(--ink);font-family:var(--font-mono);letter-spacing:-.01em}
.spec__source{display:block;font-family:var(--font-body);font-size:11.5px;color:var(--ink-3);letter-spacing:0;margin-top:3px}

/* ============================================================================
   CARDS
   ========================================================================= */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--paper-tint)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 420ms cubic-bezier(.2,.7,.3,1)}
.card:hover .card__media img{transform:scale(1.035)}
.card__body{padding:20px 21px 22px;display:flex;flex-direction:column;flex:1}
.card__title{font-size:var(--size-h4);margin-bottom:.42em}
.card__text{font-size:var(--size-small);color:var(--ink-2);margin-bottom:1em}
.card__link{margin-top:auto;font-family:var(--font-head);font-size:var(--size-tiny);font-weight:var(--weight-bold);letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--accent-ink)}
.card__link::after{content:" →";transition:margin var(--transition)}
.card:hover .card__link::after{margin-left:5px}

/* ============================================================================
   VERDICT CHIPS — ⛔ THE FINISH VERDICT, AS ONE LANGUAGE.
   Three states, three colours, and the colour is never the only signal:
   the words are on the chip too, because colour alone fails for a
   reader who cannot distinguish them, and for a reader in print.
   ========================================================================= */
.verdict{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--radius-pill);font-family:var(--font-head);font-size:11.5px;font-weight:var(--weight-bold);letter-spacing:.04em;white-space:nowrap}
.verdict__dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.verdict--yes{background:#E8F1EA;color:var(--ok)}
.verdict--yes .verdict__dot{background:var(--ok)}
.verdict--ask{background:#F7EFDD;color:var(--warn)}
.verdict--ask .verdict__dot{background:var(--warn)}
.verdict--no{background:#F6E7E4;color:var(--stop)}
.verdict--no .verdict__dot{background:var(--stop)}

/* ============================================================================
   THE MODEL SECTION — ⛔ THE DIFFERENCE, STATED ONCE.
   ========================================================================= */
.model{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.model__step{background:var(--paper);padding:clamp(20px,2.6vw,30px)}
.model__num{font-family:var(--font-head);font-size:11px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);color:var(--accent-ink);margin-bottom:10px}
.model__step h4{font-size:var(--size-h4);margin-bottom:.4em}
.model__step p{font-size:var(--size-small);color:var(--ink-2);margin:0}

/* ============================================================================
   APPLICATION STRIP
   ========================================================================= */
.app{display:flex;flex-direction:column;gap:9px;padding:19px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);text-decoration:none;transition:border-color var(--transition),box-shadow var(--transition)}
.app:hover{border-color:var(--accent);box-shadow:var(--shadow-lift);color:inherit}
.app__name{font-family:var(--font-head);font-size:var(--size-h4);font-weight:var(--weight-semi);color:var(--ink)}
.app__note{font-size:var(--size-tiny);color:var(--ink-3);line-height:1.55}

/* ============================================================================
   ACCORDION — the FAQ
   ========================================================================= */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 0;background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--font-head);font-size:var(--size-h4);font-weight:var(--weight-semi);color:var(--ink)}
.faq__q:hover{color:var(--accent-ink)}
.faq__icon{position:relative;width:13px;height:13px;flex-shrink:0;margin-top:5px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--accent-ink);transition:transform var(--transition)}
.faq__icon::before{left:0;right:0;top:6px;height:1.5px}
.faq__icon::after{top:0;bottom:0;left:6px;width:1.5px}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:scaleY(0)}
.faq__a{padding:0 0 22px;max-width:var(--measure);color:var(--ink-2);font-size:var(--size-small)}
.faq__a[hidden]{display:none}

/* ============================================================================
   FORMS
   ========================================================================= */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-head);font-size:var(--size-tiny);font-weight:var(--weight-bold);letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--ink-2)}
.field label .req{color:var(--stop);margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;min-height:46px;padding:12px 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--size-small);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.field__hint{font-size:var(--size-tiny);color:var(--ink-3)}
.form__note{font-size:var(--size-tiny);color:var(--ink-3);margin-top:14px}

/* ============================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--dark);color:var(--on-dark-soft);padding-top:var(--band-tight)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3.6vw,56px);padding-bottom:var(--band-tight)}
.footer__col h4{font-size:var(--size-tiny);font-family:var(--font-head);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--on-dark);margin-bottom:1.1em}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li{margin-bottom:.5em}
.footer__col a{color:var(--on-dark-soft);font-size:var(--size-small)}
.footer__col a:hover{color:var(--accent)}
.footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:1.1em}
.footer__brand .brand__mark{background:var(--accent)}
.footer__brand .brand__name{color:var(--on-dark)}
.footer__brand .brand__tag{color:var(--on-dark-soft)}
.footer__text{font-size:var(--size-small);max-width:34em}
.copyright-footer{border-top:1px solid rgba(255,255,255,.10);padding-block:20px;font-size:var(--size-tiny);color:var(--on-dark-soft)}
.copyright-footer .container{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.copyright-footer ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.copyright-footer li{margin:0}

/* ============================================================================
   THE PLACEHOLDER MARK — ⛔ AN ILLUSTRATED PICTURE SAYS SO.
   An AI-generated or stock image standing in for the real product must
   say so on the image itself, not only in a caption far away. The rule
   is the same one the whole network runs on: a placeholder is named a
   placeholder, it carries the ai- prefix, and it is registered.
   ========================================================================= */
.media{position:relative}
.media--placeholder::after{
  content:"ILLUSTRATION · NOT A PHOTOGRAPH OF THE STONE";
  position:absolute;left:0;right:0;bottom:0;
  padding:7px 11px;
  background:rgba(22,19,15,.82);color:#F3E7CC;
  font-family:var(--font-head);font-size:10px;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-mid);text-transform:uppercase;
}
.media__flag{
  position:absolute;top:11px;left:11px;z-index:2;
  padding:4px 9px;border-radius:var(--radius-pill);
  background:rgba(22,19,15,.8);color:#F3E7CC;
  font-family:var(--font-head);font-size:10px;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-mid);text-transform:uppercase;
}

/* ============================================================================
   PAGE HEADER (interior pages)
   ========================================================================= */
.page-head{background:var(--paper-alt);border-bottom:1px solid var(--line);padding-block:clamp(30px,4vw,58px)}
.page-head h1{margin-bottom:.35em}
.page-head__lede{max-width:var(--measure);color:var(--ink-2);font-size:clamp(15.5px,1.2vw,17.5px)}
.breadcrumb{font-size:var(--size-tiny);color:var(--ink-3);margin-bottom:1.1em}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--accent-ink)}
.breadcrumb span{margin:0 7px;opacity:.5}

/* ============================================================================
   UTILITIES
   ========================================================================= */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px}.mt-4{margin-top:40px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:26px}.mb-4{margin-bottom:40px}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .model{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .hero__copy{padding-block:clamp(34px,6vw,54px) 0}
  .grid--sidebar{grid-template-columns:minmax(0,1fr)}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  /* ⛔ THE NAV BECOMES A PANEL, AND THE PANEL IS A CHECKBOX.
     No script decides this. The panel works before the script loads,
     and it still works if the script never arrives. */
  .nav__toggle{display:inline-flex}
  .nav__list{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lift);flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--gutter) 18px;
  }
  .nav__check:checked~.nav__list{display:flex}
  .nav__list>li>a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav__list>li>a::after{display:none}
  .nav__list ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0}
  .nav__cta{margin-top:14px;justify-content:center}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4,.model{grid-template-columns:minmax(0,1fr)}
  .hero__stats{grid-template-columns:minmax(0,1fr)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .spec__row{grid-template-columns:minmax(0,1fr)}
  .spec__row>dt{padding-bottom:3px}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .copyright-footer .container{flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   PRINT — the buyer prints the specification sheet.
   ========================================================================= */
@media print{
  .topbar,.site-header,.site-footer,.nav,.btn,.form__note{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:12pt}
  a{color:#000;text-decoration:none}
  .spec,.card{border:1px solid #999;break-inside:avoid}
}