/* The Benison Group — site styles.
   Brand: Forest #173B32, Limestone #F0EBE1, Antique Gold #B9A47E, Charcoal #252B27.
   Type: Nimbus Roman (editorial) and Nimbus Sans (body, navigation). Their font files are not in
   the brand kit yet; until they are added (see README), the stacks below fall back to system faces. */

:root {
  --forest: #173B32;
  --limestone: #F0EBE1;
  --paper: #F6F2EA;
  --white: #FAF7F1;
  --gold: #B9A47E;
  --gold-deep: #8C7650;
  /* Small gold text on the pale backgrounds: dark enough to read (at least 5:1), still recognisably the brand gold */
  --gold-ink: #74603F;
  --charcoal: #252B27;
  --ink: #0E0F0E;
  --serif: "Nimbus Roman", Georgia, "Times New Roman", serif;
  --figures: "Nimbus Roman", "Times New Roman", Times, serif;
  --sans: "Nimbus Sans", Arial, Helvetica, sans-serif;
  --m: 1.5rem;
  --nav-h: 5.25rem;
  --gap: clamp(1.25rem, 2.5vw, 2.5rem);
  --ease: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --text-dim: rgba(23, 59, 50, 0.82);
}

/* ===== Base ===== */
*, *::before, *::after {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; background-color: var(--paper);}
body {margin: 0; background-color: var(--paper); color: var(--forest); font-family: var(--sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}
img, video, svg, picture {display: block; max-width: 100%;}
a {color: inherit;}
h1, h2, h3, h4, p, figure, ul, ol, blockquote {margin: 0;}
button {font: inherit; color: inherit;}
.b-wrap {width: 100%; padding-left: var(--m); padding-right: var(--m);}
.b-sr {position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.b-skip {position: fixed; left: 1rem; top: -5rem; z-index: 200; padding: 0.8rem 1.2rem; border-radius: 999px; background-color: var(--forest); color: var(--limestone); font-size: 0.9rem; text-decoration: none; transition: top 0.3s ease;}
.b-skip:focus {top: 1rem;}
:focus-visible {outline: 2px solid var(--gold); outline-offset: 3px;}
html.lenis, html.lenis body {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto !important;}
.lenis.lenis-stopped {overflow: hidden;}
.b-cover {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
/* Split lines (SplitText) rise from below their own mask. SplitText clips each mask (.b-mask-line-mask) with an
   inline overflow: clip at the line box, which cut off accents and the tails of y, g and p at the site's tight
   line heights. The mask clips with clip-path instead, reaching a little above and below the line box so whole
   letters show; the lines start far enough down (benison.js) to stay hidden until they rise. Layout is unchanged. */
.b-mask-line-mask {overflow: visible !important; clip-path: inset(-0.24em -0.4em -0.26em -0.4em);}

/* ===== Shared type ===== */
.b-label {display: flex; align-items: center; gap: 0.65rem; margin: 0; font-family: var(--sans); font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);}
.b-label::before {content: ""; flex: none; width: 0.5rem; height: 0.5rem; background-color: var(--gold);}
.b-label--deep {color: var(--gold-ink);}
/* Small gold labels and numbers on the pale sections use the darker gold so they stay readable (the square stays gold) */
[data-tone="paper"] .b-label, [data-tone="paper"] .b-index, [data-tone="paper"] .b-svc_number {color: var(--gold-ink);}
.b-body {font-family: var(--sans); font-size: clamp(1.05rem, 1.29vw, 1.2rem); line-height: 1.55; color: var(--text-dim);}
.b-textlink {display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 0.35rem; color: inherit; font-family: var(--sans); font-size: clamp(0.8rem, 0.9vw, 0.9rem); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;}
.b-textlink_icon {display: inline-block; transition: transform 0.4s var(--ease-out);}
.b-textlink:hover .b-textlink_icon, .b-textlink:focus-visible .b-textlink_icon {transform: translateX(0.25rem);}
.b-button {display: inline-flex; align-items: center; gap: 0.9rem; padding: 1.05rem 1.8rem; border: 1px solid var(--forest); border-radius: 999px; background-color: var(--forest); color: var(--limestone); font-family: var(--sans); font-size: 1rem; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease;}
.b-button:hover, .b-button:focus-visible {background-color: transparent; color: var(--forest);}
.b-button:disabled {opacity: 0.6; cursor: progress;}
.b-button--gold {border-color: var(--gold); background-color: var(--gold); color: var(--forest);}
.b-button--gold:hover, .b-button--gold:focus-visible {background-color: transparent; color: var(--limestone);}
.b-arrow {display: inline-block; transition: transform 0.35s ease;}
.b-button:hover .b-arrow, .b-button:focus-visible .b-arrow {transform: translateX(4px);}
.b-tags {display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0; padding: 0; list-style: none;}
.b-tags li {padding: 0.5rem 1.05rem; border: 1px solid rgba(185, 164, 126, 0.75); border-radius: 999px; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;}

/* ===== Page veil (arrival) ===== */
.b-veil {position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background-color: var(--forest); pointer-events: none; animation: b-veil 1.2s var(--ease) 0.3s both;}
.b-veil img {width: 3rem; height: auto; opacity: 0.9; animation: b-fade-out 0.5s ease 0.15s both;}
@keyframes b-veil {from {clip-path: inset(0 0 0 0);} to {clip-path: inset(0 0 100% 0); visibility: hidden;}}
@keyframes b-fade-out {to {opacity: 0;}}

/* ===== Navigation ===== */
.b-nav {position: fixed; left: 0; right: 0; top: 0; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nav-h); padding: 0 var(--m); color: #fff; mix-blend-mode: difference; transition: color 0.35s ease;}
.b-nav.is-paper {mix-blend-mode: normal; color: var(--forest);}
.b-nav.is-forest {mix-blend-mode: normal; color: var(--limestone);}
.b-nav_clock {display: flex; align-items: center; gap: 0.9rem; font-size: clamp(0.66rem, 0.78vw, 0.75rem); letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums;}
.b-nav_clock::before {content: ""; width: 0.6rem; height: 0.6rem; background-color: currentColor;}
.b-nav_logo {grid-column: 2; display: block; width: clamp(6.5rem, 8.6vw, 8.25rem); color: inherit;}
.b-nav_logo svg {width: 100%; height: auto;}
.b-nav_menu {grid-column: 3; justify-self: end; padding: 0.6rem 0; margin-right: -0.2em; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: clamp(0.8rem, 0.93vw, 0.9rem); letter-spacing: 0.2em; text-transform: uppercase;}
@media (max-width: 991px) {
  .b-nav {grid-template-columns: auto 1fr auto;}
  .b-nav_clock {display: none;}
  .b-nav_logo {grid-column: 1;}
}

/* ===== Menu (opens from the top) ===== */
.b-menu {position: fixed; left: 0; right: 0; top: 0; z-index: 55; height: 80vh; min-height: 34rem; background-color: var(--forest); color: var(--limestone); clip-path: inset(0 0 100% 0); visibility: hidden;}
.b-menu.is-open {visibility: visible;}
.b-menu_inner {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); height: 100%; padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 2.5rem;}
.b-menu_visual {grid-column: 1 / span 4; align-self: center; position: relative; aspect-ratio: 1 / 1; max-height: 100%; padding: 1.5rem; border: 1px solid rgba(240, 235, 225, 0.18);}
.b-menu_frame {position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #12302A;}
.b-menu_img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease;}
.b-menu_img.is-active {opacity: 1;}
.b-menu_nav {grid-column: 7 / span 6; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2rem, 5vh, 3rem);}
.b-menu_list {margin: 0; padding: 0; list-style: none;}
.b-menu_link {display: inline-block; color: inherit; text-decoration: none; font-family: var(--serif); font-size: clamp(2.2rem, 1.2rem + 2.2vw, 3.4rem); line-height: 1.18; letter-spacing: -0.01em; opacity: 0.55; transition: opacity 0.4s ease;}
.b-menu_link:hover, .b-menu_link:focus-visible, .b-menu_link.is-active {opacity: 1;}
.b-menu_link .b-char {display: inline-block;}
@media (max-width: 767px) {
  .b-menu {height: 100dvh;}
  .b-menu_inner {display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(var(--nav-h) + 1rem);}
  .b-menu_visual {display: none;}
  .b-menu_nav {height: 100%; justify-content: space-between;}
  .b-menu_link {opacity: 1; font-size: clamp(2.1rem, 9vw, 3rem);}
}

