:root{
  --void-black: #1a1a1c;
  --blood-red: #990000;
  --fossil-bone: #f0e9d6;
  --crude-brown: #8b4513;
  --oxidized-teal: #4a7c7c;
  --steel-grey: #c8c8c8;
  --hazard-yellow: #ffc72c;
  /* motion system */
  --motion-time: 360ms;
  --motion-ease: cubic-bezier(.2,.9,.25,1);
  --reveal-stagger: 80ms;
  /* global card radius for consistent rounded corners */
  --card-radius: 16px;
}
/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Montserrat,system-ui,Arial,sans-serif;background:var(--void-black);color:var(--fossil-bone);line-height:1.4}
.container{max-width:1100px;margin:0 auto;padding:1.5rem}
/* Global link styles: remove default underline across the site.
  Show a visible focus style only for keyboard users via :focus-visible.
  This prevents the dashed yellow outline from appearing on mouse clicks. */
a{color:inherit;text-decoration:none}
a:focus{outline:none}
a:focus-visible{outline:3px dashed var(--hazard-yellow);outline-offset:3px}

/* Header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);backdrop-filter:blur(2px);z-index:40;border-bottom:1px solid rgba(200,200,200,.04)}
.site-header.scrolled{background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.5));box-shadow:0 6px 18px rgba(0,0,0,.45)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
#nav-inner{position:relative}
/* Ensure nav-inner is positioned for absolute dropdown placement */
.nav-inner{position:relative}
.brand{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:500;letter-spacing:1px;color:var(--fossil-bone);text-decoration:none;display:inline-flex;align-items:center;gap:1rem;font-size:1.05rem}
/* Brand logo in nav: increase visible size while preserving aspect ratio */
/* Larger default for desktop, with a slightly smaller but still large size on phones */
.brand-logo{height:72px;max-height:72px;width:auto;display:block;flex:0 0 auto}
.brand-text{color:var(--fossil-bone);font-weight:700;line-height:1;font-size:1.5rem}

@media (max-width:699px){
  /* mobile: keep it large for tap targets but slightly smaller than desktop */
  .brand-logo{height:64px;max-height:64px}
  .brand-text{font-size:1.35rem}
  /* increase spacing a touch so larger logo/text don't look cramped */
  .nav-inner{gap:1rem}
}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav .cart-btn{margin-left:.5rem;order:999}
.site-nav a{color:var(--steel-grey);text-decoration:none;padding:.25rem .25rem;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease}
.site-nav a.active{color:var(--hazard-yellow);border-bottom-color:var(--hazard-yellow)}
.site-nav a:hover{color:var(--blood-red);border-bottom-color:var(--blood-red)}
.nav-inner a{transition:color .18s var(--motion-ease)}

/* Global nav hover: ensure nav links turn red on hover across the site */
nav a:hover, .site-nav a:hover, .nav-inner a:hover { color: var(--blood-red) !important; border-bottom-color: var(--blood-red) !important }
.nav-toggle{display:none;background:none;border:0;color:var(--fossil-bone);font-size:1.25rem}

/* Cart button in header */
.cart-btn{display:inline-flex;align-items:center;justify-content:center;margin:0 .5rem 0 .5rem;padding:0;border:0;background:none;color:var(--fossil-bone);text-decoration:none}
.cart-btn img{height:28px;width:auto;display:block}

@media(max-width:699px){
  /* ensure cart remains outside the collapsing nav; place between brand and toggle in markup */
  .cart-btn{order: 2;}
  .brand{order:0}
  .nav-toggle{order:1}
  .site-nav{order:3}
}

.hero{
  /* Hero must fill the viewport and center content both axes */
  height:100vh;
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0; /* keep content centered; spacing handled by .hero-inner */
  position:relative;
  overflow:hidden;
  background-color:var(--void-black); /* fallback */
  background-size:cover;
  background-position:center;
}
.hero-inner{padding:0 1rem;text-align:center;max-width:1000px}
.hero-title{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;font-size:clamp(2.5rem, 8vw, 4.5rem);margin:.25rem 0;color:var(--fossil-bone);text-transform:uppercase;letter-spacing:1px;line-height:1.1}
.hero-slogan{font-weight:600;color:var(--crude-brown);margin:.5rem 0}
.hero-tagline{margin:.6rem 0 1.1rem;color:var(--crude-brown);font-weight:600;font-size:clamp(1rem,2.5vw,1.15rem);letter-spacing:0.4px}

