/* ============================================================================
   discovery.css — the Opportunities page.

   BUILT TO THE BRIEF OF 2026-09-07, ON THE v1 DESIGN SYSTEM. Read the head
   note in opportunities.html first; it carries the architecture, the
   disclosure decisions and the provenance of every value on the page. The two
   source documents are:

     .forge/source-docs/adam-inputs/2026-09-07-opportunities-and-deal-page-specs.md
     .forge/source-docs/adam-inputs/2026-09-07-lighter-is-v1.md

   ---------------------------------------------------------------------------
   THE FIRST HALF OF THIS FILE IS home-d.css, COPIED VERBATIM.

   Lines 128-362 and 364-486 of assets/css/home-d.css at the time of writing:
   the reset, the token block, the wrap, the type system, the links and
   buttons, the focus ring, the section grounds with their movement rhythm,
   and the .hd-d disclosure primitive. Not one value is altered. The boundary
   is marked, and a drift check is a diff of the two ranges.

   WHY COPIED RATHER THAN LINKED. Lighter is v1 and home-d.html is becoming
   the homepage, which means home-d.css is about to be renamed. A stylesheet
   link into a file that is mid-rename is a broken page waiting for a merge,
   and a broken link is exactly the class of failure _build/check.py exists to
   catch after the fact rather than before. THE DAY THE v1 LAYER GETS ITS OWN
   FILE, delete everything above the boundary marker and link that instead -
   this copy is a bridge, not an argument against a shared layer.

   WHY THE CLASS NAMES STAY hd- IN THE COPIED HALF. So the two ranges stay
   diffable, and so a reader who knows the homepage recognises the same
   primitive rather than meeting a second one that behaves identically. The
   disclosure door on this page is the disclosure door on the homepage: same
   markup, same inline script, same aria-expanded contract, same behaviour
   with scripting off.

   ---------------------------------------------------------------------------
   THE SECOND HALF IS THIS PAGE, NAMESPACED op-.

   THE GROUND SEQUENCE IS THE SYSTEM'S THREE MOVEMENTS: navy for the short
   top, PAPER for the twelve opportunities and the comparison, navy for the
   foot. Two ground switches, and every colour below reads a ground-aware
   alias, so nothing is re-specified per ground.

   CONTRAST, MEASURED AGAINST THE TOKEN PAIRS. On paper: ink 15.9:1,
   ink-2 8.6:1, ink-3 4.87:1. On navy: white, on-d-2 12.2:1, on-d-3 7.2:1.
   Gold is never text on paper (2.06:1) - the selected filter chip inverts to
   the navy ground instead of washing gold, which is the same pair the top and
   the foot of this page already prove.

   NOTHING UNDER 11px. The eyebrow and the axis labels are 11px, fine is 13,
   detail 15, body 17. Four sizes below display, exactly as on the homepage.

   TAP TARGETS. Every control clears 40px: the chips, the Clear button, the
   door's 44px ring, and the .hd-more links inherit their 40px floor from the
   copied layer.
   ============================================================================ */


