/* ─────────────────────────────────────────────────────────────── */
/* PAPERVALE TREES — SHARED STYLESHEET                              */
/* ─────────────────────────────────────────────────────────────── */
/**/

/* ─── SELF-HOSTED FONTS ─── */
/* DM Sans — variable font, latin-ext subset */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans — variable font, latin subset */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces italic — vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Fraunces italic — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces italic — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces normal — vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Fraunces normal — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




/* ─── DESIGN TOKENS ─── */
:root {
  --canvas:         #faf8f3;
  --surface-soft:   #f3f0e6;
  --surface-card:   #edeadb;
  --hairline:       #ddd9c8;
  --primary:        #334832;
  --on-primary:     #ffffff;
  --brand-forest:   #334832;
  --brand-sage:     #4c5f4b;
  --brand-moss:     #4c5f4b;
  --brand-fern:     #a8bf9e;
  --brand-terra:    #c96b3d;
  --brand-wheat:    #d4a85a;
  --ink:            #334832;
  --body-strong:    #334832;
  --body:           #4c5f4b;
  --muted:          #6b7a6c;
  --muted-soft:     #9aaa9b;
  --font-display:   'Fraunces', Georgia, serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill:9999px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --sp-section: 96px;
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ─── LAYOUT ─── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); }

/* ─── TYPOGRAPHY ─── */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -2px;
  color: var(--ink);
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-md);
}

/* ─── UKISG BANNER ─── */
.ukisg-banner {
  background: var(--brand-forest);
  color: rgba(255,255,255,0.9);
  text-align: center;
  padding: 14px var(--sp-xl);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ukisg-banner strong { color: #a8bf9e; }

/* ─── NAV ─── */
app-nav { display: contents; }
nav {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
}
/* Breadcrumb navs must not inherit site-nav sticky/z-index styles */
nav[aria-label] {
  position: static;
  z-index: auto;
  height: auto;
  background: none;
  border-bottom: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: var(--sp-lg); list-style: none; margin-left: var(--sp-xl); }
.nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-cta {
  background: var(--primary);
  color: var(--on-primary) !important;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* ─── NAV DROPDOWN ─── */
.nav-dropdown {
  position: relative;
}
/* Chevron indicator */
.nav-dropdown > a::after {
  content: ' ▾';
  font-size: 9px;
  opacity: 0.5;
}
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  list-style: none;
  padding: 6px 0;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(51,72,50,0.12);
  z-index: 1000;
  /* Use opacity/pointer-events instead of display:none so hover gap works */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Arrow tip */
.nav-submenu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--hairline);
}
.nav-submenu::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--canvas);
}
/* Bridge — fills the gap between nav item and submenu so cursor doesn't break hover */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 12px;
  display: none;
}
.nav-dropdown:hover::before { display: block; }
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-submenu li {
  margin: 0;
}
.nav-submenu li + li {
  border-top: 1px solid var(--hairline);
}
.nav-submenu a {
  display: block;
  padding: 11px 18px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-submenu a:hover {
  color: var(--ink);
  background: var(--surface-soft);
}

/* ─── HAMBURGER ─── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  z-index: 99;
  padding: var(--sp-lg) var(--sp-xl);
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 24px rgba(51,72,50,0.12);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--body);
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--ink); }
.mobile-menu .mob-cta {
  margin-top: var(--sp-md);
  background: var(--primary);
  color: var(--on-primary);
  padding: 14px var(--sp-xl);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
  border-bottom: none !important;
}

/* ─── MOBILE SUBMENU ─── */
.mobile-submenu {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.mobile-submenu-toggle {
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--body);
  padding: 12px 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-submenu-toggle:hover {
  color: var(--ink);
}
.mobile-submenu-toggle::after {
  content: '▼';
  font-size: 10px;
  transition: transform 0.2s;
  display: inline-block;
  margin-left: 8px;
}
.mobile-submenu.open .mobile-submenu-toggle::after {
  transform: rotate(180deg);
}
.mobile-submenu-items {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--surface-soft);
  border-radius: 0;
}
.mobile-submenu.open .mobile-submenu-items {
  display: flex;
}
.mobile-submenu-items a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.2s;
}
.mobile-submenu-items a:last-child {
  border-bottom: none;
}
.mobile-submenu-items a:hover {
  color: var(--ink);
}

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 13px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { opacity: 0.85; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  padding: 13px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--hairline);
  transition: border-color 0.2s;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--muted); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-forest);
  border: 1px solid #fff;
  color: #fff;
  padding: 13px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  height: 48px;
  transition: background 0.2s, opacity 0.2s;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--brand-moss); opacity: 0.95; }

/* ─── FORMS ─── */
.form-control {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.form-control:focus { border-color: var(--brand-moss); box-shadow: 0 0 0 3px rgba(76,95,75,0.12); }
.form-control::placeholder { color: var(--muted-soft); }
textarea.form-control { resize: vertical; min-height: 140px; line-height: 1.55; }

.email-input {
  flex: 1;
  height: 48px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 0 16px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.email-input:focus { border-color: var(--brand-moss); }

.btn-subscribe {
  height: 48px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: 0 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn-subscribe:hover { opacity: 0.8; }

.btn-submit {
  width: 100%;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: opacity 0.2s;
  letter-spacing: 0.2px;
}
.btn-submit:hover { opacity: 0.85; }

.btn-directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.btn-directions:hover { opacity: 0.85; }

/* ─── BADGES ─── */
.badge {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--body-strong);
}

.cert-badge {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--body-strong);
  letter-spacing: 0.5px;
}

/* ─── FOOTER ─── */
footer {
  background: var(--surface-soft);
  border-top: 1px solid var(--hairline);
  padding: 64px 0 40px;
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
}
.footer-brand p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: var(--sp-md);
  max-width: 280px;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-md);
  letter-spacing: 0.5px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  text-decoration: none;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted-soft);
}
.certifications {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  flex-wrap: wrap;
}

