/* =====================================================================
   STE BEES RAW HONEY  -  styles.css
   Reference layout, Ste Bees brand. Mobile-first.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --cream:#F5EAC9;
  --honey:#EFA42A;
  --amber:#C05A2B;
  --comb:#211A14;
  --white:#FFFFFF;

  /* derived warm tints */
  --cream-soft:#FBF4E2;
  --cream-deep:#EFE0BB;
  --honey-soft:#F6C063;
  --comb-soft:#3A2E24;
  --ink-on-cream:#2C2218;
  --muted-on-cream:#5C4A38;
  --muted-on-dark:#E7D9BE;

  --font-display:'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --radius:16px;
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 8px 24px rgba(33,26,20,.10);
  --shadow-lg:0 18px 48px rgba(33,26,20,.18);
  --shadow-honey:0 0 0 4px rgba(239,164,42,.30);
  --maxw:1100px;
  --gap:clamp(48px,8vw,96px);

  --header-h:68px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.6;
  color:var(--ink-on-cream);
  background:var(--cream-soft);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { display:block; max-width:100%; height:auto; }
/* The hidden attribute must always win over class display rules (e.g. .field). */
[hidden] { display:none !important; }
ul { list-style:none; padding:0; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }

/* ---------- Type ---------- */
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:900; line-height:1.04; letter-spacing:-0.01em; }
h1 { font-size:clamp(2.4rem,7vw,4.2rem); }
h2 { font-size:clamp(1.8rem,4vw,2.6rem); }
h3 { font-size:1.25rem; line-height:1.15; }
p { max-width:62ch; }

.eyebrow {
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--amber);
  margin-bottom:.85rem;
}
.eyebrow-honey { color:var(--honey); }

.section-head { margin-bottom:clamp(2rem,5vw,3.25rem); }
.section-head-center { text-align:center; }
.section-head-center .eyebrow { margin-left:auto; margin-right:auto; }

/* ---------- Layout helpers ---------- */
main > section { scroll-margin-top:80px; }
.hero-inner, .story-inner, .why-inner, .order-inner, .contact-inner,
.gallery .section-head, .gallery-grid, .footer-inner {
  width:min(100% - 2.5rem, var(--maxw));
  margin-inline:auto;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display); font-weight:700;
  font-size:1rem; line-height:1;
  text-decoration:none;
  padding:.95rem 1.6rem;
  min-height:48px;
  border:0;
  border-radius:var(--radius-pill);
  transition:box-shadow .25s ease, background-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-sm { padding:.6rem 1.05rem; min-height:40px; font-size:.92rem; }
.btn-block { width:100%; }

.btn-primary { background:var(--amber); color:var(--white); }
.btn-primary:hover, .btn-primary:focus-visible { box-shadow:0 0 0 4px rgba(192,90,43,.30); }

.btn-secondary { background:var(--honey); color:var(--comb); }
.btn-secondary:hover, .btn-secondary:focus-visible { box-shadow:var(--shadow-honey); }

/* WhatsApp green, darkened to #0C8043 so white text passes WCAG AA (5:1). */
.btn-whatsapp { background:#0C8043; color:var(--white); }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { box-shadow:0 0 0 4px rgba(12,128,67,.32); }

.wa-icon { display:inline-flex; width:1.15em; height:1.15em; }
.wa-icon svg { width:100%; height:100%; }

.text-link {
  font-family:var(--font-display); font-weight:700;
  text-decoration:none; color:var(--comb);
  border-bottom:2px solid var(--honey);
  padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.text-link:hover, .text-link:focus-visible { color:var(--amber); border-color:var(--amber); }

/* ---------- Focus ring (global) ---------- */
:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:2px;
  border-radius:6px;
}
.btn:focus-visible { outline-offset:3px; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(251,244,226,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(33,26,20,.08);
}
.header-inner {
  width:min(100% - 2rem, var(--maxw));
  margin-inline:auto;
  min-height:var(--header-h);
  display:flex; align-items:center; gap:1rem;
}
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.brand-mark img { width:40px; height:40px; }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-name { font-family:var(--font-display); font-weight:900; font-size:1.35rem; color:var(--comb); letter-spacing:0; text-transform:uppercase; }
.brand-tag {
  font-family:var(--font-body); font-weight:600; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--amber); margin-top:2px;
}

.nav-desktop { display:none; }
.header-actions { display:flex; align-items:center; gap:.6rem; }
.nav-cta { display:none; }
#install-btn { display:none; }
#install-btn:not([hidden]) { display:inline-flex; }

/* Hamburger */
.menu-toggle {
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
  background:transparent; border:0; border-radius:10px;
}
.menu-bar { display:block; height:2.5px; width:100%; background:var(--comb); border-radius:2px; transition:transform .3s, opacity .3s; }
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:49;
  background:var(--comb);
  display:flex; flex-direction:column; gap:.25rem;
  padding:1.25rem 1.25rem 1.75rem;
  box-shadow:var(--shadow-lg);
}
.mobile-menu[hidden] { display:none; }
.mobile-menu a {
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:var(--cream); text-decoration:none;
  padding:.85rem .25rem; border-bottom:1px solid rgba(245,234,201,.12);
}
.mobile-menu a:last-of-type { border-bottom:0; margin-top:.75rem; }
.mobile-menu .btn { color:var(--white); }

