/* ============================================================
   Razani Business — main site stylesheet
   Palette: forest green + gold from the logo, palm red from the pack.
   ============================================================ */

/* ------------------------------------------------------------
   0. Tokens
   ------------------------------------------------------------ */
:root{
  /* surfaces */
  --cream:#FAF7F0;
  --cream-2:#F3EEE4;
  --cream-3:#EBE3D5;
  --white:#FFFFFF;

  /* brand greens */
  --green-950:#0B1710;
  --green-900:#10241A;
  --green-800:#173324;
  --green-700:#1B3B29;
  --green-600:#2F5A43;
  --green-400:#6B8F6B;

  /* gold: -dk reads on cream, -lt reads on green */
  --gold-dk:#A8781F;
  --gold:#C99A2E;
  --gold-lt:#F2C14E;
  --gold-pale:#FFDC8A;

  /* the pack red, used sparingly */
  --red:#C4302B;
  --red-dk:#9B241F;

  /* text */
  --ink:#16241C;
  --ink-2:#405448;
  --ink-3:#6B7D71;
  --on-dark:#F6F0E4;
  --on-dark-2:rgba(246,240,228,.72);
  --on-dark-3:rgba(246,240,228,.48);

  --line:rgba(22,36,28,.12);
  --line-2:rgba(22,36,28,.07);
  --line-dark:rgba(246,240,228,.14);

  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-ui:"Plus Jakarta Sans","Segoe UI",Inter,system-ui,-apple-system,sans-serif;

  --shell:min(1200px,100% - 3rem);
  --shell-narrow:min(880px,100% - 3rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:18px;
  --radius-sm:12px;

  --shadow-sm:0 2px 10px rgba(11,23,16,.06);
  --shadow:0 14px 40px rgba(11,23,16,.10);
  --shadow-lg:0 28px 70px rgba(11,23,16,.18);

  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}

/* Author rules beat the UA stylesheet, so any class setting `display` would
   otherwise defeat the hidden attribute. Keep this above everything else. */
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{color:var(--green-700);text-decoration-color:rgba(27,59,41,.3);text-underline-offset:3px}
a:hover{color:var(--gold-dk)}

::selection{background:var(--gold-lt);color:var(--green-950)}

:focus-visible{outline:2px solid var(--gold-dk);outline-offset:3px;border-radius:4px}

.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;
}

.skip-link{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);
  z-index:200;padding:.7rem 1.2rem;border-radius:0 0 10px 10px;
  background:var(--green-900);color:var(--on-dark);font-weight:600;
  text-decoration:none;transition:top .2s var(--ease);
}
.skip-link:focus{top:0;color:var(--on-dark)}

/* ------------------------------------------------------------
   1. Typography
   ------------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,1.4rem + 3.4vw,4rem);font-weight:300}
h2{font-size:clamp(1.85rem,1.2rem + 2.2vw,2.9rem);font-weight:300}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);font-weight:600;letter-spacing:-.01em}
h4{font-size:1.05rem;font-weight:600;font-family:var(--font-ui);letter-spacing:0}

p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 1.1rem;
  font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dk);
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--gold);flex:none;
}
.eyebrow--center{justify-content:center}

.lede{
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  line-height:1.65;
  color:var(--ink-2);
  max-width:62ch;
}

.muted{color:var(--ink-2)}

/* Dark sections invert the type colours. The hero, page header and CTA band
   are always dark, so they get the same treatment without needing the class.
   Links are excluded when they are buttons — those carry their own colours. */
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--on-dark)}
.on-dark p,.on-dark .lede{color:var(--on-dark-2)}
.on-dark a:not(.btn){color:var(--gold-pale)}

.on-dark .eyebrow,
.hero .eyebrow,
.page-head .eyebrow{color:var(--gold-lt)}
.on-dark .eyebrow::before,
.hero .eyebrow::before,
.page-head .eyebrow::before{background:var(--gold-lt)}

.hero a:not(.btn),
.page-head a:not(.btn){color:var(--gold-pale)}

/* ------------------------------------------------------------
   2. Layout primitives
   ------------------------------------------------------------ */
.shell{width:var(--shell);margin-inline:auto}
.shell-narrow{width:var(--shell-narrow);margin-inline:auto}

.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}

.section--cream2{background:var(--cream-2)}
.section--green{background:var(--green-900);position:relative;overflow:hidden}
.section--green-700{background:var(--green-700);position:relative;overflow:hidden}

.section-head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head--center{margin-inline:auto;text-align:center}

.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}

/* grid-2 stays fluid — it is also used inside narrow columns */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* grid-3 and grid-4 step down explicitly so a row never orphans one card */
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1040px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
}

