/*
Theme Name: ART International
Theme URI: https://artherbsexport.com
Description: Official theme for A.R.T International. GMP and APEDA certified herbal manufacturer and exporter, Sojat City, Rajasthan. Founded 1995. 70+ products.
Author: A.R.T International
Author URI: https://artherbsexport.com
Version: 3.6.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: artint
Tags: business, custom-colors, full-width-template, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ══════════════════════════════════════
   RESET & ROOT
══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* Surfaces */
  --parchment:  #F6F1E7;  /* primary warm background, not pure white */
  --cream:      #EFE7D6;  /* secondary surface, alternating bands, cards */
  --deep-forest:#1F3329;  /* dark feature sections: hero base, CTA, certs band */
  --forest-2:   #2C4636;  /* lighter companion, gradient stop on dark bands */

  /* Text */
  --ink:        #211E18;            /* primary text, warm near-black */
  --ink-mid:    rgba(33,30,24,.72); /* secondary text, captions; .72 clears AA on parchment (6.18) and cream (5.92) */
  --ink-faint:  rgba(33,30,24,.14); /* hairline dividers */
  --ink-line:   rgba(33,30,24,.22); /* card and container outlines; a visible edge on parchment/cream */
  --parch-soft: rgba(246,241,231,.74); /* secondary text on dark sections */

  /* Brand greens */
  --field-olive:#5E7245;  /* brand green: large headings, accents, icon strokes on light */
  --sage:       #8AA88E;  /* decorative fills, illustration, NOT text-on a surface */
  --sage-pale:  #DCE6D6;  /* tinted section backgrounds, ink text passes AAA */

  /* Signature warm accents (the dyes) */
  --henna:      #A04B29;  /* PRIMARY CTA fill (white text), key marks. NOT body text on light */
  --clay:       #A04B29;  /* fired clay accent: buttons, links, prices, active states (AA on parchment and cream) */
  --turmeric:   #A04B29;  /* legacy alias, resolves to clay */
  --indigo:     #34406B;  /* links, tertiary deep accent, occasional motif */

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Layout */
  --container: 1280px;
  --gutter: 4vw;
  --nav-h: 78px;

  /* Radius and elevation (warm, low, never flat purple shadows) */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;  /* cards and feature panels */
  --shadow-low: 0 2px 14px rgba(33,30,24,.08);
  --shadow-mid: 0 8px 28px rgba(33,30,24,.12);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 150ms; --t-mid: 250ms; --t-slow: 400ms;

  /* Back-compat aliases (old token names mapped to new palette; removed as templates migrate) */
  --white:      #F6F1E7;
  --olive:      #5E7245;
  --olive-deep: #1F3329;
  --sage-light: #8AA88E;
  --gold:       #A04B29;  /* legacy alias, resolves to clay */
  --gold-light: #A04B29;  /* legacy alias, resolves to clay */
}

html { scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; height:auto; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
/* One header bar: logo, links, quote CTA. Fixed at top, condenses on scroll. */
.art-nav {
  position: fixed;
  top: 0; left:0; right:0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .95rem 4vw;
  background: rgba(250,250,247,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--ink-faint);
  transition: padding .3s, box-shadow .3s;
}
.art-nav.scrolled {
  padding: .65rem 4vw;
  box-shadow: 0 4px 32px rgba(28,31,24,.08);
}
@media (prefers-reduced-motion:reduce){
  .art-nav { transition: none; }
}
.art-nav-logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--olive-deep);
  letter-spacing: .04em;
}
.art-nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.art-nav-links a {
  font-family: 'DM Mono', monospace;
  font-size: .63rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mid);
  transition: color .25s;
  position: relative;
  padding-bottom: 2px;
}
.art-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--olive);
  transition: width .3s;
}
.art-nav-links a:hover::after,
.art-nav-links a.current::after { width: 100%; }
.art-nav-links a:hover,
.art-nav-links a.current { color: var(--olive-deep); }
/* The quote CTA is an <a> inside .art-nav-links; this beats the generic
   .art-nav-links a padding-bottom so the label stays optically centered.
   Visual style comes from the shared .art-btn/.art-nav-cta rule further down. */
.art-nav-links a.art-nav-cta {
  padding: .62rem 1.35rem;
  position: static;
  margin-left: .5rem;
}
.art-nav-cta::after { display:none !important; }
.art-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.art-hamburger span {
  width: 22px; height: 1.5px;
  background: var(--ink);
  display: block;
  transition: all .3s;
}
.art-mobile-menu {
  display: none;
  position: fixed;
  top: 78px; left:0; right:0;
  background: rgba(250,250,247,.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ink-faint);
  padding: 1.5rem 4vw 2rem;
  z-index: 9998;
  flex-direction: column;
  gap: 0;
}
.art-mobile-menu.open { display:flex; }
.art-mobile-menu a {
  font-family: 'DM Mono', monospace;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink-faint);
  transition: color .2s;
  display: block;
}
.art-mobile-menu a:last-child { border-bottom: none; }
.art-mobile-menu a:hover { color: var(--olive); }
.art-mobile-menu .art-nav-cta {
  margin-top: 1rem;
  text-align: center;
  padding: .85rem;
  border-radius: 2px;
}

/* ══════════════════════════════════════
   PAGE WRAPPER
══════════════════════════════════════ */
.art-wrap { padding-top: 78px; }
@media(max-width:560px){ .art-wrap { padding-top: 70px; } }
/* Logged-in view: the WP admin bar (32px, 46px under 783px) sits over the
   fixed nav; drop the nav below it and grow the page offset to match, so
   there is no blank band between the nav and the first section. */
body.admin-bar .art-nav { top: 32px; }
body.admin-bar .art-wrap { padding-top: 110px; }
@media(max-width:782px){
  body.admin-bar .art-nav { top: 46px; }
  body.admin-bar .art-wrap { padding-top: 124px; }
}
@media(max-width:560px){ body.admin-bar .art-wrap { padding-top: 116px; } }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.art-hero {
  background: linear-gradient(160deg,var(--deep-forest) 0%,var(--forest-2) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.art-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%237aab8a' fill-opacity='.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.art-hero-main {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 6rem 4vw 4rem;
  gap: 5vw;
  position: relative;
  z-index: 1;
}
.art-hero-title { flex: 1; }
.art-hero-pre {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.art-hero-pre::after {
  content: '';
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--sage);
  opacity: .5;
}
.art-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem,8vw,8rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 0;
}
.art-hero-h1 .italic {
  font-weight: 400;
  color: var(--sage-light);
  display: block;
}
.art-hero-h1 .stroke {
  -webkit-text-stroke: 1.5px rgba(255,255,255,.4);
  color: transparent;
  display: block;
}
.art-hero-side {
  width: 280px;
  padding-bottom: .5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.art-hero-desc {
  font-size: .9rem;
  line-height: 1.85;
  color: rgba(255,255,255,.72);
  border-left: 2px solid var(--sage);
  padding-left: 1.2rem;
}
.art-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--clay);
  padding: .9rem 2rem;
  border-radius: 2px;
  transition: all .35s;
  align-self: flex-start;
}
.art-hero-btn:hover {
  background: var(--clay);
  letter-spacing: .2em;
  box-shadow: 0 8px 28px rgba(160,75,41,.35);
}
.art-hero-bar {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(255,255,255,.1);
  position: relative;
  z-index: 1;
}
.art-hbi {
  padding: 1.75rem 4vw;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .3s;
}
.art-hbi:last-child { border-right: none; }
.art-hbi:hover { background: rgba(255,255,255,.04); }
.art-hbi-val {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sage-light);
  line-height: 1;
  margin-bottom: .4rem;
}
.art-hbi-label {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ══════════════════════════════════════
   MARQUEE
══════════════════════════════════════ */
.art-marquee {
  background: var(--olive-deep);
  padding: 1rem 0;
  overflow: hidden;
}
.art-marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: artMarquee 28s linear infinite;
}
.art-marquee-item {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.art-marquee-item::after {
  content: '·';
  color: var(--gold);
  font-size: .5rem;
}

/* ══════════════════════════════════════
   SECTIONS - SHARED
══════════════════════════════════════ */
.art-section { padding: 8vh 4vw; }
.art-section-inner { max-width:var(--container); margin: 0 auto; }
.art-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--deep-forest);
  margin-bottom: .75rem;
}
.art-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem,3.4vw,3rem); /* page h2 must never out-size product/article h1 (3rem cap) */
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.art-section-title em {
  font-style: normal;
  color: var(--olive);
}
.art-section-body {
  font-size: .92rem;
  color: var(--ink-mid);
  line-height: 1.85;
  max-width: 640px;
}

/* ══════════════════════════════════════
   PHILOSOPHY
══════════════════════════════════════ */
.art-philosophy {
  background: var(--deep-forest);
  padding: 4rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.art-philosophy-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}
.art-philosophy-quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.65;
  color: rgba(246,241,231,.92);
  margin: 0;
}

/* ══════════════════════════════════════
   PROCESS
══════════════════════════════════════ */
.art-process { background: var(--white); padding: 8vh 4vw; }
.art-process-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem,5vw,5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.03em;
  margin-bottom: 5vh;
}
.art-process-title .ghost {
  -webkit-text-stroke: 1px var(--ink);
  color: transparent;
}
.art-process-title .solid { color: var(--olive); }
.art-process-steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--ink-faint);
}
/* ══════════════════════════════════════
   TRUST
══════════════════════════════════════ */
.art-trust {
  background: var(--cream);
  padding: 8vh 4vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: center;
}
.art-trust-title {
  font-family: var(--font-display);
  font-size: clamp(2rem,3.5vw,3.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.art-trust-title em { font-style:normal; color:var(--olive-deep); }
.art-trust-body {
  font-size: .9rem;
  line-height: 1.9;
  color: var(--ink-mid);
  max-width: 420px;
  margin-bottom: 2rem;
}
.art-certs {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}
.art-cert {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1.5px solid var(--olive);
  color: var(--olive-deep);
  padding: .45rem 1rem;
  border-radius: 2px;
  transition: all .25s;
}
.art-cert:hover { background: var(--olive); color: #fff; }
.art-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.art-stat {
  background: var(--white);
  padding: 2.25rem 2rem;
  position: relative;
  overflow: hidden;
  transition: transform .3s;
}
.art-stat:hover { transform: translateY(-3px); }
.art-stat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s;
}
.art-stat:hover::after { transform: scaleX(1); }
.art-stat-val {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--olive-deep);
  line-height: 1;
  margin-bottom: .4rem;
}
.art-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* ══════════════════════════════════════
   FEATURED PRODUCTS
══════════════════════════════════════ */
.art-featured { padding: 8vh 4vw; background: var(--white); }
.art-featured-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5vh;
  flex-wrap: wrap;
  gap: 1rem;
}
.art-featured-link {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive-deep);
  border: 1px solid var(--olive);
  padding: .5rem 1.2rem;
  border-radius: 2px;
  transition: all .3s;
}
.art-featured-link:hover { background: var(--olive); color: #fff; }
.art-products-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
}
.art-prod-card {
  background: var(--white);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.art-prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(33,30,24,.18);
  border-color: rgba(94,114,69,.3);
}
.art-prod-img {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.art-prod-body { padding: 1.25rem; }
.art-prod-cat {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .35rem;
}
.art-prod-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .25rem;
  line-height: 1.2;
}
.art-prod-sci {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  color: var(--ink-mid);
  font-style: italic;
  margin-bottom: .85rem;
}
.art-prod-btns { display: flex; gap: .5rem; }
.art-prod-btn {
  flex: 1;
  text-align: center;
  padding: .55rem .75rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
  transition: all .25s;
  background: var(--olive);
  color: #fff;
  display: block;
}
.art-prod-btn:hover { background: var(--olive-deep); }