/* ===== Hero: film, wordmark and the window it settles into ===== */
.b-hero {position: relative; height: 320svh; background-color: var(--paper);}
.b-hero_top {position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; row-gap: clamp(5rem, 10vw, 10rem); min-height: 100svh; padding: 0 var(--m) clamp(0.5rem, 1vw, 1rem); pointer-events: none;}
.b-hero_row {display: flex; align-items: center; justify-content: space-between; gap: 2rem;}
.b-hero_tagline, .b-hero_scroll {color: #fff; transition: color 0.45s ease; pointer-events: auto;}
.b-hero_tagline.is-paper, .b-hero_scroll.is-paper {color: var(--forest);}
.b-hero_tagline {font-family: var(--sans); font-weight: 400; font-size: clamp(0.875rem, 1.03vw, 1.1rem); line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase;}
.b-hero_tagline span {white-space: nowrap;}
.b-hero_scroll {display: inline-flex; align-items: center; gap: 0.5rem; padding-bottom: 0.3rem; text-decoration: none; font-size: clamp(0.78rem, 0.9vw, 0.9rem); letter-spacing: 0.16em; text-transform: uppercase; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;}
.b-hero_mark {color: rgba(240, 235, 225, 0.62);}
.b-hero_mark svg {width: 100%; height: auto; overflow: visible;}
/* The forest copy sits beneath the film; the light copy above is clipped to the film (home.js) */
.b-hero_mark--under {position: absolute; z-index: 0; margin: 0; color: var(--forest); pointer-events: none;}
.b-hero_stage {position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 100%;}
.b-hero_sticky {position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.b-hero_strip {display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4.15vw, 4rem);}
.b-hero_side {position: relative; flex: none; width: 17vw; aspect-ratio: 2.4 / 1.6; overflow: hidden; opacity: 0; background-color: #1d1d1b;}
.b-hero_side img {width: 100%; height: 100%; object-fit: cover;}
.b-film {position: relative; flex: none; width: 32vw; height: 26vh;}
.b-film_video {position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; max-width: none; object-fit: cover; background-color: var(--ink);}
.b-film_caption {position: absolute; left: 0; right: 0; bottom: -2.5rem; text-align: center; font-size: clamp(0.66rem, 0.78vw, 0.75rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0;}
@media (max-width: 991px) {
  .b-hero_side {width: 22vw;}
  .b-hero_side--outer {display: none;}
}
@media (max-width: 767px) {
  .b-hero_top {row-gap: 32vh; padding-bottom: 0.5rem;}
  .b-hero_row {justify-content: center; text-align: center;}
  .b-hero_tagline {padding-left: 0.22em;}
  .b-hero_tagline span {display: block;}
  .b-hero_scroll {display: none;}
  .b-hero_side {width: 40vw;}
  .b-film {width: 64vw; height: 34vh;}
}
@media (max-width: 479px) {
  .b-hero_side {width: 50vw;}
  .b-film {height: 28vh;}
}
@media (orientation: landscape) and (max-height: 520px) {
  .b-hero_top {row-gap: 1.5rem;}
}

/* ===== Who we are ===== */
.b-about {position: relative; margin-top: -28svh; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(6rem, 10vw, 10rem); background-color: var(--paper);}
.b-about_heading {margin-top: clamp(1.75rem, 3vw, 2.75rem); font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 6.25rem); line-height: 1.04; letter-spacing: -0.02em;}
.b-about_heading > span {display: block;}
.b-about_heading em {font-style: italic; color: rgba(23, 59, 50, 0.78);}
.b-about_body {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(4rem, 8vw, 8rem);}
.b-about_text {grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--nav-h) + 2.5rem);}
.b-stat {margin: 0;}
.b-stat_figure {display: flex; align-items: flex-start; font-family: var(--figures); font-weight: 400; font-size: clamp(7rem, 13vw, 13.5rem); line-height: 0.82; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums;}
.b-stat_number {display: inline-block; min-width: 2ch; text-align: right;}
.b-stat_plus {margin-left: 0.04em; font-size: 0.5em; line-height: 1; color: var(--gold);}
.b-stat_rule {display: block; width: 100%; max-width: 22rem; height: 1px; margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 1.1rem; background-color: var(--gold); transform-origin: 0 50%;}
.b-stat_label {display: block; max-width: 22rem; font-size: 0.875rem; line-height: 1.6; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(23, 59, 50, 0.72);}
.b-about_lead {margin-top: clamp(3rem, 5vw, 4.5rem); max-width: 24ch; font-family: var(--serif); font-size: clamp(1.6rem, 2.2vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em;}
.b-about_copy {margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.1rem, 1.25vw, 1.3rem); line-height: 1.65; color: var(--text-dim);}
.b-about_link {margin-top: clamp(2rem, 3.5vw, 3rem);}
.b-about_gallery {grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: start;}
.b-photo {position: relative; overflow: hidden; background-color: var(--limestone);}
.b-photo_inner {position: absolute; left: 0; top: 0; width: 100%; height: 118%;}
.b-photo_inner img {width: 100%; height: 100%; object-fit: cover;}
.b-about_gallery .is-a {grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5;}
.b-about_gallery .is-b {grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 3 / 4; margin-top: 42%;}
.b-about_gallery .is-c {grid-column: 1; grid-row: 2; width: 82%; justify-self: end; aspect-ratio: 1 / 1;}
@media (max-width: 991px) {
  .b-about_body {display: block;}
  .b-about_text {position: static; max-width: 40rem;}
  .b-about_gallery {margin-top: clamp(3.5rem, 8vw, 5rem);}
}
@media (max-width: 767px) {
  .b-about_gallery .is-b {grid-row: 1; margin-top: 38%;}
  .b-about_gallery .is-c {grid-column: 1 / -1; grid-row: 2; width: 100%; aspect-ratio: 16 / 10;}
}