/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body.hd-body{
  margin:0;
  background:var(--hd-navy);
  color:var(--hd-on-d);
  font-family:var(--hd-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}

:root{
  /* ---- ground ------------------------------------------------------- */
  --hd-navy:      #08152A;
  --hd-navy-deep: #050D1A;
  --hd-navy-2:    #0B1B33;
  --hd-line-d:    rgba(255,255,255,.13);
  --hd-line-d2:   rgba(255,255,255,.22);

  --hd-paper:     #F7F5F0;
  --hd-paper-2:   #FFFFFF;
  --hd-line-l:    #DFD9CD;
  --hd-line-l2:   #C9C0AF;

  /* ---- ink ---------------------------------------------------------- */
  --hd-ink:    #0C1B2E;   /* 15.9:1 on paper                             */
  --hd-ink-2:  #33455A;   /* 8.6:1                                       */
  --hd-ink-3:  #5C6D80;   /* 4.87:1  — the floor, fine print only        */

  --hd-on-d:   #FFFFFF;
  --hd-on-d-2: #C6D2E0;   /* 12.2:1 on navy                              */
  --hd-on-d-3: #93A5B9;   /* 7.2:1  — the floor on navy                  */

  /* ---- accent — two golds, because one gold cannot do both grounds --- */
  --hd-gold:      #D9A441;   /* 8.1:1 on navy · 2.06:1 on paper, never text there */
  --hd-gold-soft: #E9CB93;
  --hd-gold-deep: #7E5A1D;   /* 5.7:1 on paper                            */
  --hd-gold-fill: linear-gradient(135deg,#F0AD27,#D99B1B);

  /* ---- type --------------------------------------------------------- */
  --hd-serif:"Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif;
  --hd-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --hd-fine:.8125rem;   /* 13 */
  --hd-detail:.9375rem; /* 15 */
  --hd-body:1.0625rem;  /* 17 */

  /* ---- layout ------------------------------------------------------- */
  --hd-wrap:1180px;
  --hd-gut:clamp(20px,4.4vw,44px);
  --hd-pad:clamp(60px,8.8vw,144px);
  --hd-ease:cubic-bezier(.2,.6,.3,1);

  /* GROUND-AWARE ALIASES. Every component below reads these instead of naming
     a colour, so a section changes ground by setting six variables rather than
     by having each rule re-specified. This is the mechanism that let the
     standard and the responsibility section move navy -> paper without a single
     duplicated component rule. */
  --hd-fg:      var(--hd-on-d);
  --hd-fg-2:    var(--hd-on-d-2);
  --hd-fg-3:    var(--hd-on-d-3);
  --hd-line:    var(--hd-line-d);
  --hd-line-2:  var(--hd-line-d2);
  --hd-accent:  var(--hd-gold);
  --hd-accent-h:var(--hd-gold-soft);
}

/* ---------------------------------------------------------------- wrap -- */
.hd{width:100%;max-width:var(--hd-wrap);margin:0 auto;padding-inline:var(--hd-gut)}

/* -------------------------------------------------------- type system -- */
.hd-eyebrow{
  display:block;margin:0 0 clamp(14px,1.6vw,20px);
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--hd-accent);
}

.hd-h1{
  margin:0;
  font-family:var(--hd-serif);font-weight:400;
  font-size:clamp(2.5rem,6vw,4.75rem);
  line-height:1.02;letter-spacing:-.018em;
  text-wrap:balance;
  color:#fff;max-width:17ch;
}
.hd-h1 em{font-style:normal;color:var(--hd-gold-soft)}

.hd-h2{
  margin:0;
  font-family:var(--hd-serif);font-weight:400;
  font-size:clamp(2rem,3.9vw,3.35rem);
  line-height:1.07;letter-spacing:-.016em;
  text-wrap:balance;
  color:var(--hd-fg);max-width:19ch;
}
.hd-h2 em{font-style:normal;color:var(--hd-accent)}
.hd-h2--wide{max-width:26ch}

.hd-h3{
  margin:0;
  font-family:var(--hd-serif);font-weight:400;
  font-size:clamp(1.6rem,2.4vw,2.15rem);
  line-height:1.12;letter-spacing:-.012em;text-wrap:balance;color:var(--hd-fg);
}
.hd-h3 em{font-style:normal;color:var(--hd-accent)}
.hd-h3--wide{max-width:34ch}

.hd-lede{
  margin:0;
  max-width:58ch;
  font-size:var(--hd-body);
  line-height:1.66;color:var(--hd-fg-2);
}
.hd-lede+.hd-lede{margin-top:clamp(12px,1.3vw,17px)}

.hd-hd{margin:0 0 clamp(24px,3.2vw,48px)}
.hd-hd--tight{margin-bottom:clamp(22px,2.6vw,36px)}
/* Outside a split header the lede still needs its gap from the heading. */
.hd-hd:not(.hd-hd--split)>.hd-lede{margin-top:clamp(18px,2vw,26px)}

/* SPLIT SECTION HEADERS — move 2 in the head note.
   Eleven eyebrows, eleven headings and eight ledes is thirty pieces of
   apparatus introducing eleven bands. Stacked on a 1092px container the
   heading measures 19-26ch and the lede 58ch, so every section opening also
   leaves the right half empty. That is not air; air is space you gave, and this
   was space nothing wanted.

   The eyebrow and heading are one unit in .hd-hd__lead, the lede is the facing
   column in .hd-hd__body. TWO WRAPPERS, NOT SIX GRID CHILDREN, because placing
   loose children by nth-of-type reverses any section that carries two ledes:
   auto-placement fills the earliest empty cell, so with lede 1 pinned to row 2
   lede 2 lands in row 1 ABOVE it. The evaluation header carries two ledes and
   did exactly that, rendering its second sentence first while DOM order stayed
   correct. Wrappers make it structural instead of positional, and the bug
   cannot come back.

   THIS IS NOT WHAT THE HERO DOES, deliberately. The hero's job is ONE claim, so
   it stays a single axis and the reader is never asked to choose between two
   columns before finishing the first sentence. A section header's job is claim
   plus orientation, which is two things, and a spread is the normal answer. */
/* BELOW THE BREAKPOINT THE SPREAD IS TWO STACKED BLOCKS, and stacked blocks
   need the gap the column-gap was providing. Without this the lede butts
   straight against the last line of the heading at every width under 1000 —
   which is every phone, i.e. the width he actually reads on. */
.hd-hd--split>.hd-hd__body{margin-top:clamp(18px,2.4vw,26px)}
@media (min-width:1000px){
  .hd-hd--split{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    column-gap:clamp(36px,4.4vw,72px);
    align-items:start;
  }
  .hd-hd--split>.hd-hd__body{margin-top:0}
}

/* ------------------------------------------------------------- links --- */
.hd-more{
  display:inline-flex;align-items:center;gap:10px;
  min-height:40px;
  font-size:var(--hd-detail);font-weight:600;letter-spacing:.005em;
  color:var(--hd-accent);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--hd-ease),border-color .18s var(--hd-ease);
}
.hd-more .ar{transition:transform .18s var(--hd-ease)}
/* --hd-accent-h is the ground-aware hover: soft gold on navy, and DARKER gold
   on paper. Soft gold is 1.5:1 on paper and cannot be a hover state there. */
.hd-more:hover{color:var(--hd-accent-h);border-bottom-color:var(--hd-accent-h)}
.hd-more:hover .ar{transform:translateX(4px)}