/* Home page specific: make the hero tagline match the hazardous yellow brand CTA */
.page-root .hero-tagline{color:#ffc72c}

.btn{display:inline-block;padding:.6rem 1rem;border-radius:4px;background:transparent;color:var(--fossil-bone);border:1px solid rgba(200,200,200,.12);cursor:pointer}
.btn.small{padding:.35rem .6rem;font-size:.9rem}
.crude-button{background:linear-gradient(90deg,var(--blood-red),var(--crude-brown));border:none;color:white;font-family:"Space Grotesk",system-ui,sans-serif;font-size:1.05rem;letter-spacing:.06em}
.crude-button:hover{filter:brightness(.95)}

/* Manifesto */
.fossil-section{padding:2rem 0;border-top:1px solid rgba(200,200,200,.03);border-bottom:1px solid rgba(200,200,200,.03)}
.section-title{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:500;text-transform:uppercase;margin:0 0 .5rem;color:var(--fossil-bone);font-size:clamp(1.8rem, 5vw, 2.5rem);letter-spacing:1px}
.section-subtitle{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.1rem,3.2vw,1.5rem);color:#f5f5f5;margin:0 0 1.5rem}
.lead{font-weight:600;color:var(--steel-grey);margin:0 0 1rem}
.manifesto-copy{max-width:70ch}
.vision-hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:70vh;padding:6rem 0;overflow:hidden;border-top:1px solid rgba(200,200,200,.06);border-bottom:1px solid rgba(200,200,200,.06);text-align:center;color:#fff}
.vision-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.32));z-index:1}
.vision-hero .hero-inner{position:relative;z-index:2}
.vision-hero .hero-inner p{max-width:720px;margin:0.75rem auto 0;text-shadow:0 2px 4px rgba(0,0,0,.6);color:#f5f5f5}
.vision-hero .section-title{color:#fff;font-weight:600;text-shadow:0 3px 6px rgba(0,0,0,.65)}
.vision-hero .lead{color:#f5f5f5;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.contact-hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:65vh;padding:6rem 0;margin:0 auto 2.5rem;overflow:hidden;text-align:center;color:#f5f5f5}
.contact-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.12));z-index:1}
.contact-hero .hero-inner{position:relative;z-index:2;max-width:640px}
.contact-hero .hero-inner h1,
.contact-hero .hero-inner p,
.contact-hero .hero-inner .btn{text-shadow:0 3px 6px rgba(0,0,0,.4)}
.contact-hero .hero-inner .muted{color:rgba(230,230,230,.8);margin-bottom:1.25rem}
.contact-hero .hero-inner .btn{margin-top:1.25rem}
.vision-section{margin:clamp(4.5rem, 7vw, 6.5rem) auto 0;padding:0;background:transparent;border:none;box-shadow:none}
.vision-section p{margin:0 0 1.25rem 0;color:var(--steel-grey);line-height:1.65;letter-spacing:.01em}
.vision-section p:last-child{margin-bottom:0}
.vision-section ol{margin:0;padding-left:1.75rem}
.vision-section ol li{margin-bottom:.75rem;line-height:1.65;letter-spacing:.008em}
.vision-section ol li:last-child{margin-bottom:0}
.principles-grid{display:grid;gap:1.5rem;margin:1.5rem auto 0;padding:0}
.principle-card{background:rgba(18,18,20,.78);border:1px solid rgba(255,255,255,.05);border-radius:var(--card-radius);padding:1.6rem;text-align:left;box-shadow:0 12px 28px rgba(0,0,0,.2);transition:transform .2s ease, box-shadow .2s ease, filter .25s ease, opacity var(--motion-time) var(--motion-ease);filter:brightness(1)}
.principle-card{background:rgba(18,18,20,.78);border:1px solid rgba(255,255,255,.05);border-radius:var(--card-radius);padding:1.6rem;text-align:left;box-shadow:0 12px 28px rgba(0,0,0,.2);transition:transform .22s cubic-bezier(.2,.9,.25,1), box-shadow .22s cubic-bezier(.2,.9,.25,1), filter .25s ease, opacity var(--motion-time) var(--motion-ease);filter:brightness(1);position:relative;z-index:0;transform-origin:center center}
.principle-card h3{margin:0 0 .75rem;font-family:"Space Grotesk",system-ui,sans-serif;font-size:1.1rem;font-weight:600;color:#fff}
.principle-card p{margin:0;color:rgba(215,215,215,.75);line-height:1.6;letter-spacing:.008em}
.principle-card:hover{transform:translateY(-10px) scale(1.06);box-shadow:0 28px 56px rgba(0,0,0,.45);filter:brightness(1.06);border-color:rgba(255,255,255,.18);background:rgba(18,18,20,0.96);z-index:220}
.principles-grid .principle-card:nth-child(1){transition-delay:.05s}
.principles-grid .principle-card:nth-child(2){transition-delay:.1s}
.principles-grid .principle-card:nth-child(3){transition-delay:.15s}
.principles-grid .principle-card:nth-child(4){transition-delay:.2s}
.principles-grid .principle-card:nth-child(5){transition-delay:.25s}

/* Carousel styles for the "What We Stand For" section */
.carousel{position:relative;margin:1.5rem 0;z-index:110}
.carousel-viewport{overflow-x:hidden;overflow-y:visible}
.carousel-track{display:flex;gap:1.5rem;transition:transform .42s cubic-bezier(.2,.9,.25,1);will-change:transform;align-items:center;z-index:80}
.carousel-slide{position:relative;flex:0 0 100%;max-width:100%;transition:transform .36s ease, box-shadow .36s ease, z-index .01s;transform-origin:center center}

/* Side arrows */
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.4));color:var(--fossil-bone);border:0;padding:.6rem .9rem;border-radius:8px;cursor:pointer;font-size:1.4rem;line-height:1;z-index:9999;pointer-events:auto}
.carousel-btn:disabled{opacity:.45;cursor:default}
.carousel-btn.prev{left:0.5rem}
.carousel-btn.next{right:0.5rem}

/* Center slide emphasis: scale up and lift above others */
.carousel-slide{box-shadow:none}
.carousel-slide.center{transform:translateY(-8px) scale(1.06);z-index:110;box-shadow:0 18px 36px rgba(0,0,0,.35)}
.carousel-slide.adjacent{transform:translateY(0) scale(0.98);z-index:90}
.carousel-slide:not(.center):not(.adjacent){transform:translateY(0) scale(0.95);z-index:80;opacity:.98}

/* responsive slide widths: 1 up mobile, 2 up mid, 3 up desktop */
@media(min-width:600px){
  .carousel-slide{flex:0 0 calc((100% - 1.5rem) / 2);max-width:calc((100% - 1.5rem) / 2)}
}
@media(min-width:960px){
  .carousel-slide{flex:0 0 calc((100% - (1.5rem * 2)) / 3);max-width:calc((100% - (1.5rem * 2)) / 3)}
  /* move arrows slightly outside the card area on large screens so they sit at the sides */
  .carousel-btn.prev{left:-1.25rem}
  .carousel-btn.next{right:-1.25rem}
}

/* Carousel card appearance inspired by provided reference: white rounded cards, centered copy,
   larger center card elevated above the rest, and subtle inner rule under headings. */
