/* ============================================================================
   IWS Investment page, page-scoped.  Root class .iwsinv
   v2, 9 Aug 2026.  Governed by IWS_DESIGN.md.

   v1 was competent and forgettable. v2 fixes the relational failures rather
   than adding decoration:
     - the hero had no implied light source, so it read flat. Three-layer mesh.
     - box-shadow on a dark ground is invisible. Replaced with a light bloom.
     - 1fr 1fr centred is the page-builder shape. 12 columns, deliberate overlap.
     - one tracking value served four type sizes. Now scaled inversely to size.
     - the hairline was #E2E8F0 on #F8FAFC, measured 1.18:1, so the structure
       was there but nobody could see it. Darkened to #CBD5E1.
     - a number in a filled circle is a wizard step chip. Replaced with a set
       numeral, which says "the first of five commitments" instead of "step 1".
     - the priorities list and the FAQ wore the same costume. Two shapes now.
     - the figure was stated in the H1 and again as a giant centred numeral two
       screens later. Stated once, in a fact rail, where it carries more weight.

   Rules honoured: R1 one page-scoped hero variant. R2 one marker, pre-painted.
   R3 one eyebrow role. R4 radii 8/14/22/999 only. R5 named tokens only, every
   transparency a documented derivation of one. R6 one motion language, pure CSS
   so nothing can strand at opacity 0, transform and opacity only, honours
   reduced motion. R7 one 1180px container.
   ========================================================================= */

.iwsinv{
  --royal:#0A1776; --sky:#0067E0; --navyglow:#13266B; --deep:#070D2E;
  --ink:#1C1917; --muted:#475569; --line:#CBD5E1; --bg:#F8FAFC;
  --peri:#CFE0FF; --peri-lt:#EAF1FF; --sky-lt:#7BA7FF;
  --amber-ink:#B45309; --amber-deep:#7C2D12;
  --wrap:1180px;
  color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
}

/* Full bleed. The theme wraps post_content in .container.site-content, which
   insets the article, so a dark hero would sit in white gutters. body carries
   overflow-x:clip site-wide, so the scrollbar-width overhang cannot scroll. */
.iwsinv{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);}

/* Do NOT zero .container.site-content's padding-top. The theme's breadcrumb
   lives inside that container, above the hero, and removing the padding slides
   it under the fixed header, where the left-aligned desktop logo lands on top
   of it. Reported as "nav bar is broken" on 9 Aug 2026. The 30px stays. */

.iwsinv *,.iwsinv *::before,.iwsinv *::after{box-sizing:border-box;}
.iwsinv .in{width:min(var(--wrap),100% - 40px);margin-inline:auto;}
@media (max-width:640px){.iwsinv .in{width:min(var(--wrap),100% - 32px);}}

.iwsinv h1,.iwsinv h2,.iwsinv h3{font-family:Sora,system-ui,sans-serif;font-weight:600;margin:0;}
.iwsinv h1{letter-spacing:-.03em;line-height:1.06;margin-inline-start:-.04em;text-wrap:balance;}
.iwsinv h2{letter-spacing:-.02em;line-height:1.14;text-wrap:balance;}
.iwsinv h3{letter-spacing:-.005em;line-height:1.25;}
.iwsinv p{margin:0;line-height:1.65;text-wrap:pretty;}
@media (max-width:600px){.iwsinv h1{line-height:1.14;}}

/* R3 the one eyebrow role, now carrying facts instead of filler. A masthead
   rail: category, place, date on a hairline. Used three times on the page, the
   same device doing the same job, which is what makes a system rather than
   decoration. */
.iwsinv .rail{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  font-family:Sora,system-ui,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding-block:13px;border-block:1px solid var(--line);color:var(--muted);
}
.iwsinv .rail span:nth-child(2){text-align:center;}
.iwsinv .rail span:nth-child(3){text-align:right;}
.iwsinv-hero .rail,.iwsinv-changes .rail{
  border-block-color:rgba(207,224,255,.28);
  border-block-color:color-mix(in srgb,var(--peri) 28%,transparent);
  color:var(--peri);
}
@media (max-width:600px){
  .iwsinv .rail{grid-template-columns:1fr auto;font-size:11px;letter-spacing:.1em;}
  .iwsinv .rail span:nth-child(2){display:none;}
}

/* R2 the marker. Pre-painted because is-in is added by front-page-only JS, and
   iws-global.css declares the .hl gradient site-wide with !important, so the
   hero instance also carries an inline style. Contrast measured 7.97:1 and
   14.25:1 against its two stops. */