/* ===== Services overview ===== */
.b-overview {padding: clamp(7rem, 12vw, 11rem) 0 clamp(5rem, 9vw, 8rem); background-color: var(--paper);}
.b-overview_statement {max-width: 24ch; margin-top: 2.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.95rem, 2.64vw, 3rem); line-height: 1.2; letter-spacing: -0.01em;}
.b-overview_groups {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(4rem, 8vw, 7rem);}
.b-group {display: block; padding-top: 1.25rem; border-top: 1px solid rgba(185, 164, 126, 0.6); color: inherit; text-decoration: none;}
.b-group_media {aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.5rem; background-color: var(--limestone);}
.b-group_media img {width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);}
.b-group:hover .b-group_media img, .b-group:focus-visible .b-group_media img {transform: scale(1.08);}
.b-index {font-size: 0.75rem; letter-spacing: 0.24em; color: var(--gold);}
.b-group_title {margin: 0.6rem 0 1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2.4rem); line-height: 1.1;}
.b-group_list {margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.8; color: rgba(23, 59, 50, 0.78);}
@media (max-width: 767px) {
  .b-overview_groups {grid-template-columns: minmax(0, 1fr); gap: 2.5rem;}
}

/* ===== 01 Drive: a slideshow that settles from full screen into the centre column ===== */
.b-drive {position: relative; height: 200vh; background-color: var(--paper);}
.b-drive_sticky {position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1400px;}
.b-drive_media {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; transform-origin: 50% 50%;}
.b-drive_slide {position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease;}
.b-drive_slide.is-active {opacity: 1;}
.b-drive_slide img {width: 100%; height: 100%; object-fit: cover;}
.b-drive_shade {position: absolute; inset: 0; background-color: rgba(14, 15, 14, 0.38);}
.b-drive_grid {position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; height: 100%;}
.b-drive_main {grid-column: 1 / span 4; color: var(--limestone); transition: color 0.5s ease;}
.b-drive_target {grid-column: 5 / span 4; align-self: center; height: 62vh;}
.b-drive_side {grid-column: 9 / span 4; color: var(--limestone); opacity: 0; transition: color 0.5s ease;}
.b-drive.is-settled .b-drive_main, .b-drive.is-settled .b-drive_side {color: var(--forest);}
.b-drive_heading {margin-top: 1.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 4.6vw, 5.4rem); line-height: 1.02; letter-spacing: -0.015em;}
.b-drive_text {font-size: clamp(1.05rem, 1.29vw, 1.2rem); line-height: 1.55;}
@media (max-width: 991px) {
  .b-drive_grid {grid-template-rows: auto 1fr auto; align-items: start; padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 2rem;}
  .b-drive_main {grid-column: 1 / -1;}
  .b-drive_target {grid-column: 2 / span 10; grid-row: 2; align-self: center; height: 44vh;}
  /* Short screens (200% zoom, phones held sideways): a smaller settled frame, so the closing text isn't cut off */
  @media (max-height: 600px) {
    .b-drive_target {height: 32vh;}
  }
  .b-drive_side {grid-column: 1 / -1; grid-row: 3;}
}

