/* Brand fonts, self-hosted (9 Oct 2026): no call to Google on page load. Latin subset, variable weights. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Morgan Meinecke, morganmeinecke.com
   Built from Brand/Morgan_Meinecke_Design_System/DESIGN.md v1.1, 23 September 2026.
   Do not invent colour, type or components here. If this file and DESIGN.md
   disagree, DESIGN.md wins and this file gets fixed. */

/* ---------- tokens, DESIGN.md section 4 ---------- */
:root{
  --indigo:#2E2A5E;
  --coral:#FF6F61;
  --paper:#FAF7F2;
  --ink:#1C1A3C;
  --slate:#5A6072;
  --coral-ink:#B8453A;
  --coral-ink-sand:#AD4036;
  --rule:#E4DFD5;
  --sand:#F0E9DE;

  --f-display:"Fraunces",Iowan Old Style,Georgia,serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-label:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-meta:"JetBrains Mono",SF Mono,Menlo,monospace;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --wrap:1200px;
  --gutter:6vw;
}

/* Dark mode, DESIGN.md section 4. Coral itself does not change. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#17162E;
    --ink:#F1EEF7;
    --indigo:#CFC9F2;
    --coral-ink:#FF8E82;
  --coral-ink-sand:#FF8E82;
    --coral-ink-sand:#FF8E82;
    --slate:#A7A3BC;
    --rule:#2E2C4A;
    --sand:#232145;
  }
}
:root[data-theme="dark"]{
  --paper:#17162E;
  --ink:#F1EEF7;
  --indigo:#CFC9F2;
  --coral-ink:#FF8E82;
  --slate:#A7A3BC;
  --rule:#2E2C4A;
  --sand:#232145;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the coral topline, 3px, every page ---------- */
.topline{height:3px;background:var(--coral)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
@media (min-width:1400px){:root{--gutter:48px}}

section{padding:var(--s9) 0}
section.tight{padding:var(--s8) 0}

/* ---------- type, DESIGN.md section 5 ---------- */
h1,h2,h3,.display,.section-title,.card-title{
  font-family:var(--f-display);
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0;
  font-style:normal;           /* upright only, never italic */
  color:var(--indigo);
  font-weight:500;
  margin:0;
  letter-spacing:-0.005em;
}
h1,.display{font-size:clamp(40px,6vw,64px);line-height:1.125}
h2,.section-title{font-size:clamp(31px,4.2vw,44px);line-height:1.09}
h3,.card-title{font-size:clamp(24px,2.4vw,28px);line-height:1.107;font-weight:600}

p{margin:0 0 var(--s4);max-width:68ch}
.lede{font-size:clamp(19px,1.8vw,21px);line-height:1.143;font-weight:400;color:var(--ink)}
.lede p,p.lede{line-height:1.45}

.eyebrow{
  font-family:var(--f-label);font-weight:600;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--coral-ink);margin:0 0 var(--s4);
}
.caption{font-size:14px;color:var(--slate);margin:var(--s3) 0 0;max-width:60ch}
.meta{font-family:var(--f-meta);font-weight:400;font-size:13px;color:var(--slate)}
.label{
  font-family:var(--f-label);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
}

/* the one coral word a headline is allowed */
.coral-word{color:var(--coral-ink)}

a{color:var(--ink)}
.textlink{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--coral);padding-bottom:1px}
.textlink:hover{border-bottom-width:2px}

hr.rule{border:0;border-top:1px solid var(--rule);margin:0}
hr.ink{border:0;border-top:1.5px solid var(--indigo);margin:0}

/* ---------- nav, DESIGN.md section 7 ---------- */
nav{border-bottom:1px solid var(--rule);background:var(--paper)}
nav .bar{
  max-width:var(--wrap);margin:0 auto;
  padding:var(--s5) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
}
nav .brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
nav .brand img{height:28px;width:auto;display:block}
nav .brand span{
  font-family:var(--f-label);font-weight:600;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--indigo);
}
nav .links{display:flex;gap:var(--s6);align-items:center}
nav .links a{
  font-family:var(--f-label);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent;
}
nav .links a:hover{border-bottom-color:var(--rule)}
nav .links a[aria-current="page"]{border-bottom-color:var(--coral)}

/* the Menu button, phones only */
.menu-btn{
  display:none;
  font-family:var(--f-label);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--indigo);border-radius:0;
  padding:9px 16px;cursor:pointer;
}
.menu-btn[aria-expanded="true"]{background:var(--indigo);color:var(--paper)}

@media (max-width:760px){
  nav{position:relative}
  nav .bar{padding-top:var(--s4);padding-bottom:var(--s4)}
  .menu-btn{display:block}
  nav .links{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1.5px solid var(--indigo);
    padding:var(--s2) var(--gutter) var(--s5);
    z-index:20;
  }
  nav.open .links{display:flex}
  nav .links a{
    width:100%;padding:var(--s4) 0;font-size:13px;
    border-bottom:1px solid var(--rule);
  }
  nav .links a:last-child{border-bottom:0}
  nav .links a[aria-current="page"]{border-bottom-color:var(--coral)}
}

