/* ===== Design tokens ===== */
:root{
  --bg: #ffffff;
  --bg-alt: #f6f4f1;
  --ink: #141311;
  --ink-soft: #6c6862;
  --line: rgba(20,19,17,.10);
  --accent: #b07d3f;
  --accent-dark: #8a5f2c;
  --radius: 20px;
  --font: 'Heebo', 'Segoe UI', Arial, sans-serif;
  --topbar-h: 83px;
  --stack-hold: 30vh;
  --stack-hold-ratio: .65;
  color-scheme: light;
}

*{ box-sizing: border-box; }
/* scroll-padding-top keeps every #anchor jump (menu links, "המוצרים שלנו",
   "לכל המערכות ←"...) from landing its target flush at the very top of the
   viewport, where the sticky topbar would otherwise cover it. */
html{ scroll-behavior: smooth; scroll-padding-top: var(--topbar-h); }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

.eyebrow{
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent-dark);
  margin: 0 0 14px;
}
.eyebrow.light{ color: rgba(255,255,255,.75); }
.eyebrow.center{ text-align: center; }

.section-title{
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 18px;
}
.section-title.center{ text-align: center; margin-inline: auto; }

/* ===== Scroll reveal ===== */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* ===== Top bar ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(16px, 4vw, 56px);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}

/* Each slot sticks just below the header and holds there for --stack-hold
   of extra scroll distance (padding-bottom, invisible off-screen) before
   the next slot (later in source order, so it paints on top) arrives and
   covers it — a deliberate, slower Apple/Stripe-style stacking-scroll.
   The slot (not the section) carries the sticky position, z-index and an
   opaque background matching its section, so the hold never exposes a gap
   to whatever is stacked underneath.

   Slots are direct children of .sticky-stack on purpose (not each wrapped
   in its own individually-sized container): a sticky element only has
   "room" to actually stick for as long as its containing block is taller
   than itself, and .sticky-stack (all six slots stacked end to end) is
   what supplies that room here. An extra per-slot wrapper was tried for a
   scroll-snap experiment and removed — sized to match its single child
   exactly, it left zero slack, so the slots quietly stopped sticking at
   all and just scrolled past like normal content. */
.sticky-stack{ position: relative; }
.stack-slot{
  position: sticky;
  top: var(--topbar-h);
  padding-bottom: var(--stack-hold); /* fallback until script.js measures each section and sets its own */
}
.sticky-stack > .stack-slot:nth-child(1){ z-index: 1; }
.sticky-stack > .stack-slot:nth-child(2){ z-index: 2; }
.sticky-stack > .stack-slot:nth-child(3){ z-index: 3; }
.sticky-stack > .stack-slot:nth-child(4){ z-index: 4; }
.sticky-stack > .stack-slot:nth-child(5){ z-index: 5; }
.sticky-stack > .stack-slot:nth-child(6){ z-index: 6; }

/* A slot whose content is taller than the viewport can't be pinned: while
   stuck it would freeze on its top slice and permanently hide whatever
   falls below the fold (e.g. the products grid on shorter screens).
   script.js measures every slot on load/resize and adds this class when
   that's the case, so it scrolls through normally instead — position:
   relative (not static) so it keeps a stacking context and still visually
   covers the previous slot as it scrolls over it; top is reset so it isn't
   also pushed down by the sticky slot's own top offset. */
.stack-slot--free{
  position: relative;
  top: auto;
  padding-bottom: 0;
}

/* Fallback shown whenever .hero-video is hidden (reduced motion, the
   "stop animations" a11y toggle, or before the video loads) — covers the
   whole slot, same as the video itself, so the fallback doesn't leave the
   hold strip below the hero a flat, mismatched color. */
.stack-slot--hero{
  overflow: hidden;
  background:
    linear-gradient(rgba(15,13,11,.55), rgba(15,13,11,.55)),
    url("../assets/images/hero-bg.jpg") center 65% / cover,
    #141311;
}
.stack-slot--features{ background: var(--bg); }
/* The image sits on the SLOT (not the .about section itself) for the
   same reason the hero video does — the slot is taller than its section
   by the scroll-hold padding-bottom, and a background confined to the
   section's own box would leave that strip a flat, mismatched color. */