/* ===== 02 Identity ===== */
.b-identity {padding: clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 10vw, 10rem); background-color: var(--paper);}
.b-identity_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: clamp(3.5rem, 6vw, 6.5rem);}
.b-identity_heading {grid-column: 1 / span 6; font-family: var(--serif); font-weight: 400; font-size: clamp(2.375rem, 2.98vw, 3.4rem); line-height: 1.08; letter-spacing: -0.015em;}
.b-identity_body {grid-column: 8 / span 5;}
.b-identity_media {position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: clamp(2rem, 3.5vw, 3rem); background-color: var(--limestone);}
@media (max-width: 991px) {
  .b-identity_grid {display: block; margin-top: 3rem;}
  .b-identity_body {margin-top: 3rem;}
}

/* ===== 03–05 Digital ===== */
.b-digital-intro {padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem); background-color: var(--forest); color: var(--limestone);}
.b-digital-intro_heading {max-width: 22ch; margin-top: clamp(4rem, 6vw, 5.5rem); font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 3.1vw, 3.6rem); line-height: 1.2; letter-spacing: -0.01em;}
/* Connect, Build and Flow scroll naturally past a held photograph (3:2, the photographs' own shape, so nothing is
   cropped). The service nearest the middle of the screen is lit and the photograph follows it (home.js). Phones:
   each service shows its own photograph above its text. */
.b-process {padding: clamp(1rem, 3vw, 3rem) 0 clamp(5rem, 9vw, 8rem); background-color: var(--forest); color: var(--limestone);}
.b-process_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);}
.b-process_media {grid-column: 1 / span 7; container-type: inline-size;}
/* Held level with the middle of the screen (the frame is a third of its width tall either side of centre) */
.b-process_stick {position: sticky; top: calc(var(--nav-h) + 2rem); top: max(calc(var(--nav-h) + 2rem), calc(50vh - min(100cqw, (100vh - var(--nav-h) - 9rem) * 1.5) / 3 - 1.75rem)); width: min(100%, calc((100vh - var(--nav-h) - 9rem) * 1.5));}
.b-process_frame {position: relative; aspect-ratio: 3 / 2; overflow: hidden; background-color: #12302A;}
.b-process_visual {position: absolute; inset: 0; clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);}
.b-process_visual img {width: 100%; height: 100%; object-fit: cover;}
.b-process_marks {display: flex; gap: clamp(1.25rem, 2.5vw, 2.25rem); margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 235, 225, 0.45);}
.b-process_marks li {position: relative; padding-top: 0.85rem; transition: color 0.5s ease;}
.b-process_marks li::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: rgba(185, 164, 126, 0.35);}
.b-process_marks li::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s var(--ease-out);}
.b-process_marks li.is-active {color: var(--limestone);}
.b-process_marks li.is-active::after {transform: scaleX(1);}
.b-process_marks span {margin-right: 0.6rem; color: var(--gold);}
.b-steps {grid-column: 8 / span 5; padding-left: clamp(0rem, 2.5vw, 2.5rem);}
.b-step {display: flex; flex-direction: column; justify-content: center; min-height: 54vh; opacity: 0.32; transition: opacity 0.6s ease;}
.b-step.is-active, .b-step:focus-within {opacity: 1;}
.b-step_media {display: none; margin: 0 0 1.75rem; aspect-ratio: 3 / 2; overflow: hidden; background-color: #12302A;}
.b-step_media img {display: block; width: 100%; height: 100%; object-fit: cover;}
.b-step_number {margin: 0; font-size: clamp(0.8rem, 0.9vw, 0.9rem); letter-spacing: 0.12em; color: var(--gold); font-variant-numeric: tabular-nums;}
.b-step_heading {margin-top: 0.6rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.8rem); line-height: 1.05; letter-spacing: -0.01em;}
.b-step_type {margin: 0.9rem 0 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);}
.b-step_text {margin: 1.25rem 0 0; font-size: clamp(1.05rem, 1.29vw, 1.2rem); line-height: 1.6; color: rgba(240, 235, 225, 0.88);}
.b-step_link {align-self: flex-start; margin-top: 1.75rem; color: var(--limestone);}
.b-step_link:focus-visible {outline: 2px solid var(--gold); outline-offset: 4px;}
@media (max-width: 991px) {
  .b-process_media {grid-column: 1 / span 6;}
  .b-steps {grid-column: 7 / span 6; padding-left: 0;}
  .b-step {min-height: 50vh;}
}
@media (max-width: 767px) {
  .b-process_grid {display: block;}
  .b-process_media {display: none;}
  .b-step {min-height: 0; opacity: 1;}
  .b-step + .b-step {margin-top: clamp(3.5rem, 12vw, 5rem);}
  .b-step_media {display: block;}
}
@media (prefers-reduced-motion: reduce) {
  .b-step, .b-process_marks li, .b-process_marks li::after {transition: none;}
}

/* ===== 06 Operations ===== */
.b-ops {padding: clamp(6rem, 12vw, 11rem) 0 clamp(5rem, 9vw, 8rem); background-color: var(--paper);}
.b-ops_header {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 7rem); align-items: end;}
.b-ops_heading {margin-top: 1.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 3.62vw, 4.2rem); line-height: 1.2; letter-spacing: -0.01em;}
.b-ops_layout {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 7rem); align-items: start; margin-top: clamp(2rem, 5vw, 4.5rem);}
.b-ops_media {position: sticky; top: max(calc(var(--nav-h) + 2rem), calc(50vh - 15vw));}
.b-ops_frame {position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--limestone);}
.b-ops_visual {position: absolute; inset: 0; clip-path: inset(100% 0 0 0);}
.b-ops_visual.is-first {clip-path: inset(0 0 0 0);}
.b-ops_visual img {width: 100%; height: 100%; object-fit: cover;}
.b-ops_list {margin: 0; padding: 0; list-style: none;}
.b-ops_item {min-height: max(24vh, 12rem); padding: 2rem 0 2.2rem; border-bottom: 1px solid rgba(185, 164, 126, 0.55);}
/* Areas not in view: only the large heading dims (still readable), so the small labels stay legible */
.b-ops_item .b-ops_item_heading {color: rgba(23, 59, 50, 0.7); transition: color 0.5s ease;}
.b-ops_item.is-active .b-ops_item_heading {color: var(--forest);}
.b-ops_item_heading {margin-top: 1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3vw, 3.4rem); line-height: 1.2; letter-spacing: -0.01em;}
@media (max-width: 767px) {
  .b-ops_header, .b-ops_layout {grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem;}
  .b-ops_media {top: var(--nav-h); z-index: 2; padding: 0.75rem 0 1rem; background-color: var(--paper);}
  .b-ops_frame {aspect-ratio: 16 / 10;}
  .b-ops_item {min-height: 30vh;}
}