.hd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 28px;
  font-family:var(--hd-sans);font-size:var(--hd-detail);font-weight:600;letter-spacing:.01em;
  text-decoration:none;border:1px solid transparent;border-radius:2px;
  cursor:pointer;
  transition:transform .18s var(--hd-ease),box-shadow .18s var(--hd-ease),
             background-color .18s var(--hd-ease),border-color .18s var(--hd-ease),
             color .18s var(--hd-ease);
}
.hd-btn .ar{transition:transform .18s var(--hd-ease)}
.hd-btn:hover .ar{transform:translateX(4px)}
.hd-btn--gold{color:#120C02;background:var(--hd-gold-fill)}
.hd-btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(217,155,27,.32)}
.hd-btn--ghost{color:#fff;border-color:rgba(255,255,255,.32);background:transparent}
.hd-btn--ghost:hover{border-color:rgba(255,255,255,.64);background:rgba(255,255,255,.08)}
.hd-btn--ink{color:#fff;background:var(--hd-navy)}
.hd-btn--ink:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(12,27,46,.26);background:#0E1F3A}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--hd-accent);outline-offset:3px;border-radius:2px;
}

/* ---------------------------------------------------------- sections --- */
.hd-sec{padding:var(--hd-pad) 0}
.hd-dark{background:var(--hd-navy)}
.hd-dark-2{background:var(--hd-navy-deep)}
/* THE GROUND SWITCH, IN ONE PLACE. Seven variables, and every component
   follows. This is why the standard and the responsibility section could move
   to paper without a single duplicated component rule. */
.hd-paper{
  background:var(--hd-paper);
  --hd-fg:      var(--hd-ink);
  --hd-fg-2:    var(--hd-ink-2);
  --hd-fg-3:    var(--hd-ink-3);
  --hd-line:    var(--hd-line-l);
  --hd-line-2:  var(--hd-line-l2);
  --hd-accent:  var(--hd-gold-deep);
  --hd-accent-h:#553B0E;
  color:var(--hd-ink);
}

/* MOVEMENT-INTERNAL RHYTHM — the reason this page is shorter than the control
   while carrying more space where it matters.

   Air belongs BETWEEN the movements, not evenly along the page. The control
   pays the same toll at every one of its ten seams, whether the ground changes
   or not. Here the seams INSIDE a movement close to roughly half, and the full
   measure is spent only where navy meets paper. Two sections on the same ground
   are chapters of one field, and reading them as one field is the whole point
   of having three movements instead of eleven bands. */
.hd-paper + .hd-paper,
.hd-dark + .hd-dark,
.hd-dark + .hd-dark-2{padding-top:clamp(38px,4.4vw,68px)}
.hd-paper:has(+ .hd-paper),
.hd-dark:has(+ .hd-dark),
.hd-dark:has(+ .hd-dark-2){padding-bottom:clamp(38px,4.4vw,68px)}

/* ==========================================================================
   THE DISCLOSURE PRIMITIVE — .hd-d

   One object, four places: the four questions, the three parties, the three
   Request Access questions, the three FAQs. Thirteen controls, one silhouette.

   IT SHIPS OPEN AND CSS CLOSES IT, which is the architecture he named on
   2026-09-07. The panel has no closing rule of its own; the ONLY thing that
   collapses it is the html.hd-js block below, and that class is set by the
   inline script before first paint. With scripting off no rule matches, every
   answer renders, and the buttons are display:none - so nothing is hidden and
   nothing is dead.

     html:not(.hd-js) .hd-d__sum{display:none}   <- no dead controls
     html.hd-js       ... [aria-expanded=false] ... {display:none}  <- closed

   THE STATE IS aria-expanded AND NOTHING ELSE. The CSS keys off the attribute
   directly, so the announced state and the visual state cannot drift apart -
   there is no class to forget to add. :has() is doing the work a parent
   selector was always needed for; it is why this primitive needs no wrapper
   class and no script beyond the nine inline lines.

   WHAT THIS COST. These were native <details>, and a <details> opens under the
   browser's own find-in-page. A button does not. That property is genuinely
   gone and it is in the report, not absorbed quietly. Everything else survives
   - a button is keyboard-native and screen-reader-native by construction.

   The 56px row is a target, not a link at the end of a list, and it clears the
   40px floor. Everything inside inherits the ground-aware variables, so the
   same markup is correct on navy and on paper.                               */
.hd-d{border-bottom:1px solid var(--hd-line)}

/* THE LABEL IS NOT INSIDE THE BUTTON, AND THAT IS FORCED RATHER THAN CHOSEN.

   The standard disclosure pattern puts the label in the button. Here the
   button is display:none when scripting is off - that is what stops it being a
   dead control - and a label inside it would go with it. It did, in the first
   build of this page: with JavaScript disabled the four questions, the three
   parties' summary lines and the six question headings all vanished while
   their answers stayed on screen. That is an amputated page, which is the one
   thing this architecture exists to prevent, and it is the exact failure the
   client's rule names: an investor should never have to tap - or enable a
   script - to discover that something exists.

   So the row holds the label and the button holds only the ring, and the
   button takes its accessible name from the label by aria-labelledby. The name
   is identical, no word is repeated, and with scripting off the reader gets
   every question with every answer beneath it and no control at all.

   THE WHOLE ROW IS THE POINTER TARGET, via data-door-head on it, so nothing is
   lost by shrinking the button: the button remains the keyboard and screen
   reader path and the row is a redundant pointer target layered over it.       */
.hd-d__row{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  min-height:56px;padding:13px 0;
  color:var(--hd-fg);
  transition:color .18s var(--hd-ease);
}
html.hd-js .hd-d__row{cursor:pointer}
html.hd-js .hd-d__row:hover{color:var(--hd-accent)}
html.hd-js .hd-d__row:hover .hd-d__n{color:var(--hd-accent)}
html.hd-js .hd-d__row:hover .hd-d__ic{border-color:var(--hd-accent)}
.hd-d__label{
  flex:1 1 auto;min-width:0;
  font-size:var(--hd-body);font-weight:600;line-height:1.35;letter-spacing:-.004em;
}
.hd-d__n{
  flex:0 0 auto;
  font-size:12px;font-weight:600;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--hd-fg-3);
  transition:color .18s var(--hd-ease);
}
/* 44px of hit area around a 24px ring: the button is now a discrete control
   rather than a full-width row, so it has to clear the 40px floor on its own. */
.hd-d__sum{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;margin-left:auto;
  width:44px;height:44px;padding:0;
  background:none;border:0;border-radius:50%;
  font:inherit;color:inherit;cursor:pointer;
}
/* The affordance: a 24px ring with a plus that loses its vertical bar when
   open. currentColor, so it follows the ground and the hover state without a
   second declaration. */
.hd-d__ic{
  position:relative;flex:0 0 auto;
  width:24px;height:24px;
  border:1px solid var(--hd-line-2);border-radius:50%;
  transition:border-color .2s var(--hd-ease);
}
.hd-d__ic::before,.hd-d__ic::after{
  content:"";position:absolute;top:50%;left:50%;
  background:currentColor;transform:translate(-50%,-50%);
  transition:opacity .2s var(--hd-ease);
}
.hd-d__ic::before{width:10px;height:1.5px}
.hd-d__ic::after{width:1.5px;height:10px}
/* GOLD MEANS YOU DID THIS. Nothing arrives gold; the ring becomes gold because
   the reader opened it, which is how the page teaches its interaction without
   a legend. Same rule on the operator chevron. */
.hd-d__sum[aria-expanded="true"] .hd-d__ic::after{opacity:0}
.hd-d__sum[aria-expanded="true"] .hd-d__ic{border-color:var(--hd-accent)}
.hd-d__sum:hover .hd-d__ic{border-color:var(--hd-accent)}
.hd-d__a{
  padding:0 0 clamp(18px,2vw,26px);
  max-width:58ch;
}
.hd-d__a p{
  margin:0 0 12px;
  font-size:var(--hd-detail);line-height:1.66;color:var(--hd-fg-2);
}
.hd-d__a p:last-child{margin-bottom:0}