/* ══════════════════════════════════════
   MARKETS
══════════════════════════════════════ */
.art-markets {
  background: var(--olive-deep);
  padding: 8vh 4vw;
  position: relative;
  overflow: hidden;
}
.art-markets-bg {
  position: absolute;
  font-family: var(--font-display);
  font-size: 22vw;
  font-weight: 900;
  bottom: -2vw; right: -1vw;
  letter-spacing: -.05em;
  pointer-events: none;
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
  color: transparent;
}
.art-markets-header { margin-bottom: 4vh; position: relative; z-index: 1; }
.art-markets-title {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3.8rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
}
.art-markets-title em { font-style:normal; color:var(--clay); }
.art-markets-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: .75rem;
}
.art-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.art-pill {
  font-size: .82rem;
  padding: .65rem 1.4rem;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  transition: all .3s;
}
.art-pill:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
.art-cta {
  background: var(--ink);
  padding: 10vh 4vw;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6vw;
  align-items: center;
}
.art-cta-h2 {
  font-family: var(--font-display);
  font-size: clamp(3rem,6vw,6rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.art-cta-h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--sage-light);
  display: block;
}
.art-cta-body {
  font-size: .9rem;
  line-height: 1.8;
  color: rgba(250,250,247,.55);
  max-width: 400px;
}
.art-cta-right {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 260px;
}
.art-cta-btn-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'DM Mono', monospace;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--clay);
  padding: 1.1rem 2rem;
  border-radius: 2px;
  transition: all .35s;
  white-space: nowrap;
}
.art-cta-btn-main:hover {
  background: #fff;
  letter-spacing: .2em;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
.art-cta-btn-ghost {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,250,247,.4);
  transition: color .3s;
  display: block;
}
.art-cta-btn-ghost:hover { color: var(--white); }
.art-cta-contact {
  margin-top: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.art-cta-contact-label {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  margin-bottom: .35rem;
}
.art-cta-contact-val {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--sage-light);
}
.art-cta-contact-val a { color: inherit; transition: color .2s; }
.art-cta-contact-val a:hover { color: var(--gold-light); }

/* ══════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════ */
.art-page-hero {
  background: linear-gradient(160deg,var(--deep-forest) 0%,var(--forest-2) 100%);
  padding: 7rem 4vw 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.art-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%237aab8a' fill-opacity='.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.art-page-hero-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.art-page-hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.art-page-hero-eyebrow::before,
.art-page-hero-eyebrow::after {
  content: '';
  width: 30px; height: 1px;
  background: var(--sage);
  opacity: .5;
}
.art-page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem,4.5vw,3.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.art-page-hero h1 em { font-style:normal; color:var(--sage-light); }
.art-page-hero-desc {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  line-height: 1.8;
  max-width: 580px;
  margin: 0 auto;
}

/* ══════════════════════════════════════
   BREADCRUMBS
══════════════════════════════════════ */
.art-breadcrumb {
  background: var(--cream);
  padding: .65rem 4vw;
  border-bottom: 1px solid var(--ink-faint);
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--ink-mid);
}
.art-breadcrumb a {
  color: var(--olive-deep);
  transition: color .2s;
}
.art-breadcrumb a:hover { color: var(--olive); }
.art-breadcrumb span { margin: 0 .4rem; opacity: .4; }

/* ══════════════════════════════════════
   PRODUCTS PAGE
══════════════════════════════════════ */
.art-filter-bar {
  background: var(--cream);
  border-bottom: 1px solid var(--ink-faint);
  padding: 1.25rem 4vw;
  position: sticky;
  top: 64px;
  z-index: 900;
}
.art-filter-inner {
  max-width:var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.art-filter-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.art-results-count { margin-left:auto; }
.art-sort-wrap { display:inline-flex; align-items:center; gap:.5rem; }
.art-sort-lbl { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mid); }
.art-sort-select {
  font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.03em; color:var(--ink);
  padding:.55rem 2.1rem .55rem 1rem; border:1.5px solid rgba(94,114,69,.25); border-radius:100px;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 L5 5 L9 1' fill='none' stroke='%235E7245' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center;
  appearance:none; -webkit-appearance:none; cursor:pointer; transition:border .3s, box-shadow .3s;
}
.art-sort-select:focus { outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(94,114,69,.1); }
.art-search-wrap { position: relative; flex:1; min-width:200px; max-width:340px; }
.art-search-icon {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mid);
  font-size: .85rem;
  pointer-events: none;
}
.art-search-input {
  width: 100%;
  padding: .65rem 1rem .65rem 2.5rem;
  border: 1.5px solid rgba(94,114,69,.25);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border .3s, box-shadow .3s;
}
.art-search-input:focus {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(94,114,69,.1);
}
.art-cat-btns { display:flex; flex-wrap:wrap; gap:.5rem; }
.art-cat-btn {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 500;
  border: 1.5px solid rgba(94,114,69,.25);
  color: var(--ink-mid);
  background: var(--white);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .25s;
  text-decoration: none;
}
.art-cat-btn:hover,
.art-cat-btn.active {
  background: var(--olive);
  color: #fff;
  border-color: var(--olive);
  box-shadow: 0 4px 12px rgba(33,30,24,.25);
}
.art-results-count {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ink-mid);
  white-space: nowrap;
}
.art-products-section { max-width:var(--container); margin:0 auto; padding:3rem 4vw 4rem; }
.art-product-card {
  background: var(--white);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(28,31,24,.05), 0 4px 16px rgba(28,31,24,.07);
}
.art-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(33,30,24,.18);
  border-color: rgba(94,114,69,.3);
}
.art-card-img {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.art-card-img img {
  width:100%; height:100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
  transition: transform .5s;
}
.art-product-card:hover .art-card-img img { transform: scale(1.06); }
.art-card-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 2;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: .25rem .7rem;
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive-deep);
  border: 1px solid rgba(94,114,69,.2);
}
.art-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.art-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.art-card-sci {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  color: var(--olive);
  letter-spacing: .05em;
  font-style: italic;
}
.art-card-desc {
  font-size: .8rem;
  color: var(--ink-mid);
  line-height: 1.65;
  flex: 1;
}
.art-card-divider { height:1px; background:var(--ink-faint); }
.art-card-specs { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.art-card-spec-label {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.art-card-spec-val { font-size:.75rem; color:var(--ink); font-weight:500; }
.art-card-forms { display:flex; flex-wrap:wrap; gap:.375rem; }
.art-form-tag {
  background: var(--sage-pale);
  color: var(--olive-deep);
  font-size: .62rem;
  font-family: 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(122,171,138,.25);
}
.art-card-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ink-faint);
  display: flex;
  gap: .65rem;
}
.art-card-view-btn {
  flex: 1;
  text-align: center;
  background: var(--cream);
  color: var(--olive-deep);
  border: 1.5px solid rgba(94,114,69,.35);
  border-radius: 100px;
  padding: .65rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  transition: all .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.art-card-view-btn:hover {
  background: var(--olive);
  color: #fff;
  border-color: var(--olive);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(33,30,24,.25);
}
.art-card-email-btn {
  flex: 1;
  text-align: center;
  background: linear-gradient(135deg,var(--olive),var(--olive-deep));
  color: #fff;
  border-radius: 100px;
  padding: .65rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  transition: all .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.art-card-email-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(33,30,24,.35);
}
.art-no-results {
  text-align: center;
  padding: 4rem 2rem;
  display: none;
}
.art-no-results.show { display: block; }
.art-no-results h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: .5rem;
}
.art-no-results p { color:var(--ink-mid); font-size:.9rem; }

/* ══════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════ */
.art-about-section { padding: 4.5rem 4vw; }
.art-about-inner { max-width:var(--container); margin:0 auto; }
.art-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-bottom: 4rem;
}
.art-story-card {
  background: linear-gradient(135deg,var(--deep-forest),var(--forest-2));
  border-radius: var(--r-lg);
  padding: 3rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.art-story-year {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(255,255,255,.07);
  line-height: 1;
  margin-bottom: -1rem;
}
.art-story-card-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sage-light);
  margin-bottom: .75rem;
}
.art-story-card-text {
  font-size: .88rem;
  color: rgba(255,255,255,.65);
  line-height: 1.75;
}
.art-timeline { position:relative; padding-left:2rem; }
.art-timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,var(--olive),var(--sage-pale));
}
.art-timeline-item {
  position: relative;
  padding: 0 0 2.5rem 2.5rem;
}
.art-timeline-item:last-child { padding-bottom: 0; }
.art-timeline-dot {
  position: absolute;
  left: -2.35rem; top: .3rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--olive);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--olive);
}
.art-timeline-year {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .3rem;
}
.art-timeline-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
}
.art-timeline-text {
  font-size: .85rem;
  color: var(--ink-mid);
  line-height: 1.75;
}
.art-founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 3rem 0;
}
.art-founder-card {
  background: var(--white);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .35s;
  box-shadow: 0 2px 12px rgba(28,31,24,.06);
}
.art-founder-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(33,30,24,.15);
  border-color: rgba(94,114,69,.3);
}
.art-founder-img {
  height: 180px;
  background: linear-gradient(135deg,var(--deep-forest),var(--forest-2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-founder-initials {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(255,255,255,.12);
}
.art-founder-body { padding: 1.75rem; }
.art-founder-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .2rem;
}
.art-founder-role {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .75rem;
}
.art-founder-divider { height:1px; background:var(--ink-faint); margin:.75rem 0; }
.art-founder-text {
  font-size: .84rem;
  color: var(--ink-mid);
  line-height: 1.75;
}
.art-whyus-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.25rem;
  margin: 2.5rem 0;
}
.art-whyus-card {
  background: var(--white);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: all .3s;
}
.art-whyus-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(33,30,24,.12);
  border-color: rgba(94,114,69,.25);
}
.art-whyus-icon { font-size:2rem; margin-bottom:.85rem; }
.art-whyus-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
}
.art-whyus-text { font-size:.82rem; color:var(--ink-mid); line-height:1.7; }
.art-countries-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1.5rem 0;
}
.art-country-tag {
  background: var(--sage-pale);
  color: var(--olive-deep);
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem .95rem;
  border-radius: 100px;
  border: 1px solid rgba(122,171,138,.25);
  transition: all .2s;
}
.art-country-tag:hover { background:var(--olive); color:#fff; transform:translateY(-2px); }

/* ══════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════ */
.art-contact-section { padding:4rem 4vw; }
.art-contact-inner {
  max-width:var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: start;
}
.art-contact-cards { display:flex; flex-direction:column; gap:.85rem; margin-bottom:1.5rem; }
.art-contact-card {
  background: var(--white);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.35rem;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  transition: all .3s;
  box-shadow: 0 1px 3px rgba(28,31,24,.04);
}
.art-contact-card:hover {
  border-color: rgba(94,114,69,.3);
  box-shadow: 0 6px 24px rgba(33,30,24,.1);
  transform: translateY(-2px);
}
.art-contact-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-lg);
  background: var(--sage-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.art-contact-label {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: .25rem;
}
.art-contact-val {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
.art-contact-val a { color:var(--olive-deep); transition:color .2s; }
.art-contact-val a:hover { color:var(--gold); }
.art-hours-card {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 1.35rem;
  margin-bottom: 1.5rem;
}
.art-hours-title {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: .85rem;
}
.art-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem 0;
  border-bottom: 1px solid var(--ink-faint);
  font-size: .84rem;
}
.art-hours-row:last-child { border-bottom:none; }
.art-hours-val { font-weight:600; color:var(--ink); }
.art-hours-closed { color:#c0392b; }
.art-social-links { display:flex; flex-direction:column; gap:.65rem; }
.art-social-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--ink-faint);
  background: var(--white);
  transition: all .25s;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink);
}
.art-social-link:hover {
  border-color: rgba(94,114,69,.3);
  background: var(--sage-pale);
  transform: translateX(4px);
}
.art-social-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.art-form-wrap {
  background: var(--white);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  box-shadow: 0 4px 32px rgba(28,31,24,.08);
}
.art-form-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .35rem;
}
.art-form-sub {
  font-size: .84rem;
  color: var(--ink-mid);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}
.art-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.art-form-group { display:flex; flex-direction:column; gap:.35rem; }
.art-form-group.full { grid-column:1/-1; }
.art-form-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.art-form-input,
.art-form-select,
.art-form-textarea {
  width: 100%;
  padding: .72rem 1rem;
  border: 1.5px solid rgba(94,114,69,.2);
  border-radius: var(--r-lg);
  font-family: 'Inter', sans-serif;
  font-size: .87rem;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border .25s, box-shadow .25s;
  -webkit-appearance: none;
}
.art-form-input:focus,
.art-form-select:focus,
.art-form-textarea:focus {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(94,114,69,.1);
}
.art-form-textarea { resize:vertical; min-height:110px; line-height:1.6; }
.art-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a9070' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.art-form-submit {
  width: 100%;
  padding: .95rem 1.5rem;
  background: var(--henna);
  color: #fff;
  border: 1px solid var(--henna);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), letter-spacing var(--t-fast) var(--ease);
  margin-top: .5rem;
}
.art-form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(176,85,47,.30);
  letter-spacing: .095em;
}
.art-form-submit:active { transform: translateY(0) scale(.985); box-shadow: 0 3px 10px rgba(176,85,47,.22); }
/* RFQ page: quote-process steps */
.art-rfq-steps { display:flex; flex-direction:column; gap:1.25rem; }
.art-rfq-step {
  display:flex; gap:1rem; padding:1.1rem;
  background:var(--white); border:1px solid var(--ink-line); border-radius:var(--r-lg);
  transition:border-color var(--t-fast) var(--ease);
}
.art-rfq-step:hover { border-color:rgba(94,114,69,.35); }
.art-rfq-step-num {
  width:40px; height:40px; border-radius:var(--r-md); background:var(--sage-pale);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:var(--font-mono); font-size:1.05rem; font-weight:600; color:var(--olive-deep);
}
.art-rfq-step-title { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.25rem; }
.art-rfq-step-desc { font-size:.82rem; color:var(--ink-mid); line-height:1.6; }

