/* =========================================================================
   Thovek — public site styles
   Design: premium botanical / clean clinical trust
   Display: Fraunces  ·  Body: Inter
   ========================================================================= */
:root{
  /* Brand + accent are overridden per-request in head.ejs from the admin
     colours, along with every shade derived from them. These are only
     fall-backs for the very first paint. */
  --brand:#1f5f4a;
  --brand-dark:#123c30;
  --brand-2:var(--brand-2);
  --brand-rgb:31, 95, 74;
  --on-brand:#ffffff;
  --accent:#c98a3a;
  --accent-dark:#a86e26;
  --accent-light:var(--accent-light);
  --accent-rgb:201, 138, 58;
  --on-accent:var(--on-accent);
  --ink:#1b2621;
  --muted:#5f6c65;
  --line:#e3ded3;
  --paper:#faf8f3;
  --paper-2:#f2eee3;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 10px 40px -20px rgba(var(--brand-rgb),.35);
  --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
a{color:var(--brand);text-decoration:none;transition:color .18s}
a:hover{color:var(--accent-dark)}
img{max-width:100%;display:block}
.container{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Inter";font-weight:500;font-size:15px;
  padding:13px 24px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .15s ease,background .18s,color .18s,border-color .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-brand{background:var(--brand);color:var(--on-brand)}
.btn-brand:hover{background:var(--brand-dark);color:#fff}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--accent-dark);color:var(--on-accent)}
.btn-outline{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:var(--on-brand)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--brand-dark)}
.btn-lg{padding:16px 32px;font-size:16px}

/* ---- Header ----------------------------------------------------------- */
/* ---- Top contact bar (above the nav) ---------------------------------- */
.topbar{background:var(--brand-dark);color:rgba(255,255,255,.85);font-size:13.5px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;padding-top:4px;padding-bottom:4px}
.topbar a{color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:var(--accent-light)}
.topbar svg{width:15px;height:15px;flex:none}
.topbar-contacts{display:flex;align-items:center;gap:22px}
.topbar-side{display:flex;align-items:center;gap:14px}
.topbar-badge{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.1);color:var(--accent-light);padding:3px 10px;border-radius:100px}
@media(max-width:1023px){.topbar{display:none}}

.site-header{position:sticky;top:0;z-index:100;background:rgba(250,248,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand-mark{font-family:"Fraunces";font-size:24px;font-weight:600;color:var(--brand-dark);letter-spacing:-.02em}
.brand-logo{height:44px;width:auto}
.main-nav{display:flex;align-items:center;gap:26px}
.main-nav>a,.has-drop>a{font-size:15px;font-weight:500;color:var(--ink);position:relative}
.main-nav>a:hover,.has-drop>a:hover{color:var(--brand)}
.main-nav>a.active,.has-drop>a.active{color:var(--brand)}
.main-nav>a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent)}
.nav-cta{color:var(--on-accent)}
.nav-cta:hover{color:#fff}
.has-drop{position:relative}
.drop{position:absolute;top:130%;left:-16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:230px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
/* focus-within as well as hover: the dropdown is the only way to reach the
   category pages from the header, and on hover alone a keyboard user tabbing
   through the nav skips straight past them. */
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:9px 14px;border-radius:8px;font-size:15px;color:var(--ink)}
.drop a:hover{background:var(--paper-2);color:var(--brand)}
.drop-all{color:var(--brand)!important;font-weight:500;border-top:1px solid var(--line);margin-top:4px}
/* Nothing else styles focus, and inside the dropdown the default ring is easy to
   lose against the panel. Only :focus-visible, so mouse clicks stay unchanged. */
.main-nav a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
/* The category list is long enough (19 and counting) that a single column ran off
   the bottom of the screen, leaving the last entries unreachable. Two columns keeps
   it on screen; the height cap and its own scrollbar are the backstop for short
   windows or for whenever more categories get added. Desktop only — below 1024px
   the nav is the slide-down panel, which already scrolls as a whole. */
@media(min-width:1024px){
  .drop{width:500px;columns:2;column-gap:12px;max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain}
  .drop a{padding:8px 14px;break-inside:avoid}
  .drop-all{column-span:all}
}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* ---- Hero banner slider ----------------------------------------------- */
/* Each slide is a photo with its headline rendered over it as real text. The
   headline used to be burned into the JPG, which made it uneditable, invisible
   to search engines and impossible to resize for narrow screens. */
/* Held to the same width as every other section rather than running full-bleed,
   so the banner lines up with the content below it. width and max-width both
   subtract 48px — the 24px gutter .container applies on each side — so the
   banner keeps that margin at every viewport, not just above --wrap. */
.hero{position:relative;background:var(--brand-dark);overflow:hidden;
  aspect-ratio:1600/660;max-height:500px;
  width:100%;
  margin:0 auto}
.hero-banner{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;
  transition:opacity .6s ease-in-out}
.hero-banner.on{opacity:1;pointer-events:auto}
.hero-banner img{width:100%;height:100%;object-fit:cover;display:block}
/* The headline lives in the markup now, so the photo needs a scrim to keep the
   text legible over whatever is behind it. Mixed from the admin brand colour
   rather than a fixed hue, so it follows the theme like everything else. */
.hero-banner::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(var(--brand-rgb),.94) 0%,
    rgba(var(--brand-rgb),.82) 36%,
    rgba(var(--brand-rgb),.34) 66%,
    rgba(var(--brand-rgb),0) 92%)}
