@charset "UTF-8";

/* ==========================================================================
   0. FONTS — self-hosted
   --------------------------------------------------------------------------
   The prototype pulled Poppins, Barlow and IBM Plex Mono from
   fonts.googleapis.com. That cost two extra DNS + TLS handshakes and a
   render-blocking stylesheet on every page load, and it disclosed every
   visitor's IP address to a third party.

   The exact same font files are now served from /fonts. Only the latin and
   latin-ext subsets are shipped, and unicode-range means a browser downloads
   only the subsets and weights a page actually paints.

   font-display:swap is preserved from Google's own CSS, so text is readable
   immediately and never invisible while a font loads.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Audiowide — the HLR brand face. This is the exact typeface used in the
   "HYBRID LIQUID RUBBER SA" logo wordmark, so headings now match the branding
   instead of a generic geometric sans.

   It ships as a single Regular weight. Declaring the descriptor as a 400–900
   range tells the browser this one file covers every weight the stylesheet
   asks for, which stops it from synthesising a smeared faux-bold at 600/700/800.
   font-synthesis-weight is switched off as a second guard for older engines.
   Licensed under the SIL Open Font License.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Audiowide';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/audiowide-400.woff2') format('woff2');}

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ==========================================================================
   Hybrid Liquid Rubber SA — Moreleta Park Branch
   Stylesheet
   --------------------------------------------------------------------------
   Sections
     1.  Design tokens
     2.  Base / reset
     3.  Custom cursor
     4.  Typography & layout primitives
     5.  Buttons
     6.  Header & navigation
     7.  Hero
     8.  Marquee — centered + seamless
     9.  Special strip
     10. Problem house
     11. Shop
     12. Kits
     13. Shades
     14. Before / after + gallery
     15. FAQ
     16. Contact
     17. Footer
     18. Showroom
     19. WhatsApp widget
     20. Order tray
     21. Modal
     22. Quick bar
     23. Reveal animation states
     24. Responsive
     25. Accessibility utilities           [added]
     26. Breadcrumbs                       [added]
     27. Contact form                      [added]
     28. Legal pages (terms / privacy)     [added]
     29. Print                             [added]
     30. Content protection                [added]
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* --black-3:#1f2216 removed: declared in the original but never referenced. */
  --white:#f5f6ef; --white-2:#eceee1; --black:#0d0f0a; --black-2:#171911;
  --ink:#14160f; --muted:#63665a; --muted-2:#6a6b60; --on-black-muted:#a7aa99;
  --lime:#8fce16; --lime-bright:#a6ea28; --lime-deep:#4c6a0d;
  --line:rgba(13,15,10,.13); --line-black:rgba(245,246,239,.14);
  --radius:8px;
  /* --display is the HLR logo face (Audiowide). Poppins stays as the fallback
     so headings still render correctly if the brand font fails to load. */
  --display:'Audiowide','Poppins',sans-serif;
  --body:'Barlow',sans-serif; --mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,.9,.32,1);
  /* Accessibility: form + status colours (added) */
  --danger:#8a2f16; --danger-line:#d9a49a; --danger-bg:#fdecea;
  --ok-text:#31450a; --ok-bg:rgba(76,106,13,.1);
}
/* --muted-2 was #8b8d7e. That scores 3.11:1 on --white and 2.88:1 on --white-2,
   below the WCAG 2.1 AA minimum of 4.5:1 for body text. It is now #6a6b60
   (4.97:1 / 4.60:1). On the near-black footer the original value already passed
   at 5.70:1, so it is restored there and the footer renders unchanged. */