.carousel .principle-card{
  /* dark mode cards */
  background:rgba(18,18,20,0.86);
  color:var(--fossil-bone);
  border-radius:var(--card-radius);
  padding:1.6rem 1.6rem;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  text-align:left;
  border:1px solid rgba(255,255,255,0.03);
}
.carousel .principle-card h3{color:var(--fossil-bone);font-weight:700;margin:0 0 .6rem;font-size:1.05rem}
.carousel .principle-card p{color:rgba(230,230,230,0.78);margin:0 0 0.25rem;line-height:1.6}
.carousel .principle-card::before{content:"";display:block;width:48px;height:3px;background:rgba(255,255,255,0.04);margin:0 0 1rem;border-radius:2px}

/* center card: larger, more padding, taller, visually above others */
.carousel .principle-card.center{transform:translateY(-12px) scale(1.04);min-height:300px;border-radius:var(--card-radius);box-shadow:0 18px 36px rgba(0,0,0,.5)}
.carousel .principle-card.center h3{font-size:1.12rem}
.carousel .principle-card.adjacent{transform:translateY(-2px) scale(0.99)}

/* Make sure carousel background area has enough vertical room for lifted center card */
.carousel{padding:2rem 0}

/* Arrow styling: circular, subtle shadow, vertically centered along card midline */
.carousel-btn{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:999px}
.carousel-btn svg,.carousel-btn::after{pointer-events:none}

/* hide default outline but show a clear focus ring for accessibility */
.carousel-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(74,144,226,0.18)}

/* visual press feedback for debugging and accessibility */
.carousel-btn.pressed{transform:translateY(-2px) scale(0.98);box-shadow:0 10px 20px rgba(0,0,0,.32);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.process-grid{display:grid;gap:1.5rem;margin:1.5rem auto 0;padding:0}
.process-card{position:relative;min-height:320px;border-radius:var(--card-radius);overflow:hidden;background:#101014;border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 36px rgba(0,0,0,.26);transition:transform .25s ease, box-shadow .25s ease, filter .3s ease, opacity var(--motion-time) var(--motion-ease);filter:brightness(1)}
.process-card__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85) contrast(1.1);transition:filter .35s ease;z-index:0}
.process-card::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,0,0,.24),rgba(0,0,0,.5));z-index:1}
.process-card__inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.75rem;text-align:left;color:#f7f5f7;text-shadow:0 2px 4px rgba(0,0,0,.55)}
.process-card__inner h3{margin:0 0 .5rem;font-family:"Space Grotesk",system-ui,sans-serif;font-size:1.25rem;font-weight:600;color:#fff}
.process-card__inner p{margin:0;font-size:1rem;line-height:1.65;color:rgba(235,235,235,.85);letter-spacing:.01em}
.process-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 24px 48px rgba(0,0,0,.32);filter:brightness(1.12);border-color:rgba(255,255,255,.14)}
.process-card:hover::after{background:linear-gradient(200deg,rgba(0,0,0,.16),rgba(0,0,0,.36))}
.process-card:hover .process-card__image{filter:brightness(.95) contrast(1.18)}
.process-grid .process-card:nth-child(1){transition-delay:.05s}
.process-grid .process-card:nth-child(2){transition-delay:.12s}
.process-grid .process-card:nth-child(3){transition-delay:.18s}
.process-grid .process-card:nth-child(4){transition-delay:.24s}
.in-out-grid{display:grid;gap:1.5rem;margin:1.5rem auto 0;max-width:900px}
.in-card,.out-card{position:relative;padding:1.5rem;border-radius:var(--card-radius);border:1px solid rgba(255,255,255,.05);background:rgba(18,18,20,.8);color:#f5f5f5;text-align:left;box-shadow:0 8px 18px rgba(0,0,0,.18);overflow:hidden;filter:brightness(1);transition:filter .25s ease}
.in-card h3,.out-card h3{margin:0 0 .55rem;font-family:"Space Grotesk",system-ui,sans-serif;font-weight:600;font-size:1.1rem}
.in-card::before,.out-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;opacity:.22}
.in-card{border-left:4px solid rgba(76,204,112,.35)}
.out-card{border-left:4px solid rgba(220,96,96,.35)}
.in-card::before{background:linear-gradient(135deg,rgba(76,204,112,.18),transparent 70%)}
.out-card::before{background:linear-gradient(135deg,rgba(220,96,96,.2),transparent 70%)}
.in-card p,.out-card p{margin:0;color:rgba(235,235,235,.88);line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.in-out-grid .in-card{transition:opacity var(--motion-time) var(--motion-ease), transform .25s ease, box-shadow .25s ease, filter .25s ease;transition-delay:.05s}
.in-out-grid .out-card{transition:opacity var(--motion-time) var(--motion-ease), transform .25s ease, box-shadow .25s ease, filter .25s ease;transition-delay:.12s}
.in-card:hover,.out-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 38px rgba(0,0,0,.26);filter:brightness(1.12);border-color:rgba(255,255,255,.13)}
.sustainability-grid{display:grid;grid-template-columns:1fr;margin:clamp(2.75rem,5vw,3.75rem) auto 0;gap:2rem;align-items:center}
.sustainability-copy{display:flex;flex-direction:column;gap:1rem;max-width:36rem;margin:0 auto;text-align:left}
.sustainability-copy .section-subtitle{margin-bottom:.75rem}
.sustainability-copy p{margin:0;color:var(--steel-grey)}
.sustainability-stats{display:grid;gap:1rem}
.stat-card{padding:1.15rem 1.25rem;border-radius:var(--card-radius);border:1px solid rgba(255,255,255,.04);background:linear-gradient(175deg,rgba(20,20,20,.9),rgba(12,12,12,.95));color:#f5f5f5;box-shadow:0 5px 14px rgba(0,0,0,.16);filter:brightness(1)}
.stat-card h3{margin:0 0 .5rem;font-family:"Space Grotesk",system-ui,sans-serif;font-size:1.1rem;font-weight:600;color:#fff}
.stat-card p{margin:0;color:rgba(235,235,235,.82);text-transform:uppercase;letter-spacing:.06em;font-size:.83rem}
.sustainability-stats .stat-card{transition:opacity var(--motion-time) var(--motion-ease), transform .25s ease, box-shadow .25s ease, filter .25s ease}
.stat-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 32px rgba(0,0,0,.24);filter:brightness(1.14);border-color:rgba(255,255,255,.12);background:linear-gradient(175deg,rgba(26,26,28,.92),rgba(18,18,18,.95))}
.sustainability-stats .stat-card:nth-child(1){transition-delay:.05s}
.sustainability-stats .stat-card:nth-child(2){transition-delay:.1s}
.sustainability-stats .stat-card:nth-child(3){transition-delay:.15s}
.sustainability-stats .stat-card:nth-child(4){transition-delay:.2s}
@media(max-width:639px){
  .sustainability-copy{padding-left:0}
}

@media(min-width:640px){
  .principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .in-out-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sustainability-grid{grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:1.5rem 3rem}
  .sustainability-copy{margin:0}
  .sustainability-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:960px){
  .principles-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-width:1100px}
  .principles-grid .principle-card{grid-column:span 2;justify-self:stretch}
  .principles-grid .principle-card:nth-child(4){grid-column:2 / span 2}
  .principles-grid .principle-card:nth-child(5){grid-column:4 / span 2}
  .process-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1200px}
  .process-card{min-height:360px}
}