/* image + text split */
.split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.split__media{position:relative}
.split--reverse .split__media{order:2}
/* for splits where one column is much taller, e.g. a form */
.split--top{align-items:start}

@media (max-width:719px){
  .split--reverse .split__media{order:0}
}

/* ------------------------------------------------------------
   3. Decorative palm-frond field (dark sections)
   ------------------------------------------------------------ */
.fronds{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("../img/fronds.svg");
  background-size:520px;
  opacity:.07;
}
.section--green > .shell,
.section--green-700 > .shell,
.section--green > .shell-narrow{position:relative;z-index:1}

.glow-gold{
  position:absolute;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(242,193,78,.16),transparent 68%);
  filter:blur(30px);
}

/* ------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.6rem;
  border:1px solid transparent;border-radius:999px;
  font-family:var(--font-ui);font-size:.92rem;font-weight:600;
  letter-spacing:.01em;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primary{
  background:linear-gradient(140deg,var(--gold-lt),var(--gold));
  color:var(--green-950);
  box-shadow:0 8px 24px rgba(201,154,46,.28);
}
.btn--primary:hover{
  color:var(--green-950);
  box-shadow:0 14px 34px rgba(201,154,46,.4);
}

.btn--dark{background:var(--green-800);color:var(--on-dark)}
.btn--dark:hover{background:var(--green-700);color:var(--on-dark)}

.btn--ghost{
  background:transparent;border-color:var(--line);
  color:var(--ink);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-dk);background:rgba(201,154,46,.06)}

.on-dark .btn--ghost,
.hero .btn--ghost,
.page-head .btn--ghost{border-color:var(--line-dark);color:var(--on-dark)}
.on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-head .btn--ghost:hover{
  border-color:var(--gold-lt);color:var(--gold-pale);background:rgba(242,193,78,.08);
}

.btn--wa{background:#25D366;color:#06301A}
.btn--wa:hover{background:#1FBE5B;color:#06301A}

.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn-row--center{justify-content:center}

/* text link with arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:.93rem;text-decoration:none;
  color:var(--gold-dk);
}
.link-arrow svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.on-dark .link-arrow{color:var(--gold-pale)}

/* ------------------------------------------------------------
   5. Header
   ------------------------------------------------------------ */
.header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(250,247,240,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.header.is-stuck{
  border-bottom-color:var(--line-2);
  box-shadow:var(--shadow-sm);
}

.header__inner{
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}

.brand{
  display:flex;align-items:center;gap:.7rem;
  text-decoration:none;flex:none;
}
.brand img{width:38px;height:auto}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-ui);font-weight:800;
  font-size:1.02rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green-800);
}
.brand__sub{
  font-size:.54rem;font-weight:600;letter-spacing:.36em;text-indent:.36em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.28rem;
}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  position:relative;
  padding:.55rem .85rem;border-radius:8px;
  font-size:.92rem;font-weight:500;color:var(--ink-2);
  text-decoration:none;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.32rem;
  height:1.5px;border-radius:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--green-800);font-weight:600}

.header__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.header__cta .btn{padding:.7rem 1.25rem;font-size:.86rem}

/* duplicate CTA that only appears inside the mobile drawer */
.nav__cta{display:none}

/* mobile toggle */
.nav-toggle{
  display:none;
  width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:10px;
  background:transparent;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle span:not(.sr-only){
  display:block;position:relative;
  width:19px;height:1.5px;border-radius:2px;background:var(--ink);
  transition:background .2s var(--ease);
}
.nav-toggle span:not(.sr-only)::before,
.nav-toggle span:not(.sr-only)::after{
  content:"";position:absolute;left:0;
  width:19px;height:1.5px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease);
}
.nav-toggle span:not(.sr-only)::before{top:-6px}
.nav-toggle span:not(.sr-only)::after{top:6px}
.nav-toggle[aria-expanded="true"] span:not(.sr-only){background:transparent}
.nav-toggle[aria-expanded="true"] span:not(.sr-only)::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:not(.sr-only)::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:940px){
  .nav-toggle{display:flex}
  .header__cta .btn--call{display:none}

  .nav{
    position:fixed;inset:var(--header-h) 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    padding:1rem 1.5rem 1.75rem;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    transform:translateY(-12px);
    opacity:0;visibility:hidden;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav a{
    padding:.9rem .25rem;border-radius:0;
    border-bottom:1px solid var(--line-2);
    font-size:1.02rem;
  }
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--gold-dk)}
  .nav__cta{display:inline-flex;margin-top:1.1rem;width:100%;border-bottom:0}
}

