/* ==========================================================================
   Fresh / Esschem — esschem.co.za
   Brand palette taken from the Fresh packaging + Illustrator layouts.
   ========================================================================== */

:root{
  --navy:#2A2A72;
  --navy-deep:#1D1D52;
  --orange:#F7941E;
  --orange-deep:#E8760D;
  --red:#ED1C24;
  --blue:#0066B3;
  --blue-icon:#3E71AC;
  --powder:#7FAFC4;
  --powder-deep:#5E93AC;
  --ink:#1B1B3A;
  --white:#fff;

  --wrap:1240px;
  --pad:clamp(1.25rem, 4vw, 3rem);
  --r:14px;
  --shadow:0 18px 50px rgba(26,26,60,.18);
  --nav-h:108px;

  --f: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

body{
  margin:0;
  font-family:var(--f);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

/* ---------- Type ---------- */
.h2{
  font-size:clamp(1.9rem, 4.2vw, 3.1rem);
  font-style:italic;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 1rem;
  color:var(--navy);
}
.eyebrow{
  font-size:.82rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin:0 0 .6rem;
}
.inline-logo{
  display:inline-block; vertical-align:-.22em; height:1.05em; width:auto;
  margin:0 .18em;
}
.inline-logo--lg{height:1.15em; vertical-align:-.26em}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 2.1rem;
  font-size:1.02rem; font-weight:800; font-style:italic; letter-spacing:.02em;
  text-decoration:none; border-radius:100px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn--primary{
  background:var(--orange); color:#fff;
  box-shadow:0 10px 26px rgba(247,148,30,.42);
}
.btn--primary:hover{background:var(--orange-deep); transform:translateY(-2px)}
.btn--ghost{
  background:rgba(255,255,255,.14); color:#fff;
  border:2px solid rgba(255,255,255,.75);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{background:#fff; color:var(--navy); transform:translateY(-2px)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  transition:background .3s ease, box-shadow .3s ease;
}
/* 1fr | auto | 1fr keeps the links optically centred in the bar while the
   logo stays hard left. The empty third column is what balances it. */
.nav__inner{
  max-width:var(--wrap); margin:0 auto; height:100%;
  padding:0 var(--pad);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
}
.nav__inner::after{content:""}   /* balances column 3 */
.nav__brand{grid-column:1; justify-self:start}
.nav__brand img{
  height:92px; width:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));
  transition:height .3s ease;
}
.nav__menu{grid-column:2; display:flex; gap:.4rem; align-items:center; justify-self:center}
.nav__link{
  position:relative;
  padding:.55rem .95rem;
  font-size:.95rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  transition:color .2s ease;
}
.nav__link::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.28rem;
  height:3px; border-radius:3px; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav__link:hover::after,
.nav__link.is-active::after{transform:scaleX(1)}

/* scrolled state */
.nav.is-stuck{
  background:rgba(255,255,255,.97);
  box-shadow:0 6px 26px rgba(26,26,60,.14);
  backdrop-filter:blur(10px);
}
.nav.is-stuck .nav__brand img{height:74px; filter:none}
.nav.is-stuck .nav__link{color:var(--navy); text-shadow:none}

/* hamburger */
.nav__toggle{
  display:none;
  width:46px; height:46px; padding:10px;
  background:transparent; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav__toggle span{
  display:block; height:3px; width:100%; border-radius:3px;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:transform .3s ease, opacity .2s ease, background .3s ease;
}
.nav.is-stuck .nav__toggle span{background:var(--navy); box-shadow:none}

@media (max-width:860px){
  /* Shorter bar on phones so the hero content sits higher; the 108px desktop
     bar wastes ~13% of a phone screen. scroll-padding tracks --nav-h too. */
  :root{--nav-h:72px}
  /* Logo left, hamburger hard right — the menu itself is fixed/overlaid. */
  .nav__toggle{display:flex; grid-column:3; justify-self:end}
  .nav__brand img{height:56px}
  .nav.is-stuck .nav__brand img{height:50px}
  .nav__menu{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(255,255,255,.985);
    backdrop-filter:blur(12px);
    box-shadow:0 20px 40px rgba(26,26,60,.16);
    padding:.5rem var(--pad) 1.25rem;
    transform:translateY(-140%);
    transition:transform .34s cubic-bezier(.4,0,.2,1);
  }
  .nav__menu.is-open{transform:translateY(0)}
  .nav__link{
    color:var(--navy); text-shadow:none;
    padding:1.05rem .25rem; font-size:1.05rem;
    border-bottom:1px solid rgba(42,42,114,.1);
  }
  .nav__link::after{left:.25rem; right:auto; width:26px; bottom:.7rem}
  .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .nav.is-open .nav__toggle span:nth-child(2){opacity:0}
  .nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .nav.is-open .nav__toggle span{background:var(--navy); box-shadow:none}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  padding-top:var(--nav-h);
}
/* Laundry stack sits to the right, mirroring the Illustrator layout where
   the bag occupies the left of the frame. */
.hero__bg{
  position:absolute; inset:0;
  background:url("../images/hero-laundry.jpg") right center/cover no-repeat;
  transform:scale(1.04);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(29,29,82,.9) 0%, rgba(42,42,114,.7) 46%, rgba(42,42,114,.2) 74%, transparent 100%),
    linear-gradient(to top, rgba(29,29,82,.5), transparent 45%);
}
.hero__inner{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto; width:100%;
  padding:2rem var(--pad);
}
/* Bag first, copy stacked beneath it, both anchored left. */
.hero__stack{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(.85rem, 1.6vh, 1.4rem);
  max-width:min(1060px, 80vw);   /* wide enough for the buttons + one-line tagline row */
}
/* The slogan is the h1, set inline beside the buttons rather than as a
   display heading — that's what buys the bag its height back. */
.hero__slogan{
  margin:0;
  font-size:clamp(1rem, 1.35vw, 1.22rem);
  font-style:italic; font-weight:800; line-height:1.2; letter-spacing:.005em;
  color:#fff;
  flex:0 0 auto;
  text-shadow:0 4px 18px rgba(0,0,0,.5);
  animation:rise .7s .1s cubic-bezier(.2,.9,.3,1) both;
}
/* On desktop the tagline sits on ONE line beside "See the Product". */
@media (min-width:861px){
  .hero__slogan{white-space:nowrap}
}
.hero__sub{
  font-size:clamp(1.02rem, 1.6vw, 1.2rem);
  line-height:1.6; color:rgba(255,255,255,.93);
  max-width:34ch; margin:0 0 2rem;
  animation:rise .7s .2s cubic-bezier(.2,.9,.3,1) both;
}
.hero__actions{
  display:flex; gap:.9rem 1.15rem; flex-wrap:wrap; align-items:center;
  animation:rise .7s .3s cubic-bezier(.2,.9,.3,1) both;
}
.hero__product{display:flex; justify-content:flex-start}
.hero__product img{
  width:auto; height:clamp(360px, 54vh, 560px);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.5));
  animation:float 6s ease-in-out 1s infinite, pop .8s .15s cubic-bezier(.2,.9,.3,1.3) both;
}

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; z-index:3;
  transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.6); border-radius:20px;
  display:flex; justify-content:center; padding-top:7px;
}
.hero__scroll span{
  width:4px; height:8px; border-radius:2px; background:#fff;
  animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .hero{min-height:auto; padding-bottom:3.5rem}
  .hero__inner{padding-top:1.5rem}
  .hero__stack{align-items:center; text-align:center; max-width:none; gap:1.25rem}
  .hero__product{justify-content:center}
  .hero__product img{height:clamp(240px, 42vh, 340px)}
  .hero__sub{margin-inline:auto}
  .hero__actions{justify-content:center}
  .hero__slogan{flex:1 1 100%; text-align:center; max-width:100%}
  .hero__scrim{background:linear-gradient(to bottom, rgba(29,29,82,.78), rgba(42,42,114,.9))}
  .hero__scroll{display:none}
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--powder);
  min-height:640px;
}
.about__media{position:relative; order:2; overflow:hidden}
.about__media img{
  width:100%; height:100%; object-fit:cover; object-position:65% center;
}
/* blend the photo's blue backdrop into the panel */
.about__media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--powder) 0%, rgba(127,175,196,.35) 22%, transparent 48%);
  pointer-events:none;
}
.about__panel{
  order:1;
  display:flex; align-items:center;
  padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,6vw,5.5rem) var(--pad);
}
.about__copy{max-width:600px; margin-left:auto; padding-right:2rem}
.about__copy p{
  font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.68;
  color:var(--navy-deep); margin:0 0 1.05rem; font-style:italic; font-weight:600;
}
.about__copy strong{font-weight:800; color:var(--navy)}