/* =====================================================================
   HERO
   ===================================================================== */
/* HERO — side-by-side: copy left, product packshot floating on the cream field */
.hero {
  position:relative;
  background:
    radial-gradient(120% 140% at 80% 0%, var(--cream-deep) 0%, var(--cream-soft) 55%);
  padding-block:clamp(2.5rem,7vw,4.5rem) clamp(3rem,8vw,5rem);
  overflow:hidden;
}
.hero-pattern {
  position:absolute; inset:0; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23C05A2B' stroke-width='2'%3E%3Cpath d='M28 0 L52 14 L52 42 L28 56 L4 42 L4 14 Z'/%3E%3Cpath d='M28 50 L52 64 L52 92 L28 106 L4 92 L4 64 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 100px;
}
.hero-inner {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:clamp(2rem,5vw,3rem);
  align-items:center; text-align:center;
}
.hero-copy { max-width:36rem; }
.hero h1 { color:var(--comb); margin-bottom:1rem; }
.hero-sub { font-size:1.15rem; color:var(--muted-on-cream); margin-inline:auto; margin-bottom:1.75rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; justify-content:center; }
.hero-media { position:relative; order:-1; width:min(100%, 320px); margin-inline:auto; }
.hero-media::before {
  content:""; position:absolute; inset:8% 4% 6%; z-index:0;
  background:radial-gradient(58% 52% at 50% 46%, rgba(239,164,42,.40), rgba(239,164,42,0) 70%);
  filter:blur(6px);
}
.hero-media img {
  position:relative; z-index:1;
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 20px 32px rgba(33,26,20,.26));
}

/* =====================================================================
   STORY
   ===================================================================== */
.story { padding-block:var(--gap); }
.story-inner { display:flex; flex-direction:column; gap:clamp(1.75rem,5vw,3.5rem); }
.story-media {
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
  align-self:stretch;
}
.story-media img { width:100%; height:100%; max-height:520px; object-fit:cover; }
.story-copy h2 { color:var(--comb); margin-bottom:1.1rem; }
.story-copy > p { color:var(--muted-on-cream); margin-bottom:1.6rem; }

.proof-row {
  display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.75rem;
}
.proof-row li {
  font-family:var(--font-body); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--amber);
  background:var(--white);
  border:1px solid rgba(192,90,43,.22);
  padding:.5rem .95rem; border-radius:var(--radius-pill);
}

/* =====================================================================
   WHY (DARK BAND)
   ===================================================================== */
.why {
  position:relative;
  background:var(--comb);
  color:var(--cream);
  padding-block:var(--gap);
  overflow:hidden;
}
.why-pattern {
  position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23EFA42A' stroke-width='2'%3E%3Cpath d='M28 0 L52 14 L52 42 L28 56 L4 42 L4 14 Z'/%3E%3Cpath d='M28 50 L52 64 L52 92 L28 106 L4 92 L4 64 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 100px;
}
.why-inner { position:relative; z-index:1; }
.why .section-head { text-align:center; }
.why .section-head .eyebrow { margin-left:auto; margin-right:auto; }
.why h2 { color:var(--white); }