/* ------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(70% 60% at 15% 10%,rgba(47,90,67,.55),transparent 60%),
    radial-gradient(55% 50% at 88% 78%,rgba(201,154,46,.14),transparent 62%),
    linear-gradient(165deg,var(--green-800) 0%,var(--green-900) 52%,var(--green-950) 100%);
  padding-block:clamp(3rem,7vw,5.5rem);
}
.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  position:relative;z-index:1;
}
@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero .eyebrow{justify-content:center}
  .hero .btn-row{justify-content:center}
  .hero .lede{margin-inline:auto}
  .hero__media{max-width:380px;margin-inline:auto}
}

.hero h1{
  color:var(--on-dark);
  margin-bottom:.35em;
  text-shadow:0 18px 55px rgba(0,0,0,.4);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--gold-pale),var(--gold-lt));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{color:var(--on-dark-2);margin-bottom:1.9rem}

.hero__media{position:relative}
.hero__media img{
  width:100%;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.hero__badge{
  position:absolute;left:-14px;bottom:26px;
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1.1rem;
  border-radius:999px;
  background:var(--cream);
  box-shadow:var(--shadow);
  font-size:.76rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-800);
}
.hero__badge span{
  width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;
}
@media (max-width:880px){.hero__badge{left:50%;transform:translateX(-50%);bottom:-16px}}

/* ------------------------------------------------------------
   6b. Photo hero (homepage)
   ------------------------------------------------------------ */
.hero-v2{
  position:relative;
  overflow:hidden;
  background:var(--green-950);
  padding-block:clamp(2.75rem,6vw,4.5rem);
  min-height:clamp(540px,70vh,760px);
  display:flex;align-items:center;
  isolation:isolate;
}

/* The supplied hero photo already contains the pack, so nothing is layered
   on top of it — the middle grid column below is deliberately left empty so
   the pack in the photograph shows through. */
.hero-v2__bg{
  position:absolute;inset:0;z-index:-2;
  background:url("../img/hero-bg-md.jpg") 58% center / cover no-repeat;
}
@media (min-width:981px){
  .hero-v2__bg{background-image:url("../img/hero-bg.jpg");background-position:center 44%}
}

/* The photo is bright, so the left side needs a heavy scrim for white text.
   It falls away before the pack so the product is not dulled. */
.hero-v2__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg,
      rgba(6,16,11,.95) 0%,
      rgba(6,16,11,.90) 26%,
      rgba(6,16,11,.66) 40%,
      rgba(6,16,11,.22) 54%,
      rgba(6,16,11,.06) 66%,
      rgba(6,16,11,.32) 100%),
    linear-gradient(180deg,
      rgba(6,16,11,.42) 0%,
      rgba(6,16,11,0) 22%,
      rgba(6,16,11,0) 66%,
      rgba(6,16,11,.48) 100%);
}

.hero-v2__inner{
  width:var(--shell);margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr) auto;
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:center;
}
.hero-v2__copy{grid-column:1}
.hero-v2__badges{grid-column:3}

.hero-v2__eyebrow{
  margin:0 0 1.1rem;
  font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-pale);
}
.hero-v2__eyebrow span{color:rgba(255,220,138,.55);margin-inline:.45rem}

.hero-v2 h1{
  font-family:var(--font-ui);
  font-weight:800;
  font-size:clamp(2.1rem,1.2rem + 3.4vw,3.85rem);
  line-height:1.06;
  letter-spacing:-.025em;
  color:#fff;
  margin:0 0 .55em;
  text-shadow:0 14px 44px rgba(0,0,0,.55);
}

.hero-v2__lede{
  max-width:44ch;
  margin:0 0 1.9rem;
  font-size:clamp(.98rem,.94rem + .25vw,1.1rem);
  line-height:1.65;
  color:rgba(255,255,255,.86);
  text-shadow:0 3px 16px rgba(0,0,0,.5);
}

.hero-v2__script{
  margin:2.1rem 0 0;
  font-family:"Dancing Script","Segoe Script",cursive;
  font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);
  font-weight:600;
  line-height:1.25;
  color:var(--gold-pale);
  text-shadow:0 4px 20px rgba(0,0,0,.5);
}

/* badge rail */
.hero-v2__badges{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(.9rem,2vw,1.5rem);
}
/* Each badge is a full pill. The photo is busy and bright on the right, so a
   text shadow alone will not hold the label — it needs its own backing. */
.hero-v2__badges li{
  display:flex;align-items:center;gap:.7rem;
  padding:.4rem 1.1rem .4rem .4rem;
  border-radius:999px;
  background:rgba(8,20,13,.62);
  border:1px solid rgba(242,193,78,.26);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  font-size:.84rem;font-weight:700;
  color:#fff;
  white-space:nowrap;
}
.hero-v2__badges span{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:rgba(242,193,78,.14);
  border:1px solid rgba(242,193,78,.4);
  color:var(--gold-lt);
}
.hero-v2__badges svg{width:18px;height:18px}