/* ---- THE TWO RULES THAT MAKE THE ARCHITECTURE, AND NOTHING ELSE ---- */
html:not(.hd-js) .hd-d__sum{display:none}
html.hd-js .hd-d:has(.hd-d__sum[aria-expanded="false"])>.hd-d__a{display:none}
/* An answer arriving is a small event, not a performance. Off under
   prefers-reduced-motion by the global rule at the foot of this file. */
html.hd-js .hd-d>.hd-d__a{animation:hd-open .26s var(--hd-ease) both}
@keyframes hd-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}


/* .hd-fine, from line 1391 of home-d.css. It sits far below the two ranges
   copied above and is the one rule pulled from outside them, because the foot
   of this page uses it. Verbatim, like everything else here. NOTE: on paper it
   would be wrong - on-d-3 is a navy token - and the only place it is used here
   is the navy tail. */
.hd-fine{
  margin:clamp(30px,3.4vw,48px) 0 0;max-width:78ch;
  font-size:var(--hd-fine);line-height:1.68;color:var(--hd-on-d-3);
}

/* ==========================================================================
   ^ END OF THE COPIED v1 LAYER. Everything above this line is home-d.css,
   verbatim, and everything below is this page.
   ========================================================================== */

/* ==========================================================================
   PAGE COMPONENTS — op-*

   Everything above this line is the shared v1 layer, copied. Everything below
   belongs to this page and is namespaced op-. Nothing below overrides a token;
   every colour reads a ground-aware alias, so a section changes ground by
   changing its class and not one rule here is re-specified.

   TWO SURFACES AND NO BOXES. A card is not a panel: it is separated from the
   next by a rule and it sits directly on the section ground. That is home-d's
   rule and here it also removes a measurement hazard - a card shadow darkens
   the vellum under its own text and moves the ground out from under a token
   that measured correctly (verify/README failure 11). Flat ground, no shadow,
   no ambiguity about what a contrast reading is against.

   PHONE FIRST. Every block below is written at 390 and adapted upward. The two
   width-dependent decisions are stated where they happen.
   ========================================================================== */

/* [hidden] IS NOT A SUGGESTION, BUT `display:` OUTRANKS IT.

   The attribute works through the UA stylesheet's display:none, so ANY author
   display rule beats it. Two rules below would have beaten it, and both are
   load-bearing:

     .op-live is display:flex  -> with scripting off, a live "Clear all"
                                  rendered under a filter region that was not
                                  there. A dead control, which is the one
                                  thing this page's architecture exists to
                                  prevent.
     .op-card is display:grid at 900 and above
                               -> the filter sets card.hidden = true, so at
                                  every desktop width the filters would have
                                  narrowed NOTHING while the live line
                                  confidently announced "Showing 1 of 12".

   Found by _build/verify/behave-opps.mjs on 2026-09-07, after the visual
   sweep at five widths had passed clean. A contrast harness cannot see this;
   only driving the controls can.                                             */
[hidden]{display:none!important}

/* ------------------------------------------------------------- the top --- */
.op-top__lede{max-width:52ch}
.op-top__lede+.op-top__lede{margin-top:clamp(12px,1.3vw,17px)}

/* ------------------------------------------------------------ the tools ---
   The whole filter region is one .hd-d door. On paper the primitive's own
   border-bottom is the seam; the panel needs the full measure rather than the
   58ch the primitive gives an answer. */
.op-tools{margin:0 0 clamp(30px,3.6vw,52px)}
.op-tools__panel{max-width:none;padding-bottom:clamp(20px,2.4vw,30px)}

.op-fs+.op-fs{margin-top:clamp(18px,2vw,26px)}
.op-fs__l{
  margin:0 0 10px;
  font-family:var(--hd-sans);
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--hd-fg-3);
}

.op-chip{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;margin:0 8px 8px 0;padding:0 14px;
  font-family:var(--hd-sans);font-size:var(--hd-detail);font-weight:500;
  line-height:1.25;text-align:left;
  color:var(--hd-fg);background:transparent;
  border:1px solid var(--hd-line-2);border-radius:2px;
  cursor:pointer;
  transition:border-color .18s var(--hd-ease),background-color .18s var(--hd-ease),
             color .18s var(--hd-ease);
}
.op-chip__n{
  font-size:var(--hd-fine);font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--hd-fg-3);
}
.op-chip:hover{border-color:var(--hd-accent);color:var(--hd-accent)}
.op-chip:hover .op-chip__n{color:var(--hd-accent)}
/* SELECTED IS INK, NOT GOLD. Gold on paper is 2.06:1 and can never carry
   text; the filled state inverts to the navy ground instead, which is the
   same pair the page already proves at the top and the foot. */
.op-chip[aria-pressed="true"]{
  color:#fff;background:var(--hd-navy);border-color:var(--hd-navy);
}
.op-chip[aria-pressed="true"] .op-chip__n{color:var(--hd-on-d-3)}
/* A GROUP WHOSE DATA IS NOT PUBLISHED STILL RENDERS, with its real count of
   none, so the gap is visible BEFORE it is clicked. It is not a control,
   because there is nothing behind it: aria-disabled keeps it announced and
   focusable while pointer-events stop it pretending. */
.op-chip[aria-disabled="true"]{
  color:var(--hd-fg-3);border-color:var(--hd-line);
  cursor:default;pointer-events:none;
}

.op-live{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin:0 0 clamp(24px,2.8vw,36px);
  font-size:var(--hd-detail);color:var(--hd-fg-2);
}
.op-clear{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;
  min-height:40px;padding:0;
  font:inherit;font-weight:600;color:var(--hd-accent);
  background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;
}
.op-clear:hover{color:var(--hd-accent-h);border-bottom-color:var(--hd-accent-h)}

/* ---------------------------------------------------------- the groups ---
   Three capital-status groups in his order, Open first, plus Closed which is
   empty and renders anyway. The count is a numeral beside the heading, never a
   fraction: a count is presence, a denominator would be a score. */
