/*
 * HEALTHICAL / VISUAL REVISION 1.1
 * Faithful to Healthical Brand Kit v1.0, 23 October 2026
 * Forest #1B4D2E | Leaf #5A8F5B | Sage #A7C4A0 | Earth #8B6F47
 * Sun #E2A84A | Water #5B8FB9 | Stone #EAE6DC | Charcoal #2F3A33
 * The production logo remains the original botanical brand-kit artwork.
 */
:root {
  --forest:#1B4D2E; --leaf:#5A8F5B; --sage:#A7C4A0;
  --earth:#8B6F47; --sun:#E2A84A; --water:#5B8FB9;
  --stone:#EAE6DC; --charcoal:#2F3A33; --paper:#FAF9F5;
  --brand-spectrum:linear-gradient(to right,
    #1B4D2E 0% 12.5%, #5A8F5B 12.5% 25%,
    #A7C4A0 25% 37.5%, #8B6F47 37.5% 50%,
    #E2A84A 50% 62.5%, #5B8FB9 62.5% 75%,
    #EAE6DC 75% 87.5%, #2F3A33 87.5% 100%);
}
body { background:var(--paper); color:var(--charcoal); }
::selection { background:var(--sage); color:var(--charcoal); }

/* The exact, full-colour botanical lock-up in place of the temporary wordmark. */
.site-header {
  height:108px;
  border-bottom:1px solid #dcded5;
  background:#FCFBF7;
  box-shadow:0 5px 18px rgba(47,58,51,.035);
  padding-top:5px;
}
.site-header::before {
  content:"";
  position:absolute; z-index:2;
  left:0; right:0; top:0; height:5px;
  background:var(--brand-spectrum);
  pointer-events:none;
}
.site-header .logo { width:264px; max-width:28vw; min-width:200px; }
.site-header .logo img.brand-lockup {
  width:100%; height:auto; max-height:84px;
  display:block; object-fit:contain; object-position:left center;
  filter:none; opacity:1;
}
.main-nav a { color:var(--charcoal); }
.main-nav a:hover,.main-nav a.current {
  color:var(--forest); text-decoration:underline;
  text-decoration-thickness:2px; text-decoration-color:var(--leaf);
  text-underline-offset:9px;
}
.header-cta {
  background:var(--forest); color:#fff;
  border-color:var(--forest); padding:13px 19px;
  transition:background .2s,transform .2s;
}
.header-cta:hover { background:var(--charcoal); transform:translateY(-1px); }
.header-cta span { color:var(--sun); }

/* Editorial hero: honest natural materials, botanical motion, an optimistic sun. */
.hero-left {
  background:
    radial-gradient(circle at 91% 11%, rgba(226,168,74,.20) 0 86px,transparent 87px),
    linear-gradient(132deg,#EAE6DC 0%,#F1F2E9 51%,#E1ECDE 100%);
  isolation:isolate;
}
.hero-left::before {
  content:""; position:absolute; width:220px;height:220px;
  border:1px solid rgba(139,111,71,.21);
  border-radius:50%; top:-115px; right:-95px; pointer-events:none;
}
.hero-left::after {
  content:""; position:absolute;
  width:440px;height:440px;top:-295px;right:-255px;
  border:1px solid rgba(27,77,46,.12);border-radius:50%;pointer-events:none;
}
.hero-left .eyebrow {
  color:var(--earth); font-size:11px;
  letter-spacing:.2em;
}
.hero-left h1 { color:var(--forest); text-wrap:balance; }
.hero-left h1 em { color:var(--leaf); }
.hero-left>p:not(.eyebrow) { color:var(--charcoal); }
.hero-bottom { color:var(--earth); font-weight:700; }
.gold-dot { width:11px; height:11px; background:var(--sun); }
.hero-right { background:var(--leaf); }
.hero-right::after {
  background:linear-gradient(180deg,rgba(31,45,35,0) 31%,rgba(18,52,35,.78) 100%);
}
.hero-overlay span { padding-left:12px; border-left:3px solid var(--sun); }
.hero-overlay p { color:#fff; }
.btn-green { background:var(--forest); }
.btn-green span { color:var(--sun); }
.text-button { border-bottom:1px solid var(--earth); }

/* Distinctive brand spectrum drawn from the printed brand board. */
.mission-line {
  background:var(--stone);
  position:relative; border-color:rgba(139,111,71,.23);
}
.mission-line span:first-child { color:var(--earth); }
.mission-line span:last-child { color:var(--leaf); }
.mission-line p { color:var(--forest); }
.mission-line em { color:var(--earth); }

/* Programme routes have their own colour, rather than six identical green cards. */
.feature-card {
  background:#fff; border:1px solid #e5e4da;
  border-bottom:5px solid var(--leaf);
  box-shadow:0 15px 36px rgba(47,58,51,.04);
}
.feature-card:nth-child(2) { border-bottom-color:var(--earth); }
.feature-card:nth-child(3) { border-bottom-color:var(--water); }
.feature-card:nth-child(1) .tiny-label,.feature-card:nth-child(1) .card-go { color:var(--forest); }
.feature-card:nth-child(2) .tiny-label,.feature-card:nth-child(2) .card-go { color:var(--earth); }
.feature-card:nth-child(3) .tiny-label,.feature-card:nth-child(3) .card-go { color:#386588; }
.feature-card:nth-child(2) .feature-content { background:linear-gradient(180deg,#fff 55%,#F8F2E9); }
.feature-card:nth-child(3) .feature-content { background:linear-gradient(180deg,#fff 55%,#EAF2F6); }

/* The cycle makes four different roles legible and uses Sun, Leaf, Water, Earth. */
.ecosystem-section {
  background:linear-gradient(140deg,#E2EDDF 0%,#EAE6DC 100%);
}
.cycle-ring { border:2px dashed rgba(90,143,91,.65); }
.cycle-ring::after { border-color:rgba(139,111,71,.3); }
.cycle-node { box-shadow:0 12px 28px rgba(47,58,51,.12); }
.cycle-n1 { background:var(--sun); color:var(--charcoal); }
.cycle-n2 { background:var(--sage); color:var(--forest); border:2px solid var(--leaf); }
.cycle-n3 { background:#E4EEF5; color:#2F6187; border:2px solid var(--water); }
.cycle-n4 { background:#F1E7D7; color:#775C3A; border:2px solid var(--earth); }
.cycle-centre { color:var(--forest); }

/* Earth tells the landscape story, Water tells the engineering story. */
.split-feature { background:#F1E9DD; border-bottom:6px solid var(--earth); }
.split-content .tiny-label { color:var(--earth); }
.split-content .arrow { border-bottom-color:var(--earth); }
.split-content h3 em { color:var(--earth); }

.forest-block { background:linear-gradient(115deg,#1B4D2E 0%,#1B4D2E 57%,#214C47 100%); }
.forest-block .image-sticker {
  border-top:6px solid var(--sun);
  background:var(--stone); color:var(--forest);
  box-shadow:0 14px 35px rgba(0,0,0,.11);
}
.forest-block .image-sticker strong { color:var(--earth); }
.forest-block .status-line { color:#D3E2D0; }
.forest-block .arrow.pale { border-color:var(--water); }
.forest-block h2 em { color:var(--sage); }

.steps>* { border-top:4px solid var(--leaf); background:#EAF0E7; }
.steps>*:nth-child(2) { border-color:var(--earth); background:#F2EADF; }
.steps>*:nth-child(3) { border-color:var(--water); background:#E7F0F6; }
.steps>*:nth-child(2)>span { color:var(--earth); }
.steps>*:nth-child(3)>span { color:#3F769D; }
.steps>*:hover { box-shadow:0 12px 24px rgba(47,58,51,.11); transform:translateY(-3px); }
.steps>* { transition:transform .22s,box-shadow .22s; }

.guide-card { background:#EAF0E7; border-top:4px solid var(--leaf); }
.guide-card:nth-child(3n+2) { background:#F2EADF; border-color:var(--earth); }
.guide-card:nth-child(3n+3) { background:#E8F0F5; border-color:var(--water); }
.guide-card:nth-child(3n+2) .tiny-label { color:var(--earth); }
.guide-card:nth-child(3n+3) .tiny-label { color:#3F769D; }
.guide-card:hover { background:var(--stone); }

.cta-strip {
  background:linear-gradient(115deg,#E1EDDE 0%,#EAE6DC 100%);
  border-top:1px solid rgba(139,111,71,.24);
  border-bottom:5px solid var(--sun);
}
.cta-strip .eyebrow { color:var(--earth); }
.cta-strip .btn-green span { color:var(--sun); }

/* Reversed, approved single-colour variant on Charcoal footer. */
.footer { background:var(--charcoal); color:#fff; position:relative; }
.footer::before {
  content:""; position:absolute;top:0;left:0;right:0;height:6px;background:var(--brand-spectrum);
}
.footer-logo { filter:none; width:245px; max-width:100%; }
.footer-logo img.brand-lockup {
  width:100%; height:auto; filter:brightness(0) invert(1); opacity:.96;
}
.footer-main h3 { color:var(--sage); }
.footer-main a:not(.footer-logo):hover { color:var(--sun); }
.footer-bottom { border-top-color:rgba(167,196,160,.4); }
.footer-main>div>p,.footer-main a:not(.footer-logo) { color:#F1F4EC; }

/* Interior pages: coherent editorial template, individually themed colour cues. */
.inner-copy {
  background:linear-gradient(127deg,var(--stone),#F8F7F0);
}
.inner-copy .eyebrow { color:var(--earth); }
.inner-hero { border-bottom:1px solid #D7DDCF; }
body[data-healthical-page="grow"] .inner-copy {
  background:linear-gradient(127deg,#F1E6D7,#F7F6F0);
}
body[data-healthical-page="restore"] .inner-copy {
  background:linear-gradient(127deg,#E3EFE1,#F7F7F0);
}
body[data-healthical-page="technology"] .inner-copy {
  background:linear-gradient(127deg,#DAEBF5,#F2F6F3);
}
body[data-healthical-page="technology"] .inner-copy .eyebrow,
body[data-healthical-page="technology"] .section-heading .eyebrow {
  color:#3F739A;
}
body[data-healthical-page="learn"] .inner-copy {
  background:linear-gradient(127deg,#F6E8C8,#F8F5E9);
}
body[data-healthical-page="learn"] .inner-copy .eyebrow { color:#85602F; }
body[data-healthical-page="community"] .inner-copy { background:linear-gradient(127deg,#E4EFDF,#F4F3EA); }
body[data-healthical-page="shop"] .inner-copy { background:linear-gradient(127deg,#EFE7DD,#F7F6F0); }
body[data-healthical-page="our-work"] .inner-copy { background:linear-gradient(127deg,#E7E8E2,#F8F7F0); }

.sage-section { background:linear-gradient(135deg,#E3EEDF,#EAE6DC); }
.principles>div:nth-child(3n+1) { border-top:3px solid var(--leaf); }
.principles>div:nth-child(3n+2) { border-top:3px solid var(--earth); }
.principles>div:nth-child(3n) { border-top:3px solid var(--water); }
.system-diagram>div { background:#E7F0E6; border-color:#C7D7C5; border-top:4px solid var(--leaf); }
.system-diagram>div:nth-child(2) { background:#F2EAE0; border-color:#D4B99A; border-top-color:var(--earth); }
.system-diagram>div:nth-child(3) { background:#E3F0F5; border-color:#A8C9DD; border-top-color:var(--water); }
.system-diagram>div:nth-child(4) { background:#F9ECCF; border-color:#E7CE95; border-top-color:var(--sun); }
.system-diagram>div span { color:var(--forest); }
.rain-form { background:#E6EEE4; border-top:5px solid var(--leaf); }
.result-panel { background:linear-gradient(145deg,var(--forest),var(--charcoal)); border-top:5px solid var(--water); }
.result-mark { color:var(--water); }
.quiz { background:#E7EEE3; border-color:#B8CCB5; border-top:5px solid var(--sun); }
.quiz-progress { color:var(--earth); }
.quiz-options button.selected { background:var(--forest); border-color:var(--forest); }
.article-meta { border-bottom-color:var(--earth); }
.article-side a { color:var(--earth); }
.article-body h2 { color:var(--forest); }
.article-steps li::marker { color:var(--earth); }

/* Physical screen constraints: logo has safe clear space without crushing nav. */
@media(max-width:1180px) {
  .site-header .logo { width:218px; min-width:184px; }
  .site-header { gap:13px; }
  .main-nav { gap:10px; }
  .main-nav a { font-size:12px; }
}
@media(max-width:920px) {
  .site-header { height:96px; padding-top:5px; }
  .site-header .logo { width:235px; max-width:70vw; min-width:0; }
  .main-nav { top:96px; background:#FCFBF7; padding:28px; }
  .main-nav a:hover,.main-nav a.current { text-underline-offset:3px; }
  .hero-left::after { right:-305px; }
}
@media(max-width:600px) {
  .site-header { height:81px; padding-left:17px; padding-right:17px; }
  .site-header .logo { width:214px; max-width:67vw; }
  .site-header .logo img.brand-lockup { max-height:69px; }
  .main-nav { top:81px; }
  .hero-left { padding-top:53px; }
  .hero-left::after { width:320px;height:320px;top:-205px;right:-250px; }
  .hero-left::before { width:130px;height:130px;top:-70px;right:-90px; }
  .hero-left h1 { text-wrap:initial; }
  .cycle-node { width:89px; height:89px; }
  .cycle-n2,.cycle-n4 { top:calc(50% - 44px); }
  .cycle-n1,.cycle-n3 { left:calc(50% - 44px); }
  .image-sticker { right:10px; }
  .footer-logo { width:235px; }
}
@media(prefers-reduced-motion:reduce) {
  .steps>* { transition:none; }
  .steps>*:hover { transform:none; }
}