/* two columns: the empty spacer goes, badges move beside the copy */
@media (max-width:1080px){
  .hero-v2__inner{grid-template-columns:minmax(0,1fr) auto}
  .hero-v2__badges{grid-column:2}
}

/* stacked: the photo carries the pack behind a heavier scrim */
@media (max-width:820px){
  .hero-v2{min-height:0}
  .hero-v2__inner{grid-template-columns:minmax(0,1fr);text-align:center}
  .hero-v2__copy,.hero-v2__badges{grid-column:1}
  .hero-v2__lede{margin-inline:auto}
  .hero-v2 .btn-row{justify-content:center}
  .hero-v2__scrim{
    background:
      linear-gradient(180deg,
        rgba(6,16,11,.90) 0%,
        rgba(6,16,11,.82) 45%,
        rgba(6,16,11,.72) 72%,
        rgba(6,16,11,.88) 100%);
  }
  .hero-v2__badges{
    margin-top:.75rem;
    grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
    justify-items:center;
    justify-content:center;
  }
}
@media (max-width:520px){
  .hero-v2__badges{grid-template-columns:1fr;justify-items:start;max-width:235px;margin-inline:auto}
}

/* ------------------------------------------------------------
   6c. "Our Product" band (homepage)
   ------------------------------------------------------------ */
.product-band__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:center;
}
@media (max-width:1000px){
  .product-band__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .product-band__media{order:2}
  .product-band__why{grid-column:1 / -1;order:3}
}
@media (max-width:680px){
  .product-band__grid{grid-template-columns:minmax(0,1fr)}
  .product-band__media{max-width:320px;margin-inline:auto}
}

.product-band__copy h2{margin-bottom:.35em}
.product-band__copy h3{
  font-family:var(--font-ui);
  font-size:1.08rem;font-weight:700;
  letter-spacing:0;
  color:var(--red);
  margin-bottom:.7rem;
}
.product-band__copy p{color:var(--ink-2);margin-bottom:1.6rem}

.product-band__media{
  max-width:340px;
  margin-inline:auto;
}
.product-band__media img{
  width:100%;
  border-radius:14px;
  box-shadow:var(--shadow);
}

.product-band__why{
  padding:clamp(1.5rem,3vw,2.1rem);
  border-radius:var(--radius);
  background:linear-gradient(160deg,var(--green-700),var(--green-950));
  box-shadow:var(--shadow);
}
.product-band__why h3{
  color:#fff;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  margin-bottom:1.2rem;
}
.product-band__why ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.product-band__why li{
  position:relative;
  padding-left:2rem;
  font-size:.95rem;
  line-height:1.5;
  color:rgba(246,240,228,.88);
}
.product-band__why li::before{
  content:"";position:absolute;left:0;top:.28em;
  width:19px;height:19px;border-radius:50%;
  background:var(--gold-lt);
}
.product-band__why li::after{
  content:"";position:absolute;left:6px;top:.56em;
  width:7px;height:4px;
  border-left:2px solid var(--green-950);
  border-bottom:2px solid var(--green-950);
  transform:rotate(-45deg);
}

/* red call-to-action, used by the product band */
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dk);color:#fff}

/* trust strip under the hero */
.trust{
  background:var(--green-950);
  border-top:1px solid rgba(246,240,228,.08);
  padding-block:1.1rem;
}
.trust__list{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem clamp(1.2rem,4vw,3rem);
  margin:0;padding:0;list-style:none;
}
.trust__list li{
  display:flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-2);
}
.trust__list svg{width:15px;height:15px;color:var(--gold-lt);flex:none}

/* ------------------------------------------------------------
   7. Page header (inner pages)
   ------------------------------------------------------------ */
/* Each page supplies its own banner through --head-img. Pages that do not set
   it fall back to the plain green gradient, so nothing breaks if a photo is
   missing. The scrim is heavy because the photos are bright and the title has
   to stay crisp — the image reads as texture, not as a picture. */
.page-head{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:var(--green-950);
  background-image:linear-gradient(160deg,var(--green-800),var(--green-950));
  padding-block:clamp(3.25rem,7vw,5.25rem);
  text-align:center;
}

/* One banner across every inner page. Override --head-img on a single page if
   it ever needs its own. The negative inset hides the blur's soft edge. */
.page-head{--head-img:url("../img/header-band.jpg")}

@media (max-width:980px){
  .page-head{--head-img:url("../img/header-band-md.jpg")}
}

.page-head::before{
  content:"";
  position:absolute;inset:-24px;z-index:-2;
  background-image:var(--head-img,none);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:blur(1.5px);
}

/* Scrim. The banner is a bright kitchen shot, so white text still needs a good
   deal of cover — but it is lighter than it would be over a busier photo. */
