/* ============================================================
   BRAND TOKENS — NATURAL HEALTH & WELLNESS PLUS LLC
   Change colors/fonts here = whole site updates.
   Prefix: nhw-
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root{
  /* brand greens */
  --c-primary:#0C2019;        /* dark green base (dark sections)      */
  --c-primary-dark:#081811;   /* deepest green (reviews)              */
  --c-green-2:#0E2A1C;         /* lifted green (alt dark section)      */
  --c-olive:#4F5E29;           /* olive/khaki (sourcing section)       */
  --c-card:#195624;            /* green card fill (support cards)      */
  --c-card-line:#1D3228;       /* green card border                    */
  --c-surface:#0C2019;         /* dark card surface (form/review/faq)  */
  --c-surface-line:#1B352B;    /* dark card border                     */

  /* accents */
  --c-accent:#FA9601;          /* orange (buttons, icons, accents)     */
  --c-accent-dark:#E07E00;     /* orange hover                         */
  --c-gold:#CC861E;            /* gold band (whole foods)              */
  --c-brown:#301A0B;           /* eyebrow pill                         */
  --c-cream:#F4EAD2;           /* cream button                         */

  /* ink / neutrals */
  --c-ink:#0B1D16;             /* darkest text (on accent/cream/gold)  */
  --c-paper:#FFFFFF;           /* light text + headings on dark        */
  --c-muted:#A7B6A2;           /* muted sage body text on dark         */
  --c-error:#E6604D;           /* form validation text                 */
  --c-line:rgba(255,255,255,.09);
  --c-line-soft:rgba(255,255,255,.06);
  --c-on-olive:rgba(255,255,255,.82);  /* body text on olive section */

  /* review avatars */
  --c-avatar-1:#4FA06A; --c-avatar-2:var(--c-accent); --c-avatar-3:#3FA0A6;

  /* rgb channels (for overlays/glows — keeps hex out of components) */
  --c-primary-rgb:12,32,25;
  --c-dark-rgb:8,24,17;

  /* buttons */
  --btn-bg:var(--c-accent); --btn-text:var(--c-ink); --btn-bg-hover:var(--c-accent-dark);

  /* fonts */
  --font-head:'Montserrat',sans-serif;
  --font-body:'Noto Sans',sans-serif;

  /* spacing */
  --space-section:90px; --gap:30px;
  --pad-card:32px; --pad-form:48px;

  /* radius */
  --r-sm:10px; --r-md:16px; --r-btn:12px; --r-pill:500px;

  /* shadow */
  --shadow-1:0 2px 12px rgba(0,0,0,.18);
  --shadow-2:0 26px 60px rgba(0,0,0,.38);

  /* type scale (desktop matches Figma: H1/H2 ~36, lead/card ~20) */
  --fs-h1:clamp(28px,3.4vw,36px);
  --fs-h2:clamp(26px,3.1vw,36px);
  --fs-h3:clamp(18px,1.5vw,20px);
  --fs-lead:clamp(17px,1.5vw,20px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-eyebrow:16px;
}
@media all and (max-width:640px){ :root{ --space-section:56px; --gap:18px; --pad-form:28px; --pad-card:24px; } }

/* ---- brand typography (scoped to nhw sections so the dark theme
        wins over the theme's default ink typography) ---- */
.is-wrapper .nhw-sec h1,.is-wrapper .nhw-sec h2,.is-wrapper .nhw-sec h3,
.is-wrapper .nhw-sec h4,.is-wrapper .nhw-sec h5{
  font-family:var(--font-head); color:var(--c-paper); text-wrap:balance; margin:0;
}
.is-wrapper .nhw-sec p,.is-wrapper .nhw-sec li{
  font-family:var(--font-body); color:var(--c-muted); margin:0;
}
.is-wrapper .nhw-sec a{ color:var(--c-accent); text-decoration:none; }