/* ---------- buttons, DESIGN.md section 7 ---------- */
.btn{
  display:inline-block;
  font-family:var(--f-label);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  padding:14px 22px;border:1.5px solid var(--indigo);border-radius:0;
  background:var(--indigo);color:var(--paper);
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.outline{background:transparent;color:var(--indigo)}
.btn.outline:hover{background:var(--indigo);color:var(--paper)}
/* the coral button, once per page */
.btn.coral{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.btn.coral:hover{background:var(--coral-ink);border-color:var(--coral-ink);color:var(--paper)}
@media (max-width:420px){.btn{display:block;text-align:center}}

/* ---------- hero, 1.3 : 1 text to portrait ---------- */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s9);align-items:center}
.hero img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:var(--s7)}}

/* ---------- venture strip, 3 columns on one ink rule ---------- */
.strip{border-top:1.5px solid var(--indigo);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);padding-top:var(--s6)}
.strip > *{min-width:0}
.strip .role{font-family:var(--f-meta);font-size:13px;color:var(--slate);margin:var(--s2) 0 var(--s3)}
@media (max-width:860px){.strip{grid-template-columns:1fr;gap:var(--s6)}}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:var(--s7)}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.g2,.g3{grid-template-columns:1fr;gap:var(--s6)}}

/* ---------- timeline, ink line, coral dots, mono when-column ---------- */
.timeline{border-left:1.5px solid var(--indigo);margin:var(--s7) 0 0;padding:0;list-style:none}
.timeline li{position:relative;padding:0 0 var(--s7) var(--s6);margin:0}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-5.5px;top:9px;
  width:9px;height:9px;background:var(--coral);border-radius:50%;
}
.timeline .when{font-family:var(--f-meta);font-size:13px;color:var(--slate);display:block;margin-bottom:var(--s1)}
.timeline h3{margin-bottom:var(--s2)}
.timeline p{margin-bottom:0}

/* ---------- pull quote ---------- */
.pull{border-left:2px solid var(--coral);padding-left:var(--s5);margin:var(--s7) 0}
.pull p{
  font-family:var(--f-display);font-style:normal;font-weight:500;
  font-size:clamp(21px,2.2vw,24px);line-height:1.25;color:var(--indigo);
  margin:0 0 var(--s3);max-width:52ch;
}
.pull .who{font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}

/* ---------- byline, 72px sand disc with a 1.5px ink ring ---------- */
.byline{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.byline img{
  width:72px;height:72px;border-radius:50%;
  background:var(--sand);border:1.5px solid var(--indigo);
  object-fit:cover;display:block;flex:0 0 auto;
}
.byline .who{font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--ink)}
.byline .what{font-size:14px;color:var(--slate)}

/* ---------- photographs ---------- */
figure{margin:0}
figure img{width:100%;height:auto;display:block}
.shot-4x5 img{aspect-ratio:4/5;object-fit:cover}
.shot-16x9 img{aspect-ratio:16/9;object-fit:cover}

/* ---------- the one ink panel per page ---------- */
.panel{position:relative;background:var(--indigo);color:var(--paper);overflow:hidden}
.panel .wrap{position:relative;z-index:1;padding-top:var(--s9);padding-bottom:var(--s9)}
.panel h2,.panel h3{color:var(--paper)}
.panel p{color:#E8E5F5}
.panel .eyebrow{color:var(--coral)}
.panel .watermark{
  position:absolute;right:-40px;bottom:-60px;width:min(46vw,420px);
  opacity:.12;pointer-events:none;user-select:none;
}
.panel .email{
  font-family:var(--f-meta);font-size:clamp(16px,2vw,20px);
  color:var(--paper);user-select:all;display:inline-block;margin-bottom:var(--s5);
}
.panel .btn{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.panel .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--indigo)}
.panel .btn.outline{background:transparent;border-color:var(--paper);color:var(--paper)}
.panel .btn.outline:hover{background:var(--paper);color:var(--indigo)}

/* ---------- footer ---------- */
footer{border-top:1.5px solid var(--indigo);padding:var(--s7) 0 var(--s8)}
footer .row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s6);flex-wrap:wrap}
footer img{height:34px;width:auto;display:block}
footer .links{display:flex;gap:var(--s5);flex-wrap:wrap}
footer .links a{
  font-family:var(--f-label);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;
}
footer .links a:hover{border-bottom:2px solid var(--coral)}
footer .copy{font-family:var(--f-meta);font-size:12px;color:var(--slate);margin-top:var(--s5);width:100%}

/* ---------- booking embed ---------- */
.booking{border:1px solid var(--rule);background:var(--sand);padding:var(--s7);text-align:center}
.booking iframe{width:100%;min-height:620px;border:0;display:block;background:var(--paper)}