/* Contact */
.contact-form{max-width:620px;margin:clamp(3rem,6vw,4rem) auto 0;padding:0 1.5rem}
.contact-form form{display:flex;flex-direction:column;gap:1rem;max-width:520px;margin:0 auto;background:rgba(18,18,20,.86);border:1px solid rgba(255,255,255,.08);border-radius:var(--card-radius);padding:2rem;box-shadow:0 20px 44px rgba(0,0,0,.28)}
.contact-form label{font-weight:600;color:var(--fossil-bone);letter-spacing:.02em}
.contact-form input,
.contact-form textarea{padding:.75rem;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.04);color:var(--fossil-bone);font-family:inherit}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:rgba(255,255,255,.5)}
.contact-form textarea{min-height:180px;resize:vertical}
.page-contact .newsletter.container{max-width:620px;padding:0 1.5rem;margin:clamp(3rem,6vw,4.5rem) auto}
.page-contact .contact-form .btn{align-self:center}

@media(max-width:599px){
  .contact-form form{padding:1.6rem}
}
.newsletter-section{margin:clamp(5rem, 8vw, 7rem) auto 0;padding:0 1.5rem;text-align:center}
.newsletter-section .newsletter-inner{position:relative;z-index:2;max-width:720px;margin:0 auto}
.newsletter-section .section-title{margin-bottom:1rem}
.newsletter-section .muted{margin-bottom:1.5rem;color:rgba(235,235,235,.75)}
.newsletter-section .newsletter-form{margin:0 auto}

/* Grid */
.teaser-grid .grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.05));padding:1rem;border:1px solid rgba(255,255,255,.02);border-radius:var(--card-radius);display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.teaser-grid .card .card-photo-slot{
  width:100%;
  aspect-ratio:16/10;
  border-radius:calc(var(--card-radius) - 4px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
  transition:transform .25s var(--motion-ease), filter .25s var(--motion-ease), border-color .25s var(--motion-ease);
}
.teaser-grid .card .card-photo-slot::after{
  content:" ";
  position:absolute;
  inset:0;
  background:linear-gradient(140deg,rgba(255,255,255,.16),transparent 55%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:2;
}
.teaser-grid .card .card-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity .35s var(--motion-ease), filter .35s var(--motion-ease);
  z-index:1;
}
.teaser-grid .card .card-photo--base{
  opacity:1;
  filter:brightness(.78);
}
.teaser-grid .card .card-photo--hover{
  opacity:0;
}
.teaser-grid .card:hover .card-photo-slot,
.teaser-grid .card:focus-within .card-photo-slot{
  transform:translateY(-3px);
  filter:brightness(1.08);
  border-color:rgba(255,255,255,.3);
}
.teaser-grid .card:hover .card-photo--base,
.teaser-grid .card:focus-within .card-photo--base{opacity:0}
.teaser-grid .card:hover .card-photo--hover,
.teaser-grid .card:focus-within .card-photo--hover{
  opacity:1;
  filter:brightness(1);
}
.muted{color:var(--steel-grey)}

/* Product layout */
.product-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.product-card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  padding:1rem;
  border:1px solid rgba(255,255,255,.03);
  border-radius:var(--card-radius);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  height:100%;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:box-shadow .3s var(--motion-ease), transform .3s var(--motion-ease);
  transform:translateY(0);
}
.product-card .product-media{
  position:relative;
  width:100%;
  height:240px;
  border-radius:var(--card-radius);
  overflow:hidden;
}
.product-card .product-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity .35s var(--motion-ease), filter .35s var(--motion-ease);
}
.product-card .product-photo--base{
  opacity:1;
  filter:brightness(.75);
}
.product-card .product-photo--hover{
  opacity:0;
}
.product-card:hover .product-photo--base,
.product-card:focus-within .product-photo--base{opacity:0}
.product-card:hover .product-photo--hover,
.product-card:focus-within .product-photo--hover{
  opacity:1;
  filter:brightness(1);
}
.product-card:hover,
.product-card:focus-within{
  box-shadow:0 18px 40px rgba(0,0,0,.38);
  transform:translateY(-3px);
}
.page-products .product-card .crude-button::after,
.page-products .subscribe .crude-button::after,
.page-products .newsletter .crude-button::after{
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform:none;
  opacity:0;
  background:linear-gradient(120deg, rgba(153,0,0,.65) 10%, rgba(204,30,30,.55) 45%, rgba(255,120,120,.5) 55%, rgba(153,0,0,.65) 90%);
  background-size:200% 140%;
  background-position:0% 50%;
  filter:none;
  animation:none;
  pointer-events:none;
  transition:opacity .28s var(--motion-ease);
}
.page-products .product-card .crude-button:hover::after,
.page-products .product-card .crude-button:focus-visible::after,
.page-products .subscribe .crude-button:hover::after,
.page-products .subscribe .crude-button:focus-visible::after,
.page-products .newsletter .crude-button:hover::after,
.page-products .newsletter .crude-button:focus-visible::after{
  opacity:1;
  animation:crudeSweep 1.4s ease-in-out infinite alternate;
}
.product-card h2{margin:0;font-family:"Space Grotesk",system-ui,sans-serif;font-size:1.35rem;letter-spacing:.5px}
.product-card .muted{margin:0;color:rgba(230,230,230,.82)}
.product-card .specs{list-style:none;padding:0;margin:.25rem 0 0 0;display:flex;flex-direction:column;gap:.35rem}
.actions{display:flex;gap:.5rem;margin-top:auto}