.art-form-note {
  text-align: center;
  font-size: .73rem;
  color: var(--ink-mid);
  margin-top: .65rem;
}
.art-map-wrap { margin-top:2rem; border-radius:var(--r-lg); overflow:hidden; }
.art-map-wrap iframe { width:100%; height:380px; border:none; display:block; }

/* ══════════════════════════════════════
   BLOG PAGE
══════════════════════════════════════ */
.art-blog-section { max-width:var(--container); margin:0 auto; padding:3.5rem 4vw; }
.art-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(340px,1fr));
  gap: 2rem;
}
.art-blog-card {
  background: var(--parchment);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(28,31,24,.06);
}
.art-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(33,30,24,.18);
  border-color: rgba(94,114,69,.3);
}
.art-blog-thumb {
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}
.art-blog-thumb img {
  width:100%; height:100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
}
.art-blog-cat-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 2;
  color: #fff;
  border-radius: 100px;
  padding: .25rem .75rem;
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--olive);
}
.art-blog-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.art-blog-meta {
  display: flex;
  gap: 1rem;
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--ink-mid);
}
.art-blog-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.art-blog-title a { transition:color .2s; }
.art-blog-title a:hover { color: var(--olive); }
.art-blog-excerpt {
  font-size: .82rem;
  color: var(--ink-mid);
  line-height: 1.7;
  flex: 1;
}
.art-blog-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.art-blog-tag {
  background: var(--sage-pale);
  color: var(--olive-deep);
  font-size: .6rem;
  font-family: 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(122,171,138,.25);
}
.art-blog-footer {
  display: flex;
  gap: .65rem;
  margin-top: .25rem;
}
.art-blog-read-btn {
  flex: 1;
  text-align: center;
  padding: .62rem 1rem;
  border-radius: var(--r-sm);
  background: var(--henna);
  border: 1px solid var(--henna);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  display: block;
}
.art-blog-read-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(176,85,47,.28);
}
.art-blog-read-btn:active { transform: translateY(0) scale(.985); }
.art-blog-enquire-btn {
  padding: .62rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--field-olive);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.art-blog-enquire-btn:hover {
  background: var(--sage-pale);
}

/* ══════════════════════════════════════
   CTA BANNER (inner pages)
══════════════════════════════════════ */
.art-cta-banner {
  background: linear-gradient(135deg,var(--deep-forest),var(--forest-2));
  padding: 4.5rem 4vw;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.art-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%237aab8a' fill-opacity='.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.art-cta-banner-inner { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.art-cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem,3.5vw,2.8rem);
  color: #fff;
  margin-bottom: .85rem;
}
.art-cta-banner h2 em { font-style:normal; color:var(--sage-light); }
.art-cta-banner p { color:rgba(255,255,255,.6); margin-bottom:1.75rem; font-size:.92rem; }
.art-cta-banner-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
}
.art-cta-banner-btns a {
  padding: .78rem 1.5rem;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Standalone CTA buttons (used without .art-btn in article hero / blog CTA bands) */
.art-btn-email, .art-btn-wa, .art-btn-call {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.78rem 1.5rem; border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; line-height:1.2;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.art-btn-email .art-ico, .art-btn-wa .art-ico, .art-btn-call .art-ico { width:1em; height:1em; }
.art-btn-email:active, .art-btn-wa:active, .art-btn-call:active { transform:translateY(0) scale(.985); }
.art-btn-email { background:var(--henna); border:1px solid var(--henna); color:#fff; }
.art-btn-email:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(176,85,47,.30); color:#fff; }
.art-btn-wa { background:#0E7C41; border:1px solid #0E7C41; color:#fff; }
.art-btn-wa:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(14,124,65,.35); color:#fff; }
.art-btn-call { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); color:#fff; }
.art-btn-call:hover { transform:translateY(-2px); background:rgba(255,255,255,.18); color:#fff; }

/* ══════════════════════════════════════
   CONTACT ROW
══════════════════════════════════════ */
.art-contact-row {
  background: var(--cream);
  padding: 1.75rem 4vw;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--ink-faint);
}
.art-contact-row-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .83rem;
  color: var(--ink-mid);
}
.art-contact-row-item a { color:var(--olive-deep); font-weight:500; }
.art-contact-row-item a:hover { color:var(--gold); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.art-footer {
  background: var(--ink);
  padding: 2.25rem 4vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.art-footer-logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
}
.art-footer-logo em { font-style:normal; color:var(--sage); }
.art-footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.art-footer-links a {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  transition: color .2s;
}
.art-footer-links a:hover { color: var(--sage-light); }
.art-footer-copy {
  font-size: .62rem;
  color: rgba(255,255,255,.18);
  width: 100%;
  text-align: center;
  margin-top: .25rem;
  font-family: 'DM Mono', monospace;
  letter-spacing: .06em;
}

/* ══════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════ */
.art-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.art-reveal.up { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════
   PROMISE BAR
══════════════════════════════════════ */
.art-promise-bar {
  background: var(--deep-forest);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.25rem 4vw;
}
.art-promise-inner {
  max-width:var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.art-promise-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255,255,255,.62);
  font-size: .84rem;
}
.art-promise-item strong { color: var(--clay); font-weight: 600; }
.art-promise-item .art-ico { color: var(--field-olive); width: 1.1em; height: 1.1em; }

/* ══════════════════════════════════════
   404 / SEARCH
══════════════════════════════════════ */
.art-404-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 4vw;
}
.art-404-num {
  font-family: var(--font-display);
  font-size: clamp(6rem,18vw,16rem);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 2px var(--olive);
  color: transparent;
  margin-bottom: 1rem;
}
.art-search-results-section { max-width:900px; margin:0 auto; padding:4vh 4vw; }
.art-search-result-item {
  padding: 1.5rem;
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-lg);
  margin-bottom: 1rem;
  transition: all .25s;
}
.art-search-result-item:hover {
  border-color: rgba(94,114,69,.3);
  box-shadow: 0 4px 20px rgba(33,30,24,.1);
}
.art-search-result-item h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: .35rem;
}
.art-search-result-item h3 a { color:var(--ink); transition:color .2s; }
.art-search-result-item h3 a:hover { color:var(--olive); }
.art-search-result-type {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .35rem;
}
.art-search-result-excerpt { font-size:.85rem; color:var(--ink-mid); line-height:1.7; }

/* ══════════════════════════════════════
   PRIVACY / TERMS / STATIC PAGES
══════════════════════════════════════ */
.art-prose-section { max-width:860px; margin:0 auto; padding:5vh 4vw; }
.art-prose-section h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
}
.art-prose-section h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.75rem 0 .75rem;
}
.art-prose-section p { font-size:.92rem; color:var(--ink-mid); line-height:1.85; margin-bottom:1.25rem; }
.art-prose-section ul,
.art-prose-section ol { margin:1rem 0 1.25rem 1.5rem; }
.art-prose-section li { margin-bottom:.5rem; font-size:.9rem; color:var(--ink-mid); line-height:1.8; }
.art-prose-section strong { color:var(--ink); font-weight:600; }
.art-prose-section a { color:var(--olive); text-decoration:underline; text-underline-offset:2px; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:960px) {
  .art-nav-links { display:none; }
  .art-hamburger { display:flex; }
  .art-hero-main { flex-direction:column; align-items:flex-start; padding:5rem 4vw 3rem; gap:2rem; }
  .art-hero-side { width:100%; }
  .art-hero-h1 { font-size:clamp(2.8rem,11vw,5rem); }
  .art-hero-bar { grid-template-columns:1fr 1fr; }
  .art-hbi { border-bottom:1px solid rgba(255,255,255,.08); padding:1.25rem 4vw; }
  .art-process-steps { grid-template-columns:1fr 1fr; }
  .art-trust { grid-template-columns:1fr; gap:3rem; }
  .art-products-grid { grid-template-columns:1fr 1fr; }
  .art-cta { grid-template-columns:1fr; }
  .art-about-grid { grid-template-columns:1fr; gap:2.5rem; }
  .art-founders-grid { grid-template-columns:1fr; }
  .art-whyus-grid { grid-template-columns:1fr 1fr; }
  .art-contact-inner { grid-template-columns:1fr; gap:2.5rem; }
  .art-blog-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .art-hero-bar { grid-template-columns:1fr 1fr; }
  .art-hbi-val { font-size:1.6rem; }
  .art-process-steps { grid-template-columns:1fr; }
  .art-products-grid { grid-template-columns:1fr; }
  .art-whyus-grid { grid-template-columns:1fr; }
  .art-form-grid { grid-template-columns:1fr; }
  .art-cta-banner-btns { flex-direction:column; align-items:center; }
  .art-footer { flex-direction:column; text-align:center; }
  .art-footer-links { justify-content:center; }
  .art-products-grid-full { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  *, .art-reveal { transition:none !important; animation:none !important; }
}

/* ── v2.1 polish: accessibility + interaction (additive) ── */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--olive-deep);outline-offset:3px;border-radius:4px;}
html{scroll-behavior:smooth;}
::selection{background:var(--sage-pale);color:var(--ink);}
img{max-width:100%;height:auto;}
.art-prod-card,.art-product-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1);}
.art-prod-card:hover,.art-product-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,31,24,.12);}
.art-reveal{will-change:opacity,transform;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .art-reveal{opacity:1 !important;transform:none !important;}
}

/* ══════════════════════════════════════════
   v2.2 BOTANICAL DESIGN SYSTEM LAYER
   (signature palette, line-art icons, editorial hero)
══════════════════════════════════════════ */

/* Body + base on warm parchment */
body.art-site{ background:var(--parchment); color:var(--ink); font-family:var(--font-body); }

/* Line-art icon system (sprite is inlined in header.php) */
.art-ico{
  width:1.25em; height:1.25em; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-.18em; color:var(--field-olive); flex:none;
}
.art-ico--lg{ width:2.4em; height:2.4em; }
.art-ico--sm{ width:1em; height:1em; }

/* Eyebrow / mono labels */
.art-eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--deep-forest); /* AA on parchment and cream; henna is fill-only on light */
}

/* Buttons: henna primary (white text passes AA), forest/outline secondary */
.art-btn,.art-nav-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em;
  font-size:.76rem; padding:.78rem 1.5rem; border-radius:var(--r-sm);
  background:var(--henna); color:#fff !important; border:1px solid var(--henna);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease), letter-spacing var(--t-fast) var(--ease);
}
.art-btn:hover,.art-nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(176,85,47,.30); letter-spacing:.095em; }
.art-btn:active,.art-nav-cta:active{ transform:translateY(0) scale(.985); box-shadow:0 3px 10px rgba(176,85,47,.22); }
.art-btn .art-ico,.art-nav-cta .art-ico{ color:#fff; }
.art-btn--ghost{
  background:transparent; color:var(--ink) !important; border:1px solid var(--field-olive);
}
.art-btn--ghost:hover{ background:var(--sage-pale); box-shadow:none; }
.art-btn--ghost:active{ box-shadow:none; }
.art-btn--ghost .art-ico{ color:var(--field-olive); }
/* Frosted variant for dark (forest) surfaces */
.art-btn--light{
  background:rgba(255,255,255,.1); color:#fff !important; border:1px solid rgba(255,255,255,.35);
}
.art-btn--light:hover{ background:rgba(255,255,255,.18); box-shadow:0 8px 20px rgba(0,0,0,.25); }
.art-btn--light .art-ico{ color:#fff; }
/* Focus ring must stay visible on dark surfaces (global ring is olive-deep) */
.art-cta-banner :focus-visible, .art-hp-creds :focus-visible, .art-foot :focus-visible,
.art-article-hero :focus-visible, .psb :focus-visible, .psb2 :focus-visible,
.picta :focus-visible, .art-aside-quote :focus-visible, .art-wa-fab:focus-visible{
  outline-color:var(--parchment);
}

/* Links on light = indigo (AAA) */
.art-prose a, .art-body-link{ color:var(--indigo); }

/* Editorial hero (front-page) */
.art-hero-ed{ position:relative; overflow:hidden; background:var(--parchment); }
.art-hero-ed .inner{ max-width:var(--container); margin:0 auto; padding:6rem var(--gutter) 0; position:relative; }
.art-hero-ed h1{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.5rem,5.4vw,4.6rem); line-height:1.02; letter-spacing:-.022em;
  max-width:17ch; margin:1.4rem 0; position:relative; z-index:2;
}
.art-hero-ed h1 .accent{ display:block; color:var(--field-olive); }
.art-hero-ed .lead{ font-size:1.16rem; color:var(--ink-mid); max-width:50ch; margin-bottom:2.1rem; position:relative; z-index:2; }
.art-hero-ed .hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:2.6rem; position:relative; z-index:2; }
.art-hero-ed .hero-cta .meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-mid); }
.art-hero-ed .hero-trust{ display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center; position:relative; z-index:2; }
.art-hero-ed .hero-trust .t{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mid); }
.art-hero-mark{ position:absolute; top:-1rem; right:-2vw; width:min(40vw,460px); height:auto; color:var(--field-olive); opacity:.9; z-index:1; pointer-events:none; }
.art-hero-mark .draw path,.art-hero-mark .draw circle{ stroke-dasharray:1700; stroke-dashoffset:1700; }
.art-ribbon{ margin-top:1.4rem; border-top:1px solid var(--ink-faint); padding:1.1rem 0 1.8rem; display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.82rem; color:var(--ink-mid); position:relative; z-index:2; }
.art-ribbon a{ color:var(--ink); }
.art-ribbon a:hover{ color:var(--henna); }
.art-ribbon .dot{ color:var(--sage); }
.art-ribbon .more{ color:var(--henna); }
@media(max-width:720px){ .art-hero-mark{ opacity:.16; right:-8vw; top:1.5rem; } .art-hero-ed h1{ max-width:none; } }