/* shared section heading block */
.is-wrapper .nhw-sec-head{ margin-bottom:calc(var(--gap) + 6px); }
.is-wrapper .nhw-sec-head-center{ text-align:center; }
.is-wrapper .nhw-h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.18; }
.is-wrapper .nhw-h2-center{ text-align:center; }
.is-wrapper .nhw-sec-sub{ font-size:var(--fs-lead); color:var(--c-muted); margin-top:12px; max-width:720px; }
.is-wrapper .nhw-sec-head-center .nhw-sec-sub{ margin-left:auto; margin-right:auto; }

/* shared icon chip */
.is-wrapper .nhw-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-btn);
  background:var(--c-accent); color:var(--c-ink); font-size:20px;
  margin-bottom:18px;
}
.is-wrapper .nhw-ico-lg{ width:58px; height:58px; font-size:24px; }

/* shared buttons */
.is-wrapper .nhw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-body);
  line-height:1; padding:17px 30px; border-radius:var(--r-btn);
  border:0; cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.is-wrapper .nhw-btn-accent{ background:var(--btn-bg); color:var(--btn-text); text-transform:uppercase; letter-spacing:.4px; }
.is-wrapper .nhw-btn-accent:hover{ background:var(--btn-bg-hover); }
.is-wrapper .nhw-btn-cream{ background:var(--c-cream); color:var(--c-ink); text-transform:uppercase; letter-spacing:.4px; }
.is-wrapper .nhw-btn-cream:hover{ background:var(--c-paper); }
.is-wrapper .nhw-btn-block{ width:100%; }

/* shared pill */
.is-wrapper .nhw-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-small);
  padding:9px 16px; border-radius:var(--r-pill);
}
.is-wrapper .nhw-pill-dark{ background:var(--c-surface); color:var(--c-paper); border:1px solid var(--c-line); }
.is-wrapper .nhw-pill-dark i{ color:var(--c-accent); }
.is-wrapper .nhw-accent{ color:var(--c-accent); font-style:normal; }
.is-wrapper .nhw-readmore{ color:var(--c-accent); font-weight:700; font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }

/* shared card */
.is-wrapper .nhw-card{
  background:var(--c-card); border:1px solid var(--c-card-line);
  border-radius:var(--r-md); padding:var(--pad-card); height:100%;
}
.is-wrapper .nhw-card-title{ font-size:var(--fs-h3); font-weight:600; line-height:1.3; margin-bottom:12px; }
.is-wrapper .nhw-card-text{ font-size:var(--fs-body); line-height:1.6; color:var(--c-muted); }

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.is-wrapper > .nhw-hero-sec,.is-wrapper .nhw-hero-sec{ background:var(--c-primary); overflow:hidden; }
.is-wrapper .nhw-hero-img{
  width:100%; height:100%; min-height:640px; object-fit:cover; display:block;
  background:var(--c-primary);   /* dark-green base: no gray flash while the image loads / if it's missing */
}
.is-wrapper .nhw-hero-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
     rgba(var(--c-primary-rgb),.94) 0%,
     rgba(var(--c-primary-rgb),.80) 34%,
     rgba(var(--c-primary-rgb),.30) 68%,
     rgba(var(--c-primary-rgb),.05) 100%);
}
.is-wrapper .nhw-hero-content{ padding:40px 0; }
.is-wrapper .nhw-hero-content .nhw-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--c-brown); color:var(--c-accent);
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow);
  padding:11px 20px; border-radius:var(--r-pill); margin-bottom:22px;
}
.is-wrapper .nhw-hero-title{
  font-family:var(--font-head); font-weight:600; color:var(--c-paper);
  font-size:var(--fs-h1); line-height:1.28; max-width:560px; margin:0 0 20px;
}
.is-wrapper .nhw-hero-lead{
  font-family:var(--font-body); font-weight:600; color:var(--c-paper);
  font-size:var(--fs-lead); line-height:1.7; max-width:540px; margin:0 0 18px;
}
.is-wrapper .nhw-hero-note{
  font-family:var(--font-body); font-weight:400; color:var(--c-muted);
  font-size:var(--fs-small); line-height:1.6; max-width:470px; margin:0;
}