/* ---------- reveal, kept quiet ---------- */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   Venture logos, DESIGN.md section 8.
   Only inside a ventures block, own colours, on paper, never next to the MM mark.
   Each venture's own DESIGN.md governs its file:
   Blue Stream   01 - Brand/DESIGN.md 2.1   horizontal colour on light, min 120px wide
   Second Life   Brand Assets/DESIGN.md 2.2 colour on white, inner fill stays white
   Smart Money   _Brand_Playbook/DESIGN.md 2 indigo on paper, horizontal min 120px wide
   All three sit on one baseline in a fixed slot so the role lines align.
   ===================================================================== */
.vslot{height:92px;display:flex;align-items:flex-end;margin:0 0 var(--s5)}
.vslot a{display:block;line-height:0}
.vlogo{display:block;width:auto;max-width:100%}
.vlogo.bst{height:56px}
.vlogo.slro{height:62px}
.vlogo.smf{height:28px}
.venture-head .vslot{margin-bottom:var(--s5)}

/* two actions side by side */
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
@media (max-width:420px){.btn-row{flex-direction:column;align-items:stretch}}
.btn .arr{display:inline-block;margin-left:10px;transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}

/* =====================================================================
   The letter form. Underline fields that repeat the monogram's 1.5px
   stroke (DESIGN.md principle 2), numbered in mono, set large.
   ===================================================================== */
.form{display:grid;gap:var(--s6);max-width:680px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
@media (max-width:640px){.form .row2{grid-template-columns:1fr}}

.field{position:relative;display:block}
.field .lab{
  display:flex;gap:12px;align-items:baseline;margin:0 0 6px;
  font-family:var(--f-label);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
}
.field .num,.topics-wrap .num{font-family:var(--f-meta);font-weight:400;letter-spacing:0;font-size:12px;color:var(--slate)}
.field .opt{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:400;font-size:13px}
.field input,.field textarea{
  display:block;width:100%;
  font-family:var(--f-body);font-size:20px;line-height:1.4;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid var(--rule);border-radius:0;
  padding:8px 0 12px;outline:none;-webkit-appearance:none;appearance:none;
}
.field textarea{resize:none;min-height:7.5em;field-sizing:content}
.field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--indigo);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.field:focus-within::after{transform:scaleX(1)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);transition:background-color 9999s}

/* topic choice as square tabs */
.topics-wrap .lab{
  display:flex;gap:12px;align-items:baseline;margin:0 0 12px;
  font-family:var(--f-label);font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
}
.topics{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0}
.topics label{position:relative;cursor:pointer}
.topics input{position:absolute;opacity:0;width:1px;height:1px}
.topics span{
  display:inline-block;padding:10px 14px;
  font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1.5px solid var(--rule);transition:border-color .2s,background .2s,color .2s;
}
.topics label:hover span{border-color:var(--indigo)}
.topics input:checked + span{background:var(--indigo);border-color:var(--indigo);color:var(--paper)}
.topics input:focus-visible + span{outline:2px solid var(--indigo);outline-offset:2px}

.form .send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5)}
.form .note{font-family:var(--f-meta);font-size:12.5px;color:var(--slate);margin:0}
.form .status{font-size:15px;margin:0;min-height:1.4em;max-width:none}
.form .status.ok{color:var(--indigo);font-weight:600}
.form .status.err{color:var(--coral-ink);font-weight:600}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* the same form on the ink panel */
.panel .field .lab,.panel .topics-wrap .lab,.panel .field .num,.panel .topics-wrap .num,.panel .form .note{color:#B8B3DA}
.panel .field input,.panel .field textarea{color:var(--paper);border-bottom-color:rgba(250,247,242,.26)}
.panel .field::after{background:var(--paper)}
.panel .field input:-webkit-autofill{-webkit-text-fill-color:var(--paper)}
.panel .topics span{color:var(--paper);border-color:rgba(250,247,242,.26)}
.panel .topics label:hover span{border-color:var(--paper)}
.panel .topics input:checked + span{background:var(--paper);border-color:var(--paper);color:var(--indigo)}
.panel .topics input:focus-visible + span{outline-color:var(--paper)}
.panel .form .status.ok{color:var(--paper)}
.panel .form .status.err{color:#FF8E82}

/* paper button on the ink panel, so the one coral move stays elsewhere */
.panel .btn.paper{background:var(--paper);border-color:var(--paper);color:var(--indigo)}
.panel .btn.paper:hover{background:transparent;color:var(--paper)}
.panel .split{display:grid;grid-template-columns:5fr 7fr;gap:var(--s9);align-items:start}
@media (max-width:960px){.panel .split{grid-template-columns:1fr;gap:var(--s7)}}

/* =====================================================================
   Contact page: two numbered doors, then the letter, then the call.
   ===================================================================== */
.doors{border-top:1.5px solid var(--indigo);margin-top:var(--s7)}
.doors a{
  display:grid;grid-template-columns:44px 1fr auto;gap:var(--s4);align-items:baseline;
  padding:var(--s5) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);
}
.doors .n{font-family:var(--f-meta);font-size:13px;color:var(--slate)}
.doors .t{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.2vw,26px);line-height:1.15;color:var(--indigo)}
.doors .d{display:block;font-size:15px;color:var(--slate);margin-top:4px}
.doors .arr{font-family:var(--f-label);font-size:18px;color:var(--indigo);transition:transform .25s ease}
.doors a:hover .arr{transform:translateX(5px)}

