/* GRENDOVA — css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Manrope:wght@400;500;600&display=swap');
:root{--bg:#F7F4EF;--paper:#EDE9E2;--ink:#1E1E1E;--muted:#6B6B5E;--accent:#3D7A72;--line:rgba(30,30,30,.12);--shadow:0 16px 45px rgba(30,30,30,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Manrope,sans-serif}h1,h2,h3{font-family:Fraunces,serif;line-height:1.08;margin:0 0 1rem}h1{font-size:clamp(2.7rem,7vw,6rem)}h2{font-size:clamp(2rem,4vw,3.5rem)}h3{font-size:1.45rem}p{max-width:70ch}a{color:inherit}.wrap{width:min(1180px,calc(100% - 2rem));margin:auto}.notice{text-align:center;font-size:.75rem;padding:.5rem;background:var(--paper);color:var(--muted);border-bottom:1px solid var(--line)}header{position:sticky;top:0;z-index:5;background:rgba(247,244,239,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0}.brand{font:700 1.7rem Fraunces,serif;text-decoration:none}.links{display:flex;gap:1.1rem;align-items:center;font-size:.86rem;color:var(--muted)}.links a{text-decoration:none}.button{display:inline-block;border:0;border-radius:999px;padding:.85rem 1.4rem;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;cursor:pointer}.hero{min-height:70vh;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:5rem 0}.hero img,.media img{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:var(--shadow)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-size:.75rem;font-weight:600}.section{padding:5rem 0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}.card{background:rgba(255,255,255,.4);border:1px solid var(--line);border-radius:18px;padding:1.5rem}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center;background:var(--paper);padding:2rem;border-radius:18px}.stats strong{display:block;font:700 2.4rem Fraunces,serif;color:var(--accent)}table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.35)}th,td{text-align:left;padding:1rem;border-bottom:1px solid var(--line)}th{font-weight:600}.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.steps .card:before{counter-increment:step;content:counter(step);display:block;color:var(--accent);font:700 2rem Fraunces,serif}.quote{border-left:4px solid var(--accent);padding:1rem 1.5rem;font:700 1.35rem Fraunces,serif}.form{background:var(--paper);padding:2rem;border-radius:20px}.field{display:grid;gap:.4rem;margin-bottom:1rem}.field input,.field select{padding:.9rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);font:inherit}.footer{background:var(--paper);margin-top:4rem;padding:3rem 0 1rem;border-top:1px solid var(--line)}.footergrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem}.footer nav{display:grid;gap:.35rem;color:var(--muted);font-size:.9rem}.small{font-size:.82rem;color:var(--muted)}.legal{padding:4rem 0}.legal h2{font-size:1.7rem;margin-top:2rem}.faq details{padding:1rem 0;border-bottom:1px solid var(--line)}.faq summary{font-weight:600;cursor:pointer}.banner{display:none}.mobile{display:none}@media(max-width:800px){.links{display:none}.mobile{display:block}.hero,.grid2,.grid3,.steps,.footergrid{grid-template-columns:1fr}.hero{padding:3rem 0;min-height:auto}.stats{grid-template-columns:repeat(2,1fr)}h1{font-size:3.2rem}.section{padding:3rem 0}table{font-size:.8rem;display:block;overflow:auto;white-space:nowrap}}
/* editorial spacing and accessible focus states */:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.muted{color:var(--muted)}.accent{color:var(--accent)}.center{text-align:center}.rule{height:1px;background:var(--line);margin:2rem 0}.pill{display:inline-block;padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.8rem}