footer{--muted-2:#8b8d7e;}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--ink);font-family:var(--body);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
/* The original reset only cleared <ul>, and nothing in the prototype used an
   <ol> with a visible marker. The legal pages do — and they carry their own
   clause numbers, so the browser's decimal marker rendered a second number
   beside each one ("1. 13.1"). */
ul,ol{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
::selection{background:var(--lime);color:#0c0d09;}
section{position:relative;padding:96px 0;}
.on-black{background:var(--black);color:#f2f3ec;}
.on-black p.lead,.on-black .muted{color:var(--on-black-muted);}
.on-black h1,.on-black h2,.on-black h3{color:#f5f6ef;}

/* ==========================================================================
   3. CUSTOM CURSOR
   ========================================================================== */
@media (pointer:fine){ body{cursor:none;} a,button,input,textarea,select,summary,.swatch-btn{cursor:none;} }
/* Position is driven by transform (script.js) rather than left/top so it is
   composited on the GPU and never lags the pointer. transform is deliberately
   NOT in the transition list — the dot must move instantly. */
.cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--lime-deep);pointer-events:none;z-index:999;transform:translate(-50%,-50%);will-change:transform;transition:width .25s var(--ease),height .25s var(--ease),background .2s,border-color .2s,opacity .2s;opacity:0;border:2px solid transparent;}
.cursor.ready{opacity:1;}
.cursor.grow{width:40px;height:40px;background:transparent;border-color:var(--lime-deep);}
@media (pointer:coarse){.cursor{display:none;}}

/* ==========================================================================
   4. TYPOGRAPHY & LAYOUT PRIMITIVES
   ========================================================================== */
.tape{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#181a12;background:var(--lime);padding:6px 12px;transform:rotate(-1.1deg);margin-bottom:20px;}
/* Audiowide is a wide geometric face, so the original -0.01em tracking (tuned
   for Poppins) closed it up too far. Zero tracking lets it breathe, and
   font-synthesis-weight:none stops any faux-bold. */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:0;line-height:1.14;font-synthesis-weight:none;}
/* Each sub-page promotes its lead section heading from <h2> to <h1> so every
   document has exactly one h1 and the outline is correct. The original only
   ever sized `.hero h1`, so a bare h1 would have fallen back to the browser
   default (2em) and shrunk. Giving h1 the same clamp as h2 keeps those
   headings rendering at exactly the size they did before. */
h1,h2{font-size:clamp(30px,4vw,46px);}   /* .hero h1 overrides this in §7 */
h1 em,h2 em{font-style:normal;color:var(--lime-deep);}
.on-black h1 em,.on-black h2 em{color:var(--lime);}
h3{font-size:19px;font-weight:600;}
p.lead{color:var(--muted);font-size:16.5px;max-width:54ch;}
.section-head{max-width:660px;margin-bottom:46px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
/* Utility replacements for the former inline style="" attributes. Moving these
   into the stylesheet is what allows a strict Content-Security-Policy without
   'unsafe-inline' (see .htaccess). */
.bg-alt{background:var(--white-2);}
.mt-12{margin-top:12px;}
.align-start{align-items:start;}
.section-note{margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--muted-2);}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:600;font-size:15px;padding:13px 24px;border-radius:100px;border:1.5px solid var(--ink);transition:background .2s,color .2s,border-color .2s;}
.btn-solid{background:var(--ink);color:var(--white);}
.btn-solid:hover{background:var(--lime-deep);border-color:var(--lime-deep);}
.on-black .btn-solid{background:var(--lime);color:#12140c;border-color:var(--lime);}
.on-black .btn-solid:hover{background:var(--lime-bright);border-color:var(--lime-bright);}
.btn-ghost{background:transparent;border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.on-black .btn-ghost{color:#f2f3ec;border-color:var(--line-black);}
.on-black .btn-ghost:hover{border-color:#f2f3ec;}
.btn-wa{background:#25D366;border-color:#25D366;color:#05300f;}
.btn-wa:hover{background:#41e37c;border-color:#41e37c;}
.btn svg{width:16px;height:16px;flex:none;}
.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn[disabled]{opacity:.55;pointer-events:none;}

/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */
header{position:sticky;top:0;z-index:80;background:rgba(245,246,239,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;max-width:1180px;margin:0 auto;}
.logo{display:flex;align-items:center;gap:12px;}
.logo .logo-mark{height:50px;width:auto;}
.logo .branch{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-deep);border-left:1px solid var(--line);padding-left:12px;white-space:nowrap;}
@media (max-width:820px){ .logo .branch{display:none;} }
@media (max-width:520px){ .logo .logo-mark{height:38px;} }
nav.links{display:flex;align-items:center;gap:2px;position:relative;}
nav.links a{font-weight:600;font-size:13.5px;color:var(--muted);padding:9px 10px;white-space:nowrap;border-radius:6px;position:relative;z-index:2;}
nav.links a.active{color:var(--ink);}
.nav-indicator{position:absolute;bottom:2px;height:2px;background:var(--lime);border-radius:2px;z-index:1;transition:left .3s var(--ease),width .3s var(--ease);width:0;}
.nav-cta{display:flex;align-items:center;gap:10px;}
.burger{display:none;width:24px;height:18px;position:relative;}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);}
.burger span:nth-child(1){top:0;}.burger span:nth-child(2){top:8px;}.burger span:nth-child(3){top:16px;}

/* Mobile drop-down menu.
   Previously injected at runtime by JavaScript (document.createElement("style")).
   Moved here so the styles are parsed with the rest of the CSS instead of causing
   a style recalculation after script execution. Rules are unchanged. */
.links.mobile-open{display:flex!important;position:fixed;top:63px;left:0;right:0;background:var(--white);flex-direction:column;align-items:stretch;padding:8px 24px 20px;border-bottom:1px solid var(--line);gap:0;z-index:70;}
.links.mobile-open a{padding:15px 4px;text-align:left;border-bottom:1px solid var(--line);font-size:16px;}
.links.mobile-open a:last-of-type{border-bottom:none;}
.links.mobile-open .nav-indicator{display:none;}

/* ==========================================================================
   7. HERO
   ========================================================================== */
/* The hero photo used to be a framed card in the right column. It is now the
   branch storefront used as a background: the image sits behind everything and
   a scrim of the page colour fades it out to the left, top and bottom so it
   melts into the page instead of reading as a pasted rectangle.

   The left third of the scrim is fully opaque --white, so the heading and body
   copy sit on exactly the same background they did before and every contrast
   ratio is unchanged. */
.hero{position:relative;padding:104px 0 116px;overflow:hidden;isolation:isolate;}
/* Small screens get the 900px file (76 KB); the 1600px file (216 KB) is only
   fetched once the viewport is wide enough to need it. */
.hero-bg{position:absolute;inset:0;z-index:0;
  background-image:url('../images/branch-storefront-960.jpg');
  background-size:cover;background-position:72% 62%;background-repeat:no-repeat;}
@media (min-width:1000px){
  .hero-bg{background-image:url('../images/branch-storefront.jpg');}
}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--white) 0%, var(--white) 38%, rgba(245,246,239,.88) 55%, rgba(245,246,239,.42) 72%, rgba(245,246,239,.10) 100%),
    linear-gradient(180deg, var(--white) 0%, rgba(245,246,239,.25) 16%, rgba(245,246,239,.18) 62%, var(--white) 100%);}
.hero .inner{position:relative;z-index:1;}
.hero-copy{max-width:610px;}
/* The hero heading is an <h2>: the page's single <h1> is the visually-hidden
   one in the markup, which carries the service + suburb for search (spec
   §6.1 option B). Both selectors are listed so the hero renders identically
   whichever element is used. */
.hero h1,.hero h2{font-size:clamp(36px,5.3vw,60px);margin-bottom:18px;}
.hero h1 .line,.hero h2 .line{overflow:hidden;display:block;}
.hero h1 .line span,.hero h2 .line span{display:inline-block;}
.gsap-ready .hero h1 .line span,.gsap-ready .hero h2 .line span{transform:translateY(110%);}
.hero p.lead{margin-bottom:26px;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
.hero-loc{display:inline-flex;gap:9px;align-items:flex-start;font-family:var(--mono);font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:16px;}
.hero-loc svg{width:15px;height:15px;color:var(--lime-deep);flex:none;margin-top:2px;}
.hero-photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.hero-photo img{width:100%;height:100%;object-fit:cover;min-height:380px;}
.hero-photo .cap{position:absolute;left:14px;bottom:14px;background:rgba(13,15,10,.82);backdrop-filter:blur(4px);color:#f2f3ec;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;padding:7px 12px;border-radius:4px;}

/* ==========================================================================
   8. MARQUEE — centered + seamless
   ========================================================================== */
.marquee{background:var(--black);overflow:hidden;padding:15px 0;}
.marquee-track{display:flex;width:max-content;animation:scroll 32s linear infinite;}
.marquee-track .grp{display:flex;}
.marquee-track span{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--lime);display:inline-flex;align-items:center;gap:14px;white-space:nowrap;padding:0 22px;}
.marquee-track span::after{content:"◆";font-size:7px;color:#f2f3ec;opacity:.65;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   9. SPECIAL STRIP
   ========================================================================== */
.special-strip{background:var(--lime);color:#12140c;}
.special-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;}
.s-left{display:flex;flex-direction:column;gap:2px;}
.s-flag{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;opacity:.75;}
.s-left b{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;}
.s-left span:last-child{font-size:14px;opacity:.85;}
.special-strip .btn-solid{background:#12140c;color:var(--lime);border-color:#12140c;}
.special-strip .btn-solid:hover{background:#000;border-color:#000;}

/* ==========================================================================
   10. PROBLEM HOUSE
   ========================================================================== */
.house-wrap{position:relative;}
.house-svg{width:100%;height:auto;}
.prob{cursor:pointer;}
.prob .hit{fill:transparent;}
.prob .ring{fill:none;stroke:var(--lime);stroke-width:2;opacity:0;transition:opacity .2s;}
.prob.on .ring{opacity:1;}
.prob .dot{fill:#14160f;stroke:#f5f6ef;stroke-width:2;transition:fill .2s,r .2s;}
.prob.on .dot{fill:var(--lime-deep);}
.prob .num{font-family:var(--mono);font-size:11px;fill:#f5f6ef;font-weight:600;pointer-events:none;}
.fixed-layer{opacity:0;transition:opacity .6s var(--ease);}
.prob-layer{opacity:1;transition:opacity .6s var(--ease);}
.house-wrap.repaired .fixed-layer{opacity:1;}
.house-wrap.repaired .prob-layer{opacity:0;}
.house-wrap.repaired .prob{pointer-events:none;opacity:.25;}
.house-toggle{display:inline-flex;border:1px solid var(--line);border-radius:100px;padding:4px;margin-bottom:18px;background:var(--white-2);}
.house-toggle button{padding:8px 18px;border-radius:100px;font-size:13.5px;font-weight:600;color:var(--muted);transition:background .2s,color .2s;}
.house-toggle button.active{background:var(--ink);color:var(--white);}
.pick-hint{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-bottom:12px;}
.prob-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.prob-chips button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);font-family:var(--mono);font-size:13px;font-weight:600;color:var(--muted);transition:all .2s var(--ease);}
.prob-chips button:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);}
.prob-chips button.on{background:var(--ink);border-color:var(--ink);color:var(--white);}
.prob-detail{border:1px solid var(--line);border-radius:var(--radius);background:var(--white-2);padding:26px 28px;min-height:210px;display:flex;flex-direction:column;justify-content:center;}
.prob-detail .idx{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--lime-deep);text-transform:uppercase;margin-bottom:8px;}
.prob-detail h3{font-size:23px;margin-bottom:10px;}
.prob-detail p{color:var(--muted);font-size:15.5px;max-width:46ch;}
.prob-detail .fix{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--lime-deep);}
.prob-detail .inner{animation:fadeUp .35s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (max-width:980px){ .prob-detail{min-height:0;} }

/* ==========================================================================
   11. SHOP
   ========================================================================== */
.shop-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.filter{padding:9px 17px;border:1px solid var(--line);border-radius:100px;font-size:13.5px;font-weight:600;color:var(--muted);transition:all .2s;}
.filter.active{background:var(--ink);color:var(--white);border-color:var(--ink);}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s,border-color .2s;}
.card:hover{transform:translateY(-4px);border-color:var(--lime-deep);box-shadow:0 12px 28px -18px rgba(20,22,15,.5);}
/* Product photography is shot on black. A light thumb behind it produced a pale
   border around every tile, so the well is black and the shot sits edge to edge. */
.card .thumb{background:#000;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:0;}
/* .card .thumb.cover removed: no markup ever applied the .cover class. */
.card .body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;gap:6px;}
.card .code{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);}
.card h3{font-size:16px;line-height:1.25;}
.card .price{font-family:var(--display);font-weight:700;font-size:20px;color:var(--lime-deep);margin-top:2px;}
.card .price small{font-family:var(--body);font-weight:500;font-size:12px;color:var(--muted-2);}

/* "From" qualifier in front of every displayed price. Fixed 11px rather than
   em-relative so it reads the same next to a 20px card price and a 36px kit
   price — it is a label, not part of the number. */
.price .from{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-right:4px;vertical-align:middle;}
.on-black .price .from,.kit .price .from{color:var(--on-black-muted);}
.card .acts{display:flex;gap:8px;margin-top:auto;padding-top:12px;}
.card .acts .btn{flex:1;padding:9px 10px;font-size:13px;}
.card .info-btn{flex:none;width:38px;background:rgba(143,206,22,.1);border:1.5px solid rgba(143,206,22,.55);color:var(--lime-deep);border-radius:100px;display:flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s,color .2s;}
.card .info-btn:hover{background:var(--lime);border-color:var(--lime);color:#12140c;}
.card .info-btn svg{width:15px;height:15px;}

/* ==========================================================================
   12. KITS
   ========================================================================== */
.kit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.kit{border:1px solid var(--lime);border-radius:var(--radius);background:var(--black-2);padding:32px;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.kit .hazard{position:absolute;inset:0;opacity:.45;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(143,206,22,.08) 22px 26px);}
.kit > *{position:relative;z-index:1;}
.kit .badge{display:inline-block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;background:var(--lime);color:#12140c;padding:5px 11px;margin-bottom:14px;align-self:flex-start;}
.kit h3{font-size:25px;color:#fff;margin-bottom:12px;}
.kit ul{margin-bottom:18px;}
.kit ul li{display:flex;gap:9px;font-size:14.5px;color:var(--on-black-muted);margin-bottom:9px;align-items:flex-start;}
.kit ul li svg{width:15px;height:15px;color:var(--lime);margin-top:4px;flex:none;}
.kit .price{font-family:var(--display);font-weight:800;font-size:36px;color:var(--lime);margin-bottom:16px;}
.kit .price sup{font-size:15px;font-weight:600;color:var(--on-black-muted);}
.kit .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;}

/* ==========================================================================
   13. SHADES
   ========================================================================== */
.shade-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.shade{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);transition:transform .2s var(--ease),border-color .2s;text-align:left;}
.shade:hover{transform:translateY(-4px);border-color:var(--lime-deep);}
.shade.sel{border-color:var(--lime-deep);box-shadow:0 0 0 2px rgba(76,106,13,.25);}
.shade img{width:100%;aspect-ratio:200/115;object-fit:cover;}
.shade .n{padding:9px 11px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:6px;}
.shade .n em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted-2);}
.shade-bar{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white-2);padding:18px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.shade-bar img{width:76px;border-radius:5px;flex:none;}
.shade-bar .i{flex:1;min-width:170px;}
.shade-bar .i .l{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;color:var(--muted-2);letter-spacing:.08em;}
.shade-bar .i .n{font-family:var(--display);font-weight:700;font-size:19px;}
.shade-bar .i .p{color:var(--lime-deep);font-weight:600;font-size:14.5px;}

/* ==========================================================================
   14. BEFORE / AFTER + GALLERY
   ========================================================================== */
.compare{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-black);aspect-ratio:16/10;cursor:ew-resize;background:#222;}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.compare .after-wrap{position:absolute;inset:0;clip-path:inset(0 0 0 50%);}
.compare .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--lime);pointer-events:none;}
.compare .knob{position:absolute;top:50%;left:50%;width:42px;height:42px;border-radius:50%;background:var(--lime);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none;}
.compare .knob svg{width:17px;height:17px;color:#12140c;}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;}
.compare .tag{position:absolute;top:13px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;z-index:2;border-radius:3px;}
.compare .tag.b{left:13px;background:#12140c;color:#f2f3ec;}
.compare .tag.a{right:13px;background:var(--lime);color:#12140c;}
/* Keyboard focus on the (visually hidden) range input must still be visible. */
.compare input[type=range]:focus-visible{outline:3px solid var(--lime-bright);outline-offset:-3px;}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px;}
.gal figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-black);position:relative;}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease);}
.gal figure:hover img{transform:scale(1.06);}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 12px 9px;background:linear-gradient(0deg,rgba(13,15,10,.9),transparent);color:#f2f3ec;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;}
/* Sign-off line under the gallery. Declarations are unchanged from the old
   .camp-note rule this replaces — only the name, which referred to a campaign
   section that no longer exists. */
