/* The Benison Group — the forest theme: the whole site in the homepage's dark design (chosen 4 November 2026).
   Applied by the body class t-forest on every public page; without it, pages keep their earlier paper styling (benison.css).
   Type: Fraunces for headings (self-hosted, benison.css), Nimbus Sans for text. Gold marks only what is active or important.
   Grounds: a family of forest greens, so sections are told apart by tone rather than by hard lines, and the floating molecules
   (ambient.js) drift behind some of them. */

.t-forest {
  --f-deep: #07110E;      /* the darkest: case study, closing calls to action */
  --f-base: #0A1713;      /* the ground: most sections */
  --f-moss: #0D1D18;      /* a step up */
  --f-pine: #10251F;      /* a lighter, greener band */
  --f-brand: #173B32;     /* the brand forest, for a section that should stand out */
  --f-ink: #F3EEE4;
  --f-dim: rgba(243, 238, 228, 0.66);
  --f-faint: rgba(243, 238, 228, 0.45);
  --f-line: rgba(243, 238, 228, 0.13);
  --f-gold: #D9BE86;
  --f-gold-line: rgba(217, 190, 134, 0.38);
  --text-dim: var(--f-dim);
  background-color: var(--f-base);
  color: var(--f-ink);
}
html:has(body.t-forest) {background-color: var(--f-base, #0A1713);}
.t-forest .b-veil {background-color: #0A1713;}
.t-forest ::selection {background-color: rgba(217, 190, 134, 0.35); color: #fff;}

/* ===== Shared type and controls ===== */
.t-forest .b-label {gap: 0.6rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; color: var(--f-gold);}
.t-forest .b-label::before {width: 0.45rem; height: 0.45rem; border-radius: 50%; background-color: var(--f-gold); box-shadow: 0 0 12px var(--f-gold);}
.t-forest .b-body {color: var(--f-dim);}
.t-forest .b-index, .t-forest .b-svc_number {color: var(--f-gold);}
.t-forest .b-button {border-color: var(--f-gold); background-color: var(--f-gold); color: #0A1713; font-weight: 600; letter-spacing: 0;}
.t-forest .b-button:hover, .t-forest .b-button:focus-visible {border-color: var(--f-ink); background-color: var(--f-ink); color: #0A1713;}
.t-forest .b-button--line {background-color: transparent; border-color: rgba(243, 238, 228, 0.35); color: var(--f-ink);}
.t-forest .b-button--line:hover, .t-forest .b-button--line:focus-visible {border-color: var(--f-gold); background-color: transparent; color: var(--f-gold);}
.t-forest .b-textlink {color: var(--f-gold); font-weight: 600; letter-spacing: 0.12em;}
.t-forest .b-tags li {border-color: var(--f-line);}
.t-forest .b-photo, .t-forest .b-svc_media {background-color: var(--f-moss);}
.t-forest :focus-visible {outline-color: var(--f-gold);}
/* Italic words in headings take Fraunces' livelier italic, in gold */
.t-forest :is(h1, h2) em {font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--f-gold);}

/* ===== Navigation and menu ===== */
.t-forest .b-nav_clock, .t-forest .b-nav_menu {font-weight: 600; letter-spacing: 0.18em;}
.t-forest .b-menu {background: radial-gradient(60% 80% at 15% 50%, rgba(23, 59, 50, 0.55), transparent 70%), #0A1713; color: var(--f-ink);}
.t-forest .b-menu_visual {padding: 0.75rem; border-color: var(--f-line); border-radius: 1.25rem;}
.t-forest .b-menu_frame {border-radius: 0.8rem; background-color: #10231D;}
/* The live B in the menu (scene-cards.js), centred; the pictures for each link fade in over it while that link is pointed at */
.b-menu_live {position: absolute; inset: 0; z-index: 0;}
.b-menu_live img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transition: opacity 0.8s ease;}
.b-menu_live.is-live img {opacity: 0;}
.b-menu_frame .b-menu_img {z-index: 1;}
.b-menu_frame:has(.b-menu_live) [data-menu-default] {display: none;}
.t-forest .b-menu_link {font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 1.3rem + 3.3vw, 5rem); line-height: 1.06; letter-spacing: -0.025em; opacity: 0.38; transition: opacity 0.4s ease, color 0.4s ease;}
.t-forest .b-menu_link:hover, .t-forest .b-menu_link:focus-visible, .t-forest .b-menu_link.is-active {opacity: 1; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--f-gold);}
.t-forest .b-menu_cta {border-color: var(--f-gold); background-color: var(--f-gold); color: #0A1713; font-weight: 600; letter-spacing: 0;}
.t-forest .b-menu_cta:hover, .t-forest .b-menu_cta:focus-visible {border-color: var(--f-ink); background-color: var(--f-ink); color: #0A1713;}

/* ===== Footer ===== */
.t-forest .b-footer {background: linear-gradient(180deg, #0F2A23 0%, var(--f-brand) 55%, #12302A 100%);}
.t-forest .b-footer_label {color: var(--f-gold);}

/* ===== Floating molecules (ambient.js) =====
   The layer covers its section and is clipped to it; the canvas inside is held to the screen (sticky), so in a long section the molecules
   float in place while the content scrolls past them. The layer's ends are feathered so molecules never stop at a hard edge. */
[data-ambient] {position: relative; isolation: isolate;}
[data-ambient] > :not(.b-ambient-layer) {position: relative; z-index: 1;}
.b-ambient-layer {position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9rem, #000 calc(100% - 9rem), transparent); mask-image: linear-gradient(to bottom, transparent, #000 9rem, #000 calc(100% - 9rem), transparent);}
.b-ambient {position: sticky; top: 0; display: block; width: 100%; height: min(100%, 100vh); opacity: 0; transition: opacity 1.6s ease;}
.b-ambient.is-on {opacity: 1;}

/* ===== Services page ===== */
.t-forest .b-svc-hero {background: radial-gradient(70% 60% at 85% 20%, rgba(127, 163, 145, 0.10), transparent 70%), var(--f-base); color: var(--f-ink);}
.t-forest .b-svc-hero_lead {color: var(--f-dim);}
.t-forest .b-svc-index li {border-top-color: var(--f-gold-line);}
.t-forest .b-svc-index a:hover .b-svc-index_q, .t-forest .b-svc-index a:focus-visible .b-svc-index_q {color: var(--f-gold);}
.t-forest .b-svc-index_q {transition: color 0.3s ease;}
.t-forest .b-svc-index_names {color: var(--f-faint);}
.t-forest .b-svc-group {background-color: var(--f-moss); color: var(--f-ink);}
.t-forest .b-svc-group--forest {background: linear-gradient(180deg, var(--f-moss), var(--f-pine) 18%, var(--f-pine) 82%, var(--f-base));}
.t-forest #operations.b-svc-group {background-color: var(--f-base);}
.t-forest .b-svc-group .b-body, .t-forest .b-svc_text, .t-forest .b-svc-group_q {color: var(--f-dim);}
.t-forest .b-svc_type, .t-forest [data-tone] .b-svc_type, .t-forest .b-svc_points li span {color: var(--f-gold);}
.t-forest .b-svc_points, .t-forest .b-svc_points li {border-color: var(--f-line);}
.t-forest .b-svc_media {border-radius: clamp(0.75rem, 1.4vw, 1.25rem);}
.t-forest .b-svc-cta {background: radial-gradient(60% 70% at 85% 15%, rgba(217, 190, 134, 0.09), transparent 70%), var(--f-deep); color: var(--f-ink);}
.t-forest .b-svc-cta_work .b-textlink {color: var(--f-gold);}

/* ===== Privacy notice ===== */
.t-forest .b-legal {background: radial-gradient(60% 40% at 10% 0%, rgba(127, 163, 145, 0.08), transparent 70%), var(--f-base); color: var(--f-ink);}
.t-forest .b-legal_meta {color: var(--f-faint);}
.t-forest .b-legal_section + .b-legal_section {border-top-color: var(--f-line);}
.t-forest .b-legal_section h3 {color: var(--f-gold);}
.t-forest .b-legal_section p, .t-forest .b-legal_section li {color: rgba(243, 238, 228, 0.78);}
.t-forest .b-legal_section a, .t-forest .b-legal_section strong {color: var(--f-ink);}
.t-forest .b-legal_head {position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start;}
@media (max-width: 991px) {.t-forest .b-legal_head {position: static;}}

/* ===== Not found ===== */
.t-forest .b-simple {background: radial-gradient(70% 70% at 70% 40%, rgba(23, 59, 50, 0.7), transparent 70%), var(--f-deep); color: var(--f-ink);}
.t-forest .b-simple_links .b-textlink {color: var(--f-ink);}
.t-forest .b-simple_links .b-textlink_icon {color: var(--f-gold);}

/* ===== Case studies: overview ===== */
.t-forest .tbg_cso.tbg_cs_root {--cs-forest: var(--f-ink); --cs-limestone: var(--f-base); --cs-gold: var(--f-gold); --cs-gold-deep: var(--f-gold);}
.t-forest .tbg_cso {background: radial-gradient(70% 50% at 90% 10%, rgba(127, 163, 145, 0.09), transparent 70%), var(--f-base);}
.t-forest .tbg_cso_lead_main {color: var(--f-ink);}
.t-forest .tbg_cso_lead_sub, .t-forest .tbg_cso_tags {color: var(--f-dim);}
.t-forest .tbg_cso_frame {border-radius: clamp(0.75rem, 1.4vw, 1.25rem);}
.t-forest .tbg_cso_detail {border-color: var(--f-base); border-radius: 0.6rem; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);}
.t-forest .tbg_cso_name {color: var(--f-gold);}
.t-forest .tbg_cso_soon_frame {border-color: var(--f-gold-line); border-radius: clamp(0.75rem, 1.4vw, 1.25rem); background-image: linear-gradient(160deg, rgba(217, 190, 134, 0.10), rgba(217, 190, 134, 0) 60%);}

/* ===== Case study: Llamas Custom Guitars =====
   The pale chapters become forest chapters, each its own shade; the Llamas red stays the client's own accent. */
.t-forest :is(.tbg_csl_founder, .tbg_csl_identity, .tbg_csl_biz, .tbg_csl_cta) {--cs-forest: var(--f-ink); --cs-gold-deep: var(--f-gold);}
.t-forest .tbg_csl_founder {--cs-limestone: var(--f-moss); box-shadow: 0 -2.5rem 5rem -1.5rem rgba(0, 0, 0, 0.6);}
.t-forest .tbg_csl_identity {--csl-paper: var(--f-base);}
.t-forest .tbg_csl_biz {--csl-paper: var(--f-pine);}
.t-forest .tbg_csl_cta {--cs-limestone: var(--f-deep);}
.t-forest .tbg_csl {--csl-ink: var(--f-deep); --cs-charcoal: #0F2620;}  /* the black and charcoal chapters, in the forest's deepest greens */
.t-forest .tbg_csl_label {color: var(--f-gold);}
.t-forest .tbg_csl_body, .t-forest .tbg_csl_ws p {color: var(--f-dim);}
.t-forest .tbg_csl_caption {color: var(--f-faint);}

/* ===== Forms on the forest ground (the enquiry form outside the homepage, if any) ===== */
.t-forest .b-field label {color: var(--f-ink);}
.t-forest .b-field input, .t-forest .b-field textarea {--field-bg: transparent; border-color: rgba(243, 238, 228, 0.28); background-color: rgba(243, 238, 228, 0.04); color: var(--f-ink); caret-color: var(--f-gold);}
.t-forest .b-field input:focus, .t-forest .b-field textarea:focus {border-color: var(--f-gold); background-color: rgba(243, 238, 228, 0.07); box-shadow: 0 0 0 1px var(--f-gold), 0 0 0 5px rgba(217, 190, 134, 0.22);}
.t-forest .b-field input:-webkit-autofill {-webkit-text-fill-color: var(--f-ink); box-shadow: inset 0 0 0 100px #12251F;}
/* The menu's pictures never take the pointer, so it reaches the live B beneath them */
.b-menu_frame .b-menu_img {pointer-events: none;}

/* ===== Experience: the closing section ===== */
/* The paper that rises over the film stays limestone (as How we work on the homepage), so it takes forest ink, not the theme's cream */
.t-forest .b-xend {background: linear-gradient(180deg, #F3EFE6 0%, #F0EBE1 60%, #EAE3D6 100%); color: #173B32;}
.t-forest .b-xend .b-xend_lead {color: #74603F;}
.t-forest .b-xend .b-button:hover, .t-forest .b-xend .b-button:focus-visible {border-color: #173B32; background-color: #173B32; color: #F3EEE4;}
.t-forest .b-xend .b-button--line {border-color: rgba(23, 59, 50, 0.4); color: #173B32;}
.t-forest .b-xend .b-button--line:hover, .t-forest .b-xend .b-button--line:focus-visible {border-color: #173B32; background-color: #173B32; color: #F3EEE4;}
.t-forest .b-xend .b-quietlink, .t-forest .b-xend .b-xend_credit summary {color: #74603F;}
.t-forest .b-xend :focus-visible {outline-color: #74603F;}