.letter{display:grid;grid-template-columns:4fr 8fr;gap:var(--s9);align-items:start}
@media (max-width:960px){.letter{grid-template-columns:1fr;gap:var(--s7)}}
.letter .aside{position:sticky;top:var(--s7)}
@media (max-width:960px){.letter .aside{position:static}}
.facts{list-style:none;margin:var(--s6) 0 0;padding:0;border-top:1px solid var(--rule)}
.facts li{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--rule);font-size:15px}
.facts .k{font-family:var(--f-meta);font-size:12.5px;color:var(--slate)}
.panel .facts{border-top-color:rgba(250,247,242,.2)}
.panel .facts li{border-bottom-color:rgba(250,247,242,.2);color:#E8E5F5}
.panel .facts .k{color:#B8B3DA}

/* =====================================================================
   Featured: press and film. 16:9 frame, mono meta, Fraunces title.
   ===================================================================== */
.feature{display:block;text-decoration:none;color:var(--ink)}
.feature .frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--indigo)}
.feature .frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.feature:hover .frame img{transform:scale(1.025)}
.feature .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.feature .meta{display:block;margin:var(--s4) 0 var(--s2)}
.feature .t{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.2vw,26px);line-height:1.2;color:var(--indigo);margin:0 0 var(--s3)}
.play{
  position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(28,26,60,0) 40%,rgba(28,26,60,.55));
}
.play i{
  width:72px;height:72px;border-radius:50%;background:var(--paper);display:grid;place-items:center;
  transition:transform .25s ease;
}
.play i svg{width:22px;height:22px;fill:var(--indigo);margin-left:4px}
.play:hover i{transform:scale(1.06)}
.play b{
  position:absolute;left:var(--s5);bottom:var(--s4);
  font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);
}

/* =====================================================================
   Where I publish: two channels, each under its own ink rule.
   ===================================================================== */
.channels{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s7);margin-top:var(--s7)}
.channels > *{min-width:0}
@media (max-width:860px){.channels{grid-template-columns:1fr;gap:var(--s6)}}
.channel{border-top:1.5px solid var(--indigo);padding-top:var(--s5)}
.channel .meta{display:block;margin-bottom:var(--s3)}
.channel h3{margin-bottom:var(--s3)}
.channel p{color:var(--ink)}
.channel .btn{margin-top:var(--s3)}

/* =====================================================================
   Social row: text, not icons, in the label face (DESIGN.md section 7).
   ===================================================================== */
.social{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0;padding:0;list-style:none}
.social a{
  font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);text-decoration:none;border-bottom:1.5px solid transparent;padding-bottom:2px;
}
.social a:hover{color:var(--ink);border-bottom-color:var(--coral)}
footer .social{margin-top:var(--s5);width:100%}

/* on panels that carry a form or facts on the right, the watermark moves left */
.panel .watermark.left{right:auto;left:-60px}
/* short panels: a cropped piece of the mark in the bottom-right corner, clear of the text */
.panel .watermark.corner{width:300px;right:-110px;bottom:-130px}
@media (max-width:860px){.panel .watermark.corner{width:220px;right:-90px;bottom:-100px}}

footer .social + .copy{margin-top:var(--s3)}

/* =====================================================================
   Featured by RAKEZ. RAKEZ's own logo file, unaltered and in its own
   colours (assets/logo/press/rakez.svg, from rakez.com). Never recoloured,
   cropped or merged into the MM mark. "Featured by" is set in our label face.
   ===================================================================== */
.press{display:inline-flex;align-items:center;gap:var(--s5);text-decoration:none;color:inherit}
.press .lab{
  font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate);line-height:1.5;
}
.press .lab b{display:block;font-weight:600;color:var(--ink)}
.press .bar{width:1.5px;align-self:stretch;background:var(--rule)}
.press img{height:72px;width:auto;display:block}
.press.sm{gap:var(--s4)}
.press.sm img{height:56px}
.press:hover .lab b{color:var(--indigo)}

/* =====================================================================
   Ventures page: one spread per company. Logo, name, one figure,
   the words, a clear link out, and a real photograph (4:5).
   Sides alternate for rhythm.
   ===================================================================== */