/* Footer */
.site-footer{background:linear-gradient(180deg,rgba(0,0,0,.6),var(--void-black));color:var(--fossil-bone);margin-top:3rem}
/* position footer so we can place a logo mark flush to the left edge */
.site-footer{position:relative}
.caution-stripe{
  /* Removed hazard stripe per request — keep element for structure but hide visually */
  display:none;
  height:0; /* fallback */
}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;padding:1.25rem}
.bottom-bar{padding:.75rem;text-align:center;border-top:1px solid rgba(255,255,255,.02);font-size:.9rem;color:var(--steel-grey)}

/* Footer typography: normalize sizes so all columns read consistently */
.site-footer{font-size:0.95rem}
.site-footer .footer-inner{align-items:start}
.site-footer .section-title{font-size:1.05rem;margin:0 0 .5rem;letter-spacing:0.02em}
.site-footer .logo{font-size:1.05rem;font-weight:700}
.site-footer .tagline{font-size:0.95rem;color:var(--steel-grey)}
.site-footer .contributors .gh-name{font-size:0.95rem}
.site-footer .newsletter .newsletter-row input{font-size:0.95rem}
.site-footer .newsletter .join-order{font-size:0.95rem}

/* Footer-specific subscribe button styling to match provided design */
.site-footer .join-order{
  padding:.75rem 1.25rem;
  border-radius:14px;
  font-size:1rem;
  font-weight:700;
  background:linear-gradient(90deg,var(--blood-red) 35%, var(--crude-brown) 100%);
  color:#fff;
  border:none;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  transition:transform .16s var(--motion-ease), box-shadow .16s var(--motion-ease), filter .16s var(--motion-ease);
}
.site-footer .join-order:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(0,0,0,.5);filter:brightness(1.02)}
.site-footer .join-order:active{transform:translateY(1px);box-shadow:0 8px 18px rgba(0,0,0,.38)}

/* On small screens make the button full-width to match design rhythm */
@media(max-width:699px){
  .site-footer .newsletter .join-order{width:100%;display:block}
}

/* Footer logo mark: place SVG inline with the wordmark and increase size on desktop */
.site-footer .logo{display:flex;align-items:center;gap:0}
.site-footer .footer-logo{width:80px;max-width:80px;height:auto;display:block;flex:0 0 auto;position:static;margin-right:0}
.site-footer .logo span{letter-spacing:1px;display:inline-block;margin:0;padding:0}

/* small screens: slightly smaller logo so it doesn't dominate the column */
@media(max-width:699px){
  .site-footer .footer-logo{width:36px;max-width:36px}
  .site-footer .logo span{margin-top:4px}
}

/* Move the footer logo mark to the very left of the footer (visual mockup)
   - absolutely position the existing image so it sits outside the normal column flow
   - add left padding to the inner container so columns don't overlap the logo
   - collapse back to normal flow on small screens */
.site-footer .footer-logo{position:static;left:auto;top:auto;width:80px;max-width:80px;z-index:auto}
.site-footer .footer-inner{padding-left:1.25rem}
@media(max-width:899px){
  /* slightly smaller logo on medium screens; keep inline flow */
  .site-footer .footer-logo{position:static;width:64px;max-width:64px}
  .site-footer .footer-inner{padding-left:1.25rem}
}
@media(max-width:699px){
  .site-footer .footer-logo{position:static;width:36px;margin-bottom:0}
  .site-footer .footer-inner{padding-left:0}
}
.newsletter-form{display:flex;gap:1rem;max-width:480px;margin:1.5rem auto 0}
.newsletter-form input{flex:1;padding:.75rem;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--fossil-bone);font-family:inherit}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5)}

@media(max-width:699px){
  .newsletter-form{flex-direction:column;width:100%}
  .newsletter-form .crude-button{width:100%}
}

/* Contributors (GitHub links) */
.contributors{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.github-link{display:flex;align-items:center;gap:.6rem;color:var(--fossil-bone);text-decoration:none;padding:.25rem 0}
.github-link svg{flex:0 0 20px;color:var(--steel-grey);transition:color .18s var(--motion-ease)}
.github-link .gh-name{transition:color .18s var(--motion-ease)}
/* hover: make github mark and name red */
.github-link:hover svg,
.github-link:focus svg{color:var(--blood-red)}
.github-link:hover .gh-name,
.github-link:focus .gh-name{color:var(--blood-red)}
.github-link .gh-name{font-weight:600;color:var(--fossil-bone);font-size:0.95rem}

/* Newsletter improvements */
.newsletter{width:100%}
.newsletter-row{display:flex;gap:.5rem;align-items:center}
.newsletter input{flex:1;padding:.6rem;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--fossil-bone)}
.newsletter input::placeholder{color:rgba(255,255,255,.45)}
.newsletter .join-order{white-space:nowrap;padding:.6rem .8rem;border-radius:6px;background:var(--hazard-yellow);color:var(--void-black);border:none}
.newsletter .join-order:hover{filter:brightness(.95)}