/* layout utilities */.mt{margin-top:2rem}.mb{margin-bottom:2rem}.lead{font-size:1.18rem;color:var(--muted)}.list{padding-left:1.2rem}.list li{margin:.55rem 0}.callout{background:#dce9e5;padding:1.5rem;border-radius:16px}.price{font:700 2.5rem Fraunces,serif}.strike{text-decoration:line-through;color:var(--muted)}address{font-style:normal}.review{min-height:210px}.review strong{color:var(--accent)}
/* print-friendly legal pages */@media print{header,.notice,.footer,.button{display:none}.legal{padding:0}body{background:#fff}}
/* repeated component states */.hidden{display:none}.wide{max-width:850px}.prose p{max-width:76ch}.prose h2{margin-top:2.5rem}.prose h3{margin-top:1.5rem}.image-tile{min-height:260px}.image-tile img{height:260px}.cta{background:var(--accent);color:#fff;border-radius:20px;padding:3rem}.cta .button{background:var(--bg);color:var(--ink)}
/* design tokens */.bg-paper{background:var(--paper)}.border{border:1px solid var(--line)}.shadow{box-shadow:var(--shadow)}
/* responsive tables */@media(max-width:600px){th,td{padding:.65rem}.wrap{width:min(100% - 1.25rem,1180px)}.card{padding:1.15rem}.cta{padding:2rem 1.25rem}}
/* spacing rhythm */section+section{border-top:0 solid var(--line)}ul,ol{max-width:75ch}.footer a:hover{color:var(--ink)}
/* form safety */button{font:inherit}.honeypot{position:absolute;left:-10000px}.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--muted)}
/* visual rhythm */.hero-copy{padding:1rem 0}.section-head{max-width:700px;margin-bottom:2rem}.section-head p{color:var(--muted)}
/* utility additions */.two-thirds{max-width:780px}.anchor{scroll-margin-top:6rem}.footer-bottom{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* ============================================================
   EXTENDED UTILITY LAYER — spacing scale
   Generated to give every page consistent, granular spacing hooks
   without altering the core visual system defined above.
   ============================================================ */
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.5rem}.mt-6{margin-top:2rem}.mt-7{margin-top:2.5rem}.mt-8{margin-top:3rem}.mt-9{margin-top:4rem}.mt-10{margin-top:5rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.5rem}.mb-6{margin-bottom:2rem}.mb-7{margin-bottom:2.5rem}.mb-8{margin-bottom:3rem}.mb-9{margin-bottom:4rem}.mb-10{margin-bottom:5rem}
.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.5rem}.pt-6{padding-top:2rem}.pt-7{padding-top:2.5rem}.pt-8{padding-top:3rem}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.5rem}.pb-6{padding-bottom:2rem}.pb-7{padding-bottom:2.5rem}.pb-8{padding-bottom:3rem}
.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.5rem;padding-bottom:1.5rem}

/* ============================================================
   EXTENDED UTILITY LAYER — flexbox helpers
   ============================================================ */
.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.5rem}.gap-6{gap:2rem}.flex-1{flex:1}.flex-none{flex:none}

/* ============================================================
   EXTENDED UTILITY LAYER — typography scale
   ============================================================ */
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.08em}.tracking-widest{letter-spacing:.16em}
.leading-tight{line-height:1.2}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.65}
.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}
.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}

/* ============================================================
   EXTENDED UTILITY LAYER — border, radius, shadow variants
   ============================================================ */
.rounded-sm{border-radius:8px}.rounded-md{border-radius:14px}.rounded-lg{border-radius:20px}.rounded-full{border-radius:999px}
.border-t{border-top:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}.border-x{border-left:1px solid var(--line);border-right:1px solid var(--line)}
.shadow-sm{box-shadow:0 4px 16px rgba(30,30,30,.06)}.shadow-md{box-shadow:0 12px 32px rgba(30,30,30,.08)}.shadow-lg{box-shadow:var(--shadow)}

/* ============================================================
   COMPONENT — trust badge strip (used on homepage benefits row)
   ============================================================ */
.trust-strip{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;padding:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip .item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
.trust-strip .item strong{color:var(--ink)}

/* ============================================================
   COMPONENT — step cards (how-to-order section)
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.step-card{background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:18px;padding:1.75rem;position:relative}
.step-card .num{font:700 1.1rem Fraunces,serif;color:var(--accent);display:block;margin-bottom:.6rem}
.step-card h3{margin-bottom:.5rem}
.step-card p{color:var(--muted);font-size:.92rem;margin:0}

/* ============================================================
   COMPONENT — review card grid (experiences page + homepage snippet)
   ============================================================ */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.review-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem;box-shadow:0 8px 24px rgba(30,30,30,.05)}
.review-card .stars{color:var(--accent);letter-spacing:.15em;margin-bottom:.6rem;font-size:.95rem}
.review-card p{font-size:.92rem;color:var(--ink);margin:0 0 .8rem}
.review-card .who{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.review-disclaimer{font-size:.8rem;color:var(--muted);margin-bottom:1.5rem}

/* ============================================================
   COMPONENT — FAQ accordion refinement
   ============================================================ */
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq summary{cursor:pointer;font:600 1.05rem Fraunces,serif;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--accent);margin-left:1rem}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:.75rem;color:var(--muted)}