.iwsinv .hl.hl{
  background-size:100% 100%;background-repeat:no-repeat;
  padding:.06em .26em .12em;border-radius:8px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* R6 one motion language. Pure CSS keyframes with fill-mode both: no JS
   dependency, so an element can never be stranded invisible. Fires once,
   transform and opacity only, no per-item stagger. */
@media (prefers-reduced-motion:no-preference){
  @keyframes iwsinvRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  .iwsinv-hero .copy,.iwsinv-hero .iwsinv-shot{animation:iwsinvRise .4s cubic-bezier(.22,.61,.36,1) both;}
  .iwsinv-hero .iwsinv-shot{animation-delay:.08s;}
}

/* ---------- 1. HERO --------------------------------------------------- */
.iwsinv-hero{
  position:relative;isolation:isolate;color:#fff;padding:56px 0 84px;
  background-color:var(--deep);
  background-image:
    radial-gradient(120% 85% at 12% 0%, rgba(0,103,224,.20) 0%, transparent 62%),
    radial-gradient(90% 70% at 92% 96%, rgba(19,38,107,.85) 0%, transparent 58%),
    linear-gradient(160deg,var(--deep) 0%,var(--royal) 55%,var(--navyglow) 100%);
}
/* Grain, to kill the banding a large navy gradient shows on cheap panels. No
   mix-blend-mode and no filter: both force compositing on a full-bleed element
   and cost real paint on low-end Android. Low opacity gets the look for free. */
.iwsinv-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.iwsinv-hero .grid{display:grid;gap:40px;margin-top:48px;}
.iwsinv-hero h1{font-size:clamp(34px,5.4vw,60px);color:#fff;}
.iwsinv-hero .lede{margin-top:24px;font-size:clamp(17px,1.9vw,20px);color:var(--peri-lt);max-width:32em;}

/* Fact rail. Tabular figures, because proportional numerals in a stat row is
   one of the most reliable "not typeset" tells there is. */
.iwsinv-facts{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;
  border-top:1px solid rgba(207,224,255,.28);
  border-top-color:color-mix(in srgb,var(--peri) 28%,transparent);
}
.iwsinv-facts div{padding:20px 18px 0 0;}
.iwsinv-facts div + div{
  padding-left:18px;border-left:1px solid rgba(207,224,255,.20);
  border-left-color:color-mix(in srgb,var(--peri) 20%,transparent);
}
.iwsinv-facts dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--peri);font-family:Sora,system-ui,sans-serif;font-weight:600;}
.iwsinv-facts dd{
  margin:8px 0 0;font-family:Sora,system-ui,sans-serif;font-weight:600;
  font-size:clamp(18px,2.4vw,26px);letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums lining-nums;
}
@media (max-width:600px){
  .iwsinv-facts{grid-template-columns:1fr;}
  .iwsinv-facts div + div{padding-left:0;border-left:0;border-top:1px solid rgba(207,224,255,.18);margin-top:16px;}
}

/* The photograph. A light bloom, not a shadow: a dark shadow on a dark ground
   is invisible, it was there because cards have shadows. */
.iwsinv-shot{position:relative;border-radius:22px;overflow:hidden;}
.iwsinv-shot::before{
  content:"";position:absolute;inset:-44px;z-index:-1;
  background:radial-gradient(60% 60% at 50% 62%, rgba(0,103,224,.24), transparent 70%);
}
.iwsinv-shot img{display:block;width:100%;height:auto;}
.iwsinv-shot figcaption{
  background:rgba(255,255,255,.06);color:var(--peri);
  font-size:13px;line-height:1.5;padding:12px 16px;
}

@media (min-width:961px){
  .iwsinv-hero{padding:76px 0 100px;}
  .iwsinv-hero .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px;align-items:start;}
  .iwsinv-hero .copy{grid-column:1 / 8;padding-top:20px;}
  /* Overlaps the text column by one column and drops 64px, so the two blocks
     read as related rather than mirrored. Bleeds toward the viewport edge.
     The img keeps its intrinsic width/height attributes, so aspect-ratio here
     cannot introduce CLS. */
  .iwsinv-hero .iwsinv-shot{
    grid-column:7 / -1;margin-top:64px;margin-right:calc(50% - 50vw + 24px);
    aspect-ratio:4 / 5;
  }
  .iwsinv-hero .iwsinv-shot img{height:100%;object-fit:cover;object-position:50% 42%;}
  .iwsinv-hero .iwsinv-shot figcaption{position:absolute;inset:auto 0 0 0;}
}
@media (max-width:960px){.iwsinv-hero{padding:52px 0 68px;}}