/* ─── SOCIAL LINKS ─── */
.social-links {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.social-links a:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.social-links a svg { display: block; }

/* Facebook — official blue */
.social-link-fb { background: #1877F2; }

/* Instagram — official gradient */
.social-link-ig {
  background: linear-gradient(
    45deg,
    #f09433 0%, #e6683c 25%,
    #dc2743 50%, #cc2366 75%,
    #bc1888 100%
  );
}

/* LinkedIn */
.social-link-li { background: #0A66C2; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  :root { --sp-section: 80px; }
}

@media (max-width: 768px) {
  :root { --sp-section: 56px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  nav { height: auto; }
  .nav-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    height: auto;
    padding: 12px var(--sp-lg);
    gap: 8px;
  }
  .nav-logo { grid-column: 1; grid-row: 1; }
  .nav-search { grid-column: 1 / -1; grid-row: 2; max-width: 100%; }
  .nav-hamburger { grid-column: 3; grid-row: 1; }
  .mobile-menu { top: 112px; }
  .container { padding: 0 var(--sp-lg); }
  .ukisg-banner { font-size: 11px; padding: 10px var(--sp-lg); margin-bottom: 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-inner { padding: 0 var(--sp-lg); }
  footer { padding: 40px 0 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .certifications { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────────────────── */
/* PAGE-SPECIFIC STYLES (consolidated from HTML files)             */
/* ─────────────────────────────────────────────────────────────── */

/* ===== availability ===== */

  /* ─── PAGE HEADER ─── */
  .page-header { background: var(--brand-forest); padding: 64px 0 56px; position: relative; overflow: hidden; }
  .page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(51,72,50,0.85) 0%, rgba(51,72,50,0.4) 100%); }
  .page-header-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); }
  .page-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-fern); margin-bottom: 12px; }
  .page-header h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); font-weight: 300; line-height: 1.05; letter-spacing: -1.5px; color: #fff; margin-bottom: 12px; }
  .page-header h1 em { font-style: italic; color: var(--brand-fern); }
  .page-header p { font-size: 16px; color: rgba(255,255,255,0.72); max-width: 520px; line-height: 1.6; }

  /* ─── DOWNLOAD SECTION ─── */
  .download-section { padding: var(--sp-section) 0; }
  .download-header { margin-bottom: var(--sp-xxl); }
  .download-header h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 400; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-md); line-height: 1.1; }
  .download-header p { font-size: 17px; color: var(--muted); max-width: 560px; line-height: 1.65; }

  /* Download cards */
  .download-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); margin-bottom: var(--sp-xxl); }
  .download-card { background: var(--surface-soft); border-radius: var(--radius-xl); padding: var(--sp-xl); border: 1px solid var(--hairline); display: flex; gap: var(--sp-lg); align-items: center; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
  .download-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(51,72,50,0.1); }
  .download-card-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
  .icon-green { background: rgba(168,191,158,0.3); }
  .icon-red   { background: rgba(201,107,61,0.15); }
  .download-card-body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink); letter-spacing: -0.2px; margin-bottom: 4px; }
  .download-card-body p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
  .download-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--brand-moss); }

  /* ─── PDF VIEWER ─── */
  .pdf-section { margin-bottom: var(--sp-xxl); }
  .pdf-section h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: var(--sp-lg); letter-spacing: -0.2px; }
  .pdf-wrapper { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--hairline); background: var(--surface-card); }
  .pdf-wrapper iframe { display: block; width: 100%; height: 700px; border: none; }
  .pdf-fallback { padding: var(--sp-xl); text-align: center; }
  .pdf-fallback p { font-size: 15px; color: var(--muted); margin-bottom: var(--sp-lg); }
  .pdf-fallback a { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--on-primary); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
  .pdf-fallback a:hover { opacity: 0.85; }

  /* ─── SEASONAL NOTE ─── */
  .seasonal-note { background: rgba(168,191,158,0.15); border: 1px solid rgba(168,191,158,0.35); border-radius: var(--radius-lg); padding: var(--sp-lg) var(--sp-xl); display: flex; gap: var(--sp-md); align-items: flex-start; margin-bottom: var(--sp-xxl); }
  .seasonal-note-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
  .seasonal-note p { font-size: 14px; color: var(--body-strong); line-height: 1.6; }
  .seasonal-note p strong { color: var(--ink); }

  /* ─── CTA BAND ─── */
  .cta-band-dark { background: var(--brand-forest); border-radius: var(--radius-xl); padding: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: var(--sp-section); position: relative; overflow: hidden; }
  .cta-band-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 90% 50%, rgba(168,191,158,0.07) 0%, transparent 70%); }
  .cta-copy { position: relative; z-index: 2; }
  .cta-copy .section-label { color: var(--brand-fern); }
  .cta-copy h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 400; letter-spacing: -0.5px; color: #fff; margin-bottom: var(--sp-md); line-height: 1.1; }
  .cta-copy p { font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: var(--sp-lg); }
  .cta-copy blockquote { font-family: var(--font-display); font-size: 18px; font-style: italic; font-weight: 300; color: var(--brand-fern); line-height: 1.5; margin-bottom: var(--sp-xl); padding-left: var(--sp-lg); border-left: 2px solid rgba(168,191,158,0.4); }
  .cta-actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; position: relative; z-index: 2; }
  .btn-white { display: inline-flex; align-items: center; gap: 8px; background: var(--on-primary); color: var(--ink); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
  .btn-white:hover { opacity: 0.9; }
  .btn-ghost-dark { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
  .btn-ghost-dark:hover { background: rgba(255,255,255,0.18); }
  .cta-details { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--sp-md); }
  .cta-detail { display: flex; gap: var(--sp-md); align-items: flex-start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: var(--sp-lg); }
  .cta-detail-icon { font-size: 18px; flex-shrink: 0; }
  .cta-detail-text strong { display: block; font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; }
  .cta-detail-text a, .cta-detail-text span { font-size: 14px; color: rgba(255,255,255,0.75); text-decoration: none; }
  .cta-detail-text a:hover { color: rgba(255,255,255,0.9); }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .cta-band-dark { grid-template-columns: 1fr; gap: var(--sp-xxl); padding: var(--sp-xxl) var(--sp-xl); }
  }
  @media (max-width: 768px) {
    .page-header { padding: 48px 0 40px; }
    .page-header-inner { padding: 0 var(--sp-lg); }
    .download-cards { grid-template-columns: 1fr; }
    .pdf-wrapper iframe { height: 450px; }
    .cta-band { margin-bottom: var(--sp-section); }
    .cta-actions { flex-direction: column; }
    .btn-white, .btn-ghost-dark { width: 100%; justify-content: center; }
  }

/* ===== contact ===== */

  /* ─── PAGE HEADER ─── */
  .page-header {
    background: var(--brand-forest);
    padding: 64px 0 56px;
    position: relative;
    overflow: hidden;
  }
  .page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(51,72,50,0.8) 0%, rgba(51,72,50,0.4) 100%);
  }
  .page-header-inner {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--sp-xl);
  }
  .page-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-fern);
    margin-bottom: 12px;
  }
  .page-header h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: #fff;
    margin-bottom: 12px;
  }
  .page-header h1 em { font-style: italic; color: var(--brand-fern); }
  .page-header p {
    font-size: 16px;
    color: rgba(255,255,255,0.72);
    max-width: 480px;
    line-height: 1.6;
  }

  /* ─── MAIN CONTACT SECTION ─── */
  .contact-section {
    padding: var(--sp-section) 0;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: var(--sp-lg);
    align-items: stretch;
  }

  /* ─── FORM ─── */
  .form-card {
    background: var(--surface-soft);
    border-radius: var(--radius-xl);
    padding: var(--sp-xl);
  }
  .form-card h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .form-card .form-intro {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: var(--sp-xl);
    line-height: 1.6;
  }
  .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
  }
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--sp-md);
  }
  .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  .form-group label .req { color: var(--brand-forest); margin-left: 2px; }
  .form-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: var(--sp-xl);
    line-height: 1.5;
  }
  .form-consent input[type="checkbox"] { margin-top: 3px; accent-color: var(--brand-moss); flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }

  /* ─── INFO PANEL ─── */
  .info-panel { display: flex; flex-direction: column; gap: var(--sp-lg); }

  .info-card {
    background: var(--surface-soft);
    border-radius: var(--radius-xl);
    padding: var(--sp-xl);
  }
  .info-card h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: var(--ink);
    margin-bottom: var(--sp-md);
  }
  .info-row {
    display: flex;
    gap: var(--sp-md);
    align-items: flex-start;
    margin-bottom: var(--sp-md);
  }
  .info-row:last-child { margin-bottom: 0; }
  .info-icon {
    width: 36px; height: 36px;
    background: var(--canvas);
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
  }
  .info-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .info-text span, .info-text a {
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.5;
  }
  .info-text a:hover { color: var(--ink); }

  /* Hours card */
  .hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hours-row { display: flex; flex-direction: column; }
  .hours-day { font-size: 12px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
  .hours-time { font-size: 14px; color: var(--muted); }
  .hours-closed { color: var(--muted-soft); }

  /* Map card */
  .map-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--surface-card);
  }
  .map-photo {
    width: 100%;
    height: 220px;
    overflow: hidden;
  }
  .map-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .map-footer {
    padding: var(--sp-lg) var(--sp-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
  }
  .map-address { font-size: 13px; color: var(--muted); line-height: 1.6; }
  .map-address strong { display: block; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 768px) {
    .page-header { padding: 48px 0 40px; }
    .page-header-inner { padding: 0 var(--sp-lg); }
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .form-row-2 { grid-template-columns: 1fr; }
    .hours-grid { grid-template-columns: 1fr; }
    .map-footer { flex-direction: column; align-items: flex-start; }
    .btn-directions { width: 100%; justify-content: center; }
  }

/* ===== grow-strong ===== */
  /* ─── INTRO BAND ─── */
  .intro-band { padding: var(--sp-section) 0; }
  .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .intro-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 42px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
  .intro-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
  .intro-copy p.lead { font-size: 18px; color: var(--body-strong); }
  .intro-img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; }
  .intro-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ─── PILLARS GRID ─── */
  .pillars { padding: var(--sp-section) 0; background: var(--surface-soft); }
  .pillars-header { text-align: center; max-width: 600px; margin: 0 auto var(--sp-xxl); }
  .pillars-header h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-md); }
  .pillars-header p { font-size: 17px; color: var(--muted); line-height: 1.65; }
  .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
  .pillar-card { background: var(--canvas); border-radius: var(--radius-xl); padding: var(--sp-xl); border: 1px solid var(--hairline); }
  .pillar-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: var(--sp-lg); }
  .pi-green  { background: rgba(168,191,158,0.25); }
  .pi-brown  { background: rgba(212,168,90,0.2); }
  .pi-terra  { background: rgba(201,107,61,0.15); }
  .pillar-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 400; color: var(--ink); letter-spacing: -0.2px; margin-bottom: var(--sp-sm); }
  .pillar-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }

  /* ─── PRUNING SECTION ─── */
  .pruning { padding: var(--sp-section) 0; }
  .pruning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .pruning-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
  .pruning-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
  .pruning-steps { display: flex; flex-direction: column; gap: var(--sp-lg); }
  .step { display: flex; gap: var(--sp-lg); align-items: flex-start; }
  .step-num { font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--brand-fern); line-height: 1; flex-shrink: 0; width: 40px; }
  .step-body h4 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .step-body p { font-size: 15px; color: var(--muted); line-height: 1.6; }

  /* ─── SUSTAINABILITY ─── */
  .sustain { padding: var(--sp-section) 0; background: var(--brand-forest); position: relative; overflow: hidden; }
  .sustain::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 90% 50%, rgba(168,191,158,0.07) 0%, transparent 70%); }
  .sustain-inner { position: relative; z-index: 2; }
  .sustain-header { margin-bottom: var(--sp-xxl); }
  .sustain-header .section-label { color: var(--brand-fern); }
  .sustain-header h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: #fff; margin-bottom: var(--sp-md); }
  .sustain-header p { font-size: 17px; color: rgba(255,255,255,0.65); max-width: 560px; line-height: 1.65; }
  .sustain-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
  .sustain-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: var(--sp-xl); }
  .sustain-card h4 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 6px; }
  .sustain-card p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.65; }
  .sustain-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-fern); margin-bottom: var(--sp-md); }
  .sustain-legacy { margin-top: var(--sp-xxl); padding-top: var(--sp-xxl); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: center; }
  .sustain-legacy p { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); font-style: italic; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.5; letter-spacing: -0.3px; max-width: 700px; text-align: center; margin: 0; }

  /* ─── CERTIFICATIONS ─── */
  .certs { padding: var(--sp-section) 0; }
  .certs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
  .cert-card { border-radius: var(--radius-xl); padding: var(--sp-xl); }
  .cert-card.bs { background: var(--surface-soft); border: 1px solid var(--hairline); }
  .cert-card.ukisg { background: var(--brand-forest); color: #fff; }
  .cert-badge-large { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: var(--sp-lg); }
  .badge-bs { background: var(--surface-card); color: var(--ink); border: 1px solid var(--hairline); }
  .badge-ukisg { background: rgba(168,191,158,0.2); color: var(--brand-fern); border: 1px solid rgba(168,191,158,0.3); }
  .cert-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.3px; margin-bottom: var(--sp-md); }
  .cert-card.bs h3 { color: var(--ink); }
  .cert-card.ukisg h3 { color: #fff; }
  .cert-card p { font-size: 15px; line-height: 1.7; }
  .cert-card.bs p { color: var(--muted); }
  .cert-card.ukisg p { color: rgba(255,255,255,0.7); }
  .cert-highlights { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-lg); }
  .cert-pill { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: var(--radius-pill); }
  .pill-light { background: var(--canvas); border: 1px solid var(--hairline); color: var(--body-strong); }
  .pill-dark { background: rgba(168,191,158,0.15); border: 1px solid rgba(168,191,158,0.3); color: var(--brand-fern); }

  /* ─── CTA BAND ─── */
  .cta-band { background: var(--surface-soft); border-radius: var(--radius-xl); margin: var(--sp-section) var(--sp-xl); padding: 80px; text-align: center; }
  .cta-band h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 400; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-md); }
  .cta-band p { font-size: 17px; color: var(--muted); max-width: 520px; margin: 0 auto var(--sp-xl); line-height: 1.65; }
  .cta-actions { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }
  .btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--ink); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--hairline); transition: border-color 0.2s; }
  .btn-outline:hover { border-color: var(--muted); }