/* ===== 07 Scale ===== */
.b-scale {position: relative; height: 250vh; background-color: var(--paper);}
.b-scale_sticky {position: sticky; top: 0; height: 100vh; overflow: hidden;}
.b-scale_media {position: absolute; inset: 0; overflow: hidden;}
.b-scale_media img {width: 100%; height: 100%; object-fit: cover;}
.b-scale_wash {position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(246, 242, 234, 0.92) 0%, rgba(246, 242, 234, 0.78) 30%, rgba(246, 242, 234, 0) 48%),
  linear-gradient(180deg, rgba(246, 242, 234, 0.95) 0%, rgba(246, 242, 234, 0) 34%, rgba(246, 242, 234, 0) 70%, rgba(246, 242, 234, 0.95) 100%),
  radial-gradient(ellipse 70% 60% at 55% 52%, rgba(246, 242, 234, 0) 35%, rgba(246, 242, 234, 0.9) 78%, var(--paper) 100%);}
.b-scale_content {position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: calc(var(--nav-h) + 3.5rem); padding-bottom: clamp(3rem, 6vh, 4.5rem);}
.b-scale_heading {max-width: 20ch; margin-top: 1.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.1vw, 3.6rem); line-height: 1.2; letter-spacing: -0.01em;}
.b-scale_text {max-width: 34rem; margin-top: 1.5rem;}
.b-pillars {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; padding: 0; list-style: none;}
.b-pillar_word {display: block; font-family: var(--serif); font-size: clamp(2.3rem, 3.1vw, 3.6rem); line-height: 1.2;}
.b-pillar_rule {display: block; height: 1px; margin: 0.9rem 0 0.8rem; background-color: var(--gold); transform-origin: 0 50%;}
.b-pillar_n {display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums;}
.b-pillar_n::before {content: ""; width: 0.45rem; height: 0.45rem; background-color: var(--gold);}
@media (max-width: 767px) {
  .b-pillars {grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem;}
  .b-scale_heading {font-size: clamp(1.8rem, 7.4vw, 2.2rem);}
  .b-scale_text {font-size: 1rem;}
  .b-scale_wash {background:
    linear-gradient(180deg, var(--paper) 0%, rgba(246, 242, 234, 0.92) 38%, rgba(246, 242, 234, 0) 52%, rgba(246, 242, 234, 0) 62%, rgba(246, 242, 234, 0.86) 78%, rgba(246, 242, 234, 0.95) 100%),
    radial-gradient(ellipse 80% 55% at 50% 60%, rgba(246, 242, 234, 0) 35%, rgba(246, 242, 234, 0.9) 80%, var(--paper) 100%);}
}

/* ===== Questions (FAQ): native details elements, one open at a time; answers open smoothly where supported ===== */
.b-faq {padding: clamp(5.5rem, 10vw, 9rem) 0; background-color: var(--limestone); color: var(--forest); interpolate-size: allow-keywords;}
.b-faq_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;}
.b-faq_head {grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 2rem);}
.b-faq_heading {margin-top: 1.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 4vw, 4.4rem); line-height: 1.04; letter-spacing: -0.015em;}
.b-faq_intro {max-width: 22rem; margin-top: 1.25rem; font-size: clamp(1.02rem, 1.15vw, 1.15rem); line-height: 1.55; color: var(--text-dim);}
.b-faq_list {grid-column: 6 / span 7; border-bottom: 1px solid rgba(116, 96, 63, 0.35);}
.b-faq_item {border-top: 1px solid rgba(116, 96, 63, 0.35);}
.b-faq_q {display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; align-items: baseline; column-gap: 0.75rem; padding: clamp(1.4rem, 2.2vw, 1.9rem) 0; list-style: none; cursor: pointer;}
.b-faq_q::-webkit-details-marker {display: none;}
.b-faq_q:focus-visible {outline: 2px solid var(--gold); outline-offset: 4px;}
.b-faq_n {font-size: 0.75rem; letter-spacing: 0.16em; color: var(--gold-ink); font-variant-numeric: tabular-nums;}
.b-faq_text {margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.95rem); line-height: 1.2; letter-spacing: -0.005em; transition: color 0.3s ease;}
.b-faq_q:hover .b-faq_text {color: var(--gold-ink);}
.b-faq_icon {position: relative; align-self: center; justify-self: end; width: 1.1rem; height: 1.1rem;}
.b-faq_icon::before, .b-faq_icon::after {content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: currentColor; transition: transform 0.45s var(--ease-out);}
.b-faq_icon::after {transform: rotate(90deg);}
.b-faq_item[open] .b-faq_icon::after {transform: rotate(0deg);}
.b-faq_a {padding: 0 2.25rem clamp(1.6rem, 2.4vw, 2.2rem) 3.5rem;}
.b-faq_a p {max-width: 40rem; margin: 0; font-size: clamp(1.02rem, 1.12vw, 1.12rem); line-height: 1.65; color: var(--text-dim);}
.b-faq_a p a {color: var(--forest); text-underline-offset: 0.15em;}
.b-faq_a .b-textlink {margin-top: 1.25rem; color: var(--forest);}
.b-faq_a .b-textlink:focus-visible {outline: 2px solid var(--gold); outline-offset: 4px;}
.b-faq_item::details-content {block-size: 0; overflow: hidden; transition: block-size 0.5s var(--ease-out), content-visibility 0.5s allow-discrete;}
.b-faq_item[open]::details-content {block-size: auto;}
@media (max-width: 991px) {
  .b-faq_grid {display: block;}
  .b-faq_head {position: static;}
  .b-faq_list {margin-top: 2.5rem;}
}
@media (max-width: 767px) {
  .b-faq_q {grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;}
  .b-faq_a {padding: 0 0 1.6rem 2.75rem;}
}
@media (prefers-reduced-motion: reduce) {
  .b-faq_item::details-content, .b-faq_icon::before, .b-faq_icon::after {transition: none;}
}