.page-head::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(172deg,
    rgba(8,20,13,.82) 0%,
    rgba(8,20,13,.68) 50%,
    rgba(8,20,13,.86) 100%);
}

/* the frond texture competes with a photograph — keep it barely there */
.page-head .fronds{opacity:.04}
.page-head h1{color:var(--on-dark);margin-bottom:.3em}
.page-head p{color:var(--on-dark-2);max-width:56ch;margin-inline:auto}
.page-head .eyebrow{justify-content:center}

.crumbs{
  display:flex;justify-content:center;gap:.5rem;
  margin:1.4rem 0 0;padding:0;list-style:none;
  font-size:.76rem;color:var(--on-dark-3);
}
.crumbs a{color:var(--on-dark-3);text-decoration:none}
.crumbs a:hover{color:var(--gold-pale)}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}

/* ------------------------------------------------------------
   8. Cards
   ------------------------------------------------------------ */
.card{
  position:relative;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(201,154,46,.35)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem;color:var(--ink-2);margin-bottom:0}

.card__icon{
  display:grid;place-items:center;
  width:48px;height:48px;margin-bottom:1.1rem;
  border-radius:14px;
  background:linear-gradient(150deg,rgba(201,154,46,.16),rgba(201,154,46,.05));
  border:1px solid rgba(201,154,46,.24);
  color:var(--gold-dk);
}
.card__icon svg{width:22px;height:22px}

.on-dark .card{
  background:rgba(255,255,255,.045);
  border-color:var(--line-dark);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.on-dark .card:hover{background:rgba(255,255,255,.07);border-color:rgba(242,193,78,.34)}
.on-dark .card h3{color:var(--on-dark)}
.on-dark .card p{color:var(--on-dark-2)}
.on-dark .card__icon{
  background:linear-gradient(150deg,rgba(242,193,78,.2),rgba(242,193,78,.05));
  border-color:rgba(242,193,78,.3);color:var(--gold-lt);
}

/* numbered process steps */
.step{
  position:relative;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step__num{
  display:block;margin-bottom:.9rem;
  font-family:var(--font-display);font-size:2.1rem;font-weight:300;
  line-height:1;color:var(--gold);
}
.step h3{font-size:1.1rem;margin-bottom:.45rem}
.step p{font-size:.93rem;color:var(--ink-2);margin-bottom:0}

/* ------------------------------------------------------------
   9. Media
   ------------------------------------------------------------ */
.media{
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--cream-2);
}
.media img{width:100%;display:block}

.media--frame{
  position:relative;padding:0;
}
.media--frame::after{
  content:"";position:absolute;inset:0;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}

.media-stack{position:relative}
.media-stack__accent{
  position:absolute;right:-16px;bottom:-16px;z-index:-1;
  width:62%;aspect-ratio:1;border-radius:var(--radius);
  background:linear-gradient(140deg,rgba(201,154,46,.3),rgba(47,90,67,.18));
}

figure{margin:0}
figcaption{
  margin-top:.7rem;font-size:.82rem;color:var(--ink-3);text-align:center;
}

/* ------------------------------------------------------------
   10. Feature list / checks
   ------------------------------------------------------------ */
.checks{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.75rem}
.checks li{
  position:relative;padding-left:2rem;
  font-size:.98rem;color:var(--ink-2);line-height:1.6;
}
.checks li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:19px;height:19px;border-radius:50%;
  background:rgba(201,154,46,.15);
  border:1px solid rgba(201,154,46,.4);
}
.checks li::after{
  content:"";position:absolute;left:6px;top:.72em;
  width:7px;height:4px;
  border-left:1.6px solid var(--gold-dk);
  border-bottom:1.6px solid var(--gold-dk);
  transform:rotate(-45deg);
}
.on-dark .checks li{color:var(--on-dark-2)}
.on-dark .checks li::before{background:rgba(242,193,78,.18);border-color:rgba(242,193,78,.45)}
.on-dark .checks li::after{border-color:var(--gold-lt)}

/* spec table */
.specs{
  width:100%;border-collapse:collapse;
  font-size:.95rem;
}
.specs th,.specs td{
  padding:.85rem 0;text-align:left;
  border-bottom:1px solid var(--line-2);
  vertical-align:top;
}
.specs th{
  width:42%;font-weight:600;color:var(--ink);
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
}
.specs td{color:var(--ink-2)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------
   11. Quote / callout
   ------------------------------------------------------------ */
.quote{
  position:relative;
  padding:clamp(1.75rem,4vw,2.75rem);
  border-radius:var(--radius);
  border:1px solid rgba(242,193,78,.28);
  background:linear-gradient(150deg,rgba(242,193,78,.09),rgba(47,90,67,.06));
}
.quote p{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.7rem);
  line-height:1.4;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:0;
}
.on-dark .quote p{color:var(--on-dark)}