.gal-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-black);font-size:13.3px;color:var(--on-black-muted);}
.gal-note b{color:var(--lime);}

/* ==========================================================================
   15. FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line);max-width:820px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;padding:20px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--display);font-weight:600;font-size:16.5px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .ic{width:19px;height:19px;flex:none;color:var(--muted);transition:transform .3s var(--ease);}
.faq details[open] summary{color:var(--lime-deep);}
.faq details[open] summary .ic{transform:rotate(135deg);color:var(--lime-deep);}
.faq .ans{padding:0 4px 22px;color:var(--muted);font-size:15px;max-width:66ch;}
.faq .ans p+p{margin-top:10px;}

/* ==========================================================================
   16. CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.contact-info{padding:40px;background:var(--white-2);}
.contact-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);}
.contact-row:last-of-type{border-bottom:none;}
.contact-row svg{width:18px;height:18px;color:var(--lime-deep);flex:none;margin-top:3px;}
.contact-row .l{font-family:var(--mono);text-transform:uppercase;font-size:10.5px;letter-spacing:.07em;color:var(--muted-2);margin-bottom:3px;}
.contact-row .v{font-size:15.5px;}
.contact-row .v-sub{color:var(--muted-2);font-size:13.5px;}
.copy-btn{margin-left:auto;flex:none;border:1px solid var(--line);border-radius:5px;padding:6px 10px;font-family:var(--mono);font-size:11px;color:var(--muted);transition:all .15s;}
.copy-btn:hover{border-color:var(--lime-deep);color:var(--lime-deep);}
.copy-btn.copied{border-color:var(--lime-deep);color:var(--lime-deep);background:rgba(76,106,13,.08);}
.map-holder iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:grayscale(.5) contrast(1.05);}
/* The contact page puts the form beside the details, so the map moves below
   the grid and needs its own frame. Same border, radius and treatment. */