.op-group+.op-group{margin-top:clamp(44px,5vw,80px)}
.op-group__hd{
  padding-bottom:clamp(14px,1.6vw,20px);
  border-bottom:2px solid var(--hd-line-2);
}
.op-group__t{
  margin:0;
  font-family:var(--hd-serif);font-weight:400;
  font-size:clamp(1.6rem,2.4vw,2.15rem);line-height:1.12;letter-spacing:-.012em;
  color:var(--hd-fg);
}
.op-group__n{
  display:inline-block;margin-left:10px;
  font-family:var(--hd-sans);font-size:var(--hd-fine);font-weight:600;
  letter-spacing:.1em;font-variant-numeric:tabular-nums;
  color:var(--hd-fg-3);vertical-align:4px;
}
.op-group__note{
  margin:10px 0 0;max-width:62ch;
  font-size:var(--hd-detail);line-height:1.62;color:var(--hd-fg-2);
}
.op-group--none .op-group__hd{border-bottom-width:1px}

/* ------------------------------------------------------------ the card --- */
.op-card{
  padding:clamp(28px,3.4vw,44px) 0 clamp(30px,3.6vw,46px);
  border-bottom:1px solid var(--hd-line);
}
.op-card:last-child{border-bottom:0;padding-bottom:0}

.op-card__name{
  margin:0;
  font-family:var(--hd-serif);font-weight:400;
  font-size:clamp(1.45rem,2.1vw,1.9rem);line-height:1.14;letter-spacing:-.012em;
  color:var(--hd-fg);text-wrap:balance;
}
.op-card__where{
  margin:8px 0 0;
  font-size:var(--hd-detail);line-height:1.5;color:var(--hd-fg-2);
}
.op-card__where span{color:var(--hd-fg-3)}
.op-card__lede{
  margin:12px 0 0;max-width:52ch;
  font-size:var(--hd-body);line-height:1.6;color:var(--hd-fg-2);
}

/* THE TWO AXES. Each renders with its axis NAME, always, because a coloured
   word without its axis is exactly how capital status and project stage got
   conflated. The value leads in the foreground weight and the published note
   follows it in the body weight, so "Open" and "Currently raising capital"
   are one sentence rather than a badge with a caption. */
.op-axes{
  margin:clamp(20px,2.2vw,28px) 0 0;
  border-top:1px solid var(--hd-line);
}
.op-axes>div{
  padding:13px 0;
  border-bottom:1px solid var(--hd-line);
}
.op-axes dt{
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--hd-fg-3);
}
.op-axes dd{
  margin:6px 0 0;max-width:56ch;
  font-size:var(--hd-detail);line-height:1.6;color:var(--hd-fg-2);
}
.op-axes dd b{font-weight:600;color:var(--hd-fg)}
.op-axes dd b::after{content:" \00B7 ";color:var(--hd-fg-3);font-weight:400}

/* THE FACT ROWS. Every value carries its own qualifier in its own label -
   "Planned beds", "Existing garages", "Site" - so no figure on this page is
   unlabelled and no projected figure sits in a group with a historical one.
   They are NOT split into two visual groups, and that is a decision rather
   than an oversight: no card here carries a projected return beside a
   historical return, which is the pairing his rule exists to prevent, and
   separating an acreage from a bed count would invent a distinction the
   record does not make. The projection note renders only on a card that has
   a planned figure. */
.op-facts{margin:clamp(18px,2vw,24px) 0 0}
.op-facts>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:9px 0;
  border-bottom:1px solid var(--hd-line);
}
.op-facts dt{
  flex:0 1 auto;
  font-size:var(--hd-detail);color:var(--hd-fg-3);
}
.op-facts dd{
  flex:0 0 auto;margin:0;text-align:right;
  font-size:var(--hd-detail);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--hd-fg);
}
.op-facts__note{
  margin:12px 0 0;max-width:60ch;
  font-size:var(--hd-fine);line-height:1.62;color:var(--hd-fg-3);
}

/* =================== THE SIX HEADINGS =====================================
   His six, in his order, on every card, no exceptions. Nothing here is behind
   a control: the card IS the two-or-three-line summary and the depth is the
   deal page, so a control over any of it would be disclosure for presence.

   THE ABSENCE IS SET IN THE SAME TYPE AS THE ANSWER. Same size, same colour,
   same measure, no marker, no dash, no italic, no fraction. "Display absence
   as confidently as you display data" is a typographic instruction as much as
   an editorial one, and the moment an absence is styled differently from an
   answer it reads as a deficiency rather than as a fact about the record.  */
.op-six{margin:clamp(24px,2.8vw,36px) 0 0}
.op-six__row{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  column-gap:12px;
  padding:clamp(16px,1.8vw,22px) 0;
  border-top:1px solid var(--hd-line);
}
.op-six__row:first-child{border-top:2px solid var(--hd-line-2)}
.op-six__n{
  font-size:var(--hd-fine);font-weight:600;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;line-height:1.5;
  color:var(--hd-fg-3);
}
.op-six__c{min-width:0}
.op-six__t{
  margin:0;
  font-size:var(--hd-detail);font-weight:700;letter-spacing:.004em;
  line-height:1.4;color:var(--hd-fg);
}
.op-six__q{
  margin:3px 0 0;max-width:52ch;
  font-size:var(--hd-fine);line-height:1.5;color:var(--hd-fg-3);
}
.op-six__lead{
  margin:11px 0 0;max-width:52ch;
  font-size:var(--hd-detail);font-weight:600;line-height:1.5;color:var(--hd-fg);
}
/* THE OPERATOR LINK KEEPS THE 40px FLOOR IT INHERITS. An earlier version set
   min-height:auto here to tighten the line, which made every operator name on
   the page a 24px-tall tap target - eleven FAILs from verify.mjs at 390. The
   line is tightened with a negative margin instead, so the target stays 40px
   and the rhythm is unchanged. */