.stats{
  list-style:none; margin:2.2rem 0 0; padding:0;
  display:flex; gap:1rem; flex-wrap:wrap;
}
.stat{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  white-space:nowrap;               /* each phrase stays on one line */
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.75);
  border-radius:var(--r);
  padding:.9rem .85rem;
  font-size:clamp(.85rem,1vw,.98rem);
  font-weight:800; font-style:italic; line-height:1.25;
  color:var(--navy);
  backdrop-filter:blur(4px);
  transition:transform .22s ease, box-shadow .22s ease;
}
.stat::before{                      /* orange tick */
  content:""; flex:0 0 auto;
  width:20px; height:20px; border-radius:50%;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.stat:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(26,26,60,.14)}

@media (max-width:900px){
  .about{grid-template-columns:1fr}
  .about__media{order:1; height:min(56vh,420px)}
  .about__media img{object-position:70% 18%}
  .about__media::before{
    background:linear-gradient(to bottom, transparent 45%, var(--powder) 100%);
  }
  .about__panel{order:2; padding:0 var(--pad) 3.5rem}
  .about__copy{margin:0; padding-right:0; max-width:none}
  /* Stack the three cards full-width rather than squeezing them side by side. */
  .stats{gap:.6rem}
  .stat{flex:1 1 100%; min-width:0; padding:.85rem 1rem}
}