/* Footer Subscribe refinement: match the prominent red gradient CTA used site-wide */
.newsletter .join-order{
  padding: .7rem 1.1rem;
  border-radius:10px;
  font-size:1.05rem;
  font-weight:600;
  background:linear-gradient(90deg,var(--blood-red), var(--crude-brown));
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  transition: transform .18s var(--motion-ease), box-shadow .18s var(--motion-ease), filter .18s var(--motion-ease);
}
.newsletter .join-order:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(0,0,0,.42)}
.newsletter .join-order:hover{filter:brightness(.98)}

/* Stack newsletter on small screens */
@media(max-width:699px){
  .footer-inner{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem 1rem}
  .newsletter-row{flex-direction:column;align-items:stretch;gap:0.75rem}
  .newsletter .join-order{width:100%;padding:0.8rem 1rem;font-size:1rem}
  
  /* Ensure footer logo and content stack nicely */
  .site-footer .logo{justify-content:center;text-align:center;margin-bottom:0.5rem}
  .site-footer .footer-logo{width:48px;max-width:48px}
  .site-footer .tagline{text-align:center;margin-bottom:1rem}
  
  /* Center contributors section */
  .contributors{align-items:center;text-align:center}
  
  /* Newsletter section improvements */
  .site-footer .col:last-child{text-align:center}
  .site-footer .section-title{text-align:center;margin-bottom:0.75rem}
  .site-footer .muted{text-align:center;margin-bottom:1rem}
}

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* Mobile first responsive adjustments */
@media(min-width:700px){
  .nav-toggle{display:none}
  .site-nav{display:flex}
  .teaser-grid .grid{grid-template-columns:repeat(3,1fr)}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr 1fr}
}

@media(max-width:699px){
  .nav-toggle{display:block}
  /* mobile: collapsed nav with smooth transition; JS toggles .site-header.open to open it */
  .site-nav{display:flex}
  .site-header{position:relative;z-index:60}
  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:linear-gradient(180deg, rgba(10,10,10,0.95), rgba(20,20,20,0.95));
    padding:0.75rem 1rem;
    /* collapsed state */
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-6px);
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    border-top:1px solid rgba(255,255,255,0.03);
    /* ensure the dropdown sits above hero overlays on pages with hero layers */
    z-index:75;
    pointer-events:none;
    transition: max-height .34s var(--motion-ease), opacity .28s var(--motion-ease), transform .28s var(--motion-ease);
  }
  /* open state */
  .site-header.open .site-nav{
    max-height:420px; /* roomy enough for nav links */
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .site-nav a{padding:.75rem 0;position:relative;z-index:80}
}

/* Small visual flourishes */
.hero{background-size:cover;background-position:center}
.timeline ol{color:var(--steel-grey);}

/* Visual polish overrides */
img{max-width:100%;height:auto;display:block}
.hero{
  /* Hero must fill the viewport and center content both axes (duplicate block normalized)
     Keep the homepage decorative background via .page-root .hero-deco elements instead of
     embedding imagery here so video/background layers behave consistently. */
  height:100vh;
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  position:relative;
  overflow:hidden;
  background-color:var(--void-black);
  background-size:cover;
  background-position:center;
}

/* Decorative hero textures for homepage only */
.page-root .hero-deco{position:absolute;pointer-events:none;z-index:1;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.12;mix-blend-mode:multiply}
.page-root .hero-deco.hero-ring{left:4%;top:6%;width:320px;height:320px;background-image:url('../assets/coffee-ring1.svg');transform:rotate(-10deg)}
.page-root .hero-deco.hero-splatter{right:3%;bottom:-32px;width:420px;height:420px;background-image:url('../assets/coffee-splatter1.svg');transform:rotate(6deg);opacity:.085}

/* Reduce intensity on small screens so textures don't overwhelm content */
@media(max-width:699px){
  .page-root .hero-deco.hero-ring{width:160px;height:160px;left:6%;top:8%;opacity:.07}
  .page-root .hero-deco.hero-splatter{width:220px;height:220px;right:6%;bottom:-18px;opacity:.06}
}

/* Homepage: apply secondary palette accents */
.page-root a:hover{color:var(--oxidized-teal)}