/* ===== Enquiry ===== */
.b-enquiry {padding: clamp(6rem, 11vw, 10rem) 0; background-color: var(--paper);}
.b-enquiry_grid {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 7rem); row-gap: 3rem; align-items: start;}
.b-enquiry_heading {margin-top: 1.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 5.8rem); line-height: 1.02; letter-spacing: -0.015em;}
.b-enquiry_text {max-width: 30rem; margin-top: 1.5rem; font-size: clamp(1.1rem, 1.19vw, 1.2rem); line-height: 1.55; color: var(--text-dim);}
.b-form {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem;}
.b-field {display: flex; flex-direction: column; gap: 0.55rem;}
.b-field--wide, .b-form_actions {grid-column: 1 / -1;}
/* Fields: a clear box to type into, a dark caret, and a forest-and-gold ring on the active field.
   The label gains a gold rule while its field is active, and turns red with its field when it needs attention. */
.b-field {--field-bg: #FFFDF9; --ring: rgba(185, 164, 126, 0.55); --error: #8A3B2E;}
.b-field label {display: flex; align-items: center; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); transition: color 0.3s ease;}
.b-field label::before {content: ""; width: 0; height: 1px; margin-right: 0; background-color: var(--gold-deep); transition: width 0.4s var(--ease-out), margin-right 0.4s var(--ease-out);}
.b-field:focus-within label::before {width: 1.4rem; margin-right: 0.6rem;}
.b-field_opt {margin-left: 0.5em; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--text-dim);}
.b-field input, .b-field textarea {width: 100%; padding: 0.9rem 1.05rem; border: 1px solid rgba(23, 59, 50, 0.6); border-radius: 4px; background-color: var(--field-bg); color: var(--forest); caret-color: var(--forest); font-family: var(--sans); font-size: 1.1rem; line-height: 1.5; outline: 2px solid transparent; outline-offset: 2px; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;}
.b-field textarea {display: block; resize: vertical; min-height: 9.5rem;}
.b-field input:hover, .b-field textarea:hover {border-color: rgba(23, 59, 50, 0.85);}
.b-field input:focus, .b-field textarea:focus {border-color: var(--forest); background-color: #FFF; box-shadow: 0 0 0 1px var(--forest), 0 0 0 5px var(--ring);}
.b-field [aria-invalid="true"], .b-field [aria-invalid="true"]:hover {border-color: var(--error); box-shadow: 0 0 0 1px var(--error);}
.b-field [aria-invalid="true"]:focus {border-color: var(--error); box-shadow: 0 0 0 1px var(--error), 0 0 0 5px rgba(138, 59, 46, 0.2);}
.b-field:has([aria-invalid="true"]) label {color: var(--error);}
/* Browser autofill keeps the field's own colours (and its focus ring) instead of the browser's blue or yellow */
.b-field input:-webkit-autofill {-webkit-text-fill-color: var(--forest); caret-color: var(--forest); box-shadow: inset 0 0 0 100px var(--field-bg); transition: background-color 600000s 0s, color 600000s 0s;}
.b-field input:-webkit-autofill:focus {box-shadow: inset 0 0 0 100px #FFF, 0 0 0 1px var(--forest), 0 0 0 5px var(--ring);}
.b-field--trap {position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;}
.b-form_actions {display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 0.5rem;}
.b-form_status {flex: 1 1 16rem; margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--text-dim);}
.b-form_status[data-state="error"] {color: #8A3B2E;}
.b-form_status[data-state="sent"] {color: var(--forest);}
.b-form_privacy {grid-column: 1 / -1; margin: 0.25rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-dim);}
.b-form_privacy a {color: var(--forest); text-underline-offset: 0.15em;}
@media (max-width: 767px) {
  .b-enquiry_grid, .b-form {grid-template-columns: minmax(0, 1fr);}
  .b-field--wide, .b-form_actions {grid-column: auto;}
}

/* ===== Social links (enquiry section and footer) ===== */
.b-social {display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none;}
.b-social_link {display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.6rem 1.15rem 0.6rem 0.95rem; border: 1px solid; border-radius: 999px; font-family: var(--sans); font-size: 0.92rem; letter-spacing: 0.04em; text-decoration: none; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;}
.b-social_link svg {flex: none; width: 1.15rem; height: 1.15rem;}
/* The email address can wrap on very narrow screens rather than run out of its pill */
.b-social_link--email {max-width: 100%; box-sizing: border-box;}
.b-social_link--email span {min-width: 0; overflow-wrap: anywhere;}
.b-social--paper .b-social_link {border-color: rgba(23, 59, 50, 0.35); color: var(--forest);}
.b-social--paper .b-social_link:hover, .b-social--paper .b-social_link:focus-visible {border-color: var(--forest); background-color: var(--forest); color: var(--limestone);}
.b-social--forest .b-social_link {border-color: rgba(185, 164, 126, 0.55); color: var(--limestone);}
.b-social--forest .b-social_link:hover, .b-social--forest .b-social_link:focus-visible {border-color: var(--gold); background-color: var(--gold); color: var(--forest);}
.b-enquiry_social {margin-top: clamp(2.25rem, 4vw, 3.25rem);}
.b-enquiry_social_label {margin-bottom: 0.9rem; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep);}
.b-footer_col--social .b-social {gap: 0.6rem;}