.map-standalone{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
footer{background:var(--black);color:#f2f3ec;padding:46px 0 110px;}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;margin-bottom:26px;}
.foot-brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.foot-brand img{height:46px;width:auto;}
.foot-brand .branch{font-family:var(--mono);font-size:10.5px;color:var(--lime);text-transform:uppercase;letter-spacing:.12em;border-left:1px solid var(--line-black);padding-left:14px;}
/* Social row. Sits under the footer nav; icons inherit the lime hover of the
   surrounding links so it reads as part of the same block. */
.foot-social{display:flex;gap:10px;align-items:center;margin-top:16px;}
.foot-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-black);border-radius:50%;color:var(--on-black-muted);transition:color .2s,border-color .2s,background .2s;}
.foot-social a:hover{color:#12140c;background:var(--lime);border-color:var(--lime);}
.foot-social svg{width:17px;height:17px;}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:0;}
@media (max-width:640px){ .foot-right{align-items:flex-start;} }

.foot-links{display:flex;gap:20px;flex-wrap:wrap;}
.foot-links a{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--on-black-muted);}
.foot-links a:hover{color:var(--lime);}
.foot-bottom{font-family:var(--mono);font-size:11px;color:var(--muted-2);border-top:1px solid var(--line-black);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* NAP + ECT Act disclosures (spec §6.2, §6.6).
   Both reuse .foot-bottom for every visual property — font, size, colour,
   border and padding are inherited, nothing new is declared here. These rules
   are structural only: <address> defaults to italic, and the legal block needs
   to stack rather than sit in the flex row. */
.foot-nap{font-style:inherit;line-height:1.9;}
.foot-legal{display:block;}
.foot-legal p+p{margin-top:6px;}

/* ==========================================================================
   18. SHOWROOM
   ========================================================================== */
.show-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.show-grid figure{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000;}
.show-grid .show-lead{grid-column:span 3;}
.show-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease);}
.show-grid .show-lead img{aspect-ratio:16/7;}
.show-grid figure:hover img{transform:scale(1.05);}
.show-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;background:linear-gradient(0deg,rgba(13,15,10,.88),transparent);color:#f2f3ec;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;}
@media (max-width:820px){ .show-grid{grid-template-columns:1fr 1fr;} .show-grid .show-lead{grid-column:span 2;} }
@media (max-width:520px){ .show-grid{grid-template-columns:1fr;} .show-grid .show-lead{grid-column:span 1;} }