.venture{display:grid;grid-template-columns:7fr 5fr;gap:var(--s9);align-items:center}
.venture > *{min-width:0}
.venture.flip{grid-template-columns:5fr 7fr}
.venture.flip .v-media{order:-1}
@media (max-width:960px){
  .venture,.venture.flip{grid-template-columns:1fr;gap:var(--s7)}
  .venture.flip .v-media{order:0}
}
.v-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.v-legal{font-family:var(--f-meta);font-size:13px;color:var(--slate);margin:var(--s3) 0 0}
.v-figure{
  display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  margin:var(--s6) 0;padding:var(--s4) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.v-figure .n{font-family:var(--f-display);font-weight:500;font-size:clamp(40px,5vw,56px);line-height:1;color:var(--indigo)}
.v-figure .c{font-family:var(--f-meta);font-size:13px;color:var(--slate)}
.v-actions{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;margin-top:var(--s6)}

/* =====================================================================
   Dark screens: each brand's own reversed file swaps in through <picture>.
   RAKEZ's mark is never recoloured, so it sits on a paper chip instead.
   ===================================================================== */
.vslot picture,.brand picture,footer picture{display:block;line-height:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .press img{background:#FAF7F2;padding:6px 8px;box-sizing:content-box}
}
:root[data-theme="dark"] .press img{background:#FAF7F2;padding:6px 8px;box-sizing:content-box}

/* Story timeline: a venture's entry carries its own logo as the heading */
.timeline .tl-logo{margin:var(--s2) 0 var(--s3);line-height:0}
.timeline .tl-logo picture{display:block}
.timeline .tl-logo .vlogo{height:44px;margin:0}
.timeline .tl-logo .vlogo.slro{height:48px}
.timeline .tl-logo .vlogo.smf{height:24px;margin:10px 0}
.tl-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s3)!important}

/* The two exits: DiveMix (horizontal, teal; white on dark) and INMATEC (boxed, reads on both) */
.timeline .tl-logo .vlogo.dm{height:48px}
.timeline .tl-logo .vlogo.inm{height:92px}
.past-logos{display:flex;align-items:flex-end;gap:var(--s7);margin-top:var(--s7)}
.past-logos a,.past-logos picture{display:block;line-height:0}
.past-logos .vlogo.dm{height:56px}
.past-logos .vlogo.inm{height:108px}

/* =====================================================================
   Advisory page: numbered areas in two groups, formats, board, investors.
   ===================================================================== */
.offer-group{margin-top:var(--s8)}
.offer-group > .label{display:block;padding-bottom:var(--s3);border-bottom:1.5px solid var(--indigo)}
.offers{list-style:none;margin:0;padding:0}
.offers li{
  display:grid;grid-template-columns:64px 1fr;gap:var(--s5);
  padding:var(--s6) 0;border-bottom:1px solid var(--rule);
}
.offers li > *{min-width:0}
.offers .n{font-family:var(--f-meta);font-size:13px;color:var(--slate);padding-top:6px}
.offers h3{margin:0 0 var(--s2)}
.offers .for{font-family:var(--f-meta);font-size:13px;color:var(--slate);margin:0 0 var(--s3);max-width:none}
.offers p{margin-bottom:0}
/* below desktop the heading and the text both sit in the second column, never under the number */
.offers .head,.offers .body{grid-column:2}
.offers .body{margin-top:var(--s2)}
@media (min-width:960px){
  .offers li{grid-template-columns:64px 5fr 7fr;gap:var(--s7)}
  .offers .head{grid-column:2}
  .offers .body{grid-column:3;margin-top:0}
}
@media (max-width:520px){.offers li{grid-template-columns:40px 1fr;gap:var(--s4)}}

.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);margin-top:var(--s7)}
.formats > *{min-width:0}
@media (max-width:1100px){.formats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.formats{grid-template-columns:1fr}}
.format{border-top:1.5px solid var(--indigo);padding-top:var(--s5)}
.format h3{font-size:clamp(21px,2vw,24px);margin-bottom:var(--s3)}
.format p{font-size:16px;margin:0}

.band-sand{background:var(--sand)}
.board-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s9);align-items:start}
.board-grid > *{min-width:0}
@media (max-width:960px){.board-grid{grid-template-columns:1fr;gap:var(--s7)}}
.facts.wide li{grid-template-columns:150px 1fr}
@media (max-width:520px){.facts.wide li{grid-template-columns:1fr;gap:2px}}

.home-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);margin-top:var(--s6)}
.home-paths > *{min-width:0}
@media (max-width:860px){.home-paths{grid-template-columns:1fr;gap:var(--s6)}}
.home-paths a.path{display:block;text-decoration:none;color:var(--ink);border-top:1.5px solid var(--indigo);padding-top:var(--s5)}
.home-paths .path h3{margin-bottom:var(--s3)}
.home-paths .path p{font-size:16px;margin:0 0 var(--s4)}
.home-paths .path .go{font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo)}
.home-paths .path:hover .go .arr{transform:translateX(4px)}
.home-paths .path .arr{display:inline-block;margin-left:8px;transition:transform .25s ease}

/* =====================================================================
   Advisory areas as cards: photo, icon, number, words.
   Icons: DESIGN.md section 13, 48 px, light and dark files.
   ===================================================================== */