/* Make small CTAs use crude brown to blood red gradient on homepage (Teaser card CTAs) */
.page-root .btn.small{
  background:linear-gradient(90deg, #8b4513, #990000); /* crude brown to blood red */
  border-color:transparent;
  color:#fff;
}
.page-root .btn.small:hover{
  filter:brightness(1.05);
  color:#fff;
  border-color:transparent;
}
.page-root main .btn.small,
.page-root main .crude-button{
  position:relative;
  transition:transform .28s var(--motion-ease), box-shadow .28s var(--motion-ease), filter .28s var(--motion-ease);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.page-root main .btn.small::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(120deg, rgba(153,0,0,.65) 10%, rgba(204,30,30,.55) 45%, rgba(255,120,120,.5) 55%, rgba(153,0,0,.65) 90%);
  background-size:200% 140%;
  background-position:0% 50%;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s var(--motion-ease);
}
.page-root main .btn.small:hover::after,
.page-root main .btn.small:focus-visible::after{
  opacity:1;
  animation:crudeSweep 1.4s ease-in-out infinite alternate;
}
.page-root main .crude-button::after{
  display:none;
}
.page-root main .btn.small:hover,
.page-root main .btn.small:focus-visible{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 16px 32px rgba(0,0,0,.32);
}
.page-root .hero .crude-button,
.page-root .subscribe .crude-button{
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:transform .32s var(--motion-ease), box-shadow .32s var(--motion-ease), filter .32s var(--motion-ease);
}
.page-root .hero .crude-button:hover,
.page-root .hero .crude-button:focus-visible,
.page-root .subscribe .crude-button:hover,
.page-root .subscribe .crude-button:focus-visible{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 26px 46px rgba(0,0,0,.38);
}

.page-vision .newsletter-form .crude-button{
  position:relative;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:transform .32s var(--motion-ease), box-shadow .32s var(--motion-ease), filter .32s var(--motion-ease);
}
.page-vision .newsletter-form .crude-button::after{
  display:none;
}
.page-vision .newsletter-form .crude-button:hover,
.page-vision .newsletter-form .crude-button:focus-visible{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 26px 46px rgba(0,0,0,.38);
}

.page-contact .contact-hero .crude-button,
.page-contact .contact-form .crude-button,
.page-contact .newsletter .crude-button{
  position:relative;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:transform .32s var(--motion-ease), box-shadow .32s var(--motion-ease), filter .32s var(--motion-ease);
}
.page-contact .contact-hero .crude-button::after,
.page-contact .contact-form .crude-button::after,
.page-contact .newsletter .crude-button::after{
  display:none;
}
.page-contact .contact-hero .crude-button:hover,
.page-contact .contact-hero .crude-button:focus-visible,
.page-contact .contact-form .crude-button:hover,
.page-contact .contact-form .crude-button:focus-visible,
.page-contact .newsletter .crude-button:hover,
.page-contact .newsletter .crude-button:focus-visible{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 26px 46px rgba(0,0,0,.38);
}

/* Subscribe/hero CTA on homepage: use the red-brown default but switch to black on hover for legibility */
.page-root .crude-button{background:linear-gradient(90deg,var(--blood-red),var(--crude-brown));color:#fff}
.page-root .crude-button:hover{
  color:#fff;
  border-color:transparent;
  filter:brightness(1.05);
}

/* Teaser cards get a subtle teal accent on the left to tie the palette together */
.page-root .teaser-grid .card{border-left:4px solid transparent}
.page-root .teaser-grid .card:hover{border-left-color:var(--oxidized-teal)}

/* Process card headings pick up a teal tone to break up the warm palette */
.page-root .process-card__inner h3{color:var(--oxidized-teal)}

/* Newsletter join button in footer on homepage (if visible) uses teal accent */
.page-root .newsletter .join-order{background:linear-gradient(90deg,var(--oxidized-teal),var(--hazard-yellow));color:var(--void-black)}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .2s ease, box-shadow .2s ease}
.product-card:hover{background-image:none}
.crude-button{position:relative;overflow:hidden}
.crude-button::after{content:"";position:absolute;left:50%;top:-100%;width:8px;height:140%;background:var(--blood-red);filter:blur(0.5px);transform:translateX(-50%);opacity:.35}
.crude-button:hover::after{animation:drip 1.4s ease forwards}
@keyframes drip{0%{top:-100%;opacity:.35}60%{top:60%;opacity:.5}100%{top:110%;opacity:0}}

/* Ensure buttons (and button-like elements) never show underlines */
.btn, .btn.small, button{ text-decoration: none; }

/* Reveal animation */
.reveal{opacity:0;transform:translate3d(0,10px,0);transition:opacity var(--motion-time) var(--motion-ease), transform var(--motion-time) var(--motion-ease);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}

/* Smooth scrolling when user hasn't requested reduced motion */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

.hero-video{
  /* simpler, more reliable cover pattern:
     - fill the container via inset:0 and width/height:100%
     - rely on object-fit:cover for consistent cropping across browsers
  */
  position:absolute;
  inset:0; /* top:0; right:0; bottom:0; left:0 */
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 2.4s var(--motion-ease);
  max-width:none;
}
.hero-video--a{opacity:1}
.hero-video--vision.hero-video--a{opacity:.42;filter:grayscale(.08) contrast(1.08) brightness(1.08)}
.hero-video--contact.hero-video--a{opacity:.82;filter:grayscale(.04) contrast(1.07) brightness(1.1)}
.hero-inner{position:relative;z-index:5}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.55));z-index:2}

/* Testimonials styling for products page — bold, compact, branded */
.testimonials{
  /* rely on .container for horizontal padding so this section aligns with others */
  padding:2.25rem 0;
  margin:2rem 0;
  border-top:1px solid rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(255,255,255,0.03);
  background:linear-gradient(180deg, rgba(18,18,20,0.6), rgba(12,12,12,0.6));
}
.testimonial-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  max-width:1100px;
  margin:0 auto;
  box-sizing:border-box;
  padding:0 0;
}
.testimonial{
  background:rgba(0,0,0,0.25);
  padding:1.25rem;
  border:1px solid var(--blood-red);
  border-radius:var(--card-radius);
  box-shadow:0 8px 18px rgba(0,0,0,0.2);
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition: box-shadow .3s var(--motion-ease);
}
.testimonial:hover {
    box-shadow: 0 8px 18px rgba(153, 0, 0, 0.38);
}
.testimonial-quote{font-family:Montserrat,system-ui,Arial,sans-serif;font-weight:600;color:var(--fossil-bone);margin:0 0 .5rem;font-size:1.05rem}
.testimonial-author{display:block;color:var(--hazard-yellow);font-weight:700;letter-spacing:.06em}
@media(min-width:700px){
  .testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 0}
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
.newsletter.container{text-align:center;margin:2.5rem auto}
.newsletter.container .section-title{margin-bottom:1rem}
.newsletter.container .muted{margin-bottom:1.25rem}