/* ==========================================================================
   PRODUCT — brand + icons
   ========================================================================== */
.brand{position:relative; overflow:hidden; background:#EDEDEF}
.brand__bg{
  position:absolute; inset:0;
  background:url("../images/towels-grey.jpg") right center/cover no-repeat;
}
.brand__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 55%, rgba(255,255,255,.35) 100%);
}
.brand__inner{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(3.5rem,7vw,6rem) var(--pad) 0;
}
.brand__head{text-align:center; max-width:none; margin:0 auto 1.4rem}
/* Flex lets the Fresh logo scale up without dragging the baseline around. */
.brand__title{
  display:flex; align-items:center; justify-content:center; gap:.22em;
  margin-bottom:.55rem;
}
.brand__title .inline-logo{height:1.75em; margin:0}
.brand__lead{
  font-size:clamp(.82rem,1.15vw,1.08rem); line-height:1.5;
  color:var(--navy-deep); opacity:.85; margin:0; font-style:italic; font-weight:600;
}
/* One line — but only where there's room. Forcing nowrap on a phone just
   clips the sentence off the side of the screen. */
@media (min-width:901px){
  .brand__lead{white-space:nowrap}
}

/* The label is part of each icon artwork, so no visible caption is needed. */
.icons{
  list-style:none; margin:0 0 .5rem; padding:0;
  display:grid; grid-template-columns:repeat(7,1fr); gap:1.25rem .5rem;
}
.icon{display:flex; justify-content:center}
.icon img{
  width:clamp(104px,11.2vw,164px); height:auto;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.3);
}
.icon:hover img{transform:translateY(-6px) scale(1.06)}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Bag sits left, clear of the towels on the right of the backdrop. */
.brand__bag{display:flex; justify-content:flex-start; margin-top:-1rem}
.brand__bag img{
  height:clamp(300px,36vw,470px); width:auto;
  filter:drop-shadow(0 34px 46px rgba(26,26,60,.34));
}