.op-six__lead .hd-more{font-size:var(--hd-detail);margin:-8px 0}
.op-six__b{
  margin:8px 0 0;max-width:58ch;
  font-size:var(--hd-detail);line-height:1.62;color:var(--hd-fg-2);
}
.op-six__b b{font-weight:600;color:var(--hd-fg)}
.op-six__more{color:var(--hd-fg-3)}
/* THE FOUR FIELD NAMES OF THE CAPSTAQ REVIEW render on every card above an
   absence, because field 4 - "what remains an assumption" - is the one he
   singled out as never behind a tap, and a reader must be able to learn what
   the review will contain before it exists. They are the names, not a count
   of how many are missing. */
.op-six__fields{
  display:flex;flex-wrap:wrap;gap:0 6px;
  margin:9px 0 0;padding:0;list-style:none;
  font-size:var(--hd-fine);line-height:1.5;color:var(--hd-fg-2);
}
.op-six__fields li{white-space:nowrap}
/* THE SEPARATOR TRAILS ITS OWN ITEM RATHER THAN LEADING THE NEXT ONE. As a
   ::before on li+li it wrapped to the start of the second line, so field 4 -
   the one he singled out - read as "· What remains an assumption" hanging off
   a new line. As a ::after it stays on the line it belongs to and a wrap is
   invisible. */
.op-six__fields li:not(:last-child)::after{content:"\00B7";color:var(--hd-fg-3);margin-left:6px}

.op-card__go{margin:clamp(20px,2.2vw,26px) 0 0}

/* ---------------------------------------------------- the card at width ---
   AT 900 AND ABOVE THE CARD IS TWO COLUMNS: identity on the left, the six
   headings on the right, in one uninterrupted vertical run. The six never
   break into a grid of their own, because two columns of three would make the
   fixed order ambiguous, and the order is the point.

   TWO WRAPPERS, NOT LOOSE GRID CHILDREN. home-d learned this the hard way:
   placing children by nth-of-type reverses a block the moment a conditional
   child appears, and the projection note is conditional on eleven of twelve
   cards. Wrappers make the placement structural instead of positional. */
@media (min-width:900px){
  .op-card{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:clamp(36px,4.2vw,64px);
    align-items:start;
  }
  .op-six{margin-top:0}
  .op-six__row{grid-template-columns:28px minmax(0,1fr);column-gap:18px}
  .op-six__row:first-child{border-top:0;padding-top:0}
  .op-card__where,.op-card__lede{max-width:38ch}
}

/* ================= WHAT THE RECORD HOLDS — the comparison ================
   Twelve rows against the same six columns. An empty cell is EMPTY: no dash,
   no "TBD", no "not published", nothing. That is the one place on this page
   where an absence is not spelled out, and it is deliberate - the column
   header names the question for all twelve rows at once, so presence is
   carried by the header, and fifty-four repetitions of "Not published" would
   bury the shape this table exists to show. The <caption> states the rule
   before a screen reader reaches the first cell.

   NO VERTICAL RULES. Cell borders would draw a box around every hole and turn
   the gap into a grid of empty boxes, which reads as a scorecard. Horizontal
   rules only, so an empty cell is unmarked space in a row.

   REMOVED BELOW 1000px RATHER THAN DISABLED. Seven columns at 390 is a
   horizontal scroller, not a comparison, and there is no control for this
   view, so there is no dead control either. Nothing is lost: every cell here
   is on a card above in full sentences with its absence named.            */
.op-mxsec{display:none}
@media (min-width:1000px){
  .op-mxsec{display:block}
}
.op-mx{
  width:100%;margin:clamp(24px,2.8vw,36px) 0 0;
  border-collapse:collapse;table-layout:fixed;
}
.op-mx caption{
  caption-side:top;
  margin:0 0 clamp(18px,2vw,24px);max-width:78ch;
  text-align:left;
  font-size:var(--hd-fine);line-height:1.62;color:var(--hd-fg-3);
}
.op-mx th,.op-mx td{
  padding:10px 16px 10px 0;
  text-align:left;vertical-align:top;
}
.op-mx thead th{
  border-bottom:2px solid var(--hd-line-2);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.4;color:var(--hd-fg-3);
}
.op-mx tbody th,.op-mx tbody td{border-bottom:1px solid var(--hd-line)}
.op-mx tbody th{
  width:19%;
  font-size:var(--hd-detail);font-weight:600;line-height:1.4;color:var(--hd-fg);
}
/* 110x20 was a FAIL at 1440: a row header is the only way into a card from
   this table, so it clears the floor like every other control on the page. */
/* display:block, not inline-flex. As a flex box the underline was drawn under
   the BOX, so a two-line opportunity name got one rule under its second line
   spanning the whole column. A real text-decoration follows both lines.
   min-height keeps the 40px floor a 110x20 FAIL at 1440 put there. */
.op-mx tbody th a{
  display:block;min-height:40px;padding-top:2px;
  color:inherit;
  text-decoration:underline;text-decoration-color:var(--hd-line-2);
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.op-mx tbody th a:hover{color:var(--hd-accent);text-decoration-color:var(--hd-accent)}
.op-mx__cap{
  display:block;margin-top:5px;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hd-fg-3);
}
.op-mx tbody td{
  font-size:var(--hd-fine);line-height:1.55;color:var(--hd-fg-2);
}

/* ------------------------------------------------------------- the tail --- */
.op-tail .hd-lede{max-width:64ch}
.op-tail .hd-lede+.hd-lede{margin-top:clamp(12px,1.3vw,17px)}
.op-tail__cta{
  display:flex;flex-wrap:wrap;gap:14px;
  margin:clamp(28px,3.2vw,42px) 0 0;
}
.op-tail .hd-fine a{color:var(--hd-on-d-2);text-decoration:underline;text-underline-offset:3px}
.op-tail .hd-fine a:hover{color:var(--hd-gold)}

/* ----------------------------------------------------------- the seams ---
   The comparison is display:none below 1000px, so the seam between the list
   and the tail is computed from a section that is not painted. Give the list
   its full bottom measure back at the widths where the table is absent. */
@media (max-width:999px){
  .op-list{padding-bottom:var(--hd-pad)}
}