/* ===== how-we-grow-our-trees ===== */
  :root {
    --canvas:         #faf8f3;
    --surface-soft:   #f3f0e6;
    --surface-card:   #edeadb;
    --hairline:       #ddd9c8;
    --primary:        #334832;
    --on-primary:     #ffffff;
    --brand-forest:   #334832;
    --brand-sage:     #4c5f4b;
    --brand-moss:     #4c5f4b;
    --brand-fern:     #a8bf9e;
    --ink:            #334832;
    --body-strong:    #334832;
    --body:           #4c5f4b;
    --muted:          #6b7a6c;
    --muted-soft:     #9aaa9b;
    --font-display:   'Fraunces', Georgia, serif;
    --font-body:      'DM Sans', system-ui, sans-serif;
    --radius-xs:  6px;
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-pill:9999px;
    --sp-xs:  8px;
    --sp-sm:  12px;
    --sp-md:  16px;
    --sp-lg:  24px;
    --sp-xl:  32px;
    --sp-xxl: 48px;
    --sp-section: 96px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--canvas); color: var(--body); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  .container { max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); }

  /* ─── UKISG BANNER ─── */
  .ukisg-banner { background: var(--brand-forest); color: rgba(255,255,255,0.9); text-align: center; padding: 14px var(--sp-xl); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px; }
  .ukisg-banner strong { color: #a8bf9e; }

  /* ─── NAV ─── */
  nav { background: var(--canvas); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 100; height: 64px; }
  .nav-inner { display: flex; align-items: center; height: 64px; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); gap: var(--sp-xl); }
  .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
  .nav-links { display: flex; align-items: center; gap: var(--sp-lg); list-style: none; margin-left: auto; flex-shrink: 0; }
  .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--primary); transition: color 0.2s; white-space: nowrap; }
  .nav-links a:hover, .nav-links a.active { color: var(--primary); }
  .nav-cta { background: var(--primary); color: var(--on-primary) !important; padding: 9px 18px; border-radius: var(--radius-md); font-weight: 600 !important; font-size: 14px !important; }

  /* ─── HAMBURGER ─── */
  .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
  .nav-hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.25s ease; transform-origin: center; }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--canvas); border-bottom: 1px solid var(--hairline); z-index: 99; padding: var(--sp-lg) var(--sp-xl); flex-direction: column; gap: 4px; box-shadow: 0 8px 24px rgba(51,72,50,0.12); }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { text-decoration: none; font-size: 16px; font-weight: 500; color: var(--body); padding: 12px 0; border-bottom: 1px solid var(--hairline); transition: color 0.2s; }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu .mob-cta { margin-top: var(--sp-md); background: var(--primary); color: var(--on-primary); padding: 14px var(--sp-xl); border-radius: var(--radius-md); text-align: center; font-weight: 600; border-bottom: none !important; }

  /* ─── PAGE HEADER ─── */
  .page-header { background: var(--brand-forest); padding: 64px 0 56px; position: relative; overflow: hidden; }
  .page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(51,72,50,0.85) 0%, rgba(51,72,50,0.4) 100%); }
  .page-header-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); }
  .page-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-fern); margin-bottom: 12px; }
  .page-header h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); font-weight: 300; line-height: 1.05; letter-spacing: -1.5px; color: #fff; margin-bottom: 12px; }
  .page-header h1 em { font-style: italic; color: var(--brand-fern); }
  .page-header p { font-size: 16px; color: rgba(255,255,255,0.72); max-width: 520px; line-height: 1.6; }

  /* ─── SECTION LABEL ─── */
  .section-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-md); }

  /* ─── SECTION ─── */
  .content-section { padding: var(--sp-section) 0; }
  .content-section + .content-section { padding-top: 0; }

  /* ─── TWO-COL LAYOUT ─── */
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .two-col.reverse { direction: rtl; }
  .two-col.reverse > * { direction: ltr; }

  /* Copy styles */
  .copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
  .copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
  .copy p:last-child { margin-bottom: 0; }
  .copy p.lead { font-size: 18px; color: var(--body-strong); }

  /* Photo grid */
  .photo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
  .photo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
  .photo-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }

  .photo-item { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-card); }
  .photo-item.tall { aspect-ratio: 3/4; }
  .photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
  .photo-item:hover img { transform: scale(1.04); }

  /* ─── DARK CALLOUT ─── */
  .callout-dark { background: var(--brand-forest); border-radius: var(--radius-xl); padding: var(--sp-xxl) var(--sp-xl); margin: var(--sp-xxl) 0; position: relative; overflow: hidden; }
  .callout-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 90% 50%, rgba(168,191,158,0.07) 0%, transparent 70%); }
  .callout-dark p { font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.75; position: relative; z-index: 2; }
  .callout-dark p.lead { font-size: 18px; color: rgba(255,255,255,0.92); margin-bottom: var(--sp-md); }
  .callout-dark .section-label { color: var(--brand-fern); position: relative; z-index: 2; }

  /* ─── GREEN CALLOUT ─── */
  .callout-green { background: rgba(168,191,158,0.15); border: 1px solid rgba(168,191,158,0.35); border-radius: var(--radius-lg); padding: var(--sp-lg) var(--sp-xl); display: flex; gap: var(--sp-md); align-items: flex-start; margin-top: var(--sp-lg); }
  .callout-green-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
  .callout-green p { font-size: 14px; color: var(--body-strong); line-height: 1.6; }
  .callout-green p strong { color: var(--ink); }

  /* ─── DIVIDER ─── */
  .divider { border: none; border-top: 1px solid var(--hairline); margin: var(--sp-section) 0; }

  /* ─── CTA BAND ─── */
  .cta-band { background: var(--surface-soft); border-radius: var(--radius-xl); padding: 64px; text-align: center; margin-bottom: var(--sp-section); }
  .cta-band h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 400; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-md); }
  .cta-band p { font-size: 16px; color: var(--muted); max-width: 500px; margin: 0 auto var(--sp-xl); line-height: 1.65; }
  .cta-actions { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }
  .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--on-primary); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
  .btn-primary:hover { opacity: 0.85; }
  .btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--ink); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--hairline); transition: border-color 0.2s; }
  .btn-outline:hover { border-color: var(--muted); }

  /* ─── FOOTER ─── */
  footer { background: var(--surface-soft); border-top: 1px solid var(--hairline); padding: 64px 0 40px; }
  .footer-inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--hairline); margin-bottom: 32px; }
  .footer-brand p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: var(--sp-md); max-width: 280px; }
  .footer-col h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-md); letter-spacing: 0.5px; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a { text-decoration: none; font-size: 14px; color: var(--muted); transition: color 0.2s; }
  .footer-col a:hover { color: var(--ink); }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted-soft); }
  .cert-row { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; margin-top: 16px; }
  .cert-badge { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--body-strong); letter-spacing: 0.5px; }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .two-col { grid-template-columns: 1fr; gap: var(--sp-xxl); }
    .two-col.reverse { direction: ltr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .cta-band { padding: var(--sp-xxl) var(--sp-xl); }
  }
  @media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }
    :root { --sp-section: 56px; }
    .container { padding: 0 var(--sp-lg); }
    .ukisg-banner { font-size: 11px; padding: 10px var(--sp-lg); }
    .page-header { padding: 48px 0 40px; }
    .page-header-inner { padding: 0 var(--sp-lg); }
    .photo-grid-3 { grid-template-columns: 1fr 1fr; }
    .photo-grid-4 { grid-template-columns: 1fr 1fr; }
    .cta-actions { flex-direction: column; align-items: center; }
    .btn-primary, .btn-outline { width: 100%; justify-content: center; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-inner { padding: 0 var(--sp-lg); }
    footer { padding: 40px 0 24px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  }
  @media (max-width: 480px) {
    .photo-grid-3 { grid-template-columns: 1fr; }
    .photo-grid-4 { grid-template-columns: 1fr; }
  }

/* ===== index ===== */
  /* Add brand-bark for index-specific use */
  :root { --brand-bark: #5a7259; }

  /* Nav search customization for index */
  .nav-search { flex: 0 1 380px; margin: 0 auto; }
  .nav-search .ecwid-Search,
  .nav-search .ec-search { width: 100% !important; }
  .nav-search input[type="text"],
  .nav-search input[type="search"] {
    width: 100% !important;
    height: 40px !important;
    background: var(--surface-soft) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-family: var(--font-body) !important;
    color: var(--ink) !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .nav-search input[type="text"]:focus,
  .nav-search input[type="search"]:focus {
    border-color: var(--brand-moss) !important;
    background: var(--canvas) !important;
  }
  .nav-search button[type="submit"],
  .nav-search .ecwid-SearchButton {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    cursor: pointer !important;
  }

  /* ─── HERO ─── */
  .hero {
    position: relative;
    overflow: hidden;
    height: min(90vh, 680px);
    background: var(--brand-forest);
  }
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.55;
  }
  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      160deg,
      rgba(51,72,50,0.6) 0%,
      rgba(51,72,50,0.2) 60%,
      rgba(51,72,50,0.5) 100%
    );
  }
  .hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--sp-xxl);
    max-width: 1240px;
    margin: 0 auto;
    padding-left: var(--sp-xl);
    padding-right: var(--sp-xl);
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--sp-lg);
    width: fit-content;
  }
  .hero-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #a8bf9e;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 78px);
    font-weight: 300;
    line-height: 1.0;
    letter-spacing: -2px;
    color: #fff;
    max-width: 680px;
    margin-bottom: var(--sp-lg);
  }
  .hero-title em {
    font-style: italic;
    font-weight: 300;
    color: #a8bf9e;
  }
  .hero-sub {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    max-width: 440px;
    margin-bottom: var(--sp-xl);
    line-height: 1.6;
  }
  .hero-actions {
    display: flex;
    gap: var(--sp-md);
    flex-wrap: wrap;
  }
  .btn-primary { height: 48px; }
  .btn-ghost { height: 48px; }


  /* ─── SUPPORTING SECTION ─── */
  .supporting {
    padding: var(--sp-xl) 0 var(--sp-section);
  }
  .supporting-header {
    text-align: center;
    max-width: 580px;
    margin: 0 auto var(--sp-xxl);
  }
  .supporting-header p {
    margin-top: var(--sp-md);
    font-size: 17px;
    color: var(--muted);
    line-height: 1.6;
  }
  .tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
  }
  .tile {
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
  }
  .tile:hover { transform: translateY(-4px); }
  .tile-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--surface-card);
    position: relative;
  }
  .tile-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
  }
  .tile:hover .tile-img img { transform: scale(1.04); }
  .tile-img-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
  }
  .tile-body {
    padding: var(--sp-lg);
    background: var(--surface-card);
    flex: 1;
  }
  .tile-body h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .tile-body p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
  }
  /* Tile colour variants */
  .tile-forest .tile-body { background: var(--brand-forest); }
  .tile-forest .tile-body h3,
  .tile-forest .tile-body p { color: rgba(255,255,255,0.9); }
  .tile-sage .tile-body { background: var(--brand-sage); }
  .tile-sage .tile-body h3,
  .tile-sage .tile-body p { color: rgba(255,255,255,0.95); }
  .tile-bark .tile-body { background: var(--brand-bark); }
  .tile-bark .tile-body h3,
  .tile-bark .tile-body p { color: rgba(255,255,255,0.9); }

  /* ─── ABOUT BAND ─── */
  .about-band {
    background: var(--surface-soft);
    padding: var(--sp-section) 0;
  }
  .about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .about-copy p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--body);
    margin-bottom: var(--sp-md);
  }
  .about-copy p:first-child {
    font-size: 19px;
    color: var(--body-strong);
    line-height: 1.6;
  }
  .btn-ink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: var(--on-primary);
    padding: 13px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: var(--sp-lg);
    transition: opacity 0.2s;
  }
  .btn-ink:hover { opacity: 0.8; }
  .about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
  }
  .stat-card {
    background: var(--canvas);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
    border: 1px solid var(--hairline);
  }
  .stat-card .number {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -1.5px;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-card .label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
  }
  .stat-card.accent {
    background: var(--brand-forest);
    border-color: var(--brand-forest);
  }
  .stat-card.accent .number,
  .stat-card.accent .label { color: rgba(255,255,255,0.9); }

  /* ─── FEATURED SECTION ─── */
  .featured {
    padding: var(--sp-section) 0;
  }
  .featured-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--sp-xxl);
  }
  .featured-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
  }
  .feat-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    text-decoration: none;
    transition: transform 0.25s;
    position: relative;
  }
  .feat-card:hover { transform: translateY(-4px); }
  .feat-card-photo {
    width: 100%;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-card);
  }
  .feat-card-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s;
    display: block;
  }
  .feat-card:hover .feat-card-photo img { transform: scale(1.05); }
  .feat-card-photo.gift-bg {
    background: var(--surface-card);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .feat-card-photo.gift-bg img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    inset: 0;
  }
  .feat-card-photo.gift-bg .gift-icon {
    width: 180px;
    height: 180px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  }
  .feat-card-body {
    padding: var(--sp-xl);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .feat-card h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin-bottom: var(--sp-sm);
  }
  .feat-card p {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.85;
    flex: 1;
  }
  .feat-card-icon {
    font-size: 42px;
    margin-bottom: var(--sp-md);
    line-height: 1;
  }
  .feat-card .arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-top: var(--sp-md);
    opacity: 0.9;
  }
  /* Feature card colour variants */
  .fc-forest { background: var(--brand-forest); color: #fff; }
  .fc-terra  { background: var(--brand-terra);  color: #fff; }
  .fc-wheat  { background: var(--brand-wheat);  color: var(--ink); }
  .fc-wheat p, .fc-wheat .arrow { color: rgba(51,72,50,0.75); }
  .fc-fern   { background: var(--brand-fern);   color: var(--ink); }
  .fc-fern p, .fc-fern .arrow { color: rgba(15,31,16,0.7); }
  .fc-cream  { background: var(--surface-card);  color: var(--ink); border: 1px solid var(--hairline); }
  .fc-gift   { background: var(--surface-soft);  color: var(--ink); }
  .fc-gift p, .fc-gift .arrow { color: rgba(51,72,50,0.75); }

  /* ─── IMAGE BAND ─── */
  .image-band {
    height: 400px;
    overflow: hidden;
    position: relative;
  }
  .image-band img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .image-band-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--brand-forest) 0%, var(--brand-moss) 50%, var(--brand-sage) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--sp-md);
  }
  .image-band-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(51,72,50,0.5) 0%, transparent 60%);
    display: flex;
    align-items: center;
  }
  .image-band-text {
    padding-left: 80px;
    max-width: 500px;
  }
  .image-band-text blockquote {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 34px);
    font-style: italic;
    font-weight: 300;
    line-height: 1.3;
    color: #fff;
    letter-spacing: -0.5px;
  }
  .image-band-text cite {
    display: block;
    margin-top: var(--sp-md);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    font-style: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* ─── STAY CONNECTED / CTA BAND ─── */
  .cta-band {
    background: var(--surface-soft);
    border-radius: var(--radius-xl);
    margin: var(--sp-section) var(--sp-xl);
    padding: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .cta-band h2 {
    margin-bottom: var(--sp-md);
  }
  .cta-band p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 400px;
  }
  .email-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
  }
  .form-row {
    display: flex;
    gap: var(--sp-sm);
  }
  .form-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    font-size: 13px;
    color: var(--muted);
  }
  .form-consent input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--brand-moss);
    flex-shrink: 0;
  }
  .cta-badges {
    display: flex;
    gap: var(--sp-sm);
    margin-top: var(--sp-lg);
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-badge { animation: fadeUp 0.6s ease 0.1s both; }
  .hero-title  { animation: fadeUp 0.6s ease 0.25s both; }
  .hero-sub    { animation: fadeUp 0.6s ease 0.4s both; }
  .hero-actions{ animation: fadeUp 0.6s ease 0.55s both; }

  /* ─── TABLET (≤1024px) ─── */
  @media (max-width: 1024px) {
    .tiles-grid,
    .featured-cards { grid-template-columns: 1fr 1fr; }
    .about-inner,
    .cta-band { grid-template-columns: 1fr; gap: var(--sp-xxl); }
    .cta-band { padding: var(--sp-xxl) 40px; }
  }

  /* ─── MOBILE (≤768px) ─── */
  @media (max-width: 768px) {
    /* Hero */
    .hero { height: auto; min-height: 360px; }
    .hero-content {
      padding-left: var(--sp-lg);
      padding-right: var(--sp-lg);
      padding-bottom: var(--sp-lg);
    }
    .hero-badge { font-size: 10px; padding: 6px 12px; letter-spacing: 1px; margin-top: 18px; text-align: center; display: flex; align-items: center; justify-content: center; }
    .hero-title { font-size: clamp(32px, 9vw, 48px); letter-spacing: -1px; margin-bottom: 12px; }
    .hero-sub { font-size: 15px; margin-bottom: var(--sp-lg); }
    .hero-actions { flex-direction: column; gap: 10px; }
    .btn-primary, .btn-ghost { width: 100%; justify-content: center; }

    /* Supporting tiles */
    .supporting { padding-top: var(--sp-lg); }
    .tiles-grid { grid-template-columns: 1fr; }
    .supporting-header p { font-size: 15px; }

    /* About */
    .about-stats { grid-template-columns: 1fr; }
    .about-copy p { font-size: 15px; }

    /* Image band */
    .image-band { height: 300px; }
    .image-band-text { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
    .image-band-text blockquote { font-size: clamp(16px, 4vw, 22px); }

    /* Featured */
    .featured-cards { grid-template-columns: 1fr; }
    .featured-header { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
    .feat-card { min-height: auto; }

    /* CTA band */
    .cta-band {
      margin: var(--sp-section) var(--sp-lg);
      padding: var(--sp-xxl) var(--sp-lg);
      gap: var(--sp-xxl);
    }
    .cta-badges { gap: 6px; }

    /* Email form */
    .form-row { flex-direction: column; }
    .email-input { width: 100%; }
    .btn-subscribe { width: 100%; height: 48px; }
  }


/* ===== our-roots ===== */
  :root { --brand-bark: #5a7259; }

  /* ─── FOUNDER SECTION ─── */
  .founder-section { padding: var(--sp-section) 0; }
  .founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .founder-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
  .founder-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
  .founder-copy p.lead { font-size: 18px; color: var(--body-strong); }
  .founder-img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-card); }
  .founder-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

  /* ─── QUOTE BAND ─── */
  .quote-band { background: var(--brand-forest); padding: 72px 0; position: relative; overflow: hidden; }
  .quote-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(168,191,158,0.08) 0%, transparent 70%); }
  .quote-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; padding: 0 var(--sp-xl); }
  .quote-mark { font-family: var(--font-display); font-size: 80px; line-height: 0.6; color: rgba(168,191,158,0.3); margin-bottom: var(--sp-lg); display: block; }
  .quote-inner blockquote { font-family: var(--font-display); font-size: clamp(20px, 3vw, 30px); font-style: italic; font-weight: 300; line-height: 1.45; color: rgba(255,255,255,0.92); letter-spacing: -0.3px; margin-bottom: var(--sp-lg); }
  .quote-inner cite { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-fern); font-style: normal; }

  /* ─── GROWTH SECTION ─── */
  .growth-section { padding: var(--sp-section) 0; background: var(--surface-soft); }
  .growth-header { max-width: 640px; margin-bottom: var(--sp-xxl); }
  .growth-header h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-md); }
  .growth-header p { font-size: 17px; color: var(--muted); line-height: 1.7; }
  .growth-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
  .growth-card { background: var(--canvas); border-radius: var(--radius-xl); padding: var(--sp-xl); border: 1px solid var(--hairline); }
  .growth-card-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: var(--sp-lg); }
  .icon-green { background: rgba(168,191,158,0.25); }
  .icon-brown { background: rgba(212,168,90,0.2); }
  .growth-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -0.2px; color: var(--ink); margin-bottom: var(--sp-sm); }
  .growth-card p { font-size: 15px; color: var(--muted); line-height: 1.65; }

  /* ─── SUSTAINABILITY SECTION ─── */
  .sustain-section { padding: var(--sp-section) 0; }
  .sustain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .sustain-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
  .sustain-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
  .sustain-list { display: flex; flex-direction: column; gap: var(--sp-md); }
  .sustain-item { display: flex; gap: var(--sp-md); align-items: flex-start; }
  .sustain-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-moss); margin-top: 8px; flex-shrink: 0; }
  .sustain-item-text { font-size: 15px; color: var(--body); line-height: 1.6; }
  .sustain-item-text strong { color: var(--ink); font-weight: 600; }

  /* ─── LOOKING FORWARD (dark band) ─── */
  .forward-band { background: var(--brand-forest); padding: var(--sp-section) 0; position: relative; overflow: hidden; }
  .forward-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 10% 50%, rgba(168,191,158,0.07) 0%, transparent 70%); }
  .forward-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); }
  .forward-copy .section-label { color: var(--brand-fern); }
  .forward-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: #fff; margin-bottom: var(--sp-lg); }
  .forward-copy p { font-size: 16px; color: rgba(255,255,255,0.72); line-height: 1.75; margin-bottom: var(--sp-md); }
  .forward-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--on-primary); color: var(--ink); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; margin-top: var(--sp-lg); transition: opacity 0.2s; }
  .forward-cta:hover { opacity: 0.88; }
  .forward-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
  .fwd-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: var(--sp-xl); }
  .fwd-stat .num { font-family: var(--font-display); font-size: 42px; font-weight: 400; letter-spacing: -1.5px; color: #fff; line-height: 1; margin-bottom: 6px; }
  .fwd-stat .lbl { font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 500; }
  .fwd-stat.accent { background: rgba(168,191,158,0.12); border-color: rgba(168,191,158,0.25); }
  .fwd-stat.accent .num { color: var(--brand-fern); }

  /* Stats grid in forward band */
  .forward-band .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
  .forward-band .stat-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); box-shadow: none; }
  .forward-band .stat-card .number { color: #fff; }
  .forward-band .stat-card .label { color: rgba(255,255,255,0.72); }
  .forward-band .stat-card .label:first-of-type { color: rgba(255,255,255,0.72); font-weight: 600; }
  .forward-band .stat-card.accent { background: rgba(168,191,158,0.12); border-color: rgba(168,191,158,0.25); }
  .forward-band .stat-card.accent .number { color: var(--brand-fern); }

  /* ─── CLOSING PROMISE ─── */
  .promise-band { padding: 64px 0; text-align: center; background: var(--surface-soft); border-top: 1px solid var(--hairline); }
  .promise-band p { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); font-style: italic; font-weight: 300; color: var(--ink); letter-spacing: -0.3px; max-width: 680px; margin: 0 auto var(--sp-xl); line-height: 1.5; }
  .promise-band a { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--on-primary); padding: 13px 28px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
  .promise-band a:hover { opacity: 0.85; }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .founder-grid, .sustain-grid, .forward-inner { grid-template-columns: 1fr; gap: var(--sp-xxl); }
  }
  @media (max-width: 768px) {
    .page-header { padding: 48px 0 40px; }
    .page-header-inner { padding: 0 var(--sp-lg); }
    .growth-cards { grid-template-columns: 1fr; }
    .forward-stats, .forward-band .stats-grid { grid-template-columns: 1fr; }
  }