.callout{
  padding:1.15rem 1.35rem;
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(201,154,46,.08);
  font-size:.95rem;color:var(--ink-2);
}
.callout strong{color:var(--ink)}

/* ------------------------------------------------------------
   12. Stats
   ------------------------------------------------------------ */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(1.25rem,3vw,2.5rem);
}
.stat{text-align:center}
.stat__val{
  display:block;
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2rem,1.4rem + 2vw,2.9rem);
  line-height:1;color:var(--gold-lt);margin-bottom:.4rem;
}
.stat__label{
  font-size:.74rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-2);
}

/* ------------------------------------------------------------
   13. Contact
   ------------------------------------------------------------ */
.contact-card{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.35rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);
  text-decoration:none;color:inherit;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
a.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(201,154,46,.4)}
.contact-card__icon{
  display:grid;place-items:center;flex:none;
  width:42px;height:42px;border-radius:12px;
  background:rgba(201,154,46,.12);
  border:1px solid rgba(201,154,46,.26);
  color:var(--gold-dk);
}
.contact-card__icon svg{width:19px;height:19px}
.contact-card__label{
  display:block;font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:.2rem;
}
.contact-card__value{
  display:block;font-weight:600;color:var(--ink);
  line-height:1.4;word-break:break-word;
}
.contact-card__alt{display:block;font-size:.9rem;color:var(--ink-2)}

.copy-btn{
  margin-top:.5rem;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:transparent;
  font-family:var(--font-ui);font-size:.74rem;font-weight:600;
  color:var(--ink-2);cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.copy-btn:hover{border-color:var(--gold);color:var(--gold-dk);background:rgba(201,154,46,.07)}
.copy-btn svg{width:13px;height:13px}
.copy-btn.is-done{border-color:var(--green-600);color:var(--green-600)}

/* form */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{
  font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);
}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);
  font-family:var(--font-ui);font-size:.98rem;color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,154,46,.15);
}
.field textarea{min-height:150px;resize:vertical}
.field__hint{font-size:.8rem;color:var(--ink-3)}
.field--hp{position:absolute;left:-9999px}

.form-note{font-size:.85rem;color:var(--ink-3)}

/* ---- human check ------------------------------------------------------
   Self-hosted, deliberately branded as ours rather than dressed up to look
   like somebody else's service. */
.hcheck{
  padding:1rem 1.15rem 1.05rem;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--white);
  box-shadow:var(--shadow-sm);
}

.hcheck__top{display:flex;align-items:center;gap:.7rem}

.hcheck__box{
  appearance:none;-webkit-appearance:none;
  flex:none;
  width:24px;height:24px;margin:0;
  border:2px solid var(--ink-3);
  border-radius:5px;
  background:var(--white);
  cursor:pointer;
  display:grid;place-content:center;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.hcheck__box::before{
  content:"";
  width:11px;height:6px;
  border-left:2.5px solid var(--white);
  border-bottom:2.5px solid var(--white);
  transform:rotate(-45deg) scale(0);
  transition:transform .2s var(--ease);
  margin-top:-3px;
}
.hcheck__box:checked{background:var(--green-600);border-color:var(--green-600)}
.hcheck__box:checked::before{transform:rotate(-45deg) scale(1)}
.hcheck__box:hover{border-color:var(--green-600)}

.hcheck__label{font-size:.95rem;font-weight:600;color:var(--ink);cursor:pointer}

.hcheck__body{
  margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--line-2);
}
.hcheck__img{
  display:block;
  width:230px;max-width:100%;height:auto;
  margin-bottom:.65rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--cream-2);
  /* the characters are deliberately awkward — do not let the browser
     smooth them into something an OCR pass finds easier */
  image-rendering:pixelated;
}

.hcheck__q{
  display:block;
  margin:0 0 .5rem;
  font-size:.92rem;color:var(--ink-2);
}

.hcheck__prompt{
  display:block;
  margin-bottom:.4rem;
  font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}

.hcheck__alt{
  display:inline-block;
  margin-top:.7rem;padding:0;
  border:0;background:none;
  font-family:var(--font-ui);font-size:.8rem;
  color:var(--green-700);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.hcheck__alt:hover{color:var(--gold-dk)}
.hcheck__row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hcheck__row input{
  flex:1 1 150px;min-width:0;
  padding:.6rem .8rem;
  border:1px solid var(--line);border-radius:9px;
  font-family:var(--font-ui);font-size:.95rem;color:var(--ink);
  background:var(--white);
}
.hcheck__row input:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,154,46,.15);
}

