/* ============================================================
   Winelands Estate Blinds — design system
   Theme: winelands-estates (Cape Winelands gated security &
   golf estates — Paarl, Stellenbosch, Franschhoek, Wellington
   estate belts)
   Palette: manor white + estate ink + gilt brass
   Fonts: Radley (display serif, self-hosted-not-needed — Google
   Fonts) + Mona Sans (body, self-hosted woff2 — not on Google
   Fonts CDN)
   Layout: "estate dossier" — gated-entrance cinematic hero,
   estate-by-estate spec cards, a dedicated committee-rules
   content block. TOP nav, transparent-over-hero to solid-on-
   scroll.
   Motif: the wrought-iron estate gate — an arched two-leaf gate
   built from horizontal brass louvre bars (the same language as
   the logo mark). Carried through the logo, the section rule,
   the FAQ indicator and the signature scroll moment (the gate
   parting on scroll, not a slat-tilt — see site.js).
   ============================================================ */

:root{
  --canvas:#f6f5f2;
  --canvas-alt:#efe9df;
  --canvas-deep:#e6ddcd;
  --ink:#232323;
  --ink-soft:#55504a;
  --ink-faint:#8a837a;
  --brass:#a98f55;
  --brass-deep:#4a3d20;
  --brass-pale:#ecdfc4;
  --white:#ffffff;
  --line:rgba(35,35,35,.13);
  --line-dark:rgba(246,245,242,.2);
  --shadow-1:0 1px 2px rgba(20,16,10,.07),0 14px 30px rgba(20,16,10,.10);
  --shadow-2:0 34px 80px rgba(12,10,6,.38);
  --ff-display:'Radley','Iowan Old Style',Georgia,'Times New Roman',serif;
  --ff-body:'Mona Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --nav-h:82px;
}

@font-face{
  font-family:'Mona Sans';
  src:url('../fonts/mona-sans-variable-latin.woff2') format('woff2-variations'),
      url('../fonts/mona-sans-variable-latin.woff2') format('woff2');
  font-weight:200 900;
  font-stretch:75% 125%;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--ff-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin:0;color:var(--ink)}
h2{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.4rem)}
h3{font-size:1.5rem}
p{margin:0}
.container{max-width:980px;margin:0 auto;padding:0 30px}
.container-wide{max-width:1240px;margin:0 auto;padding:0 30px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--canvas);padding:12px 20px;z-index:999;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:3px}

