* { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:'Inter',sans-serif; color:#211B15; background:#F9F7F1; }
  /* Global baseline for every link on the site — without this, any
     <a> tag that doesn't happen to have its own specific style rule
     falls through to the browser's own default (blue, underlined),
     which is what was happening on a couple of untouched links. Every
     component below that wants a link to look/behave differently
     (buttons, nav, "Read more" links, etc.) already sets its own
     color/decoration explicitly, so this only affects links that
     were never styled in the first place — it can't override anything
     that's intentionally still blue or underlined, because nothing
     here is. */
  a { color: inherit; text-decoration: none; }
  /* clip horizontal overflow per-section instead of on body/html, so position:sticky keeps working */
  section, footer.site, .trust, .top-stack { overflow-x:clip; }

  /* Skip-to-content link: invisible until a keyboard user tabs to it,
     then jumps straight past the header/nav to the page's actual
     content instead of forcing them through every nav link first. */
  .skip-link {
    position: absolute; top: -100px; left: 12px; z-index: 2000;
    background: #1C130C; color: #F8F2E4; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    padding: 12px 20px; border-radius: 4px; text-decoration: none;
    transition: top .2s ease;
  }
  .skip-link:focus { top: 12px; }

  /* Hides an element from the very first paint (not via JS, which for
     anything above the fold often runs too late to prevent the flash
     it's trying to fix — see assets/js/sync-fade.js's msRevealOnly for
     the full reasoning). The matching script on each page removes this
     class once the real content is in place. If JavaScript is off
     entirely, the noscript rule below forces it visible again — this
     must never be a way to permanently hide content, only to delay
     showing it by a fraction of a second. */
  .ms-hide-until-ready { opacity: 0; }
  img, svg { max-width:100%; }
  .wrap { max-width:1140px; margin:0 auto; padding:0 clamp(20px, 4vw, 44px); }
  .eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#A6821D; margin-bottom:16px; }
  h2.h { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px, 4vw, 34px); line-height:1.2; }
  .btn { display:inline-flex; align-items:center; gap:9px; padding:14px 30px; font-size:13.5px; letter-spacing:.03em; text-decoration:none; position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, color .35s ease, gap .3s ease, background .2s ease; will-change:transform; touch-action:manipulation; }
  .btn svg { flex-shrink:0; transition:transform .3s cubic-bezier(.4,0,.2,1); }
  .btn:hover svg { transform:translateX(3px); }
  .btn-ink { background:#1C130C; color:#F8F2E4; }
  .btn-ink:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(28,19,12,.28); gap:13px; }
  /* :active is what a touchscreen tap actually triggers — :hover never
     fires on touch at all. Native browsers normally flash a gray
     highlight on tap by default, giving free "yes, that registered"
     feedback, but that's deliberately turned off site-wide below
     (-webkit-tap-highlight-color: transparent, since the default flash
     looks inconsistent with the rest of the design) — which means
     these :active rules are the ONLY tap feedback that exists at all,
     not just a nice-to-have. A tap with no visible response is exactly
     what makes people tap a second time, thinking the first didn't
     register. Deliberately near-instant (no easing delay) so it feels
     immediate rather than catching up to the finger. */
  .btn-ink:active { transform:translateY(0) scale(.97); box-shadow:0 4px 10px rgba(28,19,12,.3); transition:transform .08s ease; }
  .btn-line { border:1px solid #1C130C; color:#1C130C; transition:background .35s ease, color .35s ease, transform .35s ease, gap .3s ease; touch-action:manipulation; }
  .btn-line:hover { background:#1C130C; color:#F8F2E4; transform:translateY(-3px); gap:13px; }
  .btn-line:active { background:#1C130C; color:#F8F2E4; transform:scale(.97); transition:transform .08s ease, background .1s ease, color .1s ease; }
  .link { font-size:13px; letter-spacing:.03em; color:#1C130C; border-bottom:1px solid #A6821D; padding-bottom:3px; text-decoration:none; display:inline-block; transition:color .3s ease, letter-spacing .3s ease, border-color .3s ease; touch-action:manipulation; }
  .link:hover { color:#A6821D; letter-spacing:.06em; }
  .link:active { color:#A6821D; }
  a, button { -webkit-tap-highlight-color: transparent; touch-action:manipulation; }

  /* generic hover-lift for image frames / cards */
  .about .frame, .products .img, .news .card .img { overflow:hidden; }
  .about .frame::after, .products .img::after, .news .card .img::after { content:''; }
  .about .frame, .products .img > * , .news .card .img { transition:transform .6s cubic-bezier(.25,.8,.25,1); }
  .products .img, .news .card .img { transition:transform .5s ease; background-blend-mode:normal; }
  .products .img:hover, .news .card .img:hover, .about .frame:hover { transform:scale(1.035); }
  .about .frame { transition:transform .6s cubic-bezier(.25,.8,.25,1); }

  /* AOS speed tuning */
  [data-aos] { pointer-events:auto; }

  /* hero — approved direction */
  .top-stack { position:relative; }
  .hero { position:relative; min-height:640px; display:flex; flex-direction:column; overflow:hidden; }
  .hero .bg-parallax { position:absolute; inset:-4% -2%; z-index:0; will-change:transform; }
  .hero .bg { position:absolute; inset:0; background-image:url('https://www.wholesalesuppliesplus.com/cdn/shop/files/4660-shea-butter-natural-thumbnail.jpg?v=1775182430'); background-size:cover; background-position:center; will-change:transform; }
  .hero .bg::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(15,10,6,.72) 0%, rgba(15,10,6,.42) 45%, rgba(15,10,6,.12) 75%); }
  .hero .sheen { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.06) 52%, transparent 60%); transform:translateX(-120%); animation:heroSheen 2.4s cubic-bezier(.4,0,.2,1) .6s forwards; }
  @keyframes heroSheen { to { transform:translateX(120%); } }
  header.site { position:relative; z-index:20; }
  header.site .topbar { background:#F4EEDC; border-bottom:1px solid #E4D8BF; padding:10px 0; }
  header.site .topbar .wrap { display:flex; justify-content:space-between; align-items:center; font-size:11.5px; letter-spacing:.04em; color:#7A6B52; }
  header.site .topbar .left { display:flex; gap:26px; }
  header.site .topbar .item { display:flex; align-items:center; gap:7px; }
  header.site .topbar .item svg { display:block; }
  header.site .topbar .social { display:flex; align-items:center; gap:8px; }
  header.site .topbar .social a {
    width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#7A6B52; font-size:11.5px; transition:background .25s ease, color .25s ease, transform .25s ease;
  }
  header.site .topbar .social a:hover { background:#1C130C; color:#F8F2E4; transform:translateY(-2px); }
  header.site .logo-row { padding:10px 0; text-align:center; }
  header.site .mark { font-family:'Fraunces',serif; font-weight:500; font-size:22px; color:#1C130C; letter-spacing:.03em; }
  header.site .mark, .drawer-head .mark, .mobile-bar .mobile-logo { text-decoration:none; }
  /* The logo (icon + wordmark) deliberately has no hover colour change: it is a brand mark, not a text link. */
  .mark, .mobile-logo { display:inline-flex; align-items:center; gap:4px; }
  .logo-icon { width:44px; height:44px; flex-shrink:0; display:block; }
  .drawer-head .logo-icon { width:38px; height:38px; }
  footer.site .mark .logo-icon { width:40px; height:40px; }

  /* wordmark: Whisper only ships one weight (400) — there's no true bold
     to switch to. font-weight:700 would trigger the browser's synthetic
     "faux bold", which skews and doubles-up the strokes unevenly and
     breaks the connected script (the same reason we skip italic too).
     Instead, a hair-thin text-stroke adds weight uniformly around every
     letter — this is the correct way to make a single-weight script read
     slightly heavier without distorting it — so it holds its own next to
     the icon mark instead of feeling thin and separate from it. */
  .wordmark { font-family:'Whisper',cursive; font-weight:400; letter-spacing:0; white-space:nowrap; -webkit-text-stroke:0.6px currentColor; text-stroke:0.6px currentColor; }
  .wordmark .cap { font-size:1.4em; line-height:1; }
  header.site .mark .wordmark { font-size:26px; line-height:0.7; display:inline-block; }
  .drawer-head .mark .wordmark { font-size:23px; }
  .mobile-bar .mobile-logo .wordmark { font-size:clamp(22px,6vw,26px); }
  footer.site .mark .wordmark { font-size:26px; }
  header.site nav.main {
    position:relative; z-index:20; padding:15px 0; background:#FBF9F4; border-top:1px solid #E4D8BF; border-bottom:1px solid #E4D8BF;
  }
  header.site nav.main.is-fixed {
    position:fixed; top:0; left:0; right:0;
    background:rgba(251,249,244,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 24px rgba(36,26,18,.08); padding:15px 0; border-top:none;
    animation:navDrop .25s ease;
  }
  header.site .nav-spacer { display:none; }
  header.site .nav-spacer.active { display:block; height:53px; }
  @keyframes navDrop { from { transform:translateY(-100%); } to { transform:translateY(0); } }
  header.site nav.main .row { display:flex; justify-content:center; align-items:center; gap:36px; }
  header.site nav.main .links { display:flex; gap:32px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
  header.site nav.main .links a { color:#3E342A; text-decoration:none; opacity:.85; position:relative; padding-bottom:2px; transition:opacity .3s ease, color .3s ease; }
  header.site nav.main .links a::after { content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px; background:#A6821D; transition:right .3s cubic-bezier(.4,0,.2,1); }
  header.site nav.main .links a:hover { opacity:1; color:#A6821D; }
  header.site nav.main .links a:hover::after { right:0; }
  header.site nav.main .links a.active { opacity:1; color:#A6821D; }
  header.site nav.main .links a.active::after { right:0; }
  header.site nav.main .cta { border:1px solid #1C130C; color:#1C130C; padding:9px 22px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:background .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease; }
  header.site nav.main .cta:hover { background:#1C130C; color:#F8F2E4; transform:translateY(-2px); box-shadow:0 10px 22px rgba(28,19,12,.22); }
  header.site nav.main .icon-actions { display:flex; align-items:center; gap:16px; margin-left:8px; }
  header.site nav.main .icon-btn { background:none; border:none; padding:0; color:#3E342A; cursor:pointer; display:flex; align-items:center; transition:color .3s ease, transform .3s ease; }
  header.site nav.main .icon-btn:hover { color:#A6821D; transform:translateY(-2px); }

  /* mobile bar: search/login left, logo center, hamburger right */
  .mobile-bar { display:none; transition:box-shadow .25s ease, background .25s ease; }
  .mobile-bar .mobile-icons { display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:64px; }
  /* Padding + matching negative margin expands the actual tap target
     to a proper touch-friendly size (was 0 padding — just the raw
     17px icon, well under the ~40px+ a thumb reliably hits) without
     changing how anything visually looks or shifting the icon's
     position. The 10px expansion is deliberately smaller than
     .mobile-bar's own 12px gap below, so this can never reach past
     the gap into the logo's box next to it — that overlap (an
     imprecise tap landing on the logo link instead of the icon it was
     meant for) was the actual bug. */
  .mobile-bar .icon-btn { background:none; border:none; padding:10px; margin:-10px; color:#3E342A; cursor:pointer; display:flex; align-items:center; }
  .mobile-bar .icon-btn:active { color:#A6821D; }
  .mobile-bar .mobile-logo { flex:1 1 auto; min-width:0; justify-content:center; font-family:'Fraunces',serif; font-weight:500; font-size:clamp(16px,4.6vw,19px); color:#1C130C; letter-spacing:.01em; white-space:nowrap; overflow:hidden; padding:0 8px; }
  .mobile-bar .mobile-logo .logo-icon { width:32px; height:32px; flex-shrink:0; }
  .mobile-bar .hamburger-wrap { flex:0 0 auto; min-width:64px; display:flex; justify-content:flex-end; }
  .mobile-bar-spacer { display:none; }
  .hero .content { position:relative; z-index:2; flex:1; display:flex; align-items:center; padding:20px 0 clamp(56px,9vw,90px); }
  .hero .content .wrap { width:100%; }
  .hero .inner { max-width:560px; }
  .hero .eyebrow-light { font-size:clamp(11px,2vw,12px); letter-spacing:.18em; text-transform:uppercase; color:#D9B96A; margin-bottom:clamp(14px,3vw,22px); }
  .hero h1 { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(30px, 5.4vw, 52px); line-height:1.14; color:#F8F2E4; margin-bottom:clamp(16px,3vw,24px); }
  .hero h1 i { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; color:#E8C97A; }
  .hero p { font-family:'Cormorant Garamond',serif; font-size:clamp(16px, 2.2vw, 20px); line-height:1.6; color:#E4D9C4; max-width:440px; margin-bottom:clamp(24px,5vw,34px); }
  .hero .btns { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .hero .btn-line-light { border:1px solid rgba(248,242,228,.6); color:#F8F2E4; padding:14px 30px; font-size:13.5px; letter-spacing:.03em; text-decoration:none; display:inline-flex; align-items:center; gap:9px; transition:background .35s ease, border-color .35s ease, transform .35s ease, gap .3s ease; touch-action:manipulation; }
  .hero .btn-line-light svg { flex-shrink:0; transition:transform .3s cubic-bezier(.4,0,.2,1); }
  .hero .btn-line-light:hover { background:rgba(248,242,228,.14); border-color:#F8F2E4; transform:translateY(-3px); gap:13px; }
  .hero .btn-line-light:hover svg { transform:translateX(3px); }
  .hero .btn-line-light:active { background:rgba(248,242,228,.22); border-color:#F8F2E4; transform:scale(.97); transition:transform .08s ease, background .1s ease; }
  .hero .bg { transform:scale(1.08); animation:heroZoom 16s ease-out forwards; }
  @keyframes heroZoom { from { transform:scale(1.08); } to { transform:scale(1); } }
  .hero .stats { position:relative; z-index:2; display:flex; gap:56px; padding:26px 0; background:rgba(15,10,6,.35); border-top:1px solid rgba(243,235,217,.18); }
  .hero .stats .wrap { display:flex; gap:56px; }
  .hero .stat b { font-family:'Fraunces',serif; font-size:clamp(17px,2.6vw,22px); color:#F8F2E4; display:block; }
  .hero .stat span { font-size:clamp(10px,1.6vw,11.5px); letter-spacing:.04em; text-transform:uppercase; color:#C7B896; }

  /* trust bar */
  .trust { background:#F4EEDC; padding:20px 0; border-bottom:1px solid #E8E0CC; }
  .trust .wrap { display:flex; align-items:center; justify-content:space-around; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#7A6B52; }
  .trust-link { display:inline-flex; align-items:center; gap:6px; color:#A47C2B; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; transition:gap .25s ease, color .25s ease; }
  .trust-link:hover { gap:10px; color:#8A6620; }

  /* about */
  .about { padding:100px 0; }
  .about .grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
  .about .frame { aspect-ratio:4/5; background-image:url('https://essentiallynatural.co.za/cdn/shop/articles/Blog_size_41_1_1_1_1_1_1_fea32d46-836f-49d6-a1cb-758b433e1b93.png?v=1741007406'); background-size:cover; background-position:center; border-radius:6px; box-shadow:0 0 0 10px #FFFFFF, 0 0 0 11px #E4D9C4, 0 28px 56px -18px rgba(28,19,12,.28); }
  .about h2 { margin-bottom:20px; }
  .about p { font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.8; color:#4A3B2C; max-width:460px; margin-bottom:16px; }
  .about .sig { font-family:'Fraunces',serif; font-style:italic; color:#A6821D; margin-top:18px; }

  /* products */
  .products { padding:110px 0; background:#FFFFFF; }
  .products .head { text-align:center; max-width:520px; margin:0 auto 76px; }
  .products .eyebrow { display:flex; justify-content:center; }
  .products .spread { display:grid; gap:110px; }
  .products .row { display:grid; grid-template-columns:0.92fr 1fr; gap:70px; align-items:center; }
  .products .row.reverse .img { order:2; }
  .products .row.reverse .body { order:1; }
  .products .img { aspect-ratio:6/5; background-size:cover; background-position:center; position:relative; border-radius:6px; box-shadow:0 0 0 10px #FFFFFF, 0 0 0 11px #E4D9C4, 0 28px 56px -18px rgba(28,19,12,.22); }
  .products .body .kicker { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#A6821D; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
  .products .body .kicker::before { content:''; width:26px; height:1px; background:#A6821D; }
  .products .body h3 { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(28px,3vw,36px); line-height:1.12; margin-bottom:18px; }
  .products .body p { font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.75; color:#4A3B2C; max-width:420px; margin-bottom:26px; }
  .products .specs { display:flex; margin-bottom:28px; border-top:1px solid #E8E0CC; border-bottom:1px solid #E8E0CC; max-width:420px; }
  .products .spec { flex:1; padding:12px 14px 12px 0; border-right:1px solid #E8E0CC; }
  .products .spec:last-child { border-right:none; padding-right:0; }
  .products .spec b { display:block; font-family:'Fraunces',serif; font-size:16px; color:#1C130C; font-weight:500; }
  .products .spec span { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8A7455; }
  .products .body .link { font-family:'Cormorant Garamond',serif; font-size:14px; letter-spacing:.03em; color:#1C130C; border-bottom:1px solid #A6821D; padding-bottom:4px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:gap .25s ease, color .25s ease; }
  .products .body .link:hover { gap:13px; color:#A6821D; }

  /* export - dark anchor, matches hero image treatment */
  .export { position:relative; padding:100px 0; overflow:hidden; }
  .export .bg { position:absolute; inset:0; z-index:0; background-image:url('https://images.unsplash.com/photo-1670121180583-39ab653a071c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDF8fHNlYXBvcnR8ZW58MHx8fHwxNzY2NDIxNDExfDA&ixlib=rb-4.1.0&q=80&w=1200'); background-size:cover; background-position:center; }
  .export .bg::after { content:''; position:absolute; inset:0; background:rgba(15,10,6,.78); }
  .export .wrap { position:relative; z-index:1; }
  .export .eyebrow { color:#D9B96A; }
  .export h2 { color:#F8F2E4; margin-bottom:16px; max-width:520px; }
  .export p { font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.8; color:#D9CBAA; max-width:480px; margin-bottom:0; }
  .export .stats { display:flex; gap:56px; margin-top:36px; padding-top:32px; border-top:1px solid rgba(248,242,228,.14); }
  .export .stat b { font-family:'Fraunces',serif; font-size:28px; color:#F8F2E4; display:block; }
  .export .stat span { font-size:11.5px; color:#B8A87E; letter-spacing:.04em; text-transform:uppercase; }
  .export-cta { margin-top:32px; }
  .export .btn-line-light { border:1px solid rgba(248,242,228,.6); color:#F8F2E4; padding:14px 30px; font-size:13.5px; text-decoration:none; display:inline-flex; align-items:center; gap:9px; transition:background .35s ease, border-color .35s ease, transform .35s ease, gap .3s ease; touch-action:manipulation; }
  .export .btn-line-light svg { flex-shrink:0; transition:transform .3s cubic-bezier(.4,0,.2,1); }
  .export .btn-line-light:hover { background:rgba(248,242,228,.14); border-color:#F8F2E4; transform:translateY(-3px); gap:13px; }
  .export .btn-line-light:hover svg { transform:translateX(3px); }
  .export .btn-line-light:active { background:rgba(248,242,228,.22); border-color:#F8F2E4; transform:scale(.97); transition:transform .08s ease, background .1s ease; }
  .export .bg { transition:transform 8s ease; }
  .export:hover .bg { transform:scale(1.06); }

  /* sustainability */
  .sustain { padding:100px 0; background:#EAEFE1; }
  .sustain .grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
  .sustain .eyebrow { color:#5C7A47; }
  .sustain h2 { margin-bottom:20px; }
  .sustain p { font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.8; color:#3E4A34; max-width:460px; }
  .sustain .pillars { display:grid; gap:0; }
  .sustain .pillar { padding:22px 0; border-top:1px solid #D3DCC3; }
  .sustain .pillar:last-child { border-bottom:1px solid #D3DCC3; }
  .sustain .pillar b { font-family:'Fraunces',serif; font-size:17px; display:block; margin-bottom:6px; }
  .sustain .pillar span { font-size:14px; color:#5A5748; }

  /* capabilities */
  .capabilities { padding:100px 0; background:#FBF9F4; }
  .capabilities .head { max-width:520px; margin-bottom:56px; }
  .capabilities .grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
  .capabilities .item { display:flex; gap:20px; padding:28px 32px 28px 0; border-top:1px solid #E0D3AE; transition:transform .35s ease, padding-left .35s ease; }
  .capabilities .item:hover { transform:translateX(4px); }
  .capabilities .num { transition:color .35s ease, transform .35s ease; }
  .capabilities .item:hover .num { color:#1C130C; transform:scale(1.1); }
  .capabilities .item:nth-child(2n) { padding-left:32px; padding-right:0; }
  .capabilities .item:nth-child(-n+2) { border-top:none; }
  .capabilities .num { font-family:'Fraunces',serif; font-size:15px; color:#A6821D; padding-top:2px; }
  .capabilities .item h3 { font-family:'Fraunces',serif; font-weight:500; font-size:18px; margin-bottom:8px; }
  .capabilities .item p { font-size:14px; line-height:1.65; color:#5A5748; }

  /* testimonial */
  .testimonial { padding:100px 0; text-align:center; background:#F4EEDC; border-bottom:1px solid #E0D3AE; }
  .testimonial .mark { font-family:'Fraunces',serif; font-size:64px; color:#D9B96A; line-height:1; margin-bottom:8px; }
  .testimonial .quote { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:26px; line-height:1.5; color:#211B15; max-width:680px; margin:0 auto 30px; }
  .testimonial .rule { width:48px; height:1px; background:#A6821D; margin:0 auto 22px; }
  .testimonial .name { font-family:'Fraunces',serif; font-size:16px; margin-bottom:4px; }
  .testimonial .role { font-size:13px; color:#7A6B52; }
  .testimonial .dots { display:flex; justify-content:center; gap:8px; margin-top:36px; }
  .testimonial .dot { width:6px; height:6px; border-radius:50%; background:#D8CBA5; border:none; padding:0; cursor:pointer; transition:background .25s ease, transform .25s ease; }
  .testimonial .dot.active { background:#A6821D; transform:scale(1.35); }
  .testimonial .slide { transition:opacity .35s ease; }

  /* certifications */
  .certs { padding:88px 0; text-align:center; }
  .certs h2 { margin:0 auto 46px; }
  .certs .row { display:flex; justify-content:center; gap:50px; }
  .certs .medal { width:92px; height:92px; border:1px solid #1C130C; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:12px; text-align:center; padding:12px; position:relative; transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .4s ease, color .4s ease, box-shadow .4s ease; cursor:default; }
  .certs .medal:hover { transform:translateY(-6px) rotate(-2deg); background:#1C130C; color:#F8F2E4; box-shadow:0 16px 30px rgba(28,19,12,.2); }
  .certs .medal::before { content:''; position:absolute; inset:6px; border:1px solid #E0D3AE; border-radius:50%; }

  /* news/journal */
  .news { padding:100px 0; background:#FFFFFF; }
  .news .masthead { text-align:center; margin-bottom:50px; }
  .news .masthead h2 { font-family:'Fraunces',serif; font-size:15px; letter-spacing:.2em; text-transform:uppercase; }
  .news .rule { width:120px; height:1px; background:#C7B896; margin:14px auto 0; }
  .news .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
  .news .card { padding:0 28px 0 0; border-left:1px solid #D8CBA5; }
  .news .card:first-child { border-left:none; }
  .news .card .img { aspect-ratio:16/10; background-size:cover; background-position:center; margin-bottom:22px; }
  .news .card .body { padding:0 28px; }
  .news .card:first-child .body { padding-left:0; }
  .news .card:last-child .body { padding-right:0; }
  .news .tag { color:#A6821D; font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; }
  .news .card h3 { font-family:'Fraunces',serif; font-weight:500; font-size:18px; margin-bottom:12px; line-height:1.3; }
  /* Blog card headline is now also a link straight to the article
     (previously only the "Read more" link below it worked) — inherits
     the heading's own color/weight rather than looking like a default
     link, with a subtle hover shift for affordance. Covers the
     homepage journal cards (.news), the blog listing grid
     (.post-grid), and the single featured post (.featured-post). */
  .news .card h3 a, .post-grid .card h3 a, .featured-post .card h2 a {
    color: inherit; text-decoration: none; transition: color .2s ease;
  }
  .news .card h3 a:hover, .post-grid .card h3 a:hover, .featured-post .card h2 a:hover {
    color: #A6821D;
  }
  .news .card p { font-family:'Cormorant Garamond',serif; font-size:17px; color:#4A3B2C; line-height:1.6; margin-bottom:14px; }
  .news .card .link { font-size:13px; letter-spacing:.03em; color:#1C130C; border-bottom:1px solid #A6821D; padding-bottom:3px; text-decoration:none; }

  /* cta premium */
  /* cta - kept light: the footer directly below is dark, so this stays light for contrast/rhythm */
  .cta-band { padding:52px 0; background:#FFFFFF; border-top:1px solid #E8E0CC; }
  .cta-band .row { display:flex; justify-content:space-between; align-items:center; gap:32px; }
  .cta-band .eyebrow { color:#A6821D; letter-spacing:.16em; margin-bottom:6px; }
  .cta-band h2 { font-size:clamp(20px, 2.4vw, 25px); margin:0; color:#1C130C; font-weight:400; line-height:1.3; }
  .cta-band h2 i { font-family:'Fraunces',serif; font-style:italic; font-weight:400; color:#A6821D; }
  .cta-band .btn { padding:14px 30px; font-size:13px; letter-spacing:.04em; white-space:nowrap; }

  /* footer */
  footer.site { background:#0A0A0A; color:#C9C9C9; padding:88px 0 32px; position:relative; }
  footer.site::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, #A6821D, transparent); }
  footer.site .grid { display:grid; grid-template-columns:1.3fr 0.85fr 1fr 1.1fr; gap:48px; margin-bottom:60px; }
  footer.site .mark { font-family:'Fraunces',serif; font-weight:600; font-size:22px; color:#FFFFFF; margin-bottom:18px; display:flex; align-items:center; gap:4px; letter-spacing:.02em; }
  footer.site .mark .dot { width:6px; height:6px; border-radius:50%; background:#C9A23A; }
  footer.site p { font-family:'Cormorant Garamond',serif; font-size:17px; line-height:1.65; color:#B8B8B8; max-width:280px; }
  footer.site h4 { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#FFFFFF; margin-bottom:20px; font-weight:600; }
  footer.site .links { display:grid; gap:12px; font-size:14px; }
  footer.site .links a { color:#C9C9C9; text-decoration:none; transition:color .3s ease, padding-left .3s ease; position:relative; }
  footer.site .links a:hover { color:#FFFFFF; padding-left:6px; }
  footer.site .social { display:flex; gap:12px; margin-top:24px; }
  footer.site .social a { width:36px; height:36px; border:1px solid #3D3D3D; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#D4D4D4; text-decoration:none; font-size:13px; transition:all .3s cubic-bezier(.4,0,.2,1); }
  footer.site .social a:hover { border-color:#FFFFFF; background:#FFFFFF; color:#0A0A0A; transform:translateY(-3px); }
  footer.site .contact-item { display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.6; margin-bottom:16px; color:#C9C9C9; }
  footer.site .contact-item .ic { color:#C9A23A; margin-top:1px; width:15px; height:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  footer.site .newsletter p { font-size:14px; font-family:'Inter',sans-serif; line-height:1.6; color:#A0A0A0; margin-bottom:20px; max-width:260px; }
  footer.site .newsletter-form { display:flex; max-width:340px; border:1px solid #3D3D3D; border-radius:2px; overflow:hidden; transition:border-color .3s ease; }
  footer.site .newsletter-form:focus-within { border-color:#C9A23A; }
  footer.site .newsletter-form input { flex:1; min-width:0; width:100%; background:transparent; border:none; padding:13px 14px; font-size:13.5px; color:#FFFFFF; outline:none; transition:background .3s ease; }
  footer.site .newsletter-form input::placeholder { color:#7A7A7A; }
  footer.site .newsletter-form button { flex-shrink:0; background:#C9A23A; border:none; color:#0A0A0A; padding:0 20px; cursor:pointer; font-size:14px; transition:background .3s ease, transform .3s ease; display:flex; align-items:center; }
  footer.site .newsletter-form button:hover { background:#E0B94A; transform:translateX(3px); }
  footer.site .newsletter-consent { font-size:12px; color:#8A8A8A; margin-top:14px; max-width:260px; line-height:1.5; }
  footer.site .newsletter-consent a { color:#D4D4D4; text-decoration:underline; text-decoration-color:#4A4A4A; }
  footer.site .newsletter-consent a:hover { color:#FFFFFF; }
  footer.site .newsletter-msg { font-size:12.5px; font-weight:500; margin-top:12px; max-width:260px; line-height:1.5; }
  footer.site .bottom { border-top:1px solid #2A2A2A; padding-top:28px; font-size:12.5px; display:flex; justify-content:space-between; align-items:center; color:#9A9A9A; flex-wrap:wrap; gap:14px; }
  footer.site .bottom .legal { display:flex; gap:24px; }
  footer.site .bottom .legal a { color:#C9C9C9; text-decoration:none; transition:color .3s ease; }
  footer.site .bottom .legal a:hover { color:#FFFFFF; }
  footer.site .bottom .payment { color:#9A9A9A; }

  /* ================= HAMBURGER + DRAWER ================= */
  .hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; }
  .hamburger span { display:block; width:22px; height:1.5px; background:#1C130C; transition:transform .25s ease, opacity .25s ease; }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

  .drawer-backdrop { position:fixed; inset:0; background:rgba(15,10,6,.45); z-index:998; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .drawer-backdrop.active { opacity:1; pointer-events:auto; }

  .drawer {
    position:fixed; top:0; right:0; bottom:0; width:320px; max-width:86vw; z-index:1000;
    background:#FBF9F4; box-shadow:-8px 0 32px rgba(15,10,6,.18);
    transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; padding:28px 26px 32px; overflow-y:auto;
  }
  .drawer.open { transform:translateX(0); }
  .drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:36px; }
  .drawer-head .mark { font-family:'Fraunces',serif; font-weight:500; font-size:20px; color:#1C130C; }
  .drawer-close { background:none; border:1px solid #E4D8BF; width:34px; height:34px; border-radius:50%; font-size:20px; line-height:1; color:#1C130C; cursor:pointer; }
  .drawer-links { display:flex; flex-direction:column; gap:2px; margin-bottom:28px; }
  .drawer-links a {
    color:#1C130C; text-decoration:none; font-family:'Fraunces',serif; font-size:19px; padding:13px 0;
    border-bottom:1px solid #EFE7D2;
  }
  .drawer-links a:hover { color:#A6821D; }
  .drawer-cta {
    display:block; text-align:center; background:#1C130C; color:#F8F2E4; padding:14px; font-size:13px;
    letter-spacing:.04em; text-transform:uppercase; text-decoration:none; margin-bottom:30px;
  }
  .drawer-contact { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
  .drawer-contact .item { display:flex; align-items:center; gap:10px; font-size:13px; color:#5A4E3C; }
  .drawer-contact .item svg { color:#A6821D; flex-shrink:0; }
  .drawer-social { display:flex; gap:14px; margin-top:auto; padding-top:20px; border-top:1px solid #EFE7D2; }
  .drawer-social a { width:34px; height:34px; border:1px solid #E4D8BF; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#5A4E3C; font-size:13px; text-decoration:none; transition:all .25s ease; }
  .drawer-social a:hover { border-color:#1C130C; background:#1C130C; color:#F8F2E4; transform:translateY(-2px); }
  body.drawer-locked { overflow:hidden; }

  /* ================= HEADER CART BADGE ================= */
  header.site .icon-btn.cart-btn, .mobile-bar .icon-btn.cart-btn { position:relative; }
  .cart-badge {
    position:absolute; top:-8px; right:-10px; min-width:16px; height:16px; padding:0 4px;
    border-radius:9px; background:#A6821D; color:#FBF9F4; font-family:'Inter',sans-serif;
    font-size:10px; font-weight:600; line-height:16px; text-align:center; opacity:0; transform:scale(.6);
    transition:opacity .2s ease, transform .2s ease; pointer-events:none;
  }
  .cart-badge.is-visible { opacity:1; transform:scale(1); }

  /* ================= SEARCH DRAWER ================= */
  .search-backdrop { position:fixed; inset:0; background:rgba(15,10,6,.45); z-index:998; opacity:0; pointer-events:none; transition:opacity .35s ease; }
  .search-backdrop.active { opacity:1; pointer-events:auto; }
  .search-drawer {
    position:fixed; top:0; right:0; bottom:0; width:min(420px, 100vw); z-index:1001;
    background:#FBF9F4; box-shadow:-24px 0 60px rgba(28,19,12,.25);
    transform:translateX(100%); transition:transform .45s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column;
  }
  .search-drawer.open { transform:translateX(0); }
  .search-drawer-inner { display:flex; flex-direction:column; height:100%; padding:0; }
  .search-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid #E0D3AE; }
  .search-drawer-head h3 { font-family:'Fraunces',serif; font-weight:500; font-size:19px; color:#1C130C; }
  .search-input-row { display:flex; align-items:center; gap:12px; padding:18px 26px; border-bottom:1px solid #EFE7D2; }
  .search-input-row svg { color:#A6821D; flex-shrink:0; }
  .search-input-row input {
    flex:1; border:none; background:none; outline:none; font-family:'Fraunces',serif; font-weight:400;
    font-size:18px; color:#1C130C; min-width:0;
  }
  .search-input-row input::placeholder { color:#9C8E76; }
  .search-close {
    width:34px; height:34px; border:1px solid #D8CBA0; background:#FBFAF6; color:#1C130C; font-size:19px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
  }
  .search-close:hover { background:#1C130C; color:#F8F2E4; transform:rotate(90deg); }
  .search-results { flex:1; overflow-y:auto; padding:16px 26px 26px; }
  .search-hint { font-family:'Cormorant Garamond',serif; font-size:16px; color:#5A4E3C; }
  .search-hint a { color:#A6821D; }
  .search-group-label { font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9C8E76; margin:18px 0 6px; }
  .search-group-label:first-child { margin-top:0; }
  .search-result {
    display:block; padding:11px 0; border-bottom:1px solid #EFE7D2; color:#1C130C; text-decoration:none;
    font-family:'Fraunces',serif; font-size:16px; transition:color .2s ease;
  }
  .search-result:hover { color:#A6821D; }

  @media (max-width:640px) {
    .search-drawer { width:100vw; }
  }

  /* ================= RESPONSIVE ================= */
  /* breadcrumb — reusable for any interior detail page */
  .breadcrumb-bar { padding:calc(53px + 28px) 0 0; background:#F9F7F1; }
  .breadcrumb-bar .wrap { padding-bottom:0; }
  .breadcrumb { font-size:12px; letter-spacing:.03em; color:#9A8B6C; }
  .breadcrumb a { color:#9A8B6C; text-decoration:none; transition:color .25s ease; }
  .breadcrumb a:hover { color:#A6821D; }
  .breadcrumb span.sep { margin:0 8px; color:#D8CBA0; }
  .breadcrumb span.current { color:#1C130C; }

  /* page hero — light, type-led banner for interior pages (replaces the
     old full-bleed photo banner). Left-aligned like an editorial feature,
     with a faint diagonal hairline texture instead of a photo, the site's
     existing .breadcrumb component for wayfinding, and a short accent
     rule under the headline. */
  .page-hero { position:relative; overflow:hidden; background:#FBF9F4; padding:calc(53px + clamp(22px,3.6vw,34px)) clamp(16px,4vw,24px) clamp(22px,3.6vw,34px); }
  .page-hero .texture {
    position:absolute; inset:0; pointer-events:none;
    background-image: repeating-linear-gradient(135deg, rgba(28,19,12,.05) 0px, rgba(28,19,12,.05) 1px, transparent 1px, transparent 22px);
  }
  .page-hero .wrap { position:relative; max-width:1180px; margin:0 auto; }
  .page-hero .breadcrumb { margin-bottom:12px; }
  .page-hero h1 { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(21px,3vw,28px); line-height:1.32; color:#1C130C; letter-spacing:.005em; max-width:680px; }
  .page-hero h1 i { font-family:'Cormorant Garamond',serif; font-style:italic; color:#5C4A34; }
  .page-hero .rule { width:40px; height:2px; background:#A6821D; margin-top:16px; }
  @media (max-width: 420px) {
    .page-hero h1 { font-size:19px; line-height:1.4; }
  }

  @media (max-width: 900px) {
    .wrap { padding:0 20px; }
    header.site .topbar { display:block; padding:8px 0; }
    header.site .topbar .item:first-child { display:none; }
    header.site .topbar .wrap { justify-content:space-between; }
    header.site .logo-row { display:none; }
    header.site nav.main { display:none; }
    header.site .nav-spacer { display:none !important; }

    .mobile-bar {
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:14px 20px; background:#FBF9F4; border-bottom:1px solid #E4D8BF;
      position:relative;
    }
    .mobile-bar.mb-fixed {
      position:fixed; top:0; left:0; right:0; z-index:999;
      background:rgba(251,249,244,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      box-shadow:0 4px 24px rgba(36,26,18,.08); border-top:none; border-bottom:1px solid #E4D8BF;
      animation:navDrop .25s ease;
    }
    .mobile-bar-spacer { display:none; }
    .mobile-bar-spacer.active { display:block; height:53px; }
    .mobile-bar .hamburger { display:flex; }

    .hero { min-height:74vh; }
    .hero .stats { flex-wrap:wrap; gap:20px 36px; }

    .trust .wrap { flex-wrap:wrap; gap:12px 28px; justify-content:center; }

    .about .grid,
    .sustain .grid,
    .capabilities .grid { grid-template-columns:1fr; gap:36px; }
    .about p, .sustain p { max-width:100%; }

    .products .row,
    .products .row.reverse { grid-template-columns:1fr; gap:28px; }
    .products .row.reverse .img { order:0; }
    .products .row.reverse .body { order:0; }
    .products .body p { max-width:100%; }
    .products .specs { max-width:100%; }

    .export .stats { flex-wrap:wrap; gap:28px 48px; }

    .certs .row { flex-wrap:wrap; gap:28px; }

    .news .grid { grid-template-columns:1fr; gap:44px; }
    .news .card { border-left:none; padding:0 !important; }

    .cta-band .row { flex-direction:column; text-align:center; gap:22px; }

    footer.site .grid { grid-template-columns:1fr 1fr; gap:36px 28px; }
    footer.site p { max-width:100%; }
  }

  @media (max-width: 600px) {
    .capabilities .grid { grid-template-columns:1fr; }
    .capabilities .item, .capabilities .item:nth-child(2n) { padding:22px 0 !important; border-top:1px solid #E0D3AE; }
    .capabilities .item:first-child { border-top:none; }
    .wrap { padding:0 20px; }
    h2.h { font-size:28px; }

    .hero { min-height:min(88vh, 560px); }
    .hero .content { padding-top:8px; align-items:flex-end; padding-bottom:clamp(40px,10vw,64px); }
    .hero .inner { max-width:100%; }
    .hero p { max-width:100%; }
    .hero .btns { flex-wrap:nowrap; gap:10px; }
    .hero .btns .btn,
    .hero .btns .btn-line-light { flex:1; justify-content:center; white-space:nowrap; }
    .hero .btn-ink { text-align:center; padding:15px 20px; box-sizing:border-box; font-size:12.5px; letter-spacing:.04em; }
    .hero .btn-line-light { text-align:center; box-sizing:border-box; border:1px solid rgba(248,242,228,.6); padding:15px 16px; font-size:12.5px; letter-spacing:.04em; text-decoration:none; }
    .hero .btn-line-light:hover { background:rgba(248,242,228,.14); border-color:#F8F2E4; transform:none; }
    .hero .btn-line-light:active { background:rgba(248,242,228,.22); border-color:#F8F2E4; transform:scale(.97); transition:transform .08s ease, background .1s ease; }
    .hero .stats { padding:18px 0; }
    .hero .stats .wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 10px; }
    .hero .stat { text-align:center; }
    .hero .stat b { font-size:clamp(14px,4vw,18px); }
    .hero .stat span { font-size:clamp(8.5px,2.4vw,10.5px); line-height:1.3; display:block; }

    .about .frame { aspect-ratio:4/4; }
    .products .spread { gap:56px; }

    .export { padding:70px 0; }
    .export h2 { font-size:26px; }

    .certs .row { gap:20px; }
    .certs .medal { width:76px; height:76px; font-size:11px; }

    footer.site { padding:56px 0 26px; }
    footer.site .grid { grid-template-columns:1fr; gap:34px; }
    footer.site .bottom { flex-direction:column; align-items:flex-start; gap:12px; text-align:left; }
    footer.site .bottom .legal { gap:16px; }
  }

  @media (max-width: 420px) {
    header.site .topbar .item span { font-size:10.5px; }
    header.site .topbar .social { gap:12px; }
    .mobile-bar { padding-left:16px; padding-right:16px; }
    .mobile-bar .mobile-icons { gap:10px; min-width:54px; }
    .mobile-bar .hamburger-wrap { min-width:54px; }
    footer.site .newsletter-form { max-width:100%; }
    footer.site .grid { grid-template-columns:1fr; }
    .certs .row { gap:16px; }
    .certs .medal { width:66px; height:66px; font-size:10px; }
  }

  @media (hover: none) {
    .products .img:hover, .news .card .img:hover, .about .frame:hover,
    .capabilities .item:hover, .certs .medal:hover { transform:none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }