/* =====================================================================
   DADDY'S CROP — MAIN STYLES
   =====================================================================
   Fonts, colors, background images and key sizes are NOT edited here.
   Change them in  css/customize.css  instead (they are used below as
   var(--something)).

   WHAT'S IN THIS FILE (in page order):
     1.  Basic page setup
     2.  Top bar, logo and menu (with the phone menu button)
     3.  Hero (first screen)
     4.  Intro text
     5.  Our story (big background picture)
     6.  Product
     7.  Unpolished vs polished (+ tap-to-enlarge viewer)
     8.  Packaging details
     9.  FAQ
     10. Buy section
     11. Contact / wholesale enquiries
     12. Floating Buy + WhatsApp buttons
     13. Footer
     14. Tablet layout   (screens up to 1100 px)
     15. Phone layout    (screens up to 900 px, and again up to 600 px)
     16. Special cases   (phone turned sideways, reduced motion)
   ===================================================================== */


/* =====================================================================
   1. BASIC PAGE SETUP
   ===================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
body.no-scroll{overflow:hidden}

/* Makes keyboard users see where they are */
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* When a menu link jumps to a section, leave room for the top bar */
section[id]{scroll-margin-top:72px}

/* Keeps page content centered and not too wide */
.container{width:var(--container-width);margin:auto}

/* Small gold label text used above headings */
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2);font-weight:700}

/* Rounded buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;min-height:44px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;transition:.25s;cursor:pointer;background:transparent;color:inherit}
.btn.primary{background:var(--gold);color:#25170d;border-color:var(--gold)}
.btn.dark{border-color:rgba(38,27,18,.28);color:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.btn img{width:20px;height:20px;flex:none}


/* =====================================================================
   2. TOP BAR, LOGO AND MENU
   Logo file: assets/images/logo.webp   |   Logo size: customize.css
   ===================================================================== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:10px 4vw;
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  display:flex;justify-content:space-between;align-items:center;
  color:#fff;
  background:var(--topbar-bg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:var(--logo-height);width:auto}

/* Menu links at top-right */
.nav{display:flex;gap:26px;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
.nav a{opacity:.85;transition:.25s;padding:8px 0}
.nav a:hover{opacity:1;color:var(--gold2)}

/* The 3-line menu button (only shown on phones - see section 15) */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* =====================================================================
   3. HERO (FIRST SCREEN)
   Background picture: customize.css -> --hero-bg-image
   ===================================================================== */
.hero{
  min-height:var(--hero-min-height);
  position:relative;
  display:grid;place-items:center;
  overflow:hidden;
  color:#fff;
  background:#170f0b;
  padding-top:70px;
}
/* The background picture layer (dark tint + picture) */
.hero-bg{
  position:absolute;inset:0;
  background-image:var(--hero-overlay),var(--hero-bg-image);
  background-size:cover;
  background-position:var(--hero-bg-position);
  background-repeat:no-repeat;
}
/* Soft dark fade at the top and bottom edges */
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 40%,rgba(0,0,0,.45));
  z-index:1;pointer-events:none;
}
/* Floating gold dots layer (drawn by js/hero-particles.js) */
#hero3d{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55}

.hero-inner{position:relative;z-index:4;width:var(--container-width);margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-copy{padding-top:5vh}
.hero h1{font:600 clamp(4rem,8vw,8.7rem)/.9 var(--font-heading);letter-spacing:-.05em;margin:18px 0 0;max-width:8ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero p{max-width:560px;font-size:1.02rem;line-height:1.8;color:rgba(255,255,255,.88);margin:24px 0 0;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Logo placed near the sun on larger screens. */
@media(max-width:900px){
  .hero-inner .hero-product img{width:min(180px,42vw)}
}
@media(min-width:901px){
  .hero-inner .hero-product{align-self:start;min-height:0;padding-top:0}
  .hero-inner .hero-product img{width:clamp(140px,15vw,220px)}
  .hero-inner .hero-product::before{width:260px}
}
.hero-product{display:flex;justify-content:center;align-items:center;position:relative;min-height:620px}
.hero-product::before{
  content:"";position:absolute;width:520px;max-width:90%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(231,188,90,.28),transparent 68%);
  filter:blur(5px);
}
.hero-product img{
  position:relative;width:min(420px,70vw);
  filter:drop-shadow(0 34px 45px rgba(0,0,0,.42));
  transform:none;
  transition:transform .45s ease;
}


/* =====================================================================
   4. INTRO TEXT
   ===================================================================== */
.intro{
  padding:var(--section-padding) 0 calc(var(--section-padding) - 20px);
  background:var(--paper2);
}
.intro-grid{display:grid;grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}
.intro-grid > div{width:100%;max-width:900px}
.intro-grid > div:last-child{max-width:680px}
.intro-grid .mini-rule{justify-content:center}
/* Large headline style (also used by other sections) */
.display{font:600 clamp(3rem,5.5vw,6rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:0}
.bodycopy{font-size:1rem;line-height:1.85;color:var(--muted)}
.mini-rule{display:flex;align-items:center;gap:14px;color:var(--brown);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px}
.mini-rule::before{content:"";width:40px;height:1px;background:var(--gold);flex:none}


/* =====================================================================
   5. OUR STORY (BIG BACKGROUND PICTURE WITH TEXT)
   Background picture: customize.css -> --story-bg-image
   ===================================================================== */
.story{position:relative;color:#fff;background:#19130f}
/* Tall scroll track: the stage inside stays pinned while the steps change */
.story-track{height:calc(var(--steps) * 62vh + 38vh);position:relative}
.story-stage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;flex-direction:column;
  padding:clamp(78px,11vh,104px) 0 clamp(18px,3vh,30px);
  overflow:hidden;
  background-color:#19130f;
}
.story-stage::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--story-overlay),var(--story-bg-image);
  background-size:cover;background-position:var(--story-bg-position);background-repeat:no-repeat;
  transform:scaleX(-1);pointer-events:none;
}
/* Soft dark edges around the picture */
.story-stage::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 55% 48%,transparent 30%,rgba(0,0,0,.4) 100%);
  pointer-events:none;
}
.story-stage>*{position:relative;z-index:2}
.story-head{padding-left:0;flex:none}
.story-head .eyebrow{margin-bottom:10px}
.story-head h2{font:600 clamp(2.4rem,4.6vw,4.6rem)/.95 var(--font-heading);letter-spacing:-.04em;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.4)}

.process{flex:1;min-height:0;position:relative;margin-top:clamp(10px,2vh,24px)}
.pstep{
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center;
  padding:12px 0;
  opacity:0;visibility:hidden;transform:translateY(22px);
  transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;
}
.pstep.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .55s ease,visibility 0s}
.pstep-count{font-size:.78rem;letter-spacing:.22em;color:rgba(255,255,255,.65);font-weight:700;margin-bottom:6px}
.pstep-count span{font:600 clamp(3.6rem,7vw,6.4rem)/1 var(--font-heading);letter-spacing:-.04em;color:var(--gold);margin-right:6px}
.pstep h3{font:600 clamp(1.7rem,3vw,2.8rem)/1.05 var(--font-heading);letter-spacing:-.02em;margin:0 0 12px;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.pstep-tag{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold2);border:1px solid rgba(241,213,138,.4);border-radius:999px;padding:7px 14px;margin-bottom:18px}
.pstep p{max-width:460px;line-height:1.75;color:rgba(255,255,255,.9);font-size:1.05rem;margin:0;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.pstep-media{justify-self:stretch;align-self:stretch;width:100%;height:100%;max-height:none;max-width:100%;min-height:0;min-width:0;display:flex}
.pstep-media img{
  width:100%;height:100%;object-fit:cover;object-position:center bottom;border:0;border-radius:0;box-shadow:none;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 100%),linear-gradient(to bottom,#000 0%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 0%,#000 100%),linear-gradient(to bottom,#000 0%,#000 100%);
  mask-composite:intersect;
}

.process-nav{flex:none;display:flex;gap:8px;padding-left:0;margin-top:clamp(10px,2vh,20px)}
.pdot{flex:0 0 clamp(26px,4vw,52px);height:5px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.28);cursor:pointer;transition:background .3s,flex-basis .3s}
.pdot.is-active{background:var(--gold);flex-basis:clamp(44px,7vw,84px)}
.pdot:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}


/* =====================================================================
   6. PRODUCT
   ===================================================================== */