.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-deep)}
.on-dark .eyebrow{color:var(--brass-pale)}
.rule{width:60px;height:2px;background:var(--brass);margin-top:20px;transform-origin:left;transform:scaleX(0)}
.rule.in{transform:scaleX(1);transition:transform .9s cubic-bezier(.22,.61,.36,1)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:2px;font-weight:700;font-size:.94rem;font-family:var(--ff-body);transition:transform .25s cubic-bezier(.22,.61,.36,1),background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--canvas);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--brass-deep);color:#fff;box-shadow:0 14px 32px rgba(74,61,32,.4)}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--canvas)}
.btn-block{width:100%;justify-content:center}
.hero .btn-outline{border-color:rgba(255,255,255,.7);color:#fff}
.hero .btn-outline:hover{background:#fff;color:var(--ink)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- top nav ---------- */
.top-nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,50px);height:var(--nav-h);transition:background .35s,box-shadow .35s,padding .35s}
.top-nav .brand{display:flex;align-items:center;gap:12px;color:#fff}
.top-nav .logo-mark{width:38px;height:38px;flex:none;object-fit:contain}
.top-nav .brand-word{font-family:var(--ff-display);font-weight:400;font-size:1.2rem;letter-spacing:.01em}
.top-links{display:flex;align-items:center;gap:28px}
.top-links a{font-size:.87rem;font-weight:600;color:rgba(255,255,255,.88);transition:color .25s;position:relative}
.top-links a:hover{color:#fff}
.top-nav .btn{padding:12px 24px;font-size:.85rem}
.top-nav .btn-outline{margin-left:6px}
.top-nav.solid{background:rgba(246,245,242,.97);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--line),0 14px 28px rgba(20,16,10,.08)}
.top-nav.solid .brand,.top-nav.solid .top-links a{color:var(--ink)}
.top-nav.solid .top-links a:hover{color:var(--brass-deep)}
.top-nav.solid .btn-outline{border-color:var(--ink);color:var(--ink)}
.top-nav.solid .btn-outline:hover{background:var(--ink);color:var(--canvas)}
.nav-toggle{display:none}
.mobile-panel{position:fixed;inset:0;background:var(--ink);color:var(--canvas);z-index:120;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:40px;transform:translateY(-100%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.mobile-panel.open{transform:translateY(0)}
.mobile-panel a{font-family:var(--ff-display);font-size:1.7rem;padding:12px 0;border-bottom:1px solid var(--line-dark)}
.mobile-close{position:absolute;top:26px;right:26px;color:var(--canvas)}

@media (max-width:900px){
  .top-links{display:none}
  .top-nav .btn-outline{display:none}
  .nav-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;color:#fff}
  .top-nav.solid .nav-toggle{color:var(--ink)}
  .nav-toggle svg{width:22px;height:22px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,10,.35) 0%,rgba(20,16,10,.28) 34%,rgba(18,14,8,.68) 78%,rgba(14,11,6,.92) 100%)}
.hero-inner{position:relative;z-index:2;color:#fff;padding:0 clamp(20px,4vw,50px) 92px;max-width:1240px;margin:0 auto;width:100%}
.hero-title{font-family:var(--ff-display);font-weight:400;font-size:clamp(2.5rem,1.7rem + 3.6vw,4.6rem);line-height:1.06;letter-spacing:-.015em;max-width:15ch;margin:18px 0 22px}
/* Progressive enhancement, not a requirement: .word/.hero-fade render at
   full opacity by default (no JS, JS-disabled, GSAP CDN blocked/failed,
   and prefers-reduced-motion:reduce all land here) so the hero headline,
   subhead, CTAs and trust row are always the first thing a visitor sees.
   Only when GSAP has loaded AND motion is allowed does site.js apply an
   inline hidden starting state (gsap.set) immediately before animating
   these elements in — see the hasGSAP block in js/site.js. */
.hero-title .word{display:inline-block}
.hero-sub{font-size:1.14rem;max-width:46ch;color:rgba(255,255,255,.9);margin-bottom:34px}
.trust-row{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px}
.trust-row li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:rgba(255,255,255,.92)}
.trust-row svg{width:18px;height:18px;flex:none;color:var(--brass-pale)}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:var(--brass-pale);overflow:hidden;padding:15px 0;white-space:nowrap}
.marquee-track{display:inline-flex;gap:44px;animation:marquee 34s linear infinite}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.marquee-track span{font-family:var(--ff-display);font-style:italic;font-size:1.05rem;letter-spacing:.02em;opacity:.92}
.marquee-track span::after{content:'\2022';margin-left:44px;color:var(--brass)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- section rhythm ---------- */
section{padding:100px 0}
.section-head{max-width:640px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin-top:16px}
.section-head p{margin-top:18px;color:var(--ink-soft);font-size:1.05rem}
.alt{background:var(--canvas-alt)}
.reveal-item{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal-item.in{opacity:1;transform:translateY(0)}

/* ---------- product grid ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.product-card{background:var(--canvas);position:relative;display:flex;flex-direction:column}
.product-card .thumb{position:relative;aspect-ratio:4/3;overflow:hidden}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.product-card:hover .thumb img{transform:scale(1.06)}
.product-card .body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.product-card h3{font-size:1.14rem;margin-bottom:8px}
.product-card p{color:var(--ink-soft);font-size:.92rem;flex:1}
.product-card .go{margin-top:16px;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-deep);display:inline-flex;align-items:center;gap:6px}
.product-card .go svg{width:14px;height:14px;transition:transform .25s}
.product-card:hover .go svg{transform:translateX(4px)}
@media (max-width:980px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.product-grid{grid-template-columns:1fr}}

/* ---------- editorial photo section ---------- */
.editorial{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
.editorial .col-stack{display:grid;gap:20px}
.ed-photo{position:relative;overflow:hidden;border-radius:2px}
.ed-photo img{width:100%;height:100%;object-fit:cover}
.ed-photo.tall{aspect-ratio:4/5}
.ed-photo.wide{aspect-ratio:16/11}
.ed-caption{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(0deg,rgba(20,16,10,.72),rgba(20,16,10,0));color:#fff;font-size:.86rem}
.ed-caption strong{display:block;font-family:var(--ff-display);font-size:1.05rem;font-weight:400;margin-bottom:2px}
@media (max-width:860px){.editorial{grid-template-columns:1fr}}

/* ---------- locale / spec-methodology section ---------- */
.spec-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.spec-list{display:grid;gap:26px;margin-top:10px}
.spec-item{display:grid;grid-template-columns:44px 1fr;gap:16px}
.spec-item .num{font-family:var(--ff-display);font-size:1.5rem;color:var(--brass)}
.spec-item h4{font-family:var(--ff-body);font-weight:700;font-size:1rem;margin-bottom:6px}
.spec-item p{color:var(--ink-soft);font-size:.94rem}
@media (max-width:900px){.spec-wrap{grid-template-columns:1fr;gap:40px}}

/* ---------- committee-rules block (gate motif) ---------- */
.committee{background:var(--ink);color:var(--canvas);position:relative;overflow:hidden}
.committee .container-wide{position:relative;z-index:2}
.committee .section-head p{color:rgba(246,245,242,.78)}
.gate-stage{position:relative;display:flex;justify-content:center;margin:44px 0 8px;perspective:1400px}
.gate-svg{width:min(680px,92%);height:auto}
.gate-leaf{transform-origin:0% 50%}
.gate-leaf.right{transform-origin:100% 50%}
.committee-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:54px}
.committee-steps li{border-top:1px solid var(--line-dark);padding-top:18px}
.committee-steps .step-no{font-family:var(--ff-display);color:var(--brass-pale);font-size:1.2rem;display:block;margin-bottom:8px}
.committee-steps p{color:rgba(246,245,242,.82);font-size:.92rem}
@media (max-width:760px){.committee-steps{grid-template-columns:1fr}}

/* ---------- process ---------- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;counter-reset:step}
.process-item{position:relative;padding-top:20px}
.process-item::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--ff-display);font-size:2.3rem;color:var(--brass);display:block;margin-bottom:14px}
.process-item h4{font-family:var(--ff-body);font-weight:700;font-size:1.02rem;margin-bottom:8px}
.process-item p{color:var(--ink-soft);font-size:.92rem}
@media (max-width:900px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.process-grid{grid-template-columns:1fr}}

/* ---------- estate-by-estate spec cards (area belts) ----------
   Deliberately text-only "dossier card" — no photo. The homepage
   already carries 12 product photos + 3 editorial shots, and each
   area's own photo lives solely on that area's own page (image-
   uniqueness law: one file, one page, network-wide). */
.estate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.estate-card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass);display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s;padding:26px 22px 28px}
.estate-card:hover{box-shadow:var(--shadow-1);transform:translateY(-4px)}
.estate-card .eyebrow{font-size:.66rem}
.estate-card h3{font-size:1.1rem;margin:10px 0 12px}
.estate-card .spec-tag{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--brass-deep);font-weight:700;background:var(--brass-pale);padding:5px 10px;margin-bottom:14px}
.estate-card p{font-size:.9rem;color:var(--ink-soft);flex:1}
.estate-card .go{margin-top:16px;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
@media (max-width:980px){.estate-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.estate-grid{grid-template-columns:1fr}}

/* ---------- related-products (text-only cross-links, no thumbs —
   thumbnails would reuse another page's one-and-only image) ---------- */
.related-chip-row{display:flex;flex-wrap:wrap;gap:14px}
.related-chip{border:1px solid var(--line);background:var(--white);padding:16px 20px;flex:1 1 220px;transition:border-color .2s,box-shadow .2s,transform .2s}
.related-chip:hover{border-color:var(--brass);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.related-chip .eyebrow{font-size:.62rem}
.related-chip h4{font-family:var(--ff-display);font-weight:400;font-size:1.05rem;margin:8px 0 6px}
.related-chip p{font-size:.86rem;color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 4px;font-family:var(--ff-display);font-size:1.16rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;width:20px;height:20px;flex:none}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--brass-deep);transition:transform .3s}
.faq-icon::before{left:0;top:9px;width:20px;height:2px}
.faq-icon::after{left:9px;top:0;width:2px;height:20px}
.faq-item[open] .faq-icon::after{transform:rotate(90deg) scaleY(0)}
.faq-item .faq-a{padding:0 4px 26px;color:var(--ink-soft);max-width:70ch;font-size:.98rem}

/* ---------- CTA close ---------- */
.cta-close{position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center;padding:120px 0}
.cta-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 30%,rgba(169,143,85,.28),transparent 55%),radial-gradient(circle at 74% 70%,rgba(74,61,32,.34),transparent 50%);filter:blur(10px)}
@media (prefers-reduced-motion:no-preference){.cta-glow{animation:drift 22s ease-in-out infinite alternate}}
@keyframes drift{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(3%,3%) scale(1.08)}}
.cta-close .container{position:relative;z-index:2}
.cta-close h2{color:#fff;max-width:16ch;margin:16px auto 26px}
.cta-close p{color:rgba(255,255,255,.82);max-width:52ch;margin:0 auto 34px}
.cta-close .hero-ctas{justify-content:center}

/* ---------- enquiry form ---------- */
.enquiry{background:var(--canvas-alt)}
.enquiry-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.enquiry-form{background:var(--white);padding:38px;box-shadow:var(--shadow-1)}
.form-row{display:grid;gap:8px;margin-bottom:20px}
.form-row.two{grid-template-columns:1fr 1fr;gap:16px}
.form-row label{font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.form-row input,.form-row select,.form-row textarea{border:1.5px solid var(--line);background:var(--canvas);padding:13px 14px;font-size:.96rem;transition:border-color .2s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--brass);outline:none}
.form-row textarea{resize:vertical;min-height:110px}
.popia{font-size:.82rem;color:var(--ink-faint);margin-top:16px;line-height:1.55}
@media (max-width:900px){.enquiry-wrap{grid-template-columns:1fr;gap:40px}.form-row.two{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(246,245,242,.7);padding:70px 0 34px}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px;padding-bottom:44px;border-bottom:1px solid var(--line-dark)}
.footer-brand{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:16px}
.footer-brand .logo-mark{width:36px;height:36px}
.footer-brand .brand-word{font-family:var(--ff-display);font-size:1.14rem}
.footer-col h5{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-pale);margin-bottom:16px}
.footer-col ul{display:grid;gap:10px}
.footer-col a{font-size:.92rem;color:rgba(246,245,242,.72);transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;font-size:.8rem;color:rgba(246,245,242,.5)}
.footer-popia{font-size:.8rem;color:rgba(246,245,242,.55);max-width:60ch;margin-top:18px;line-height:1.6}
@media (max-width:760px){.footer-top{grid-template-columns:1fr}}