.why-grid {
  display:grid; grid-template-columns:1fr; gap:1rem;
}
.why-card {
  background:var(--comb-soft);
  border:1px solid rgba(239,164,42,.14);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem;
}
.why-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  background:rgba(239,164,42,.14);
  color:var(--honey);
  margin-bottom:1rem;
}
.why-icon svg { width:26px; height:26px; }
.why-card h3 { color:var(--white); margin-bottom:.4rem; }
.why-card p { color:var(--muted-on-dark); font-size:.98rem; max-width:36ch; }

/* =====================================================================
   ORDER
   ===================================================================== */
.order {
  background:
    linear-gradient(180deg, var(--cream-deep) 0%, var(--cream-soft) 38%);
  padding-block:var(--gap);
}
.order .section-head h2 { color:var(--comb); }
.order-grid { display:grid; grid-template-columns:1fr; gap:clamp(1.5rem,4vw,2.5rem); align-items:start; }

/* Product card */
.product-card {
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.product-media { background:var(--cream); }
.product-media img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.product-body { padding:1.6rem 1.5rem 1.8rem; }
.product-title { color:var(--comb); margin-bottom:.4rem; }
.product-spec {
  font-family:var(--font-body); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted-on-cream);
  margin-bottom:1rem;
}
.product-price { font-family:var(--font-display); font-weight:900; font-size:2.2rem; color:var(--amber); line-height:1; margin-bottom:.4rem; }
.product-caption { font-size:.86rem; color:var(--muted-on-cream); margin-bottom:1.2rem; }
.product-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.product-tags li {
  font-family:var(--font-body); font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--comb); background:var(--cream);
  padding:.38rem .8rem; border-radius:var(--radius-pill);
}

/* Form */
.order-form-wrap {
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.4rem,4vw,2.25rem);
}
#order-form { display:flex; flex-direction:column; gap:1.25rem; }
.field { display:flex; flex-direction:column; }
.field-label {
  font-family:var(--font-body); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--comb);
  margin-bottom:.5rem;
}
fieldset { border:0; padding:0; }
fieldset legend { padding:0; }

input[type="text"], input[type="tel"], textarea {
  font-family:var(--font-body); font-size:1rem; color:var(--ink-on-cream);
  background:var(--cream-soft);
  border:1.5px solid rgba(33,26,20,.14);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
  width:100%;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
input::placeholder, textarea::placeholder { color:#6B5842; }
input:focus, textarea:focus {
  outline:none; background:var(--white);
  border-color:var(--honey);
  box-shadow:0 0 0 3px rgba(239,164,42,.22);
}
textarea { resize:vertical; min-height:84px; }
input:focus-visible, textarea:focus-visible { outline:none; }

/* validation */
.field-error {
  display:none;
  font-size:.82rem; font-weight:500; color:var(--amber);
  margin-top:.4rem;
}
.field-error:not(:empty) { display:block; }
input[aria-invalid="true"] { border-color:var(--amber); box-shadow:0 0 0 3px rgba(192,90,43,.18); }

/* Pack cards */
.pack-options { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.pack-card { position:relative; cursor:pointer; }
.pack-card input { position:absolute; opacity:0; width:1px; height:1px; }
.pack-card-inner {
  display:flex; flex-direction:column; gap:.2rem; align-items:center; text-align:center;
  padding:.85rem .5rem;
  background:var(--cream-soft);
  border:2px solid rgba(33,26,20,.12);
  border-radius:var(--radius-sm);
  transition:border-color .2s, background-color .2s, box-shadow .2s;
  min-height:64px; justify-content:center;
}
.pack-name { font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--comb); }
.pack-meta { font-size:.7rem; color:var(--muted-on-cream); }
.pack-card input:checked + .pack-card-inner {
  border-color:var(--amber); background:var(--white);
  box-shadow:0 0 0 3px rgba(192,90,43,.16);
}
.pack-card input:checked + .pack-card-inner .pack-name { color:var(--amber); }
.pack-card input:focus-visible + .pack-card-inner { outline:3px solid var(--amber); outline-offset:2px; }

/* Fulfilment radio pills */
.radio-pills { display:flex; gap:.6rem; flex-wrap:wrap; }
.radio-pill { position:relative; cursor:pointer; flex:1; min-width:120px; }
.radio-pill input { position:absolute; opacity:0; width:1px; height:1px; }
.radio-pill span {
  display:flex; align-items:center; justify-content:center;
  min-height:46px; padding:.5rem 1rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--comb);
  background:var(--cream-soft);
  border:2px solid rgba(33,26,20,.12);
  border-radius:var(--radius-pill);
  transition:border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}
.radio-pill input:checked + span {
  border-color:var(--honey); background:var(--honey); color:var(--comb);
}
.radio-pill input:focus-visible + span { outline:3px solid var(--amber); outline-offset:2px; }

.order-total-line {
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--comb);
  padding:.85rem 1rem; background:var(--cream-soft); border-radius:var(--radius-sm);
}
.order-total-line #order-total { color:var(--amber); }