/* line-draw plays once when not reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .art-hero-mark .draw path,.art-hero-mark .draw circle{ animation:artDraw 2.6s var(--ease) .15s forwards; }
  @keyframes artDraw{ to{ stroke-dashoffset:0; } }
}
@media (prefers-reduced-motion: reduce){
  .art-hero-mark .draw path,.art-hero-mark .draw circle{ stroke-dashoffset:0; }
}

/* Custom cert seal badges (rendered inline from sprite) */
.art-cert-badge{ width:104px; text-align:center; }
.art-cert-badge svg{ width:60px; height:60px; color:var(--field-olive); fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); }
.art-cert-badge:hover svg{ transform:translateY(-3px); }
.art-cert-badge svg text{ stroke:none; fill:currentColor; }
.art-cert-badge .lbl{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--parch-soft); margin-top:.5rem; }

/* Section divider (botanical rule) */
.art-divider{ display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--sage); opacity:.6; margin:2.5rem auto; max-width:var(--container); }
.art-divider::before,.art-divider::after{ content:""; height:1px; background:var(--ink-faint); flex:1; }
.art-divider .art-ico{ color:var(--field-olive); opacity:.8; }

/* ══════════════════════════════════════════
   HOMEPAGE (front-page.php) v2.2
══════════════════════════════════════════ */
.art-hp-wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