.stack-slot--about{ background: url("../assets/images/section-bg2.jpg") center / cover, var(--bg); }
.stack-slot--process{ background: var(--bg-alt); }
.stack-slot--cta{ background: linear-gradient(160deg, #1b1815 0%, #141311 60%, #0d0c0a 100%); }
/* Same reasoning as .stack-slot--about: the image sits on the SLOT, not
   .faq itself, so it also covers the slot's scroll-hold padding-bottom
   instead of leaving that strip a flat, mismatched color. */
.stack-slot--faq{ background: url("../assets/images/section-bg5.jpg") calc(50% + 2cm) center / cover, var(--bg); }

/* Both flat-lay photos have their objects clustered near the left/right
   edges with an empty middle. On a narrow, very tall slot (mobile) "cover"
   crops down to a thin center strip, landing right on that empty gap —
   shift the crop toward the right-hand cluster so something is actually
   visible instead of a blank field. */
@media (max-width: 720px){
  .stack-slot--about{ background-position: 80% center, 0 0; }
  .stack-slot--faq{ background-position: calc(78% + 2cm) center, 0 0; }
}

@media (prefers-reduced-motion: reduce){
  .stack-slot{ position: static; padding-bottom: 0; }
}
html.a11y-stopanim .stack-slot{ position: static; padding-bottom: 0; }

.brand-mark{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .22em;
}
.topbar-brand{
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.4;
}
.brand-tagline{
  display: block;
  font-size: .4em;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--ink-soft);
}
.footer-brand .brand-tagline{ color: rgba(255,255,255,.55); margin-top: 4px; }

.hamburger{
  width: 40px; height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.hamburger span{
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.cta-mini{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.cta-mini svg{ flex: none; }
.cta-mini:hover{ background: var(--ink); color: #fff; }

/* ===== Full screen menu ===== */
.full-menu{
  position: fixed; inset: 0;
  background: #ffffff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vh, 40px);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s cubic-bezier(.65,0,.35,1), opacity .3s ease, visibility 0s linear .45s;
}
.full-menu.open{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .45s cubic-bezier(.65,0,.35,1), opacity .3s ease, visibility 0s;
}
.menu-brand{
  position: absolute;
  top: 24px;
  font-size: 1rem;
}
.menu-close{
  position: absolute;
  top: 20px; left: 24px;
  width: 40px; height: 40px;
  border: none; background: none;
  font-size: 1.3rem; cursor: pointer;
  color: var(--ink);
}
.menu-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 3.4vh, 26px);
}
.menu-link{
  font-size: clamp(1.5rem, 4.6vw, 2.3rem);
  font-weight: 600;
  transition: opacity .2s ease, letter-spacing .2s ease;
}
.menu-link:hover{ opacity: .5; letter-spacing: .03em; }
.menu-footer{ position: absolute; bottom: 28px; }

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .95rem;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid{ background: var(--ink); color: #fff; }
.btn-solid:hover{ transform: translateY(-2px); background: #000; }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: #fff; }

.btn.light{ border-color: #fff; }
.btn-solid.light{ background: #fff; color: var(--ink); }
.btn-solid.light:hover{ background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-ghost.light{ color: #fff; }
.btn-ghost.light:hover{ background: #fff; color: var(--ink); }

.card-link{
  display: inline-block;
  font-weight: 600;
  font-size: .92rem;
  color: var(--accent-dark);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
  /* Also used on <button> triggers (product modal) alongside <a> — reset
     button chrome so both render identically. */
  background: none;
  border-top: none; border-inline: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.card-link:hover{ border-color: var(--accent-dark); }

/* ===== Hero ===== */
.hero{
  position: relative;
  z-index: 2;
  min-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14vh 20px 10vh;
  color: #fff;
}
/* .hero-video/.hero-overlay are siblings of <section class="hero">, both
   direct children of .stack-slot--hero, sized to the SLOT rather than the
   section — the slot is taller than the section by its own scroll-hold
   padding-bottom (see applyProportionalHold in script.js), and a video
   confined to the section's own box would leave that extra hold strip
   uncovered: a flat-colored bar visible right under the hero for however
   long the hold lasts, before the next slot scrolls up to cover it. */
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  z-index: 0;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 25% 20%, rgba(176,125,63,.3), transparent 55%),
    linear-gradient(160deg, rgba(20,17,14,.6) 0%, rgba(13,12,10,.68) 65%, rgba(13,12,10,.82) 100%);
}
.hero-inner{ max-width: 720px; }

@media (prefers-reduced-motion: reduce){
  .hero-video{ display: none; }
}
html.a11y-stopanim .hero-video{ display: none; }
.hero-title{
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 22px;
}
.hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255,255,255,.72);
  max-width: 520px;
  margin: 0 auto 36px;
}
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ===== Features strip ===== */
.features{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.feature{
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 12px;
  padding: 44px 22px;
  text-align: center;
}
.feature-icon{
  width: 52px; height: 52px;
  color: var(--accent-dark);
}
.feature-icon svg{ width: 100%; height: 100%; }
.feature-label{ font-size: .98rem; font-weight: 700; }
.feature-desc{ font-size: .84rem; color: var(--ink-soft); max-width: 200px; }

@media (max-width: 720px){
  .features{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Products ===== */
.products{
  padding: 100px 20px;
}
.product-grid{
  max-width: 1200px;
  margin: 48px auto 0;
  display: grid;
  /* min(300px, 100%) instead of a bare 300px — on screens narrower than
     ~340px a rigid 300px minimum forces the track wider than its own
     container, bleeding the card past its side padding. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px;
}
.product-card{
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 40px rgba(20,19,17,.10);
}
.product-thumb{
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  padding: 36px;
  height: 280px;
}
.product-thumb img{
  max-width: 100%; max-height: 220px; object-fit: contain;
}
.product-body{ padding: 28px 26px 32px; display: flex; flex-direction: column; gap: 8px; }
.product-eyebrow{ font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--accent-dark); }
.product-title{
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 4px;
  min-height: calc(1.35em * 2);
  display: flex;
  align-items: flex-start;
}
.product-desc{ font-size: .92rem; color: var(--ink-soft); margin: 0 0 6px; }
.sku-row{
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 12px;
  font-size: .82rem;
  color: var(--ink-soft);
}
.sku{ display: inline-flex; align-items: center; gap: 7px; }
.swatch{
  width: 13px; height: 13px; border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--line);
}
.swatch-black{ background: #141414; }
.swatch-white{ background: #ffffff; }

/* ===== Product detail modal ===== */
.product-modal{
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.product-modal.open{
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}
.product-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,.5);
}
.product-modal-panel{
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  max-width: 880px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  transform: translateY(20px) scale(.98);
  transition: transform .3s ease;
}
.product-modal.open .product-modal-panel{ transform: translateY(0) scale(1); }
.product-modal-close{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.product-modal-close:hover{ background: var(--bg-alt); }
.product-modal-media{
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  min-height: 280px;
}
.product-modal-media img{ max-width: 100%; max-height: 340px; object-fit: contain; }
.product-modal-body{
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-modal-title{
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 4px 0 18px;
}
/* The emphasis this modal exists for: how much space the unit is built to
   cover, called out as its own highlighted stat rather than left buried
   inside the description paragraph. */
.product-modal-coverage{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.coverage-icon{
  width: 34px; height: 34px;
  color: var(--accent-dark);
  flex: none;
}
.coverage-icon svg{ width: 100%; height: 100%; }
.coverage-label{ display: block; font-size: .78rem; color: var(--ink-soft); }
.coverage-value{ display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.product-modal-desc{ color: var(--ink-soft); font-size: .96rem; margin: 0 0 18px; }
.product-modal-body .sku-row{ margin-bottom: 24px; }
.product-modal-body .btn{ align-self: flex-start; }

@media (max-width: 720px){
  .product-modal-panel{ grid-template-columns: 1fr; }
  .product-modal-media{ min-height: 220px; padding: 28px; }
  .product-modal-body .btn{ align-self: stretch; }
}

/* ===== About ===== */
.about{ padding: 100px 20px; }
.about-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* Was .8fr 1fr — the media column has to actually be wide enough for
     the larger (1.5x) image to reach its max-width, not just capped by
     the column itself regardless of what max-width says. */
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.about-media{ display: flex; align-items: center; justify-content: center; }
.about-media img{
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 570px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(20,19,17,.35);
}
/* Explicit centering instead of relying on .about-inner's align-items —
   that only centers .about-text as a whole box within the (now taller)
   row, and its own content still packs to the top of that box, reading
   as anchored to the top of the section rather than centered against the
   image beside it. */
.about-text{ display: flex; flex-direction: column; justify-content: center; }
.about-body{ color: var(--ink-soft); font-size: 1rem; max-width: 52ch; margin: 0 0 26px; }

@media (max-width: 820px){
  .about-inner{ grid-template-columns: 1fr; text-align: center; }
  .about-body{ margin-inline: auto; }
}

/* ===== Process ===== */
.process{ padding: 100px 20px; }
.process-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 56px;
  align-items: center;
}
.process-media{ display: flex; align-items: center; justify-content: center; }
/* Order-modified placement instead of reordering the markup — the image
   stays source-first (so mobile's single-column stack keeps showing it
   before the steps, and it isn't lost in a no-CSS fallback), but on the
   two-column desktop layout it sits on the left, opposite the About
   section's media, so the two "media + copy" sections don't read as
   identical. */
@media (min-width: 821px){
  .process-media{ order: 2; }
  .process-copy{ order: 1; }
}
.process-media img{
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(20,19,17,.25);
}
.process-steps{
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.process-step{
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.process-step:last-child{ padding-bottom: 0; }
.step-num{
  flex: none;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-dark);
  min-width: 2ch;
}
.step-title{ font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.step-desc{ color: var(--ink-soft); font-size: .92rem; margin: 0; max-width: 56ch; }

@media (max-width: 820px){
  .process-inner{ grid-template-columns: 1fr; text-align: center; }
  .process-step{ text-align: right; }
}
@media (max-width: 480px){
  .process-step{ gap: 14px; }
}

/* ===== CTA band ===== */
.cta-band{
  padding: 110px 20px;
  color: #fff;
}
.cta-inner{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.cta-copy{ text-align: right; }
.cta-title{
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px;
}
.cta-sub{ color: rgba(255,255,255,.68); max-width: 420px; margin: 0 0 32px; }

@media (max-width: 860px){
  .cta-inner{ grid-template-columns: 1fr; }
  .cta-copy{ text-align: center; }
  .cta-sub{ margin-inline: auto; }
}

/* Lead form — a plain white card, so it reads as a clean, native form
   rather than translucent fields floating on the dark gradient. */
.lead-form{
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 36px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}
.lead-form-title{
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 20px;
}
.lead-field{ margin-bottom: 16px; }
.lead-field label{
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.lead-optional{ font-weight: 400; color: var(--ink-soft); }
.lead-field input,
.lead-field select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--ink);
  font-family: var(--font);
  font-size: .92rem;
  transition: border-color .15s ease, background .15s ease;
}
.lead-field input::placeholder{ color: #a19c93; }
.lead-field input:focus,
.lead-field select:focus{
  outline: none;
  border-color: var(--accent-dark);
  background: #fff;
}
.lead-honeypot{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.lead-submit{
  width: 100%;
  margin-top: 6px;
  position: relative;
}
.lead-submit:disabled{ opacity: .7; cursor: default; transform: none; }
.lead-submit.loading .lead-submit-label{ visibility: hidden; }
.lead-submit.loading::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lead-spin .7s linear infinite;
}
@keyframes lead-spin{ to{ transform: rotate(360deg); } }
.lead-status{
  font-size: .85rem;
  margin: 14px 0 0;
  min-height: 1.2em;
  text-align: center;
}
.lead-status.success{ color: #2f7d46; }
.lead-status.error{ color: #a33; }

/* ===== FAQ ===== */
.faq{ padding: 100px 20px; }
.faq-inner{ max-width: 800px; margin: 0 auto; }
.faq-list{ margin-top: 40px; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  text-align: right;
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  padding: 24px 2px;
  cursor: pointer;
}
.faq-icon{
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--accent-dark);
  transition: transform .25s ease;
}
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-a p{ margin: 0 0 22px; color: var(--ink-soft); font-size: .95rem; max-width: 62ch; }

/* ===== Footer ===== */
.site-footer{
  padding: 70px 20px 30px;
  background: var(--ink);
  color: #fff;
}
.footer-top{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand .brand-mark{ color: #fff; }
.footer-tagline{ color: rgba(255,255,255,.55); font-size: .9rem; margin-top: 10px; }
.footer-nav{ display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.footer-col-title{ font-weight: 700; margin-bottom: 6px; font-size: .9rem; }
.footer-nav a{ color: rgba(255,255,255,.65); font-size: .9rem; transition: color .2s ease; }
.footer-nav a:hover{ color: #fff; }
.footer-cookie-link{
  background: none;
  border: none;
  padding: 0;
  color: rgba(255,255,255,.45);
  font-size: .8rem;
  font-family: var(--font);
  text-decoration: underline;
  cursor: pointer;
}
.footer-cookie-link:hover{ color: #fff; }
.footer-bottom{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  padding-top: 26px;
  font-size: .8rem;
  color: rgba(255,255,255,.45);
}

/* ===== Accessibility widget ===== */
.a11y-toggle{
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
  transition: transform .2s ease;
}
.a11y-toggle:hover{ transform: scale(1.06); }

.a11y-panel{
  position: fixed;
  bottom: 92px;
  inset-inline-start: 24px;
  width: min(300px, 82vw);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  z-index: 95;
  overflow: hidden;
  transform: translateY(12px) scale(.97);
  opacity: 0;
  visibility: hidden;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
.a11y-panel.open{
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform .2s ease, opacity .2s ease, visibility 0s;
}
.a11y-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--ink);
  color: #fff;
}
.a11y-title{ font-weight: 700; letter-spacing: .04em; }
.a11y-close{ background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; }
.a11y-body{ padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.a11y-btn{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  text-align: right;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fafafa;
  font-family: var(--font);
  font-size: .88rem;
  cursor: pointer;
  color: var(--ink);
}
.a11y-btn:hover{ background: #f0f0f0; }
.a11y-btn.active{ background: var(--ink); color: #fff; border-color: var(--ink); }
.a11y-btn.reset{ color: #a33; border-color: rgba(170,51,51,.3); }
.a11y-foot{ padding: 12px 18px 18px; font-size: .78rem; text-align: center; }
.a11y-foot a{ text-decoration: underline; color: var(--ink-soft); }

/* ===== Accessibility state effects (applied to <html>) ===== */
html.a11y-contrast body{ background: #000; color: #fff; }
html.a11y-contrast .product-card,
html.a11y-contrast .full-menu,
html.a11y-contrast .a11y-panel{ background: #000; color: #fff; border: 1px solid #fff; }
html.a11y-contrast .product-thumb{ background: #111; }
html.a11y-contrast .topbar{ background: #000; border-color: #fff; }
html.a11y-contrast .btn-solid{ background: #fff; color: #000; border-color: #fff; }
html.a11y-contrast .product-desc,
html.a11y-contrast .hero-sub,
html.a11y-contrast .cta-sub,
html.a11y-contrast .feature-desc,
html.a11y-contrast .footer-tagline,
html.a11y-contrast .footer-bottom{ color: #ddd; }
/* Every stack-slot paints its own opaque background (needed for the
   scroll-hold strip, see the .stack-slot comments above) — body's black
   background above never actually shows through any of them. Without
   this, headings and copy in these sections (none of which set their own
   text color, since they're designed against the normal light theme)
   just inherit body's new white text color while sitting on their
   original light background/photo — close to unreadable. */
html.a11y-contrast .stack-slot--features,
html.a11y-contrast .stack-slot--about,
html.a11y-contrast .stack-slot--process,
html.a11y-contrast .stack-slot--faq{ background: #000; }
html.a11y-contrast .feature{ background: #000; border-color: #333; }
html.a11y-contrast .features{ background: #333; }
/* Those same sections also have their OWN text/border colors tuned for
   the light theme (var(--ink)/var(--ink-soft)/var(--line)) — dark text
   and near-invisible hairline borders that were fine against white, but
   now sit on the black background above and need to go the other way. */
html.a11y-contrast .about-body,
html.a11y-contrast .step-desc,
html.a11y-contrast .faq-a p{ color: #ddd; }
html.a11y-contrast .faq-q{ color: #fff; }
html.a11y-contrast .process-step,
html.a11y-contrast .faq-list,
html.a11y-contrast .faq-item,
html.a11y-contrast .faq-icon{ border-color: #333; }
/* The product-detail modal is a plain white panel outside the stack —
   unaffected by the overrides above, but its own title/media/coverage
   card have no explicit color either, so they'd inherit body's white
   text directly onto their own white background. */
html.a11y-contrast .product-modal-panel{ background: #000; color: #fff; }
html.a11y-contrast .product-modal-media,
html.a11y-contrast .product-modal-coverage{ background: #111; border-color: #333; }
html.a11y-contrast .product-modal-desc,
html.a11y-contrast .coverage-label{ color: #ddd; }
html.a11y-contrast .product-modal-close{ background: #000; color: #fff; border-color: #fff; }

html.a11y-grayscale{ filter: grayscale(1); }

html.a11y-underline a{ text-decoration: underline !important; }

html.a11y-readable body,
html.a11y-readable .hero-title,
html.a11y-readable .product-title,
html.a11y-readable .section-title{ font-family: Arial, Helvetica, sans-serif !important; }

html.a11y-stopanim *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-stopanim .reveal{ opacity: 1 !important; transform: none !important; }

/* ===== Cookie consent ===== */
.cookie-modal{
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.cookie-modal.open{
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}
.cookie-box{
  background: #fff;
  border-radius: 20px;
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  transform: translateY(20px);
  transition: transform .3s ease;
}
.cookie-modal.open .cookie-box{ transform: translateY(0); }
.cookie-brand{ font-size: 1rem; margin-bottom: 14px; }
.cookie-text{ color: var(--ink-soft); font-size: .92rem; margin-bottom: 24px; }
.cookie-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-actions .btn{ flex: 1; min-width: 140px; }

.cookie-customize-link{
  display: block;
  width: 100%;
  background: none;
  border: none;
  margin-top: 16px;
  padding: 0;
  font-family: var(--font);
  font-size: .86rem;
  font-weight: 600;
  color: var(--accent-dark);
  text-align: center;
  cursor: pointer;
}
.cookie-customize-link:hover{ text-decoration: underline; }

.cookie-category{
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.cookie-category:last-of-type{ border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.cookie-category-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: .95rem;
}
.cookie-category-desc{
  color: var(--ink-soft);
  font-size: .84rem;
  margin: 6px 0 0;
}

/* Toggle switch */
.switch{
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: none;
}
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider{
  position: absolute;
  inset: 0;
  background: #d8d4cd;
  border-radius: 999px;
  transition: background .2s ease;
  cursor: pointer;
}
.switch .slider::before{
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .slider{ background: var(--accent-dark); }
.switch input:checked + .slider::before{ transform: translateX(18px); }
.switch.disabled .slider{ opacity: .6; cursor: not-allowed; }

@media (max-width: 480px){
  .a11y-panel{ inset-inline-start: 12px; bottom: 84px; }
  .a11y-toggle{ inset-inline-start: 12px; }
}