/* ---------- chat widget ---------- */
.chat-widget{position:fixed;right:22px;bottom:22px;z-index:200;font-family:var(--ff-body)}
.chat-launch{width:60px;height:60px;border-radius:50%;background:var(--ink);color:var(--canvas);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2);transition:transform .25s,background .25s}
.chat-launch:hover{background:var(--brass-deep);transform:translateY(-2px)}
.chat-launch svg{width:26px;height:26px}
.chat-panel{position:absolute;right:0;bottom:76px;width:min(360px,88vw);background:var(--white);border-radius:6px;box-shadow:var(--shadow-2);display:flex;flex-direction:column;max-height:min(560px,72vh);opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .25s,transform .25s}
.chat-widget.open .chat-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.chat-widget.open .chat-launch svg.icon-chat{display:none}
.chat-widget:not(.open) .chat-launch svg.icon-close{display:none}
.chat-head{background:var(--ink);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:10px;border-radius:6px 6px 0 0}
.chat-head img{width:26px;height:26px;flex:none;object-fit:contain}
.chat-head strong{font-family:var(--ff-display);font-size:1rem;font-weight:400}
.chat-head span{display:block;font-size:.72rem;color:rgba(246,245,242,.7)}
.chat-body{flex:1;overflow-y:auto;padding:16px 16px 6px;display:flex;flex-direction:column;gap:10px;background:var(--canvas-alt)}
.chat-msg{max-width:86%;padding:11px 13px;border-radius:10px;font-size:.9rem;line-height:1.5}
.chat-msg.bot{background:var(--white);align-self:flex-start;border-bottom-left-radius:2px;box-shadow:0 1px 2px rgba(20,16,10,.06)}
.chat-msg.user{background:var(--ink);color:var(--canvas);align-self:flex-end;border-bottom-right-radius:2px}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 14px;background:var(--canvas-alt)}
.chat-quick button{border:1.5px solid var(--brass);color:var(--brass-deep);padding:8px 13px;border-radius:20px;font-size:.82rem;font-weight:600;transition:background .2s,color .2s}
.chat-quick button:hover{background:var(--brass);color:#fff}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--white);border-radius:0 0 6px 6px}
.chat-form input{flex:1;border:1.5px solid var(--line);padding:11px 12px;font-size:.9rem;border-radius:4px}
.chat-form input:focus{outline:none;border-color:var(--brass)}
.chat-form button{background:var(--ink);color:var(--canvas);width:42px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex:none}
.chat-form button:hover{background:var(--brass-deep)}
.chat-form button svg{width:17px;height:17px}

/* ---------- inner page hero (products/areas) ---------- */
.page-hero{position:relative;min-height:58vh;display:flex;align-items:flex-end;background:var(--ink)}
.page-hero-inner{position:relative;z-index:2;color:#fff;padding:150px 0 64px}
.page-hero .eyebrow{color:var(--brass-pale)}
.page-hero h1{font-size:clamp(2.2rem,1.6rem + 2.6vw,3.6rem);margin-top:14px;max-width:18ch}
.breadcrumb{font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:6px}
.breadcrumb span{color:rgba(255,255,255,.4);margin:0 8px}

.content-block{max-width:760px;margin:0 auto}
.content-block h2{margin-top:44px;margin-bottom:16px}
.content-block h2:first-child{margin-top:0}
.content-block p{color:var(--ink-soft);margin-bottom:16px}
.content-block ul{margin:16px 0 16px 4px;display:grid;gap:10px}
.content-block ul li{padding-left:22px;position:relative;color:var(--ink-soft)}
.content-block ul li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:1.5px;background:var(--brass)}

.callout{background:var(--brass-pale);border-left:3px solid var(--brass);padding:22px 26px;margin:30px 0}
.callout strong{display:block;font-family:var(--ff-display);font-size:1rem;margin-bottom:6px;color:var(--brass-deep)}
.callout p{color:var(--ink-soft);margin:0;font-size:.94rem}

.chip-row{display:flex;flex-wrap:wrap;gap:12px}
.chip{border:1.5px solid var(--line);padding:10px 18px;font-size:.86rem;font-weight:600;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--brass);background:var(--brass-pale)}

.related-products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.related-products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.related-products{grid-template-columns:1fr}}