/* AT 900 AND ABOVE THE FILTER TOGGLE IS REMOVED AND THE PANEL IS ALWAYS OPEN.
   Removed rather than disabled, and the redundant row target stands down by
   itself: the inline script refuses to act when the button it duplicates has
   no offsetParent, which is verify/README failure 13 handled at the source
   rather than patched here. Placed after the primitive so source order, not
   specificity, settles the override. */
@media (min-width:900px){
  html.hd-js .op-tools.hd-d:has(.hd-d__sum[aria-expanded="false"])>.hd-d__a{display:block}
  html.hd-js .op-tools .hd-d__row{cursor:default}
  html.hd-js .op-tools .hd-d__row:hover,
  html.hd-js .op-tools .hd-d__row:hover .hd-d__label{color:var(--hd-fg)}
  .op-tools .hd-d__sum{display:none}
  .op-tools{border-bottom:0}
  .op-tools__panel{padding-bottom:0}
  .op-tools .hd-d__row{min-height:auto;padding-bottom:clamp(14px,1.6vw,20px);border-bottom:1px solid var(--hd-line)}
  .op-fs{display:grid;grid-template-columns:minmax(140px,14%) minmax(0,1fr);column-gap:clamp(20px,2.4vw,36px);align-items:start}
  .op-fs__l{margin:11px 0 0}
}

/* --------------------------------------------------------- preferences -- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .hd-btn:hover{transform:none}
}

/* ===========================================================================
   THE THREE TIERS, 2026-09-08
   ---------------------------------------------------------------------------
   One opportunity is open, two are under review, nine are pipeline. The page
   used to render all twelve at the same weight, so it read as twelve
   investable deals. The client: "the page visually gives roughly equal weight
   to one investable opportunity and eleven things an investor cannot currently
   invest in. That's backwards."

   The weighting is done with COLUMN COUNT and IMAGE HEIGHT, not with opacity.
   A pipeline project is not a faded version of an open one, it is a real
   project at an earlier stage, and dimming it would read as a defect.
   ========================================================================= */

.op-hero{padding:clamp(56px,7vw,104px) 0 clamp(26px,3vw,38px)}
.op-hero .hd-lede{max-width:46ch;margin-top:clamp(14px,1.6vw,20px)}