/* Hero */
.art-hp-hero{ position:relative; overflow:hidden; isolation:isolate; background:
  radial-gradient(120% 80% at 92% 0%, rgba(94,114,69,.14), transparent 58%),
  radial-gradient(85% 60% at 18% 100%, rgba(138,168,142,.30), transparent 62%),
  linear-gradient(180deg, #FAF6EC 0%, var(--parchment) 42%, #EFEBD8 74%, #E3E5CB 100%); }
/* (v3.0.0) Living hero layers: grass wrapper (gust target), wind streaks,
   passing light. All motion gated on prefers-reduced-motion. */
.hp-grass{ position:absolute; left:0; right:0; bottom:0; height:124px; z-index:0; pointer-events:none; transform-origin:bottom center; }
.art-hp-hero.gusting .hp-grass{ animation:hpGust 1.9s var(--ease); }
@keyframes hpGust{ 0%{ transform:skewX(0); } 35%{ transform:skewX(5deg) translateX(6px); } 62%{ transform:skewX(-1.8deg); } 100%{ transform:skewX(0); } }
.wind-streak{ position:absolute; z-index:0; left:-30%; width:26%; height:2px; border-radius:2px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(138,168,142,.55), rgba(255,255,255,.5), transparent); }
.ws-1{ top:34%; } .ws-2{ top:58%; width:20%; }
.art-hp-hero.gusting .ws-1{ animation:hpStreak 1.5s ease-out; }
.art-hp-hero.gusting .ws-2{ animation:hpStreak 1.6s ease-out .25s; }
@keyframes hpStreak{ 0%{ transform:translateX(0); opacity:0; } 12%{ opacity:.8; } 85%{ opacity:.5; } 100%{ transform:translateX(560%); opacity:0; } }
.hp-light{ position:absolute; top:-10%; bottom:-10%; left:0; width:64%; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(48% 58% at 50% 44%, rgba(255,241,199,.5), rgba(255,247,224,.22) 55%, transparent 72%); }
@media (prefers-reduced-motion:no-preference){ .hp-light{ animation:hpLightPass 38s linear infinite; } }
@keyframes hpLightPass{ 0%{ transform:translateX(-60%); opacity:0; } 12%{ opacity:1; } 50%{ opacity:.85; } 88%{ opacity:1; } 100%{ transform:translateX(230%); opacity:0; } }
/* (v2.9.6) Three-plane grass meadow, full-bodied: broad overlapping blades in
   mixed greens per plane (blurred sage far, lit-edge olive mid, dark sharp
   near), bending from the roots on offset rhythms. Reduced-motion: still. */
.hp-grass .g-back{ position:absolute; left:-4%; right:-4%; bottom:-2px; height:108px; z-index:0; opacity:.34; pointer-events:none; filter:blur(1.4px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='100' viewBox='0 0 280 100'%3E%3Cpath d='M0 100 C3 65 8 38 13 22 C13 57 12 81 13 100 Z' fill='%238AA88E'/%3E%3Cpath d='M11 100 C12 66 14 39 16 24 C23 58 25 81 27 100 Z' fill='%238AA88E'/%3E%3Cpath d='M30 100 C31 73 32 51 33 39 C42 67 45 85 46 100 Z' fill='%238AA88E'/%3E%3Cpath d='M47 100 C47 68 47 43 47 29 C58 61 61 82 62 100 Z' fill='%238AA88E'/%3E%3Cpath d='M63 100 C61 60 57 29 53 11 C67 51 72 78 73 100 Z' fill='%238AA88E'/%3E%3Cpath d='M78 100 C77 61 76 30 75 13 C87 52 91 78 92 100 Z' fill='%238AA88E'/%3E%3Cpath d='M93 100 C93 63 94 35 94 19 C104 55 106 80 108 100 Z' fill='%239AB49B'/%3E%3Cpath d='M110 100 C111 68 112 43 113 28 C122 61 125 82 127 100 Z' fill='%238AA88E'/%3E%3Cpath d='M126 100 C125 69 123 46 120 32 C133 63 137 83 138 100 Z' fill='%238AA88E'/%3E%3Cpath d='M140 100 C138 73 135 52 131 41 C146 67 151 85 152 100 Z' fill='%238AA88E'/%3E%3Cpath d='M161 100 C159 60 154 28 149 10 C165 51 171 78 172 100 Z' fill='%238AA88E'/%3E%3Cpath d='M170 100 C170 57 169 24 169 5 C177 48 179 76 181 100 Z' fill='%238AA88E'/%3E%3Cpath d='M190 100 C188 70 184 47 180 34 C196 64 201 83 202 100 Z' fill='%239AB49B'/%3E%3Cpath d='M205 100 C204 73 202 52 200 40 C211 67 215 85 216 100 Z' fill='%238AA88E'/%3E%3Cpath d='M217 100 C218 66 221 40 223 25 C227 59 227 81 228 100 Z' fill='%238AA88E'/%3E%3Cpath d='M239 100 C239 61 239 31 238 13 C248 52 250 78 252 100 Z' fill='%239AB49B'/%3E%3Cpath d='M247 100 C246 71 244 49 242 36 C257 65 262 84 264 100 Z' fill='%239AB49B'/%3E%3Cpath d='M270 100 C269 75 266 55 263 44 C280 69 285 86 287 100 Z' fill='%238AA88E'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:bottom center; background-size:280px 108px; transform-origin:bottom center; }
.hp-grass .g-mid{ position:absolute; left:-4%; right:-4%; bottom:-2px; height:88px; z-index:0; opacity:.82; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='76' viewBox='0 0 260 76'%3E%3Cpath d='M-5 76 C-5 57 -5 42 -5 33 C2 53 4 65 5 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M-4 76 C-5 57 -5 43 -5 33 C-3 58 -2 71 -1 76 Z' fill='%238AA88E'/%3E%3Cpath d='M18 76 C16 53 12 36 8 26 C23 48 28 63 29 76 Z' fill='%235E7245'/%3E%3Cpath d='M23 76 C24 54 26 36 28 26 C32 49 33 64 34 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M24 76 C24 54 26 37 28 26 C28 55 26 70 28 76 Z' fill='%238AA88E'/%3E%3Cpath d='M47 76 C47 57 46 42 45 34 C56 53 59 65 61 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M62 76 C61 47 59 25 57 12 C68 41 72 60 73 76 Z' fill='%235E7245'/%3E%3Cpath d='M63 76 C61 47 59 26 57 12 C61 49 66 68 67 76 Z' fill='%238AA88E'/%3E%3Cpath d='M74 76 C74 53 75 36 75 26 C82 48 83 63 84 76 Z' fill='%235E7245'/%3E%3Cpath d='M81 76 C84 58 89 45 95 37 C93 54 91 66 92 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M82 76 C84 58 90 45 95 37 C91 60 85 71 86 76 Z' fill='%238AA88E'/%3E%3Cpath d='M98 76 C99 47 100 25 102 12 C107 41 109 60 110 76 Z' fill='%235E7245'/%3E%3Cpath d='M120 76 C118 45 115 21 111 7 C126 38 132 59 133 76 Z' fill='%235E7245'/%3E%3Cpath d='M122 76 C118 45 115 22 111 7 C118 47 124 68 125 76 Z' fill='%238AA88E'/%3E%3Cpath d='M127 76 C126 46 123 22 121 9 C132 39 136 59 137 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M143 76 C141 55 137 39 132 30 C148 51 154 65 155 76 Z' fill='%235E7245'/%3E%3Cpath d='M144 76 C141 55 136 40 132 30 C139 57 147 70 148 76 Z' fill='%238AA88E'/%3E%3Cpath d='M153 76 C153 57 153 42 153 34 C161 53 164 65 165 76 Z' fill='%235E7245'/%3E%3Cpath d='M174 76 C174 46 174 22 175 8 C183 39 185 59 186 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M175 76 C174 46 175 23 175 8 C177 48 178 68 179 76 Z' fill='%238AA88E'/%3E%3Cpath d='M193 76 C194 59 196 45 198 37 C204 55 205 66 206 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M200 76 C198 45 194 20 190 6 C206 38 212 59 213 76 Z' fill='%235E7245'/%3E%3Cpath d='M202 76 C198 45 194 21 190 6 C197 47 204 68 206 76 Z' fill='%238AA88E'/%3E%3Cpath d='M221 76 C222 48 225 27 228 14 C233 42 234 61 236 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M229 76 C231 49 236 28 241 16 C243 43 243 61 244 76 Z' fill='%236B7F4E'/%3E%3Cpath d='M231 76 C232 49 237 29 241 16 C239 51 234 69 235 76 Z' fill='%238AA88E'/%3E%3Cpath d='M250 76 C250 58 251 45 251 37 C258 55 259 66 260 76 Z' fill='%236B7F4E'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:bottom center; background-size:260px 88px; transform-origin:bottom center; }
.hp-grass .g-front{ position:absolute; left:-4%; right:-4%; bottom:-2px; height:64px; z-index:0; opacity:.66; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='52' viewBox='0 0 240 52'%3E%3Cpath d='M-1 52 C-3 42 -7 34 -11 30 C3 40 8 46 9 52 Z' fill='%231F3329'/%3E%3Cpath d='M0 52 C-3 42 -7 35 -11 30 C-5 43 2 49 3 52 Z' fill='%235E7245'/%3E%3Cpath d='M19 52 C21 33 24 18 27 9 C29 28 29 41 30 52 Z' fill='%232C4232'/%3E%3Cpath d='M25 52 C23 33 19 18 15 10 C32 29 37 41 39 52 Z' fill='%231F3329'/%3E%3Cpath d='M27 52 C23 33 19 19 15 10 C22 34 29 47 31 52 Z' fill='%235E7245'/%3E%3Cpath d='M37 52 C35 41 30 33 26 28 C44 39 50 46 52 52 Z' fill='%231F3329'/%3E%3Cpath d='M53 52 C56 35 61 23 66 15 C64 32 62 43 64 52 Z' fill='%231F3329'/%3E%3Cpath d='M54 52 C56 35 61 23 66 15 C62 37 56 48 57 52 Z' fill='%235E7245'/%3E%3Cpath d='M65 52 C66 41 68 32 70 27 C75 38 76 46 77 52 Z' fill='%232C4232'/%3E%3Cpath d='M81 52 C83 37 88 26 93 19 C92 34 91 44 92 52 Z' fill='%232C4232'/%3E%3Cpath d='M82 52 C84 37 88 27 93 19 C90 38 85 48 86 52 Z' fill='%235E7245'/%3E%3Cpath d='M89 52 C91 37 95 26 99 20 C102 34 102 44 103 52 Z' fill='%231F3329'/%3E%3Cpath d='M105 52 C104 36 103 23 102 16 C111 32 114 43 115 52 Z' fill='%232C4232'/%3E%3Cpath d='M106 52 C104 36 103 24 102 16 C105 37 108 48 109 52 Z' fill='%235E7245'/%3E%3Cpath d='M118 52 C116 32 111 17 107 9 C121 28 126 41 127 52 Z' fill='%232C4232'/%3E%3Cpath d='M137 52 C137 41 137 32 138 27 C147 38 150 46 152 52 Z' fill='%232C4232'/%3E%3Cpath d='M139 52 C137 41 137 33 138 27 C140 42 142 49 143 52 Z' fill='%235E7245'/%3E%3Cpath d='M145 52 C146 36 149 24 151 18 C156 33 157 43 158 52 Z' fill='%232C4232'/%3E%3Cpath d='M157 52 C156 33 154 18 153 10 C165 29 168 42 170 52 Z' fill='%232C4232'/%3E%3Cpath d='M159 52 C156 33 154 19 153 10 C157 34 161 47 162 52 Z' fill='%235E7245'/%3E%3Cpath d='M174 52 C176 39 180 28 183 23 C183 36 182 45 183 52 Z' fill='%231F3329'/%3E%3Cpath d='M185 52 C187 40 190 31 194 25 C195 37 195 45 196 52 Z' fill='%231F3329'/%3E%3Cpath d='M186 52 C187 40 190 31 194 25 C192 41 188 49 189 52 Z' fill='%235E7245'/%3E%3Cpath d='M203 52 C201 31 198 16 194 6 C207 27 212 41 213 52 Z' fill='%232C4232'/%3E%3Cpath d='M218 52 C217 35 214 21 211 14 C224 31 229 42 230 52 Z' fill='%231F3329'/%3E%3Cpath d='M219 52 C217 35 214 22 211 14 C217 36 222 47 223 52 Z' fill='%235E7245'/%3E%3Cpath d='M229 52 C229 34 230 20 231 12 C236 30 237 42 238 52 Z' fill='%231F3329'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:bottom center; background-size:240px 64px; transform-origin:bottom center; }
@media (prefers-reduced-motion:no-preference){
  .hp-grass .g-back{ animation:hpGrassSway 7.5s ease-in-out infinite alternate; }
  .hp-grass .g-mid{ animation:hpGrassSwayMid 5.5s ease-in-out -2.7s infinite alternate-reverse; }
  .hp-grass .g-front{ animation:hpGrassSwayNear 3.8s ease-in-out -1.2s infinite alternate; }
}
@keyframes hpGrassSway{ from{ transform:skewX(-3.2deg); } to{ transform:skewX(3.8deg); } }
@keyframes hpGrassSwayMid{ from{ transform:skewX(-4.8deg); } to{ transform:skewX(5.4deg); } }
@keyframes hpGrassSwayNear{ from{ transform:skewX(-7deg); } to{ transform:skewX(7.6deg); } }
/* Windy leaves: filled brand-leaf silhouettes tumbling across the hero left to
   right, staggered heights and speeds. Negative delays mean the sky is already
   populated on load. Leaves sit off-canvas and stay invisible unless the wind
   animation runs, so reduced-motion visitors see a static hero. */
.hp-leaves{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; transform-origin:bottom center; }
.art-hp-hero.gusting .hp-leaves{ animation:hpLeavesGust 1.9s var(--ease); }
@keyframes hpLeavesGust{ 0%{ transform:translateX(0) skewX(0); } 35%{ transform:translateX(22px) skewX(-2.4deg); } 70%{ transform:translateX(-5px) skewX(.8deg); } 100%{ transform:translateX(0) skewX(0); } }
.hp-leaves .hpl{ position:absolute; left:-60px; width:18px; height:18px; color:var(--field-olive); opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .hp-leaves .hpl{ animation:hpLeafWind var(--dur,14s) linear var(--delay,0s) infinite; }
  .hp-leaves .hpl:nth-child(1) { top:12%; --dur:13s; --delay:0s;   --lo:.38; width:16px; height:16px; }
  .hp-leaves .hpl:nth-child(2) { top:26%; --dur:17s; --delay:-6s;  --lo:.30; width:12px; height:12px; color:var(--sage); }
  .hp-leaves .hpl:nth-child(3) { top:38%; --dur:11s; --delay:-2s;  --lo:.42; width:20px; height:20px; }
  .hp-leaves .hpl:nth-child(4) { top:52%; --dur:15s; --delay:-11s; --lo:.34; width:14px; height:14px; color:var(--clay); }
  .hp-leaves .hpl:nth-child(5) { top:66%; --dur:12s; --delay:-4s;  --lo:.36; width:18px; height:18px; color:var(--sage); }
  .hp-leaves .hpl:nth-child(6) { top:80%; --dur:18s; --delay:-9s;  --lo:.28; width:12px; height:12px; }
  .hp-leaves .hpl:nth-child(7) { top:18%; --dur:14s; --delay:-13s; --lo:.32; width:24px; height:24px; color:var(--sage); }
  .hp-leaves .hpl:nth-child(8) { top:45%; --dur:16s; --delay:-7s;  --lo:.30; width:13px; height:13px; color:var(--henna); }
  .hp-leaves .hpl:nth-child(9) { top:60%; --dur:10s; --delay:-1s;  --lo:.40; width:17px; height:17px; }
  .hp-leaves .hpl:nth-child(10){ top:72%; --dur:19s; --delay:-15s; --lo:.26; width:11px; height:11px; color:var(--field-olive); }
  .hp-leaves .hpl:nth-child(11){ top:32%; --dur:12s; --delay:-8s;  --lo:.34; width:15px; height:15px; }
  .hp-leaves .hpl:nth-child(12){ top:86%; --dur:15s; --delay:-3s;  --lo:.30; width:19px; height:19px; color:var(--sage); }
}
@keyframes hpLeafWind{
  0%  { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  5%  { opacity:var(--lo,.32); }
  25% { transform:translate3d(26vw,-36px,0) rotate(85deg); }
  50% { transform:translate3d(52vw,22px,0) rotate(175deg); }
  75% { transform:translate3d(78vw,-28px,0) rotate(265deg); }
  94% { opacity:var(--lo,.32); }
  100%{ transform:translate3d(106vw,14px,0) rotate(350deg); opacity:0; }
}
/* (v3.2.0) Hero atmosphere: soft light shafts, drifting pollen motes and a
   low green haze for depth. Pure CSS, z-index 0, all gated on reduced motion. */
.hp-atmo{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hp-haze{ position:absolute; left:0; right:0; bottom:0; height:160px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(138,168,142,.10) 58%, rgba(94,114,69,.16)); }
.hp-shaft{ position:absolute; top:-20%; height:150%; width:120px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,247,224,.30), transparent); transform:skewX(-14deg); filter:blur(7px); }
.hp-shaft-1{ left:24%; } .hp-shaft-2{ left:60%; width:84px; }
.hp-mote{ position:absolute; width:var(--sz,4px); height:var(--sz,4px); border-radius:50%; opacity:0; pointer-events:none;
  background:rgba(138,168,142,.55); box-shadow:0 0 6px rgba(138,168,142,.4); }
.hp-mote.cream{ background:rgba(246,241,231,.75); box-shadow:0 0 6px rgba(246,241,231,.5); }
@media (prefers-reduced-motion:no-preference){
  .hp-shaft-1{ animation:hpShaft 26s ease-in-out infinite; }
  .hp-shaft-2{ animation:hpShaft 34s ease-in-out -12s infinite; }
  .hp-mote{ animation:hpMote var(--md,24s) linear var(--dl,0s) infinite; }
}
@keyframes hpShaft{ 0%{ opacity:0; transform:skewX(-14deg) translateX(-30px); } 30%{ opacity:.85; } 62%{ opacity:.5; } 100%{ opacity:0; transform:skewX(-14deg) translateX(90px); } }
@keyframes hpMote{ 0%{ transform:translate(0,0); opacity:0; } 12%{ opacity:var(--mo,.5); } 50%{ transform:translate(16px,-42px); } 88%{ opacity:var(--mo,.5); } 100%{ transform:translate(34px,-92px); opacity:0; } }
.art-hp-hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:3.4rem; align-items:center; padding:4.5rem var(--gutter) 4rem; }
.art-hp-hero-copy .art-eyebrow{ display:block; max-width:40ch; text-wrap:balance; line-height:1.8; }
.art-hp-h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(2.4rem,4.6vw,4.1rem); line-height:1.03; letter-spacing:-.022em; margin:1.2rem 0; max-width:15ch; }
.art-hp-h1 .accent{ display:block; color:var(--field-olive); }
.art-hp-lead{ font-size:1.12rem; color:var(--ink-mid); max-width:46ch; margin-bottom:2rem; }
.art-hp-cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:2.1rem; }
.art-hp-cta-meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-mid); }
.art-hp-trust{ display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; padding-top:1.5rem; border-top:1px solid var(--ink-faint); }
.art-hp-trust .t{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mid); }
.art-hp-hero-photo{ position:relative; }
.art-hp-hero-photo .frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 18px 50px rgba(33,30,24,.20); aspect-ratio:4/5; }
.art-hp-hero-photo .frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); will-change:transform; }
.art-hp-hero-photo .frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,51,41,.10),rgba(31,51,41,.42)); mix-blend-mode:multiply; }
.art-hp-hero-photo .tag{ position:absolute; left:1rem; bottom:1rem; z-index:2; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; color:#fff; background:rgba(31,51,41,.55); backdrop-filter:blur(4px); padding:.4rem .7rem; border-radius:4px; }
.art-hp-hero-photo .sprig{ position:absolute; top:-1.4rem; right:-1.2rem; width:120px; height:auto; color:var(--field-olive); z-index:2; }

/* Hero product tiles (v2.2.3) */
.art-hp-hero-art{ position:relative; }
@keyframes hpTileIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
/* Hero specimen showcase: the transparent cutout floats free on the parchment
   over a soft ground shadow, ghost name behind, botanical plate label in
   front. Slides crossfade in place. */
.art-hp-specimen{ position:relative; z-index:2; height:520px; animation:hpTileIn .6s var(--ease) both; touch-action:pan-y; }
.spec-slide{ position:absolute; inset:0; display:block; color:var(--ink); opacity:0; transform:translateY(12px); transition:opacity .8s var(--ease), transform .8s var(--ease); pointer-events:none; -webkit-user-drag:none; z-index:1; }
.spec-slide.is-active{ opacity:1; transform:none; pointer-events:auto; z-index:2; }
.spec-ghost{ position:absolute; top:1%; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-weight:900; font-size:clamp(3.2rem,6.2vw,5.8rem); letter-spacing:-.02em; line-height:1; color:var(--field-olive); opacity:.11; white-space:nowrap; pointer-events:none; }
.spec-slide::before{ content:""; position:absolute; left:50%; top:74%; width:44%; height:34px; transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(31,51,41,.20), transparent 72%); z-index:0; pointer-events:none; }
.spec-slide img{ position:absolute; top:50%; left:50%; width:min(420px,82%); height:auto; transform:translate(-50%,-54%); z-index:1; pointer-events:none; }
@media (prefers-reduced-motion:no-preference){
  .spec-slide.is-active img{ animation:specDrift 7s var(--ease) both; }
}
@keyframes specDrift{ from{ transform:translate(-50%,-54%) scale(1); } to{ transform:translate(-51%,-56%) scale(1.05); } }
.spec-plate{ position:absolute; left:2%; bottom:3%; z-index:3; display:flex; flex-direction:column; gap:.15rem; background:rgba(246,241,231,.92); backdrop-filter:blur(6px); border:1px solid var(--ink-line); border-left:3px solid var(--field-olive); border-radius:var(--r-sm); padding:.85rem 1.1rem .9rem; box-shadow:var(--shadow-low); max-width:78%; }
.spec-plate .idx{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; color:var(--ink-mid); }
.spec-plate .nm{ font-family:var(--font-display); font-weight:700; font-size:1.45rem; line-height:1.1; color:var(--ink); }
.spec-plate .sci{ font-style:italic; font-size:.8rem; color:var(--ink-mid); }
.spec-plate .view{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--henna); margin-top:.4rem; display:inline-flex; align-items:center; gap:.35rem; }
.spec-slide:hover .spec-plate{ box-shadow:var(--shadow-mid); }
.hps-arrow{ position:absolute; top:44%; transform:translateY(-50%); width:42px; height:42px; border:1px solid var(--ink-line); border-radius:50%; background:rgba(246,241,231,.9); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:4; box-shadow:var(--shadow-low); transition:background .2s var(--ease), transform .2s var(--ease); }
.hps-arrow:hover{ background:#fff; }
.hps-arrow .art-ico{ color:var(--ink); width:1.1em; height:1.1em; }
.hps-prev{ left:-.4rem; } .hps-next{ right:-.4rem; }
.hps-dots{ position:absolute; bottom:.2rem; right:4%; display:flex; gap:.35rem; z-index:4; }
/* Buttons are the 24px touch target; the visible dot is the ::before */
.hps-dots button{ width:24px; height:24px; background:transparent; border:none; cursor:pointer; padding:0; position:relative; }
.hps-dots button::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:99px; background:rgba(94,114,69,.35); transition:width .25s var(--ease), background .25s var(--ease); }
.hps-dots button[aria-current="true"]::before{ background:var(--clay); width:20px; }
@media(max-width:860px){
  .art-hp-specimen{ height:400px; }
  .spec-plate .nm{ font-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce){ .art-hp-specimen{ animation:none; } .spec-slide{ transition:none; } }
.art-reveal-clip{ animation:artClipIn 1s var(--ease) .1s both; }
@keyframes artClipIn{ from{ clip-path:inset(0 0 100% 0); opacity:.5; } to{ clip-path:inset(0 0 0 0); opacity:1; } }

/* Marquee */
.art-hp-marquee{ overflow:hidden; border-top:1px solid var(--ink-faint); border-bottom:1px solid var(--ink-faint); padding:1rem 0; background:var(--cream); }
.art-hp-marquee-track{ display:inline-flex; align-items:center; gap:1.4rem; white-space:nowrap; animation:artMarquee 38s linear infinite; }
.art-hp-marquee:hover .art-hp-marquee-track{ animation-play-state:paused; }
.art-hp-marquee-item{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em; color:rgba(33,30,24,.72); /* AA on cream; ink-mid at .62 is 4.35 */ }
.art-hp-marquee-dot{ color:var(--clay); }
@keyframes artMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Sections */
.art-hp-band{ padding:4.5rem 0; }
.art-hp-featured{ background:var(--cream); } /* cream section so the parchment product cards read as panels on any monitor */
.art-hp-sec-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,2.4vw,2.25rem); margin-bottom:3rem; }