.hero-copy{position:absolute;z-index:2;top:50%;transform:translateY(-50%);
  /* Banner photo is full-bleed, but the words line up with the site content
     column: left edge sits at the centered --wrap container's inner gutter. */
  left:max(24px,calc((100% - var(--wrap))/2 + 24px));right:24px;max-width:36rem;color:#fff;
  /* Photos can cross-fade through each other; two headlines cannot. The
     outgoing copy clears quickly and the incoming waits for it, so the words
     are never legible over each other mid-transition. */
  opacity:0;transition:opacity .25s ease-out}
.hero-banner.on .hero-copy{opacity:1;transition:opacity .4s ease-in .3s}
.hero-kicker{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:12px}
.hero-copy h2{font-family:"Fraunces",Georgia,serif;color:#fff;margin:0;
  font-size:clamp(1.65rem,3.4vw,3rem);line-height:1.08;letter-spacing:-.01em}
.hero-copy p{color:rgba(255,255,255,.9);margin:14px 0 0;max-width:46ch;
  font-size:clamp(.97rem,1.25vw,1.16rem);line-height:1.55}
.hero-copy .btn{margin-top:24px}
.hero-dots{position:absolute;left:0;right:0;bottom:24px;z-index:3;
  display:flex;justify-content:center;gap:9px}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:none;
  background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:.2s}