/* ============================================================
   SECTION 2 — OFFER (handbook promo + form)
   ============================================================ */
.is-wrapper > .nhw-offer-sec,.is-wrapper .nhw-offer-sec{
  background:
    radial-gradient(900px 420px at 78% 42%, rgba(79,94,41,.35) 0%, rgba(var(--c-primary-rgb),0) 70%),
    var(--c-primary);
  padding:var(--space-section) 0;
}
.is-wrapper .nhw-promo{ padding-right:24px; }
.is-wrapper .nhw-promo-title{
  font-size:var(--fs-h2); font-weight:700; line-height:1.2; margin:18px 0 16px; color:var(--c-paper);
}
.is-wrapper .nhw-promo-text{ font-size:var(--fs-body); line-height:1.65; color:var(--c-muted); margin-bottom:26px; max-width:430px; }
.is-wrapper .nhw-promo-fineprint{ font-size:var(--fs-small); color:var(--c-muted); margin-top:16px; }

/* --- Consultation form = Webware form-module, styled to match the Figma card.
       All scoped under .nhw-form-cell so nothing touches the locked wrappers. --- */

/* card surface on the module's own container (never on the Foundation cell) */
.is-wrapper .nhw-form-cell .ww-form-container-3{
  background:var(--c-surface); border:1px solid var(--c-surface-line);
  border-radius:var(--r-sm); padding:var(--pad-form); box-shadow:var(--shadow-2);
}
.is-wrapper .nhw-form-cell .spacer.height-40{ display:none; }   /* drop module's top spacer so the card top-aligns */
.is-wrapper .nhw-form-cell form{ margin:0; }

/* heading + intro */
.is-wrapper .nhw-form-cell form h2{
  font-family:var(--font-head); font-weight:700; color:var(--c-paper);
  font-size:var(--fs-h2); line-height:1.2; margin:0;
}
.is-wrapper .nhw-form-cell form > p{
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.6;
  color:var(--c-muted); margin:12px 0 26px;
}

/* fieldset + field rows */
.is-wrapper .nhw-form-cell .fieldset{ border:0; margin:0; padding:0; }
.is-wrapper .nhw-form-cell .first_name_wrap,
.is-wrapper .nhw-form-cell .email_wrap,
.is-wrapper .nhw-form-cell .phone_wrap,
.is-wrapper .nhw-form-cell .field_34476_wrap{ margin-bottom:18px; }

/* labels */
.is-wrapper .nhw-form-cell label{
  display:block; font-family:var(--font-head); font-weight:600;
  font-size:var(--fs-small); color:var(--c-paper); margin-bottom:8px;
}
.is-wrapper .nhw-form-cell .required{ color:var(--c-accent); margin-left:3px; }

/* inputs + select + phone share one field style */
.is-wrapper .nhw-form-cell input.input,
.is-wrapper .nhw-form-cell select.input,
.is-wrapper .nhw-form-cell .phone_number{
  width:100%; box-sizing:border-box;
  font-family:var(--font-body); font-size:var(--fs-body); color:var(--c-paper);
  background:rgba(var(--c-dark-rgb),.55);
  border:1px solid var(--c-surface-line); border-radius:var(--r-sm);
  padding:15px 16px; outline:none; transition:border-color .2s ease;
}
.is-wrapper .nhw-form-cell input.input::placeholder,
.is-wrapper .nhw-form-cell .phone_number::placeholder{ color:var(--c-muted); }
.is-wrapper .nhw-form-cell input.input:focus,
.is-wrapper .nhw-form-cell select.input:focus,
.is-wrapper .nhw-form-cell .phone_number:focus{ border-color:var(--c-accent); }