/* How we work (v3.1.0): editorial numbered steps. One hairline rule per step
   with a clay tick, engraved Fraunces numerals, no icon coins, no boxes. */
.art-hp-work-side{ display:flex; flex-direction:column; align-items:flex-end; gap:.45rem; text-align:right; }
.art-hp-work-fact{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mid); }
.art-hp-work .art-hp-timeline{ margin-top:2.4rem; }
@media(max-width:700px){ .art-hp-work-side{ align-items:flex-start; text-align:left; } }
.art-hp-timeline .tl-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 2.4rem; }
.art-hp-timeline .tl-step{ position:relative; padding:1.5rem 1rem 0 0; border-top:1px solid var(--ink-faint); }
.art-hp-timeline .tl-step::before{ content:""; position:absolute; top:-1px; left:0; width:36px; height:2px; background:var(--clay); }
.art-hp-timeline .tl-n{ display:block; font-family:var(--font-display); font-weight:900; font-size:3rem; line-height:1; color:rgba(138,168,142,.55); margin-bottom:.7rem; transition:color .3s var(--ease); }
@supports (-webkit-text-stroke:1px black){
  .art-hp-timeline .tl-n{ color:transparent; -webkit-text-stroke:1.1px var(--sage); }
  .art-hp-timeline .tl-step:hover .tl-n{ color:rgba(138,168,142,.30); }
}
.art-hp-timeline .tl-step h3{ font-family:var(--font-display); font-weight:600; font-size:1.22rem; margin-bottom:.4rem; }
.art-hp-timeline .tl-step p{ font-size:.94rem; color:var(--ink-mid); max-width:24ch; }
@media(max-width:860px){ .art-hp-timeline .tl-row{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1.6rem; } }
@media (prefers-reduced-motion: no-preference){
  .art-hp-timeline .tl-step{ opacity:0; transform:translateY(14px); }
  .art-hp-timeline.in .tl-step{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
  .art-hp-timeline.in .tl-row .tl-step:nth-child(2){ transition-delay:.12s; }
  .art-hp-timeline.in .tl-row .tl-step:nth-child(3){ transition-delay:.24s; }
  .art-hp-timeline.in .tl-row .tl-step:nth-child(4){ transition-delay:.36s; }
}

/* Credentials (v3.1.0): embossed seals on the forest band. Depth comes from
   layered gradients and inset light/shadow, text is letterpressed; the seals
   float gently and tilt toward the cursor (footer.php, hover devices only). */
.art-hp-creds{ position:relative; background:var(--deep-forest); color:var(--parchment); padding:4.5rem 0; overflow:hidden; border-top:1px solid rgba(138,168,142,.26); }
.art-hp-creds .inner{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem 4rem; align-items:center; }
.art-hp-creds .line{ font-family:var(--font-display); font-weight:500; font-size:1.42rem; line-height:1.55; max-width:30ch; margin:0; color:rgba(246,241,231,.88); }
.art-hp-creds .line b{ font-weight:600; color:#fff; text-decoration:underline; text-decoration-color:rgba(160,75,41,.9); text-decoration-thickness:2px; text-underline-offset:6px; }
.art-hp-creds .seal-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem 1rem; justify-items:center; }
.art-seal{ perspective:420px; }
.art-seal .face{ position:relative; width:92px; height:92px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.13), transparent 48%),
    radial-gradient(circle at 68% 80%, rgba(0,0,0,.32), transparent 58%),
    linear-gradient(148deg, #2B4536, #1A2C22);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.35);
  transition:transform .2s ease-out; will-change:transform; }
.art-seal .face::before{ content:""; position:absolute; inset:7px; border-radius:50%; border:1px solid rgba(246,241,231,.22); box-shadow:inset 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(255,255,255,.07); }
.art-seal svg{ width:28px; height:28px; color:var(--sage); fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.art-seal .txt{ font-family:var(--font-mono); font-size:.55rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(246,241,231,.9); text-shadow:0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.07); }
@media (prefers-reduced-motion:no-preference){
  .art-seal{ animation:sealFloat 6.5s ease-in-out infinite; animation-delay:var(--sd,0s); }
}
@keyframes sealFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media(max-width:900px){
  .art-hp-creds .inner{ grid-template-columns:1fr; gap:2rem; }
  .art-hp-creds .seal-row{ display:flex; flex-wrap:wrap; gap:1.2rem; }
}

/* Featured cards */
.art-hp-feat-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; }
.art-hp-feat-link{ font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--henna); }
.art-hp-cat-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.6rem; margin-top:2.2rem; }
.art-hp-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.art-hp-card{ background:var(--parchment); border:1px solid var(--ink-line); border-radius:8px; overflow:hidden; display:block; color:var(--ink); box-shadow:var(--shadow-low); transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.art-hp-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-mid); }
.art-hp-card .band-img{ height:150px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--ink-faint); }
.art-hp-card .band-img .art-ico{ width:44px; height:44px; }
.art-hp-card .band-img--real{ padding:0; background:var(--parchment); border-bottom:none; }
.art-hp-card .band-img--real img{ width:100%; height:100%; object-fit:contain; }
.art-hp-card .body{ padding:1.1rem 1.2rem 1.3rem; }
.art-hp-card .cat{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mid); display:flex; align-items:center; gap:.4rem; }
.art-hp-card .cat .mk{ width:8px; height:8px; border-radius:2px; display:inline-block; }
.art-hp-card .nm{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; margin:.4rem 0 .15rem; }
.art-hp-card .sci{ font-style:italic; font-size:.84rem; color:var(--ink-mid); margin-bottom:.9rem; }
.art-hp-card-cta{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--henna); display:inline-flex; align-items:center; gap:.4rem; }

/* Buyer ratings band (real IndiaMART reviews, attributed) */
.art-hp-reviews{ padding:3.6rem 0 4rem; background:var(--cream); }
.rev-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.rev-score{ text-align:right; display:flex; flex-direction:column; gap:.15rem; }
.rev-score .n{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--henna); line-height:1; }
.rev-score .d{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mid); }
.rev-score:hover .d{ color:var(--henna); }
.rev-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.rev-card{ background:var(--parchment); border:1px solid var(--ink-line); border-top:3px solid var(--henna); border-radius:var(--r-lg); padding:1.4rem 1.6rem 1.5rem; margin:0; display:flex; flex-direction:column; gap:.9rem; box-shadow:0 12px 28px rgba(44,42,38,.07); }
.rev-card::before{ content:'\201C'; font-family:var(--font-display); font-weight:900; font-size:3rem; line-height:.7; color:var(--henna); opacity:.9; }
.rev-card:nth-child(2){ border-top-color:var(--field-olive); }
.rev-card:nth-child(2)::before{ color:var(--field-olive); }
.rev-card:nth-child(3){ border-top-color:var(--indigo); }
.rev-card:nth-child(3)::before{ color:var(--indigo); }
.rev-card blockquote{ font-family:var(--font-display); font-size:1.04rem; line-height:1.55; color:var(--ink); margin:0; }
.rev-card figcaption{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink); margin-top:auto; padding-top:.9rem; border-top:1px dashed var(--ink-faint); }
.rev-card figcaption span{ display:block; margin-top:.25rem; color:var(--ink-mid); text-transform:none; letter-spacing:.02em; }
@media(max-width:860px){ .rev-row{ grid-template-columns:1fr; } }

/* Export markets band (deep-forest, replaces the old one-liner) */
.art-hp-routes{ padding:4.5rem 0; background:var(--deep-forest); color:var(--parchment); position:relative; overflow:hidden; }
.art-hp-routes .routes-grid{ display:grid; grid-template-columns:minmax(280px,5fr) 7fr; gap:3.5rem; align-items:start; }
.art-eyebrow--dark{ color:var(--sage); }
.art-hp-routes .art-hp-sec-title{ color:var(--parchment); margin:.35rem 0 1rem; }
.routes-lead{ font-size:.95rem; line-height:1.7; color:rgba(246,241,231,.78); max-width:44ch; }
.routes-globe{ width:236px; height:236px; margin-top:2.4rem; display:block; overflow:visible; filter:drop-shadow(0 16px 22px rgba(0,0,0,.4)); }
.routes-globe .globe-wire{ opacity:.5; }
.routes-globe .globe-rim{ opacity:.5; }
.routes-globe .globe-gloss{ opacity:.9; }
.routes-globe .globe-mer{ transform-box:fill-box; transform-origin:center; }
.routes-globe .m1{ transform:scaleX(.15); } .routes-globe .m2{ transform:scaleX(.5); }
.routes-globe .m3{ transform:scaleX(.82); } .routes-globe .m4{ transform:scaleX(1); }
.routes-globe .globe-dot{ fill:var(--clay); opacity:.6; filter:drop-shadow(0 0 3px rgba(160,75,41,.85)); }
@media (prefers-reduced-motion:no-preference){
  .routes-globe .globe-mer{ animation:globeMer 13s linear infinite; }
  .routes-globe .m2{ animation-delay:-3.25s; }
  .routes-globe .m3{ animation-delay:-6.5s; }
  .routes-globe .m4{ animation-delay:-9.75s; }
  .routes-globe .globe-dot{ animation:globeDot 3.2s ease-in-out infinite; }
  .routes-globe .d2{ animation-delay:-.64s; }
  .routes-globe .d3{ animation-delay:-1.28s; }
  .routes-globe .d4{ animation-delay:-1.92s; }
  .routes-globe .d5{ animation-delay:-2.56s; }
}
@keyframes globeMer{ from{ transform:scaleX(1); } to{ transform:scaleX(-1); } }
@keyframes globeDot{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.routes-list{ display:flex; flex-direction:column; }
.routes-row{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:2rem; row-gap:.9rem; padding:1.4rem 0; border-bottom:1px solid rgba(246,241,231,.14); }
.routes-row:first-child{ padding-top:.2rem; }
.routes-row:last-child{ border-bottom:none; }
.rr-region{ display:grid; grid-template-columns:auto 1fr; column-gap:.85rem; align-items:baseline; }
.rr-num{ grid-row:1; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; color:var(--sage); }
.rr-region h3{ grid-row:1; font-family:var(--font-display); font-weight:600; font-size:1.28rem; color:var(--parchment); margin:0; }
.rr-countries{ grid-column:2; grid-row:2; margin-top:.35rem; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,241,231,.48); line-height:1.6; }
.rr-links{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }
.rr-links a{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--parchment); border:1px solid rgba(246,241,231,.25); border-radius:var(--r-sm); padding:.5rem .85rem; transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease); }
.rr-links a:hover{ background:rgba(246,241,231,.1); border-color:var(--sage); transform:translateY(-2px); }
.rr-links a:focus-visible{ outline:2px solid var(--parchment); outline-offset:2px; }