@media (max-width:900px){
  .icons{grid-template-columns:repeat(4,1fr); gap:1.4rem 1rem}
  .icon img{width:min(100%,120px)}
  .brand__inner{padding-bottom:0}
  .brand__bag{margin-top:1rem}
  .brand__bag img{height:clamp(240px,58vw,330px)}
}
/* Two across on phones — the labels are baked into the artwork, so the
   icons must stay large enough for that curved text to stay readable. */
@media (max-width:560px){
  .icons{grid-template-columns:repeat(2,1fr); gap:1.25rem; max-width:400px; margin-inline:auto}
  .icon img{width:min(100%,150px)}
  /* 7 icons over 2 columns leaves the last one stranded — centre it. */
  .icon:last-child{grid-column:1 / -1}
}

/* ==========================================================================
   PRODUCT — key benefits
   ========================================================================== */
.benefits{position:relative; overflow:hidden; background:#F4F7F4}
.benefits__bg{
  position:absolute; inset:0;
  background:url("../images/towels-window.jpg") right bottom/cover no-repeat;
}
.benefits__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 52%, rgba(255,255,255,.5) 100%);
}
.benefits__inner{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(3.5rem,7vw,6rem) var(--pad);
}
.benefits__head{margin-bottom:2.6rem}
.benefits__head .h2{display:flex; align-items:center; gap:.32em; flex-wrap:wrap}
.benefits__head .inline-logo{height:1.75em; margin:0}   /* matches the Fresh Brand heading */

.benefits__grid{
  display:grid; grid-template-columns:1.35fr .65fr; gap:2.5rem; align-items:start;
}
.blist{list-style:none; margin:0; padding:0; display:grid; gap:1.15rem}
.blist li{
  position:relative;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(42,42,114,.09);
  border-left:5px solid var(--orange);
  border-radius:10px;
  padding:1.05rem 1.3rem;
  backdrop-filter:blur(3px);
  transition:transform .22s ease, box-shadow .22s ease;
}
.blist li:hover{transform:translateX(5px); box-shadow:0 12px 30px rgba(26,26,60,.1)}
.blist h3{
  margin:0 0 .3rem;
  font-size:clamp(1.05rem,1.5vw,1.24rem); font-weight:800; font-style:italic;
  color:var(--navy);
}
.blist p{
  margin:0; font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.55;
  color:var(--navy-deep); opacity:.85; font-style:italic; font-weight:600;
}
/* Badge sits high in the column so it reads above the towels behind it. */
.benefits__badge{
  display:flex; justify-content:center; align-items:flex-start;
  align-self:start; padding-top:0; margin-top:-1.5rem;
}
.benefits__badge img{
  width:min(100%,340px); height:auto;
  filter:drop-shadow(0 16px 34px rgba(237,28,36,.22));
}