.wa-prompt { text-align:center; font-size:.9rem; color:var(--muted-on-cream); margin-top:.25rem; }

/* status nodes */
.order-status { border-radius:var(--radius-sm); padding:1rem 1.15rem; }
.order-status p { max-width:none; }
.order-status-ok { background:rgba(37,211,102,.12); border:1.5px solid rgba(37,211,102,.4); color:#155c34; }
.order-status-bad { background:rgba(192,90,43,.10); border:1.5px solid rgba(192,90,43,.4); color:var(--amber); display:flex; flex-direction:column; gap:.85rem; }
.order-status[hidden] { display:none; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery { padding-block:var(--gap); }
.gallery .section-head h2 { color:var(--comb); }

.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.gallery-item { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:1/1; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery-item:hover img { transform:scale(1.04); }

/* message tiles — solid brand block, centered Archivo, no hover-zoom */
.gallery-msg { display:flex; align-items:center; justify-content:center; text-align:center; padding:1.6rem 1.4rem; }
.gallery-msg-amber { background:var(--amber); }
.gallery-msg-comb  { background:var(--comb-soft); }
.gallery-msg p {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.15;
  color:var(--cream); max-width:16ch;
}

/* =====================================================================
   CARE BAND
   ===================================================================== */
.care {
  position:relative;
  background:url("images/honey-drizzle.webp") center/cover no-repeat;
  background-color:var(--honey);
  padding-block:clamp(3.5rem,9vw,6rem);
  overflow:hidden;
}
.care-overlay {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(33,26,20,.82) 0%, rgba(33,26,20,.55) 100%);
}
.care-inner {
  position:relative; z-index:1; text-align:center;
}
.care-inner p {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.35rem,3.6vw,2.1rem); line-height:1.25;
  color:var(--white); max-width:24ch; margin-inline:auto;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact {
  position:relative;
  background:var(--honey);
  padding-block:var(--gap);
  overflow:hidden;
}
.contact-pattern {
  position:absolute; inset:0; pointer-events:none; opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23211A14' stroke-width='2'%3E%3Cpath d='M28 0 L52 14 L52 42 L28 56 L4 42 L4 14 Z'/%3E%3Cpath d='M28 50 L52 64 L52 92 L28 106 L4 92 L4 64 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 100px;
}
.contact-inner { position:relative; z-index:1; text-align:center; }
.contact h2 { color:var(--comb); max-width:18ch; margin-inline:auto; margin-bottom:1.75rem; }
.contact-actions { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:1.75rem; }
.contact-line { color:var(--comb); font-weight:500; max-width:none; margin-inline:auto; }
.contact-line a { font-weight:600; color:var(--comb); text-decoration:underline; text-decoration-color:rgba(33,26,20,.4); text-underline-offset:3px; }
.contact-line a:hover, .contact-line a:focus-visible { text-decoration-color:var(--comb); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background:var(--comb); color:var(--cream); }
.footer-inner {
  display:grid; grid-template-columns:1fr; gap:clamp(1.75rem,5vw,2.5rem);
  padding-block:clamp(2.5rem,6vw,3.5rem);
}
.footer-brand { display:flex; align-items:center; gap:1.1rem; }
.footer-seal { position:relative; width:84px; height:84px; flex:0 0 auto; }
.seal-svg { width:84px; height:84px; color:var(--honey); display:block; animation:seal-spin 40s linear infinite; }
.seal-text { font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.12em; fill:var(--honey); text-transform:uppercase; }
.footer-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; }
@keyframes seal-spin { to { transform:rotate(360deg); } }

.footer-name { font-family:var(--font-display); font-weight:900; font-size:1.5rem; color:var(--white); display:block; text-transform:uppercase; }
.footer-tagline { font-size:.92rem; color:var(--muted-on-dark); margin-top:.35rem; max-width:34ch; }

.footer-links h4, .footer-contact h4 {
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--honey);
  margin-bottom:.9rem;
}
.footer-links { display:flex; flex-direction:column; }
.footer-links a {
  text-decoration:none; color:var(--muted-on-dark); padding:.35rem 0;
  font-weight:500; transition:color .2s; width:max-content;
}
.footer-links a:hover, .footer-links a:focus-visible { color:var(--white); }