/* ============================================================
   COMPONENT — delivery / dosage tables
   ============================================================ */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:Fraunces,serif;font-weight:700;color:var(--ink)}
td{color:var(--muted)}
tbody tr:hover{background:rgba(61,122,114,.04)}
.small{font-size:.78rem;color:var(--muted);margin-top:1rem;line-height:1.6}

/* ============================================================
   COMPONENT — order form
   ============================================================ */
.order-panel{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;background:var(--paper);border-radius:24px;padding:3rem}
.order-panel img{border-radius:18px;box-shadow:var(--shadow)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.5rem}
.field input,.field select{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);font:inherit;color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field-error{font-size:.75rem;color:#b3402f;margin-top:.4rem;display:none}
.phone-row{display:flex;gap:.6rem}
.phone-row select{flex:0 0 110px}
.phone-row input{flex:1}
.submit-btn{width:100%;border:0;border-radius:999px;padding:1rem 1.5rem;background:var(--accent);color:#fff;font:600 1rem Manrope,sans-serif;cursor:pointer}
.submit-btn:hover{opacity:.92}
.order-note{text-align:center;font-size:.78rem;color:var(--muted);margin-top:.75rem}

/* ============================================================
   COMPONENT — footer
   ============================================================ */
footer{background:var(--paper);border-top:1px solid var(--line);margin-top:5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding:4rem 0}
.footer-grid h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:1rem}
.footer-grid nav{display:flex;flex-direction:column;gap:.6rem;font-size:.88rem;color:var(--muted)}
.footer-grid nav a{text-decoration:none}
.footer-grid address{font-size:.85rem;color:var(--muted);line-height:1.8}
.footer-legal-note{max-width:1180px;margin:0 auto;padding:0 1rem 2rem;font-size:.75rem;color:var(--muted);text-align:center;line-height:1.7}

/* ============================================================
   RESPONSIVE — tablet breakpoint
   ============================================================ */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:3rem 0;text-align:left}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .review-grid{grid-template-columns:1fr 1fr}
  .order-panel{grid-template-columns:1fr;padding:2rem}
  .footer-grid{grid-template-columns:1fr 1fr;padding:3rem 0}
  .stats{grid-template-columns:1fr 1fr}
  .links{display:none}
  .mobile{display:inline-block;cursor:pointer;font-size:.85rem}
}

/* ============================================================
   RESPONSIVE — mobile breakpoint
   ============================================================ */
@media(max-width:600px){
  .review-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  h1{font-size:clamp(2.2rem,9vw,3rem)}
  .price{font-size:2rem}
  .nav .button{padding:.6rem 1rem;font-size:.85rem}
}

/* ============================================================
   MOTION — reduced motion respect
   ============================================================ */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto !important;transition:none !important;animation:none !important}}

/* ============================================================
   ACCESSIBILITY — screen-reader only helper
   ============================================================ */
.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}

/* ============================================================
   MISC — image tiles used across content pages
   ============================================================ */
.tile{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.two-col-media{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.three-col-media{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:700px){.two-col-media,.three-col-media{grid-template-columns:1fr}}

/* ============================================================
   MISC — badges and pills used in trust sections
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem;background:rgba(255,255,255,.5)}
.badge.accent{color:var(--accent);border-color:rgba(61,122,114,.35)}

/* ============================================================
   MISC — quote / testimonial style block used on About page
   ============================================================ */
blockquote{border-left:3px solid var(--accent);margin:2rem 0;padding-left:1.5rem;font:italic 1.2rem/1.6 Fraunces,serif;color:var(--ink)}
blockquote cite{display:block;margin-top:.6rem;font:500 .82rem Manrope,sans-serif;color:var(--muted);font-style:normal}

/* ============================================================
   MISC — legal page list styling
   ============================================================ */
.legal ol,.legal ul{color:var(--muted);line-height:1.75}
.legal h2{margin-top:2.25rem;font-size:1.5rem}
.legal p{color:var(--ink)}
.legal .lead{color:var(--muted)}

/* ============================================================
   PRINT — legal page print refinements
   ============================================================ */
@media print{
  a{color:#000;text-decoration:underline}
  .legal{max-width:100%}
  h1,h2{color:#000}
}

/* ============================================================
   FALLBACK — noscript notice styling
   ============================================================ */
noscript div{background:var(--paper);color:var(--muted);text-align:center;padding:.6rem;font-size:.8rem}

/* end */