.areas{display:grid;gap:var(--s7) var(--s6);margin-top:var(--s6)}
.areas > *{min-width:0}
.areas.three{grid-template-columns:repeat(3,1fr)}
.areas.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.areas.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.areas.three,.areas.two{grid-template-columns:1fr}}
.area-media{margin:0 0 var(--s5);overflow:hidden;background:var(--sand)}
.area-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.area:hover .area-media img{transform:scale(1.025)}
.area-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.area-top picture{display:block;line-height:0}
.icon{width:48px;height:48px;display:block}
.area-top .n{font-family:var(--f-meta);font-size:13px;color:var(--slate)}
.area h3{margin:0 0 var(--s2)}
.area .for{font-family:var(--f-meta);font-size:13px;color:var(--slate);margin:0 0 var(--s3);max-width:none}
.area p{margin-bottom:0}
.img-note{font-family:var(--f-meta);font-size:12.5px;color:var(--slate);margin-top:var(--s7);max-width:none}
.format picture{display:block;line-height:0;margin-bottom:var(--s4)}

/* =====================================================================
   The Money Map Method, under the Smart Money Family spread (Ventures).
   Per Public/_Brand_Playbook/DESIGN.md: the framework order is locked and
   the frameworks only appear together as the 4-layer ladder. Here the
   ladder is one level row, each layer a bracket over its frameworks.
   The marks are SMF artwork and never recoloured, so their tiles stay
   paper in dark mode too, the same treatment as the RAKEZ logo.
   ===================================================================== */
.method{margin-top:var(--s8);background:var(--sand);padding:var(--s7)}
.method-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.35fr);gap:var(--s6);align-items:center}
.method-head img{height:120px;width:auto;display:block}
.method-head h3{margin:var(--s2) 0 0}
.method-head .mh-text{margin:0;max-width:56ch}
.ladder{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4)}
.ladder > li{min-width:0}
.ladder > li:nth-child(4){grid-column:span 3}
.ladder .layer{display:block;font-family:var(--f-meta);font-size:13px;color:var(--slate);border-top:2px solid var(--indigo);padding-top:var(--s3);margin-bottom:var(--s4)}
.ladder .fws{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:var(--s4)}
.ladder > li:nth-child(4) .fws{--n:3}
.ladder .fw{margin:0}
.ladder .tile{background:#FAF7F2;height:104px;display:flex;align-items:center;justify-content:center}
.ladder .tile img{max-height:56px;max-width:78%;width:auto;height:auto;display:block}
.ladder .fw figcaption{font-weight:600;font-size:15px;line-height:1.25;margin-top:var(--s3)}
.ladder .fw figcaption a{text-decoration:none;border-bottom:1.5px solid var(--coral)}
@media (max-width:980px){
  .method-head{grid-template-columns:auto minmax(0,1fr)}
  .method-head .mh-text{grid-column:1/-1}
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .method{padding:var(--s5)}
  .method-head{grid-template-columns:1fr;gap:var(--s4)}
  .method-head img{height:88px}
  .ladder{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
  .ladder > li:nth-child(4){grid-column:1/-1}
  .ladder .tile{height:84px}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .method-head img{background:#FAF7F2;padding:8px;box-sizing:content-box}
}
:root[data-theme="dark"] .method-head img{background:#FAF7F2;padding:8px;box-sizing:content-box}

/* Channel links with an icon, so a video reads as a video at a glance.
   MM colours: indigo body, one coral detail. Square corners. */
.chan-links{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);max-width:560px}
.chan-links a{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);background:var(--sand);border:1.5px solid transparent;text-decoration:none;color:var(--ink);transition:border-color .2s}
.chan-links a:hover,.chan-links a:focus-visible{border-color:var(--indigo)}
.chan-links svg{width:44px;height:44px;flex:none;display:block}
.chan-links .t{display:block;font-weight:600;font-size:16px;line-height:1.2}
.chan-links .meta{display:block;margin-top:2px;font-size:12px}
.ico-body{fill:var(--indigo)}
.ico-dot{fill:var(--coral)}
.channel .ch-ico{width:48px;height:48px;display:block;margin-bottom:var(--s4)}
@media (max-width:520px){.chan-links{grid-template-columns:1fr}}

/* =====================================================================
   Blue Stream on Ventures: the four lines in place of a photo (Morgan,
   8 Oct 2026). Icons are Blue Stream's own (01 - Brand/DESIGN.md 3.1),
   on-light and on-dark versions, never redrawn. Names follow the four
   doors on bluestreamtrading.com.
   ===================================================================== */
.v-lines .lines{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--s4);aspect-ratio:4/5}
.v-lines .lines li{background:var(--sand);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--s5) var(--s4);min-width:0}
.v-lines .lines img{width:96px;height:96px;aspect-ratio:auto;object-fit:contain}
.v-lines .lines span{font-weight:600;font-size:16px;line-height:1.25;margin-top:var(--s4)}
@media (max-width:420px){.v-lines .lines img{width:72px;height:72px}.v-lines .lines span{font-size:15px}}

