/* ==========================================================================
   GRATITUDE. — Responsive stylesheet
   Mobile-first and fully fluid. The base layer is designed for phones
   (320–430px) with fluid clamp() type/space scales, then layouts
   restructure upward:
     >=700px  tablet — split compositions return
     >=900px  desktop navigation replaces the mobile menu
     >=1100px desktop — wider grids
     >=1440px large desktop caps
   ========================================================================== */

/* ---------- Tokens & reset ---------- */
:root{
  --bg:#f7f7f2;
  --ink:#050505;
  --olive:#7e854d;
  --olive-dark:#656c3e;
  --soft:#efefe8;
  --line:#e8e8e2;
  --content-max:1200px;
  --narrow-max:640px;
  --font-display:"Arial Black",Impact,"Helvetica Neue",sans-serif;
  --font-body:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande",Arial,sans-serif;

  /* Fluid space scale */
  --gutter:clamp(18px, 5vw, 32px);
  --pad-x:max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --section-y:clamp(52px, 12vw, 104px);

  /* Fluid type scale */
  --text-xs:clamp(11px, .6rem + .4vw, 13px);
  --text-sm:clamp(13px, .72rem + .45vw, 15px);
  --text-md:clamp(15px, .85rem + .45vw, 17px);
  --text-lg:clamp(17px, .95rem + .6vw, 20px);

  --ticker-dur:22s;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
[id]{scroll-margin-top:84px}

.app-shell{background:#fff;min-height:100svh;overflow-x:clip}

/* ---------- Header ---------- */
.site-header{
  height:clamp(56px, 9vw, 64px);
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  border-bottom:1px solid var(--line);
  padding-inline:max(calc(var(--gutter) - 10px), calc((100% - var(--content-max)) / 2));
  background:#fff;position:sticky;top:0;z-index:50;
  transition:box-shadow .3s ease;
}
.site-header.is-scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.logo{justify-self:center;display:flex;align-items:center;justify-content:center;height:100%;padding:0 8px}
.logo img{height:clamp(24px, 6vw, 28px);width:auto;max-width:100%;display:block}
.icon-btn,.cart-btn{border:0;background:transparent;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:inherit}
.menu-btn{gap:4.5px;align-content:center}
.menu-btn span{display:block;width:20px;height:2px;background:#111;border-radius:3px}
.cart-btn{position:relative;justify-self:end}
.cart-btn svg{display:block}
.cart-count{position:absolute;right:1px;top:3px;min-width:16px;height:16px;padding:0 3px;border-radius:99px;background:#111;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800}
.desktop-nav{display:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;justify-content:center;align-items:center;
  font-size:clamp(11px, .6rem + .4vw, 13px);font-weight:900;letter-spacing:1.2px;
  min-height:50px;padding:0 clamp(14px, 4.5vw, 28px);border-radius:0;
  white-space:nowrap;border:0;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .15s ease;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--olive);color:#fff}
.btn.outline{border:1.5px solid #fff;color:#fff;background:transparent}
.btn.dark{background:#000;color:#fff}
.btn.olive{background:var(--olive);color:#fff}
.btn.wide{width:100%;display:flex}
.btn.large{min-height:56px}
.mini-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:#000;font-size:clamp(10px, .55rem + .4vw, 12px);font-weight:900;letter-spacing:1px;
  min-height:44px;padding:0 clamp(16px, 4vw, 22px);text-shadow:none;
  transition:background-color .2s,color .2s,transform .15s ease;
}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:78vh;min-height:clamp(520px, 88svh, 700px);
  background:#050505;color:#fff;overflow:hidden;
}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:55% 20%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(198deg,rgba(5,5,5,0) 30%,rgba(5,5,5,.16) 52%,rgba(5,5,5,.9) 82%);
}
.hero-copy{position:relative;z-index:2;width:100%;padding:0 var(--pad-x) clamp(30px, 8vw, 56px)}
.hero h1{
  margin:0;
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(2.75rem, 1.25rem + 7vw, 4.75rem);line-height:.88;
  letter-spacing:-.04em;text-transform:uppercase;
}
.brush{display:block;width:clamp(150px, 42vw, 240px);height:auto;margin:clamp(8px, 2.5vw, 14px) 0 clamp(12px, 3.5vw, 18px);transform:rotate(-2deg)}
.hero p{font-family:var(--font-body);font-size:var(--text-md);font-weight:500;line-height:1.45;margin:0 0 clamp(20px, 5.5vw, 28px);color:#e8e8e2;max-width:34ch}
.hero-actions{display:flex;gap:10px;width:100%;max-width:440px}
.hero-actions .btn{flex:1 1 0;min-width:0}

/* ---------- Ticker ---------- */
.ticker{height:clamp(38px, 9.5vw, 44px);background:var(--olive);color:#fff;overflow:hidden;display:flex;align-items:center;position:relative;z-index:1}
.ticker-track{display:flex;align-items:center;gap:clamp(22px, 6vw, 34px);white-space:nowrap;width:max-content;animation:ticker var(--ticker-dur) linear infinite;font-size:clamp(10px, .55rem + .5vw, 13px);font-weight:900;letter-spacing:1.5px;will-change:transform}
.ticker-group{display:flex;align-items:center;gap:clamp(22px, 6vw, 34px);padding-right:clamp(22px, 6vw, 34px)}
.ticker-track b{font-size:clamp(13px, .7rem + .6vw, 17px);font-weight:400}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- Drop feature ---------- */
.drop{
  background:var(--soft);
  padding:var(--section-y) var(--pad-x);
  display:flex;flex-direction:column;gap:clamp(26px, 6.5vw, 40px);
}
.drop-copy{display:flex;flex-direction:column;align-items:flex-start}
.eyebrow{display:inline-block;background:var(--olive);color:#fff;padding:7px 13px;font-size:var(--text-xs);font-weight:900;letter-spacing:1.5px;margin-bottom:clamp(14px, 3.5vw, 20px)}
.drop h2{
  margin:0;color:#000;
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(2.375rem, .9rem + 7.8vw, 4.75rem);line-height:.86;letter-spacing:-.025em;
}
.drop p{font-size:var(--text-sm);font-weight:900;letter-spacing:1.5px;margin:clamp(14px, 3.5vw, 20px) 0 0;color:var(--olive-dark)}
.drop-visual{position:relative;min-width:0}
.drop-visual img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center}
.round-badge{
  position:absolute;right:clamp(-6px, -1vw, -2px);top:clamp(-16px, -3.5vw, -10px);
  width:clamp(68px, 18vw, 92px);height:clamp(68px, 18vw, 92px);border-radius:50%;
  background:var(--olive);color:#fff;display:grid;place-items:center;text-align:center;
  font-family:Arial,sans-serif;font-weight:900;font-size:clamp(10px, 2.6vw, 13px);line-height:1.05;letter-spacing:.5px;
  transform:rotate(8deg);box-shadow:0 10px 24px -12px rgba(0,0,0,.35);
}
.drop-cta{align-self:stretch}

/* ---------- Featured strip ---------- */
.featured{padding-block:var(--section-y)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 clamp(18px, 4.5vw, 28px);padding-inline:var(--pad-x)}
.section-head h3{
  margin:0;
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(1.375rem, .9rem + 2.4vw, 1.75rem);line-height:1;letter-spacing:-.02em;
}
.section-head a{font-size:var(--text-xs);color:var(--olive-dark);font-weight:900;letter-spacing:1px;text-decoration:underline;text-underline-offset:3px;padding:8px 0;white-space:nowrap}
.product-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(66vw, 300px);
  gap:clamp(14px, 3.5vw, 20px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--pad-x);scroll-padding-inline:var(--pad-x);
  padding-bottom:6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.product-strip::-webkit-scrollbar{display:none}
.product,a.product{display:block;min-width:0;margin:0;scroll-snap-align:start}
.card-media{overflow:hidden;background:#eceae3;border-radius:2px}
.card-media img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1),opacity .3s}
.product h4{font-family:Arial,sans-serif;font-weight:900;font-size:var(--text-sm);line-height:1.2;margin:12px 0 4px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product p{font-size:var(--text-sm);font-weight:800;margin:0;color:#333}

/* ---------- Category cards ---------- */
.category-grid{display:grid;gap:clamp(14px, 3.5vw, 20px);padding:0 var(--pad-x) var(--section-y)}
.category-card{position:relative;aspect-ratio:4/3;background:#050505;color:#fff;overflow:hidden;display:block}
.category-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .6s cubic-bezier(.2,.6,.2,1),opacity .3s}
.category-card.hoodies img{object-position:center 22%}
.category-card.hats img{object-position:70% center;opacity:1}
.hats-hero img{object-position:70% center}
.hats-product .card-media img{object-position:70% center}
.product-detail > img.right-crop{object-position:70% center}
.category-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.22) 48%,rgba(0,0,0,.04) 75%)}
.category-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px, 5vw, 32px)}
.category-copy h3{
  margin:0 0 6px;
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(2.5rem, 1.1rem + 8.5vw, 3.75rem);line-height:.9;letter-spacing:-.025em;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.category-copy p{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;line-height:1.4;margin:0 0 clamp(14px, 3.5vw, 18px);color:#e8e8e2}

/* ---------- Lifestyle banner ---------- */
.lifestyle{height:clamp(260px, 68vw, 480px);overflow:hidden;background:#111}
.lifestyle img{width:100%;height:100%;object-fit:cover;object-position:65% 25%;display:block}

/* ---------- Mission strip ---------- */
.mission{
  background:#050505;color:#fff;
  padding:var(--section-y) var(--pad-x) clamp(48px, 11vw, 84px);
  display:flex;flex-direction:column;gap:clamp(28px, 7vw, 44px);
}
.mission-marketing{position:relative}
.mission-marketing h2{
  margin:0;position:relative;z-index:1;
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(2.25rem, 1rem + 6.8vw, 3.5rem);line-height:.88;letter-spacing:-.02em;
}
.paint-cross{position:absolute;right:clamp(0px, 2vw, 24px);top:clamp(-18px, -3vw, -8px);width:clamp(100px, 28vw, 150px);height:auto;transform:rotate(8deg);z-index:0;opacity:.95}
.mission-copy{position:relative;z-index:2}
.mission-copy p{font-family:var(--font-body);font-size:var(--text-md);font-weight:500;line-height:1.6;margin:0 0 clamp(20px, 5vw, 26px);color:#d8d8d0;max-width:36ch}
.mission .btn{width:100%;max-width:360px}

/* ---------- Footer ---------- */
.page-footer{
  background:#050505;color:#fff;text-align:center;
  border-top:1px solid #1e1e1e;
  padding:clamp(44px, 10vw, 72px) var(--pad-x) calc(clamp(30px, 7vw, 44px) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:clamp(22px, 5.5vw, 30px);
}
.footer-mark{height:clamp(30px, 4vw, 52px);width:auto;filter:invert(1)}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px clamp(18px, 4.5vw, 28px)}
.footer-nav a{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:10px 2px;color:#cfcfc8;transition:color .2s}
.footer-copy{font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;color:#87877f;letter-spacing:.5px;margin:0}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed;inset:0 0 0 auto;width:min(84vw, 380px);background:#050505;color:#fff;z-index:100;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);visibility:hidden;
  padding:calc(84px + env(safe-area-inset-top,0px)) 28px 40px;
  display:flex;flex-direction:column;gap:8px;
}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-menu a{
  font-family:var(--font-display),Arial,sans-serif;font-weight:900;
  font-size:clamp(22px, 6vw, 26px);line-height:1;letter-spacing:-.02em;
  padding:14px 0;border-bottom:1px solid #1c1c1c;transition:color .2s;
}
.mobile-menu a.active{color:var(--olive)}
.close-menu{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top,0px));width:48px;height:48px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;display:grid;place-items:center}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s ease}
.menu-overlay.show{opacity:1;pointer-events:auto}

/* ---------- Reveal-on-scroll (class applied via JS) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- Sub-pages: hero ---------- */
.page-hero{
  position:relative;min-height:clamp(340px, 52svh, 460px);background:#050505;color:#fff;
  display:flex;align-items:flex-end;overflow:hidden;
}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.9) 0%,rgba(5,5,5,.32) 52%,rgba(5,5,5,.12) 100%)}
.page-hero-copy{position:relative;z-index:2;padding:clamp(26px, 6.5vw, 44px) var(--pad-x);width:100%}
.page-hero-copy h1{
  margin:0 0 clamp(8px, 2.5vw, 14px);
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(2.25rem, 1rem + 7.2vw, 4.5rem);line-height:.9;letter-spacing:-.025em;
}
.page-hero-copy p{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;letter-spacing:.5px;margin:0 0 clamp(18px, 4.5vw, 24px);color:#e8e8e2}
.page-hero-copy .btn{max-width:440px}

/* ---------- Sub-pages: sections & product grids ---------- */
.section{padding:var(--section-y) var(--pad-x)}
.section h2{
  margin:0 0 clamp(18px, 4.5vw, 28px);
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(1.75rem, 1.2rem + 2.8vw, 2.75rem);line-height:1;letter-spacing:-.02em;
}
.section p{font-family:var(--font-body);font-size:var(--text-md);font-weight:500;line-height:1.6;margin:0 0 clamp(18px, 4.5vw, 24px);max-width:60ch}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px, 4vw, 28px) clamp(12px, 3.5vw, 24px)}
.product-card{display:block;background:#fff;min-width:0}
.product-card h4{font-family:Arial,sans-serif;font-weight:900;font-size:var(--text-sm);line-height:1.2;margin:12px 0 4px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-card p,.product-card .price{font-size:var(--text-sm);font-weight:800;margin:0;color:#333}

/* ---------- Sub-pages: product detail ---------- */
.product-detail{padding:clamp(20px, 5vw, 32px) var(--pad-x) var(--section-y);display:flex;flex-direction:column;gap:clamp(22px, 5.5vw, 32px)}
.product-detail > img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#eceae3;border-radius:2px}
.detail-info h1{
  margin:0 0 clamp(8px, 2vw, 12px);
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(1.75rem, 1.1rem + 3.4vw, 2.75rem);line-height:.95;letter-spacing:-.02em;
}
.detail-info .price{font-size:var(--text-lg);font-weight:900;margin:0 0 clamp(14px, 3.5vw, 20px)}
.detail-info p{font-family:var(--font-body);font-size:var(--text-md);font-weight:500;line-height:1.6;margin:0 0 clamp(20px, 5vw, 28px);color:#444;max-width:52ch}
.size-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:clamp(18px, 4.5vw, 24px);max-width:440px}
.size-option{height:52px;border:1.5px solid #ccc;background:#fff;font-family:Arial,sans-serif;font-weight:900;font-size:14px;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s,transform .15s ease}
.size-option:active{transform:scale(.96)}
.size-option.selected{border-color:var(--olive);background:var(--olive);color:#fff}
.detail-info .add-to-cart{max-width:440px}

/* ---------- Sub-pages: cart & checkout ---------- */
.cart-list{display:flex;flex-direction:column;margin-bottom:clamp(18px, 4.5vw, 24px)}
.cart-item{display:grid;grid-template-columns:clamp(72px, 20vw, 88px) 1fr auto;gap:clamp(12px, 3.5vw, 16px);align-items:center;border-bottom:1px solid var(--line);padding:clamp(14px, 3.5vw, 18px) 0}
.cart-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:#eceae3}
.cart-item-info h4{font-family:Arial,sans-serif;font-weight:900;font-size:var(--text-sm);line-height:1.25;margin:0 0 4px}
.cart-item-info p{font-size:var(--text-xs);color:#555;margin:0}
.cart-item-end{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cart-item-price{font-family:Arial,sans-serif;font-weight:900;font-size:var(--text-md)}
.remove-item{background:none;border:0;font-size:22px;color:#999;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;margin-right:-12px;transition:color .2s}
.cart-summary{border-top:2px solid #050505;padding-top:clamp(14px, 3.5vw, 18px);margin-bottom:clamp(20px, 5vw, 28px)}
.cart-summary-row{display:flex;justify-content:space-between;font-size:var(--text-sm);font-weight:800;margin-bottom:10px}
.cart-summary-row.total{
  font-family:var(--font-display),Arial,sans-serif;font-weight:900;
  font-size:clamp(1.125rem, 1rem + 1vw, 1.375rem);margin-top:14px;
}
.empty-state{text-align:center;padding:clamp(44px, 11vw, 72px) 20px;font-size:var(--text-sm);font-weight:800;color:#777}
.checkout-form{display:flex;flex-direction:column;gap:clamp(14px, 3.5vw, 18px)}
.checkout-form label{font-size:var(--text-xs);font-weight:900;letter-spacing:1px;text-transform:uppercase;display:flex;flex-direction:column;gap:6px}
.checkout-form input{width:100%;height:52px;border:1.5px solid #ccc;padding:0 14px;font-size:16px;background:#fff;border-radius:0}
.checkout-form input:focus-visible{outline:2px solid var(--olive);outline-offset:0;border-color:var(--olive)}
.checkout-form .btn{margin-top:8px}

/* ---------- Sub-pages: mission ---------- */
.mission-hero{height:clamp(240px, 52vw, 420px);overflow:hidden;background:#111}
.mission-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.mission-block{padding:var(--section-y) var(--pad-x);background:#050505;color:#fff}
.mission-block h2{
  margin:0 0 clamp(18px, 4.5vw, 28px);max-width:16ch;
  font-family:var(--font-display);font-weight:1000;
  font-size:clamp(2rem, 1.1rem + 5vw, 3.375rem);line-height:.92;letter-spacing:-.02em;
}
.mission-block p{font-family:var(--font-body);font-size:var(--text-md);font-weight:500;line-height:1.65;margin:0 0 clamp(14px, 3.5vw, 18px);color:#d8d8d0;max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px, 2.5vw, 20px);margin-top:clamp(26px, 6.5vw, 36px);max-width:720px}
.stats div{text-align:center;background:var(--olive);color:#fff;padding:clamp(16px, 4vw, 28px) 8px;font-family:Arial,sans-serif;font-weight:900;font-size:var(--text-xs);letter-spacing:.5px}
.stats span{
  display:block;margin-bottom:4px;
  font-family:var(--font-display),Arial,sans-serif;font-weight:900;
  font-size:clamp(1.625rem, 1rem + 3vw, 2.75rem);
}

/* ==========================================================================
   Tablet & up (>=700px) — split compositions return
   ========================================================================== */
@media (min-width:700px){
  :root{--ticker-dur:30s}

  /* Header */
  .site-header{grid-template-columns:56px 1fr 56px}
  .logo img{height:28px}

  /* Buttons */
  .btn{min-height:48px;font-size:clamp(11px, .9vw, 13px);padding:0 clamp(20px, 2.6vw, 30px)}
  .btn.large{min-height:54px}
  .mini-btn{min-height:44px;font-size:clamp(10px, .85vw, 12px);padding:0 20px}

  /* Hero — split composition */
  .hero{display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);align-items:stretch;min-height:clamp(420px, 46vw, 640px)}
  .hero-media{position:relative;inset:auto;order:2}
  .hero-media img{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);object-position:center 15%}
  .hero-media::after{content:none}
  .hero-copy{order:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(36px, 5vw, 64px) clamp(10px, 1.5vw, 24px) clamp(36px, 5vw, 64px) max(28px, calc((100vw - var(--content-max)) / 2))}
  .hero h1{font-size:clamp(44px, 7.2vw, 100px);letter-spacing:-.04em}
  .brush{width:clamp(170px, 18vw, 270px);margin:clamp(10px, 1.4vw, 18px) 0 clamp(16px, 2vw, 26px)}
  .hero p{font-size:clamp(14px, 1.3vw, 17px);line-height:1.35;margin-bottom:clamp(16px, 2vw, 24px)}
  .hero-actions{gap:12px;width:auto;max-width:none}
  .hero-actions .btn{flex:0 0 auto;min-width:160px}

  /* Drop — copy left, visual right */
  .drop{
    display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);
    grid-template-areas:"copy visual" "cta visual";
    align-items:center;column-gap:clamp(28px, 4vw, 56px);row-gap:clamp(22px, 2.6vw, 32px);
  }
  .drop-copy{grid-area:copy;align-self:end}
  .drop-visual{grid-area:visual;align-self:center}
  .drop-visual img{aspect-ratio:auto;height:clamp(300px, 32vw, 430px)}
  .drop-cta{grid-area:cta;align-self:start;justify-self:start}
  .drop h2{font-size:clamp(40px, 5.4vw, 76px)}
  .round-badge{right:clamp(-8px, -.5vw, 0px);top:clamp(-18px, -1.4vw, -10px)}

  /* Featured — 4-up grid replaces the carousel */
  .product-strip{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:unset;overflow:visible;gap:clamp(14px, 2vw, 24px);padding-bottom:0}
  .section-head h3{font-size:clamp(18px, 1.9vw, 24px)}

  /* Category cards side-by-side */
  .category-grid{grid-template-columns:1fr 1fr}
  .category-card{aspect-ratio:auto;height:clamp(300px, 30vw, 430px)}
  .category-copy h3{font-size:clamp(38px, 4.4vw, 60px)}
  .category-copy p{font-size:clamp(13px, 1.15vw, 15px)}
  .category-copy p br{display:none}

  /* Lifestyle */
  .lifestyle{height:clamp(280px, 30vw, 470px)}
  .lifestyle img{object-position:center}

  /* Mission split */
  .mission{display:grid;grid-template-columns:minmax(0,55%) minmax(0,45%);align-items:center;gap:clamp(24px, 3.5vw, 48px);padding-block:clamp(56px, 7vw, 96px)}
  .mission-marketing{padding-left:clamp(78px, 7vw, 108px)}
  .mission-marketing h2{font-size:clamp(30px, 3.6vw, 50px)}
  .paint-cross{left:0;right:auto;top:-6px;width:clamp(64px, 6.4vw, 92px)}
  .mission-copy p{font-size:clamp(13px, 1.3vw, 16px);line-height:1.5}
  .mission .btn{width:auto;min-width:200px}

  /* Sub-pages */
  .page-hero{min-height:clamp(340px, 38vw, 480px)}
  .page-hero-copy h1{font-size:clamp(46px, 6vw, 84px);letter-spacing:-.035em}
  .page-hero-copy p{font-size:clamp(12px, 1.25vw, 15px)}
  .page-hero-copy .btn{width:auto;display:inline-flex;padding:0 36px}

  .section h2{font-size:clamp(30px, 3.4vw, 44px)}
  .section p{font-size:clamp(13px, 1.3vw, 15px)}
  .section > .btn.wide{max-width:var(--narrow-max)}
  #cart-items,.cart-summary,.checkout-form{max-width:var(--narrow-max)}

  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Product detail — split composition */
  .product-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px, 4.5vw, 64px);align-items:start;padding-block:clamp(36px, 4.5vw, 56px)}
  .product-detail > img{aspect-ratio:4/5}
  .detail-info{align-self:center;max-width:480px}
  .detail-info h1{font-size:clamp(30px, 3.2vw, 44px)}
  .detail-info .price{font-size:clamp(18px, 1.8vw, 24px)}
  .detail-info p{font-size:clamp(13px, 1.3vw, 15px)}
  .detail-info p br{display:none}
  .size-option{height:48px;font-size:13px}

  /* Cart & checkout */
  .cart-item{grid-template-columns:88px 1fr auto}
  .checkout-form input{height:48px;font-size:14px}

  /* Mission page */
  .mission-hero{height:clamp(280px, 30vw, 440px)}
  .mission-block h2{max-width:20ch}
  .stats div{padding:clamp(18px, 2.2vw, 28px) 10px}
}

/* ==========================================================================
   Desktop navigation (>=900px)
   ========================================================================== */
@media (min-width:900px){
  .site-header{height:68px;grid-template-columns:1fr auto 1fr}
  .menu-btn{display:none}
  .logo{justify-self:start;grid-column:1;padding:0}
  .logo img{height:30px}
  .desktop-nav{display:flex;grid-column:2;justify-self:center;gap:clamp(24px, 3vw, 40px)}
  .desktop-nav a{font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;padding:8px 2px;position:relative}
  .desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
  .desktop-nav a.active{color:var(--olive-dark)}
  .desktop-nav a.active::after{transform:scaleX(1)}
  .cart-btn{grid-column:3}
  .mobile-menu,.menu-overlay{display:none}
}

/* ==========================================================================
   Desktop (>=1100px)
   ========================================================================== */
@media (min-width:1100px){
  .hero{grid-template-columns:minmax(0,48%) minmax(0,52%);min-height:clamp(520px, 54vh, 660px)}
  .drop{grid-template-columns:minmax(0,40%) minmax(0,60%)}
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .category-copy p br{display:none}
}

/* ==========================================================================
   Large desktop (>=1440px)
   ========================================================================== */
@media (min-width:1440px){
  .hero{min-height:660px}
  .lifestyle{height:460px}
}

/* ==========================================================================
   Pointer & motion preferences
   ========================================================================== */
@media (hover:hover){
  .btn.primary:hover{background:var(--olive-dark)}
  .btn.dark:hover{background:#2a2a2a}
  .btn.outline:hover{background:#fff;color:#050505}
  .btn.olive:hover{background:var(--olive-dark)}
  .mini-btn:hover{background:var(--olive);color:#fff}
  .desktop-nav a:hover::after{transform:scaleX(1)}
  .section-head a:hover,.remove-item:hover{color:var(--ink)}
  .footer-nav a:hover{color:#fff}
  .product:hover .card-media img,.product-card:hover .card-media img{transform:scale(1.05)}
  .category-card:hover img{transform:scale(1.04);opacity:.95}
  .size-option:hover{border-color:var(--olive)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}