/* ===== planting-aftercare ===== */


/* ===== selecting ===== */


/* ===== shop ===== */

  /* ─── SHOP HEADER ─── */
  .shop-header {
    padding: 48px 0 40px;
    border-bottom: 1px solid var(--hairline);
  }
  .shop-header-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-xl);
    flex-wrap: wrap;
  }
  .shop-header h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--ink);
  }
  .shop-header h1 em { font-style: italic; color: var(--brand-sage); }
  .shop-header p {
    font-size: 16px;
    color: var(--muted);
    margin-top: 10px;
    max-width: 480px;
    line-height: 1.6;
  }
  .shop-badges {
    display: flex;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .shop-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--body-strong);
  }

  /* ─── ECWID WRAPPER ─── */
  .shop-widget {
    padding: 48px 0;
    min-height: 600px;
  }

  /* Ecwid overrides — keep it on-brand */
  .ec-store { font-family: var(--font-body) !important; }
  #my-store-73482057 { width: 100%; }

  /* ─── DISPATCH BAND ─── */
  .dispatch-band {
    background: var(--surface-soft);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 56px 0;
  }
  .dispatch-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-xl);
    align-items: start;
  }
  .dispatch-intro h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin-bottom: var(--sp-md);
    line-height: 1.1;
  }
  .dispatch-intro p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
  }
  .dispatch-card {
    background: var(--canvas);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
    border: 1px solid var(--hairline);
    display: flex;
    gap: var(--sp-md);
    align-items: flex-start;
  }
  .dispatch-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: rgba(168,191,158,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .dispatch-card h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .dispatch-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }

  /* ─── HELP BAND ─── */
  .help-band {
    padding: 56px 0;
  }
  .help-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .help-copy h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin-bottom: var(--sp-md);
    line-height: 1.1;
  }
  .help-copy p { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: var(--sp-md); }
  .help-actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; margin-top: var(--sp-lg); }
  .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--on-primary); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
  .btn-primary:hover { opacity: 0.85; }
  .btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--ink); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--hairline); transition: border-color 0.2s; }
  .btn-outline:hover { border-color: var(--muted); }
  .help-details { display: flex; flex-direction: column; gap: var(--sp-md); }
  .help-detail { display: flex; gap: var(--sp-md); align-items: flex-start; background: var(--surface-soft); border-radius: var(--radius-lg); padding: var(--sp-lg); border: 1px solid var(--hairline); }
  .help-detail-icon { font-size: 20px; flex-shrink: 0; }
  .help-detail-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
  .help-detail-text a, .help-detail-text span { font-size: 14px; color: var(--muted); text-decoration: none; }
  .help-detail-text a:hover { color: var(--ink); }


  /* ─── RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .dispatch-inner { grid-template-columns: 1fr 1fr; }
    .dispatch-intro { grid-column: 1 / -1; }
    .help-inner { grid-template-columns: 1fr; gap: var(--sp-xxl); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  }
  @media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }
    .nav-inner { grid-template-rows: auto; }
    .mobile-menu { top: 64px; }
    .container { padding: 0 var(--sp-lg); }
    .ukisg-banner { font-size: 11px; padding: 10px var(--sp-lg); }
    .shop-header { padding: 32px 0 28px; }
    .shop-header-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-lg); }
    .dispatch-inner { grid-template-columns: 1fr; }
    .dispatch-intro { grid-column: auto; }
    .help-actions { flex-direction: column; }
    .btn-primary, .btn-outline { width: 100%; justify-content: center; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-inner { padding: 0 var(--sp-lg); }
    footer { padding: 40px 0 24px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  }


/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER — shared across inner pages
═══════════════════════════════════════════════════════════════ */
.page-header { background: var(--brand-forest); padding: 64px 0 56px; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(51,72,50,0.85) 0%, rgba(51,72,50,0.4) 100%); }
.page-header-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); }
.page-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-fern); margin-bottom: 12px; display: block; }
.page-header h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); font-weight: 300; line-height: 1.05; letter-spacing: -1.5px; color: #fff; margin-bottom: 12px; }
.page-header h1 em { font-style: italic; color: var(--brand-fern); }
.page-header p { font-size: 16px; color: rgba(255,255,255,0.72); max-width: 560px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════════════════════════ */
.callout-green { background: rgba(168,191,158,0.15); border: 1px solid rgba(168,191,158,0.35); border-radius: var(--radius-lg); padding: var(--sp-lg) var(--sp-xl); display: flex; gap: var(--sp-md); align-items: flex-start; margin-top: var(--sp-lg); }
.callout-green-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.callout-green p { font-size: 14px; color: var(--body-strong); line-height: 1.6; margin: 0; }
.callout-green p strong { color: var(--ink); }

.divider { border: none; border-top: 1px solid var(--hairline); margin: 0; }

.page-cta { background: var(--surface-soft); border-radius: var(--radius-xl); padding: 64px; text-align: center; margin: var(--sp-section) 0; }
.page-cta h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 400; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-md); }
.page-cta p { font-size: 16px; color: var(--muted); max-width: 500px; margin: 0 auto var(--sp-xl); line-height: 1.65; }
.page-cta-actions { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }

.btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--ink); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--hairline); transition: border-color 0.2s; }
.btn-outline:hover { border-color: var(--muted); }
.btn-white { display: inline-flex; align-items: center; gap: 8px; background: var(--on-primary); color: var(--ink); padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
.btn-white:hover { opacity: 0.9; }
.btn-ghost-dark { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 13px 24px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.18); }

/* ═══════════════════════════════════════════════════════════════
   GALLERY PAGE
═══════════════════════════════════════════════════════════════ */
.gallery-section { padding: var(--sp-section) 0; }
.masonry { columns: 3; column-gap: var(--sp-md); max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xl); }
.masonry-item { break-inside: avoid; margin-bottom: var(--sp-md); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; position: relative; background: var(--surface-card); }
.masonry-item img { width: 100%; height: auto; display: block; transition: transform 0.5s ease, filter 0.3s ease; filter: saturate(0.95); }
.masonry-item:hover img { transform: scale(1.03); filter: saturate(1.1); }
.masonry-item-overlay { position: absolute; inset: 0; background: rgba(51,72,50,0); transition: background 0.3s ease; display: flex; align-items: center; justify-content: center; }
.masonry-item:hover .masonry-item-overlay { background: rgba(51,72,50,0.18); }
.masonry-item-overlay svg { opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.masonry-item:hover .masonry-item-overlay svg { opacity: 1; transform: scale(1); }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(15,25,16,0.96); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: var(--sp-xl); }
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox-inner { position: relative; max-width: 1100px; max-height: 90vh; width: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox-img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 32px 80px rgba(0,0,0,0.6); display: block; transition: opacity 0.25s ease; }
.lightbox-img.loading { opacity: 0; }
.lightbox-close { position: fixed; top: var(--sp-xl); right: var(--sp-xl); width: 44px; height: 44px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.2s; z-index: 1001; }
.lightbox-close:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.2s; z-index: 1001; }
.lightbox-prev { left: var(--sp-xl); }
.lightbox-next { right: var(--sp-xl); }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.22); }
.lightbox-counter { position: fixed; bottom: var(--sp-xl); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.55); letter-spacing: 1px; z-index: 1001; }
.lightbox-thumbs { position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1001; }
.lightbox-thumb { width: 48px; height: 36px; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: 0.45; border: 2px solid transparent; transition: opacity 0.2s, border-color 0.2s; flex-shrink: 0; }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-thumb.active { opacity: 1; border-color: var(--brand-fern); }
.lightbox-thumb:hover { opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════
   GROW STRONG PAGE
═══════════════════════════════════════════════════════════════ */
.intro-band { padding: var(--sp-section) 0; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.intro-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 42px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
.intro-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
.intro-copy p.lead { font-size: 18px; color: var(--body-strong); }
.intro-img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; }
.intro-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-img-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: var(--sp-md); }
.intro-img-grid .photo-main { grid-column: 1 / -1; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; }
.intro-img-grid .photo-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.intro-img-grid .photo-main:hover img { transform: scale(1.03); }
.intro-img-grid .photo-sub { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.intro-img-grid .photo-sub img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.intro-img-grid .photo-sub:hover img { transform: scale(1.04); }
.pillars { padding: var(--sp-section) 0; background: var(--surface-soft); }
.pillars-header { text-align: center; max-width: 600px; margin: 0 auto var(--sp-xxl); }
.pillars-header h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-md); }
.pillars-header p { font-size: 17px; color: var(--muted); line-height: 1.65; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.pillar-card { background: var(--canvas); border-radius: var(--radius-xl); padding: var(--sp-xl); border: 1px solid var(--hairline); }
.pillar-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: var(--sp-lg); }
.pi-green { background: rgba(168,191,158,0.25); }
.pi-brown { background: rgba(212,168,90,0.2); }
.pi-terra { background: rgba(201,107,61,0.15); }
.pillar-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 400; color: var(--ink); letter-spacing: -0.2px; margin-bottom: var(--sp-sm); }
.pillar-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }
.pruning { padding: var(--sp-section) 0; }
.pruning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.pruning-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
.pruning-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
.pruning-steps { display: flex; flex-direction: column; gap: var(--sp-lg); }
.pruning-steps .step { display: flex; gap: var(--sp-lg); align-items: flex-start; }
.pruning-steps .step-num { font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--brand-fern); line-height: 1; flex-shrink: 0; width: 40px; }
.pruning-steps .step-body h4 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.pruning-steps .step-body p { font-size: 15px; color: var(--muted); line-height: 1.6; }
.sustain { padding: var(--sp-section) 0; background: var(--brand-forest); position: relative; overflow: hidden; }
.sustain::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 90% 50%, rgba(168,191,158,0.07) 0%, transparent 70%); }
.sustain-inner { position: relative; z-index: 2; }
.sustain-header { margin-bottom: var(--sp-xxl); }
.sustain-header .section-label { color: var(--brand-fern); }
.sustain-header h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: #fff; margin-bottom: var(--sp-md); }
.sustain-header p { font-size: 17px; color: rgba(255,255,255,0.65); max-width: 560px; line-height: 1.65; }
.sustain-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
.sustain-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: var(--sp-xl); }
.sustain-card h4 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.sustain-card p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.65; }
.sustain-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-fern); margin-bottom: var(--sp-md); }
.sustain-legacy { margin-top: var(--sp-xxl); padding-top: var(--sp-xxl); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: center; }
.sustain-legacy p { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); font-style: italic; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.5; letter-spacing: -0.3px; max-width: 700px; text-align: center; margin: 0; }
.certs { padding: var(--sp-section) 0; }
.certs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.cert-card { border-radius: var(--radius-xl); padding: var(--sp-xl); }
.cert-card.bs { background: var(--surface-soft); border: 1px solid var(--hairline); }
.cert-card.ukisg { background: var(--brand-forest); color: #fff; }
.cert-badge-large { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: var(--sp-lg); }
.badge-bs { background: var(--surface-card); color: var(--ink); border: 1px solid var(--hairline); }
.badge-ukisg { background: rgba(168,191,158,0.2); color: var(--brand-fern); border: 1px solid rgba(168,191,158,0.3); }
.cert-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.3px; margin-bottom: var(--sp-md); }
.cert-card.bs h3 { color: var(--ink); }
.cert-card.ukisg h3 { color: #fff; }
.cert-card p { font-size: 15px; line-height: 1.7; }
.cert-card.bs p { color: var(--muted); }
.cert-card.ukisg p { color: rgba(255,255,255,0.7); }
.cert-highlights { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-lg); }
.cert-pill { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: var(--radius-pill); }
.pill-light { background: var(--canvas); border: 1px solid var(--hairline); color: var(--body-strong); }
.pill-dark { background: rgba(168,191,158,0.15); border: 1px solid rgba(168,191,158,0.3); color: var(--brand-fern); }
.cta-band { background: var(--surface-soft); border-radius: var(--radius-xl); margin: var(--sp-section) var(--sp-xl); padding: 80px; text-align: center; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 400; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-md); }
.cta-band p { font-size: 17px; color: var(--muted); max-width: 520px; margin: 0 auto var(--sp-xl); line-height: 1.65; }
.cta-actions { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   HOW WE GROW OUR TREES PAGE
═══════════════════════════════════════════════════════════════ */
.content-section { padding: var(--sp-section) 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }
.copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
.copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
.copy p:last-child { margin-bottom: 0; }
.copy p.lead { font-size: 18px; color: var(--body-strong); }
.photo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.photo-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.photo-item { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); }
.photo-grid-3 .photo-item, .photo-grid-2x2 .photo-item { aspect-ratio: 4/3; }
.photo-item.wide { aspect-ratio: 16/7; grid-column: 1 / -1; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.photo-item:hover img { transform: scale(1.04); }
.callout-dark { background: var(--brand-forest); border-radius: var(--radius-xl); padding: var(--sp-xxl) var(--sp-xl); margin-top: var(--sp-xxl); position: relative; overflow: hidden; }
.callout-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 90% 50%, rgba(168,191,158,0.07) 0%, transparent 70%); }
.callout-dark .section-label { color: var(--brand-fern); position: relative; z-index: 2; }
.callout-dark p { font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.75; position: relative; z-index: 2; }
.callout-dark p.lead { font-size: 18px; color: rgba(255,255,255,0.92); margin-bottom: var(--sp-md); }