/* ===== Footer ===== */
.b-footer {padding-top: clamp(3.5rem, 7vw, 6rem); overflow: hidden; background-color: var(--forest); color: var(--limestone);}
/* The svg is never clipped: the letters' rise (10% of their height) stays inside the margin below */
.b-footer_word svg {display: block; width: 100%; height: auto; overflow: visible;}
.b-footer_links {margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid rgba(185, 164, 126, 0.35);}
/* Labels share one column so the three rows of links line up */
.b-footer_nav {display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: 1.1rem; align-items: center;}
.b-footer_col {display: contents;}
.b-footer_label {margin: 0; font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);}
.b-footer_list {display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.75rem; row-gap: 0.25rem; margin: 0; padding: 0; list-style: none;}
.b-footer_link {display: inline-block; padding: 0.35rem 0; color: rgba(240, 235, 225, 0.86); font-size: 0.95rem; line-height: 1.3; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s ease, color 0.3s ease;}
.b-footer_link:hover, .b-footer_link:focus-visible {color: var(--limestone); background-size: 100% 1px;}
.b-footer_bottom {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 2rem; row-gap: 0.75rem; padding-top: clamp(1.25rem, 2vw, 1.75rem); padding-bottom: clamp(1.25rem, 2vw, 1.75rem); border-top: 1px solid rgba(185, 164, 126, 0.35); font-size: 0.85rem; color: rgba(240, 235, 225, 0.7);}
.b-footer_bottom p {margin: 0;}
.b-footer_bottom .b-footer_link {font-size: 0.85rem;}
.b-footer_legal {display: flex; flex-wrap: wrap; align-items: center; column-gap: 2rem; row-gap: 0.25rem;}

/* ===== Privacy notice ===== */
.b-legal {padding: calc(var(--nav-h) + clamp(3.5rem, 8vw, 7rem)) 0 clamp(5rem, 9vw, 8rem); background-color: var(--paper); color: var(--forest);}
.b-legal_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem);}
.b-legal_head {grid-column: 1 / span 4;}
.b-legal_title {margin: 1rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -0.02em;}
.b-legal_meta {margin: 1.5rem 0 0; font-size: 0.85rem; color: var(--text-dim);}
.b-legal_body {grid-column: 6 / span 7; max-width: 44rem;}
.b-legal_section + .b-legal_section {margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid rgba(185, 164, 126, 0.45);}
.b-legal_section h2 {margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.15;}
.b-legal_section h3 {margin: 1.75rem 0 0; font-family: var(--sans); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep);}
.b-legal_section h2 + h3 {margin-top: 1.25rem;}
.b-legal_section p, .b-legal_section li {font-size: 1.05rem; line-height: 1.65; color: rgba(23, 59, 50, 0.86);}
.b-legal_section p {margin: 1rem 0 0;}
.b-legal_section ul {margin: 1rem 0 0; padding-left: 1.2rem;}
.b-legal_section li + li {margin-top: 0.35rem;}
.b-legal_section a {color: var(--forest); text-underline-offset: 0.15em;}
@media (max-width: 991px) {
  .b-legal_grid {display: block;}
  .b-legal_body {margin-top: 3rem;}
}
@media (max-width: 767px) {
  .b-footer_word {padding-left: 0.75rem; padding-right: 0.75rem;}
  .b-footer_nav {grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem;}
  .b-footer_col + .b-footer_col .b-footer_label {margin-top: 1rem;}
  .b-footer_list {column-gap: 1.5rem; row-gap: 0;}
  .b-footer_link {padding: 0.6rem 0; font-size: 1rem;}
  .b-footer_col--social .b-social {margin-top: 0.4rem;}
}