.op-filters{padding-bottom:clamp(20px,2.4vw,30px)}
.op-chips{display:flex;flex-wrap:wrap;gap:9px}
.op-chip{
  padding:9px 16px;font:inherit;font-size:var(--hd-detail);
  color:var(--hd-on-d-2);background:transparent;
  border:1px solid var(--hd-line-d);border-radius:999px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.op-chip:hover{color:var(--hd-on-d);border-color:var(--hd-line-d2)}
.op-chip.is-on{color:#120C02;background:var(--hd-gold);border-color:var(--hd-gold)}

.op-tier{padding-block:clamp(38px,5vw,70px)}
.op-tier__note{max-width:60ch;margin:10px 0 0;color:var(--hd-on-d-2)}
.op-tier + .op-tier{border-top:1px solid var(--hd-line-d)}

.op-grid{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(24px,3vw,40px)}

/* Tier 1 owns the page: one card, full width, largest image. */
.op-tier--open   .op-grid{grid-template-columns:1fr}
.op-tier--open   .op-card__media img{aspect-ratio:16/7;object-fit:cover;width:100%}

/* Tier 2 creates anticipation without competing. */
.op-tier--review .op-grid{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}

/* Tier 3 says only "there is more coming". */
.op-tier--ahead  .op-grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.op-tier--ahead  .op-card{padding:clamp(14px,1.6vw,20px)}
.op-tier--ahead  .op-card__lede,
.op-tier--ahead  .op-facts{display:none}
.op-tier--ahead  .op-card__name{font-size:1.05rem}

/* The business plan, as one line. "This tells me more in five seconds than
   three paragraphs do." Rendered only where the record holds the strategy:
   eight of the twelve deals publish no exit, so they show the build sequence
   and stop, rather than asserting an exit nobody has recorded. */
.op-plan{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:clamp(14px,1.8vw,20px) 0 0;padding:0;list-style:none;
  font-size:var(--hd-fine);letter-spacing:.06em;text-transform:uppercase;
  color:var(--hd-on-d-2);
}
.op-plan li{display:flex;align-items:center;gap:8px}
.op-plan li + li::before{content:"\2192";color:var(--hd-gold);font-size:14px}

.op-card__by{margin:clamp(12px,1.4vw,16px) 0 0;font-size:var(--hd-detail)}
.op-card__by span{color:var(--hd-on-d-3);margin-right:6px}
.op-card__by a{color:var(--hd-gold);text-decoration:none;border-bottom:1px solid transparent}
.op-card__by a:hover{border-bottom-color:currentColor}

@media (max-width:560px){
  /* One column everywhere. "Someone should be able to thumb through the
     entire active pipeline in 30 seconds." */
  .op-tier--review .op-grid,
  .op-tier--ahead  .op-grid{grid-template-columns:1fr}
}

/* ===========================================================================
   TEASER CARDS, 2026-09-10
   ---------------------------------------------------------------------------
   "Basic information, kind of like a teaser... Very, very simple. Keep it
   very tight. The less information, the better." Image with its property
   type and status on it, name, place, three facts, the operator, one button,
   and a line that opens the interest form for that deal.
   ========================================================================= */
/* Doubled classes on purpose: the teaser reuses .op-grid and .op-card, and the
   old list rules (.op-tier--open .op-grid at 1fr; .op-card's padding, its
   last-child reset and its align-items:start) otherwise win. They put the three
   teasers in one column, shrank each image to its 900px file width, and
   clipped the last card's bottom edge. */
.op-grid.op-grid--lg{display:grid;gap:clamp(18px,2.4vw,28px);margin-top:0;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.op-card.op-card--lg{display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;
  background:var(--hd-raised,#1B2E47);border:1px solid var(--hd-line-d);border-radius:10px}
.op-card--lg .op-card__img{position:relative;display:block;aspect-ratio:3/2;overflow:hidden}
.op-card--lg .op-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--hd-ease)}
.op-card--lg:hover .op-card__img img{transform:scale(1.03)}
.op-cat{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#0C1B2E;background:rgba(247,245,240,.94)}
.op-st{position:absolute;right:12px;top:12px;padding:5px 10px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.op-st--available{color:#0C1B2E;background:#7FD3A8}
.op-st--review{color:#0C1B2E;background:var(--hd-gold)}
.op-card--lg .op-card__b{display:flex;flex-direction:column;flex:1;padding:clamp(16px,2vw,22px)}
.op-card--lg h3{margin:0;font-family:var(--hd-serif);font-weight:400;font-size:1.35rem;line-height:1.2}
.op-card--lg h3 a{color:var(--hd-on-d);text-decoration:none}
.op-where{margin:4px 0 0;color:var(--hd-on-d-3);font-size:.9375rem}
.op-facts{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px;color:var(--hd-on-d-2);font-size:.9375rem}
.op-facts b{color:var(--hd-on-d);font-weight:600}
.op-by{margin:14px 0 0;font-size:.875rem;color:var(--hd-on-d-3)}
.op-by::before{content:"Developed by ";}
.op-by a{color:var(--hd-gold);text-decoration:none}
.op-go{display:inline-flex;align-self:flex-start;gap:8px;margin-top:auto;padding-top:18px;
  font-weight:600;color:var(--hd-gold);text-decoration:none}
.op-go:hover{color:var(--hd-gold-soft)}
.op-lock{margin-top:10px;font-size:.875rem;color:var(--hd-on-d-3);text-decoration:none}
.op-lock::before{content:"";display:inline-block;width:9px;height:8px;margin-right:8px;
  border:1.5px solid currentColor;border-radius:2px;vertical-align:-1px;
  box-shadow:0 -4px 0 -2.5px currentColor}
.op-lock:hover{color:var(--hd-on-d)}
.op-tier--open{padding-top:0}
.op-tier--open .op-tier__note{margin-top:18px}

/* The interest form sits on the navy page, so it takes the paper panel. */
.op-body .x-form{padding:clamp(40px,5vw,72px) 0}
.op-body .x-form:not(.is-modal) .x-form__panel,
.op-body .x-form.is-open .x-form__panel{background:var(--hd-paper);border-radius:10px;
  padding:clamp(22px,3vw,34px);color:var(--hd-ink)}

/* ==========================================================================
   WHERE THINGS STAND  (Adam's panel, our numbers, 2026-09-12)
   ========================================================================== */
.op-ov{padding:clamp(26px,3vw,40px) 0 0}
.op-ov__in{
  display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(14px,1.6vw,20px);
  grid-template-columns:1fr;
}
@media (min-width:900px){.op-ov__in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.op-ov__stats{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.op-ov__stat{padding:12px 14px;background:var(--hd-raised,#1B2E47);border:1px solid var(--hd-line-d)}
.op-ov__k{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-on-d-3)}
.op-ov__n{display:block;margin:6px 0 2px;font-family:var(--hd-serif);font-weight:400;font-size:1.75rem;line-height:1;color:var(--hd-gold)}
.op-ov__d{display:block;font-size:13px;line-height:1.35;color:var(--hd-on-d-2)}
.op-ov__ct{display:block;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-on-d-3)}
.op-ov__row{display:grid;grid-template-columns:minmax(0,1fr) 110px 20px;gap:12px;align-items:center;margin-top:8px}
.op-ov__lbl{font-size:15px;color:var(--hd-on-d-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-ov__bar{display:block;height:5px;background:rgba(255,255,255,.12);border-radius:1px}
.op-ov__bar i{display:block;height:100%;background:var(--hd-gold);border-radius:1px}
.op-ov__v{font-size:15px;font-variant-numeric:tabular-nums;color:var(--hd-on-d);text-align:right}
@media (max-width:560px){.op-ov__stats{grid-template-columns:1fr}}

/* ==========================================================================
   WHAT IS PUBLIC, AND WHAT COMES AFTER
   ========================================================================== */
.op-access{padding:clamp(40px,5vw,72px) 0 0}
.op-access__h{margin:10px 0 0}
.op-access__grid{
  display:grid;gap:clamp(14px,1.8vw,22px);margin-top:clamp(20px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.op-access__col{padding:clamp(20px,2.4vw,28px);border:1px solid var(--hd-line-d);border-radius:2px}
.op-access__col--gated{background:var(--hd-raised,#1B2E47)}
.op-access__col ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.op-access__col li{position:relative;padding-left:18px;font-size:17px;line-height:1.5;color:var(--hd-on-d-2)}
.op-access__col li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--hd-gold)}
.op-access__note{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--hd-on-d-3)}

/* ==========================================================================
   THE PROPERTY TYPES  (founder, 2026-09-11)
   --------------------------------------------------------------------------
   The fifteen types Capstaq sources across, printed in full so the range is
   visible when three opportunities are open. Two columns of plain type on a
   rule, the ones with something current marked.
   ========================================================================== */
.op-types{padding:clamp(44px,6vw,86px) 0 clamp(52px,7vw,96px);border-top:1px solid var(--hd-line-d)}
/* Columns, not a grid: the list has to read DOWN the first column and then
   across, which is the order it was given in. A row-flow grid puts items 1, 2
   and 3 side by side. */
.op-types__list{
  margin:clamp(24px,3vw,38px) 0 0;padding:0;list-style:none;
  columns:1;column-gap:clamp(24px,4vw,64px);
}
@media (min-width:700px){.op-types__list{columns:2}}
@media (min-width:1040px){.op-types__list{columns:3}}
.op-type{
  break-inside:avoid;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-top:1px solid var(--hd-line-d);
  font-size:17px;line-height:1.35;color:var(--hd-on-d-2);
}
.op-type.is-open{color:var(--hd-on-d)}
.op-type__now{
  flex:none;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hd-gold);
}
@media (max-width:640px){.op-type{font-size:15px}}
/* A type with something current is the link to it. */
.op-type.is-open{display:block;padding:0}
.op-type.is-open > a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;color:var(--hd-on-d);text-decoration:none;
}
.op-type.is-open > a:hover{color:var(--hd-gold)}
.op-type.is-open > a:hover .op-type__now{color:var(--hd-gold-soft)}