/* ═══════════════════════════════════════════════════════════════
   PLANTING & AFTERCARE PAGE
═══════════════════════════════════════════════════════════════ */
.guide-layout { padding: var(--sp-xxl) 0; }
.guide-grid { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
.guide-nav { position: sticky; top: 88px; height: auto; border-bottom: none; background: transparent; }
.guide-nav-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-md); }
.guide-nav ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.guide-nav a { display: block; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--muted); padding: 8px 12px; border-radius: var(--radius-md); transition: background 0.15s, color 0.15s; }
.guide-nav a:hover { color: var(--ink); background: var(--surface-soft); }
.guide-nav a.active { color: var(--ink); background: var(--surface-card); }
.guide-content { display: flex; flex-direction: column; gap: var(--sp-xl); }
.guide-layout .guide-section { scroll-margin-top: 88px; }
.guide-section-header { display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-xl); padding-bottom: var(--sp-lg); border-bottom: 1px solid var(--hairline); }
.guide-section-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.gi-green { background: rgba(168,191,158,0.25); }
.gi-brown { background: rgba(212,168,90,0.2); }
.gi-blue  { background: rgba(90,114,169,0.15); }
.gi-terra { background: rgba(201,107,61,0.15); }
.guide-section-header h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 400; letter-spacing: -0.5px; color: var(--ink); line-height: 1.1; }
.steps { display: flex; flex-direction: column; gap: var(--sp-lg); }
.step-card { background: var(--surface-soft); border-radius: var(--radius-xl); padding: var(--sp-xl); display: flex; gap: var(--sp-lg); align-items: flex-start; border: 1px solid var(--hairline); }
.step-card .step-num { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--brand-fern); line-height: 1; flex-shrink: 0; width: 36px; }
.step-card .step-body h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.step-card .step-body p { font-size: 15px; color: var(--muted); line-height: 1.65; }
.tip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.tip-card { background: var(--surface-soft); border-radius: var(--radius-lg); padding: var(--sp-lg); border: 1px solid var(--hairline); }
.tip-card h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.tip-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.info-band { background: var(--brand-forest); border-radius: var(--radius-xl); padding: var(--sp-xl); }
.info-band p { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.7; }
.info-band p.lead { font-size: 17px; color: rgba(255,255,255,0.92); margin-bottom: var(--sp-md); }
.info-band .section-label { color: var(--brand-fern); }
.callout { background: rgba(168,191,158,0.15); border: 1px solid rgba(168,191,158,0.35); border-radius: var(--radius-lg); padding: var(--sp-lg) var(--sp-xl); display: flex; gap: var(--sp-md); align-items: flex-start; }
.callout-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.callout p { font-size: 14px; color: var(--body-strong); line-height: 1.6; }
.callout p strong { color: var(--ink); }
.guide-divider { border: none; border-top: 1px solid var(--hairline); margin: 0; }
.social-cta { background: var(--surface-soft); border-radius: var(--radius-xl); padding: var(--sp-xxl) var(--sp-xl); text-align: center; border: 1px solid var(--hairline); }
.social-cta h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -0.3px; color: var(--ink); margin-bottom: var(--sp-md); }
.social-cta p { font-size: 15px; color: var(--muted); line-height: 1.65; max-width: 480px; margin: 0 auto var(--sp-xl); }
.social-cta-actions { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   SELECTING A TREE PAGE
═══════════════════════════════════════════════════════════════ */
.guide-section { padding: var(--sp-xxl) 0; }
.guide-section.alt { background: var(--surface-soft); }
.guide-block { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.guide-block.reverse { direction: rtl; }
.guide-block.reverse > * { direction: ltr; }
.guide-copy h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 38px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
.guide-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
.guide-copy p:last-child { margin-bottom: 0; }
.guide-copy p.lead { font-size: 18px; color: var(--body-strong); }
.guide-img { border-radius: var(--radius-xl); overflow: visible; background: var(--surface-card); position: relative; }
.guide-img img { width: 100%; display: block; object-fit: contain; transition: transform 0.35s ease; cursor: zoom-in; border-radius: var(--radius-xl); }
.guide-img:hover img { transform: scale(1.07); }
.guide-img::after { content: 'Double click to enlarge'; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(0,0,0,0.85); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 10; }
.guide-img:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.tips-list { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-lg); }
.tip-item { display: flex; gap: var(--sp-md); align-items: flex-start; padding: var(--sp-md) var(--sp-lg); background: var(--canvas); border-radius: var(--radius-lg); border: 1px solid var(--hairline); }
.tip-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-moss); margin-top: 7px; flex-shrink: 0; }
.tip-item p { font-size: 14px; color: var(--body); line-height: 1.6; margin: 0; }
.tip-item p strong { color: var(--ink); }
.help-band { background: var(--brand-forest); border-radius: var(--radius-xl); margin: var(--sp-section) var(--sp-xl); padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; overflow: hidden; }
.help-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 90% 50%, rgba(168,191,158,0.07) 0%, transparent 70%); }
.help-band .btn-outline { color: #fff; border-color: rgba(255,255,255,0.35); }
.help-band .btn-outline:hover { border-color: rgba(255,255,255,0.65); }
.help-copy { position: relative; z-index: 2; }
.help-copy .section-label { color: var(--brand-fern); }
.help-copy h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 400; letter-spacing: -0.5px; color: #fff; margin-bottom: var(--sp-md); line-height: 1.1; }
.help-copy p { font-size: 16px; color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: var(--sp-lg); }
.help-actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.help-details { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--sp-md); }
.help-detail { display: flex; gap: var(--sp-md); align-items: flex-start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: var(--sp-lg); }
.help-detail-icon { font-size: 18px; flex-shrink: 0; }
.help-detail-text strong { display: block; font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.help-detail-text a, .help-detail-text span { font-size: 14px; color: rgba(255,255,255,0.75); text-decoration: none; }
.help-detail-text a:hover { color: #fff; }
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-xl); box-shadow: 0 32px 80px rgba(0,0,0,0.5); animation: lb-in 0.25s ease; }
.lightbox-overlay .lightbox-close { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 22px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; transition: background 0.2s; }
.lightbox-overlay .lightbox-close:hover { background: rgba(255,255,255,0.25); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

/* ═══════════════════════════════════════════════════════════════
   SERVICES WE PROVIDE PAGE
═══════════════════════════════════════════════════════════════ */
.intro-section { padding: var(--sp-section) 0; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.photo-pair .photo-item { aspect-ratio: 3/4; }
.services-section { padding: var(--sp-section) 0; }
.services-section.alt { background: var(--surface-soft); }
.service-block { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.service-block.reverse { direction: rtl; }
.service-block.reverse > * { direction: ltr; }
.service-copy h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 38px); font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-lg); }
.service-copy p { font-size: 16px; color: var(--body); line-height: 1.75; margin-bottom: var(--sp-md); }
.service-copy p:last-child { margin-bottom: 0; }
.service-points { display: flex; flex-direction: column; gap: var(--sp-md); margin-top: var(--sp-xl); }
.service-point { display: flex; gap: var(--sp-md); align-items: flex-start; background: var(--canvas); border-radius: var(--radius-lg); padding: var(--sp-lg); border: 1px solid var(--hairline); }
.service-point-icon { font-size: 20px; flex-shrink: 0; }
.service-point-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.service-point-text span { font-size: 14px; color: var(--muted); line-height: 1.55; }
.photo-3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.photo-3-grid .photo-wide { grid-column: 1 / -1; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; }
.photo-3-grid .photo-wide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.photo-3-grid .photo-wide:hover img { transform: scale(1.03); }
.photo-3-grid .photo-sq { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.photo-3-grid .photo-sq img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.photo-3-grid .photo-sq:hover img { transform: scale(1.04); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — page-specific breakpoints
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .masonry { columns: 2; }
  .intro-grid, .pruning-grid, .service-block { grid-template-columns: 1fr; gap: var(--sp-xxl); }
  .service-block.reverse { direction: ltr; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .sustain-cards { grid-template-columns: 1fr 1fr; }
  .certs-grid { grid-template-columns: 1fr; }
  .cta-band { padding: var(--sp-xxl) var(--sp-xl); }
  .two-col { grid-template-columns: 1fr; gap: var(--sp-xxl); }
  .two-col.reverse { direction: ltr; }
  .guide-grid { grid-template-columns: 1fr; gap: var(--sp-xxl); }
  .guide-nav { position: static; }
  .guide-nav ul { flex-direction: row; flex-wrap: wrap; }
  .guide-nav a { border-left: none; border-bottom: none; }
  .guide-nav a.active { border-left-color: transparent; }
  .guide-block { grid-template-columns: 1fr; gap: var(--sp-xxl); }
  .guide-block.reverse { direction: ltr; }
  .help-band { grid-template-columns: 1fr; gap: var(--sp-xxl); padding: var(--sp-xxl) var(--sp-xl); }
}

@media (max-width: 768px) {
  .page-header { padding: 48px 0 40px; }
  .page-header-inner { padding: 0 var(--sp-lg); }
  .masonry { columns: 2; padding: 0 var(--sp-lg); }
  .lightbox-prev { left: var(--sp-sm); }
  .lightbox-next { right: var(--sp-sm); }
  .lightbox-thumbs { display: none; }
  .pillars-grid { grid-template-columns: 1fr; }
  .sustain-cards { grid-template-columns: 1fr; }
  .cta-band { margin: var(--sp-section) var(--sp-md); padding: var(--sp-xxl) var(--sp-lg); }
  .cta-actions { flex-direction: column; align-items: center; }
  .photo-grid-3 { grid-template-columns: 1fr 1fr; }
  .page-cta { padding: var(--sp-xxl) var(--sp-lg); }
  .page-cta-actions, .cta-actions { flex-direction: column; align-items: center; }
  .btn-primary, .btn-outline, .btn-white, .btn-ghost-dark { width: 100%; justify-content: center; }
  .tip-grid { grid-template-columns: 1fr; }
  .step-card { flex-direction: column; gap: var(--sp-sm); }
  .step-card .step-num { width: auto; }
  .social-cta-actions { flex-direction: column; align-items: center; }
  .help-band { margin: var(--sp-section) var(--sp-md); padding: var(--sp-xxl) var(--sp-lg); }
  .help-actions { flex-direction: column; }
}

@media (max-width: 480px) {
  .masonry { columns: 1; }
  .photo-grid-3, .photo-grid-2x2 { grid-template-columns: 1fr; }
  .photo-item.wide { grid-column: 1; }
  .photo-pair { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   TREE CATALOGUE PAGE
═══════════════════════════════════════════════════════════════ */

/* ── Catalogue header ── */
.cat-header {
  background: var(--brand-forest);
  color: #fff;
  padding: 64px var(--sp-xl) 48px;
  text-align: center;
}
.cat-header .page-eyebrow {
  color: var(--brand-fern);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: var(--sp-md);
}
.cat-header h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: #fff;
  margin-bottom: var(--sp-md);
}
.cat-header h1 em { font-style: italic; color: var(--brand-fern); }
.cat-header p {
  color: rgba(255,255,255,0.75);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Filter bar ── */
.ci-toolbar {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--hairline);
  padding: var(--sp-lg) var(--sp-xl);
  position: sticky;
  top: 64px;
  z-index: 50;
}
.ci-toolbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
}
.ci-toolbar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
  margin-right: 4px;
}
.ci-filter {
  background: #fff;
  border: 1px solid var(--hairline);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.ci-filter:hover { border-color: var(--brand-fern); color: var(--brand-forest); }
.ci-filter.active {
  background: var(--brand-forest);
  border-color: var(--brand-forest);
  color: #fff;
}
.ci-filter-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 8px;
  margin-left: 4px;
  display: none;
  font-family: var(--font-body);
}
.ci-filter-clear:hover { color: var(--ink); }

/* ── Results bar ── */
.ci-results-bar {
  max-width: 1240px;
  margin: var(--sp-lg) auto 0;
  padding: 0 var(--sp-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ci-count { font-size: 13px; color: var(--muted); }
.ci-count strong { color: var(--ink); }

/* ── Search ── */
.ci-search-wrap { position: relative; }
.ci-search {
  border: 1px solid var(--hairline);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 7px 14px 7px 34px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.ci-search:focus { border-color: var(--brand-fern); }
.ci-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-soft);
  pointer-events: none;
}

/* ── Grid ── */
.ci-grid {
  max-width: 1240px;
  margin: var(--sp-xl) auto var(--sp-section);
  padding: 0 var(--sp-xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
}
@media (max-width: 1100px) { .ci-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .ci-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .ci-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.ci-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.ci-card:hover {
  box-shadow: 0 8px 32px rgba(51,72,50,0.12);
  transform: translateY(-2px);
}
.ci-card.hidden { display: none; }

.ci-img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface-card);
}
.ci-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.ci-card:hover .ci-img-wrap img { transform: scale(1.04); }

.ci-body {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ci-latin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: var(--sp-sm);
}
.ci-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: auto;
  padding-bottom: var(--sp-sm);
}
.ci-tag {
  font-size: 10px;
  font-weight: 500;
  background: var(--surface-card);
  color: var(--muted);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
}
.ci-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--hairline);
  margin-top: var(--sp-sm);
}
.ci-price {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
}
.ci-out {
  font-size: 10px;
  font-weight: 500;
  color: #8b4a2a;
  background: #f5ece8;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

/* ── Empty state ── */
.ci-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 80px 0;
  display: none;
}
.ci-empty.show { display: block; }
.ci-empty p { color: var(--muted); font-size: 15px; margin-top: var(--sp-md); }