/* ==================================================================
   HUDSON VALLEY PROMOS
   ------------------------------------------------------------------
   These are the raw colors in the logo artwork:
     #0D5412  outer ring / bridge steel   (deep forest)
     #2F750B  "HUDSON VALLEY" wordmark    (brand green)
     #6ED10F  hillsides                   (bright green)
     #009AE2  sky                         (sky blue)
     #2D83B3  "Promos" script             (steel blue)

   The page does NOT repeat the greens at large scale — a green hero and a
   green footer put the badge in competition with its own background. The
   site is neutral slate instead, drawing its one accent from the "Promos"
   script blue, so the logo stays the only saturated thing on screen.

   Everything you'll want to change first lives in :root below.
   ================================================================== */

:root{
  /* ---------- RAW LOGO COLORS (reference — don't use directly) ---------- */
  --logo-forest: #0D5412;
  --logo-green:  #2F750B;
  --logo-lime:   #6ED10F;
  --logo-sky:    #009AE2;
  --logo-steel:  #2D83B3;

  /* ---------- BRAND COLORS — EDIT THESE ----------
     The page itself stays neutral slate. The logo is the only saturated
     thing on screen, which is what keeps it reading as the brand rather
     than as one more green object competing with a green background.  */
  --accent:        #1F6389;   /* primary action color — the "Promos" blue    */
  --accent-dark:   #17506F;   /* hover state for the accent                  */
  --accent-lite:   #5CB8E6;   /* the accent's stand-in on dark backgrounds   */
  --confirm:       #86C46A;   /* soft green, for checkmarks only             */
  --ink:           #1B2426;   /* deep slate: hero, dark bands, footer        */
  --ink-2:         #26312F;   /* slightly lighter dark                       */
  --paper:         #FFFFFF;   /* page background                             */
  --band:          #F4F6F6;   /* alternating light band                      */
  --line:          #E0E5E5;   /* borders                                     */
  --muted:         #65716F;   /* secondary text                              */
  --star:          #E8A33D;   /* review stars (warm complement to the blue)  */

  /* ---------- TYPE ---------- */
  --display: 'Barlow Condensed', system-ui, sans-serif;  /* headlines   */
  --body:    'Barlow', system-ui, sans-serif;            /* body text   */
  --script:  'Caveat', cursive;                          /* hero script */

  /* ---------- LAYOUT ----------
     Full-width: content spans the viewport with breathing room at the
     edges. Set --maxw back to e.g. 1240px if you ever want it boxed.  */
  --maxw: 100%;
  --pad: clamp(1rem, 3.2vw, 4rem);
  --radius: 4px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation:none!important}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
/* On dark bands the accent outline disappears — switch to the light one. */
.hero :focus-visible,.vendors :focus-visible,.made :focus-visible,
.footer :focus-visible,.pnav :focus-visible,.ubar :focus-visible,
.panel-dark :focus-visible,.oneline :focus-visible{outline-color:var(--accent-lite)}

/* Keyboard users need a way past 40+ nav links on every page. */
.skiplink{
  position:absolute;left:.5rem;top:-4rem;z-index:500;
  background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius);
  font-weight:700;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;
  transition:top .15s;
}
.skiplink:focus{top:.5rem}
main:focus{outline:none}

/* Announced to screen readers, invisible on screen. */
.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;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:.005em;
  text-transform:uppercase;
}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.15rem}
p{line-height:1.62}