/* ==========================================================================
   19. WHATSAPP WIDGET
   ========================================================================== */
.wa-launcher{position:fixed;left:20px;bottom:20px;z-index:96;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px -8px rgba(37,211,102,.7);transition:transform .25s var(--ease);}
.wa-launcher:hover{transform:scale(1.07);}
.wa-launcher svg{width:31px;height:31px;color:#fff;position:relative;z-index:1;}
.wa-launcher .ping{position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:waping 2.8s ease-out infinite;}
@keyframes waping{0%{opacity:.7;transform:scale(1);}100%{opacity:0;transform:scale(1.7);}}
.wa-launcher .nudge{position:absolute;left:70px;white-space:nowrap;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:9px 14px;border-radius:8px;opacity:0;transform:translateX(-6px);transition:all .3s var(--ease);pointer-events:none;}
.wa-launcher .nudge::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;background:var(--ink);transform:translateY(-50%) rotate(45deg);}
.wa-launcher.hint .nudge{opacity:1;transform:none;}
.wa-panel{position:fixed;left:20px;bottom:20px;z-index:97;width:330px;max-width:calc(100vw - 40px);background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.55);transform:translateY(16px) scale(.96);opacity:0;pointer-events:none;transition:all .32s var(--ease);transform-origin:bottom left;}
.wa-panel.open{transform:none;opacity:1;pointer-events:auto;}
.wa-head{background:#075E54;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px;}
.wa-head .av{width:38px;height:38px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex:none;}
.wa-head .av svg{width:21px;height:21px;color:#fff;}
.wa-head b{display:block;font-family:var(--display);font-size:14px;line-height:1.2;}
.wa-head .st{font-size:11.5px;opacity:.85;display:flex;align-items:center;gap:5px;}
.wa-head .st i{width:7px;height:7px;border-radius:50%;background:#25D366;display:block;}
.wa-head button{margin-left:auto;color:#fff;font-size:20px;line-height:1;opacity:.85;}
.wa-body{background:#ECE5DD;padding:16px 14px;max-height:250px;overflow-y:auto;}
.wa-msg{background:#fff;border-radius:2px 10px 10px 10px;padding:10px 13px;font-size:13.6px;color:#111;box-shadow:0 1px 1px rgba(0,0,0,.12);max-width:90%;line-height:1.45;}
.wa-msg+.wa-msg{margin-top:8px;}
.wa-msg.mine{margin-left:auto;background:#DCF8C6;border-radius:10px 2px 10px 10px;}
/* #7d7d70 scored 4.17:1 on the white bubble; #77776a scores 4.53:1 (WCAG AA). */
.wa-time{font-size:10px;color:#77776a;text-align:right;margin-top:4px;}
.wa-opts{padding:12px 14px 6px;background:var(--white);display:flex;flex-direction:column;gap:7px;}
.wa-opts button{border:1px solid var(--line);border-radius:100px;padding:9px 14px;font-size:13.2px;font-weight:600;text-align:left;transition:all .18s;}
.wa-opts button:hover{border-color:#25D366;background:rgba(37,211,102,.09);}
.wa-foot{padding:8px 14px 14px;}
.wa-foot .btn{width:100%;}
.wa-note{font-family:var(--mono);font-size:9.5px;color:var(--muted-2);text-align:center;margin-top:7px;}
@media (max-width:980px){ .wa-launcher,.wa-panel{bottom:76px;} }
@media (max-width:520px){ .wa-launcher{left:14px;} .wa-panel{left:12px;right:12px;width:auto;} .wa-launcher .nudge{display:none;} }

/* ==========================================================================
   20. ORDER TRAY
   ========================================================================== */
.tray{position:fixed;right:20px;bottom:20px;z-index:95;width:330px;max-width:calc(100vw - 40px);background:var(--white);border:1px solid var(--ink);border-radius:12px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);overflow:hidden;transform:translateY(140%);transition:transform .4s var(--ease);}
.tray.open{transform:none;}
.tray-head{background:var(--ink);color:var(--white);padding:13px 16px;display:flex;justify-content:space-between;align-items:center;}
.tray-head b{font-family:var(--display);font-size:14.5px;}
.tray-head button{color:var(--white);font-size:19px;line-height:1;}
.tray-body{max-height:230px;overflow-y:auto;padding:6px 16px;}
.tray-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.tray-row:last-child{border-bottom:none;}
.tray-row .nm{flex:1;line-height:1.3;}
.tray-row .nm .ea{color:var(--muted-2);font-family:var(--mono);font-size:11px;}
.tray-row .qt{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;}
.tray-row .qt button{width:21px;height:21px;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;}
.tray-empty{padding:18px 0;color:var(--muted);font-size:13.5px;}
.tray-foot{padding:13px 16px;border-top:1px solid var(--line);background:var(--white-2);}
.tray-total{display:flex;justify-content:space-between;font-weight:700;font-family:var(--display);margin-bottom:10px;font-size:15px;}
.tray-foot .btn{width:100%;}
.tray-note{font-family:var(--mono);font-size:10px;color:var(--muted-2);margin-top:8px;text-align:center;line-height:1.5;}
.tray-fab{position:fixed;right:20px;bottom:20px;z-index:94;background:var(--ink);color:var(--white);border-radius:100px;padding:13px 20px;display:none;align-items:center;gap:10px;font-weight:600;font-size:14px;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);}
.tray-fab.show{display:flex;}
.tray-fab .cnt{background:var(--lime);color:#12140c;border-radius:100px;min-width:21px;height:21px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;}

/* ==========================================================================
   21. MODAL
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:120;background:rgba(13,15,10,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s;}
.modal.open{opacity:1;pointer-events:auto;}
.modal-box{background:var(--white);border-radius:12px;max-width:640px;width:100%;max-height:86vh;overflow-y:auto;transform:translateY(18px) scale(.98);transition:transform .35s var(--ease);}
.modal.open .modal-box{transform:none;}
.modal-head{display:flex;gap:18px;padding:24px 26px 18px;border-bottom:1px solid var(--line);align-items:flex-start;}
.modal-head img{width:76px;height:76px;object-fit:contain;background:#000;border-radius:8px;flex:none;padding:0;}
.modal-head .t{flex:1;}
.modal-head .code{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em;}
.modal-head h3{font-size:21px;margin:3px 0 4px;}
.modal-head .price{font-family:var(--display);font-weight:700;color:var(--lime-deep);font-size:19px;}
.modal-head .price small{font-family:var(--body);font-size:12.5px;color:var(--muted-2);font-weight:500;}
.modal-head .x{font-size:24px;line-height:1;color:var(--muted);flex:none;}
.modal-body{padding:22px 26px 26px;}
.mb-sec{margin-bottom:20px;}
.mb-sec h4{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--lime-deep);margin-bottom:7px;}
.mb-sec p,.mb-sec li{font-size:14.5px;color:var(--muted);}
.mb-sec ul li{padding-left:15px;position:relative;margin-bottom:4px;}
.mb-sec ul li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--lime-deep);}
.mb-warn{background:#fdf6e3;border:1px solid #e8d9a8;border-radius:7px;padding:13px 15px;}
.mb-warn h4{color:#8a6d1f;}
.mb-warn p,.mb-warn li{color:#6b5518;font-size:13.5px;}
.mb-note{margin-top:9px;}
.modal-foot{padding:0 26px 26px;display:flex;gap:10px;flex-wrap:wrap;}
/* Shade picker inside the product modal (was inline styles). */
.swatch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.swatch-btn{border:1px solid var(--line);border-radius:6px;overflow:hidden;padding:0;transition:border-color .2s,box-shadow .2s;}
.swatch-btn img{width:100%;aspect-ratio:200/115;object-fit:cover;}
.swatch-btn span{display:block;font-size:10.5px;padding:4px 2px;line-height:1.2;}
.swatch-btn[aria-pressed="true"]{border-color:var(--lime-deep);box-shadow:0 0 0 2px rgba(76,106,13,.25);}
.swatch-note{font-size:12.5px;margin-top:8px;}
.pick-note{font-size:13px;color:var(--danger);margin-top:8px;width:100%;}
.modal-foot .btn-grow{flex:1;}

/* ==========================================================================
   22. QUICK BAR
   ========================================================================== */
.quickbar{position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;background:rgba(13,15,10,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line-black);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:8px;}
.quickbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;color:var(--on-black-muted);padding:5px 0;}
.quickbar a svg{width:18px;height:18px;}
.quickbar a.primary{color:var(--lime);}

/* ==========================================================================
   23. REVEAL ANIMATION STATES
   ========================================================================== */
.reveal{opacity:1;transform:none;}
.gsap-ready .reveal{opacity:0;transform:translateY(22px);}

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){ .shop-grid{grid-template-columns:repeat(3,1fr);} .gal{grid-template-columns:repeat(2,1fr);} }
@media (max-width:1100px){ nav.links{display:none;} .burger{display:block;} .nav-cta .btn-solid{display:none;} }
@media (max-width:980px){
  /* Narrow screens put the copy directly over the photo, so the scrim becomes
     near-opaque top-to-bottom. Text keeps its full contrast; the storefront
     stays faintly visible behind the lower half. */
  .hero{padding:72px 0 84px;}
  .hero-bg{background-position:64% 58%;}
  .hero-bg::after{background:linear-gradient(180deg, var(--white) 0%, rgba(245,246,239,.95) 42%, rgba(245,246,239,.86) 74%, var(--white) 100%);}
  .hero-copy{max-width:none;}
  .split{grid-template-columns:1fr;gap:34px;}
  .kit-grid{grid-template-columns:1fr;}
  .shade-grid{grid-template-columns:repeat(3,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .quickbar{display:flex;} footer{padding-bottom:112px;}
  .tray,.tray-fab{bottom:76px;}
  section{padding:68px 0;}
}
@media (max-width:680px){
  .shop-grid{grid-template-columns:repeat(2,1fr);}
  .shade-grid{grid-template-columns:repeat(2,1fr);}
  /* Two-up swatches are too narrow for "Modern Brown" and "From R1 500" on one
     line — some wrapped and some did not, so the cards ended up different
     heights. Stacking the name and price makes every caption two lines. */
  .shade .n{flex-direction:column;align-items:flex-start;gap:1px;}
  .card h3{font-size:14.5px;} .card .price{font-size:18px;}
  .card .acts{flex-direction:column;} .card .info-btn{width:100%;height:36px;}
  .tray{right:12px;left:12px;width:auto;} .tray-fab{right:12px;}
  .modal-head{flex-wrap:wrap;}
  .form-grid{grid-template-columns:1fr;}
  .swatch-grid{grid-template-columns:repeat(3,1fr);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;} .reveal{opacity:1!important;transform:none!important;} .marquee-track{animation:none;}
  .wa-launcher .ping{animation:none;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}

/* ==========================================================================
   25. ACCESSIBILITY UTILITIES                                        [ADDED]
   --------------------------------------------------------------------------
   The original had no visible keyboard focus indicator anywhere, which is a
   WCAG 2.4.7 failure. :focus-visible is used rather than :focus so pointer
   users see no change at all — the design is untouched for mouse input.
   ========================================================================== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--white);padding:12px 20px;border-radius:0 0 var(--radius) 0;font-weight:600;font-size:14px;}
.skip-link:focus{left:0;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

:focus-visible{outline:3px solid var(--lime-deep);outline-offset:3px;border-radius:3px;}
.on-black :focus-visible,footer :focus-visible,.quickbar :focus-visible,.tray-head :focus-visible,.wa-head :focus-visible{outline-color:var(--lime-bright);}
.prob:focus-visible{outline:none;}
.prob:focus-visible .ring{opacity:1;stroke:var(--lime-deep);stroke-width:3;}

/* Respect users who ask the OS for more contrast. */
@media (prefers-contrast:more){
  :root{--muted:#4a4d42;--muted-2:#4a4d42;--line:rgba(13,15,10,.4);--on-black-muted:#c9ccbb;}
  .btn-ghost{border-color:var(--ink);}
}

/* ==========================================================================
   26. BREADCRUMBS                                                    [ADDED]
   Needed for the multi-page structure: gives users an "up" path and feeds
   BreadcrumbList structured data for search-result breadcrumb trails.
   ========================================================================== */
.crumbs{padding:20px 0 0;}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.crumbs li{display:flex;align-items:center;gap:7px;}
.crumbs li+li::before{content:"/";color:var(--muted-2);}
.crumbs a:hover{color:var(--lime-deep);}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600;}

/* ==========================================================================
   27. CONTACT FORM                                                   [ADDED]
   Built from the existing tokens (var(--line), var(--radius), var(--lime-deep))
   so it reads as part of the same design system rather than a bolted-on form.
   ========================================================================== */
.contact-form{padding:40px;}
.contact-form > h3{font-size:21px;margin-bottom:6px;}
.contact-form > p{color:var(--muted);font-size:14.5px;margin-bottom:22px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
.field label .req{color:var(--lime-deep);}
.field input,.field textarea,.field select{font-family:var(--body);font-size:15px;line-height:1.5;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:6px;padding:11px 13px;width:100%;transition:border-color .2s,box-shadow .2s;}
.field textarea{min-height:132px;resize:vertical;}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363665a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px;padding-right:36px;}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--muted-2);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--lime-deep);box-shadow:0 0 0 3px rgba(76,106,13,.16);}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(138,47,22,.12);}
.field .err{font-size:12.5px;color:var(--danger);}
.field .err:empty{display:none;}
.field .hint{font-size:12px;color:var(--muted);}

/* Honeypot: invisible to humans, tempting to bots. Not display:none, because
   some bots skip those; positioned off-screen and removed from the tab order. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;}

.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;}
.form-consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);}
.form-consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--lime-deep);}
.form-note{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);margin-top:14px;line-height:1.6;}

.form-status{display:none;padding:13px 16px;border-radius:7px;font-size:14.5px;margin-bottom:20px;}
.form-status.show{display:block;}
.form-status.ok{background:var(--ok-bg);border:1px solid var(--lime-deep);color:var(--ok-text);}
.form-status.bad{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);}

@media (max-width:980px){ .contact-form{padding:32px 24px;} .contact-info{padding:32px 24px;} }

/* ==========================================================================
   28. LEGAL PAGES (terms / privacy)                                  [ADDED]
   Built from the existing tokens so the Terms and Privacy pages read as part
   of the same site rather than a pasted Word document.
   ========================================================================== */
.legal{max-width:820px;}
.legal .preamble{border:1px solid var(--line);border-left:3px solid var(--lime-deep);border-radius:var(--radius);background:var(--white-2);padding:20px 24px;margin-bottom:34px;}
.legal .preamble p{font-size:13.5px;color:var(--muted);line-height:1.65;}
.legal .effective{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--lime-deep);margin-bottom:8px;}
.legal h2{font-size:20px;margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--line);}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.legal h3{font-size:15.5px;margin:20px 0 8px;color:var(--ink);}
.legal p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:12px;max-width:72ch;}
.legal ol,.legal ul{margin:0 0 12px;padding-left:0;}
/* Indent must clear the widest clause label ("14.1.2" ≈ 43px in IBM Plex Mono).
   54px leaves room for a wider fallback monospace if the webfont fails. */
.legal li{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:9px;padding-left:54px;position:relative;max-width:72ch;}
.legal li .cl{position:absolute;left:0;top:0;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--lime-deep);white-space:nowrap;}
.legal li.plain{padding-left:16px;}
.legal li.plain::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--lime-deep);}
.legal strong{color:var(--ink);font-weight:600;}
.legal a{color:var(--lime-deep);text-decoration:underline;text-underline-offset:2px;}
.legal a:hover{color:var(--ink);}
.legal-contact{margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white-2);padding:26px 28px;}
.legal-contact h2{border-top:none;padding-top:0;margin-top:0;}
.legal-contact dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px;}
.legal-contact dt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);padding-top:3px;}
.legal-contact dd{color:var(--ink);}
.legal-toc{border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:34px;}
.legal-toc p{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2);margin-bottom:10px;}
.legal-toc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 20px;}
.legal-toc li{padding-left:0;margin-bottom:0;font-size:13.8px;}
.legal-toc a{color:var(--muted);text-decoration:none;}
.legal-toc a:hover{color:var(--lime-deep);text-decoration:underline;}
@media (max-width:640px){ .legal-toc ol{grid-template-columns:1fr;} .legal-contact dl{grid-template-columns:1fr;gap:2px;} .legal-contact dt{padding-top:10px;} }