.footer-contact address { font-style:normal; font-size:.92rem; line-height:1.85; color:var(--muted-on-dark); }
.footer-contact address a { color:var(--muted-on-dark); text-decoration:none; transition:color .2s; }
.footer-contact address a:hover, .footer-contact address a:focus-visible { color:var(--white); text-decoration:underline; }

.footer-social { display:flex; gap:.75rem; margin-top:1.1rem; }
.footer-social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(239,164,42,.3); color:var(--honey);
  transition:background-color .2s, color .2s, border-color .2s;
}
.footer-social a:hover, .footer-social a:focus-visible { background:var(--honey); color:var(--comb); border-color:var(--honey); }
.footer-social svg { width:20px; height:20px; }

.footer-bottom {
  border-top:1px solid rgba(245,234,201,.12);
}
.footer-bottom p {
  width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto;
  padding-block:1.25rem; font-size:.84rem; color:var(--muted-on-dark);
}

/* =====================================================================
   REVEAL ON SCROLL
   ===================================================================== */
[data-reveal] { opacity:0; transform:translateY(26px); }
.reveal-ready [data-reveal] { transition:opacity .8s ease, transform .8s ease; }
[data-reveal].in { opacity:1; transform:none; }

/* =====================================================================
   RESPONSIVE  (scale up)
   ===================================================================== */

/* Tablet */
@media (min-width:640px) {
  .why-grid { grid-template-columns:repeat(2,1fr); }
}

/* Desktop */
@media (min-width:880px) {
  :root { --header-h:76px; }

  .nav-desktop {
    display:flex; gap:1.75rem; margin-right:1.5rem;
  }
  .nav-desktop a {
    font-family:var(--font-body); font-weight:600; font-size:.95rem;
    text-decoration:none; color:var(--comb);
    display:inline-flex; align-items:center; min-height:44px;
    border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
  }
  .nav-desktop a:hover, .nav-desktop a:focus-visible { color:var(--amber); border-color:var(--honey); }
  .nav-cta { display:inline-flex; }
  .menu-toggle { display:none; }
  .mobile-menu { display:none !important; }

  /* Hero side-by-side */
  .hero-inner { flex-direction:row; text-align:left; align-items:center; gap:clamp(2.5rem,5vw,4rem); }
  .hero-copy { flex:0 0 46%; max-width:none; }
  .hero-sub { margin-inline:0; }
  .hero-actions { justify-content:flex-start; }
  .hero-media { flex:1; order:0; width:auto; max-width:440px; }

  /* Story two columns */
  .story-inner { flex-direction:row; align-items:stretch; }
  .story-media { flex:0 0 42%; }
  .story-copy { flex:1; align-self:center; }

  /* Why three columns */
  .why-grid { grid-template-columns:repeat(3,1fr); gap:1.25rem; }

  /* Order two columns */
  .order-grid { grid-template-columns:5fr 6fr; }
  .product-card { position:sticky; top:calc(var(--header-h) + 20px); }

  /* Gallery mosaic 3-up (3x2) */
  .gallery-grid { grid-template-columns:repeat(3,1fr); }

  /* Footer columns */
  .footer-inner { grid-template-columns:1.4fr 1fr 1.4fr; align-items:start; }
}

@media (min-width:1100px) {
  .why-card { padding:1.75rem 1.6rem; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal] { opacity:1; transform:none; }
  .seal-svg { animation:none; }
  .gallery-item:hover img { transform:none; }
}