.hero-dots button.on{background:var(--accent);width:26px;border-radius:5px}
@media(prefers-reduced-motion:reduce){
  .hero-banner,.hero-copy,.hero-banner.on .hero-copy{transition:none}
}
/* Shared button row, also used by the closing CTA band. */
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---- Section shells --------------------------------------------------- */
.section{padding:88px 0}
.section-tight{padding:64px 0}
.section-alt{background:var(--white)}
.section-brand{background:var(--brand-dark);color:#fff}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:14px}
.section-brand .eyebrow{color:var(--accent-light)}
.section-head{max-width:640px;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:14px}
.section-head p{color:var(--muted);font-size:1.08rem}
.section-brand .section-head p{color:rgba(255,255,255,.8)}

/* ---- Product cards ---------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.product-media{aspect-ratio:4/3;background:linear-gradient(135deg,var(--paper-2),#e9e2d2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.product-media img{width:100%;height:100%;object-fit:cover}
.product-media .placeholder{font-family:"Fraunces";font-size:2.4rem;color:var(--brand);opacity:.4}
.product-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.product-body{padding:22px;display:flex;flex-direction:column;flex:1}
.product-body h3{font-size:1.28rem;margin-bottom:4px}
.product-botanical{font-style:italic;color:var(--muted);font-size:.92rem;margin-bottom:10px}
.product-body p{color:var(--muted);font-size:.96rem;margin-bottom:18px;flex:1}
.product-link{font-weight:500;font-size:.95rem;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.product-link:hover{gap:10px;color:var(--accent-dark)}

/* ---- Category tiles --------------------------------------------------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.cat-tile{position:relative;border-radius:var(--radius);overflow:hidden;min-height:230px;display:flex;align-items:flex-end;padding:26px;background:var(--brand);color:#fff;transition:transform .2s}
.cat-tile:hover{transform:translateY(-5px);color:#fff}
.cat-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--brand-rgb),.35) 0%,rgba(var(--brand-rgb),.78) 55%,rgba(var(--brand-rgb),.96) 100%)}
.cat-tile h3,.cat-tile p{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.cat-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cat-tile-body{position:relative;z-index:1}
.cat-tile h3{color:#fff;font-size:1.5rem;margin-bottom:6px}
.cat-tile p{color:rgba(255,255,255,.82);font-size:.95rem}

/* ---- Why us ----------------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.why-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.why-icon{width:46px;height:46px;border-radius:12px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.why-icon svg{width:22px;height:22px}
.why-card h3{font-size:1.2rem;margin-bottom:8px}
.why-card p{color:var(--muted);font-size:.95rem}

/* ---- Testimonials ----------------------------------------------------- */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.quote-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:30px}
.quote-card .mark{font-family:"Fraunces";font-size:3rem;line-height:.5;color:var(--accent);display:block;margin-bottom:10px}
.quote-stars{color:var(--accent);letter-spacing:3px;font-size:.95rem;margin-bottom:10px}
.quote-card p{color:rgba(255,255,255,.9);font-size:1.02rem;margin-bottom:18px}
.quote-meta{font-size:.9rem;color:var(--accent-light)}
.quote-meta strong{color:#fff;display:block;font-weight:500}

/* ---- CTA band --------------------------------------------------------- */
.cta-band{background:var(--accent);color:var(--on-accent);border-radius:22px;padding:52px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{font-size:2rem;color:var(--on-accent);max-width:20ch}
.cta-band p{color:var(--on-accent);opacity:.82;margin-top:8px}

/* ---- Page hero (inner pages) ----------------------------------------- */
/* Every inner page gets the photographic banner: hero photo under a
   brand-tinted scrim, so headlines stay readable and on-palette. */
.page-hero{position:relative;color:#fff;padding:70px 0 60px;overflow:hidden;
  background:linear-gradient(100deg,var(--brand-dark) 0%,rgba(var(--brand-rgb),.9) 45%,rgba(var(--brand-rgb),.72) 100%),
             url(/img/photos/hero-spices.jpg) center / cover no-repeat}
.page-hero>.container{position:relative;z-index:1}
.page-hero .eyebrow{color:var(--accent-light)}
.page-hero h1{color:#fff;font-size:clamp(2rem,4vw,3rem);max-width:20ch}
.page-hero p{color:rgba(255,255,255,.85);max-width:60ch;margin-top:14px;font-size:1.1rem}
.page-hero p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.page-hero p a:hover{color:var(--accent-light)}
.breadcrumb{font-size:.85rem;color:rgba(255,255,255,.7);margin-bottom:16px}
.breadcrumb a{color:rgba(255,255,255,.9)}
/* Two-column hero with live artwork (category pages) */
.page-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-top:4px}
.page-hero-copy .btn{margin-top:22px}
.page-hero-art{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--white)}
.page-hero-art img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){
  .page-hero-grid{grid-template-columns:1fr;gap:26px}
  .page-hero-art{max-width:440px}
}