/* Small-screen layout fixes: tighten spacing and ensure content stacks nicely */
@media (max-width:699px){
  /* give the site some breathing room on tiny screens */
  .container{padding:0 1rem}

  /* hero should be shorter and less padded on phones */
  .hero{padding:2.5rem 0;min-height:56vh}
  .hero-inner{padding:0 0.25rem}
  .hero-title{font-size:clamp(1.8rem,6.5vw,2.6rem)}

  /* Defensive: prevent horizontal overflow on small devices which can
     push centered content to the right. Also disable transform-based
     parallax on small screens to avoid unexpected persistent translations. */
  html, body { overflow-x: hidden; }
  .hero-inner { transform: none !important; }

  /* Reduce vision/contact specific hero padding on small screens so
     content isn't pushed off-center or cut off. These heroes had large
     desktop paddings (6rem) which are too big for phones. */
  .vision-hero, .contact-hero, .fossil-hero {
    padding: 2.5rem 0;
    min-height: 56vh;
  }
  .vision-hero .hero-inner, .contact-hero .hero-inner, .fossil-hero .hero-inner {
    max-width: 92%;
    padding: 0 0.5rem;
  }

  /* manifesto and long copy should not be constrained by a wide line-length */
  .manifesto-copy{max-width:none;padding-right:0}

  /* slightly reduce nav/header padding on very small viewports */
  .nav-inner{padding:.5rem .75rem}

  /* tighten card/grid spacing */
  .teaser-grid .grid{gap:.75rem}
  .card{padding:.85rem}
}

/* ======================================================================
   Footer: global normalization
   Ensure the footer uses a single, consistent style and that any
   "join-order" / subscribe button inside the footer always uses the
   red gradient CTA styling (overrides homepage-local variants).
   ====================================================================== */
.site-footer .join-order,
.site-footer .newsletter .join-order,
.site-footer .newsletter-row .join-order,
.site-footer .newsletter-form .join-order{
  /* strong specificity + placed at end of file ensures this wins */
  padding: .7rem 1.1rem;
  border-radius:12px;
  font-size:1.05rem;
  font-weight:700;
  background:linear-gradient(90deg,var(--blood-red) 20%, var(--crude-brown) 100%);
  color:#fff;
  border:none;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  transition:transform .16s var(--motion-ease), box-shadow .16s var(--motion-ease), filter .16s var(--motion-ease);
}
.site-footer .join-order:hover,
.site-footer .newsletter .join-order:hover,
.site-footer .newsletter-row .join-order:hover,
.site-footer .newsletter-form .join-order:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,0,0,.5);
  filter:brightness(1.02);
}
.site-footer .join-order:active,
.site-footer .newsletter .join-order:active,
.site-footer .newsletter-row .join-order:active,
.site-footer .newsletter-form .join-order:active{
  transform:translateY(1px);
  box-shadow:0 8px 18px rgba(0,0,0,.38);
}

/* Ensure header stays sticky on all viewports and sits above content */
.site-header{position:sticky !important;top:0;z-index:9999}

/* Cart dropdown styles (Burning Brew theme) */
#cart-dropdown{position:absolute;right:1rem;top:100%;width:320px;max-width: calc(100% - 2rem);background:#1a1a1c;color:var(--fossil-bone);border:1px solid var(--hazard-yellow);border-color:var(--hazard-yellow);box-shadow:0 18px 48px rgba(0,0,0,.6);padding:0.5rem;border-radius:8px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .22s var(--motion-ease),transform .24s var(--motion-ease);z-index:120}
.cart-dropdown.open{opacity:1;transform:none;pointer-events:auto;animation:dropdownOpen .26s cubic-bezier(.2,.9,.25,1)}
.cart-dropdown.hidden{display:block} /* visibility controlled by classes */
.cart-header{padding:.6rem .6rem .25rem .6rem;border-bottom:1px solid rgba(74,124,124,0.08);font-weight:700}
.cart-header .cart-sub{font-size:.85rem;color:var(--steel-grey);font-weight:400}
.cart-items{max-height:240px;overflow:auto;padding:.5rem}
.cart-empty{padding:.75rem;color:var(--steel-grey)}
.cart-row{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;border-bottom:1px solid rgba(74,124,124,0.06)}
.cart-row-left{display:flex;flex-direction:column}
.cart-item-name{font-weight:700;color:var(--fossil-bone);margin-bottom:.35rem}
.cart-controls{display:flex;gap:.4rem;align-items:center}
.qty-btn{background:transparent;color:var(--fossil-bone);border:1px solid rgba(255,255,255,0.04);padding:.2rem .5rem;border-radius:6px;cursor:pointer}
.qty-btn:focus{outline:3px dashed var(--hazard-yellow);outline-offset:2px}
.cart-row-right{font-weight:700;color:var(--fossil-bone)}
.cart-footer{padding:.6rem;border-top:1px solid rgba(74,124,124,0.06);display:flex;flex-direction:column;gap:.5rem}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.checkout-btn{background:var(--blood-red);color:white;border:0;padding:.75rem;border-radius:6px;font-weight:700;text-transform:uppercase;cursor:pointer}
.checkout-btn:hover{filter:brightness(.95)}

/* pulse animation for Burn Deeper button */
.pulse{animation:burnPulse .26s ease-out}
@keyframes burnPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

/* dropdown open animation */
@keyframes dropdownOpen{0%{transform:translateY(-10px);opacity:0}80%{transform:translateY(2px);opacity:1}100%{transform:translateY(0)} }

/* toast */
.cart-toast{position:fixed;right:1rem;bottom:1.1rem;background:rgba(20,20,20,0.95);color:var(--fossil-bone);padding:.6rem .9rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);opacity:0;transform:translateY(6px);transition:all .26s ease;z-index:9999}
.cart-toast.visible{opacity:1;transform:none}

/* mobile controls container for cart and nav toggle */
.mobile-controls {
  display: none;
}

@media(max-width:699px){
  .mobile-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  /* hide the desktop cart icon when mobile controls are shown */
  #cart-icon { display: none; }
  /* ensure mobile cart icon and toggle align vertically */
  .mobile-controls .cart-btn, .mobile-controls .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}