.hcheck__refresh{
  flex:none;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem .7rem;
  border:1px solid var(--line);border-radius:999px;
  background:transparent;cursor:pointer;
  font-family:var(--font-ui);font-size:.74rem;font-weight:600;color:var(--ink-2);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.hcheck__refresh:hover{border-color:var(--gold);color:var(--gold-dk);background:rgba(201,154,46,.07)}
.hcheck__refresh svg{width:13px;height:13px}

.hcheck__foot{
  display:flex;align-items:center;gap:.4rem;
  margin-top:.85rem;
  font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.hcheck__foot img{width:15px;height:auto;opacity:.75}

.hcheck__error{
  margin-top:.7rem;
  font-size:.85rem;color:var(--red-dk);
}

.alert{
  padding:1rem 1.2rem;border-radius:var(--radius-sm);
  font-size:.95rem;border:1px solid;
}
.alert--ok{background:rgba(47,90,67,.08);border-color:rgba(47,90,67,.3);color:var(--green-700)}
.alert--err{background:rgba(196,48,43,.07);border-color:rgba(196,48,43,.3);color:var(--red-dk)}

/* ------------------------------------------------------------
   13b. Management team
   ------------------------------------------------------------ */
.team{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
/* stays two-up on phones — four stacked portraits makes the page very long */
@media (max-width:900px){.team{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}}
@media (max-width:340px){.team{grid-template-columns:minmax(0,1fr)}}

.team__member{text-align:center}

.team__photo{
  display:block;
  width:clamp(128px,15vw,172px);
  aspect-ratio:1;
  margin:0 auto 1.15rem;
  border-radius:50%;
  object-fit:cover;          /* keeps any photo shape circular without squashing */
  background:var(--cream-3);
  border:3px solid var(--white);
  box-shadow:0 10px 30px rgba(11,23,16,.14),0 0 0 1px rgba(201,154,46,.32);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.team__member:hover .team__photo{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(11,23,16,.2),0 0 0 1px rgba(201,154,46,.55);
}

.team__name{
  margin:0 0 .3rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.12rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.team__role{
  margin:0;
  font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dk);
}

/* ------------------------------------------------------------
   13d. Testimonial slider

   Built on native scroll-snap rather than transforms, so it swipes on
   touch, scrolls with the keyboard, and still works if the JavaScript
   never runs — the buttons and dots are an enhancement on top.
   ------------------------------------------------------------ */
.tstm{--tgap:clamp(1rem,2.2vw,1.5rem);position:relative}

.tstm__viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;              /* the dots are the affordance */
  -ms-overflow-style:none;
  padding-bottom:.35rem;
  border-radius:var(--radius);
}
.tstm__viewport::-webkit-scrollbar{display:none}
.tstm__viewport:focus-visible{outline:2px solid var(--gold-dk);outline-offset:4px}

.tstm__track{
  display:flex;
  gap:var(--tgap);
  margin:0;padding:0;
  list-style:none;
}

.tstm__item{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:flex;
}
@media (min-width:700px){
  .tstm__item{flex-basis:calc((100% - var(--tgap)) / 2)}
}
@media (min-width:1040px){
  .tstm__item{flex-basis:calc((100% - 2 * var(--tgap)) / 3)}
}

.tstm__card{
  position:relative;
  display:flex;flex-direction:column;
  width:100%;
  margin:0;
  padding:clamp(1.5rem,3vw,2rem);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.tstm__card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:rgba(201,154,46,.35);
}

.tstm__mark{
  font-family:var(--font-display);
  font-size:3.4rem;line-height:.6;
  color:var(--gold);
  opacity:.5;
  margin-bottom:.6rem;
}

.tstm__card blockquote{margin:0 0 1.35rem;flex:1}
.tstm__card blockquote p{
  margin:0;
  font-size:1rem;
  line-height:1.65;
  color:var(--ink-2);
  text-wrap:pretty;
}

.tstm__card figcaption{
  padding-top:1rem;
  border-top:1px solid var(--line-2);
}
.tstm__name{
  display:block;
  font-family:var(--font-display);
  font-weight:600;font-size:1.02rem;
  color:var(--ink);
}
.tstm__role{
  display:block;margin-top:.15rem;
  font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dk);
}

/* controls */
.tstm__controls{
  display:flex;align-items:center;justify-content:center;
  gap:1rem;
  margin-top:clamp(1.4rem,3vw,2rem);
}

.tstm__btn{
  display:grid;place-items:center;
  width:42px;height:42px;flex:none;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  color:var(--ink-2);
  cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),
             background .3s var(--ease),transform .3s var(--ease);
}
.tstm__btn svg{width:17px;height:17px}
.tstm__btn:hover:not(:disabled){
  border-color:var(--gold);color:var(--gold-dk);
  background:rgba(201,154,46,.07);
  transform:translateY(-2px);
}
.tstm__btn:disabled{opacity:.35;cursor:default}

.tstm__dots{display:flex;align-items:center;gap:.5rem}

.tstm__dot{
  width:9px;height:9px;padding:0;
  border:0;border-radius:50%;
  background:rgba(22,36,28,.20);
  cursor:pointer;
  transition:background .3s var(--ease),width .3s var(--ease);
}
.tstm__dot:hover{background:rgba(22,36,28,.38)}
.tstm__dot[aria-selected="true"]{
  width:26px;border-radius:999px;
  background:var(--gold);
}

/* ------------------------------------------------------------
   13c. Form result modal
   ------------------------------------------------------------ */
.modal{
  width:min(460px,calc(100% - 2.5rem));
  padding:0;
  border:0;
  border-radius:var(--radius);
  background:var(--white);
  color:var(--ink);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.modal::backdrop{
  background:rgba(8,20,13,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.modal__inner{padding:clamp(1.6rem,4vw,2.1rem);text-align:center}

.modal__icon{
  display:grid;place-items:center;
  width:54px;height:54px;
  margin:0 auto 1.1rem;
  border-radius:50%;
}
.modal__icon svg{width:26px;height:26px}
.modal__icon--ok{background:rgba(47,90,67,.12);color:var(--green-600)}
.modal__icon--err{background:rgba(196,48,43,.10);color:var(--red)}

.modal__title{
  margin:0 0 .6rem;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.3rem,1.15rem + .7vw,1.65rem);
  color:var(--ink);
}

.modal__body{font-size:.95rem;color:var(--ink-2);line-height:1.6}
.modal__body ul{
  margin:0;padding:0;list-style:none;
  display:grid;gap:.55rem;
  text-align:left;
}
.modal__body li{
  position:relative;
  padding-left:1.5rem;
}
.modal__body li::before{
  content:"";
  position:absolute;left:.35rem;top:.6em;
  width:5px;height:5px;border-radius:50%;
  background:var(--red);
}

.modal__actions{
  margin-top:1.5rem;
  display:flex;justify-content:center;
}

/* keep the opening gentle, and skip it entirely for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .modal[open]{animation:modal-in .28s var(--ease)}
  @keyframes modal-in{
    from{opacity:0;transform:translateY(10px) scale(.98)}
    to  {opacity:1;transform:none}
  }
}

/* ------------------------------------------------------------
   14. CTA band
   ------------------------------------------------------------ */
/* Light band. It sits directly above the dark footer, so it is kept warm and
   gold-tinted to separate it from the plain cream sections above. */
.cta-band{
  position:relative;overflow:hidden;
  background:
    radial-gradient(65% 85% at 85% 15%,rgba(201,154,46,.20),transparent 64%),
    radial-gradient(55% 75% at 8% 90%,rgba(47,90,67,.10),transparent 62%),
    linear-gradient(150deg,var(--cream-2),var(--cream-3));
  border-top:1px solid var(--line-2);
  padding-block:clamp(3rem,6vw,5rem);
  text-align:center;
}
.cta-band h2{color:var(--ink);margin-bottom:.4em}
.cta-band p{color:var(--ink-2);max-width:52ch;margin-inline:auto 1.8rem;margin-bottom:1.8rem}

/* the frond texture is drawn in cream, so it needs inverting on a light band */
.cta-band .fronds{filter:invert(1);opacity:.06}

/* ------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------ */
.footer{
  background:var(--green-950);
  color:var(--on-dark-2);
  padding-block:clamp(2.75rem,5vw,4rem) 0;
  font-size:.93rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(1.75rem,4vw,3rem);
}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

.footer h4{
  color:var(--on-dark);font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.1rem;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer a{color:var(--on-dark-2);text-decoration:none;transition:color .25s var(--ease)}
.footer a:hover{color:var(--gold-pale)}
.footer p{margin-bottom:.8rem}

.footer__brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;text-decoration:none}
.footer__brand img{width:42px}
.footer__brand .brand__name{color:var(--on-dark)}
.footer__brand .brand__sub{color:var(--on-dark-3)}

.footer__bottom{
  margin-top:clamp(2rem,4vw,3rem);
  padding-block:1.4rem;
  border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  align-items:center;justify-content:space-between;
  font-size:.82rem;color:var(--on-dark-3);
}

/* ------------------------------------------------------------
   16. Scroll reveal
   ------------------------------------------------------------ */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ------------------------------------------------------------
   17. Motion & contrast preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
}

@media (prefers-contrast:more){
  :root{--ink-2:#233229;--ink-3:#33453a;--line:rgba(22,36,28,.28)}
  .fronds{display:none}
}

@media print{
  .header,.nav,.cta-band,.fronds,.btn{display:none !important}
  body{background:#fff;color:#000}
}