/* select: hide native arrow, draw a brand caret on the wrapper */
.is-wrapper .nhw-form-cell select.input{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:42px; }
.is-wrapper .nhw-form-cell .field_34476_wrap{ position:relative; }
.is-wrapper .nhw-form-cell .field_34476_wrap::after{
  content:""; position:absolute; right:18px; bottom:37%;
  width:9px; height:9px; transform:rotate(45deg); pointer-events:none;
  border-right:2px solid var(--c-muted); border-bottom:2px solid var(--c-muted);
}
div.form-container , 
#contentbox .nhw-form-cell .ww-form-container-3 input[type="submit"].button, #contentbox .nhw-form-cell .ww-form-container-3 .submit_wrap input.button{
    width:100% !important;
    }

/* intl-tel-input phone widget blended into the dark field */
.is-wrapper .nhw-form-cell .iti{ display:block; width:100%; }
.is-wrapper .nhw-form-cell .iti .phone_number{ padding-left:52px; }   /* room for the flag */
.is-wrapper .nhw-form-cell .iti__flag-container{ border:0; }
.is-wrapper .nhw-form-cell .iti__selected-flag{ background:transparent; border-radius:var(--r-sm) 0 0 var(--r-sm); }
.is-wrapper .nhw-form-cell .iti__arrow{ border-top-color:var(--c-muted); }
.is-wrapper .nhw-form-cell .iti__country-list{
  background:var(--c-surface); border:1px solid var(--c-surface-line);
  color:var(--c-paper); border-radius:var(--r-sm);
}
.is-wrapper .nhw-form-cell .iti__country{ color:var(--c-paper); }
.is-wrapper .nhw-form-cell .iti__country.iti__highlight,
.is-wrapper .nhw-form-cell .iti__country:hover{ background:var(--c-line); }
.is-wrapper .nhw-form-cell .iti__dial-code{ color:var(--c-muted); }

/* submit button = Figma orange CTA */
.is-wrapper .nhw-form-cell .submit_wrap {
    margin-top: 0;
    padding-top: 0 !important;
}
.is-wrapper .nhw-form-cell input[type="submit"].button,
.is-wrapper .nhw-form-cell .submit_wrap input.button{
  width:100%; cursor:pointer; border:0; line-height:1;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-body);
  text-transform:uppercase; letter-spacing:.4px;
  color:var(--btn-text); background:var(--btn-bg);
  padding:18px 30px; border-radius:var(--r-btn); transition:background .2s ease;
}
.is-wrapper .nhw-form-cell input[type="submit"].button:hover,
.is-wrapper .nhw-form-cell .submit_wrap input.button:hover{ background:var(--btn-bg-hover); }

/* validation + platform utilities */
.is-wrapper .nhw-form-cell .error{ display:block; color:var(--c-error); font-size:var(--fs-small); margin-top:6px; }
.is-wrapper .nhw-form-cell .error:empty{ display:none; }
.is-wrapper .nhw-form-cell .hide{ display:none; }
.is-wrapper .nhw-form-cell .captcha_wrap{ margin:0; }

/* --- Theme-conflict override (CSS-only, no HTML change) ------------------
   The form-template theme scopes its field styles to #contentbox with
   !important (ID-level), so plain class selectors lose the border, the
   native select arrow, and the olive submit colour. We re-use the theme's
   own #contentbox wrapper id (already in the DOM) and scope to our
   .nhw-form-cell + .ww-form-container-3 to outrank it. The field "border"
   is drawn as an inset box-shadow — a property the theme never sets — while
   the real border collapses to 0, so there's no light 1px line underneath. */
