/* ==========================================================================
   belucent-web — the interaction, chrome and section layer.

   Loads on top of belucent-report.css. Adds the half of a page the report
   system has no concept of: what happens when someone points at a thing,
   tabs to it, presses it, or is not allowed to use it.

   Three devices, declared before use:
     RING       a 2px gold outline on :focus-visible only.
     LIFT       hover raises the existing top inset highlight, .10 to .26.
                Press dips it to .04, so a click reads as the light dipping.
     UNDERLINE  a link carries the existing hairline as an underline at rest,
                and that hairline turns gold on hover.

   The one rule: interaction increases contrast, never decreases it.
   Nothing moves. Transitions are colour and border only.
   ========================================================================== */

:root{ --ink-5:#4a4f56; --dur:140ms; --ease:cubic-bezier(.2,.6,.3,1); }
:root[data-theme="light"]{ --ink-5:#a8a8b0; }

/* ---- the ring. One rule, everything focusable inherits it. ---- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* ---- the underline ---- */
a{ color:var(--ink); text-decoration:none;
   border-bottom:1px solid var(--hair-2);
   transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
a:hover{ color:var(--warm); border-bottom-color:var(--gold); }
a:active{ color:var(--gold-hot); }
a:focus-visible{ border-bottom-color:var(--gold); }
/* links that are already inside a lit header or a chip carry no underline */
.bh a, .chip a, .navline a{ border-bottom:0; }

/* ---- the lift ---- */
.btn{ display:inline-block;
  font:900 11px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  padding:14px 20px; border:1px solid var(--hair-2);
  background:rgba(9,10,11,.9); color:var(--ink-2);
  cursor:pointer; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,246,228,.10);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease); }
.btn:hover{ color:var(--ink); border-color:var(--gold);
            box-shadow:inset 0 1px 0 rgba(255,246,228,.26); }
.btn:active{ box-shadow:inset 0 1px 0 rgba(255,246,228,.04); }
.btn[disabled],.btn.is-disabled{
  color:var(--ink-5); border-color:var(--hair); box-shadow:none; cursor:not-allowed; }

.btn-gold{ border:1px solid var(--gold); color:var(--gold-hot);
  background:linear-gradient(163deg, rgba(238,175,31,.22), rgba(238,175,31,.06) 40%, rgba(11,10,8,.95));
  box-shadow:inset 0 1px 0 rgba(255,246,228,.24); }
.btn-gold:hover{ color:#000; background:var(--gold); border-color:var(--gold-hot); }

/* ---- rows that can be pointed at ---- */
tbody tr{ transition:background var(--dur) var(--ease); }
tbody tr:hover{ background:rgba(255,246,228,.035); }
.acts li{ transition:background var(--dur) var(--ease); }
.acts li:hover{ background:rgba(255,246,228,.03); }

/* ---- in-page anchor row ---- */
.navline{ display:flex; flex-wrap:wrap; gap:0 26px; margin-top:30px;
  padding-top:16px; border-top:1px solid var(--hair); }
.navline a{ font:900 11px/2.4 var(--mono); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
  transition:color var(--dur) var(--ease); }
.navline a:hover,.navline a:focus-visible{ color:var(--gold); }

/* ---- skip link. Present on every page, visible only when focused. ---- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:26px; top:14px; z-index:200; position:fixed;
  background:var(--gold); color:#000; padding:12px 18px;
  font:900 11px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; }

/* ---- light theme adjustments ---- */
:root[data-theme="light"] .btn{ background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
:root[data-theme="light"] .btn:hover{ color:var(--ink); border-color:var(--gold); }
:root[data-theme="light"] .btn-gold{
  background:linear-gradient(163deg, rgba(238,175,31,.30), rgba(238,175,31,.10) 40%, #FFFDF6); }
:root[data-theme="light"] .btn-gold:hover{ color:#fff; background:var(--gold); }
:root[data-theme="light"] tbody tr:hover{ background:rgba(90,70,20,.045); }
:root[data-theme="light"] .acts li:hover{ background:rgba(90,70,20,.035); }

/* ---- the visitor's own setting, honoured ---- */
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ==========================================================================
   PART 2 — MAKING CONTAINERS SCALE

   The problem, diagnosed rather than guessed. A lit container does not
   survive being made small, for three separate reasons:

     1. The glow is a fixed spread. 7px, 26px and 70px whatever the box size.
        In a third-width column that 70px halo is proportionally enormous and
        the box reads as a smudge.
     2. The padding is fixed. 28px/30px body, 16px/24px header. A 300px card
        is then mostly padding.
     3. The type inside sizes against the WINDOW, not the box.
        clamp(27px, 4vw, 44px) gives a small card 44px type on a wide screen.

   The fix is container queries: the box measures the space it has been put
   in, not the browser window. Three size bands. The gradient stops are
   already percentages so those need no change, which is why the falloff
   still reads correctly at every size.

   Note for beam: these are @container RULES setting plain px values, not cq
   length units. Beam's ban is on cq units, which it is not using.
   ========================================================================== */

.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
/* every cell becomes the thing its contents measure themselves against */
.grid > *, .cq{ container-type:inline-size; min-width:0; }
/* A cell is a column. One box in a cell fills the cell. Several boxes stacked
   in a cell each size to their own content, which is what height:100% broke:
   every box claimed the full row height and the column overflowed. */
.grid > *{ display:flex; flex-direction:column; gap:14px; }
.grid > * > .box, .grid > * > .c,
.grid > * > .gold-box, .grid > * > .red-box{ margin-bottom:0; }
.grid > * > :only-child{ flex:1 1 auto; }

/* ---- band: roomy. under about 620px of container ---- */
@container (max-width:620px){
  .bb{ padding:22px 22px; }
  .bh{ padding:13px 18px; font-size:11px; letter-spacing:.13em; gap:12px; }
  .move .lead{ font-size:27px; line-height:1.12; max-width:none; }
  .move .because{ font-size:16.5px; }
  .gold-box{ box-shadow:0 0 5px rgba(255,216,107,.5), 0 0 16px rgba(238,175,31,.22),
             0 0 38px rgba(238,175,31,.10), inset 0 1px 0 rgba(255,246,228,.3); }
  .red-box{ box-shadow:0 0 5px rgba(255,143,107,.45), 0 0 15px rgba(255,97,55,.2),
            0 0 34px rgba(255,97,55,.09), inset 0 1px 0 rgba(255,246,228,.24); }
}

/* ---- band: tight. under about 400px of container ---- */
@container (max-width:400px){
  .bb{ padding:16px 17px; }
  .bh{ padding:11px 15px; font-size:10px; letter-spacing:.1em; gap:9px; }
  .bh .r{ font-size:10px; }
  .move .lead{ font-size:21px; line-height:1.16; margin-bottom:12px; }
  .move .because{ font-size:15.5px; line-height:1.5; }
  .move dl{ grid-template-columns:1fr; margin-top:18px; padding-top:16px; }
  .move dd{ border-top:0; padding-top:0; padding-bottom:11px; }
  .counts div{ padding:13px 16px; }
  .counts b{ font-size:22px; }
  /* the 150px label column mangles wrapping in a narrow box */
  .kv{ grid-template-columns:1fr; }
  .kv dt{ padding:11px 0 3px; }
  .kv dd{ border-top:0; padding-top:0; padding-bottom:11px; }
  .checkline{ flex-direction:column; gap:5px; }
  .checkline span:last-child{ text-align:left; }
  .gold-box{ box-shadow:0 0 4px rgba(255,216,107,.45), 0 0 11px rgba(238,175,31,.18),
             0 0 24px rgba(238,175,31,.08), inset 0 1px 0 rgba(255,246,228,.28); }
  .red-box{ box-shadow:0 0 4px rgba(255,143,107,.4), 0 0 10px rgba(255,97,55,.17),
            0 0 22px rgba(255,97,55,.07), inset 0 1px 0 rgba(255,246,228,.22); }
}

/* ==========================================================================
   PART 3 — SITE HEADER, NAV, FOOTER
   New. The report system has no page chrome beyond a masthead.
   The header is flat: it does NOT carry the warm pool. The pool belongs to
   the content underneath, and a lit strip across the top of every page would
   spend the light budget before the page has said anything.
   ========================================================================== */

.site-head{ position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:30px;
  padding:0 26px; min-height:72px;
  background:rgba(0,0,0,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
  transition:border-color var(--dur) var(--ease); }
.site-head.is-stuck{ border-bottom-color:var(--hair-2); }
.site-head .mark{ display:flex; align-items:center; border-bottom:0; }
.site-head .mark img{ height:26px; width:auto; display:block; }
.site-nav{ display:flex; gap:0 28px; margin-left:auto; align-items:center; }
.site-nav a{ font:900 11px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:0; padding:8px 0;
  transition:color var(--dur) var(--ease); }
.site-nav a:hover{ color:var(--ink); }
.site-nav a[aria-current="page"]{ color:var(--gold); }
.site-head .btn{ padding:11px 16px; }

/* the hamburger. Hidden until the drawer breakpoint. */
.menu-btn{ display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  padding:12px; color:var(--ink-2); }
.menu-btn span{ display:block; width:22px; height:2px; background:currentColor; margin:4px 0; }

/* The report system styles a bare <footer> as a centred mono end-slug for a
   document. A site footer is a different thing entirely, so it has to undo
   that inheritance before it does anything of its own. */
.site-foot{ border-top:1px solid var(--hair); padding:52px 26px 40px; margin-top:60px;
  text-align:left; text-transform:none; letter-spacing:normal;
  font:400 16px/1.6 var(--sans); color:var(--ink-2); }
.site-foot p{ text-transform:none; letter-spacing:normal; }
.site-foot .cols{ max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
.site-foot h5{ font:900 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 16px; }
.site-foot ul{ list-style:none; padding:0; margin:0; }
.site-foot li{ margin-bottom:11px; }
.site-foot a{ font-size:15.5px; color:var(--ink-2); border-bottom:0; }
.site-foot a:hover{ color:var(--ink); }
.site-foot .fine{ max-width:1120px; margin:38px auto 0; padding-top:22px;
  border-top:1px solid var(--hair);
  font:900 11px/1.8 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4); }

@media (max-width:768px){
  .site-nav{ display:none; }
  .menu-btn{ display:block; }
  /* the drawer carries its own call to action, so the header stops duplicating it */
  .site-head > .btn{ display:none; }
  .site-foot .cols{ grid-template-columns:1fr 1fr; }
  .grid-3,.grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .site-foot .cols{ grid-template-columns:1fr; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PART 4 — FORMS
   The largest missing piece. Same light logic as everything else: a field at
   rest is unlit, and focus LIGHTS it. Error and success change the border and
   add a line of text, never a tint under the copy.
   ========================================================================== */

.field{ margin-bottom:22px; }
.field label:not(.tick):not(.switch){ display:block; font:900 11px/1 var(--mono); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.field .help{ display:block; font-size:14.5px; color:var(--ink-4); margin-top:8px; }
.field .req{ color:var(--gold); }

.input, input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=search], textarea, select{
  width:100%; display:block;
  font:400 16.5px/1.5 var(--sans); color:var(--ink);
  background:rgba(9,10,11,.9); border:1px solid var(--hair-2);
  padding:14px 16px; border-radius:0; appearance:none;
  box-shadow:inset 0 1px 0 rgba(255,246,228,.05);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
textarea{ min-height:130px; resize:vertical; }
select{ background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
        linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:44px; }

.input:hover, input:hover, textarea:hover, select:hover{ border-color:var(--hair-2);
  box-shadow:inset 0 1px 0 rgba(255,246,228,.12); }
.input:focus, input:focus, textarea:focus, select:focus{ outline:none;
  border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,246,228,.18), 0 0 0 3px rgba(238,175,31,.22); }
input::placeholder, textarea::placeholder{ color:var(--ink-4); }
input:disabled, textarea:disabled, select:disabled{
  color:var(--ink-5); border-color:var(--hair); box-shadow:none; cursor:not-allowed; }

.field.is-bad input, .field.is-bad textarea, .field.is-bad select{ border-color:var(--red); }
.field.is-bad .help{ color:var(--red-hot); }
.field.is-good input, .field.is-good textarea, .field.is-good select{ border-color:rgba(var(--green-e),.9); }
.field.is-good .help{ color:rgb(var(--green-e)); }

/* tick and radio. Square, because nothing in this system has a rounded corner
   except the radio, which has to be round to be read as a radio. */
.tick{ display:flex; align-items:flex-start; gap:12px; margin-bottom:13px; cursor:pointer; }
.tick input{ width:20px; height:20px; flex:0 0 20px; margin:1px 0 0;
  appearance:none; background:rgba(9,10,11,.9); border:1px solid var(--hair-2);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.tick input[type=radio]{ border-radius:50%; }
.tick input:hover{ border-color:var(--gold); }
.tick input:checked{ background:var(--gold); border-color:var(--gold); }
.tick input[type=checkbox]:checked:after{ content:""; width:10px; height:6px;
  border-left:2px solid #000; border-bottom:2px solid #000; transform:rotate(-45deg) translate(1px,-1px); }
.tick input[type=radio]:checked:after{ content:""; width:8px; height:8px; border-radius:50%; background:#000; }
.tick span, .switch span{ font-size:16.5px; color:var(--ink-2); line-height:1.45;
  text-transform:none; letter-spacing:0; font-weight:400; font-family:var(--sans); }
.tick input:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* switch */
.switch{ display:flex; align-items:center; gap:13px; cursor:pointer; }
.switch input{ appearance:none; width:46px; height:24px; margin:0; cursor:pointer;
  background:rgba(9,10,11,.9); border:1px solid var(--hair-2); position:relative;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.switch input:after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  background:var(--ink-3); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.switch input:checked{ background:rgba(238,175,31,.2); border-color:var(--gold); }
.switch input:checked:after{ transform:translateX(22px); background:var(--gold); }
.switch input:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.fieldset{ border:1px solid var(--hair); padding:24px 26px; margin:0 0 22px; }
.fieldset legend{ font:900 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); padding:0 10px; }

.btn.is-loading{ color:transparent; position:relative; pointer-events:none; }
.btn.is-loading:after{ content:""; position:absolute; inset:0; margin:auto;
  width:14px; height:14px; border:2px solid var(--gold); border-top-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---- forms and chrome in light ---- */
:root[data-theme="light"] .site-head{ background:rgba(255,252,243,.88); }
:root[data-theme="light"] .site-head .mark img{ filter:invert(1); }
:root[data-theme="light"] .input,
:root[data-theme="light"] input[type=text],:root[data-theme="light"] input[type=email],
:root[data-theme="light"] input[type=tel],:root[data-theme="light"] input[type=url],
:root[data-theme="light"] input[type=password],:root[data-theme="light"] input[type=search],
:root[data-theme="light"] textarea,:root[data-theme="light"] select{
  background:#fff; box-shadow:inset 0 1px 2px rgba(0,0,0,.05); }
:root[data-theme="light"] .tick input,:root[data-theme="light"] .switch input{ background:#fff; }
:root[data-theme="light"] .tick input:checked{ background:var(--gold); border-color:var(--gold); }
:root[data-theme="light"] .tick input[type=checkbox]:checked:after{ border-color:#fff; }
:root[data-theme="light"] .tick input[type=radio]:checked:after{ background:#fff; }
:root[data-theme="light"] .switch input:checked:after{ background:var(--gold); }

/* ==========================================================================
   PART 5 — MOBILE DRAWER
   Finishes the navigation set. Opens from the right, traps focus while open,
   closes on Escape and on clicking the backdrop. No transform on the page
   behind it, because a sliding page is the thing that reads as a template.
   ========================================================================== */

.drawer-back{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none;
  transition:opacity 180ms var(--ease); }
.drawer-back.is-open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(340px,86vw);
  background:#050506; border-left:1px solid var(--hair-2);
  padding:22px 26px 40px; overflow-y:auto;
  transform:translateX(100%); transition:transform 220ms var(--ease); }
.drawer.is-open{ transform:translateX(0); }
.drawer .close{ background:none; border:0; color:var(--ink-2); cursor:pointer;
  font:900 11px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  padding:10px 0; margin-bottom:18px; }
.drawer .close:hover{ color:var(--gold); }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{ font:900 13px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); padding:17px 0; border-bottom:1px solid var(--hair); }
.drawer nav a:hover,.drawer nav a:focus-visible{ color:var(--gold); }
.drawer .btn{ margin-top:24px; width:100%; text-align:center; }
:root[data-theme="light"] .drawer{ background:#fff; }
:root[data-theme="light"] .drawer-back{ background:rgba(40,30,10,.4); }
body.is-locked{ overflow:hidden; }

/* ==========================================================================
   PART 6 — IMAGERY
   The photography IS the light model. A white-hot B with no colour at source;
   the colour is what the light lands on, amber on sand, cool on the grass.
   So a hero must not have a gold box or a coloured wash laid over it. The
   image is already doing the job the lit container does elsewhere.

   The B is centred and sits on the horizon. Brand rule: nothing goes over it.
   So text never goes in the middle. Two ways out, and both are crops rather
   than overlays:
     .hero-l   shifts the crop right, so the B moves right and text sits left
     .hero-r   shifts the crop left, so the B moves left and text sits right
   The scrim is a falloff, not a blanket: dark at the text edge, gone by the
   time it reaches the B. Same logic as a lit container, running sideways.
   ========================================================================== */

.hero{ position:relative; min-height:min(78vh,660px); display:flex; align-items:flex-end;
  overflow:hidden; background:#000; }
/* Moving the B is NOT object-position. When the container is wider than the
   picture's own 3:2, object-fit:cover crops top and bottom and shows the full
   width, so object-position X does nothing at all. The B has to be moved by
   over-sizing the image and anchoring it to one edge. */
.hero img{ position:absolute; top:0; bottom:0; height:100%; width:128%; max-width:none;
  object-fit:cover; z-index:0; }
.hero-l img{ left:0; right:auto; }    /* B pushed right, text sits left  */
.hero-r img{ right:0; left:auto; }    /* B pushed left,  text sits right */
/* Hard stop so a headline can never reach the B, whatever the copy length. */
.hero-l .w > *, .hero-r .w > *{ max-width:min(600px,46%); }
.hero-l .w .row, .hero-r .w .row{ max-width:none; }
.hero .scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-l .scrim{ background:linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.6) 26%,
                rgba(0,0,0,.2) 46%, transparent 62%); }
.hero-r .scrim{ background:linear-gradient(270deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.6) 26%,
                rgba(0,0,0,.2) 46%, transparent 62%); }
.hero .w{ z-index:2; padding-top:70px; padding-bottom:64px; }
.hero-r .w{ display:flex; justify-content:flex-end; }
.hero h1{ margin:14px 0 18px; max-width:15ch; }
.hero .standfirst{ max-width:46ch; color:var(--ink); }
.hero .row{ margin-top:30px; }
/* CENTRED B. The brand default, and the stronger image. The B sits on the
   horizon, so the lower third of the frame is empty ground. The headline goes
   there and the mark is never touched or moved. Costs one thing: the copy has
   to be short, because there is less room. */
.hero-c{ align-items:flex-end; }
.hero-c img{ width:100%; left:0; right:0; object-position:50% 100%; }
/* Anchored to the bottom of the frame. Here the container is WIDER than the
   picture's 3:2, so cover crops vertically and object-position Y does work.
   Taking the crop from the sky lifts the B up the frame and hands the whole
   lower third back to the copy. */
.hero-c .scrim{ background:linear-gradient(180deg, transparent 0%, transparent 46%,
                rgba(0,0,0,.34) 62%, rgba(0,0,0,.82) 84%, rgba(0,0,0,.94) 100%); }
.hero-c{ min-height:min(88vh,760px); }
.hero-c .w > *{ max-width:none; }
.hero-c h1{ max-width:20ch; font-size:clamp(30px,4.2vw,50px); }
/* the copy block is capped so it can only ever occupy the ground, never rise
   into the mark, whatever the headline says */
.hero-c .w{ padding-bottom:56px; }
.hero-c .standfirst{ max-width:52ch; }
@media (max-width:880px){ .hero-c img{ height:40vh; } }

/* text-only hero: no photograph, the warm pool does the work instead */
.hero-flat{ min-height:auto; background:none; }
.hero-flat .w{ padding-top:96px; padding-bottom:76px; }
/* split hero: half text, half image, no scrim needed because they do not overlap */
.hero-split{ display:grid; grid-template-columns:1fr 1fr; min-height:min(72vh,600px); align-items:center; }
.hero-split .pane{ padding:64px 26px 64px 0; }
.hero-split .shot{ position:relative; height:100%; min-height:340px; overflow:hidden; }
.hero-split .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* secondary photography: grayscale plus contrast, so it never competes with the B */
.shot-2 img{ filter:grayscale(1) contrast(1.16) brightness(.92); }
figure{ margin:0 } figcaption{ font:900 10.5px/1.6 var(--mono); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-4); margin-top:11px; }

/* ==========================================================================
   PART 7 — PAGE SECTIONS
   Shape first. A feature set is a LIST, not three cards with icons. A price
   comparison is a TABLE, because it is a dataset. An index of writing is a
   LIST. None of these get a card, a badge or a centred column, because that
   is the pattern belucent-brand's own checklist bans.
   ========================================================================== */

/* a band: a full-width strip that owns its own light */
.band{ position:relative; overflow:hidden; padding:72px 0; border-top:1px solid var(--hair); }
.band-cta .w{ max-width:820px; text-align:left; }
.band-cta h2{ font-size:clamp(30px,4.4vw,52px); line-height:1.04; letter-spacing:-.035em;
  margin:0 0 18px; max-width:18ch; color:var(--warm); }

/* feature set: a list with real hierarchy. Never an icon-heading-blurb triplet. */
.feats{ list-style:none; padding:0; margin:0; counter-reset:f; }
.feats li{ counter-increment:f; display:grid; grid-template-columns:64px 1fr 1fr;
  gap:0 30px; padding:26px 0; border-top:1px solid var(--hair); align-items:start; }
.feats li:before{ content:counter(f,decimal-leading-zero);
  font:900 12px/1.5 var(--mono); letter-spacing:.1em; color:var(--gold); }
.feats h3{ font-size:21px; letter-spacing:-.02em; margin:0; }
.feats p{ margin:0; color:var(--ink-2); font-size:16.5px; max-width:52ch; }

/* a quote at scale. No quote mark graphic, no card. */
.quote{ padding:8px 0 0; }
.quote blockquote{ margin:0; font-size:clamp(24px,3.2vw,38px); line-height:1.22;
  letter-spacing:-.025em; color:var(--warm); max-width:24ch; quotes:none; }
.quote figcaption{ margin-top:22px; padding-top:16px; border-top:1px solid var(--hair);
  max-width:34ch; }

/* logo wall: hairline-separated, no boxes */
.wall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--hair); border-left:1px solid var(--hair); }
.wall div{ border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  min-height:96px; display:grid; place-items:center; padding:20px;
  font:900 13px/1 var(--sans); letter-spacing:.02em; color:var(--ink-3);
  transition:color var(--dur) var(--ease); }
.wall div:hover{ color:var(--ink); }

/* FAQ: the disclosure the report system already has, given room */
.faq{ border-top:1px solid var(--hair); }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{ display:flex; align-items:center; gap:20px; padding:24px 0; cursor:pointer;
  font-size:19px; font-weight:700; letter-spacing:-.01em;
  transition:color var(--dur) var(--ease); }
.faq summary:hover{ color:var(--gold); }
.faq summary:after{ content:"+"; margin-left:auto; font:400 24px/1 var(--mono); color:var(--gold); }
.faq details[open] summary:after{ content:"\2013"; }
.faq .a{ padding:0 0 26px; color:var(--ink-2); font-size:16.5px; line-height:1.62; max-width:62ch; }

/* index of writing: a list, not a grid of cards */
.index{ list-style:none; padding:0; margin:0; border-top:1px solid var(--hair); }
.index li{ border-bottom:1px solid var(--hair); }
.index a{ display:grid; grid-template-columns:130px 1fr 150px; gap:26px; align-items:baseline;
  padding:24px 0; border-bottom:0; }
.index .date{ font:900 11px/1.6 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); }
.index .t{ font-size:21px; font-weight:700; letter-spacing:-.02em; }
.index .t span{ display:block; font-size:16px; font-weight:400; color:var(--ink-2);
  margin-top:6px; max-width:56ch; }
.index .k{ font:900 10.5px/1.6 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-4); text-align:right; }
.index a:hover .t{ color:var(--gold); }

/* article: prose at measure with asides. Reuses .think from the report system. */
.article .prose{ font-size:18px; max-width:64ch; }
.article .prose h2{ font-size:27px; letter-spacing:-.025em; margin:40px 0 14px; }
.article .prose h3{ font-size:20px; margin:30px 0 10px; }
.article .prose blockquote{ margin:28px 0; padding-left:24px;
  border-left:1px solid var(--gold); font-size:20px; color:var(--warm); }
.aside{ font-size:15.5px; color:var(--ink-3); }

@media (max-width:880px){
  /* Below this the container is taller than the picture, cover starts cropping
     the SIDES, and the B is no longer reliably out of the way. So stop
     overlaying entirely: picture on top, words underneath on black. */
  .hero{ display:block; min-height:0; }
  .hero img{ position:relative; width:100%; height:44vh; min-height:260px; }
  .hero .scrim{ display:none; }
  .hero .w{ padding-top:34px; padding-bottom:44px; }
  .hero-l .w > *, .hero-r .w > *{ max-width:none; }
  .hero-r .w{ display:block; }
  .hero-split{ grid-template-columns:1fr; }
  .hero-split .pane{ padding:44px 26px; }
  .feats li{ grid-template-columns:44px 1fr; gap:0 18px; }
  .feats p{ grid-column:2; margin-top:9px; }
  .index a{ grid-template-columns:1fr; gap:8px; }
  .index .k{ text-align:left; }
}

/* ==========================================================================
   PART 8 — MOTION
   One idea: light arriving. Things fade up a few pixels, once, on first sight.
   Only opacity and transform. Nothing loops, nothing parallaxes, nothing
   moves on scroll after it has arrived. All of it off under reduced-motion,
   which is already handled by the global rule in PART 1.
   ========================================================================== */
.rise{ opacity:0; transform:translateY(12px);
  transition:opacity 520ms var(--ease), transform 520ms var(--ease); }
.rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; } }