/* ===== Services page ===== */
.b-svc-hero {padding: calc(var(--nav-h) + clamp(3.5rem, 8vw, 8rem)) 0 clamp(4rem, 8vw, 7rem); background-color: var(--paper);}
.b-svc-hero_title {margin-top: clamp(1.5rem, 2.5vw, 2.25rem); font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 9vw, 9.5rem); line-height: 0.96; letter-spacing: -0.035em;}
.b-svc-hero_lead {max-width: 30ch; margin-top: clamp(2rem, 4vw, 3.5rem); font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 2.3vw, 2.3rem); line-height: 1.25; color: rgba(23, 59, 50, 0.86);}
.b-svc-index {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(3.5rem, 7vw, 6rem); padding: 0; list-style: none;}
.b-svc-index li {padding-top: 1.1rem; border-top: 1px solid rgba(185, 164, 126, 0.6);}
.b-svc-index a {display: block; color: inherit; text-decoration: none;}
.b-svc-index_q {margin-top: 0.5rem; font-family: var(--serif); font-size: clamp(1.3rem, 1.7vw, 1.8rem); line-height: 1.2;}
.b-svc-index_names {margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.7; color: rgba(23, 59, 50, 0.72);}
.b-svc-group {padding: clamp(5rem, 9vw, 8rem) 0; background-color: var(--paper);}
.b-svc-group--forest {background-color: var(--forest); color: var(--limestone);}
.b-svc-group--forest .b-body, .b-svc-group--forest .b-svc_text {color: rgba(240, 235, 225, 0.86);}
.b-svc-group_head {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;}
.b-svc-group_titlewrap {grid-column: 1 / span 7;}
.b-svc-group_title { margin-top: 1.25rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 5rem); line-height: 1.04; letter-spacing: -0.02em;}
.b-svc-group_q {grid-column: 9 / span 4; font-size: clamp(1.05rem, 1.29vw, 1.2rem); line-height: 1.55;}
.b-svc {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; margin-top: clamp(4.5rem, 9vw, 8rem); scroll-margin-top: calc(var(--nav-h) + 1rem);}
.b-svc_media {grid-column: 1 / span 6; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--limestone);}
.b-svc_body {grid-column: 8 / span 5;}
.b-svc:nth-child(even of .b-svc) .b-svc_media {grid-column: 7 / span 6; grid-row: 1;}
.b-svc:nth-child(even of .b-svc) .b-svc_body {grid-column: 1 / span 5; grid-row: 1;}
.b-svc_number {font-size: 0.75rem; letter-spacing: 0.24em; color: var(--gold);}
.b-svc_name {margin-top: 0.75rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 4rem); line-height: 1.05; letter-spacing: -0.015em;}
/* What the service is, in plain words, under its name */
.b-svc_type {margin-top: 0.85rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);}
[data-tone="paper"] .b-svc_type, [data-tone="paper"] .b-svc_points li span {color: var(--gold-ink);}
.b-svc_lead {margin-top: 1.25rem; font-family: var(--serif); font-size: clamp(1.25rem, 1.6vw, 1.6rem); line-height: 1.3;}
.b-svc_text {margin-top: 1.25rem; font-size: clamp(1.05rem, 1.29vw, 1.2rem); line-height: 1.6; color: var(--text-dim);}
.b-svc_points {margin: 1.75rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(185, 164, 126, 0.45);}
.b-svc_points li {display: flex; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(185, 164, 126, 0.45); font-size: 1rem;}
.b-svc_points li span {min-width: 2.5rem; font-size: 0.75rem; letter-spacing: 0.16em; color: var(--gold); padding-top: 0.2rem;}
.b-svc-cta {padding: clamp(6rem, 11vw, 10rem) 0; background-color: var(--limestone); text-align: left;}
.b-svc-cta_title {max-width: 18ch; margin-top: 1.25rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 5.8rem); line-height: 1.02; letter-spacing: -0.015em;}
.b-svc-cta_text {max-width: 32rem; margin-top: 1.5rem;}
.b-svc-cta .b-button {margin-top: 2.5rem;}
.b-svc-cta_work {margin-top: 2rem;}
.b-svc-cta_work .b-textlink {color: var(--forest);}
@media (max-width: 991px) {
  .b-svc-index {grid-template-columns: minmax(0, 1fr);}
  .b-svc-group_head, .b-svc {display: block;}
  .b-svc-group_q {margin-top: 1.5rem;}
  .b-svc_body {margin-top: 2rem;}
}

/* ===== Simple pages (404) ===== */
.b-simple {display: flex; align-items: flex-end; min-height: 100svh; padding: calc(var(--nav-h) + 3rem) 0 clamp(4rem, 9vh, 7rem); background-color: var(--paper);}
.b-simple_title {margin-top: 1.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 8vw, 8rem); line-height: 0.98; letter-spacing: -0.03em;}
.b-simple_text {max-width: 32rem; margin-top: 1.5rem;}
.b-simple_links {display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 2.5rem;}

/* ===== Gold cursor (cursor in benison.js; fine pointers without reduced motion only) ===== */
html.b-cursor-on, html.b-cursor-on * {cursor: none !important;}
html.b-cursor-on input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), html.b-cursor-on textarea, html.b-cursor-on [contenteditable="true"] {cursor: text !important;}
.b-cursor-trail {position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; pointer-events: none;}
.b-cursor {position: fixed; inset: 0; z-index: 2147483001; pointer-events: none; opacity: 0; transition: opacity 0.25s ease;}
.b-cursor-shown .b-cursor {opacity: 1;}
.b-cursor-text .b-cursor {opacity: 0;}
.b-cursor_dot, .b-cursor_ring {position: absolute; left: 0; top: 0; width: 0; height: 0;}
.b-cursor_dot {transform: translate3d(var(--x, -100px), var(--y, -100px), 0);}
.b-cursor_ring {transform: translate3d(var(--rx, -100px), var(--ry, -100px), 0);}
.b-cursor_dot i, .b-cursor_ring i {position: absolute; display: block; border-radius: 50%;}
.b-cursor_dot i {left: -4px; top: -4px; width: 8px; height: 8px; background-color: #C2AA7C; box-shadow: 0 0 0 1px rgba(23, 59, 50, 0.5), 0 0 12px rgba(185, 164, 126, 0.45); transition: transform 0.3s var(--ease-out);}
.b-cursor_ring i {left: -20px; top: -20px; width: 40px; height: 40px; border: 1px solid #C2AA7C; box-shadow: 0 0 0 1px rgba(23, 59, 50, 0.22), inset 0 0 0 1px rgba(23, 59, 50, 0.12); background-color: rgba(185, 164, 126, 0.1); opacity: 0; transform: scale(0.3); transition: transform 0.35s var(--ease-out), opacity 0.3s ease;}
.b-cursor-hover .b-cursor_ring i {opacity: 1; transform: scale(1);}
.b-cursor-hover .b-cursor_dot i {transform: scale(0.6);}
.b-cursor-press .b-cursor_ring i {transform: scale(0.82);}
.b-cursor_label {position: absolute; left: 0; top: 0; padding: 0.35rem 0.6rem; border-radius: 2px; background-color: var(--gold); color: var(--forest); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; transform: translate3d(calc(var(--rx, -100px) + 1.6rem), calc(var(--ry, -100px) + 0.9rem), 0); opacity: 0; transition: opacity 0.25s ease;}
.b-cursor-labelled .b-cursor_label {opacity: 1;}

/* ===== Reduced motion: no veil, nothing held back ===== */
@media (prefers-reduced-motion: reduce) {
  .b-veil {display: none;}
  *, *::before, *::after {scroll-behavior: auto !important;}
}