/* ---------- 2. PRIORITIES, an index not a wizard ---------------------- */
.iwsinv-pri{background:var(--bg);padding:96px 0;}
.iwsinv-pri h2{font-size:clamp(26px,3.4vw,40px);max-width:17ch;margin-top:28px;}
.iwsinv-pri .sub{margin-top:16px;max-width:52ch;color:var(--muted);font-size:17px;}
.iwsinv-plist{list-style:none;margin:48px 0 0;padding:0;position:relative;counter-reset:iwsp;}
/* The spine, masked at both ends so it reads as a margin rule rather than a
   timeline. These five priorities are concurrent, not sequential. */
.iwsinv-plist::before{
  content:"";position:absolute;top:0;bottom:0;left:26px;width:1px;background:var(--line);
  -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);
}
.iwsinv-plist li{
  counter-increment:iwsp;position:relative;
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px 20px;padding:22px 0;
}
.iwsinv-plist li + li{border-top:1px solid var(--line);}
.iwsinv-plist li::before{
  content:counter(iwsp,decimal-leading-zero);
  grid-row:1 / span 2;align-self:start;
  font-family:Sora,system-ui,sans-serif;font-weight:600;line-height:1;
  font-size:clamp(38px,6vw,56px);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums;
  /* --peri measured ~1.3:1 on --bg, too faint to register as a device.
     --sky-lt is ~2.3:1: clearly visible, still subordinate to the h3.
     Decorative only, the <ol> carries the real numbering for assistive tech. */
  color:var(--sky-lt);background:var(--bg);padding-block:4px;position:relative;z-index:1;
}
.iwsinv-plist h3{font-size:19px;grid-column:2;}
.iwsinv-plist p{grid-column:2;color:var(--muted);font-size:16px;}
@media (min-width:781px){
  .iwsinv-plist li{grid-template-columns:96px 22ch minmax(0,1fr);gap:0 32px;align-items:center;padding:26px 0;}
  .iwsinv-plist li::before{grid-row:auto;align-self:center;}
  .iwsinv-plist p{grid-column:3;}
  .iwsinv-plist::before{left:44px;}
}