/* ==================================================================
   ICONS
   ------------------------------------------------------------------
   All icons are inline SVG pulled from the <symbol> sprite at the top
   of index.html:   <svg class="ico"><use href="#i-phone"/></svg>
   They inherit the surrounding text color, so they recolor for free.
   Add `ico-fill` for the solid ones (stars, etc.).
   ================================================================== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.ico{
  width:1.15em;height:1.15em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.2em;
}
.ico-fill{fill:currentColor;stroke:none}
.ico-lg{width:1.9rem;height:1.9rem;stroke-width:1.6}
.ico-xl{width:2.3rem;height:2.3rem;stroke-width:1.5}


/* ==================================================================
   BUTTONS
   ================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:700;font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.78rem 1.5rem;border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.btn .ico{width:1em;height:1em;stroke-width:2.4}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-dark:hover{background:#0E1314;border-color:#0E1314}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
/* on dark bands the primary CTA inverts — highest contrast against slate */
.btn-light{background:#fff;border-color:#fff;color:var(--ink)}
.btn-light:hover{background:var(--accent-lite);border-color:var(--accent-lite);color:var(--ink)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-lg{padding:.95rem 1.9rem;font-size:.92rem}
.btn-sm{padding:.5rem 1rem;font-size:.76rem}


/* ==================================================================
   PLACEHOLDERS — delete this block once real photos are in
   ================================================================== */
.ph{
  width:100%;height:100%;position:relative;
  background:linear-gradient(135deg,#E0E5E6,#BDC6C8);
}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:0;display:grid;place-items:center;
  padding:.6rem;text-align:center;
  font-family:var(--body);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(27,36,38,.42);
}
.ph-a{background:linear-gradient(135deg,#D6DEDF,#A7B3B6)}   /* slate  */
.ph-b{background:linear-gradient(135deg,#CDE0EC,#95B4C8)}   /* blue   */
.ph-c{background:linear-gradient(135deg,#DCE3DE,#AFBDB4)}   /* sage   */
.ph-d{background:linear-gradient(135deg,#D9DDE2,#ADB4BE)}   /* steel  */


/* ==================================================================
   1. UTILITY BAR  (thin dark strip above the masthead)
   ================================================================== */
.ubar{background:var(--ink);color:#fff;font-size:.74rem;letter-spacing:.04em}
.ubar-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-block:.5rem;flex-wrap:wrap}
.ubar-l{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.ubar-l strong{font-weight:700;letter-spacing:.1em}
.ubar-l .dot{color:var(--accent-lite)}
.ubar-rotate{color:rgba(255,255,255,.72);border-left:1px solid rgba(255,255,255,.22);padding-left:.9rem}
.ubar-r{display:flex;align-items:center;gap:1.3rem;color:rgba(255,255,255,.85)}
.ubar-r a,.ubar-r span{display:flex;align-items:center;gap:.4rem}
.ubar-r a:hover{color:var(--accent-lite)}
.ubar .ico{width:.95rem;height:.95rem;opacity:.8}


/* ==================================================================
   2a. MASTHEAD  (logo / search / account / cart)
   ================================================================== */
.mast{background:#fff;border-bottom:1px solid var(--line)}
.mast-in{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);padding-block:.5rem}
.logo{flex:none}   /* never let the badge get squeezed */
.logo img{height:clamp(78px,6.4vw,100px);width:auto;max-width:none}

.hsearch{
  position:relative;flex:1 1 auto;max-width:720px;display:flex;align-items:center;gap:.5rem;
  border:2px solid var(--line);border-radius:var(--radius);padding:.28rem .3rem .28rem .8rem;
  transition:border-color .15s;background:#fff;
}
.hsearch:focus-within{border-color:var(--accent)}
.hsearch-ico{width:1.15rem;height:1.15rem;color:var(--muted);flex:none}
.hsearch input{
  flex:1;border:0;outline:0;font-family:var(--body);font-size:.92rem;color:var(--ink);
  padding:.45rem 0;min-width:0;background:transparent;
}
.hsearch input::placeholder{color:var(--muted)}

.typeahead{
  position:absolute;top:calc(100% + 6px);left:-2px;right:-2px;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--accent);z-index:220;
  box-shadow:0 16px 40px rgba(27,36,38,.18);max-height:60vh;overflow:auto;
}
.typeahead a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.55rem .9rem;font-size:.88rem;border-bottom:1px solid var(--line)}
.typeahead a:last-child{border-bottom:0}
.typeahead a:hover,.typeahead a.on{background:var(--band);color:var(--accent)}
.typeahead .ta-cat{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.typeahead .ta-none{padding:.8rem .9rem;font-size:.86rem;color:var(--muted)}

.mast-actions{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.4rem);margin-left:auto;flex:none}
.mact{display:flex;flex-direction:column;align-items:center;gap:.15rem;position:relative;
  font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.mact:hover{color:var(--accent)}
.cart-badge{
  position:absolute;top:-4px;right:-9px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--accent);color:#fff;
  font-size:.66rem;font-style:normal;font-weight:700;line-height:18px;text-align:center;
}
.cart-badge[hidden]{display:none}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;gap:5px;flex-direction:column;flex:none}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink)}


/* ==================================================================
   2b. PRIMARY NAV  (sticky) + MEGA MENU
   ================================================================== */
.pnav{background:var(--ink);position:sticky;top:0;z-index:200}
.pnav-in{display:flex;align-items:stretch;gap:clamp(.5rem,1vw,1.4rem)}
.pnav a{
  display:flex;align-items:center;gap:.3rem;color:rgba(255,255,255,.88);
  font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;padding:.85rem 0;border-bottom:3px solid transparent;transition:.14s;
}
.pnav a:hover,.pnav a[aria-current="page"]{color:#fff;border-bottom-color:var(--accent-lite)}
.pnav .caret{width:.72rem;height:.72rem;opacity:.7;stroke-width:3}
.pnav-shop{
  background:var(--accent);padding-inline:1.1rem!important;color:#fff!important;
  margin-right:.4rem;border-bottom-color:var(--accent)!important;
}
.pnav-shop:hover{background:var(--accent-dark);border-bottom-color:var(--accent-dark)!important}
.pnav-mobile-only{display:none!important}

.has-mega{position:relative;display:flex}
.mega{
  position:absolute;left:0;top:100%;z-index:210;display:none;
  width:min(1180px,94vw);background:#fff;color:var(--ink);
  border:1px solid var(--line);border-top:3px solid var(--accent);
  box-shadow:0 22px 50px rgba(27,36,38,.22);
}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:block}
.mega-in{display:grid;grid-template-columns:repeat(6,1fr);gap:0 1.4rem;padding:1.4rem 1.6rem}
.mega-col{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.mega-col h4{font-size:.78rem;letter-spacing:.08em;margin-bottom:.45rem;color:var(--accent)}
.mega-col h4 a{padding:0;border:0;color:inherit;font-size:inherit;letter-spacing:inherit;text-transform:uppercase}
.mega-col h4 a:hover{color:var(--accent-dark);border:0}
.mega-col > a{
  color:var(--muted);font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none;
  padding:.22rem 0;border:0;white-space:normal;
}
.mega-col > a:hover{color:var(--accent);border:0}
.mega-col hr{border:0;border-top:1px solid var(--line);margin:.7rem 0 .55rem}
.mega-feat{background:var(--band);margin:-1.4rem -1.6rem -1.4rem 0;padding:1.4rem 1.4rem}
.mega-tile{display:flex!important;gap:.6rem;align-items:flex-start;padding:.5rem 0!important;color:var(--ink)!important}
.mega-tile .ico{color:var(--accent);margin-top:.1rem}
.mega-tile span{display:flex;flex-direction:column;line-height:1.3}
.mega-tile b{font-size:.86rem}
.mega-tile span{font-size:.76rem;color:var(--muted)}
.mega-tile:hover b{color:var(--accent)}


/* ==================================================================
   3. HERO
   ================================================================== */
.hero{
  background:var(--ink);
  background-image:linear-gradient(158deg,#2B3735 0%,#1B2426 52%,#121819 100%);
  color:#fff;overflow:hidden;position:relative;
}
/* --- background video (added 2026-08-12) --------------------------
   Sits behind everything. The .hero gradient above stays as the fallback:
   it is what shows for the moment before the first frame paints, or if the
   file fails to load.
   Stacking in this section is explicit rather than implicit, because four
   things overlap here:  video 0  <  scrim 1  <  cable motif 2  <  copy 3. */
.hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
/* Scrim. The copy is white and the footage is arbitrary and moving, so this
   is what actually guarantees contrast — weighted heavily to the left where
   the headline sits, and lighter on the right so the video still reads. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(18,24,25,.94) 0%,rgba(18,24,25,.80) 38%,
                    rgba(18,24,25,.52) 68%,rgba(18,24,25,.62) 100%),
    linear-gradient(to bottom,rgba(18,24,25,.40),transparent 42%,rgba(18,24,25,.50));
}
/* NOTE: deliberately NOT gated on prefers-reduced-motion. Owner's call,
   2026-08-12 — the hero video plays for everyone, always. If that is ever
   revisited, the gate is a `@media (prefers-reduced-motion:reduce){
   .hero-video{display:none} }` here plus the matching check in main.js. */

/* faint suspension-cable motif, echoing the logo */
.hero::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px);
  mask-image:linear-gradient(to bottom,transparent,#000 60%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 60%,transparent);
}
.hero-in{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;padding-block:clamp(2.5rem,5vw,4rem);
}
.hero h1{color:#fff;font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:.98}
.hero-copy p{margin:1.4rem 0 1.9rem;color:rgba(255,255,255,.8);max-width:40ch;font-size:1.02rem}
.hero-btns{display:flex;gap:.7rem;flex-wrap:wrap}
/* Holds the script line and, more importantly, reserves the vertical space
   that gives the hero its height — the video is a background, so without
   this the section would collapse to the height of the copy. */
.hero-art{position:relative;min-height:clamp(260px,32vw,380px)}
.hero-script{
  /* Pulled in from the right edge and scaled up (owner's call, 2026-08-12)
     so it reads as a statement over the video rather than a caption. */
  position:absolute;top:5%;right:7%;font-family:var(--script);
  font-size:clamp(1.7rem,3.4vw,2.9rem);
  line-height:1.15;color:#fff;text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.hero-script::after{
  content:"";display:block;width:70%;height:3px;background:var(--accent-lite);
  margin-left:auto;margin-top:.4rem;border-radius:2px;
}


/* ==================================================================
   4. TRUST BAR
   ================================================================== */
.trust{border-bottom:1px solid var(--line);padding-block:1.7rem}
.trust-title{text-align:center;font-size:clamp(1.25rem,2.4vw,1.75rem);margin-bottom:1.3rem}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.trust-item{
  display:flex;align-items:center;justify-content:center;gap:.85rem;
  padding:.4rem 1rem;border-right:1px solid var(--line);
}
.trust-item:last-child{border-right:0}
.trust-ico{color:var(--accent);opacity:.9}
.trust-item b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.6rem;
  line-height:1;color:var(--accent);text-transform:uppercase;
}
.trust-item span{display:block;font-size:.76rem;line-height:1.32;color:var(--muted);margin-top:.2rem}


/* ==================================================================
   SECTION FURNITURE
   ================================================================== */
.section{padding-block:clamp(2.6rem,5vw,4rem)}
.section-tight{padding-block:clamp(2rem,3.6vw,2.8rem)}
.band{background:var(--band)}
.section-title{text-align:center;margin-bottom:1.8rem;font-size:clamp(1.5rem,3.2vw,2.3rem)}
.section-title::after{
  content:"";display:block;width:58px;height:3px;margin:.65rem auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--logo-green));
}


/* ==================================================================
   5. SERVICE CARDS
   ================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.svc{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:.15s}
.svc:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(27,36,38,.14);transform:translateY(-3px)}
.svc-img{aspect-ratio:4/3;overflow:hidden}
.svc-body{padding:.9rem .95rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.svc-body h3{color:var(--accent);font-size:1rem;line-height:1.1}
.svc-body p{font-size:.82rem;color:var(--muted);line-height:1.45}
.svc-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);
}
.svc-link .ico{width:.95em;height:.95em;stroke-width:2.4;transition:transform .15s}
.svc:hover .svc-link .ico{transform:translateX(3px)}


/* ==================================================================
   6. STOP USING 5 VENDORS
   ================================================================== */
.vendors{background:var(--ink-2);color:#fff;padding-block:clamp(2rem,4vw,2.8rem)}
.vendors-in{display:grid;grid-template-columns:1.15fr 1fr .8fr;gap:clamp(1.5rem,3vw,2.6rem);align-items:center}
.vendors-l{border-right:1px solid rgba(255,255,255,.16);padding-right:clamp(1rem,2.5vw,2rem)}
.vendors h2{color:#fff;font-size:clamp(1.35rem,2.6vw,1.95rem);line-height:1.06}
.vendors-kick{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin:1.1rem 0 .85rem;
}
.vendors-kick.accent{text-align:center;margin-top:0;color:var(--accent-lite)}
.oldway{display:flex;align-items:flex-start;gap:.35rem;flex-wrap:wrap}
.ov{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:66px;text-align:center}
.ov-ico{
  width:44px;height:44px;border:2px solid rgba(255,255,255,.3);border-radius:50%;
  display:grid;place-items:center;color:rgba(255,255,255,.62);
}
.ov-ico .ico{width:1.25rem;height:1.25rem}
.ov span{font-size:.66rem;line-height:1.25;color:rgba(255,255,255,.6)}
.ov-arw{color:rgba(255,255,255,.35);margin-top:1rem}
.ov-arw .ico{width:1rem;height:1rem}
.hvp-way{
  font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.5rem);
  text-transform:uppercase;text-align:center;margin-bottom:1.1rem;
}
.checks{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap}
.chk{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:60px;text-align:center}
.chk-ico{
  width:38px;height:38px;border:2px solid var(--confirm);border-radius:50%;
  display:grid;place-items:center;color:var(--confirm);
}
.chk-ico .ico{width:1.05rem;height:1.05rem;stroke-width:3}
.chk span{font-size:.68rem;color:rgba(255,255,255,.85)}
.vendors-cta p{font-size:.86rem;color:rgba(255,255,255,.75);margin-bottom:1rem;line-height:1.5}


/* ==================================================================
   7. FEATURED PRODUCTS
   ================================================================== */
.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.prod{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:.15s}
a.prod:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(27,36,38,.14);transform:translateY(-3px)}
.prod-img{aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line)}
.prod-body{padding:.85rem .9rem 1rem;text-align:center}
.prod-body h3{font-family:var(--body);font-weight:600;font-size:.92rem;text-transform:none;letter-spacing:0}
.prod-price{font-size:.82rem;color:var(--muted);margin-top:.3rem}
.prod-price b{color:var(--accent);font-size:.95rem}
.prod-all{
  align-items:center;justify-content:center;text-align:center;gap:.6rem;
  padding:1.4rem 1.1rem;background:var(--band);
}
.prod-all-ico{color:var(--accent)}
.prod-all h3{font-size:.94rem;line-height:1.15}
.prod-all p{font-size:.79rem;color:var(--muted);line-height:1.45}


/* ==================================================================
   8. INDUSTRY SOLUTIONS
   ================================================================== */
.ind-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--line)}
.ind{
  padding:1.3rem .9rem;text-align:center;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:.15s;
}
.ind:last-child{border-right:0}
.ind:hover{background:var(--band)}
.ind-ico{color:var(--accent)}
.ind h3{font-size:.85rem;line-height:1.15}
.ind p{font-size:.76rem;color:var(--muted);line-height:1.45}
.ind-cta{text-align:center;margin-top:1.5rem}


/* ==================================================================
   9. MADE HERE
   ================================================================== */
.made{background:var(--ink);color:#fff}
.made-in{display:grid;grid-template-columns:1fr 1.25fr;align-items:stretch}
.made-copy{padding:clamp(2rem,4vw,3.2rem) clamp(1.5rem,4vw,3rem);
  display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  max-width:640px;margin-left:auto;width:100%}
.made-kick{
  font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-lite);
}
.made h2{color:#fff;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1}
.made-copy p{font-size:.9rem;color:rgba(255,255,255,.78);max-width:46ch}
.made-copy .btn{align-self:flex-start;margin-top:.5rem}
.made-photo{min-height:clamp(240px,28vw,380px)}


/* ==================================================================
   10. GALLERY
   ================================================================== */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;grid-auto-rows:clamp(150px,11vw,230px)}
.g-item{overflow:hidden}
.g-wide{grid-column:span 2}


/* ==================================================================
   11. TESTIMONIALS
   ================================================================== */
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rev{background:#fff;border:1px solid var(--line);padding:1.2rem 1.15rem;text-align:center}
.stars{display:inline-flex;gap:.14rem;color:var(--star)}
.stars .ico{width:.95rem;height:.95rem}
.rev p{font-size:.85rem;color:var(--muted);margin:.7rem 0;line-height:1.55}
.rev cite{font-style:normal;font-size:.8rem;font-weight:600}
.rev-google{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}
.g-logo{font-family:var(--body);font-weight:700;font-size:1.7rem;letter-spacing:-.02em}
.g-score{display:flex;align-items:center;gap:.5rem}
.g-score b{font-size:1.15rem}
.g-sub{font-size:.78rem;color:var(--muted)}


/* ==================================================================
   12. QUOTE CTA
   ================================================================== */
.quote-cta{background:var(--band);text-align:center;padding-block:clamp(2.6rem,5vw,4rem);border-top:1px solid var(--line)}
.quote-cta h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
.quote-lede{margin:.9rem auto 1.6rem;color:var(--muted);max-width:46ch;font-size:1rem}
.quote-fine{margin-top:1.3rem;font-size:.84rem;color:var(--muted);line-height:1.6}


/* ==================================================================
   13. FOOTER
   ================================================================== */
.footer{background:var(--ink);color:#fff;padding-top:2.6rem}
.foot-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.15fr .8fr;gap:2rem;padding-bottom:2.2rem}
.footer h4{font-size:.8rem;letter-spacing:.1em;margin-bottom:.9rem;color:#fff}
.footer ul{display:grid;gap:.4rem}
.footer a,.footer li{color:rgba(255,255,255,.72);font-size:.86rem}
.footer a:hover{color:var(--accent-lite)}
/* the badge logo sits on a white plate so the green wordmark stays legible */
.foot-logo{
  display:inline-block;background:#fff;border-radius:8px;
  padding:.5rem .7rem;margin-bottom:.9rem;
}
.foot-logo img{height:74px;width:auto}
.foot-tag{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1rem;line-height:1.15;color:#fff;margin-bottom:1rem}
.socials{display:flex;gap:.5rem}
.socials a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  display:grid;place-items:center;color:#fff;transition:.15s;
}
.socials .ico{width:1rem;height:1rem}
.socials a:hover{background:var(--accent-lite);border-color:var(--accent-lite);color:var(--ink)}
.foot-contact li{display:flex;gap:.55rem;align-items:flex-start;line-height:1.45}
.foot-contact .ico{margin-top:.22rem;opacity:.7}
.foot-hours{display:block;color:rgba(255,255,255,.72)}
.foot-hours span{display:block}
.foot-map{color:rgba(255,255,255,.26)}
.foot-map svg{width:100%;height:auto}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.14);padding-block:1rem;
  text-align:center;font-size:.78rem;color:rgba(255,255,255,.55);
}


/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width:1400px){
  .mega-in{grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .mega-feat{grid-column:span 3;margin:1rem -1.6rem -1.4rem;padding:1.2rem 1.6rem}
  .mega-feat h4{margin-bottom:.2rem}
}

/* The primary nav carries nine items plus a Shop button, so it runs out of
   room well before the rest of the layout does. Below this it becomes the
   burger drawer. */
@media (max-width:1260px){
  .burger{display:flex}
  .pnav{position:static}
  .pnav-in{display:none;flex-direction:column;align-items:stretch;gap:0;padding-block:.4rem}
  .pnav.open .pnav-in{display:flex}
  .pnav a{padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .pnav a:hover{border-bottom-color:rgba(255,255,255,.12)}
  .pnav-shop{margin:.4rem 0 .5rem;justify-content:center;border-radius:var(--radius)}
  .pnav-mobile-only{display:flex!important}
  .pnav-quote{justify-content:center;margin-top:.8rem;border:0!important}
  .has-mega{display:block}
  .mega{display:none!important}   /* the Shop page covers this on mobile */
}

@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .ind:nth-child(3n){border-right:0}
  .ind:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1.2fr 1fr 1fr;gap:2rem 1.5rem}
  .vendors-in{grid-template-columns:1fr 1fr;gap:2rem}
  .vendors-cta{grid-column:span 2;text-align:center;border-top:1px solid rgba(255,255,255,.16);padding-top:1.4rem}
  .gallery{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:920px){
  .mast-in{flex-wrap:wrap;gap:1rem}
  .hsearch{order:5;flex-basis:100%;max-width:none;margin-bottom:.45rem}
  .mast-quote{display:none}
  .logo img{height:66px}

  .hero-in{grid-template-columns:1fr}
  .hero-art{min-height:250px;order:-1}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
  .trust-item{background:#fff;border-right:0;padding:.8rem}
  .trust-item:last-child{grid-column:span 2}
  .made-in{grid-template-columns:1fr}
  .made-photo{min-height:220px;order:-1}
  .made-copy{margin-left:0;max-width:none}
}

@media (max-width:680px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .prod-all{grid-column:span 2}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .ind{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ind:nth-child(2n){border-right:0}
  .rev-grid{grid-template-columns:1fr}
  .vendors-in{grid-template-columns:1fr}
  .vendors-l{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);padding-right:0;padding-bottom:1.4rem}
  .vendors-cta{grid-column:span 1}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .g-wide{grid-column:span 2}
  .foot-grid{grid-template-columns:1fr 1fr}
  .ubar-r{display:none}
}

@media (max-width:520px){
  .mact span{display:none}
  .logo img{height:58px}
  .foot-grid{grid-template-columns:1fr}
}