/* ---- Product detail --------------------------------------------------- */
.pd-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:start}
.pd-media{border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,var(--paper-2),#e6dcc7);aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:sticky;top:100px}
.pd-media img{width:100%;height:100%;object-fit:cover}
.pd-media .placeholder{font-family:"Fraunces";font-size:4rem;color:var(--brand);opacity:.35}
.pd-title{font-size:clamp(2rem,3.6vw,2.7rem);margin-bottom:6px}
.pd-botanical{font-style:italic;color:var(--muted);margin-bottom:20px}
.pd-lede{font-size:1.14rem;color:var(--ink);margin-bottom:26px}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.pd-body{white-space:pre-line;color:#3a3733;line-height:1.8}
.pd-body p{margin-bottom:14px}
.spec-table{width:100%;border-collapse:collapse;margin:22px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:none}
.spec-table tr:nth-child(even){background:var(--paper)}
.spec-table td{padding:12px 16px;font-size:.96rem}
.spec-table td:first-child{color:var(--muted);width:44%;font-weight:500}
.pd-block{margin-top:34px}
.pd-block h3{font-size:1.35rem;margin-bottom:14px}
.chip-list{display:flex;flex-wrap:wrap;gap:9px}
.chip{background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-size:.9rem;color:var(--brand-dark)}
.info-callout{background:var(--paper);border-left:3px solid var(--accent);padding:16px 20px;border-radius:0 10px 10px 0;margin-top:20px;font-size:.95rem;color:var(--muted)}

/* ---- Prose (content pages) ------------------------------------------- */
.prose{max-width:760px}
.prose .lede{font-size:1.18rem;line-height:1.65;color:var(--ink);margin-bottom:24px}
.prose h2{font-size:1.7rem;margin:34px 0 14px}
.prose h3{font-size:1.3rem;margin:26px 0 10px}
.prose p{margin-bottom:16px;color:#3a3733}
.prose ul{margin:0 0 18px 0;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:28px;margin-bottom:10px;color:#3a3733}
.prose li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.prose strong{color:var(--ink)}

/* ---- Certifications --------------------------------------------------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.cert-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.cert-badge{width:64px;height:64px;margin:0 auto 16px;border-radius:14px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cert-badge img{width:100%;height:100%;object-fit:contain;padding:6px}
.cert-badge span{font-family:"Fraunces";font-weight:600;color:var(--brand);font-size:1rem}
.cert-card h3{font-size:1.1rem;margin-bottom:6px}
.cert-card p{color:var(--muted);font-size:.9rem}

/* ---- Forms ------------------------------------------------------------ */
.form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field.full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:"Inter";font-size:1rem;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--paper);color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.form-note{font-size:.85rem;color:var(--muted);margin-top:6px}
.alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:.95rem}
.alert-success{background:#e6f3ec;border:1px solid #b9dfc8;color:#1c5a3c}

/* ---- Contact split ---------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:start}
.contact-info h3{font-size:1.4rem;margin-bottom:18px}
.contact-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.contact-line svg{width:20px;height:20px;color:var(--accent-dark);flex-shrink:0;margin-top:3px}
.contact-line a,.contact-line span{color:var(--ink);font-size:1rem}
.contact-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.contact-badges span{background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:.82rem;color:var(--brand-dark)}

/* ---- WhatsApp FAB ----------------------------------------------------- */
/* ---- Floating action stack (call / WhatsApp / quote) ------------------ */
.fab-stack{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:12px}
.fab{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px -6px rgba(var(--brand-rgb),.55);transition:transform .2s}
.fab:hover{transform:scale(1.08);color:#fff}
.fab-call{background:var(--brand)}
.fab-whatsapp{background:var(--brand-2)}
.fab-quote{background:var(--accent);color:var(--on-accent)}
.fab-quote:hover{color:var(--on-accent)}

/* ---- Footer ----------------------------------------------------------- */
.site-footer{background:var(--brand-dark);color:rgba(255,255,255,.78);padding:64px 0 0;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px;padding-bottom:44px}
.footer-brand{font-family:"Fraunces";font-size:1.4rem;font-weight:600;color:#fff;margin-bottom:14px}
.footer-about p{font-size:.95rem;line-height:1.7;max-width:36ch}
.footer-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.footer-badges span{font-size:.78rem;background:rgba(255,255,255,.08);padding:5px 11px;border-radius:6px;color:var(--accent-light)}
.footer-col h4{color:#fff;font-family:"Inter";font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.footer-col a{display:block;color:rgba(255,255,255,.72);font-size:.95rem;margin-bottom:9px}
.footer-col a:hover{color:var(--accent-light)}
.footer-addr{font-size:.95rem;margin:6px 0 16px}
.footer-col .btn{margin-top:6px}
/* Categories get the full width rather than a quarter of it: in a 184px column
   fourteen of the nineteen names wrapped to two lines, which alone made the
   footer over 1000px tall. column-width flows them into as many columns as fit,
   so this needs no breakpoints — it drops to one column on a phone by itself. */
.footer-cats{padding-top:32px;padding-bottom:40px;border-top:1px solid rgba(255,255,255,.1)}
.footer-cats h4{color:#fff;font-family:"Inter";font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.footer-cat-list{column-width:220px;column-gap:32px}
.footer-cat-list a{display:block;color:rgba(255,255,255,.72);font-size:.95rem;margin-bottom:9px;break-inside:avoid}
.footer-cat-list a:hover{color:var(--accent-light)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:26px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;color:rgba(255,255,255,.6)}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:rgba(255,255,255,.7)}
.footer-links a:hover{color:#fff}

/* ---- Utilities -------------------------------------------------------- */
/* Off-screen but still read by search engines and screen readers. Used for the
   homepage H1, whose visible counterpart is baked into the banner image.
   Not display:none — that would hide it from assistive tech too. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.mt-40{margin-top:40px}
.text-center{text-align:center}

/* ---- Responsive ------------------------------------------------------- */
/* The full nav needs ~1150px to sit on one line. Below that it collapses to
   the hamburger menu, so tablets and small laptops don't get a broken header. */
@media(max-width:1023px){
  .nav-toggle{display:flex}
  .main-nav{position:fixed;top:74px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 24px;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .28s;box-shadow:var(--shadow);max-height:calc(100vh - 74px);overflow:auto}
  body.nav-open .main-nav{transform:translateY(0)}
  .main-nav>a,.has-drop>a{padding:13px 0;border-bottom:1px solid var(--line)}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 8px 14px;min-width:0}
  .nav-cta{margin-top:12px;justify-content:center}
}
@media(max-width:900px){
  .pd-grid,.contact-grid,.grid-2{grid-template-columns:1fr}
  .pd-media{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .cta-band{padding:36px}
}
@media(max-width:760px){
  body{font-size:16px}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .section{padding:60px 0}
  .cta-band{flex-direction:column;align-items:flex-start}
}

/* ---- Blog ------------------------------------------------------------- */
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.post-media{aspect-ratio:16/9;background:linear-gradient(135deg,var(--paper-2),#e9e2d2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.post-media img{width:100%;height:100%;object-fit:cover}
.post-media .placeholder{font-family:"Fraunces";font-size:2.4rem;color:var(--brand);opacity:.4}
.post-body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-body h3{font-size:1.24rem;margin-bottom:8px;line-height:1.3}
.post-body p{color:var(--muted);font-size:.96rem;margin-bottom:18px;flex:1}
.post-meta{font-size:.82rem;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px}
/* Sits inside the dark .page-hero, so it needs light text rather than --muted. */
.post-hero-meta{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.82);font-size:.94rem;margin-top:14px}
.post-layout{max-width:780px}
.post-hero-img{width:100%;border-radius:var(--radius);margin-bottom:36px;border:1px solid var(--line)}

/* ---- FAQ -------------------------------------------------------------- */
.faq-layout{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.faq-topic{margin-bottom:44px}
.faq-topic:last-child{margin-bottom:0}
.faq-topic-title{font-size:1.05rem;text-transform:uppercase;letter-spacing:.07em;color:var(--brand);margin-bottom:16px;font-family:"Inter",sans-serif;font-weight:600}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:12px;overflow:hidden}
.faq-item summary{padding:18px 22px;cursor:pointer;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;transition:color .18s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--brand)}
.faq-chevron{flex:none;color:var(--muted);transition:transform .22s}
.faq-item[open] summary{color:var(--brand)}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}
.faq-answer{padding:0 22px 20px;color:var(--muted);line-height:1.7}
.faq-cta{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:sticky;top:100px}
.faq-cta h3{font-size:1.2rem;margin-bottom:8px}
.faq-cta p{color:var(--muted);font-size:.94rem;margin-bottom:18px}
.faq-cta .btn{width:100%;justify-content:center;margin-bottom:10px}
.faq-cta .btn:last-child{margin-bottom:0}
@media(max-width:900px){
  .faq-layout{grid-template-columns:1fr;gap:36px}
  .faq-cta{position:static}
}

/* =========================================================================
   Homepage (Eviora-style) sections — scoped classes, home page only
   ========================================================================= */

/* ---- About split ------------------------------------------------------ */
.about-split{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.about-visual{position:relative;border-radius:20px;overflow:hidden;min-height:400px;background:linear-gradient(150deg,var(--brand-dark),var(--brand) 60%,var(--brand-2));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.about-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-visual-mark{font-family:"Fraunces";font-size:8rem;font-weight:600;color:rgba(255,255,255,.16)}
.about-stat{position:absolute;left:22px;bottom:22px;z-index:2;background:#fff;border-radius:14px;padding:18px 22px;max-width:230px;box-shadow:0 14px 40px -18px rgba(var(--brand-rgb),.55)}
.about-stat strong{display:block;font-family:"Fraunces";font-size:2.4rem;line-height:1;color:var(--brand);font-weight:600}
.about-stat span{display:block;margin-top:6px;font-size:.86rem;color:var(--muted);line-height:1.4}
.about-copy .eyebrow{margin-bottom:14px}
.about-copy h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:16px}
.about-copy>p{color:var(--muted);font-size:1.05rem;margin-bottom:22px}
.about-points{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.about-points li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--ink)}
.about-points li svg{flex:none;width:20px;height:20px;color:#fff;background:var(--accent);border-radius:50%;padding:3px;margin-top:2px}

/* ---- Numbered process steps (About) ----------------------------------- */
/* Counter-driven numbering, so adding or removing a step renumbers the rest. */
.step-list{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:18px;max-width:840px}
.step{counter-increment:step;position:relative;display:flex;gap:20px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.step::before{content:counter(step);flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);font-family:"Fraunces",Georgia,serif;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.step-body h3{font-size:1.16rem;margin-bottom:6px}
.step-body p{color:var(--muted);font-size:.96rem;line-height:1.65}

/* ---- Fact table (About) ----------------------------------------------- */
.fact-table{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.fact-row{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:16px 24px;border-bottom:1px solid var(--line)}
.fact-row:last-child{border-bottom:none}
.fact-row:nth-child(even){background:var(--paper)}
.fact-row dt{font-weight:500;color:var(--ink);font-size:.95rem}
.fact-row dd{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
@media(max-width:700px){
  .fact-row{grid-template-columns:1fr;gap:4px}
  .step{flex-direction:column;gap:12px}
}

/* ---- Certifications strip --------------------------------------------- */
.cert-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.cert-chip{display:flex;flex-direction:column;align-items:center;gap:12px;width:150px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 14px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.cert-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.cert-chip-badge{width:54px;height:54px;border-radius:14px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cert-chip-badge svg{width:26px;height:26px;color:var(--brand)}
.cert-chip-badge img{width:100%;height:100%;object-fit:contain;padding:6px}
.cert-chip span{font-size:.92rem;font-weight:500;color:var(--brand-dark);line-height:1.3}

/* ---- Testimonials: rating badge + light card variant ------------------ */
.rating-badge{display:inline-flex;align-items:center;gap:10px;margin-top:18px;background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:8px 18px}
.rating-value{font-family:"Fraunces";font-weight:600;font-size:1.3rem;color:var(--brand-dark)}
.rating-stars{color:var(--accent);letter-spacing:2px;font-size:1rem}
.rating-note{font-size:.86rem;color:var(--muted)}
.quote-grid.light .quote-card{background:#fff;border:1px solid var(--line)}
.quote-grid.light .quote-card p{color:#3a3733}
.quote-grid.light .quote-card .mark{color:var(--accent)}
.quote-grid.light .quote-meta{color:var(--muted)}
.quote-grid.light .quote-meta strong{color:var(--ink)}

/* ---- FAQ on the homepage ---------------------------------------------- */
.faq-home-list{max-width:760px;margin:0 auto}

/* ---- Homepage responsive --------------------------------------------- */
@media(max-width:900px){
  .about-split{grid-template-columns:1fr;gap:34px}
  .about-visual{min-height:300px}
}
@media(max-width:760px){
  /* The tall crop existed to fit type baked into the banner image. The words are
     real text now, so the photo only has to sit behind them. */
  .hero{aspect-ratio:4/5}
  .hero-banner::after{background:linear-gradient(180deg,
    rgba(var(--brand-rgb),.30) 0%,
    rgba(var(--brand-rgb),.72) 46%,
    rgba(var(--brand-rgb),.95) 100%)}
  .hero-copy{top:auto;bottom:0;transform:none;max-width:none;padding-bottom:58px}
}
@media(max-width:560px){
  .cert-chip{width:calc(50% - 8px)}
}

/* Products index, grouped by category. The jump links sit above the first
   group; the count tells a buyer how deep each section is before they click. */
.cat-jump{margin-bottom:44px}
.cat-jump .chip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:border-color .15s,background .15s}
.cat-jump .chip:hover{background:#fff;border-color:var(--accent)}
.chip-count{background:var(--brand);color:#fff;border-radius:100px;min-width:22px;padding:1px 7px;font-size:.76rem;text-align:center}
.cat-group-head{margin-bottom:28px;scroll-margin-top:96px}
.cat-group-head h2{font-size:clamp(1.5rem,2.4vw,2rem)}

/* Pagination on the products index and category pages. */
.pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:56px}
.pagination a,.pagination span{border:1px solid var(--line);border-radius:100px;padding:9px 17px;
  font-size:.92rem;color:var(--ink);background:var(--paper-2);text-decoration:none;transition:border-color .15s,background .15s}
.pagination a:hover{border-color:var(--accent);background:#fff}
.pagination .is-on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pagination .is-off{opacity:.38}
.page-gap{border:0!important;background:0!important;padding:0 2px!important;color:var(--muted)}
/* "See all 29 →" beside a category heading on the paginated index. */
.group-all{font-family:system-ui,sans-serif;font-size:.85rem;font-weight:500;color:var(--accent-dark);
  white-space:nowrap;margin-left:12px;vertical-align:middle}
.group-all:hover{text-decoration:underline}