/* ==========================================================================
   29. PRINT                                                          [ADDED]
   ========================================================================== */
@media print{
  .cursor,.quickbar,.tray,.tray-fab,.wa-launcher,.wa-panel,.modal,.burger,.marquee,.nav-cta,.crumbs,.skip-link,.protect-toast{display:none!important;}
  header{position:static;}
  body{background:#fff;color:#000;}
  .on-black,.kit,footer{background:#fff!important;color:#000!important;}
  .on-black h2,.on-black h3,.kit h3,footer{color:#000!important;}
  section{padding:24px 0;page-break-inside:avoid;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;word-break:break-all;}
  .reveal{opacity:1!important;transform:none!important;}
}

/* ==========================================================================
   30. CONTENT PROTECTION                                             [ADDED]
   --------------------------------------------------------------------------
   Deterrent only, not real security — see js/script.js initProtect(). Blocks
   the casual right-click-save, drag-out or copy most visitors would use;
   cannot stop view-source or dev tools.
   ========================================================================== */
.protect-toast{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.94);
  z-index:5000;
  background:var(--black);
  border:1px solid var(--lime);
  color:var(--white);
  font-family:var(--display);
  font-weight:400;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  padding:16px 30px;
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(143,206,22,.15);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s,transform .2s,visibility 0s linear .2s;
}
.protect-toast.show{
  opacity:1;visibility:visible;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity .2s,transform .2s,visibility 0s linear 0s;
}
@media (prefers-reduced-motion:reduce){
  .protect-toast{transition:opacity .01ms,visibility 0s linear 0s!important;transform:translate(-50%,-50%)!important;}
}