/* ---------- 3. FOUNDER QUOTE ------------------------------------------ */
.iwsinv-quote{background:#fff;padding:80px 0;}
.iwsinv-quote .grid{display:grid;gap:36px;align-items:center;}
@media (min-width:861px){.iwsinv-quote .grid{grid-template-columns:360px minmax(0,1fr);gap:56px;}}
.iwsinv-quote .portrait{border-radius:22px;overflow:hidden;}
.iwsinv-quote .portrait img{display:block;width:100%;height:auto;}
.iwsinv-quote blockquote{margin:0;font-family:Sora,system-ui,sans-serif;font-weight:600;
  font-size:clamp(19px,2.3vw,27px);line-height:1.4;letter-spacing:-.018em;color:var(--royal);}
.iwsinv-quote blockquote p + p{margin-top:18px;}
.iwsinv-quote .who{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
.iwsinv-quote .who strong{display:block;font-family:Sora,system-ui,sans-serif;font-size:16px;color:var(--ink);}
.iwsinv-quote .who span{font-size:15px;color:var(--muted);}

/* ---------- 4. SHAREHOLDERS ------------------------------------------- */
.iwsinv-holders{background:var(--bg);padding:96px 0;}
.iwsinv-holders h2{font-size:clamp(26px,3.4vw,40px);margin-top:28px;}
.iwsinv-holders .intro{margin-top:16px;max-width:58ch;color:var(--muted);font-size:17px;}
.iwsinv-holders .cards{display:grid;gap:24px;margin-top:44px;}
@media (min-width:861px){.iwsinv-holders .cards{grid-template-columns:1fr 1fr;gap:28px;}}
.iwsinv-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;}
.iwsinv-card .top{display:flex;gap:18px;align-items:center;}
.iwsinv-card .avatar{width:84px;height:84px;border-radius:999px;overflow:hidden;flex:0 0 84px;border:2px solid var(--peri);}
.iwsinv-card .avatar img{display:block;width:100%;height:100%;object-fit:cover;}
.iwsinv-card h3{font-size:20px;}
.iwsinv-card .role{margin-top:5px;font-size:14px;color:var(--amber-ink);font-weight:600;}
.iwsinv-card .bio{margin-top:20px;color:var(--muted);font-size:16px;}
.iwsinv-card .links{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;gap:10px;}
.iwsinv-card .links a{
  font-family:Sora,system-ui,sans-serif;font-size:14px;font-weight:600;text-decoration:none;
  color:var(--royal);border:1px solid var(--line);border-radius:8px;padding:9px 14px;
  transition:border-color .2s ease,color .2s ease;
}
.iwsinv-card .links a:hover{border-color:var(--sky);color:var(--sky);}
.iwsinv-card .links a:focus-visible{outline:2px solid var(--sky);outline-offset:2px;}

/* ---------- 5. WHAT CHANGES ------------------------------------------- */
.iwsinv-changes{
  color:#fff;padding:88px 0;background-color:var(--royal);
  background-image:
    radial-gradient(90% 70% at 88% 4%, rgba(0,103,224,.18) 0%, transparent 60%),
    linear-gradient(165deg,var(--royal) 0%,var(--navyglow) 100%);
}
.iwsinv-changes h2{font-size:clamp(26px,3.4vw,40px);color:#fff;max-width:19ch;margin-top:28px;}
.iwsinv-changes dl{margin:44px 0 0;border-top:1px solid rgba(207,224,255,.24);}
.iwsinv-changes .r{display:grid;gap:8px;padding:24px 0;border-bottom:1px solid rgba(207,224,255,.24);}
@media (min-width:781px){.iwsinv-changes .r{grid-template-columns:20ch minmax(0,1fr);gap:36px;align-items:baseline;}}
.iwsinv-changes dt{font-family:Sora,system-ui,sans-serif;font-weight:600;font-size:18px;color:var(--peri);}
.iwsinv-changes dd{margin:0;color:var(--peri-lt);font-size:17px;line-height:1.6;}

/* ---------- 6. LOOKING AHEAD ------------------------------------------ */
.iwsinv-ahead{background:#fff;padding:80px 0;}
.iwsinv-ahead .grid{display:grid;gap:36px;align-items:center;}
@media (min-width:901px){.iwsinv-ahead .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;}}
.iwsinv-ahead h2{font-size:clamp(26px,3.4vw,40px);max-width:15ch;margin-top:28px;}
.iwsinv-ahead p{margin-top:20px;color:var(--muted);font-size:17px;}
.iwsinv-ahead .shot{border-radius:22px;overflow:hidden;}
.iwsinv-ahead .shot img{display:block;width:100%;height:auto;}
.iwsinv-ahead .close{
  margin-top:34px;font-family:Sora,system-ui,sans-serif;font-weight:600;
  font-size:clamp(19px,2.2vw,25px);line-height:1.35;color:var(--royal);letter-spacing:-.018em;
}

/* ---------- 7. FAQ, deliberately a different shape from the priorities -- */
.iwsinv-faq{background:var(--bg);padding:72px 0;}
.iwsinv-faq h2{font-size:clamp(24px,3vw,34px);margin-top:28px;}
.iwsinv-faq .set{margin-top:36px;border-top:1px solid var(--line);}
.iwsinv-faq details{border-bottom:1px solid var(--line);}
.iwsinv-faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:Sora,system-ui,sans-serif;font-weight:600;font-size:18px;
  letter-spacing:-.005em;color:var(--royal);
}
.iwsinv-faq summary::-webkit-details-marker{display:none;}
.iwsinv-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--sky);border-bottom:2px solid var(--sky);
  transform:translateY(-70%) rotate(45deg);transform-origin:center;
  transition:transform .2s ease;
}
.iwsinv-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.iwsinv-faq summary:focus-visible{outline:2px solid var(--sky);outline-offset:-2px;border-radius:8px;}
.iwsinv-faq .a{padding:0 0 24px;color:var(--muted);font-size:16px;max-width:70ch;}
@media (prefers-reduced-motion:reduce){.iwsinv-faq summary::after{transition:none;}}

/* ---------- 8. CTA ----------------------------------------------------- */
.iwsinv-cta{background:#fff;padding:88px 0;text-align:center;border-top:1px solid var(--line);}
.iwsinv-cta h2{font-size:clamp(24px,3vw,34px);}
.iwsinv-cta p{margin:16px auto 0;max-width:52ch;color:var(--muted);font-size:17px;}
.iwsinv-cta .btns{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.iwsinv-cta .btn{
  font-family:Sora,system-ui,sans-serif;font-weight:600;font-size:16px;text-decoration:none;
  border-radius:999px;padding:15px 30px;display:inline-block;
  transition:transform .2s ease,box-shadow .2s ease;
}
.iwsinv-cta .btn--p{color:#fff;background-image:linear-gradient(120deg,var(--amber-ink) 0%,var(--amber-deep) 100%);box-shadow:0 8px 22px rgba(124,45,18,.24);}
.iwsinv-cta .btn--s{color:var(--royal);border:1.5px solid var(--royal);background:transparent;}
.iwsinv-cta .btn:focus-visible{outline:2px solid var(--sky);outline-offset:3px;}
@media (prefers-reduced-motion:no-preference){.iwsinv-cta .btn:hover{transform:translateY(-2px);}}

@media print{.iwsinv-hero,.iwsinv-changes{background:#fff;color:#000;}}