@media (max-width:900px){
  .benefits__grid{grid-template-columns:1fr; gap:2rem}
  .benefits__badge{order:-1; padding-top:0}
  .benefits__badge img{width:min(72%,260px)}
  .benefits__bg::after{background:rgba(255,255,255,.9)}
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--powder-deep);
  min-height:680px;
}
.contact__media{position:relative; order:2; overflow:hidden}
.contact__media img{width:100%; height:100%; object-fit:cover; object-position:65% center}
.contact__media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--powder-deep) 0%, rgba(94,147,172,.4) 24%, transparent 50%);
  pointer-events:none;
}
.contact__panel{
  order:1; display:flex; align-items:center;
  padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,5rem) var(--pad);
}
.contact__copy{max-width:640px; margin-left:auto; padding-right:1rem; color:#fff}

.contact__slogan{
  margin:0 0 2rem;
  font-size:clamp(2.6rem,5.6vw,4.4rem); font-style:italic; font-weight:800;
  line-height:1.05; letter-spacing:-.02em;
  text-shadow:0 4px 22px rgba(0,0,0,.28);
  display:flex; flex-direction:column; align-items:flex-start;
}
.cline{display:inline-flex; align-items:center; white-space:pre}
.cline--logo{align-items:center}
.ghost{visibility:hidden}   /* takes up space to align the next visible word */
.contact__slogan .inline-logo--lg{height:1.7em; margin:0 0 0 .12em}

.contact__label{
  font-size:clamp(1.15rem,1.8vw,1.45rem); font-weight:800; font-style:italic;
  margin:0 0 1rem; text-shadow:0 3px 14px rgba(0,0,0,.25);
}
.contact__details{
  font-style:normal;
  display:flex; flex-direction:column; gap:.35rem;
  margin-bottom:1.8rem;
}
.contact__details strong{
  font-size:clamp(1.2rem,1.9vw,1.55rem); font-weight:800; font-style:italic;
  letter-spacing:.01em; text-shadow:0 3px 14px rgba(0,0,0,.25);
}
.contact__details a{
  font-size:clamp(1.1rem,1.7vw,1.4rem); font-weight:700; font-style:italic;
  color:#fff; text-decoration:none;
  width:fit-content;
  border-bottom:2px solid rgba(255,255,255,.3);
  transition:border-color .2s ease, color .2s ease;
  text-shadow:0 3px 14px rgba(0,0,0,.25);
}
.contact__details a:hover{color:#FFD9A6; border-color:var(--orange)}

.social{display:flex; align-items:center; gap:.75rem; margin-bottom:1rem}
.social .contact__note{margin:0 0 0 .35rem}
.social__btn{
  flex:0 0 auto;                 /* don't let the caption squash the icons */
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.55);
  color:#fff; text-decoration:none;
  backdrop-filter:blur(4px);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.social__btn:hover{background:#fff; color:var(--navy); transform:translateY(-3px) scale(1.06)}

.contact__handle{
  margin:0 0 .5rem;
  font-size:clamp(1.4rem,2.4vw,2rem); font-weight:800; font-style:italic;
  letter-spacing:.02em; text-shadow:0 3px 16px rgba(0,0,0,.28);
}
.contact__note{
  margin:0; font-size:.9rem; font-weight:700; font-style:italic;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.6;
  color:rgba(255,255,255,.9);
}

@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  .contact__media{order:1; height:min(50vh,380px)}
  .contact__media img{object-position:70% 15%}
  .contact__media::before{background:linear-gradient(to bottom, transparent 45%, var(--powder-deep) 100%)}
  .contact__panel{order:2; padding:0 var(--pad) 3.5rem}
  .contact__copy{margin:0; padding-right:0; max-width:none}
  /* Bigger tap area for the tap-to-call / tap-to-email links on touch screens. */
  .contact__details a{padding-block:.3rem}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--navy-deep); color:#fff; padding:2.5rem var(--pad)}
.footer__inner{
  max-width:var(--wrap); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.footer__logo{height:96px; width:auto}
.footer__text{margin:0; font-size:.88rem; line-height:1.6; opacity:.8; text-align:center}
.footer__tag{font-style:italic; font-weight:700; opacity:.9}
.footer__links{margin:0; display:flex; gap:.6rem; align-items:center; font-size:.9rem; font-weight:700}
.footer__links a{color:#fff; text-decoration:none; opacity:.85; transition:opacity .2s, color .2s}
.footer__links a:hover{opacity:1; color:var(--orange)}

@media (max-width:700px){
  .footer__inner{flex-direction:column; text-align:center}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- Legal / policy pages ---------- */
.legal{background:#F4F6FA; padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(3rem,6vw,5rem)}
.legal__inner{
  max-width:820px; margin:0 auto;
  background:#fff; border:1px solid rgba(42,42,114,.1); border-radius:var(--r);
  box-shadow:0 8px 26px rgba(26,26,60,.06);
  padding:clamp(1.75rem,4vw,3rem);
}
.legal__meta{font-size:.85rem; font-weight:700; color:var(--navy); opacity:.6; margin:0 0 1.5rem}
.legal h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem); font-style:italic; font-weight:800;
  color:var(--navy); margin:2rem 0 .7rem;
}
.legal h2:first-of-type{margin-top:0}
.legal p, .legal li{
  font-size:1rem; line-height:1.7; color:var(--navy-deep); opacity:.92; margin:0 0 1rem;
}
.legal ul{margin:0 0 1rem; padding-left:1.25rem}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--orange-deep); font-weight:700; text-decoration:underline; word-break:break-word}
.legal strong{color:var(--navy); opacity:1}

/* ---------- Cookie consent ---------- */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:130;
  background:#fff; border-top:3px solid var(--orange);
  box-shadow:0 -8px 30px rgba(26,26,60,.16);
  padding:1rem var(--pad);
  animation:cookieUp .4s cubic-bezier(.2,.9,.3,1) both;
}
.cookie[hidden]{display:none}
@keyframes cookieUp{from{transform:translateY(100%)}to{transform:none}}
.cookie__inner{
  max-width:var(--wrap); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:.9rem 1.5rem; flex-wrap:wrap;
}
.cookie__text{
  margin:0; font-size:.9rem; line-height:1.55; color:var(--navy-deep);
  max-width:74ch; flex:1 1 320px;
}
.cookie__text a{color:var(--orange-deep); font-weight:700; text-decoration:underline}
.cookie__actions{display:flex; gap:.6rem; flex-shrink:0}
@media (max-width:560px){
  .cookie__actions{width:100%}
  .cookie__actions .btn{flex:1}
}

/* ==========================================================================
   FAQ PAGE
   ========================================================================== */
.faqhero{
  position:relative;
  background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #3352b4 100%);
  color:#fff;
  padding:calc(var(--nav-h) + clamp(2rem,5vw,3.5rem)) var(--pad) clamp(2.25rem,5vw,3.5rem);
  overflow:hidden;
}
.faqhero__inner{
  position:relative; z-index:1; max-width:var(--wrap); margin:0 auto;
  text-align:center;
}
.faqhero__title{
  font-size:clamp(2.2rem,5vw,3.6rem); font-style:italic; font-weight:800;
  line-height:1.05; letter-spacing:-.02em; margin:.2rem 0 1rem;
  text-shadow:0 6px 26px rgba(0,0,0,.35);
}
.faqhero__sub{
  font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.6; max-width:60ch;
  color:rgba(255,255,255,.92); margin:0 auto; font-style:italic; font-weight:600;
}
.faqhero .eyebrow{color:var(--orange)}

/* Breadcrumb */
.crumbs{
  display:flex; gap:.5rem; align-items:center; justify-content:center; margin-bottom:1.25rem;
  font-size:.85rem; font-weight:700; letter-spacing:.02em;
}
.crumbs a{color:rgba(255,255,255,.75); text-decoration:none; transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{color:rgba(255,255,255,.4)}
.crumbs span[aria-current]{color:var(--orange)}

/* Body: sidebar + content */
.faqx{background:#F4F6FA; padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(3rem,6vw,5rem)}
.faqx__inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:250px 1fr; gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}

/* Sticky category sidebar */
.faqnav{position:sticky; top:calc(var(--nav-h) + 1rem)}
.faqnav__label{
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); opacity:.6; margin:0 0 .85rem;
}
.faqnav__link{
  display:block; padding:.7rem .9rem; margin-bottom:.35rem;
  border-radius:10px;
  font-size:1rem; font-weight:800; font-style:italic;
  color:var(--navy-deep); text-decoration:none;
  border-left:3px solid transparent;
  transition:background .2s, color .2s, border-color .2s;
}
.faqnav__link:hover{background:rgba(42,42,114,.06)}
.faqnav__link.is-active{
  background:#fff; color:var(--orange-deep);
  border-left-color:var(--orange);
  box-shadow:0 4px 14px rgba(26,26,60,.07);
}
.faqnav__help{
  margin-top:1.5rem; padding:1.25rem;
  background:linear-gradient(135deg, var(--navy) 0%, #3352b4 100%);
  border-radius:var(--r); color:#fff;
}
.faqnav__help-title{margin:0 0 .2rem; font-size:1.05rem; font-weight:800; font-style:italic}
.faqnav__help-sub{margin:0 0 .9rem; font-size:.85rem; opacity:.85}
.btn--sm{padding:.6rem 1.3rem; font-size:.9rem}

/* Category blocks */
.faqcat{margin-bottom:clamp(1.75rem,3vw,2.5rem); scroll-margin-top:calc(var(--nav-h) + 1rem)}
.faqcat:last-child{margin-bottom:0}
.faqcat__title{
  font-size:clamp(1.4rem,2.4vw,1.9rem); font-style:italic; font-weight:800;
  color:var(--navy); margin:0 0 1rem; padding-bottom:.6rem;
  border-bottom:2px solid rgba(42,42,114,.1);
}

/* Accordion items */
.faq__item{
  background:#fff;
  border:1px solid rgba(42,42,114,.1);
  border-radius:var(--r);
  box-shadow:0 4px 16px rgba(26,26,60,.05);
  overflow:hidden; margin-bottom:.75rem;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.faq__item:last-child{margin-bottom:0}
.faq__item[open]{border-color:rgba(247,148,30,.55); box-shadow:0 12px 30px rgba(26,26,60,.1)}

.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 3.4rem 1.1rem 1.3rem; position:relative;
  font-size:clamp(1rem,1.4vw,1.15rem); font-weight:800; font-style:italic;
  color:var(--navy);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{           /* orange circle */
  content:""; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--orange);
}
.faq__item summary::before{          /* + / − sign drawn over the circle */
  content:""; position:absolute; right:1.2rem; top:50%; z-index:1;
  width:26px; height:26px; transform:translateY(-50%);
  background:
    linear-gradient(#fff,#fff) center/12px 2.6px no-repeat,
    linear-gradient(#fff,#fff) center/2.6px 12px no-repeat;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.faq__item[open] summary::before{     /* rotate the vertical bar away → minus */
  background:linear-gradient(#fff,#fff) center/12px 2.6px no-repeat;
}
.faq__item summary:hover{color:var(--orange-deep)}

.faq__answer{padding:0 1.3rem 1.25rem; animation:faqIn .28s ease}
.faq__answer p{
  margin:0 0 .7rem; font-size:clamp(.97rem,1.25vw,1.06rem); line-height:1.65;
  color:var(--navy-deep); opacity:.9;
}
.faq__answer p:last-child{margin-bottom:0}
.faq__answer strong{color:var(--navy); opacity:1}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* Where to buy — social buttons */
.faqbuy{display:flex; gap:.7rem; flex-wrap:wrap; margin:1.1rem 0 .4rem}
.faqbuy__btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.25rem; border-radius:100px;
  font-size:.95rem; font-weight:800; font-style:italic; text-decoration:none; color:#fff;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.faqbuy__btn svg{flex:0 0 auto}
.faqbuy__btn--ig{background:linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 55%,#cc2366 75%,#bc1888)}
.faqbuy__btn--tt{background:#111}
.faqbuy__btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(26,26,60,.2); filter:brightness(1.06)}

/* CTA */
.faq__cta{
  max-width:var(--wrap); margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  text-align:center;
  background:#fff; border:1px solid rgba(42,42,114,.1); border-radius:var(--r);
  padding:clamp(2rem,4vw,2.8rem) var(--pad);
  box-shadow:0 8px 26px rgba(26,26,60,.06);
}
.faq__cta-lead{margin:0 0 .35rem; font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:800; font-style:italic; color:var(--navy)}
.faq__cta-sub{margin:0 0 1.4rem; font-size:1rem; color:var(--navy-deep); opacity:.8}
.faq__cta-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.btn--ghost-dark{background:transparent; color:var(--navy); border:2px solid rgba(42,42,114,.4)}
.btn--ghost-dark:hover{background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px)}

/* Sidebar → horizontal scroll strip on tablet/mobile */
@media (max-width:820px){
  .faqx__inner{grid-template-columns:1fr; gap:1.5rem}
  .faqnav{
    position:static;
    display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem;
    -webkit-overflow-scrolling:touch;
  }
  .faqnav__label{display:none}
  .faqnav__link{
    flex:0 0 auto; margin:0; white-space:nowrap;
    border:1px solid rgba(42,42,114,.15); border-left-width:1px;
    padding:.55rem 1rem; font-size:.92rem;
  }
  .faqnav__link.is-active{border-color:var(--orange)}
  .faqnav__help{display:none}
}