/* ============================================================
   SECOYA — "Deep Forest & Bark" site theme
   Forest-green led, warmed with bark browns, with the supplied
   bark/redwood photos as section backgrounds. Loads AFTER style.css.
   Long-form text stays on light sections for readability; deep
   forest / brown / photo panels carry the visual rhythm.
   ============================================================ */

:root{
  --bark-deep:#3A2A20;      /* deep bark brown */
  --bark-mid:#5C3A28;       /* bark brown */
}

body.theme-forest{background:#F1E8D8}

/* sticky header: no hard bottom line; frosted glass so the page scrolling behind looks out of focus */
.theme-forest .site-header{
  border-bottom:none;
  background:rgba(244,237,228,.62);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
}

/* ---------- GLOBAL (every page) ---------- */

/* inner-page hero → the page's OWN photo, faded under a green wash, with light text.
   Each specialism page sets --hero-img inline; others fall back to the bark texture. */
.theme-forest .page-hero:not(.page-hero--photo){
  background:linear-gradient(155deg,rgba(40,58,47,.84) 0%,rgba(38,54,44,.6) 100%),
             var(--hero-img, url("../img/bark-texture.webp")) center/cover no-repeat;
}
.theme-forest .page-hero:not(.page-hero--photo) h1{color:#fff}
.theme-forest .page-hero:not(.page-hero--photo) .eyebrow{color:var(--gold-soft)}
.theme-forest .page-hero:not(.page-hero--photo) .lead,
.theme-forest .page-hero:not(.page-hero--photo) p{color:#EFE7DA}
.theme-forest .page-hero:not(.page-hero--photo) strong{color:#fff}   /* e.g. contact "reply within two working days" */
.theme-forest .page-hero:not(.page-hero--photo) .reassure{color:#D9CBB6}
.theme-forest .page-hero:not(.page-hero--photo) a:not(.btn){color:#fff;text-decoration:underline}
.theme-forest .page-hero:not(.page-hero--photo)::after{opacity:.18}

/* CTA band → terracotta over redwood photo (brings the orange in site-wide) */
.theme-forest .cta-band{
  background:linear-gradient(150deg,rgba(178,107,62,.86) 0%,rgba(124,65,41,.92) 100%),
             url("../img/redwood-band.webp") center/cover no-repeat;
}
.theme-forest .cta-band .btn{background:#F4EDE4;color:var(--redwood-deep);border-color:#F4EDE4}
.theme-forest .cta-band .btn:hover{background:#fff;color:var(--redwood-deep)}

/* About trust band → deep forest, keep the badge cards light */
.theme-forest .creds-band{background:var(--forest)}
.theme-forest .creds-band>.wrap>.reveal :is(h2,h3){color:#fff}
.theme-forest .creds-band>.wrap>.reveal .eyebrow{color:var(--gold-soft)}
.theme-forest .creds-band>.wrap>.reveal p{color:#EFE7DA}
.theme-forest .creds-band .cred{background:rgba(255,255,255,.93);border-color:rgba(255,255,255,.5)}

/* About "My core beliefs" → solid palette boxes with light text (match the scheme, not pale tints) */
.theme-forest .approach-item{border-left:0;border-radius:14px;padding:1.4rem 1.5rem;color:#F4EDE4}
.theme-forest .approach-item h3{color:#fff}
.theme-forest .approach-item p{color:rgba(244,237,228,.9)}
.theme-forest .approach-item:nth-child(1){background:var(--forest)}
.theme-forest .approach-item:nth-child(2){background:var(--terracotta)}
.theme-forest .approach-item:nth-child(3){background:var(--mauve)}
.theme-forest .approach-item:nth-child(4){background:var(--bark)}

/* white card boxes → coloured like the core-belief boxes (palette cycle, light text) */
.theme-forest .card,.theme-forest .step{border:0}
.theme-forest .card h3,.theme-forest .card h3 a,.theme-forest .step h3{color:#fff}
.theme-forest .card h3 a:hover{color:#fff;opacity:.82}
.theme-forest .card p,.theme-forest .step p{color:rgba(244,237,228,.92)}
.theme-forest .card .more{color:#fff;text-decoration:underline;text-underline-offset:2px}
.theme-forest .card-leaf{color:rgba(255,255,255,.9)}
.theme-forest .step::before{color:rgba(255,255,255,.55)}
.theme-forest .card:nth-child(4n+1){background:var(--forest)}
.theme-forest .card:nth-child(4n+2){background:var(--terracotta)}
.theme-forest .card:nth-child(4n+3){background:var(--mauve)}
.theme-forest .card:nth-child(4n+4){background:var(--bark)}
.theme-forest .step:nth-child(3n+1){background:var(--forest)}
.theme-forest .step:nth-child(3n+2){background:var(--terracotta)}
.theme-forest .step:nth-child(3n+3){background:var(--mauve)}

/* How I Work "method" cards → same coloured-box treatment (icon badge goes translucent) */
.theme-forest .method{border:0;color:#F4EDE4}
.theme-forest .method h3{color:#fff}
.theme-forest .method p{color:rgba(244,237,228,.92)}
.theme-forest .method .method-badge{background:rgba(255,255,255,.16)!important;color:#fff;box-shadow:none!important}
.theme-forest .method::before{background:rgba(255,255,255,.45)}
.theme-forest .method:nth-child(4n+1){background:var(--forest)}
.theme-forest .method:nth-child(4n+2){background:var(--terracotta)}
.theme-forest .method:nth-child(4n+3){background:var(--mauve)}
.theme-forest .method:nth-child(4n+4){background:var(--bark)}

/* inline links inside the coloured boxes → light & underlined (were invisible on the colour) */
.theme-forest .card p a:not(.more),
.theme-forest .step p a,
.theme-forest .approach-item p a,
.theme-forest .method p a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.theme-forest .card p a:not(.more):hover,
.theme-forest .step p a:hover,
.theme-forest .approach-item p a:hover,
.theme-forest .method p a:hover{color:#fff;opacity:.82}

/* specialism photo band: warm the caption tint toward bark */
.theme-forest .issue-photo figcaption{background:linear-gradient(0deg,rgba(58,42,32,.85),rgba(58,42,32,0))}

/* ---------- HOME PAGE rhythm (scoped to .home so it never touches other pages) ----------
   <section> order: 1 hero · 2 secoya · 3 who · 4 what · 5 anna · 6 how · 7 where · 8 steps · 9 hesitant · 10 cta */
/* Home hero — full-strength wood texture with a soft cream scrim behind the text
   (texture stays full on the photo side); keeps dark text readable. */
.theme-forest.home main>section.hero{
  background:linear-gradient(96deg,rgba(247,242,233,.97) 0%,rgba(247,242,233,.93) 32%,rgba(247,242,233,.5) 48%,rgba(247,242,233,0) 62%),
             url("../img/hero-bg.webp?3") center/cover no-repeat;
}
@media(max-width:879px){
  .theme-forest.home main>section.hero{
    background:linear-gradient(rgba(247,242,233,.86) 0%,rgba(247,242,233,.7) 100%),
               url("../img/hero-bg.webp?3") center/cover no-repeat;
  }
}
.theme-forest.home main>section.hero .hero-grid{
  text-shadow:0 1px 2px rgba(247,242,233,.7);
}
.theme-forest.home main>section.hero h1{color:#1f1c18;font-weight:600}
.theme-forest.home main>section.hero .lead{color:#241f1a;font-weight:600}
.theme-forest.home main>section.hero .lead em{color:var(--ink)}
.theme-forest.home main>section.hero .reassure{color:var(--ink)}
.theme-forest.home main>section.hero .cred-strip{color:var(--ink);border-top-color:var(--sage-mist)}
.theme-forest.home main>section.hero .cred-strip strong{color:var(--ink)}
.theme-forest.home main>section.hero .cs-leaf{color:var(--forest)}
.theme-forest.home main>section.hero .btn-ghost{color:var(--sage-deep);border-color:var(--sage)}
.theme-forest.home main>section.hero .arch-caption{color:var(--forest)}
/* photo outline → dark mauve */
.theme-forest.home main>section.hero .arch-frame{border-color:var(--mauve)}
/* remove the scrim glow inherited by the hero buttons */
.theme-forest.home main>section.hero .btn,
.theme-forest.home main>section.hero .btn-ghost{text-shadow:none}

/* quote bar directly below the hero → terracotta WITH bark texture showing through */
.theme-forest.home main>.quote-banner.on-photo:not(.subtle){
  background:linear-gradient(rgba(178,107,62,.8),rgba(150,90,48,.85)),
             url("../img/bark-band.webp") center/cover no-repeat;
}
.theme-forest.home main>.quote-banner.on-photo:not(.subtle) .qb-img{display:none}
.theme-forest.home main>section:nth-of-type(2){background:var(--forest)}
.theme-forest.home main>section:nth-of-type(3){
  background:linear-gradient(rgba(30,42,34,.66),rgba(30,42,34,.74)),url("../img/bark-band.webp") center/cover no-repeat;
}
.theme-forest.home main>section:nth-of-type(5){background:var(--mauve)}  /* hello anna → solid mauve panel */
.theme-forest.home main>section:nth-of-type(7){background:var(--sand)}
.theme-forest.home main>section:nth-of-type(8){background:linear-gradient(rgba(178,107,62,.82),rgba(150,90,48,.86)),url("../img/bark-band.webp") center/cover no-repeat}   /* steps = textured terracotta */

.theme-forest.home main>section:nth-of-type(3)::after,
.theme-forest.home main>section:nth-of-type(5)::after,
.theme-forest.home main>section:nth-of-type(8)::after{opacity:.16}

/* full-bleed bio section — Anna's photo fills its half edge-to-edge (no frame) */
.bio-band{padding:0!important;overflow:hidden}
.bio-band::after{display:none}
.bio-band .bio-grid{display:grid}
.bio-band .bio-text{padding:clamp(2.6rem,6vw,4.6rem) clamp(1.4rem,4vw,3.4rem);align-self:center;max-width:600px;margin:0 auto}
.bio-band .bio-media{margin:0;position:relative;min-height:360px}
.bio-band .bio-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* anchor the crop to the top so a portrait's head isn't cut off */
.bio-band .bio-media--top img{object-position:center top}
@media(min-width:820px){
  .bio-band .bio-grid{grid-template-columns:1fr 1fr;align-items:stretch}
  .bio-band .bio-media{min-height:0}
}
/* light variant (dark text on a soft tan panel) — used on About "My story" */
.bio-band--light{background:var(--cream-2)}
.bio-band--light .bio-text,.bio-band--light .bio-text :is(h2,h3,p){color:var(--ink)}

/* stacked media — two photos filling the vertical box (e.g. "Where we meet") */
.bio-media--stack{display:grid;grid-template-rows:1fr 1fr;min-height:400px;position:relative}
.bio-media--stack>figure{margin:0;position:relative;overflow:hidden}
@media(min-width:820px){.bio-media--stack{min-height:0}}

/* legible text on dark home sections (NOT the white cards) */
.theme-forest.home main>section:nth-of-type(2) :is(h1,h2,h3),
.theme-forest.home main>section:nth-of-type(5) :is(h1,h2,h3){color:#fff}
.theme-forest.home main>section:nth-of-type(2) p,
.theme-forest.home main>section:nth-of-type(5) p{color:rgba(244,237,228,.92)}
.theme-forest.home main>section:nth-of-type(2) strong,
.theme-forest.home main>section:nth-of-type(5) strong{color:#fff}
.theme-forest.home main>section:nth-of-type(2) .eyebrow,
.theme-forest.home main>section:nth-of-type(5) .eyebrow{color:var(--gold-soft)}
.theme-forest.home main>section:nth-of-type(5) .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}

.theme-forest.home main>section:nth-of-type(3)>.wrap>.reveal :is(h2,h3),
.theme-forest.home main>section:nth-of-type(8)>.wrap>.reveal :is(h2,h3){color:#fff}
.theme-forest.home main>section:nth-of-type(3)>.wrap>.reveal p{color:rgba(244,237,228,.92)}
.theme-forest.home main>section:nth-of-type(3)>.wrap>.reveal .eyebrow,
.theme-forest.home main>section:nth-of-type(8)>.wrap>.reveal .eyebrow{color:var(--gold-soft)}

/* hero eyebrow → light terracotta on the bark photo */
.theme-forest.home main>section.hero .eyebrow{color:var(--redwood-deep)}
/* tan sections keep warm terracotta eyebrows */
.theme-forest.home main>section:nth-of-type(7) .eyebrow{color:var(--redwood-deep)}