/* Sourcing guides teaser */
.art-hp-guides{ background:var(--cream); }
.art-hp-sec-lead{ font-size:.95rem; line-height:1.7; color:var(--ink-mid); max-width:62ch; margin:.9rem 0 2rem; }
.art-hp-guide-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.art-hp-guide-cards .art-blog-card{ background:var(--parchment); }

/* Buyer FAQ band */
.art-hp-faq{ padding:4.5rem 0; }
.art-hp-faq .faq-grid{ display:grid; grid-template-columns:minmax(280px,5fr) 7fr; gap:3.5rem; align-items:start; }
.art-hp-faq .art-hp-sec-title{ margin:.35rem 0 0; }
.faq-cluster{ position:relative; width:264px; height:250px; margin-top:2.4rem; }
.faq-cluster .fc-item{ position:absolute; display:block; }
.faq-cluster .fc-item img{ display:block; width:100%; height:auto; filter:drop-shadow(0 14px 15px rgba(31,51,41,.26)); }
.faq-cluster .fc-1{ left:6px; top:26px; width:150px; z-index:2; }
.faq-cluster .fc-2{ right:2px; top:0; width:112px; z-index:1; }
.faq-cluster .fc-3{ left:82px; bottom:0; width:104px; z-index:3; }
@media (prefers-reduced-motion:no-preference){
  .faq-cluster .fc-1{ animation:fcFloat 6.6s ease-in-out infinite; }
  .faq-cluster .fc-2{ animation:fcFloat 7.6s ease-in-out -2s infinite; }
  .faq-cluster .fc-3{ animation:fcFloat 5.9s ease-in-out -1s infinite; }
}
@keyframes fcFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-9px) rotate(.6deg); } }
.faq-item{ border-bottom:1px solid var(--ink-faint); }
.faq-item summary{ display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; list-style:none; padding:1.05rem .2rem; font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--henna); }
.faq-item summary:focus-visible{ outline:2px solid var(--field-olive); outline-offset:2px; border-radius:4px; }
.faq-chev{ flex-shrink:0; color:var(--field-olive); transition:transform .25s var(--ease); transform:rotate(90deg); width:1em; height:1em; }
.faq-item[open] .faq-chev{ transform:rotate(-90deg); }
.faq-item p{ padding:0 .2rem 1.15rem; font-size:.92rem; line-height:1.7; color:var(--ink-mid); max-width:62ch; }

@media(max-width:860px){
  .art-hp-routes .routes-grid, .art-hp-faq .faq-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .routes-globe, .faq-cluster{ display:none; }
  .art-hp-guide-cards{ grid-template-columns:1fr; }
}

/* CTA band */
.art-hp-ctaband{ padding:4.5rem 0; text-align:center; }
.art-hp-ctaband h2{ font-family:var(--font-display); font-weight:900; font-size:2.4rem; margin-bottom:.7rem; }
.art-hp-ctaband p{ color:var(--ink-mid); max-width:48ch; margin:0 auto 1.6rem; }
.art-hp-ctaband-btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

@media(max-width:860px){
  .art-hp-hero-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .art-hp-h1{ max-width:none; }
  .art-hp-timeline .tl-row{ grid-template-columns:1fr 1fr; gap:2rem; }
  .art-hp-timeline .tl-svg{ display:none; }
  .art-hp-cards{ grid-template-columns:1fr 1fr; }
}

@media(max-width:700px){
  .hp-leaves, .wind-streak, .hp-shaft{ display:none; }
  .art-hp-h1{ font-size:clamp(2.55rem,8.6vw,3.2rem); }
  .art-hp-lead{ font-size:1.06rem; }
  .art-hp-hero-grid{ padding:3rem var(--gutter) 3.2rem; gap:1.6rem; }
  .art-hp-cta{ gap:.7rem; }
  .art-hp-cta .art-btn{ flex:1 1 100%; justify-content:center; }
  .art-hp-cta-meta{ flex:1 1 100%; text-align:center; }
  .routes-row{ grid-template-columns:1fr; align-items:start; }
  .rr-links{ justify-content:flex-start; }
}

/* ── LISTING (page-products.php) cards ── */
/* Section (.art-products-section) owns the container + gutter; the grid stays unpadded. */
.art-products-grid-full{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.art-search-icon .art-ico{ color:var(--field-olive); }
/* One warm surface per card: photo band and body share the parchment so the
   tinted photos melt into the card instead of reading as a pale box. */
.artl-card{ background:var(--parchment); border:1px solid var(--ink-line); border-radius:8px; overflow:hidden; display:block; color:var(--ink); box-shadow:var(--shadow-low); transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.artl-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-mid); }
.artl-band{ height:120px; display:flex; align-items:center; justify-content:center; }
.artl-band .art-ico{ width:42px; height:42px; }
.artl-body{ padding:1.05rem 1.15rem 1.25rem; }
.artl-cat{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mid); display:flex; align-items:center; gap:.4rem; }
.artl-cat .mk{ width:8px; height:8px; border-radius:2px; display:inline-block; }
.artl-nm{ font-family:var(--font-display); font-weight:600; font-size:1.12rem; margin:.4rem 0 .1rem; }
.artl-sci{ font-style:italic; font-size:.82rem; color:var(--ink-mid); margin-bottom:.6rem; }
.artl-price{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:.85rem; }
.artl-price span{ font-family:var(--font-mono); font-weight:400; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mid); }
.artl-price--ask{ font-family:var(--font-mono); font-weight:400; font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mid); padding:.25rem 0; }
.artl-cta{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--henna); display:inline-flex; align-items:center; gap:.35rem; }
.artl-band--real{ height:170px; padding:0; overflow:hidden; background:var(--parchment); }
.artl-band--real img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .4s var(--ease); }
.artl-card:hover .artl-band--real img{ transform:scale(1.05); }
.artl-empty{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter) 4rem; text-align:center; color:var(--ink-mid); }
.artl-empty a{ color:var(--indigo); }

/* Product hero photo (page-product.php) */
.ph-side{ display:flex; flex-direction:column; gap:1.1rem; }
.ph-photo{ border-radius:12px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.15); background:var(--parchment); }
.ph-photo img{ width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:contain; }