/* =====================================================================
   Second Life RO key figures (Ventures). Its own icon vocabulary, white
   line icons on the cyan disc, never recoloured, so the disc stays cyan
   in dark mode. Square panel per MM; the disc is the venture's mark.
   ===================================================================== */
.kpis{margin-top:var(--s8);background:var(--sand);padding:var(--s7)}
.kpi-strip{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.kpi-strip li{min-width:0;border-top:2px solid var(--indigo);padding-top:var(--s5)}
.icdisc{width:48px;height:48px;flex:none;border-radius:50%;background:#00A4CB;color:#fff;display:grid;place-items:center}
.icdisc svg{width:26px;height:26px;display:block}
.kpi-strip .n{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1.05;color:var(--indigo);margin-top:var(--s4)}
.kpi-strip .c{display:block;font-size:15px;line-height:1.35;margin-top:var(--s2);max-width:26ch}
.kpis .limit{display:flex;align-items:center;gap:var(--s4);margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid var(--rule);font-size:16px}
.kpis .limit .icdisc{width:40px;height:40px}
.kpis .limit .icdisc svg{width:22px;height:22px}
@media (max-width:980px){.kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kpis{padding:var(--s5)}.kpi-strip{gap:var(--s5) var(--s4)}.kpi-strip .c{font-size:14px}.kpi-strip .n{font-size:24px}.kpis .limit{align-items:flex-start}}

/* Icons on the three ways to work (home), their Advisory sections, and the
   Story timeline's years before the companies. MM icon set, DESIGN.md 13. */
.home-paths .path .icon{margin-bottom:var(--s4)}
.sec-icon{margin-bottom:var(--s4)}
.timeline .tl-icon{margin:var(--s2) 0 var(--s3);line-height:0}
.timeline .chan-links{margin-top:var(--s4)}
.timeline .chan-links li{padding:0}
.timeline .chan-links li::before{content:none;display:none}

/* =====================================================================
   The contact box (home and Contact, 8 Oct 2026). A framed card with a
   header, so it reads as the place to write, and boxed fields with hints,
   so it's obvious where to type. Doubled class beats the .panel overrides
   when the box sits on the ink panel.
   ===================================================================== */
:root{--field-line:#BDB5A6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--field-line:#4C4974}}
:root[data-theme="dark"]{--field-line:#4C4974}

.mailbox.mailbox{display:block;gap:0;max-width:none;background:var(--paper);color:var(--ink);border:1.5px solid var(--indigo)}
.panel .mailbox.mailbox{border-color:var(--paper)}
.mailbox .mb-head{display:flex;align-items:center;gap:var(--s4);background:var(--sand);padding:var(--s4) var(--s6);border-bottom:1.5px solid var(--indigo)}
.mailbox .mb-head .icon{width:44px;height:44px}
.mailbox.mailbox .mb-title{font-family:var(--f-display);font-weight:500;font-size:24px;line-height:1.1;margin:0;color:var(--indigo)}
.mailbox.mailbox .mb-sub{margin:4px 0 0;font-size:15px;color:var(--slate)}
.mailbox .mb-body{display:grid;gap:var(--s5);padding:var(--s6)}
.mailbox .row2{gap:var(--s5)}
.mailbox.mailbox .field .lab,.mailbox.mailbox .topics-wrap .lab{color:var(--ink);margin-bottom:8px}
.mailbox.mailbox .field .num,.mailbox.mailbox .topics-wrap .num{color:var(--slate)}
.mailbox.mailbox .field input,.mailbox.mailbox .field textarea{
  font-size:17px;line-height:1.4;color:var(--ink);background:var(--sand);
  border:1.5px solid var(--field-line);padding:12px 14px;transition:border-color .2s,box-shadow .2s;
}
.mailbox.mailbox .field input:focus,.mailbox.mailbox .field textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px color-mix(in srgb,var(--indigo) 18%,transparent)}
.mailbox.mailbox .field input::placeholder,.mailbox.mailbox .field textarea::placeholder{color:var(--slate);opacity:.75}
.mailbox.mailbox .field input:-webkit-autofill{-webkit-text-fill-color:var(--ink)}
.mailbox .field::after{display:none}
.mailbox .field textarea{min-height:8em}
.mailbox fieldset.topics-wrap{border:0;margin:0;padding:0;min-width:0}
.mailbox legend.lab{padding:0;display:flex}

.mailbox .topics.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s3)}
.mailbox .topics.tiles label{display:block}
.mailbox.mailbox .topics.tiles span{
  display:flex;align-items:center;gap:var(--s3);height:100%;padding:10px 12px;
  font-family:var(--f-body);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:0;text-transform:none;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--field-line);
}
.mailbox .topics.tiles .icon{width:32px;height:32px;flex:none}
.mailbox .topics.tiles b{font-weight:600}
.mailbox.mailbox .topics.tiles label:hover span{border-color:var(--indigo)}
.mailbox.mailbox .topics.tiles input:checked + span{background:var(--sand);border-color:var(--indigo);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--indigo)}
.mailbox.mailbox .topics.tiles input:focus-visible + span{outline:2px solid var(--indigo);outline-offset:2px}