#contentbox .nhw-form-cell .ww-form-container-3 input.input,
#contentbox .nhw-form-cell .ww-form-container-3 select.input,
#contentbox .nhw-form-cell .ww-form-container-3 .phone_number{
  border-width:0 !important;
  box-shadow:inset 0 0 0 1px var(--c-surface-line) !important;
  border-radius:var(--r-sm) !important;
  background:rgba(var(--c-dark-rgb),.55) !important;
  height:auto;
}
#contentbox .nhw-form-cell .ww-form-container-3 input.input:focus,
#contentbox .nhw-form-cell .ww-form-container-3 select.input:focus,
#contentbox .nhw-form-cell .ww-form-container-3 .phone_number:focus{
  box-shadow:inset 0 0 0 1px var(--c-accent) !important;
}
#contentbox .nhw-form-cell .ww-form-container-3 select.input{
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-image:none !important;
}
#contentbox .nhw-form-cell .ww-form-container-3 input[type="submit"].button,
#contentbox .nhw-form-cell .ww-form-container-3 .submit_wrap input.button{
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background:var(--btn-bg) !important; background-image:none !important; color:var(--btn-text) !important;
  border:0 !important; box-shadow:none !important;
  border-radius:var(--r-btn) !important; text-transform:uppercase !important;
}
#contentbox .nhw-form-cell .ww-form-container-3 input[type="submit"].button:hover,
#contentbox .nhw-form-cell .ww-form-container-3 .submit_wrap input.button:hover{ background:var(--btn-bg-hover) !important; }

/* ============================================================
   SECTION 3 — HOW WE SUPPORT (4 green cards)
   ============================================================ */
.is-wrapper > .nhw-support-sec,.is-wrapper .nhw-support-sec{
  background:var(--c-green-2); border-top:1px solid var(--c-line-soft);
  padding:var(--space-section) 0;
}

/* ============================================================
   SECTION 4 — WHY MEN TRUST (centered copy)
   ============================================================ */
.is-wrapper > .nhw-trust-sec,.is-wrapper .nhw-trust-sec{
  background:var(--c-primary); border-top:1px solid var(--c-line-soft);
  padding:var(--space-section) 0;
}
.is-wrapper .nhw-trust{ text-align:center; max-width:860px; margin:0 auto; }
.is-wrapper .nhw-trust-text{
  font-size:var(--fs-lead); line-height:1.75; color:var(--c-muted);
  margin-top:22px; text-align:center;
}

/* ============================================================
   SECTION 5 — TRANSPARENT SOURCING (3 features on olive)
   ============================================================ */
.is-wrapper > .nhw-sourcing-sec,.is-wrapper .nhw-sourcing-sec{
  background:var(--c-olive); padding:var(--space-section) 0;
}
.is-wrapper .nhw-sourcing-sec .nhw-sec-sub{ color:var(--c-on-olive); }
.is-wrapper .nhw-feature{
  border-left:1px solid var(--c-line); padding-left:22px;
}
.is-wrapper .nhw-feature-title{ font-size:var(--fs-h3); font-weight:600; color:var(--c-paper); margin-bottom:12px; }
.is-wrapper .nhw-feature-text{ font-size:var(--fs-body); line-height:1.6; color:var(--c-on-olive); }
.is-wrapper .nhw-sourcing-sec .nhw-readmore{ color:var(--c-paper); text-decoration:underline; }

/* ============================================================
   SECTION 6 — WHOLE FOODS (gold band + pills)
   ============================================================ */
.is-wrapper > .nhw-foods-sec,.is-wrapper .nhw-foods-sec{
  background:var(--c-gold); padding:calc(var(--space-section) * .72) 0;
}
.is-wrapper .nhw-foods-inner{ text-align:center; }
.is-wrapper .nhw-foods-title{ color:var(--c-paper); margin-bottom:26px; }
.is-wrapper .nhw-food-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.is-wrapper .nhw-food-pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--c-primary); color:var(--c-paper);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-small);
  padding:10px 20px; border-radius:var(--r-pill);
}
.is-wrapper .nhw-food-pill i{ color:var(--c-accent); font-size:7px; }