/* ── PREMIUM FOOTER (v2.2.3) ── */
.art-foot{ background:var(--deep-forest); color:var(--parch-soft); }
.art-foot-inner{ max-width:var(--container); margin:0 auto; padding:4rem var(--gutter) 2.5rem; display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.5fr; gap:2.2rem; }
.art-foot-logo{ font-family:var(--font-display); font-weight:900; font-size:1.45rem; color:var(--parchment); margin-bottom:.9rem; }
.art-foot-blurb{ font-size:.9rem; line-height:1.65; max-width:36ch; margin-bottom:1.3rem; color:var(--parch-soft); }
.art-foot-certs{ display:flex; flex-wrap:wrap; gap:.45rem; }
.art-foot-certs span{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); border:1px solid rgba(138,168,142,.4); border-radius:4px; padding:.25rem .55rem; }
.art-foot-col h2{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sage); margin-bottom:1rem; font-weight:400; }
.art-foot-col a{ display:block; color:var(--parch-soft); font-size:.9rem; padding:.3rem 0; transition:color .2s var(--ease); text-decoration:none; }
.art-foot-col a:hover{ color:var(--parchment); }
.art-foot-all{ color:var(--sage) !important; margin-top:.5rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.art-foot-contact p{ display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; line-height:1.5; margin-bottom:.7rem; color:var(--parch-soft); }
.art-foot-contact .art-ico{ color:var(--sage); margin-top:.15em; flex:none; }
.art-foot-contact a{ color:var(--parch-soft); text-decoration:none; }
.art-foot-contact a:hover{ color:var(--parchment); }
.art-foot-social{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.art-foot-social a{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sage); text-decoration:none; }
.art-foot-social a:hover{ color:var(--parchment); }
.art-foot-bar{ border-top:1px solid rgba(246,241,231,.12); padding:1.3rem var(--gutter); text-align:center; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:rgba(246,241,231,.55); }
@media(max-width:900px){ .art-foot-inner{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:560px){ .art-foot-inner{ grid-template-columns:1fr; } }

/* Header logo polish (v2.2.3) */
.art-nav-logo{ font-family:var(--font-display); letter-spacing:-.01em; display:inline-flex; align-items:center; }
.art-nav-logo strong{ font-weight:900; color:var(--ink); }
.art-nav-logo span{ color:var(--field-olive); font-weight:400; }
.art-nav-logo-img{ height:46px; width:auto; display:block; }
/* Every sprig leaf of the logo (8 sprites cut from logo.png, overlaid on
   logo-shed.png in their exact source positions) falls and regrows on its own
   schedule: per-leaf duration and delay come from inline --dur/--delay vars,
   three fall variants scatter the drift direction. At rest and for
   reduced-motion the composite reads as the complete logo. */
.art-nav-logo{ position:relative; }
.logo-leaves{ position:absolute; inset:0; pointer-events:none; }
.logo-leaves .lgl{ position:absolute; height:auto; }
@media (prefers-reduced-motion:no-preference){
  .art-nav-logo-img{ animation:artLogoSettle .7s var(--ease) both; }
  .logo-leaves .lgl-a{ animation:logoLeafCycleA var(--dur,9s) ease-in-out var(--delay,0s) infinite; }
  .logo-leaves .lgl-b{ animation:logoLeafCycleB var(--dur,9s) ease-in-out var(--delay,0s) infinite; }
  .logo-leaves .lgl-c{ animation:logoLeafCycleC var(--dur,9s) ease-in-out var(--delay,0s) infinite; }
}
@keyframes artLogoSettle{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
/* shared phase map: attached to 21.4%, fall to 57.1%, bare to 64.3%, regrow to 92.9% */
@keyframes logoLeafCycleA{
  0%, 21.4% { transform:translate3d(0,0,0) rotate(0deg) scale(1); opacity:1; }
  35%       { transform:translate3d(-7px,90px,0) rotate(70deg) scale(1); }
  46%       { transform:translate3d(7px,190px,0) rotate(150deg) scale(1); opacity:1; }
  57.1%     { transform:translate3d(-11px,300px,0) rotate(230deg) scale(1); opacity:0; }
  57.2%, 64.3% { transform:translate3d(0,0,0) rotate(0deg) scale(0); opacity:0; }
  72%       { opacity:1; }
  92.9%, 100% { transform:translate3d(0,0,0) rotate(0deg) scale(1); opacity:1; }
}
@keyframes logoLeafCycleB{
  0%, 21.4% { transform:translate3d(0,0,0) rotate(0deg) scale(1); opacity:1; }
  35%       { transform:translate3d(9px,85px,0) rotate(-65deg) scale(1); }
  46%       { transform:translate3d(-5px,185px,0) rotate(-145deg) scale(1); opacity:1; }
  57.1%     { transform:translate3d(13px,295px,0) rotate(-225deg) scale(1); opacity:0; }
  57.2%, 64.3% { transform:translate3d(0,0,0) rotate(0deg) scale(0); opacity:0; }
  72%       { opacity:1; }
  92.9%, 100% { transform:translate3d(0,0,0) rotate(0deg) scale(1); opacity:1; }
}
@keyframes logoLeafCycleC{
  0%, 21.4% { transform:translate3d(0,0,0) rotate(0deg) scale(1); opacity:1; }
  35%       { transform:translate3d(-4px,95px,0) rotate(45deg) scale(1); }
  46%       { transform:translate3d(4px,200px,0) rotate(95deg) scale(1); opacity:1; }
  57.1%     { transform:translate3d(-7px,310px,0) rotate(140deg) scale(1); opacity:0; }
  57.2%, 64.3% { transform:translate3d(0,0,0) rotate(0deg) scale(0); opacity:0; }
  72%       { opacity:1; }
  92.9%, 100% { transform:translate3d(0,0,0) rotate(0deg) scale(1); opacity:1; }
}
@media(max-width:560px){ .art-nav-logo-img{ height:38px; } .art-mobile-menu{ top:70px; } }

/* ── OUR FACILITIES page (v2.2.6) ── */
.art-fac{ padding:3.5rem 0 1rem; }
.art-fac-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.art-fac-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.art-fac-item{ background:var(--cream); border:1px solid var(--ink-line); border-radius:var(--r-lg); overflow:hidden; }
.art-fac-media{ position:relative; aspect-ratio:4/3; }
.art-fac-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.art-fac-ph{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; background:var(--sage-pale); }
.art-fac-ph .art-ico{ color:var(--field-olive); opacity:.65; }
.art-fac-ph span{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mid); }
.art-fac-num{ position:absolute; top:.7rem; left:.7rem; font-family:var(--font-mono); font-size:.7rem; color:#fff; background:rgba(31,51,41,.6); border-radius:4px; padding:.2rem .5rem; }
.art-fac-item figcaption{ padding:1rem 1.1rem 1.2rem; }
.art-fac-item figcaption .t{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.12rem; color:var(--ink); margin-bottom:.25rem; }
.art-fac-item figcaption .c{ display:block; font-size:.85rem; color:var(--ink-mid); line-height:1.55; }
@media(max-width:860px){ .art-fac-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .art-fac-grid{ grid-template-columns:1fr; } }

/* ── Floating WhatsApp CTA (v2.9.0: circular FAB, label unfurls on hover) ── */
.art-wa-fab{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:60; display:inline-flex; align-items:center;
  height:56px; padding:0 16px; border-radius:100px; overflow:hidden;
  background:#0E7C41; color:#fff; box-shadow:0 4px 10px rgba(14,60,35,.22), 0 12px 30px rgba(14,60,35,.28);
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .35s var(--ease); }
.art-wa-fab .wa-lbl{ max-width:0; opacity:0; white-space:nowrap; overflow:hidden;
  transition:max-width .35s var(--ease), opacity .25s var(--ease), margin .35s var(--ease); }
.art-wa-fab:hover .wa-lbl, .art-wa-fab:focus-visible .wa-lbl{ max-width:130px; opacity:1; margin-left:.55rem; }
.art-wa-fab:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(14,60,35,.25), 0 16px 38px rgba(14,124,65,.42); color:#fff; }
.art-wa-fab:active{ transform:translateY(0) scale(.97); }
/* JS adds .fab-wait on load; removed once the visitor scrolls past the hero.
   The reveal fires one soft pulse ring to draw the eye, then stays quiet. */
.art-wa-fab.fab-wait{ opacity:0; transform:translateY(14px); pointer-events:none; }
.art-wa-fab::after{ content:""; position:absolute; inset:0; border-radius:100px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(14,124,65,.45); }
@media (prefers-reduced-motion:no-preference){
  .art-wa-fab:not(.fab-wait)::after{ animation:waPulse 2.2s var(--ease) .3s 2; }
}
@keyframes waPulse{ 0%{ box-shadow:0 0 0 0 rgba(14,124,65,.45); } 70%{ box-shadow:0 0 0 14px rgba(14,124,65,0); } 100%{ box-shadow:0 0 0 0 rgba(14,124,65,0); } }
.art-wa-fab .art-ico{ color:#fff; width:24px; height:24px; flex-shrink:0; }
@media(max-width:560px){ .art-wa-fab{ height:52px; padding:0 14px; right:1rem; bottom:1rem; } .art-wa-fab .wa-lbl{ display:none; } }
@media (prefers-reduced-motion:reduce){ .art-wa-fab{ transition:none; } .art-wa-fab .wa-lbl{ transition:none; } }
@media(max-width:900px){ .art-products-grid-full{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .art-products-grid-full{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .art-reveal-clip{ clip-path:none; animation:none; opacity:1; }
  .art-hp-timeline .tl-svg path{ stroke-dashoffset:0; }
  .art-hp-hero-photo .frame img{ transform:none; }
  .art-hp-marquee-track{ animation:none; }
}

/* ══════════════════════════════════════
   BLOG + ARTICLE (v2.4.0 botanical rebuild)
══════════════════════════════════════ */
/* Reading progress */
.art-reading-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; background:transparent; pointer-events:none; }
.art-reading-progress span{ display:block; height:100%; width:0; background:var(--clay); transition:width .1s linear; }

/* Blog listing card motif + empty state */
/* Product photos are parchment-tinted; the thumb shares that surface so they blend */
.art-blog-thumb{ background:var(--parchment); }
.art-blog-thumb-motif{ width:96px; height:96px; color:var(--field-olive); opacity:.35; }
.art-blog-read-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
.art-blog-read-btn .art-ico{ width:1em; height:1em; color:#fff; }
.art-blog-enquire-btn{ display:inline-flex; align-items:center; gap:.4rem; }
.art-blog-empty{ max-width:560px; margin:0 auto; text-align:center; padding:4rem 1.5rem; }
.art-blog-empty-motif{ color:var(--field-olive); opacity:.4; margin-bottom:1rem; }
.art-blog-empty-motif svg{ width:72px; height:72px; }
.art-blog-empty h3{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); margin-bottom:.6rem; }
.art-blog-empty p{ color:var(--ink-mid); font-size:.92rem; line-height:1.7; margin-bottom:1.5rem; }

/* Article hero */
.art-article-hero{ background:var(--deep-forest); padding:6.5rem var(--gutter) 3.5rem; position:relative; overflow:hidden; }
.art-article-hero::before{ content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%235E7245' fill-opacity='.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; }
.art-article-hero-inner{ position:relative; z-index:1; max-width:840px; margin:0 auto; }
.art-article-cat{ display:inline-flex; align-items:center; gap:.45rem; background:rgba(138,168,142,.16); border:1px solid rgba(138,168,142,.3); border-radius:100px; padding:.32rem .9rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); margin-bottom:1.25rem; }
.art-article-cat .art-ico{ width:.95em; height:.95em; color:var(--clay); }
.art-article-title{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.9rem,4vw,3rem); line-height:1.12; letter-spacing:-.02em; color:#fff; margin-bottom:1.1rem; }
.art-article-byline{ display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; color:var(--parch-soft); }
.art-article-hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.art-btn-hero-ghost{ display:inline-flex; align-items:center; gap:.45rem; padding:.78rem 1.5rem; border-radius:var(--r-sm); font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.art-btn-hero-ghost:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); color:#fff; }
.art-btn-hero-ghost:active{ transform:translateY(0) scale(.985); }
.art-btn-hero-ghost .art-ico{ width:1em; height:1em; }

/* Article layout */
.art-article-wrap{ max-width:var(--container); margin:0 auto; padding:3.5rem var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:3.5rem; align-items:start; }
.art-article-body{ font-size:1.02rem; color:var(--ink-mid); line-height:1.85; max-width:72ch; }
.art-article-body > *{ max-width:100%; }
.art-article-body h2{ font-family:var(--font-display); font-size:1.7rem; font-weight:800; color:var(--ink); margin:2.6rem 0 1rem; line-height:1.2; letter-spacing:-.01em; scroll-margin-top:90px; }
.art-article-body h3{ font-family:var(--font-display); font-size:1.28rem; font-weight:700; color:var(--ink); margin:2rem 0 .7rem; }
.art-article-body p{ margin-bottom:1.25rem; }
.art-article-body ul, .art-article-body ol{ margin:1rem 0 1.35rem 1.4rem; }
.art-article-body li{ margin-bottom:.5rem; line-height:1.8; }
.art-article-body strong{ color:var(--ink); font-weight:650; }
.art-article-body a{ color:var(--indigo); text-decoration:underline; text-underline-offset:2px; }
.art-article-body blockquote{ border-left:3px solid var(--clay); background:var(--sage-pale); padding:1rem 1.4rem; border-radius:0 var(--r-md) var(--r-md) 0; margin:1.6rem 0; color:var(--ink); }
.art-article-body table{ width:100%; border-collapse:collapse; margin:1.6rem 0; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-low); font-size:.9rem; }
.art-article-body th{ background:var(--deep-forest); color:#fff; padding:.8rem 1.1rem; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; text-align:left; }
.art-article-body td{ padding:.75rem 1.1rem; border-bottom:1px solid var(--ink-faint); color:var(--ink-mid); overflow-wrap:anywhere; }
@media(max-width:640px){
  .art-article-body table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .art-article-body th, .art-article-body td{ padding:.65rem .8rem; }
}
.art-article-body tr:nth-child(even) td{ background:var(--parchment); }
.art-article-body h2:first-child, .art-article-body h3:first-child{ margin-top:0; }
/* Answer-first lead paragraph */
.art-article-body > p:first-of-type{ font-size:1.14rem; color:var(--ink); line-height:1.7; }
/* Callout box (buyers can use .art-callout in content) */
.art-article-body .art-callout{ background:var(--cream); border:1px solid var(--ink-line); border-left:3px solid var(--field-olive); border-radius:var(--r-md); padding:1.2rem 1.4rem; margin:1.6rem 0; }
.art-article-body .art-callout strong{ display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--field-olive); margin-bottom:.4rem; }
/* FAQ (details/summary) in content */
.art-article-body .art-faq{ margin:1.4rem 0; }
.art-article-body .art-faq details{ border-bottom:1px solid var(--ink-faint); padding:.4rem 0; }
.art-article-body .art-faq summary{ cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); padding:.7rem 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.art-article-body .art-faq summary::-webkit-details-marker{ display:none; }
.art-article-body .art-faq summary::after{ content:'+'; font-family:var(--font-mono); color:var(--henna); font-size:1.3rem; transition:transform .2s; }
.art-article-body .art-faq details[open] summary::after{ transform:rotate(45deg); }
.art-article-body .art-faq p{ margin:0 0 1rem; font-size:.95rem; }

.art-article-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 0; padding-top:1.5rem; border-top:1px solid var(--ink-faint); }
.art-article-tag{ background:var(--sage-pale); color:var(--deep-forest); font-size:.62rem; font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; padding:.25rem .65rem; border-radius:var(--r-sm); }
.art-article-signoff{ display:flex; gap:.9rem; align-items:flex-start; margin-top:2rem; padding:1.2rem 1.4rem; background:var(--cream); border-radius:var(--r-md); }
.art-article-signoff .art-ico{ width:1.6rem; height:1.6rem; color:var(--field-olive); flex-shrink:0; }
.art-article-signoff p{ font-size:.86rem; color:var(--ink-mid); line-height:1.65; margin:0; }

/* Article sidebar */
.art-article-aside{ position:sticky; top:88px; display:flex; flex-direction:column; gap:1.25rem; }
.art-aside-quote{ background:var(--deep-forest); border-radius:var(--r-lg); padding:1.6rem; }
.art-aside-quote h3{ font-family:var(--font-display); font-size:1.25rem; color:#fff; margin-bottom:.4rem; }
.art-aside-quote h3 em{ font-style:normal; color:var(--sage); }
.art-aside-quote p{ font-size:.8rem; color:var(--parch-soft); line-height:1.6; margin-bottom:1.1rem; }
.art-aside-quote a{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.72rem; border-radius:var(--r-sm); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.55rem; transition:transform var(--t-fast) var(--ease); }
.art-aside-quote a:hover{ transform:translateY(-2px); }
.art-aside-quote a:active{ transform:translateY(0) scale(.985); }
.art-aside-wa{ background:#0E7C41; color:#fff; }
.art-aside-mail{ background:var(--clay); color:#fff; }
.art-aside-tel{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
.art-aside-quote a .art-ico{ width:1em; height:1em; }
.art-aside-card{ background:var(--parchment); border:1px solid var(--ink-line); border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--shadow-low); }
.art-aside-label{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); margin-bottom:.85rem; }
.art-aside-rel{ display:flex; align-items:center; gap:.8rem; padding:.65rem 0; border-bottom:1px solid var(--ink-faint); }
.art-aside-rel:last-child{ border-bottom:0; }
.art-aside-rel-icon{ width:38px; height:38px; border-radius:var(--r-lg); background:var(--sage-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.art-aside-rel-icon .art-ico{ width:1.1rem; height:1.1rem; color:var(--field-olive); }
.art-aside-rel-cat{ display:block; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--field-olive); }
.art-aside-rel-title{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); line-height:1.35; transition:color .2s; }
.art-aside-rel:hover .art-aside-rel-title{ color:var(--henna); }
.art-aside-rel-sub{ display:block; font-family:var(--font-mono); font-size:.64rem; color:var(--ink-mid); line-height:1.45; margin-top:.18rem; }
.art-aside-products{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.75rem; border-radius:var(--r-sm); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; background:var(--field-olive); color:#fff; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.art-aside-products:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(94,114,69,.3); }
.art-aside-products .art-ico{ width:1em; height:1em; color:#fff; }

@media(max-width:900px){
  .art-article-wrap{ grid-template-columns:1fr; gap:2.5rem; }
  .art-article-aside{ position:static; }
}
@media (prefers-reduced-motion:reduce){
  .art-reading-progress span{ transition:none; }
}