.mailbox.mailbox .btn{background:var(--indigo);border-color:var(--indigo);color:var(--paper)}
.mailbox.mailbox .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.mailbox.mailbox .note{color:var(--slate)}
.mailbox.mailbox .status.ok{color:var(--indigo)}
.mailbox.mailbox .status.err{color:var(--coral-ink)}
@media (max-width:560px){
  .mailbox .mb-head{padding:var(--s4)}
  .mailbox .mb-body{padding:var(--s5) var(--s4)}
  .mailbox .topics.tiles{grid-template-columns:1fr 1fr}
  .mailbox.mailbox .topics.tiles span{flex-direction:column;align-items:flex-start;gap:var(--s2);font-size:14px}
}

/* Contact page: two ways in, as cards with their icons */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin-top:var(--s7)}
.way{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s6);background:var(--sand);border:1.5px solid transparent;text-decoration:none;color:var(--ink);transition:border-color .2s}
.way:hover,.way:focus-visible{border-color:var(--indigo)}
.way .icon{width:56px;height:56px;margin-bottom:var(--s3)}
.way .n{font-family:var(--f-meta);font-size:13px;color:var(--slate)}
.way .t{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,2.4vw,30px);line-height:1.1;color:var(--indigo)}
.way .d{font-size:16px;max-width:44ch}
.way .go{margin-top:auto;padding-top:var(--s4);font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo)}
.way .go .arr{display:inline-block;margin-left:8px;transition:transform .25s ease}
.way:hover .go .arr{transform:translateX(4px)}
@media (max-width:760px){.ways{grid-template-columns:1fr}.way{padding:var(--s5)}}

/* Contact page: the discovery call in three steps, on the ink panel */
.steps{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.steps li{display:flex;flex-direction:column;gap:var(--s2);border-top:1.5px solid color-mix(in srgb,var(--paper) 35%,transparent);padding-top:var(--s5)}
.steps .icon{width:48px;height:48px;margin-bottom:var(--s3)}
.steps .n{font-family:var(--f-meta);font-size:13px;color:#B8B3DA}
.steps .t{font-family:var(--f-display);font-weight:500;font-size:24px;line-height:1.15;color:var(--paper)}
.steps .d{font-size:16px;color:#E8E5F5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .steps .n,:root:not([data-theme="light"]) .steps .d{color:var(--paper)}}
:root[data-theme="dark"] .steps .n,:root[data-theme="dark"] .steps .d{color:var(--paper)}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:var(--s5)}}

/* All five fields are required (Morgan, 8 Oct 2026). The topic radios cover
   their tile, so the browser's "please select" note points at the tiles,
   and a field left empty after a send attempt is ringed in coral ink. */
.mailbox .topics.tiles input{inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.mailbox.mailbox .field input:user-invalid,.mailbox.mailbox .field textarea:user-invalid{border-color:var(--coral-ink)}

/* ---------- legal pages: terms and privacy (9 Oct 2026) ---------- */
.legal{max-width:820px}
.legal h2{font-size:clamp(24px,2.6vw,28px);line-height:1.15;margin:var(--s8) 0 var(--s4)}
.legal .cl{display:grid;grid-template-columns:3.4em 1fr;gap:0 var(--s2);margin:0 0 var(--s3)}
.legal .cl .no{font-family:var(--f-meta);font-size:13px;color:var(--slate);padding-top:4px}
.legal .cl p{margin:0}
.legal ol.alpha{list-style:none;margin:var(--s2) 0 0;padding:0}
.legal ol.alpha li{display:grid;grid-template-columns:2em 1fr;margin:0 0 var(--s1);max-width:66ch}
.legal ol.alpha .al{color:var(--slate)}
.legal ul{margin:0 0 var(--s4);padding-left:1.2em;max-width:68ch}
.legal ul li{margin:0 0 var(--s2)}
.legal .lead-in{margin:var(--s5) 0 var(--s2)}
.legal hr.lrule{border:0;border-top:1.5px solid var(--indigo);margin:var(--s8) 0 0}
.legal .ltable{overflow-x:auto;margin:var(--s3) 0 var(--s5)}
.legal table{border-collapse:collapse;width:100%;font-size:15px;min-width:560px}
.legal th{font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);text-align:left;border-bottom:1.5px solid var(--indigo);padding:10px 12px 10px 0}
.legal td{border-bottom:1px solid var(--rule);padding:12px 12px 12px 0;vertical-align:top}
.legal a{color:inherit;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}
footer .copy a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
footer .copy a:hover{border-bottom-color:var(--coral)}
.mailbox .note a{color:inherit;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}

/* small coral labels on sand panels need a touch more contrast (WCAG AA, 9 Oct 2026) */
.band-sand .eyebrow,.method .eyebrow,.kpis .eyebrow,.booking .eyebrow,.way .eyebrow,.mailbox .eyebrow,.area-media + * .eyebrow{color:var(--coral-ink-sand)}