/* ============================================================
   SECTION 7 — WHAT CUSTOMERS SAY (reviews)
   ============================================================ */
.is-wrapper > .nhw-reviews-sec,.is-wrapper .nhw-reviews-sec{
  background:var(--c-primary-dark); padding:var(--space-section) 0;
}
.is-wrapper .nhw-review{ background:var(--c-surface); border:1px solid var(--c-surface-line); }
.is-wrapper .nhw-stars{ color:var(--c-accent); font-size:14px; letter-spacing:3px; margin-bottom:18px; }
.is-wrapper .nhw-review-text{ font-size:var(--fs-body); line-height:1.6; color:var(--c-paper); margin-bottom:22px; }
.is-wrapper .nhw-review-by{ display:flex; align-items:center; gap:12px; }
.is-wrapper .nhw-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-pill);
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-small); color:var(--c-ink);
}
.is-wrapper .nhw-avatar-1{ background:var(--c-avatar-1); }
.is-wrapper .nhw-avatar-2{ background:var(--c-avatar-2); }
.is-wrapper .nhw-avatar-3{ background:var(--c-avatar-3); }
.is-wrapper .nhw-review-name{ font-family:var(--font-head); font-weight:600; font-size:var(--fs-small); color:var(--c-paper); }

/* ============================================================
   SECTION 8 — FAQ (accordion)
   ============================================================ */
.is-wrapper > .nhw-faq-sec,.is-wrapper .nhw-faq-sec{
  background:var(--c-primary); border-top:1px solid var(--c-line-soft);
  padding:var(--space-section) 0;
}
.is-wrapper .nhw-faq-cell{ max-width:1000px; margin:0 auto; }
.is-wrapper .nhw-faq-item{
  background:var(--c-surface); border:1px solid var(--c-surface-line);
  border-radius:var(--r-btn); margin-bottom:16px; overflow:hidden;
}
.is-wrapper .nhw-faq-q{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:var(--font-head); font-weight:600; font-size:var(--fs-body);
  color:var(--c-paper); padding:20px 24px;
}
.is-wrapper .nhw-faq-q::-webkit-details-marker{ display:none; }
.is-wrapper .nhw-faq-caret{ color:var(--c-paper); font-size:14px; transition:transform .25s ease; flex:none; }
.is-wrapper .nhw-faq-item[open] .nhw-faq-q,
.is-wrapper .nhw-faq-item.is-active .nhw-faq-q{ background:var(--c-accent); color:var(--c-ink); }
.is-wrapper .nhw-faq-item[open] .nhw-faq-caret,
.is-wrapper .nhw-faq-item.is-active .nhw-faq-caret{ color:var(--c-ink); }
.is-wrapper .nhw-faq-item[open] .nhw-faq-caret{ transform:rotate(180deg); }
.is-wrapper .nhw-faq-a{ padding:0 24px; }
.is-wrapper .nhw-faq-a:not(:empty){ padding:18px 24px 22px; color:var(--c-muted); font-size:var(--fs-body); line-height:1.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media all and (max-width:1024px){
  .is-wrapper .nhw-hero-title{ max-width:none; }
  .is-wrapper .nhw-promo{ padding-right:0; margin-bottom:34px; }
  .is-wrapper .nhw-feature{ border-left:0; padding-left:0; }
}
@media all and (max-width:640px){
  .is-wrapper .nhw-hero-img{ min-height:520px; }
  .is-wrapper .nhw-hero-overlay{
    background:linear-gradient(180deg,
       rgba(var(--c-primary-rgb),.55) 0%,
       rgba(var(--c-primary-rgb),.90) 60%,
       rgba(var(--c-primary-rgb),.96) 100%);
  }
  .is-wrapper .nhw-form-card{ box-shadow:var(--shadow-1); }
  .is-wrapper .nhw-food-list{ gap:10px; }
}