.product{
  padding:var(--section-padding) 0;
  background:
    radial-gradient(circle at 85% 30%,rgba(212,170,79,.12),transparent 28%),
    var(--paper2);
}
.product-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}
.product-visual{position:relative;display:flex;justify-content:center;align-items:center}
.product-visual::before{content:"";position:absolute;width:390px;max-width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(212,170,79,.22),transparent 68%)}
.product-visual img{position:relative;width:min(440px,90%);filter:drop-shadow(0 30px 40px rgba(45,30,18,.18));transition:transform .45s ease}
.product-copy .eyebrow{color:var(--brown)}
.product-copy h2{font:600 clamp(3rem,5.6vw,6rem)/.95 var(--font-heading);letter-spacing:-.05em;margin:14px 0 0}
.product-copy p{color:var(--muted);line-height:1.8}
/* The 4 small boxes (Product / Package shown / Processing / Format) */
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:32px;border:1px solid var(--line)}
.spec{background:var(--paper2);padding:18px}
.spec b{display:block;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:#7a705f;margin-bottom:5px}
.spec span{font:500 1.1rem var(--font-heading);color:var(--green)}


/* =====================================================================
   7. UNPOLISHED VS POLISHED
   Click / tap the chart to open it full-size (js/main.js)
   ===================================================================== */
.compare{padding:var(--section-padding) 0 0;background:var(--paper);color:var(--ink)}
.compare .eyebrow{color:var(--brown);margin-bottom:14px}
.compare-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:50px}
.compare h2{font:600 clamp(3rem,5.7vw,6rem)/.94 var(--font-heading);letter-spacing:-.05em;margin:0;max-width:8ch}
.compare p{max-width:440px;line-height:1.8;color:var(--muted)}
.compare-frame{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:zoom-in;color:inherit}
.compare-frame img{display:block;width:100%;height:auto;border-radius:0}
.compare > .container{width:100%}
.compare-head{width:var(--container-width);margin-left:auto;margin-right:auto}
/* "Tap to enlarge" label on the corner of the chart */
.zoom-hint{
  position:absolute;right:26px;bottom:26px;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  background:rgba(20,12,9,.82);color:#fff;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.zoom-hint svg{width:15px;height:15px}

/* Full-screen chart viewer */
.lightbox{
  width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:rgba(10,7,5,.96);color:#fff;
}
.lightbox::backdrop{background:rgba(10,7,5,.9)}
.lightbox-scroll{width:100%;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;padding:64px 16px 24px;-webkit-overflow-scrolling:touch}
.lightbox-scroll img{max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;border-radius:10px}
.lightbox-close{
  position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:2;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;
}


/* =====================================================================
   8. PACKAGING DETAILS
   ===================================================================== */
.package-details{padding:clamp(28px,4vw,48px) 0 0;background:var(--paper);scroll-margin-top:90px}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.back-image{position:relative;display:flex;justify-content:center;grid-column:1 / -1}
.back-image img{
  display:block;width:100%;height:auto;
}
.details-copy{grid-column:1 / -1}
.package-details > .details-grid{width:100%}
.package-details .details-grid{gap:clamp(20px,3vw,36px)}
.details-copy{width:var(--container-width);margin-left:auto;margin-right:auto}
.details-copy h2{font:600 clamp(3rem,5vw,5.5rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:0 0 18px}
.details-copy .eyebrow{color:var(--brown);margin-bottom:14px}
.details-copy p{line-height:1.8;color:var(--muted);margin:0;max-width:980px}
/* The 4 numbered facts (01, 02, 03, 04) */
.fact-list{display:grid;gap:12px;margin-top:30px}
.fact{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.fact b{width:30px;height:30px;border-radius:50%;background:rgba(212,170,79,.15);display:grid;place-items:center;color:var(--brown);flex:none}
.fact span{line-height:1.55}


/* =====================================================================
   9. FAQ (click a question to open the answer — no script needed)
   ===================================================================== */
.faq{padding:var(--section-padding) 0;background:var(--paper2)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.faq h2{font:600 clamp(2.8rem,4.6vw,5rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:12px 0 0}
.faq .eyebrow{color:var(--brown)}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;min-height:44px;
  font:500 1.2rem var(--font-heading);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:rgba(212,170,79,.18);display:grid;place-items:center;color:var(--brown);font:500 1.3rem var(--font-body)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:0 0 24px;padding-right:50px;line-height:1.8;color:var(--muted)}


/* =====================================================================
   10. BUY SECTION (dark red)
   ===================================================================== */
.buy{padding:calc(var(--section-padding) - 10px) 0;background:var(--buy-overlay),var(--buy-bg-image) var(--buy-bg-position)/cover no-repeat,#2a1c12;color:#fff}
.buy-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.buy h2{font:600 clamp(3rem,5vw,6rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:0}
.buy p{max-width:520px;color:rgba(255,255,255,.78);line-height:1.8}
.market-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.market{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 10px;min-height:46px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;transition:background .25s,transform .25s}
.market img{width:28px;height:28px;border-radius:8px;display:block}
.buy-bag{display:flex;justify-content:center}
.buy-bag img{width:min(360px,80%);filter:drop-shadow(0 35px 55px rgba(0,0,0,.35));transition:transform .45s ease}


/* =====================================================================
   11. CONTACT / WHOLESALE ENQUIRIES
   The form opens WhatsApp with the message already typed (js/main.js)
   ===================================================================== */
.contact{padding:var(--section-padding) 0;background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact .eyebrow{color:var(--brown)}
.contact h2{font:600 clamp(2.8rem,4.8vw,5.2rem)/.96 var(--font-heading);letter-spacing:-.05em;margin:12px 0 18px}
.contact-copy p{color:var(--muted);line-height:1.8;max-width:480px}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.contact-actions .btn.whatsapp{background:#25D366;border-color:#25D366;color:#06210f;font-weight:700}
.contact-details{display:grid;gap:14px;font-size:.95rem;line-height:1.6}
.contact-details b{display:block;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:#7a705f;margin-bottom:2px}

.enquiry{background:var(--paper2);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 20px 50px rgba(45,30,18,.08)}
.enquiry h3{font:600 1.5rem var(--font-heading);margin:0 0 4px}
.enquiry .hint{margin:0 0 22px;font-size:.85rem;color:var(--muted)}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#7a705f;font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;
  border:1px solid rgba(38,27,18,.2);border-radius:12px;
  background:#fff;color:var(--ink);
  font:inherit;font-size:16px; /* 16px stops phones zooming in on tap */
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.enquiry .btn{width:100%;margin-top:6px}


/* =====================================================================
   12. FLOATING BUTTONS (stay on screen while you scroll)
   Buy rail: right edge, vertically centered.  WhatsApp: bottom-right.
   Icons: assets/icons/ (amazon, flipkart, blinkit, zepto, whatsapp .svg)
   ===================================================================== */
.buy-float{
  position:fixed;
  top:50%;
  right:18px;
  transform:translate3d(0,-50%,0);
  z-index:120;
  width:58px;
  padding:7px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(22,14,10,.82);
  box-shadow:0 18px 45px rgba(0,0,0,.24);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.buy-float-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  margin:4px auto 10px;
  color:var(--gold2);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.buy-float-links{display:grid;gap:7px}
.buy-float a{
  width:44px;
  height:44px;
  display:block;
  border-radius:13px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  transition:transform .22s ease,border-color .22s ease;
}
.buy-float a img{width:100%;height:100%;display:block}
.buy-float .buy-float-now{
  margin-top:7px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:.5rem;
  line-height:1.2;
  text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  z-index:130;
  width:58px;
  height:58px;
  border-radius:50%;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .25s ease,box-shadow .25s ease;
}
.whatsapp-float img{width:100%;height:100%;display:block}


/* =====================================================================
   13. FOOTER
   ===================================================================== */
footer{padding:60px 0 28px;background:#130b08;color:rgba(255,255,255,.62);font-size:.85rem;line-height:1.7}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.footer-brand img{height:56px;width:auto;margin-bottom:14px}
.footer-brand p{margin:0;max-width:300px}
footer h4{margin:0 0 14px;color:#fff;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a:hover{color:var(--gold2)}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.72rem;color:rgba(255,255,255,.45)}


/* =====================================================================
   HOVER EFFECTS — only on devices with a mouse (so touch screens
   don't get "stuck" zoomed after a tap)
   ===================================================================== */
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .hero-product img:hover{transform:scale(1.03)}
  .product-visual img:hover,.buy-bag img:hover{transform:scale(var(--bag-hover-zoom))}
  .market:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
  .buy-float a:hover{transform:translateX(-4px) scale(1.08);border-color:rgba(212,170,79,.6)}
  .whatsapp-float:hover{transform:scale(1.1);box-shadow:0 14px 34px rgba(0,0,0,.45)}
}


/* =====================================================================
   14. TABLET LAYOUT (screens up to 1100 px)
   ===================================================================== */
@media(max-width:1100px){
  :root{--section-padding:90px}
  .intro-grid{gap:50px}
  .product-grid{gap:50px}
  .details-grid{gap:44px}
  .faq-grid,.contact-grid{gap:44px}
  .hero-inner{gap:20px}
  .hero-product{min-height:540px}
  .hero-product img{width:min(360px,70vw)}
  .nav{gap:18px}
}


/* =====================================================================
   15. PHONE LAYOUT (screens up to 900 px)
   ===================================================================== */
@media(max-width:900px){
  :root{--section-padding:76px}

  /* --- Menu becomes a button that opens a dropdown --- */
  .nav-toggle{display:none}
  .js .nav-toggle{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    padding:6px 4vw 18px;
    background:rgba(20,12,9,.97);
    border-bottom:1px solid rgba(255,255,255,.1);
    font-size:.82rem;
  }
  .js .nav:not(.is-open){display:none}
  .nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:1}
  .nav a:last-child{border-bottom:0}

  /* --- Two columns become one (with tighter gaps between the stacked parts) --- */
  .hero-inner,.intro-grid,.product-grid,.details-grid,.buy-inner,.faq-grid,.contact-grid{grid-template-columns:1fr}
  .intro-grid{gap:22px}
  .product-grid{gap:34px}
  .details-grid{gap:36px}
  .buy-inner{gap:34px}
  .faq-grid{gap:22px}
  .contact-grid{gap:38px}

  /* Hero */
  .hero{padding-top:84px;padding-bottom:30px}
  .hero-copy{text-align:center;padding-top:2vh}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero-copy p{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-product{min-height:0;padding:10px 0}
  .hero-product img{width:min(320px,68vw)}

  /* Our story */
  .story-stage{padding-bottom:86px}  /* keep clear of the floating Buy / WhatsApp buttons */
  .story-head,.pstep,.process-nav{padding-left:0}
  .story-head h2{font-size:clamp(2.1rem,9vw,3rem)}
  .pstep{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px;align-content:start;padding:0}
  .pstep-media{order:-1;height:100%;max-height:none;width:100%;aspect-ratio:auto;justify-self:stretch;min-height:0}
  .pstep-media img{border-radius:0}
  .pstep-text{min-height:0}
  .pstep-count span{font-size:clamp(2.2rem,7vh,3.6rem)}
  .pstep h3{font-size:clamp(1.45rem,6.4vw,1.9rem);margin-bottom:10px}
  .pstep-tag{margin-bottom:12px}
  .pstep p{font-size:clamp(.85rem,2vh,.98rem);line-height:1.5}

  /* Section headings a bit smaller so they don't dominate */
  .display,.product-copy h2,.compare h2,.details-copy h2,.buy h2,.faq h2,.contact h2{
    font-size:clamp(2.5rem,9vw,4.2rem);
  }

  .compare-head{display:block}
  .compare p{margin-top:20px}
  .compare h2{max-width:none}
  .product-visual{order:-1}
  .back-image img{width:100%}

  /* Chart viewer: show the chart bigger than the screen so text is readable; swipe to look around */
  .lightbox-scroll{align-items:flex-start;justify-content:flex-start}
  .lightbox-scroll img{max-width:none;max-height:none;width:1100px;margin:0}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}

  /* Floating buttons: Buy at the bottom-right, WhatsApp at the bottom-left */
  .buy-float{
    top:auto;
    right:12px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    transform:none;
    width:auto;
    padding:6px;
    border-radius:16px;
  }
  .buy-float-label,.buy-float-now{display:none}
  .buy-float-links{display:flex}
  .buy-float a{width:40px;height:40px;border-radius:11px}
  .whatsapp-float{right:auto;left:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:52px;height:52px}
  /* Room at the very bottom so the floating buttons never cover the footer text */
  footer{padding-bottom:calc(28px + 78px)}
}

/* ---- Small phones (up to 600 px) ---- */
@media(max-width:600px){
  :root{--section-padding:64px}
  .container{width:min(100% - 36px,var(--container-width))}
  .hero-inner{width:min(100% - 36px,var(--container-width))}

  .hero h1{font-size:clamp(3rem,15vw,4.4rem);letter-spacing:-.035em}
  .hero p{font-size:.98rem}
  .display,.product-copy h2,.compare h2,.details-copy h2,.buy h2,.faq h2,.contact h2{
    font-size:clamp(2.2rem,10.5vw,3.2rem);letter-spacing:-.035em;
  }
  .eyebrow{font-size:.68rem;letter-spacing:.2em}

  .hero-actions .btn{flex:1 1 auto}
  .spec-grid{grid-template-columns:1fr 1fr}
  .spec{padding:14px}
  .spec span{font-size:1rem}
  .zoom-hint{right:16px;bottom:16px}
  .market{flex:1 1 calc(50% - 6px)}
  .form-row{grid-template-columns:1fr}
  .enquiry{padding:22px 18px}
  .faq-item summary{font-size:1.08rem}
  .faq-item p{padding-right:0}
  .contact-actions .btn{flex:1 1 100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:6px}
}


/* =====================================================================
   16. SPECIAL CASES
   ===================================================================== */
/* Phone turned sideways (short screens): tighter layout */
@media(max-height:520px){
  .hero{min-height:auto;padding-top:84px;padding-bottom:40px}
  .buy-float-label,.buy-float-now{display:none}
  .buy-float{padding:6px}
  .buy-float-links{gap:5px}
  .buy-float a{width:38px;height:38px}
}

/* People who set "reduce motion" on their device get no movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}


/* =====================================================================
   OUR STORY FALLBACK: no JavaScript, or "reduce motion" -> simple stacked list
   ===================================================================== */
/* Responsive process composition: generous photo area and readable copy. */
.story-stage > .container{width:92%;max-width:none}
.story-head h2{font-size:clamp(2.1rem,3.5vw,4.4rem);line-height:1.05;max-width:12ch}
.pstep-text{min-width:0;max-width:560px}
.pstep h3{font-size:clamp(1.6rem,2.6vw,3rem);line-height:1.12;overflow-wrap:break-word}
.pstep p{font-size:clamp(.95rem,1.15vw,1.15rem);line-height:1.65}
@media(min-width:901px){
  .story-stage > .process{position:absolute;inset:clamp(90px,12vh,116px) 4% 64px;width:auto;margin:0}
  .pstep{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;padding:0}
  .pstep-text{padding-top:100px}
  .pstep-media{width:100%;height:100%;align-self:stretch;justify-self:stretch}
  .story-head{pointer-events:none}
  .story-stage > .process-nav{margin-top:auto}
}
@media(max-width:900px){
  .story-stage{padding-top:80px;padding-bottom:84px}
  .story-head h2{max-width:none;font-size:clamp(1.8rem,4.5vw,2.8rem)}
  .pstep-text{max-width:none}
  .pstep h3{font-size:clamp(1.35rem,3.5vw,2rem);margin-bottom:8px}
  .pstep-count{margin-bottom:4px}
  .pstep-count span{font-size:clamp(2rem,5vh,3rem)}
  .pstep-tag{font-size:.62rem;padding:6px 10px;margin-bottom:8px;letter-spacing:.1em}
  .pstep p{font-size:clamp(.82rem,1.8vh,1rem);line-height:1.45}
}
@media(max-height:600px) and (max-width:900px){
  .story-stage{padding-top:64px;padding-bottom:60px}
  .pstep{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:20px}
  .pstep-media{order:0}
  .story-head h2{font-size:1.7rem}
}
html:not(.js) .story-track,.reduce-motion .story-track{height:auto}
html:not(.js) .story-stage > .process,.reduce-motion .story-stage > .process{position:relative;inset:auto;width:92%;margin:24px auto 0}
html:not(.js) .story-stage,.reduce-motion .story-stage{position:relative;height:auto;overflow:visible;padding-bottom:70px}
html:not(.js) .process,.reduce-motion .process{display:grid;gap:56px}
html:not(.js) .pstep,.reduce-motion .pstep{position:static;opacity:1;visibility:visible;transform:none}
html:not(.js) .pstep-media,.reduce-motion .pstep-media{height:auto;max-height:none;width:min(420px,100%)}
html:not(.js) .process-nav,.reduce-motion .process-nav{display:none}
@media(max-width:900px){
  html:not(.js) .pstep,.reduce-motion .pstep{grid-template-rows:auto auto}
}