/* ===============================================================
   FRACTIONAL GROWTH ADVISORS
   One stylesheet for the whole site.
   Header, footer and buttons are the live site's rules, unchanged.
   =============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
    :root{
      --deep-charcoal:#1C1F24; --midnight-navy:#223A5E; --warm-off-white:#F4F2EE;
      --brass:#C9A46A; --brass-text:#8B6832; --slate-gray:#9AA3AB; --burnt-copper:#B86A3B;
      --font-heading:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
      --font-body:'Inter','Helvetica Neue', Arial, sans-serif;
    }
    *{box-sizing:border-box;}
    body{margin:0;font-family:var(--font-body);line-height:1.6;color:#333;background-color:var(--warm-off-white);-webkit-font-smoothing:antialiased;}
    /* Body links carry navy, not gold. Gold on the off-white ground reads
       2.09:1 and fails the 4.5:1 floor. Navy reads 10.24:1. Gold is kept for
       display type, rules, buttons and the mark, where it has the headroom. */
    a{color:var(--midnight-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
    a:hover{color:var(--deep-charcoal);}
    nav a,footer a,.btn,.btn-secondary,.nav-cta,.logo a,.footer-logo a,.social-links a,.lockup{text-decoration:none;}
    h1,h2,h3,h4{font-family:var(--font-heading);margin:0;}
    p{margin:0;}
    ul{margin:0;}
    .container{max-width:1200px;margin:0 auto;padding:0 20px;}

    /* ---- RETAINED HEADER ---- */
    nav{background:var(--deep-charcoal);padding:25px 0;position:sticky;top:0;z-index:1000;border-bottom:1px solid rgba(154,163,171,.25);}
    nav .container{display:flex;justify-content:space-between;align-items:center;padding:0 40px;}
    .logo{padding:5px 0;}
    .logo img{height:50px;width:auto;display:block;}
    /* The mark is a lockup. The name is primary, the entity sits under it.
       People buy from people and contract with a legal entity. */
    .lockup{display:flex;align-items:center;gap:13px;}
    .lockup img{height:40px;width:auto;display:block;}
    .lockup-text{display:flex;flex-direction:column;line-height:1.12;}
    .lockup-name{font-family:var(--font-heading);font-weight:700;font-size:19px;
      letter-spacing:-.01em;color:var(--warm-off-white);}
    .lockup-entity{font-family:var(--font-body);font-weight:500;font-size:10.5px;
      letter-spacing:.135em;text-transform:uppercase;color:var(--brass);margin-top:3px;}
    nav ul{display:flex;list-style:none;gap:35px;align-items:center;padding:0;}
    nav a{color:var(--warm-off-white);font-weight:500;font-size:15px;}
    nav a:hover{color:var(--brass);}
    .nav-cta{border:2px solid var(--brass);color:var(--brass);padding:10px 22px;border-radius:6px;font-weight:600;font-size:14px;}
    .nav-cta:hover{background:var(--brass);color:var(--deep-charcoal);}
    .nav-cta.on{background:var(--brass);color:var(--deep-charcoal);}

    /* ---- RETAINED MOBILE NAV (from the live site) ---- */
    .hamburger{display:none;flex-direction:column;cursor:pointer;padding:5px;}
    .hamburger span{width:25px;height:3px;background-color:var(--warm-off-white);margin:3px 0;transition:.3s;display:block;}
    .nav-cta.on{background:var(--brass);color:var(--deep-charcoal);}

    /* ---- RETAINED FOOTER ---- */
    footer{background:var(--deep-charcoal);color:#FFFFFF;padding:60px 0 30px;}
    .footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:40px;}
    .footer-logo{margin-bottom:25px;}
    .footer-logo img{height:45px;width:auto;display:block;}
    .footer-logo .lockup img{height:38px;}
    .footer-logo .lockup-name{font-size:18px;}
    .footer-about p{font-size:15px;line-height:1.7;margin-bottom:15px;}
    .footer-about a{color:var(--brass);}
    .footer-links h4{color:var(--brass);margin-bottom:20px;font-size:16px;font-weight:700;}
    .footer-links ul{list-style:none;padding:0;}
    .footer-links li{margin-bottom:12px;}
    .footer-links a{color:#FFFFFF;font-size:15px;}
    .footer-links a:hover{color:var(--brass);}
    .footer-bottom{border-top:1px solid rgba(244,242,238,.1);padding-top:30px;display:flex;justify-content:space-between;align-items:center;}
    .footer-bottom p{font-size:14px;}
    .footer-legal{display:flex;gap:30px;}
    .footer-legal a{color:#FFFFFF;font-size:14px;}
    .footer-legal a:hover{color:var(--brass);}
    .social-links{display:flex;gap:20px;}
    .social-links a{color:#FFFFFF;font-size:18px;font-weight:700;}

    /* ---- BUTTONS (retained) ---- */
    .btn{display:inline-block;padding:18px 40px;background:var(--brass);color:var(--deep-charcoal);font-weight:700;border-radius:6px;font-size:16px;border:2px solid var(--brass);}
    .btn:hover{background:var(--deep-charcoal);border-color:var(--deep-charcoal);color:var(--brass);}
    .btn-secondary{background:transparent;color:var(--brass);border:2px solid var(--brass);}
    .btn-secondary:hover{background:var(--brass);color:var(--deep-charcoal);}

    /* ---- NEW SYSTEM ---- */
    .eyebrow{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);}
    .rule{width:64px;height:2px;background:var(--brass);}
    .sec{padding:110px 0;}
    .h1{font-size:60px;line-height:1.08;font-weight:700;letter-spacing:-.02em;}
    .h2{font-size:40px;line-height:1.16;font-weight:700;letter-spacing:-.015em;}
    .h3{font-size:22px;line-height:1.35;font-weight:700;}
    .lede{font-size:21px;line-height:1.65;}
    .body{font-size:17px;line-height:1.78;}
    .small{font-size:15px;line-height:1.7;}
    .said{font-family:var(--font-heading);font-weight:600;letter-spacing:-.01em;}

    /* ---- BREAKPOINTS (last, so they override the base rules) ---- */
    @media (max-width:768px){
      .hamburger{display:flex;}
      nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--deep-charcoal);flex-direction:column;gap:0;padding:20px 0;}
      nav ul.active{display:flex;}
      nav ul li{width:100%;text-align:center;padding:12px 0;border-bottom:1px solid rgba(244,242,238,.1);}
      nav ul li:last-child{border-bottom:none;}
      nav .container{padding:0 20px;}
      .lockup{gap:10px;}
      .lockup img{height:34px;}
      .lockup-name{font-size:17px;}
      .lockup-entity{font-size:9px;letter-spacing:.1em;}
      .footer-content{grid-template-columns:1fr;gap:40px;}
      .footer-bottom{flex-direction:column;gap:20px;text-align:center;}
      .footer-legal{justify-content:center;flex-wrap:wrap;gap:18px;}
    }

    @media (max-width:1080px) and (min-width:769px){
      nav ul{gap:18px;}
      nav a{font-size:14px;}
      .nav-cta{padding:9px 16px;font-size:13px;}
      .lockup img{height:36px;}
      .lockup-name{font-size:17px;}
      .lockup-entity{font-size:9.5px;letter-spacing:.11em;}
    }


/* ---------------------------------------------------------------
   RESPONSIVE
   Phone and tablet behaviour. The retained mobile nav rules live
   in the header block above; these handle page layout.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .h1   { font-size: 38px; }
  .h2   { font-size: 29px; }
  .lede { font-size: 18px; }
  .sec  { padding: 64px 0; }
  section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ---- QUIET BUTTON ----
   For in-page links that deserve a control rather than a sentence.
   Charcoal on the off-white ground reads 14.78:1. Brass is reserved for
   the conversion buttons, so this one stays visibly subordinate. */
.btn-quiet{display:inline-block;align-self:flex-start;border:2px solid #223A5E;background:#223A5E;
  color:#FFFFFF;text-decoration:none;border-radius:6px;padding:16px 32px;
  font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1.2;}
.btn-quiet:hover{background:var(--deep-charcoal);border-color:var(--deep-charcoal);color:#FFFFFF;}

/* ---- GOLD AS TEXT ON A LIGHT GROUND ----
   Brand gold reads 2.33:1 on white and 2.09:1 on the off-white, which fails
   the 4.5:1 floor for normal text. This is the same hue and saturation taken
   darker: 5.09:1 on white, 4.55:1 on the off-white. Gold itself is unchanged
   for rules, buttons, the mark and anything on a dark ground. */
.eyebrow.on-light{color:var(--brass-text);}

/* ---- MOBILE FIXES, 5 October 2026 ----
   1. Images never run wider than the screen (the hero portrait did on 320px phones).
   2. Footer links get a thumb-sized tap area.
   3. The smallest labels are raised from 11px so they can be read on a phone. */
@media (max-width: 900px) {
  section img { max-width: 100% !important; height: auto; }
  section [style*="grid-template-columns"] > * { min-width: 0; }
  [style*="font-size:11px"] { font-size: 13px !important; }
}
@media (max-width: 768px) {
  .footer-links li { margin-bottom: 0; }
  .footer-links a, .footer-about a, .footer-legal a { display: inline-block; padding: 13px 6px; }
  .footer-legal { gap: 6px 14px; }
}
@media (max-width: 768px) {
  .social-links a { display: inline-block; padding: 8px 14px; }
}


/* =====================================================================
   THE VISUAL SYSTEM · eight section patterns
   Every class starts fx- so nothing collides with the retained
   header, footer and button rules in css/site.css.
   ===================================================================== */
.fx-wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
.fx-band{padding:88px 0;}
.fx-band.fx-exhibit{padding:64px 0;}
.fx-ground-paper{background:#F4F2EE;color:#1C1F24;}
.fx-ground-white{background:#FFFFFF;color:#1C1F24;}
.fx-ground-ink{background:#1C1F24;color:#FFFFFF;}
.fx-ground-navy{background:#223A5E;color:#FFFFFF;}
.fx-label{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#C9A46A;display:flex;align-items:center;gap:16px;}
.fx-label::before{content:"";width:48px;height:2px;background:#C9A46A;flex:none;}
.fx-ground-paper .fx-label,.fx-ground-white .fx-label{color:#8B6832;}
.fx-h{font-family:var(--font-heading);font-weight:700;font-size:40px;line-height:1.14;letter-spacing:-.02em;margin:0;}
.fx-lede{font-size:21px;line-height:1.6;margin:0;}
.fx-text{font-size:17px;line-height:1.75;margin:0;color:#3a3f47;}
.fx-ground-ink .fx-text,.fx-ground-navy .fx-text{color:#FFFFFF;}
.fx-note{font-size:15px;line-height:1.65;margin:0;}

/* Second-level button. Brass stays reserved for the conversation buttons. */
.fx-go{display:inline-block;align-self:flex-start;font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;border-radius:6px;padding:16px 30px;background:#223A5E;color:#FFFFFF;border:2px solid #223A5E;}
.fx-go:hover{background:#1C1F24;border-color:#1C1F24;color:#FFFFFF;}
.fx-ground-ink .fx-go,.fx-ground-navy .fx-go{background:transparent;color:#C9A46A;border-color:#C9A46A;}
.fx-ground-ink .fx-go:hover,.fx-ground-navy .fx-go:hover{background:#C9A46A;color:#1C1F24;}

/* ---- 1 · THE OPENING ------------------------------------------------ */
.fx-opening{background:linear-gradient(160deg,#1C1F24 0%,#223A5E 78%,#1C1F24 100%);color:#FFFFFF;padding:96px 0 96px;}
.fx-opening .fx-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:72px;align-items:center;}
.fx-opening-copy{display:flex;flex-direction:column;gap:30px;}
.fx-opening h1{font-family:var(--font-heading);font-weight:700;font-size:68px;line-height:1.04;letter-spacing:-.025em;color:#F4F2EE;margin:0;}
.fx-opening .fx-lede{max-width:600px;}
.fx-opening-act{display:flex;flex-direction:column;gap:20px;align-items:flex-start;border-top:1px solid rgba(244,242,238,.2);padding-top:28px;max-width:600px;}
.fx-plate{position:relative;justify-self:end;width:100%;max-width:340px;}
.fx-plate-img{position:relative;}
.fx-plate-img::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid rgba(201,164,106,.5);border-radius:4px;}
.fx-plate img{position:relative;display:block;width:100%;height:auto;border-radius:4px;}
.fx-plate-cap{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:44px;}
.fx-plate-name{font-family:var(--font-heading);font-weight:600;font-size:22px;color:#F4F2EE;}
.fx-plate-role{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9A46A;}

/* ---- 2 · THE LEDGER ------------------------------------------------- */
.fx-ledger .fx-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start;}
.fx-ledger-head{display:flex;flex-direction:column;gap:22px;position:sticky;top:130px;}
.fx-rows{list-style:none;margin:0;padding:0;border-top:2px solid #1C1F24;}
.fx-rows li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:baseline;padding:24px 0;border-bottom:1px solid rgba(28,31,36,.18);}
.fx-rows .n{font-family:var(--font-heading);font-weight:700;font-size:15px;letter-spacing:.12em;color:#8B6832;}
.fx-rows .t{font-family:var(--font-heading);font-weight:600;font-size:30px;line-height:1.22;letter-spacing:-.015em;color:#1C1F24;}

/* ---- 3 · THE EXHIBIT ------------------------------------------------ */
.fx-exhibit .fx-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;}
.fx-exhibit-fig{margin:0;}
.fx-exhibit-fig svg{display:block;width:100%;height:auto;}
.fx-exhibit-copy{display:flex;flex-direction:column;gap:30px;}
.fx-verdict{font-family:var(--font-heading);font-weight:700;font-size:46px;line-height:1.14;letter-spacing:-.02em;margin:0;color:#FFFFFF;}
.fx-verdict span{display:block;color:#C9A46A;}

/* ---- 4 · THE READING COLUMN ----------------------------------------- */
.fx-read .fx-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start;}
.fx-read-head{display:flex;flex-direction:column;gap:22px;position:sticky;top:130px;}
.fx-read-body{display:flex;flex-direction:column;gap:24px;max-width:640px;}
.fx-read-body .fx-lede{color:#1C1F24;font-weight:500;}

/* A marked space for a generated image. Never a stock photograph. */
.fx-slot{position:relative;background:#1C1F24;border:2px dashed #C9A46A;border-radius:4px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px 24px;color:#FFFFFF;min-height:0;}
.fx-slot::before{content:"IMAGE SPACE";font-size:12px;font-weight:700;letter-spacing:.18em;color:#C9A46A;position:absolute;top:20px;left:24px;}
.fx-slot b{font-family:var(--font-heading);font-size:18px;font-weight:600;}
.fx-slot span{font-size:14px;line-height:1.5;}
.fx-slot-43{aspect-ratio:4/3;}
.fx-slot-45{aspect-ratio:4/5;}

/* ---- 5 · THE PLATES ------------------------------------------------- */
.fx-plates{display:grid;gap:28px;margin-top:52px;}
.fx-plates-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.fx-plates-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.fx-card{background:#FFFFFF;border-top:3px solid #C9A46A;border-radius:0 0 4px 4px;padding:30px 30px 32px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 0 rgba(28,31,36,.08);}
.fx-ground-white .fx-card{background:#F4F2EE;}
.fx-card .n{font-family:var(--font-heading);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.02em;color:#8B6832;}
.fx-card h3{font-family:var(--font-heading);font-weight:700;font-size:22px;line-height:1.3;margin:0;color:#1C1F24;}
.fx-card p{font-size:16px;line-height:1.65;margin:0;color:#4A5058;}
.fx-plates-foot{margin-top:44px;display:flex;}

/* ---- 6 · THE FORK --------------------------------------------------- */
.fx-fork-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:end;}
.fx-fork-head > div{display:flex;flex-direction:column;gap:22px;}
.fx-fork-fig{margin:56px 0 0;}
.fx-fork-fig svg{display:block;width:100%;height:auto;}
.fx-fork-fig .phone{display:none;}
.fx-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:40px;}
.fx-path{background:#FFFFFF;border-radius:4px;padding:32px 32px 34px;display:flex;flex-direction:column;gap:12px;border-left:3px solid #C9A46A;}
.fx-path .k{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8B6832;}
.fx-path h3{font-family:var(--font-heading);font-weight:700;font-size:24px;line-height:1.28;margin:0;color:#1C1F24;}

/* ---- 7 · THE PROOF PLATE -------------------------------------------- */
.fx-proof .fx-wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:80px;align-items:start;}
.fx-proof-q{display:flex;flex-direction:column;gap:30px;}
.fx-proof blockquote{margin:0;padding:0;}
.fx-proof blockquote p{font-family:var(--font-heading);font-weight:700;font-size:50px;line-height:1.14;letter-spacing:-.022em;margin:0;color:#FFFFFF;}
.fx-proof-by{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9A46A;margin:0;}
.fx-proof-r{display:flex;flex-direction:column;gap:26px;border-left:3px solid #C9A46A;padding-left:36px;}
.fx-figure{font-family:var(--font-heading);font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-.02em;color:#C9A46A;margin:0;}
.fx-proof-fine{border-top:1px solid rgba(244,242,238,.2);padding-top:22px;display:flex;flex-direction:column;gap:14px;}

/* ---- 8 · THE INVITATION --------------------------------------------- */
.fx-invite-card{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);background:#1C1F24;border-radius:6px;overflow:hidden;color:#FFFFFF;margin-top:48px;}
.fx-invite-card .fx-slot{border-radius:0;border-width:0 2px 0 0;height:100%;}
.fx-invite-copy{padding:60px 56px;display:flex;flex-direction:column;gap:24px;}
.fx-ask{font-family:var(--font-heading);font-weight:600;font-size:24px;line-height:1.35;color:#C9A46A;margin:0;}
.fx-want{font-family:var(--font-heading);font-weight:700;font-size:34px;line-height:1.22;letter-spacing:-.015em;margin:0;}
.fx-invite-act{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-top:6px;}

/* ---- TABLET AND PHONE ----------------------------------------------- */
@media (max-width:900px){
  .fx-wrap{padding:0 20px;}
  .fx-band{padding:56px 0;}
  .fx-band.fx-exhibit{padding:48px 0;}
  .fx-h{font-size:31px;}
  .fx-lede{font-size:18px;}
  .fx-opening{padding:60px 0 64px;}
  .fx-opening .fx-wrap,.fx-ledger .fx-wrap,.fx-exhibit .fx-wrap,.fx-read .fx-wrap,.fx-proof .fx-wrap,.fx-fork-head{grid-template-columns:minmax(0,1fr);gap:36px;}
  .fx-opening h1{font-size:40px;}
  .fx-plate{justify-self:start;max-width:260px;margin-right:18px;}
  .fx-ledger-head,.fx-read-head{position:static;}
  .fx-rows li{grid-template-columns:44px minmax(0,1fr);padding:18px 0;}
  .fx-rows .t{font-size:22px;}
  .fx-verdict{font-size:31px;}
  .fx-exhibit-fig{max-width:420px;}
  .fx-plates{margin-top:40px;gap:16px;}
  .fx-plates-3,.fx-plates-2,.fx-paths{grid-template-columns:minmax(0,1fr);}
  .fx-card{padding:24px 22px 26px;}
  .fx-card .n{font-size:34px;}
  .fx-fork-fig{margin-top:36px;}
  .fx-fork-fig{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px;}
  .fx-fork-fig .desk{width:960px;max-width:none;}
  .fx-paths{gap:16px;margin-top:28px;}
  .fx-path{padding:24px 22px 26px;}
  .fx-proof blockquote p{font-size:32px;}
  .fx-proof-r{padding-left:22px;}
  .fx-figure{font-size:30px;}
  .fx-invite-card{grid-template-columns:minmax(0,1fr);margin-top:32px;}
  .fx-invite-card .fx-slot{border-width:0 0 2px 0;aspect-ratio:16/10;height:auto;}
  .fx-invite-copy{padding:36px 24px 40px;}
  .fx-ask{font-size:19px;}
  .fx-want{font-size:25px;}
  .fx-go{padding:15px 22px;}
}
.fx-invite-solo{grid-template-columns:minmax(0,1fr);}
.fx-invite-solo .fx-invite-copy{max-width:860px;}
.fx-caps{text-transform:uppercase;letter-spacing:.06em;}
.fx-gap{margin-top:8px;}
.fx-read .fx-wrap.fx-block{display:block;}
.fx-head{display:flex;flex-direction:column;gap:22px;}
.fx-head-wide{max-width:780px;}

/* ---- ADDED FOR THE CLARITY SESSION PAGE ------------------------------ */
/* The Opening without the portrait: a fact panel takes its place. */
.fx-opening-solo .fx-wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;}
.fx-opening-solo h1{font-size:58px;line-height:1.06;}
.fx-opening-solo .fx-opening-act{border-top:0;padding-top:4px;}
.fx-spec{margin:0;border-top:3px solid #C9A46A;background:rgba(28,31,36,.45);border-radius:0 0 4px 4px;}
.fx-spec > div{display:flex;flex-direction:column;gap:6px;padding:20px 26px;border-bottom:1px solid rgba(244,242,238,.16);}
.fx-spec > div:last-child{border-bottom:0;}
.fx-spec dt{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#C9A46A;}
.fx-spec dd{margin:0;font-family:var(--font-heading);font-weight:600;font-size:20px;line-height:1.3;color:#F4F2EE;}

/* The Fork as a single line: the order something runs in. */
.fx-line{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));}
.fx-line li{position:relative;border-top:3px solid #1C1F24;padding:30px 20px 0 0;display:flex;flex-direction:column;gap:9px;}
.fx-line li::before{content:"";position:absolute;top:-10px;left:0;width:17px;height:17px;border-radius:50%;background:#1C1F24;}
.fx-line li.is-gate{border-top-color:#C9A46A;}
.fx-line li.is-gate::before{background:#C9A46A;width:23px;height:23px;top:-13px;}
.fx-line li.is-gate ~ li{border-top-color:#223A5E;}
.fx-line li.is-gate ~ li::before{background:#223A5E;}
.fx-line .n{font-family:var(--font-heading);font-weight:700;font-size:15px;letter-spacing:.12em;color:#8B6832;}
.fx-line .t{font-family:var(--font-heading);font-weight:700;font-size:19px;line-height:1.28;color:#1C1F24;}
.fx-line p{font-size:15px;line-height:1.6;margin:0;color:#4A5058;}
.fx-line .tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8B6832;margin-top:2px;}

/* Reading column on a dark ground. */
.fx-ground-navy .fx-read-body .fx-lede,.fx-ground-ink .fx-read-body .fx-lede{color:#FFFFFF;}
.fx-ground-navy .fx-h,.fx-ground-ink .fx-h{color:#F4F2EE;}

/* Small helpers shared by the patterns. */
.fx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start;}
.fx-sub{margin-top:72px;}
.fx-rows-s .t{font-size:21px;line-height:1.35;}
.fx-rows-s li{padding:20px 0;grid-template-columns:minmax(0,1fr);}
.fx-ask-light{color:#1C1F24;border-left:3px solid #C9A46A;padding-left:22px;margin-top:8px;}
.fx-plates-plain .fx-card p{font-size:17px;line-height:1.5;color:#1C1F24;font-weight:500;}
.fx-path .fx-text + .fx-text{margin-top:4px;}
@media (max-width:900px){
  .fx-opening-solo .fx-wrap{grid-template-columns:minmax(0,1fr);}
  .fx-opening-solo h1{font-size:36px;}
  .fx-spec > div{padding:16px 20px;}
  .fx-spec dd{font-size:18px;}
  .fx-line{grid-template-columns:minmax(0,1fr);margin-top:36px;}
  .fx-line li{border-top:0;border-left:3px solid #1C1F24;padding:0 0 28px 26px;}
  .fx-line li:last-child{padding-bottom:0;}
  .fx-line li::before{top:0;left:-10px;}
  .fx-line li.is-gate{border-left-color:#C9A46A;}
  .fx-line li.is-gate::before{top:0;left:-13px;}
  .fx-line li.is-gate ~ li{border-left-color:#223A5E;}
  .fx-two{grid-template-columns:minmax(0,1fr);gap:48px;}
  .fx-sub{margin-top:48px;}
  .fx-rows-s .t{font-size:19px;}
  .fx-rows-s li{grid-template-columns:minmax(0,1fr);}
}
/* Text inside the charcoal invitation card is always white, whatever ground the section sits on. */
.fx-invite-card .fx-text,.fx-invite-card .fx-note,.fx-invite-card .fx-want{color:#FFFFFF;}

/* ---- ADDED FOR THE REMAINING PAGES ----------------------------------- */
/* The Opening as one column, for pages with no portrait and no panel. */
.fx-opening-one .fx-wrap{grid-template-columns:minmax(0,1fr);}
.fx-opening-one .fx-opening-copy{max-width:920px;}
.fx-opening-one h1{font-size:60px;line-height:1.08;}

/* Ledger rows that are things he has said. */
.fx-rows-said .t{font-size:24px;line-height:1.35;}

/* A two-line turn on a light ground. */
.fx-turn{margin:0;max-width:980px;border-left:3px solid #C9A46A;padding-left:36px;display:flex;flex-direction:column;gap:18px;}
.fx-ground-paper .fx-verdict,.fx-ground-white .fx-verdict{color:#1C1F24;}
.fx-ground-paper .fx-verdict-2,.fx-ground-white .fx-verdict-2{color:#8B6832;}

/* The rungs of the two paths. */
.fx-rung{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;background:#FFFFFF;color:#1C1F24;border-radius:4px;padding:24px 26px 26px;border-left:3px solid #C9A46A;}
.fx-rung .n{font-family:var(--font-heading);font-weight:700;font-size:26px;line-height:1.1;color:#8B6832;}
.fx-rung .c{display:flex;flex-direction:column;gap:7px;}
.fx-rung h3{font-family:var(--font-heading);font-weight:700;font-size:21px;line-height:1.3;margin:0;color:#1C1F24;}
.fx-rung .when{font-size:14px;font-weight:600;letter-spacing:.02em;color:#8B6832;}
.fx-rung p{font-size:16px;line-height:1.6;margin:0;color:#4A5058;}
.fx-rung-first{margin-top:52px;}
.fx-rung-after{background:#F4F2EE;border-left-color:#1C1F24;}
.fx-more{font-weight:700;font-size:15px;color:#223A5E;margin-top:4px;}
.fx-fork-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:40px;align-items:start;}
.fx-fork-col{display:flex;flex-direction:column;gap:16px;}
.fx-fork-col .fx-note{color:#FFFFFF;}
.fx-ground-navy .fx-fork-col .fx-label{color:#C9A46A;}

/* The comparison. */
.fx-compare{margin-top:48px;border-top:2px solid #1C1F24;}
.fx-compare-row{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);gap:36px;padding:22px 0;border-bottom:1px solid rgba(28,31,36,.18);align-items:start;}
.fx-compare-row .k{font-family:var(--font-heading);font-weight:700;font-size:17px;color:#1C1F24;}
.fx-compare-row p{margin:0;font-size:16px;line-height:1.6;}
.fx-compare-row .a{color:#4A5058;}
.fx-compare-row .b{color:#1C1F24;font-weight:600;}
.fx-compare-top .a,.fx-compare-top .b{font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#8B6832;}
.fx-after{margin-top:40px;max-width:780px;}

@media (max-width:900px){
  .fx-opening-one h1{font-size:36px;}
  .fx-rows-said .t{font-size:20px;}
  .fx-turn{padding-left:20px;}
  .fx-rung{grid-template-columns:40px minmax(0,1fr);padding:20px 18px 22px;}
  .fx-rung .n{font-size:22px;}
  .fx-rung-first{margin-top:36px;}
  .fx-fork-cols{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:28px;}
  .fx-compare{margin-top:32px;}
  .fx-compare-top{display:none;}
  .fx-compare-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px 0;}
  .fx-compare-row p::before{content:attr(data-k);display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8B6832;margin-bottom:2px;}
}

/* ---- ADDED FOR MEET JEFFREY, THE CONTACT PAGES AND THE TWO ADVISORY PAGES ---- */
.fx-opening .fx-h1-story{font-size:56px;line-height:1.08;}
.fx-opening-form .fx-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;}
.fx-opening-form h1{font-size:52px;line-height:1.08;}
.fx-lede-brass{color:#C9A46A;}
.fx-on-dark{color:#FFFFFF;}
.fx-pull{margin:8px 0;border-left:3px solid #C9A46A;padding-left:26px;}
.fx-pull p{font-family:var(--font-heading);font-weight:600;font-size:25px;line-height:1.38;letter-spacing:-.01em;margin:0;color:#1C1F24;}
.fx-defs{margin:0;border-top:2px solid #1C1F24;}
.fx-defs > div{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;padding:28px 0;border-bottom:1px solid rgba(28,31,36,.18);align-items:start;}
.fx-defs dt{font-family:var(--font-heading);font-weight:700;font-size:21px;line-height:1.3;color:#1C1F24;}
.fx-defs dd{margin:0;font-size:17px;line-height:1.75;color:#3a3f47;max-width:700px;}
.fx-invite-top{margin-top:0;}
@media (max-width:900px){
  .fx-opening .fx-h1-story,.fx-opening-form h1{font-size:36px;}
  .fx-opening-form .fx-wrap{grid-template-columns:minmax(0,1fr);gap:36px;}
  .fx-pull{padding-left:18px;}
  .fx-pull p{font-size:20px;}
  .fx-defs > div{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0;}
  .fx-defs dt{font-size:19px;}
}


/* =====================================================================
   ADDED 23 OCTOBER 2026 · ENTRIES 30 AND 31
   Site-wide fixes first, then the rules for the rebuilt home page.
   Home page rules are scoped to body.jo-home so no other page moves.
   ===================================================================== */

/* ---- SITE-WIDE: focus ring, navy on light grounds, brass on dark ---- */
:focus-visible{outline:3px solid #223A5E;outline-offset:3px;}
nav :focus-visible,footer :focus-visible,.fx-opening :focus-visible,
.fx-ground-ink :focus-visible,.fx-ground-navy :focus-visible,
.fx-invite-card :focus-visible{outline-color:#C9A46A;}

/* ---- SITE-WIDE: the conversation button on dark grounds ----
   The base .btn hover above is now charcoal fill with brass text, for
   light grounds. On dark grounds it goes transparent with brass text. */
nav .btn:hover,footer .btn:hover,.fx-opening .btn:hover,.fx-ground-ink .btn:hover,
.fx-ground-navy .btn:hover,.fx-invite-card .btn:hover{background:transparent;border-color:#C9A46A;color:#C9A46A;}

/* ---- SITE-WIDE: the menu button is a real button ---- */
button.hamburger{background:none;border:0;min-width:44px;min-height:44px;align-items:center;justify-content:center;}

/* ---- SITE-WIDE: the fixed header never covers a focused element ---- */
html{scroll-padding-top:120px;}
@media (max-width:768px){
  html{scroll-padding-top:0;}
  nav{position:relative;}            /* phone header scrolls away, not pinned */
}

/* ---- THE NAME LOCKUP, which leads ----
   Name in Montserrat 700, credential in Inter 500 capitals. The credential
   is held at 12px, the smallest screen text the brand allows, which puts it
   at about 46 percent of the name rather than the 37 percent ideal. */
.jo-lockup{display:flex;flex-direction:column;justify-content:center;min-height:44px;line-height:1.1;text-decoration:none;}
.jo-lockup-name{font-family:var(--font-heading);font-weight:700;font-size:26px;letter-spacing:-.01em;color:#F4F2EE;}
.jo-lockup-cred{font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.135em;text-transform:uppercase;color:#C9A46A;margin-top:5px;}
@media (max-width:1080px){ .jo-lockup-name{font-size:22px;} }
@media (max-width:768px){ .jo-lockup-name{font-size:21px;} }

/* ---- SKIP LINK ---- */
.jo-skip{position:absolute;left:-9999px;top:12px;z-index:2000;background:#F4F2EE;color:#1C1F24;padding:12px 18px;border-radius:6px;font-weight:700;}
.jo-skip:focus{left:20px;}

/* ---- HOME PAGE: space and type from the web skill ---- */
.jo-home .fx-band,.jo-home .fx-band.fx-exhibit{padding:60px 0;}
.jo-home .fx-opening{padding:72px 0;}
.jo-home .fx-opening h1{font-size:60px;line-height:1.08;}
.jo-home .fx-lede{font-size:20px;}
.jo-home .fx-text{font-size:18px;line-height:1.7;}
.jo-home .fx-plates{margin-top:36px;gap:24px;}
.jo-home .fx-card{box-shadow:none;}

/* Portrait in a 1px brass frame with 8px clear space. */
.jo-home .fx-plate{padding:8px;}
.jo-home .fx-plate-img::before{inset:-8px;border:1px solid #C9A46A;border-radius:4px;}
.jo-home .fx-plate-cap{padding-top:28px;}

/* The line for the founder who has outgrown his stage. Present and quiet. */
.jo-route{margin-top:36px;padding-top:28px;border-top:1px solid rgba(125,133,140,.45);max-width:640px;display:flex;flex-direction:column;gap:12px;}
.jo-route a{display:inline-block;align-self:flex-start;padding:10px 0;font-weight:600;font-size:17px;}

/* The proof band, at the weight of its neighbours. The figure is its one
   strong element, in charcoal, since brass fails as text on off-white. */
.jo-figure{font-family:var(--font-heading);font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-.02em;color:#1C1F24;margin:0;}
.jo-fine{color:#4A5058;}

/* One sentence, large, alone. The turning clause in brass for text. */
.jo-alone-line{font-family:var(--font-heading);font-weight:700;font-size:46px;line-height:1.16;letter-spacing:-.02em;max-width:900px;margin:0;color:#1C1F24;}
.jo-alone-line span{color:#8B6832;}
/* The clarity question starts on its own line, with space above, wherever the clarity line is set alone. */
.jo-alone-line .jo-alone-q{display:block;margin-top:.55em;}

/* The invitation card follows its heading sections, so it needs no top gap. */
.jo-invite .fx-invite-card{margin-top:0;}

@media (max-width:900px){
  .jo-home .fx-band,.jo-home .fx-band.fx-exhibit{padding:40px 0;}
  .jo-home .fx-opening{padding:48px 0;}
  .jo-home .fx-opening h1{font-size:38px;}
  .jo-home .fx-h{font-size:29px;}
  .jo-home .fx-lede{font-size:18px;}
  .jo-home .fx-text{font-size:17px;}
  .jo-home .fx-rows-said .t{font-size:19px;}
  .jo-home .fx-plates{margin-top:28px;gap:16px;}
  .jo-home .fx-plate{max-width:276px;}
  .jo-figure{font-size:31px;}
  .jo-alone-line{font-size:31px;}
  .jo-home .fx-opening-act .btn,.jo-invite .btn{display:block;width:100%;text-align:center;}
}

/* ---- HOME PAGE: sections below the first screen fade and rise ----
   The script adds .jo-reveal only when motion is allowed, so the page
   is fully visible with scripts blocked or reduced motion set. */
.jo-reveal .jo-home main > section:not(.fx-opening) > .fx-wrap{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.jo-reveal .jo-home main > section.is-in > .fx-wrap{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .jo-reveal .jo-home main > section > .fx-wrap{opacity:1;transform:none;transition:none;}
}

/* ---- HOME PAGE FIXES, 23 OCTOBER, AFTER THE BROWSER CHECK ---- */
/* The ledger heading wraps where the column ends, without a forced break. */
.jo-home .fx-ledger-head .fx-h{text-wrap:balance;}
/* The invitation copy holds its reading width and sits centred in the card. */
.jo-invite .fx-invite-solo .fx-invite-copy{margin:0 auto;width:100%;}
/* The turn diagram: a taller drawing on narrow screens keeps labels at 16px or more. */
.fx-exhibit-fig .jo-phone{display:none;}
/* The footer lines up with the 40px side margin of the sections above. */
.jo-home footer .container{padding:0 40px;}
@media (max-width:900px){
  .fx-exhibit-fig .jo-desk{display:none;}
  .fx-exhibit-fig .jo-phone{display:block;}
  .jo-home footer .container{padding:0 20px;}
}

/* ---- HOME PAGE, 24 OCTOBER: the Unspoken Truth above the turn ---- */
.jo-turn-lead{font-size:20px;line-height:1.6;color:#F4F2EE;margin:0;max-width:560px;}
@media (max-width:900px){ .jo-turn-lead{font-size:18px;} }

/* Home page turn: space between the two sentences of the verdict. Scoped to the home page. */
.jo-home .fx-verdict span{margin-top:.5em;}

/* Home page: the proof folded into Who You Would Be Talking To, on navy. Scoped to the home page. */
.jo-who .fx-label{color:#C9A46A;}
.jo-who .jo-who-proof{display:flex;flex-direction:column;gap:14px;border-top:1px solid rgba(244,242,238,.25);padding-top:30px;margin-top:8px;}
.jo-who .jo-figure{color:#C9A46A;font-size:32px;}
.jo-who .jo-fine{color:#F4F2EE;}
@media (max-width:900px){ .jo-who .jo-figure{font-size:24px;} }

/* =====================================================================
   REBUILT PAGES, from 24 OCTOBER 2026
   body.jo-grid is set on each page as it is rebuilt to the home page's
   standard. Page-only rules use that page's own body class.
   ===================================================================== */

/* The current page in the navigation, in place of the inline colour. */
nav a[aria-current="page"]{color:var(--brass);}

/* Space and type, matching the home page. */
.jo-grid .fx-band,.jo-grid .fx-band.fx-exhibit{padding:60px 0;}
.jo-grid .fx-opening{padding:72px 0;}
.jo-grid .fx-opening h1{font-size:60px;line-height:1.08;}
.jo-grid .fx-lede{font-size:20px;}
.jo-grid .fx-text{font-size:18px;line-height:1.7;}
.jo-grid .fx-plates{margin-top:36px;gap:24px;}
.jo-grid .fx-card{box-shadow:none;}

/* The footer lines up with the 40px side margin of the sections above. */
.jo-grid footer .container{padding:0 40px;}

/* A link inside a paragraph on navy or charcoal: off-white, underlined. */
.jo-grid .fx-ground-navy .fx-text a,.jo-grid .fx-ground-ink .fx-text a{color:#F4F2EE;}
.jo-grid .fx-ground-navy .fx-text a:hover,.jo-grid .fx-ground-ink .fx-text a:hover{color:#C9A46A;}

/* The Clarity Session: what he leaves with, as a ledger beneath the roadmap. */
.jo-cs .jo-leave{margin-top:28px;max-width:780px;}

@media (max-width:900px){
  .jo-grid .fx-band,.jo-grid .fx-band.fx-exhibit{padding:40px 0;}
  .jo-grid .fx-opening{padding:48px 0;}
  .jo-grid .fx-opening h1{font-size:38px;}
  .jo-grid .fx-h{font-size:29px;}
  .jo-grid .fx-lede{font-size:18px;}
  .jo-grid .fx-text{font-size:17px;}
  .jo-grid .fx-plates{margin-top:28px;gap:16px;}
  .jo-grid .fx-opening-act .btn,.jo-grid .fx-invite-act .btn{display:block;width:100%;text-align:center;}
  .jo-grid footer .container{padding:0 20px;}
}

/* Sections below the first screen fade and rise, as on the home page. */
.jo-reveal .jo-grid main > section:not(.fx-opening) > .fx-wrap{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.jo-reveal .jo-grid main > section.is-in > .fx-wrap{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .jo-reveal .jo-grid main > section > .fx-wrap{opacity:1;transform:none;transition:none;}
}
/* Step descriptions in the order a session runs in, held at the 16px card size. */
.jo-grid .fx-line p{font-size:16px;}

/* ---- THE CLARITY SESSION, reordered 24 October ---- */
.jo-cs .jo-column{max-width:640px;display:flex;flex-direction:column;gap:20px;}
.jo-cs .jo-column .fx-lede{color:#1C1F24;font-weight:500;}
.jo-cs .jo-cs-features .fx-path{background:#FFFFFF;}
.jo-cs .jo-invest .fx-head{max-width:560px;}
.jo-cs .jo-bio .fx-read-head{position:static;}
.jo-cs .jo-why-lede{max-width:640px;margin:28px 0 0;color:#1C1F24;}
/* Who it is for, and who it is not: notes held at the 16px body floor, the lead line spaced from the rows. */
.jo-cs .jo-fit .fx-note{font-size:16px;margin-top:20px;color:#4A5058;text-wrap:balance;}
.jo-cs .jo-fit .fx-rows .t{text-wrap:pretty;}
.jo-cs .jo-fit .fx-lede{margin-top:20px;text-wrap:pretty;}
.jo-cs .jo-fit .fx-rows{margin-top:24px;}
/* The two closing notes share the lead line's style and break evenly, so neither ends on a single word. */
.jo-cs .jo-fit .fx-head > p:last-child{text-wrap:balance;}
/* What can happen next: two plates of equal weight, no brass, body-size text, the closing line full width under both. */
.jo-cs .jo-next .jo-next-plates{margin-top:36px;}
.jo-cs .jo-next .fx-card{background:#FFFFFF;border-top:2px solid #1C1F24;border-radius:0 0 4px 4px;padding:32px 32px 34px;gap:14px;box-shadow:none;}
.jo-cs .jo-next .fx-card h3{font-size:24px;}
.jo-cs .jo-next .fx-card p{font-size:18px;line-height:1.65;color:#3a3f47;text-wrap:pretty;}
.jo-cs .jo-next .jo-next-close{margin-top:32px;color:#1C1F24;}
@media (max-width:900px){ .jo-cs .jo-next .jo-next-plates{margin-top:28px;} .jo-cs .jo-next .fx-card{padding:24px 22px 26px;} .jo-cs .jo-next .fx-card h3{font-size:21px;} .jo-cs .jo-next .fx-card p{font-size:17px;} .jo-cs .jo-next .jo-next-close{margin-top:24px;text-wrap:balance;} .jo-cs .jo-next .fx-h{text-wrap:balance;} .jo-cs .jo-next .fx-card p{text-wrap:pretty;} }
@media (max-width:400px){ .jo-cs .jo-next .fx-card p:last-child{text-wrap:balance;} }
/* Desktop: the two columns share rows, so both rules and both lists start at the same height. */
@media (min-width:901px){ .jo-cs .jo-fit .fx-two{grid-template-rows:repeat(4,auto);row-gap:0;} .jo-cs .jo-fit .fx-head{display:grid;grid-row:1 / span 4;grid-template-rows:subgrid;row-gap:22px;align-content:start;} }
/* Who you would be talking to: on phones the label wraps without leaving TO alone on a line. */
@media (max-width:900px){ .jo-cs .jo-bio .fx-label{letter-spacing:.12em;gap:12px;} .jo-cs .jo-bio .fx-label::before{width:36px;} }
.jo-cs .jo-invite .fx-invite-card{margin-top:0;}
.jo-cs .jo-invite .fx-invite-solo .fx-invite-copy{margin:0;width:100%;}

/* The Clarity Session: the vision lines sit under the recognition line, at lead size. */
.jo-cs .jo-recog-follow{max-width:640px;margin-top:32px;display:flex;flex-direction:column;gap:18px;}
.jo-cs .jo-recog-follow .fx-lede{color:#1C1F24;}
@media (max-width:900px){ .jo-cs .jo-recog-follow{margin-top:24px;gap:14px;} }

/* ---- HOW THIS WORKS, rebuilt 24 October ---- */
.jo-hw .fx-proof-r .fx-text{font-size:20px;line-height:1.6;}
.jo-hw .jo-seat .fx-read-body .fx-lede{color:#1C1F24;}
/* The two paths on a light ground, used if the navy reads too heavy beside the proof. */
.jo-hw .jo-fork-light{background:#F4F2EE;color:#1C1F24;}
.jo-hw .jo-fork-light .fx-h{color:#1C1F24;}
.jo-hw .jo-fork-light .fx-text{color:#3A3F47;}
.jo-hw .jo-fork-light .fx-label{color:#8B6832;}
.jo-hw .jo-fork-light .fx-fork-col .fx-note{color:#4A5058;}
.jo-hw .jo-fork-light .fx-rung-after{background:#FFFFFF;}
@media (max-width:900px){ .jo-hw .fx-proof-r .fx-text{font-size:18px;} }
.jo-hw .fx-fork-col .fx-note{font-size:16px;}

/* ---- MEET JEFFREY, rebuilt 24 October ---- */
.jo-mj .fx-opening .fx-h1-story{font-size:60px;line-height:1.08;}
.jo-mj .jo-range .fx-verdict{font-size:46px;}
.jo-mj .jo-range .fx-read-body .fx-lede{color:#FFFFFF;}
@media (max-width:900px){
  .jo-mj .fx-opening .fx-h1-story{font-size:38px;}
  .jo-mj .jo-range .fx-verdict{font-size:31px;}
}
/* Portrait in a 1px brass frame with 8px clear space, as on the home page. */
.jo-mj .fx-plate{padding:8px;}
.jo-mj .fx-plate-img::before{inset:-8px;border:1px solid #C9A46A;border-radius:4px;}
@media (max-width:900px){ .jo-mj .fx-plate{max-width:276px;} }

/* ---- THE CONDITION, moved to the fractional path 24 October ---- */
.jo-tc .fx-opening h1{font-size:60px;line-height:1.08;max-width:900px;}
.jo-tc .fx-ground-white .fx-read-body .fx-lede{color:#1C1F24;font-weight:500;}
.jo-tc .jo-gate-act{flex-direction:row;flex-wrap:wrap;gap:16px;align-items:center;}
@media (max-width:900px){ .jo-tc .fx-opening h1{font-size:38px;} .jo-tc .jo-gate-act{flex-direction:column;align-items:stretch;} }

/* ==========================================================
   CONTACT PAGES · Start a Conversation (.jo-sc) and Thank You Call (.jo-ty)
   Web skill treatment 13 for the form. Nothing here changes how the form sends.
   ========================================================== */
.jo-form{background:#F4F2EE;border-radius:4px;padding:44px 40px;display:flex;flex-direction:column;gap:22px;}
.jo-form-h{font-family:var(--font-heading);font-weight:700;font-size:24px;line-height:1.25;color:#1C1F24;margin:0;}
.jo-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.f-group{display:flex;flex-direction:column;gap:8px;min-width:0;}
.f-label{font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1.4;color:#1C1F24;}
.f-input{width:100%;min-width:0;height:48px;background:#FFFFFF;border:1px solid #7D858C;border-radius:4px;padding:0 14px;font-family:var(--font-body);font-size:16px;color:#1C1F24;}
textarea.f-input.f-area{height:auto;min-height:112px;padding:12px 14px;line-height:1.5;resize:vertical;}
.f-input:focus-visible{outline:3px solid #223A5E;outline-offset:3px;}
.f-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.jo-form-btn{display:block;width:100%;min-height:52px;padding:16px 24px;text-align:center;cursor:pointer;font-family:var(--font-body);font-size:16px;border:0;}
.jo-form-btn:focus-visible{outline:3px solid #223A5E;outline-offset:3px;}
.f-error{display:none;margin:0;font-size:16px;font-weight:600;color:#8A4A26;}
.jo-form-note{margin:0;font-size:16px;line-height:1.55;color:#4A5058;}
.jo-sc .fx-opening-form .fx-opening-copy .fx-text{max-width:640px;}
.jo-cal-panel{background:#FFFFFF;border-top:3px solid #C9A46A;border-radius:4px;padding:36px 40px;}
.jo-cal-h{font-family:var(--font-heading);font-weight:700;font-size:24px;line-height:1.25;color:#1C1F24;margin:0 0 24px;}
.jo-cal:empty{display:none;}
.jo-cal{width:100%;min-height:640px;overflow:auto;}
.jo-cal-open{display:inline-block;min-height:48px;padding:14px 28px;}
.jo-cal:not(:empty) + .jo-cal-open{display:none;}
@media (max-width:900px){
  .jo-form{padding:32px 20px;}
  .jo-form-row{grid-template-columns:minmax(0,1fr);}
  .jo-cal-panel{padding:28px 20px;}
  .jo-cal-open{display:block;width:100%;text-align:center;}
}

/* LEGAL PAGES (.jo-legal). The footer lines up with the header, as on the rebuilt pages.
   The legal text keeps its narrower reading column. */
.jo-legal footer .container{padding:0 40px;}
@media (max-width:900px){ .jo-legal footer .container{padding:0 20px;} }

/* VIRTUAL BOARD ADVISORY (.jo-vba). Body text floor of 16px for the line under the terms. */
.jo-vba .fx-note{font-size:16px;}

/* LEGAL PAGES. Long web addresses in the policy text wrap on phones instead of widening the page. */
.jo-legal .sec p{overflow-wrap:anywhere;}

/* THE CLARITY SESSION · Investment (.jo-invest), recast 26 October 2026, panel revised the same day (revision 2).
   The three market alternatives sit in a quiet Ledger, no numerals and no brass.
   The Clarity Session is the dominant block: full width, the largest type in the section, the only brass. */
.jo-invest.fx-ledger .fx-wrap{row-gap:56px;}
.jo-invest .fx-ledger-head{position:static;}
.jo-invest .fx-ledger-head .fx-label{color:#4A5058;}
.jo-invest .fx-ledger-head .fx-label::before{background:#1C1F24;}
.jo-invest .jo-invest-rows li{display:block;padding:22px 0;}
.jo-invest .jo-invest-name{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#1C1F24;margin:0;}
.jo-invest .jo-invest-fig{font-family:var(--font-heading);font-weight:600;font-size:20px;line-height:1.3;color:#4A5058;margin:4px 0 0;}
.jo-invest .jo-invest-detail{font-size:16px;line-height:1.55;margin:8px 0 0;color:#4A5058;}
.jo-invest .jo-invest-unit{display:block;}
.jo-invest .jo-invest-place{display:block;color:#1C1F24;font-weight:500;margin-top:2px;}
.jo-invest .jo-invest-session{grid-column:1 / -1;margin-top:0;}
.jo-invest .jo-invest-session .fx-invite-copy{max-width:none;padding:72px 72px 76px;gap:28px;}
.jo-invest .jo-invest-session .fx-label{color:#C9A46A;}
.jo-invest .jo-invest-session .fx-text{font-size:18px;line-height:1.7;max-width:760px;}
@media (max-width:900px){
  .jo-invest.fx-ledger .fx-wrap{row-gap:28px;}
  .jo-invest .jo-invest-rows li{padding:14px 0;}
  .jo-invest .jo-invest-name{font-size:19px;}
  .jo-invest .jo-invest-fig{font-size:18px;margin-top:2px;}
  .jo-invest .jo-invest-detail{margin-top:4px;line-height:1.45;}
  .jo-invest .jo-invest-session .fx-invite-copy{padding:40px 24px 44px;gap:22px;}
  .jo-invest .jo-invest-session .fx-text{font-size:17px;}
  .jo-invest .jo-invest-session .fx-invite-act .btn{display:block;width:100%;text-align:center;}
}
/* Revision 2: the panel answers the list. Headline largest in the section, the commitment line as a brass subheadline, then a facts row. */
.jo-invest .jo-invest-headline{font-family:var(--font-heading);font-weight:700;font-size:48px;line-height:1.12;letter-spacing:-.02em;color:#F4F2EE;margin:0;max-width:900px;text-wrap:balance;}
.jo-invest .jo-invest-sub{font-family:var(--font-heading);font-weight:600;font-size:26px;line-height:1.35;color:#C9A46A;margin:0;max-width:900px;text-wrap:balance;}
.jo-invest .jo-invest-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:8px 0 0;padding-top:24px;border-top:1px solid rgba(154,163,171,.45);}
.jo-invest .jo-invest-facts dt{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#F4F2EE;margin:0 0 8px;}
.jo-invest .jo-invest-facts dd{margin:0;font-size:17px;line-height:1.45;color:#FFFFFF;font-weight:600;}
@media (max-width:900px){
  .jo-invest .jo-invest-headline{font-size:32px;}
  .jo-invest .jo-invest-sub{font-size:21px;}
  .jo-invest .jo-invest-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;}
  .jo-invest .jo-invest-facts dd{font-size:16px;}
}
@media (max-width:400px){ .jo-invest .jo-invest-session{margin-left:-20px;margin-right:-20px;border-radius:0;} .jo-invest .jo-invest-headline{font-size:30px;} .jo-invest .jo-invest-session .fx-invite-copy{padding:36px 20px 40px;} .jo-invest .jo-invest-session .fx-invite-act .btn{padding-left:16px;padding-right:16px;white-space:nowrap;} }

/* How This Works, One room first: the four opening paragraphs never end a line on a single word. */
.jo-hw .jo-fork-light .fx-read-body > p{text-wrap:pretty;}
/* How This Works, One room first: the two paths after the Session, two choices at equal weight. No bullets, numerals or brass. */
.jo-hw .jo-hw-paths{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin:8px 0;}
.jo-hw .jo-hw-path{border-top:2px solid #1C1F24;padding-top:18px;display:flex;flex-direction:column;gap:10px;}
.jo-hw .jo-hw-path-lead{font-family:var(--font-heading);font-weight:700;font-size:21px;line-height:1.3;color:#1C1F24;margin:0;text-wrap:balance;}
.jo-hw .jo-hw-path .fx-text{text-wrap:pretty;}
@media (max-width:900px){ .jo-hw .jo-hw-paths{grid-template-columns:minmax(0,1fr);gap:24px;} .jo-hw .jo-hw-path-lead{font-size:19px;} }
/* How This Works, the fork, drawn left to right. The Clarity Session on the left as the common start,
   a slate spine branching to two rows: On call on top, Alongside your team below as compact steps.
   Below 1240px it stacks top to bottom in the same order, with the spine down the left. */
.jo-hw .jo-fork-light .fx-read-head{position:static;}
.jo-hw .fx-rung .n .jo-hw-dash,.jo-hw .jo-flow .jo-hw-dash{display:block;width:22px;height:3px;background:#C9A46A;margin-top:13px;}
.jo-hw .jo-flow{position:relative;margin-top:56px;}
.jo-hw .jo-flow-start,.jo-hw .jo-flow-vba,.jo-hw .jo-flow-step{position:relative;background:#FFFFFF;color:#1C1F24;border-radius:4px;border-left:3px solid #C9A46A;}
.jo-hw .jo-flow-start,.jo-hw .jo-flow-vba{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:24px 24px 26px;}
.jo-hw .jo-flow .n{font-family:var(--font-heading);font-weight:700;font-size:26px;line-height:1.1;color:#8B6832;}
.jo-hw .jo-flow .c{display:flex;flex-direction:column;gap:7px;}
.jo-hw .jo-flow h3{font-family:var(--font-heading);font-weight:700;font-size:21px;line-height:1.3;margin:0;color:#1C1F24;text-wrap:balance;}
.jo-hw .jo-flow .when{font-size:14px;font-weight:600;letter-spacing:.02em;color:#8B6832;text-wrap:pretty;}
.jo-hw .jo-flow .c p{font-size:16px;line-height:1.6;margin:0;color:#4A5058;text-wrap:pretty;}
.jo-hw .jo-flow .fx-note{font-size:16px;color:#4A5058;text-wrap:pretty;}
.jo-hw .jo-flow-head{display:flex;flex-direction:column;gap:10px;}
.jo-hw .jo-flow-step{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;}
.jo-hw .jo-flow-step .n{font-size:22px;}
.jo-hw .jo-flow-step h3{font-size:18px;}
.jo-hw .jo-flow-step .when{font-size:15px;}
.jo-hw .jo-flow-after{border-left-color:#1C1F24;}
.jo-hw .jo-flow-step p{font-size:16px;line-height:1.55;margin:0;color:#4A5058;text-wrap:pretty;}
.jo-hw .jo-flow-c{display:none;}
@media (min-width:1240px){
  .jo-hw .jo-flow-wrap{max-width:1400px;}
  .jo-hw .jo-flow{display:grid;grid-template-columns:256px 48px minmax(0,1fr);grid-template-rows:auto auto auto auto;}
  .jo-hw .jo-flow-start{grid-column:1;grid-row:1 / 5;align-self:center;grid-template-columns:minmax(0,1fr);}
  .jo-hw .jo-flow-start::after{content:"";position:absolute;left:100%;top:50%;width:21px;height:2px;margin-left:3px;background:#7D858C;}
  .jo-hw .jo-flow-c{display:block;position:relative;grid-column:2;}
  .jo-hw .jo-flow-c::before,.jo-hw .jo-flow-c::after{content:"";position:absolute;background:#7D858C;}
  .jo-hw .jo-flow-c::before{left:23px;width:2px;}
  .jo-hw .jo-flow-c1{grid-row:2;} .jo-hw .jo-flow-c2{grid-row:3;} .jo-hw .jo-flow-c3{grid-row:4;}
  .jo-hw .jo-flow-c1::before{top:50%;bottom:0;}
  .jo-hw .jo-flow-c2::before{top:0;bottom:0;}
  .jo-hw .jo-flow-c3::before{top:0;height:50%;}
  .jo-hw .jo-flow-c1::after,.jo-hw .jo-flow-c3::after{left:23px;right:0;top:50%;height:2px;margin-top:-1px;}
  .jo-hw .jo-flow-h1{grid-column:3;grid-row:1;padding-bottom:18px;}
  .jo-hw .jo-flow-t1{grid-column:3;grid-row:2;display:flex;align-items:center;gap:36px;}
  .jo-hw .jo-flow-vba{flex:0 0 470px;}
  .jo-hw .jo-flow-end{max-width:300px;}
  .jo-hw .jo-flow-h2{grid-column:3;grid-row:3;padding:56px 0 18px;}
  .jo-hw .jo-flow-t2{grid-column:3;grid-row:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative;}
  .jo-hw .jo-flow-t2::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#7D858C;}
  .jo-hw .jo-flow-start .n{margin-bottom:4px;}
  .jo-hw .jo-flow-step{padding:18px 14px 20px;}
  .jo-hw .jo-flow-step p{text-wrap:balance;}
  .jo-hw .jo-flow-t2{align-items:stretch;}
  .jo-hw .jo-flow-step h3{font-size:17px;}
  .jo-hw .jo-flow-start h3{font-size:20px;}
  .jo-hw .jo-flow-step .when{text-wrap:balance;font-size:14px;}
  .jo-hw .jo-flow-step:not(.jo-flow-after) h3{max-width:7.5em;}
}
@media (max-width:1239px){
  .jo-hw .jo-flow{display:flex;flex-direction:column;gap:16px;padding-left:34px;}
  .jo-hw .jo-flow::before{content:"";position:absolute;left:10px;top:30px;bottom:0;width:2px;background:#7D858C;}
  .jo-hw .jo-flow-start::before,.jo-hw .jo-flow-vba::before,.jo-hw .jo-flow-step::before{content:"";position:absolute;left:-27px;width:24px;top:29px;height:2px;background:#7D858C;}
  .jo-hw .jo-flow-t2 .jo-flow-step:last-child::after{content:"";position:absolute;left:-30px;width:8px;top:31px;bottom:0;background:#F4F2EE;}
  .jo-hw .jo-flow-head{padding-top:24px;}
  .jo-hw .jo-flow-t1,.jo-hw .jo-flow-t2{display:flex;flex-direction:column;gap:12px;}
  .jo-hw .jo-flow-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;row-gap:4px;}
  .jo-hw .jo-flow-step h3,.jo-hw .jo-flow-step .when,.jo-hw .jo-flow-step p{grid-column:2;}
  .jo-hw .jo-flow-step .n{grid-row:1 / 4;}
  .jo-hw .jo-flow-step p{margin-top:4px;}
}
@media (max-width:900px){ .jo-hw .jo-flow{margin-top:40px;} .jo-hw .jo-flow-start,.jo-hw .jo-flow-vba{grid-template-columns:40px minmax(0,1fr);padding:20px 18px 22px;} .jo-hw .jo-flow-start .n,.jo-hw .jo-flow-vba .n{font-size:22px;} .jo-hw .jo-flow .jo-hw-dash{width:18px;margin-top:11px;} }
@media (max-width:400px){ .jo-hw .jo-flow{padding-left:26px;} .jo-hw .jo-flow::before{left:6px;} .jo-hw .jo-flow-start::before,.jo-hw .jo-flow-vba::before,.jo-hw .jo-flow-step::before{left:-23px;width:20px;} .jo-hw .jo-flow-t2 .jo-flow-step:last-child::after{left:-26px;} .jo-hw .jo-flow-start,.jo-hw .jo-flow-vba{grid-template-columns:30px minmax(0,1fr);padding:18px 16px 20px;} .jo-hw .jo-flow-step{grid-template-columns:30px minmax(0,1fr);padding:16px 16px 18px;} .jo-hw .jo-flow h3{font-size:19px;} .jo-hw .jo-flow-step h3{font-size:18px;} .jo-hw .jo-flow .fx-label{letter-spacing:.12em;gap:12px;} .jo-hw .jo-flow .fx-label::before{width:32px;} .jo-hw .jo-flow .jo-hw-dash{width:16px;} }
@media (max-width:340px){ .jo-hw .jo-flow h3{font-size:18px;} .jo-hw .jo-flow-start,.jo-hw .jo-flow-vba{grid-template-columns:minmax(0,1fr);row-gap:6px;} .jo-hw .jo-flow-start h3,.jo-hw .jo-flow-vba h3{font-size:17px;} }
.jo-hw .jo-hw-path .fx-text{text-wrap:pretty;}
/* How This Works: When it runs on you, its own full-bleed navy band after the fork section.
   Single column, left-aligned with the page's text column. Off-white type, inverted off-white button. No brass. */
.jo-hw .jo-runs-inner{max-width:760px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
.jo-hw .jo-runs .fx-label{color:#F4F2EE;}
.jo-hw .jo-runs .fx-label::before{background:#F4F2EE;}
.jo-hw .jo-runs .fx-h{color:#F4F2EE;text-wrap:balance;}
.jo-hw .jo-runs .fx-text{color:#F4F2EE;font-size:18px;line-height:1.7;max-width:36em;text-wrap:pretty;}
.jo-hw .jo-runs .fx-go{background:#F4F2EE;color:#223A5E;border-color:#F4F2EE;min-height:44px;margin-top:8px;text-wrap:balance;}
.jo-hw .jo-runs .fx-go:hover{background:#FFFFFF;border-color:#FFFFFF;color:#1C1F24;}
.jo-hw .jo-runs .fx-go:focus-visible{outline:2px solid #F4F2EE;outline-offset:3px;}
.jo-hw .jo-runs.fx-band{padding:112px 0;}
@media (max-width:900px){ .jo-hw .jo-runs.fx-band{padding:64px 0;} .jo-hw .jo-runs-inner{gap:20px;} .jo-hw .jo-runs .fx-text{font-size:17px;} .jo-hw .jo-runs .fx-go{align-self:stretch;text-align:center;} }
@media (max-width:400px){ .jo-hw .jo-runs .fx-h{font-size:27px;} .jo-hw .jo-runs .fx-label{letter-spacing:.12em;gap:12px;} .jo-hw .jo-runs .fx-label::before{width:32px;} }
@media (max-width:340px){ .jo-hw .jo-runs .fx-h{font-size:25px;} }
/* How This Works: Three things worth knowing. Balanced breaks so no heading or body leaves a word alone; plates stay equal height, text top-aligned. */
.jo-hw .jo-hw-know .fx-card h3{text-wrap:balance;}
.jo-hw .jo-hw-know .fx-card p{text-wrap:pretty;}
.jo-hw .jo-hw-know .fx-plates{align-items:stretch;}
.jo-hw .jo-hw-know .fx-card{justify-content:flex-start;}
/* How This Works: comparison table cells break without leaving a word alone. */
.jo-hw .fx-compare p{text-wrap:balance;}
/* Meet Jeffrey opening: "Mine is my name." never splits, and the heading breaks between its two sentences where it can. */
.jo-mj .fx-opening .fx-h1-story{text-wrap:balance;}
.jo-mj .jo-mj-keep{white-space:nowrap;}
.jo-mj .fx-opening .jo-mj-s{display:block;text-wrap:balance;}
.jo-mj .fx-opening .fx-lede{text-wrap:pretty;}
.jo-mj .jo-range .fx-verdict span{text-wrap:balance;}
@media (min-width:980px){ .jo-mj .fx-opening .jo-mj-a{display:block;} }
@media (max-width:400px){ .jo-mj .fx-opening .fx-h1-story{font-size:34px;} }
@media (max-width:340px){ .jo-mj .fx-opening .fx-h1-story{font-size:31px;} }
/* Meet Jeffrey, Still operating: the location and industries as a labelled facts row, the pattern of the Investment panel's facts on The Clarity Session, set for a light ground. */
.jo-mj .jo-mj-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;margin:8px 0 0;padding-top:24px;border-top:1px solid rgba(125,133,140,.45);}
.jo-mj .jo-mj-facts dt{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8B6832;margin:0 0 8px;}
.jo-mj .jo-mj-facts dd{margin:0;font-size:18px;line-height:1.6;color:#3A3F47;font-weight:400;text-wrap:pretty;}
.jo-mj .jo-invite .fx-ask{text-wrap:pretty;}
@media (max-width:600px){ .jo-mj .jo-mj-facts{grid-template-columns:minmax(0,1fr);gap:20px;} }
@media (max-width:900px){ .jo-mj .jo-mj-facts dd{font-size:17px;} }
.jo-mj .fx-read .fx-h{text-wrap:balance;}
.jo-mj .fx-read-body .fx-text,.jo-mj .fx-pull p{text-wrap:pretty;}
@media (max-width:340px){ .jo-mj .jo-invite .btn{white-space:nowrap;padding-left:16px;padding-right:16px;} }
/* Meet Jeffrey and The Clarity Session: the closing card content sits 56px in from the card's left edge, as on How This Works. The home page keeps the shared centring rule. */
.jo-mj .jo-invite .fx-invite-solo .fx-invite-copy{margin:0;width:100%;}
/* Home page: the closing card's content starts 56px in from the card's left edge, as on Meet Jeffrey, The Clarity Session and How This Works. */
.jo-home .jo-invite .fx-invite-solo .fx-invite-copy{margin:0;width:100%;}
.jo-home .jo-invite .fx-want{text-wrap:balance;}
.jo-home .jo-invite .fx-ask,.jo-home .jo-invite .fx-text{text-wrap:pretty;}
@media (max-width:340px){ .jo-home .jo-invite .btn{white-space:nowrap;padding-left:16px;padding-right:16px;} }
/* The Condition, the gate: the inline link to The Clarity Session stays on one line, and the question breaks without leaving a word alone. */
.jo-tc .fx-ground-navy .fx-text a{white-space:nowrap;}
.jo-tc .fx-ground-navy .fx-ask,.jo-tc .fx-ground-navy .fx-text{text-wrap:pretty;}
/* Home page: the name card under the portrait and the clarity line break without leaving a word alone. */
.jo-home .fx-opening .fx-note.fx-gap{text-wrap:pretty;}
.jo-home .jo-alone-line,.jo-home .jo-alone-line .jo-alone-q{text-wrap:balance;}
/* The Session timeline. One shared component, used on the home page and, in the rollout, on The Clarity Session.
   Four steps joined by a slate line, with "You commit" as a marker on the line between steps 01 and 02.
   Brass for text on the numerals only. Tiles take the opposite light ground to their section.
   From 1280px it runs left to right at the width of the text column, with tile text wrapping where it needs to. Below that it stacks. */
.jo-tl{list-style:none;padding:0;position:relative;display:flex;flex-direction:column;gap:12px;margin:40px 0 48px;padding-left:34px;}
.jo-tl::before{content:"";position:absolute;left:10px;top:30px;bottom:30px;width:2px;background:#7D858C;}
.jo-tl-step{position:relative;z-index:1;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:8px;row-gap:4px;background:#F4F2EE;border-radius:4px;padding:18px 18px 20px;}
.fx-ground-paper .jo-tl-step{background:#FFFFFF;}
.jo-tl-step::before{content:"";position:absolute;left:-24px;width:21px;top:29px;height:2px;background:#7D858C;}
.jo-tl-n{grid-row:1 / span 3;font-family:var(--font-heading);font-weight:700;font-size:22px;line-height:1.1;color:#8B6832;}
.jo-tl-t{grid-column:2;font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1.3;color:#1C1F24;text-wrap:balance;}
.jo-tl-d{grid-column:2;font-family:var(--font-body);font-size:16px;line-height:1.55;color:#4A5058;text-wrap:balance;}
.jo-tl-gate{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-left:-34px;padding:4px 0;}
.jo-tl-gate::before{content:"";flex:none;width:22px;height:3px;background:#1C1F24;}
.jo-tl-g{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#1C1F24;line-height:1.4;}
@media (min-width:1280px){
  .jo-tl{display:grid;grid-template-columns:minmax(0,1fr) 112px repeat(3,minmax(0,1fr));column-gap:8px;align-items:stretch;padding-left:0;margin:48px 0 56px;}
  .jo-tl::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;margin-top:-1px;}
  .jo-tl-step{display:flex;flex-direction:column;gap:6px;padding:20px 14px 22px;}
  .jo-tl-step::before{display:none;}
  .jo-tl-n{margin-bottom:4px;}
  .jo-tl-gate{flex-direction:column;justify-content:center;margin-left:0;padding:0;}
  .jo-tl-gate::before{width:3px;height:44px;}
  .jo-tl-g{position:absolute;bottom:calc(50% + 30px);left:0;right:0;text-align:center;}
}
@media (max-width:400px){
  .jo-tl{padding-left:20px;}
  .jo-tl::before{left:4px;}
  .jo-tl-step{display:flex;flex-direction:column;gap:4px;padding:16px 12px 18px;}
  .jo-tl-step::before{left:-16px;width:13px;top:27px;}
  .jo-tl-n{font-size:20px;margin-bottom:4px;}
  .jo-tl-gate{margin-left:-20px;gap:12px;}
  .jo-tl-gate::before{width:14px;}
}
/* Home page, Who you would be talking to: the second photograph, under the heading on desktop and above the text on phones. */
.jo-home .jo-who-pic{display:block;margin-top:6px;}
.jo-home .jo-who-photo{display:block;width:min(100%, 420px);height:auto;border-radius:4px;}
/* Desktop: the photo fills the left column under the heading, down to the bottom of the text beside it.
   Source is the hero portrait shown at its own pixel size, cropped closer than the hero at the top of the page. */
@media (min-width:901px){
  .jo-home .jo-who .fx-wrap{align-items:stretch;}
  .jo-home .jo-who .fx-read-head{position:static;}
  .jo-home .jo-who-pic{flex:1 1 0;min-height:0;position:relative;}
  .jo-home .jo-who-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:none;object-position:64% 0;}
}
.jo-home .jo-who .jo-fine{font-size:16px;}

/* Home page: balanced headings and paragraphs, so no line ends on a single word. */
.jo-home .fx-h,.jo-home .fx-card h3,.jo-home .fx-card p{text-wrap:balance;}
.jo-home .fx-text,.jo-home .fx-lede,.jo-home .fx-note{text-wrap:pretty;}
/* Stand-in placeholders for the visual pass. Every image slot with no final image is a quiet box at the planned size and shape,
   labelled with its slot. The class "stand-in" marks each one, so none can go live unnoticed. Specified in Website Tools / Image-Brief. */
.stand-in.jo-ph{position:relative;display:block;width:min(100%, 420px);background:#F4F2EE;border:1px solid rgba(125,133,140,.35);border-radius:4px;margin-top:6px;}
.fx-ground-paper .stand-in.jo-ph{background:#FFFFFF;}
.fx-ground-navy .stand-in.jo-ph,.fx-ground-ink .stand-in.jo-ph{background:rgba(244,242,238,.06);border-color:rgba(154,163,171,.35);}
.jo-ph-3x2{aspect-ratio:3 / 2;}
.jo-ph-16x9{aspect-ratio:16 / 9;}
.jo-ph-label{text-wrap:balance;position:absolute;left:14px;bottom:12px;right:14px;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:#4A5058;}
.fx-ground-navy .jo-ph-label,.fx-ground-ink .jo-ph-label{color:#F4F2EE;}

.jo-home .fx-label,.jo-home h1,.jo-home .fx-rows .t,.jo-home .jo-turn-lead,.jo-home .fx-verdict,.jo-home .fx-verdict span,.jo-home .fx-opening .fx-lede{text-wrap:balance;}
@media (max-width:340px){ .jo-home .fx-label{letter-spacing:.1em;gap:10px;} .jo-home .fx-label::before{width:24px;} }
/* Home page, The Clarity Session: the heading sits level with the paragraph beside it on desktop, as on How This Works,
   and the findings plates carry the label "You leave with" instead of numerals, so they read as the detail of timeline step 04. */
.jo-home .jo-home-cs .fx-read-head{position:static;}
.jo-home .jo-leave-label + .fx-plates{margin-top:20px;}
/* Home page: the name card under the portrait and the note under the closing button at 16px. */
.jo-home .fx-opening .fx-note.fx-gap,.jo-home .jo-invite .fx-note{font-size:16px;}
@media (min-width:901px) and (max-width:1100px){ .jo-home .fx-read-head .fx-label{letter-spacing:.12em;gap:12px;} .jo-home .fx-read-head .fx-label::before{width:32px;} }
/* Home page, You leave with: the third plate's line wraps normally. */
.jo-home .jo-home-cs .fx-plates .fx-card:nth-child(3) p{text-wrap:wrap;}
/* Home page, The first conversation: words on the left, the image on the right, alternating with Who you would be talking to.
   The image runs from the top of the label to the bottom of the last line. On phones: label and heading, image, then the text. */
.jo-home .jo-home-fc .fx-wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "box" "body";row-gap:28px;}
.jo-home .jo-home-fc .fx-read-head{grid-area:head;position:static;}
.jo-home .jo-home-fc .fx-read-body{grid-area:body;}
.jo-home .jo-home-fc .jo-fc-ph{grid-area:box;margin:0;aspect-ratio:3 / 2;}
.jo-home .jo-fc-close{font-family:var(--font-heading);font-weight:600;font-size:21px;line-height:1.35;color:#1C1F24;margin:0;text-wrap:balance;}
@media (min-width:901px){
  .jo-home .jo-home-fc .fx-wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-areas:"head box" "body box";column-gap:72px;row-gap:24px;align-items:start;}
  .jo-home .jo-home-fc .jo-fc-ph{align-self:stretch;width:100%;aspect-ratio:auto;}
}
@media (max-width:900px){ .jo-home .jo-fc-close{font-size:19px;} }
/* ============ THE CLARITY SESSION, visual pass, 30 October 2026 (v3) ============ */
/* Stand-in boxes on the dark opening. */
.fx-opening .stand-in.jo-ph{background:rgba(244,242,238,.06);border-color:rgba(154,163,171,.35);}
.fx-opening .jo-ph-label{color:#F4F2EE;}
/* Opening: words on the left with the facts row under the button, a 4:5 image on the right. No brass frame. */
@media (min-width:901px){ .jo-cs .jo-cs-open .fx-wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;} }
.jo-cs .jo-cs-open-ph{width:100%;aspect-ratio:4 / 5;margin:0;}
.jo-cs .jo-cs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin:4px 0 0;padding-top:22px;border-top:1px solid rgba(154,163,171,.45);max-width:640px;}
.jo-cs .jo-cs-facts dt{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#C9A46A;margin:0 0 6px;}
.jo-cs .jo-cs-facts dd{margin:0;font-family:var(--font-heading);font-weight:600;font-size:18px;line-height:1.35;color:#F4F2EE;text-wrap:balance;}
@media (max-width:900px){ .jo-cs .jo-cs-open-ph{width:min(100%, 420px);} }
@media (max-width:600px){ .jo-cs .jo-cs-facts{grid-template-columns:minmax(0,1fr);gap:16px;} }
/* The order it runs in: the shared timeline sits under the heading. */
.jo-cs .jo-cs-order .jo-tl{margin-bottom:0;}
/* One day, or two half days: the image fills the left column under the heading, down to the bottom of the right column, which now carries the two parts stacked. Phones: heading, image at 3:2, text. */
.jo-cs .jo-cs-features .fx-wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "box" "body";row-gap:28px;}
.jo-cs .jo-cs-features .fx-read-head{grid-area:head;position:static;}
.jo-cs .jo-cs-features .fx-read-body{grid-area:body;max-width:none;}
.jo-cs .jo-cs-day-ph{grid-area:box;margin:0;width:100%;aspect-ratio:3 / 2;}
.jo-cs .jo-cs-features .fx-paths{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:8px;}
@media (min-width:901px){
  .jo-cs .jo-cs-features .fx-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;grid-template-areas:"head body" "box body";column-gap:72px;row-gap:28px;align-items:start;}
  .jo-cs .jo-cs-features .fx-read-body{max-width:640px;}
  .jo-cs .jo-cs-day-ph{align-self:stretch;aspect-ratio:auto;}
}
/* Investment: each range drawn to scale as a navy bar on one shared scale, zero to $450,000. The Session panel sits beside the rows on desktop, level with them. No Session bar and no Session figure. */
.jo-invest .jo-bar{position:relative;height:14px;margin:12px 0 6px;}
.jo-invest .jo-bar::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(125,133,140,.35);}
.jo-invest .jo-bar-fill{position:absolute;top:0;height:14px;background:#223A5E;border-radius:2px;}
.jo-invest .jo-bar-up{position:absolute;top:6px;width:14%;height:0;border-top:2px dashed #7D858C;}
@media (min-width:1100px){
  .jo-cs .jo-invest.fx-ledger .fx-wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"head panel" "rows panel";grid-template-rows:auto 1fr;column-gap:56px;row-gap:28px;align-items:start;}
  .jo-cs .jo-invest .fx-ledger-head{grid-area:head;}
  .jo-cs .jo-invest .jo-invest-rows{grid-area:rows;}
  .jo-cs .jo-invest .jo-invest-session{grid-area:panel;grid-column:auto;align-self:stretch;display:flex;}
  .jo-cs .jo-invest .jo-invest-session .fx-invite-copy{padding:36px 32px 36px;gap:18px;flex:1;}
  .jo-cs .jo-invest .jo-invest-headline{font-size:30px;}
  .jo-cs .jo-invest .jo-invest-sub{font-size:19px;}
  .jo-cs .jo-invest .jo-invest-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;}
  .jo-cs .jo-invest .jo-invest-session .fx-text{font-size:17px;line-height:1.65;}
  .jo-cs .jo-invest .jo-invest-session .fx-invite-act{margin-top:auto;}
}
/* Who you would be talking to: the photo fills the left column from the top of the section to the bottom of the text on desktop. Phones: heading, the 16:9 crop, text. */
.jo-cs .jo-cs-bio .fx-wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "pic" "body";row-gap:24px;}
.jo-cs .jo-cs-bio .fx-read-head{grid-area:head;}
.jo-cs .jo-cs-bio .fx-read-body{grid-area:body;}
.jo-cs .jo-cs-bio-pic{grid-area:pic;display:block;}
.jo-cs .jo-cs-bio .jo-who-photo{display:block;width:min(100%, 420px);height:auto;border-radius:4px;}
@media (min-width:901px){
  .jo-cs .jo-cs-bio .fx-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;grid-template-areas:"pic head" "pic body";column-gap:72px;row-gap:22px;align-items:start;}
  .jo-cs .jo-cs-bio-pic{align-self:stretch;position:relative;min-height:0;}
  .jo-cs .jo-cs-bio .jo-who-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:none;object-position:64% 0;}
}
/* What can happen next: the Session splits into the two plates beneath. Desktop: a fork from the node down into each plate. Phones: a line down the left into each plate. */
.jo-cs .jo-fork2{position:relative;margin-top:32px;}
.jo-cs .jo-fork2-node{display:inline-block;position:relative;z-index:1;background:#FFFFFF;border-radius:4px;padding:12px 20px;font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1.3;color:#1C1F24;}
.jo-cs .jo-next .jo-next-plates{margin-top:0;}
@media (min-width:901px){
  .jo-cs .jo-fork2{height:118px;text-align:center;}
  .jo-cs .jo-fork2::before{content:"";position:absolute;left:50%;top:40px;width:2px;height:38px;margin-left:-1px;background:#7D858C;}
  .jo-cs .jo-fork2::after{content:"";position:absolute;top:78px;left:calc((100% - 24px) / 4);right:calc((100% - 24px) / 4);height:40px;border:2px solid #7D858C;border-bottom:0;}
}
.jo-cs .jo-fork2-end{display:none;}
@media (max-width:900px){
  .jo-cs .jo-fork2{height:170px;text-align:center;}
  .jo-cs .jo-fork2::before{content:"";position:absolute;left:50%;top:46px;width:2px;height:26px;margin-left:-1px;background:#7D858C;}
  .jo-cs .jo-fork2::after{content:"";position:absolute;top:72px;left:25%;right:25%;height:26px;border:2px solid #7D858C;border-bottom:0;}
  .jo-cs .jo-fork2-end{display:block;position:absolute;top:98px;width:46%;background:#FFFFFF;border-radius:4px;padding:10px 10px;font-family:var(--font-heading);font-weight:700;font-size:16px;line-height:1.3;color:#1C1F24;text-wrap:balance;}
  .jo-cs .jo-fork2-a{left:2%;}
  .jo-cs .jo-fork2-b{right:2%;}
  .jo-cs .jo-next .jo-next-plates{margin-top:24px;}
}
/* The Clarity Session: balanced line breaks across the page, so no line ends on a single word, and the closing note at 16px. */
.jo-cs h1,.jo-cs .fx-h,.jo-cs h3,.jo-cs .fx-label,.jo-cs dd,.jo-cs .fx-rows .t,.jo-cs .jo-ph-label,.jo-cs .jo-invest-place,.jo-cs .jo-invest-unit,.jo-cs .fx-ask,.jo-cs .jo-fork2-node,.jo-cs .jo-alone-line span,.jo-cs .jo-tl-t{text-wrap:balance;}
.jo-cs .fx-text,.jo-cs .fx-lede,.jo-cs .jo-alone-line,.jo-cs .fx-card p,.jo-cs .jo-invest-sub,.jo-cs .fx-note,.jo-cs .jo-invest-detail{text-wrap:pretty;}
.jo-cs .jo-invite .fx-note{font-size:16px;}
@media (max-width:340px){ .jo-cs .btn{white-space:nowrap;padding-left:16px;padding-right:16px;} .jo-cs .fx-label{letter-spacing:.1em;gap:10px;} .jo-cs .fx-label::before{width:24px;} }
@media (max-width:340px){ .jo-cs .jo-next .fx-card h3{font-size:19px;} .jo-cs .jo-alone-line{font-size:25px;} .jo-cs .jo-fork2-end{width:49%;padding:8px 6px;font-size:15px;} .jo-cs .jo-fork2-a{left:0;} .jo-cs .jo-fork2-b{right:0;} }
/* The Clarity Session, phones: the fork above What can happen next? is hidden, since it repeats the plates’ titles directly above them. */
@media (max-width:900px){ .jo-cs .jo-fork2{display:none;} .jo-cs .jo-next .jo-next-plates{margin-top:28px;} }
/* ============ HOW THIS WORKS, visual pass, 30 October 2026 (v3) ============ */
/* Opening: the words across the top, a wide image under them, 21:9 on desktop and 3:2 on phones. */
.jo-hw .jo-hw-open .fx-wrap{row-gap:48px;}
.jo-hw .jo-hw-open-ph{width:100%;aspect-ratio:21 / 9;margin:0;}
@media (max-width:900px){ .jo-hw .jo-hw-open .fx-wrap{row-gap:32px;} .jo-hw .jo-hw-open-ph{aspect-ratio:3 / 2;} }
/* When it runs on you: words on the left and the image filling the right column, level with the button, on desktop. Phones: label, heading, image, text, button. */
.jo-hw .jo-runs-ph{width:100%;aspect-ratio:3 / 2;margin:0;}
@media (min-width:901px){
  .jo-hw .jo-runs-inner{display:grid;max-width:none;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:auto auto auto 1fr;column-gap:72px;row-gap:24px;align-items:start;}
  .jo-hw .jo-runs-inner > :not(.jo-runs-ph){grid-column:1;}
  .jo-hw .jo-runs-ph{grid-column:2;grid-row:1 / -1;align-self:stretch;aspect-ratio:auto;}
  .jo-hw .jo-runs .fx-go{justify-self:start;}
}
/* The seat after the session: the image fills the left column from the top of the heading to the bottom of the link on desktop. Phones: heading, image at 3:2, text. */
.jo-hw .jo-seat .fx-wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "pic" "body";row-gap:28px;}
.jo-hw .jo-seat .fx-read-head{grid-area:head;position:static;}
.jo-hw .jo-seat .fx-read-body{grid-area:body;}
.jo-hw .jo-seat-ph{grid-area:pic;width:100%;aspect-ratio:3 / 2;margin:0;}
@media (min-width:901px){
  .jo-hw .jo-seat .fx-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;grid-template-areas:"pic head" "pic body";column-gap:72px;row-gap:22px;align-items:start;}
  .jo-hw .jo-seat-ph{align-self:stretch;aspect-ratio:auto;}
}
/* The comparison: the Commitment row drawn as order, not length. Both commitment bars are the same length. The only difference is the Session block in front of one of them. No axis, no durations, no figures. */
.jo-hw .jo-order{margin:44px 0 0;display:flex;flex-direction:column;gap:14px;--jo-L:68%;}
.jo-hw .jo-order-row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;align-items:center;}
.jo-hw .jo-order-k{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4A5058;}
.jo-hw .jo-order-track{display:flex;gap:8px;}
.jo-hw .jo-order-bar,.jo-hw .jo-order-session{display:flex;align-items:center;min-height:48px;padding:8px 16px;border-radius:2px;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1.3;text-wrap:balance;}
.jo-hw .jo-order-bar{flex:0 0 var(--jo-L);background:#223A5E;color:#FFFFFF;}
.jo-hw .jo-order-session{flex:0 0 calc(100% - var(--jo-L) - 8px);background:#FFFFFF;border:2px solid #1C1F24;color:#1C1F24;}
.jo-hw .jo-order-this{margin-left:auto;}
.jo-hw .jo-order-cap{margin:6px 0 0 224px;font-family:var(--font-heading);font-weight:600;font-size:19px;line-height:1.35;color:#1C1F24;}
@media (max-width:900px){
  .jo-hw .jo-order{margin-top:32px;gap:18px;--jo-L:62%;}
  .jo-hw .jo-order-row{grid-template-columns:minmax(0,1fr);row-gap:8px;}
  .jo-hw .jo-order-bar,.jo-hw .jo-order-session{padding:8px 12px;}
  .jo-hw .jo-order-cap{margin-left:0;font-size:18px;}
}
/* How This Works: balanced breaks on the new and nearby blocks. */
.jo-hw .fx-opening h1,.jo-hw .fx-opening .fx-lede,.jo-hw .jo-ph-label,.jo-hw .jo-order-cap{text-wrap:balance;}
.jo-hw .fx-h,.jo-hw .fx-label,.jo-hw .fx-proof blockquote p,.jo-hw .fx-want,.jo-hw .fx-ask,.jo-hw .fx-go,.jo-hw .fx-rows .t{text-wrap:balance;}
.jo-hw .fx-text,.jo-hw .fx-lede,.jo-hw .fx-note,.jo-hw .fx-after,.jo-hw .fx-proof-r .fx-text{text-wrap:pretty;}
.jo-hw .fx-proof .fx-note{font-size:16px;}
@media (max-width:340px){ .jo-hw .jo-order{--jo-L:55%;} .jo-hw .jo-order-bar,.jo-hw .jo-order-session{padding:8px 8px;} .jo-hw .btn{white-space:nowrap;padding-left:16px;padding-right:16px;} .jo-hw .fx-label{letter-spacing:.1em;gap:10px;} .jo-hw .fx-label::before{width:24px;} }
/* ============ MEET JEFFREY, visual pass, 30 October 2026 (v3) ============ */
/* The 2003 story: the week split in two, after the third paragraph. Only the story's words. No other day names, hours or figures. */
.jo-mj .jo-week{margin:8px 0 0;display:flex;flex-direction:column;gap:12px;}
.jo-mj .jo-week-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
.jo-mj .jo-week-k{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4A5058;}
.jo-mj .jo-week-one{font-family:var(--font-heading);font-size:16px;font-weight:700;line-height:1.3;color:#223A5E;text-align:right;}
.jo-mj .jo-week-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.jo-mj .jo-week-d{display:flex;align-items:center;justify-content:center;height:96px;border:2px solid #7D858C;border-radius:2px;background:#FFFFFF;}
.jo-mj .jo-week-fri{background:#223A5E;border-color:#223A5E;color:#FFFFFF;font-family:var(--font-body);font-size:16px;font-weight:600;}
.jo-mj .jo-week-left{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:8px;}
.jo-mj .jo-week-br{grid-column:1 / 5;grid-row:1;height:10px;border:2px solid #7D858C;border-top:0;}
.jo-mj .jo-week-lt{grid-column:1 / 5;grid-row:2;margin-top:8px;text-align:center;font-size:16px;font-weight:600;line-height:1.35;color:#1C1F24;text-wrap:balance;}
.jo-mj .jo-week-cap{margin:4px 0 0;font-size:16px;line-height:1.45;color:#3A3F47;text-align:right;text-wrap:balance;}
@media (max-width:900px){ .jo-mj .jo-week-d{height:72px;} .jo-mj .jo-week-days,.jo-mj .jo-week-left{gap:6px;} }
@media (max-width:340px){ .jo-mj .jo-week-days,.jo-mj .jo-week-left{gap:4px;} .jo-mj .jo-week-k{letter-spacing:.1em;} }
/* Nobody taught me by handing me the answer: the mentor photo sits under the heading (rules with .jo-mj-mentor). The org chart grid was removed 2026-11-09. */
/* Still operating: three square stand-ins in the paragraph's order, each with a quiet label in body grey. */
.jo-mj .jo-vent{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.jo-mj .jo-vent li{display:flex;flex-direction:column;gap:10px;margin:0;}
.jo-mj .jo-vent-ph{width:100%;aspect-ratio:1 / 1;margin:0;}
.jo-mj .jo-vent-ph .jo-ph-label{left:10px;right:10px;bottom:10px;}
.jo-mj .jo-vent-k{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:#4A5058;text-wrap:balance;}
@media (max-width:900px){ .jo-mj .jo-vent{gap:10px;} .jo-mj .jo-vent-ph .jo-ph-label{left:7px;right:7px;bottom:7px;font-size:11px;letter-spacing:.08em;} }
@media (max-width:340px){ .jo-mj .jo-vent{gap:8px;} .jo-mj .jo-vent-k{letter-spacing:.1em;} }
@media (max-width:900px){ .jo-mj .jo-vent{gap:12px;} .jo-mj .jo-vent-k{letter-spacing:.1em;} }
.jo-mj .jo-nw,.jo-mj .jo-week-k,.jo-mj .jo-week-one{white-space:nowrap;}
@media (max-width:350px){ .jo-mj .jo-week-top{flex-direction:column;align-items:stretch;gap:6px;} .jo-mj .jo-week-one{align-self:flex-end;} }
@media (max-width:340px){ .jo-mj .jo-vent-k{font-size:11px;letter-spacing:.04em;} .jo-mj .jo-vent-ph .jo-ph-label{font-size:10px;letter-spacing:.06em;} }
/* ============ THE CONDITION, visual pass, 30 October 2026 (v3) ============ */
/* The opening band stays image-free. The three-month story: the image fills the left column from the top of the heading to the last line on desktop. Phones: heading, image at 3:2, text. */
.jo-tc .jo-tc-story .fx-wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "pic" "body";row-gap:28px;}
.jo-tc .jo-tc-story .fx-read-head{grid-area:head;position:static;}
.jo-tc .jo-tc-story .fx-read-body{grid-area:body;}
.jo-tc .jo-tc-story-ph{grid-area:pic;width:100%;aspect-ratio:3 / 2;margin:0;}
@media (min-width:901px){
  .jo-tc .jo-tc-story .fx-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;grid-template-areas:"pic head" "pic body";column-gap:72px;row-gap:22px;align-items:start;}
  .jo-tc .jo-tc-story-ph{align-self:stretch;aspect-ratio:auto;}
}
/* You became the filler: the drawing runs full width under both columns on desktop, 4:1. Phones: directly under the heading, 16:9, before the two paragraphs. */
.jo-tc .jo-tc-fill .fx-wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "pic" "body";row-gap:28px;}
.jo-tc .jo-tc-fill .fx-read-head{grid-area:head;position:static;}
.jo-tc .jo-tc-fill .fx-read-body{grid-area:body;}
.jo-tc .jo-fill{grid-area:pic;position:relative;margin:0;width:100%;aspect-ratio:16 / 9;background:#F4F2EE;border-radius:4px;overflow:hidden;}
.jo-tc .jo-fill-svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);display:block;}
@media (min-width:901px){
  .jo-tc .jo-tc-fill .fx-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"head body" "pic pic";column-gap:72px;row-gap:56px;}
  .jo-tc .jo-fill{aspect-ratio:2 / 1;} /* photo since 2026-11-10, was a 4:1 graphic */
}
/* Seven problems: seven equal tiles, no labels, numbers or lines, the fourth filled. Desktop: after the lede. Phones: directly under the heading, before the lede. */
.jo-tc .jo-seven-pic{width:100%;aspect-ratio:3 / 2;margin:4px 0;} /* photo since 2026-11-10, was seven drawn tiles */
/* The Condition: balanced line breaks across the page, so no line ends on a single word. No wording changed. */
.jo-tc h1,.jo-tc .fx-h,.jo-tc .fx-label,.jo-tc .fx-verdict,.jo-tc .fx-rows .t,.jo-tc .jo-ph-label{text-wrap:balance;}
.jo-tc .fx-text,.jo-tc .fx-lede,.jo-tc .fx-ask{text-wrap:pretty;}
/* ============ CONTACT AND HIDDEN PAGES, visual pass, 30 October 2026 (v3) ============ */
/* Start a Conversation: the portrait beside "You are choosing me". Desktop: 5:6, at the foot of the left column, level with the bottom of the form. Phones: a 64px head-and-shoulders thumbnail beside the paragraph. The current portrait stands in until shot 3. */
.jo-sc .jo-sc-pic{overflow:hidden;border-radius:4px;background:#2A2E35;}
.jo-sc .jo-sc-pic img{display:block;width:100%;height:auto;}
@media (min-width:901px){
  .jo-sc .fx-opening-form .fx-opening-copy{align-self:stretch;}
  .jo-sc .jo-sc-you{margin-top:auto;display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,.55fr);column-gap:24px;align-items:end;}
  .jo-sc .jo-sc-you .fx-text{margin:0;text-wrap:pretty;}
}
@media (max-width:900px){
  .jo-sc .jo-sc-pic{position:relative;flex:0 0 64px;width:64px;height:77px;margin:5px 0 0;}
  .jo-sc .jo-sc-pic img{position:absolute;width:175%;max-width:none !important;left:-43.75%;top:-13%;}
  .jo-sc .jo-sc-you::after{content:"";display:block;clear:both;}
}
/* The page-wide phone rule section img{max-width:100% !important} would undo the crops, so the two crops override it. */
/* Thank You Call: a small head-and-shoulders portrait beside the heading. The heading block keeps its height, so the calendar's top and width do not move. The current portrait stands in until shot 6. */
.jo-ty .jo-ty-head{display:flex;align-items:center;gap:14px;margin:0 0 8px;}
.jo-ty .jo-ty-head .jo-cal-h{margin:0;text-wrap:balance;}
.jo-ty .jo-ty-pic{flex:0 0 auto;position:relative;width:46px;height:46px;overflow:hidden;border-radius:4px;background:#2A2E35;}
.jo-ty .jo-ty-pic img{position:absolute;width:186.7%;max-width:none !important;height:auto;left:-50%;top:-20%;}
@media (max-width:900px){ .jo-ty .jo-ty-head{margin-bottom:20px;} .jo-ty .jo-ty-pic{width:64px;height:64px;} }
/* The two hidden offer pages: words on the left and the image filling the right column on desktop, from the label to the last line. Phones: the image under the paragraph at 3:2. */
.jo-hid-open .jo-hid-ph{width:100%;aspect-ratio:3 / 2;margin:0;}
@media (min-width:901px){
  .jo-hid-open .fx-wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:72px;align-items:stretch;}
  .jo-hid-open .jo-hid-ph{aspect-ratio:auto;min-height:100%;}
}
@media (max-width:900px){ .jo-hid-open .fx-wrap{row-gap:32px;} }
.jo-vba .fx-opening h1,.jo-am .fx-opening h1,.jo-hid-open .jo-ph-label{text-wrap:balance;}
.jo-vba .fx-opening .fx-lede,.jo-am .fx-opening .fx-lede{text-wrap:pretty;}
/* Contact and hidden pages: balanced line breaks, so no line ends on a single word. No wording changed. */
.jo-sc h1,.jo-sc .fx-h,.jo-sc h3,.jo-sc .fx-label,.jo-sc .jo-form-h,.jo-ty h1,.jo-ty .fx-h,.jo-ty h3,.jo-ty .fx-label,.jo-vba h1,.jo-vba .fx-label,.jo-vba .fx-ask,.jo-am h1,.jo-am .fx-label,.jo-am .fx-ask,.jo-vba dt,.jo-am dt{text-wrap:balance;}
.jo-sc .fx-text,.jo-sc .fx-lede,.jo-sc .fx-card p,.jo-sc .jo-form-note,.jo-ty .fx-lede,.jo-ty .fx-card p,.jo-vba dd,.jo-am dd,.jo-vba .fx-text,.jo-am .fx-text,.jo-vba .fx-note{text-wrap:pretty;}
@media (max-width:340px){ .jo-ty .jo-ty-pic{width:40px;height:40px;} .jo-ty .jo-ty-head{gap:10px;margin-bottom:24px;} .jo-sc .btn,.jo-vba .btn,.jo-am .btn{white-space:nowrap;padding-left:16px;padding-right:16px;} }
/* Start a Conversation, 30 October 2026, later the same day. Desktop: the heading reads "One conversation, / and both of us decide." on two lines, at a size that fits the column. Phones: the thumbnail and the paragraph side by side, the paragraph at 16px so the form sits no lower than before. */
@media (min-width:901px){
  .jo-sc .fx-opening-form h1{font-size:min(46px, calc((50vw - 72px) * 0.087));text-wrap:wrap;}
  .jo-sc .fx-opening-form h1 .jo-sc-l{display:block;white-space:nowrap;}
}
@media (max-width:900px){
  .jo-sc .jo-sc-you{display:flex;align-items:flex-start;gap:14px;}
  .jo-sc .jo-sc-you::after{content:none;}
  .jo-sc .jo-sc-you .fx-text{flex:1 1 auto;min-width:0;margin:0;font-size:16px;line-height:1.7;text-wrap:pretty;}
}
@media (max-width:900px){ .jo-sc .fx-opening-form h1 .jo-sc-l{display:block;text-wrap:balance;} }
@media (max-width:340px){ .jo-sc .fx-opening-form h1{font-size:30px;} }
/* Start a Conversation, desktop, 30 October 2026, later the same day: the portrait starts at the normal spacing below the brass paragraph and runs down to the bottom of the form, cropped to fill with the face in view. The paragraph stays beside it, aligned to its bottom. */
@media (min-width:901px){
  .jo-sc .jo-sc-you{margin-top:0;flex:1 1 auto;min-height:0;align-items:stretch;}
  .jo-sc .jo-sc-you .fx-text{align-self:end;}
  .jo-sc .jo-sc-pic{position:relative;min-height:0;}
  .jo-sc .jo-sc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 0;}
}
/* ============ PAYMENT PAGES (.jo-pay), 30 October 2026 (v3) ============
   Hidden pages, sent by link after the thirty-minute call. No links of any kind:
   the name lockup alone in the header, the copyright line alone in the footer. */
.jo-pay nav .container{min-height:80px;}
.jo-pay .jo-lockup{cursor:default;}
.jo-pay .jo-pay-foot{border-top:0;padding-top:0;}
.jo-pay footer{padding-top:32px;padding-bottom:32px;}
/* The agreement box: scrolls inside itself, about 420px tall on desktop and 360px on phones. Counsel's text replaces the stand-in. */
.jo-pay .jo-agree{width:100%;height:420px;overflow-y:auto;margin:0;padding:24px 28px 28px;box-sizing:border-box;}
.jo-pay .jo-agree:focus-visible{outline:3px solid #223A5E;outline-offset:3px;}
.jo-pay .jo-agree-v{margin:0 0 14px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4A5058;}
.jo-pay .jo-agree-note{margin:0 0 20px;font-size:16px;line-height:1.6;font-weight:600;color:#1C1F24;}
.jo-pay .jo-agree-text h3{margin:20px 0 6px;font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1.35;color:#1C1F24;}
.jo-pay .jo-agree-text p{margin:0;font-size:16px;line-height:1.65;color:#3A3F47;}
/* The Stripe form area: the stand-in at the planned size until the developer installs and tests the script. */
.jo-pay .jo-stripe-ph{width:100%;height:720px;margin:0;}
.jo-pay .jo-pay-noscript{margin:16px 0 0;font-weight:600;color:#1C1F24;}
.jo-pay .fx-read-head .fx-text{max-width:420px;}
.jo-pay h1,.jo-pay .fx-h,.jo-pay .fx-label,.jo-pay .jo-ph-label{text-wrap:balance;}
.jo-pay .fx-text,.jo-pay .fx-lede,.jo-pay .jo-agree-text p,.jo-pay .jo-agree-note{text-wrap:pretty;}
@media (max-width:900px){
  .jo-pay .jo-agree{height:360px;padding:20px 18px 24px;}
  .jo-pay .jo-stripe-ph{height:760px;}
  .jo-pay .fx-read-head .fx-text{max-width:none;}
}
/* The confirmation page: the dark opening only. */
body.jo-pay-complete{display:flex;flex-direction:column;min-height:100vh;}
body.jo-pay-complete main{flex:1 0 auto;display:flex;flex-direction:column;}
.jo-pay-complete .jo-pay-done{flex:1 0 auto;}
.jo-pay .jo-agree-text h3{text-wrap:balance;}
@media (max-width:340px){ .jo-grid.jo-pay .fx-opening h1{font-size:32px;} .jo-pay .fx-label{letter-spacing:.1em;gap:10px;} .jo-pay .fx-label::before{width:24px;} }
@media (max-width:340px){ .jo-pay .jo-agree-v{font-size:12px;letter-spacing:.08em;} }
/* Payment pages, rebuilt 31 October 2026 on the approved checkout copy: the price in the opening, what you are stepping into, proof, after you pay, the agreement, then the Stripe form area. */
.jo-pay .jo-pay-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 28px;margin:4px 0 0;padding-top:22px;border-top:1px solid rgba(154,163,171,.45);max-width:760px;}
.jo-pay .jo-pay-facts dt{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#C9A46A;margin:0 0 6px;}
.jo-pay .jo-pay-facts dd{margin:0;font-family:var(--font-heading);font-weight:600;font-size:18px;line-height:1.35;color:#F4F2EE;text-wrap:balance;}
.jo-pay .jo-pay-facts > div:last-child dd{font-size:24px;font-weight:700;}
.jo-pay .jo-pay-into .fx-defs{margin-top:36px;}
.jo-pay .jo-pay-big{font-family:var(--font-heading);font-weight:700;font-size:46px;line-height:1.16;letter-spacing:-.02em;margin:0;color:#FFFFFF;text-wrap:balance;}
.jo-pay .fx-proof blockquote p{text-wrap:balance;}
.jo-pay .fx-proof-r .fx-text{font-size:20px;line-height:1.6;text-wrap:pretty;}
.jo-pay .fx-proof .fx-note{font-size:16px;text-wrap:pretty;}
.jo-pay .jo-pay-after .fx-wrap{display:flex;flex-direction:column;gap:22px;}
.jo-pay .jo-pay-after .jo-alone-line{text-wrap:balance;}
.jo-pay .fx-defs dt{text-wrap:balance;}
.jo-pay .fx-defs dd{text-wrap:pretty;}
@media (max-width:900px){
  .jo-pay .jo-pay-big{font-size:31px;}
  .jo-pay .fx-proof-r .fx-text{font-size:18px;}
  .jo-pay .jo-pay-into .fx-defs{margin-top:28px;}
}
@media (max-width:600px){ .jo-pay .jo-pay-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px;} }
@media (max-width:340px){ .jo-pay .jo-pay-facts{grid-template-columns:minmax(0,1fr);} .jo-pay .jo-pay-big{font-size:27px;} .jo-pay .jo-alone-line{font-size:26px;} .jo-pay .fx-proof blockquote p{font-size:27px;} }
.jo-pay .jo-pay-facts > div:last-child{grid-column:1 / -1;}
.jo-pay .jo-pay-facts > div:last-child dd{white-space:nowrap;}
/* ============ PAYMENT PAGES, two-column checkout, 31 October 2026 ============
   Offer details on the left, the agreement and the Stripe form on the right, from 1100px.
   Below 1100px the columns stack: the offer first, then the agreement and payment. */
.jo-pay main{background:#F4F2EE;}
.jo-co{padding:56px 0 72px;}
.jo-co-wrap{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;}
.jo-co-main{display:flex;flex-direction:column;gap:40px;min-width:0;}
.jo-co-hero{background:linear-gradient(160deg,#1C1F24 0%,#223A5E 100%);border-radius:4px;padding:44px 44px 40px;display:flex;flex-direction:column;gap:22px;}
.jo-co-hero h1{font-family:var(--font-heading);font-weight:700;font-size:52px;line-height:1.08;letter-spacing:-.02em;color:#F4F2EE;margin:0;text-wrap:balance;}
.jo-co-hero .fx-lede{color:#FFFFFF;margin:0;text-wrap:pretty;}
.jo-co-hero .fx-text{margin:0;text-wrap:pretty;}
.jo-co-block{display:flex;flex-direction:column;gap:22px;}
.jo-co-block .fx-defs{margin-top:6px;}
.jo-co-proof{background:#223A5E;border-radius:4px;padding:40px 44px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;}
.jo-co-proof .fx-proof-r{border-left:3px solid #C9A46A;padding-left:28px;}
.jo-co-proof blockquote p{font-size:36px;}
.jo-pay .jo-co-proof .jo-pay-big{font-size:38px;}
.jo-co-side{display:flex;flex-direction:column;gap:28px;min-width:0;}
.jo-co-step{background:#FFFFFF;border-top:3px solid #C9A46A;border-radius:0 0 4px 4px;padding:28px 28px 30px;display:flex;flex-direction:column;gap:14px;}
.jo-co-h{font-family:var(--font-heading);font-weight:700;font-size:24px;line-height:1.25;color:#1C1F24;margin:0;}
.jo-co-step .fx-text{margin:0;font-size:16px;line-height:1.6;text-wrap:pretty;}
.jo-pay .jo-co-step .jo-agree{height:320px;background:#F4F2EE;}
.jo-pay .jo-co-step .jo-stripe-ph{height:720px;background:#F4F2EE;}
.jo-pay .jo-co-step .jo-pay-noscript{margin:0;}
@media (min-width:1100px){
  .jo-co-wrap{grid-template-columns:minmax(0,1fr) 460px;gap:48px;align-items:start;}
}
@media (max-width:1099px){ .jo-co-hero h1{font-size:46px;} }
@media (max-width:900px){
  .jo-co{padding:32px 0 48px;}
  .jo-co-wrap{padding:0 20px;gap:32px;}
  .jo-co-main{gap:32px;}
  .jo-co-hero{padding:32px 24px 30px;gap:18px;}
  .jo-co-hero h1{font-size:36px;}
  .jo-co-proof{padding:30px 24px;}
  .jo-co-proof .fx-proof-r{padding-left:20px;}
  .jo-co-proof blockquote p{font-size:28px;}
  .jo-pay .jo-co-proof .jo-pay-big{font-size:28px;}
  .jo-co-step{padding:24px 20px 26px;}
  .jo-pay .jo-co-step .jo-agree{height:320px;}
  .jo-pay .jo-co-step .jo-stripe-ph{height:760px;}
}
@media (max-width:340px){
  .jo-co-wrap{padding:0 16px;}
  .jo-co-hero{padding:28px 20px;}
  .jo-co-hero h1{font-size:30px;}
  .jo-co-proof{padding:26px 20px;}
  .jo-co-proof blockquote p,.jo-pay .jo-co-proof .jo-pay-big{font-size:25px;}
  .jo-co-step{padding:22px 16px 24px;}
}
.jo-co-proof .fx-label{color:#C9A46A;}
.jo-co-proof .fx-text{color:#FFFFFF;margin:0;}
.jo-co-proof .fx-note{color:#F4F2EE;margin:0;}
.jo-co-proof .fx-proof-fine{border-top-color:rgba(244,242,238,.25);}
.jo-co .fx-defs > div{grid-template-columns:210px minmax(0,1fr);gap:28px;}
@media (max-width:900px){ .jo-co .fx-defs > div{grid-template-columns:minmax(0,1fr);gap:8px;} }
/* Payment pages, 31 October 2026, later the same day. "After you pay" is set at the size of the section heading above it, so the offer headline stays the largest type. Below 1100px the page stacks as: opening, what you are stepping into, proof, the agreement, payment, then after you pay. */
.jo-pay .jo-co .jo-pay-after .jo-alone-line{font-size:40px;line-height:1.14;letter-spacing:-.02em;}
@media (max-width:900px){ .jo-pay .jo-co .jo-pay-after .jo-alone-line{font-size:29px;} }
@media (max-width:340px){ .jo-pay .jo-co .jo-pay-after .jo-alone-line{font-size:29px;} }
@media (max-width:1099px){
  .jo-co-main{display:contents;}
  .jo-co-wrap{display:flex;flex-direction:column;}
  .jo-co-hero{order:1;}
  .jo-co-main > .jo-pay-into{order:2;}
  .jo-co-main > .jo-co-proof{order:3;}
  .jo-co-side{order:4;}
  .jo-co-main > .jo-pay-after{order:5;}
}
/* Payment pages, 31 October 2026, later the same day: the agreement opens in a window over the page from "the agreement" beside the acceptance checkbox, which sits directly above the Stripe form area. */
.jo-accept{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0 4px;border-top:1px solid rgba(125,133,140,.35);}
.jo-accept input{width:22px;height:22px;margin:2px 0 0;accent-color:#223A5E;cursor:pointer;}
.jo-accept label{font-size:16px;line-height:1.55;color:#1C1F24;font-weight:600;cursor:pointer;text-wrap:pretty;}
.jo-agree-open{background:none;border:0;padding:0;margin:0;font:inherit;color:#223A5E;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;min-height:24px;}
.jo-agree-open:hover{color:#1C1F24;}
.jo-agree-open:focus-visible,.jo-accept input:focus-visible{outline:3px solid #223A5E;outline-offset:3px;border-radius:2px;}
.jo-agree-dialog{width:min(760px,calc(100vw - 32px));max-height:min(86vh,900px);padding:0;border:0;border-top:3px solid #C9A46A;border-radius:0 0 4px 4px;background:#FFFFFF;color:#1C1F24;box-shadow:none;}
.jo-agree-dialog[open]{display:flex;flex-direction:column;}
.jo-agree-dialog::backdrop{background:rgba(28,31,36,.72);}
html.jo-modal-open{overflow:hidden;}
.jo-agree-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 28px 18px;border-bottom:1px solid rgba(125,133,140,.35);flex:0 0 auto;}
.jo-agree-dialog .jo-agree-v{margin:0 0 8px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4A5058;}
.jo-agree-title{margin:0;font-family:var(--font-heading);font-weight:700;font-size:24px;line-height:1.25;color:#1C1F24;}
.jo-agree-close{flex:0 0 auto;min-height:44px;min-width:44px;padding:10px 18px;border:1px solid #1C1F24;border-radius:6px;background:#FFFFFF;color:#1C1F24;font-family:var(--font-body);font-size:16px;font-weight:700;cursor:pointer;}
.jo-agree-close:hover{background:#1C1F24;color:#FFFFFF;}
.jo-agree-close:focus-visible{outline:3px solid #223A5E;outline-offset:3px;}
.jo-agree-body{overflow-y:auto;padding:20px 28px 28px;flex:1 1 auto;-webkit-overflow-scrolling:touch;}
.jo-agree-body:focus-visible{outline:3px solid #223A5E;outline-offset:-3px;}
.jo-agree-body h3{margin:22px 0 6px;font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1.35;color:#1C1F24;text-wrap:balance;}
.jo-agree-body p{margin:0 0 10px;font-size:16px;line-height:1.65;color:#3A3F47;text-wrap:pretty;}
.jo-agree-body .jo-agree-mark{margin:0 0 6px;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B86A3B;}
.jo-agree-body .jo-agree-note{color:#8A4A26;font-weight:600;}
@media (max-width:600px){ .jo-agree-dialog{width:calc(100vw - 24px);max-height:88vh;} .jo-agree-top{padding:18px 18px 14px;} .jo-agree-body{padding:16px 18px 22px;} .jo-agree-title{font-size:21px;} }
.jo-accept-end{white-space:nowrap;}


/* ===============================================================
   OPT-IN PAGE · Before The Next Big Call · next-big-call-f1.html
   Added 2 November 2026. Append to css/site.css.
   Every rule is scoped to body.jo-optin, so no other page changes.
   =============================================================== */
.jo-optin{background:#FFFFFF;color:#3A3F47;}
.jo-optin .lo-wrap{max-width:1200px;margin:0 auto;padding:0 40px;}

/* Header: lockup only, no navigation */
.jo-optin .lo-header{background:#1C1F24;padding:22px 0;}

/* Hero: charcoal to navy at 160 degrees */
.jo-optin .lo-hero{background:linear-gradient(160deg,#1C1F24 0%,#1C1F24 52%,#223A5E 100%);color:#F4F2EE;padding:72px 0;}
.jo-optin .lo-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.jo-optin .lo-kicker{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#C9A46A;margin:0 0 18px;}
.jo-optin .lo-title{font-family:var(--font-heading);font-weight:700;font-size:60px;line-height:1.05;letter-spacing:-.02em;color:#F4F2EE;margin:0 0 14px;}
.jo-optin .lo-tagline{font-size:20px;line-height:1.5;color:#F4F2EE;margin:0 0 26px;max-width:640px;}
.jo-optin .lo-quote{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:1.4;color:#F4F2EE;margin:0 0 16px;max-width:640px;}
.jo-optin .lo-quote span{color:#C9A46A;}
.jo-optin .lo-promise{font-size:18px;line-height:1.7;color:#F4F2EE;margin:0 0 18px;max-width:640px;}
.jo-optin .lo-list{margin:0 0 30px;padding:0;list-style:none;max-width:640px;}
.jo-optin .lo-list li{position:relative;padding:0 0 10px 22px;font-size:17px;line-height:1.6;color:#F4F2EE;}
.jo-optin .lo-list li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:#C9A46A;}
.jo-optin .lo-art img{display:block;width:100%;height:auto;margin-top:32px;}

/* Form: on a white card inside the hero, brass top edge */
.jo-optin .lo-form{background:#FFFFFF;border-top:3px solid #C9A46A;border-radius:0 0 4px 4px;padding:26px 28px 22px;}
.jo-optin .lo-list{margin-bottom:0;}
.jo-optin .lo-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.jo-optin .lo-field{margin-bottom:16px;}
.jo-optin .lo-field label{display:block;font-family:var(--font-body);font-weight:600;font-size:14px;color:#1C1F24;margin-bottom:6px;}
.jo-optin .lo-opt{font-weight:400;color:#4A5058;}
.jo-optin .lo-field input{width:100%;height:48px;border:1px solid #7D858C;border-radius:4px;padding:0 14px;font:16px var(--font-body);color:#1C1F24;background:#FFFFFF;}
.jo-optin .lo-field input:focus{outline:3px solid #223A5E;outline-offset:3px;}
.jo-optin .lo-trap{position:absolute;left:-9999px;}
.jo-optin .lo-btn{display:block;width:100%;min-height:52px;background:#C9A46A;border:2px solid #C9A46A;color:#1C1F24;font:700 16px var(--font-body);border-radius:6px;padding:16px 30px;cursor:pointer;}
.jo-optin .lo-btn:hover{background:#1C1F24;border-color:#1C1F24;color:#C9A46A;}
.jo-optin .lo-btn:focus{outline:3px solid #223A5E;outline-offset:3px;}
.jo-optin .lo-btn:disabled{opacity:.7;cursor:default;}
.jo-optin .lo-error{display:none;margin:12px 0 0;font-size:15px;color:#9A5328;}

/* Short bio: warm off-white */
.jo-optin .lo-bio{background:#F4F2EE;padding:60px 0;}
.jo-optin .lo-bio-grid{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:center;}
.jo-optin .lo-portrait{border:1px solid #C9A46A;padding:8px;}
.jo-optin .lo-portrait img{display:block;width:100%;height:auto;background:#FFFFFF;}
.jo-optin .lo-bio-name{font-family:var(--font-heading);font-weight:700;font-size:22px;color:#1C1F24;margin:0;}
.jo-optin .lo-bio-cred{font-weight:500;font-size:12px;letter-spacing:.135em;text-transform:uppercase;color:#8B6832;margin:5px 0 18px;}
.jo-optin .lo-bio-text p:not(.lo-bio-name):not(.lo-bio-cred){font-size:18px;line-height:1.7;color:#3A3F47;max-width:640px;margin:0 0 12px;}
.jo-optin .lo-bio-text .lo-stake{color:#1C1F24;font-weight:600;}

/* Footer: minimal */
.jo-optin .lo-footer{background:#1C1F24;padding:26px 0;}
.jo-optin .lo-footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.jo-optin .lo-legal{margin:0;}
.jo-optin .lo-legal a{color:#F4F2EE;font-size:14px;text-decoration:none;margin-right:24px;display:inline-block;min-height:44px;line-height:44px;}
.jo-optin .lo-legal a:hover,.jo-optin .lo-legal a:focus{color:#C9A46A;text-decoration:underline;}
.jo-optin .lo-legal a:focus{outline:3px solid #C9A46A;outline-offset:3px;}
.jo-optin .lo-copy{margin:0;font-size:13px;color:#9AA3AB;}

/* Phone: copy and form first, then the mockup, then the bio */
@media (max-width:900px){
  .jo-optin .lo-wrap{padding:0 20px;}
  .jo-optin .lo-hero{padding:48px 0;}
  .jo-optin .lo-hero-grid{grid-template-columns:1fr;gap:36px;}
  .jo-optin .lo-title{font-size:38px;}
  .jo-optin .lo-tagline{font-size:18px;}
  .jo-optin .lo-quote{font-size:19px;}
  .jo-optin .lo-promise{font-size:17px;}
  .jo-optin .lo-list li{font-size:16px;}
  .jo-optin .lo-row{grid-template-columns:1fr;gap:0;}
  .jo-optin .lo-form{padding:22px 18px 18px;}
  .jo-optin .lo-bio{padding:40px 0;}
  .jo-optin .lo-bio-grid{grid-template-columns:1fr;gap:24px;}
  .jo-optin .lo-portrait{max-width:220px;}
  .jo-optin .lo-bio-text p:not(.lo-bio-name):not(.lo-bio-cred){font-size:17px;}
}

/* ===============================================================
   FLOW PAGES · book-next-big-call-f3.html, start-a-conversation.html, thank-you-call.html
   Added 2 November 2026. Lockup-only header and minimal footer,
   no site navigation. Every rule is scoped to body.jo-book.
   =============================================================== */
.jo-book .lo-wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
.jo-book .lo-header{background:#1C1F24;padding:22px 0;}
.jo-book .lo-footer{background:#1C1F24;padding:26px 0;}
.jo-book .lo-footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.jo-book .lo-legal{margin:0;}
.jo-book .lo-legal a{color:#F4F2EE;font-size:14px;text-decoration:none;margin-right:24px;display:inline-block;min-height:44px;line-height:44px;}
.jo-book .lo-legal a:hover,.jo-book .lo-legal a:focus{color:#C9A46A;text-decoration:underline;}
.jo-book .lo-legal a:focus{outline:3px solid #C9A46A;outline-offset:3px;}
.jo-book .lo-copy{margin:0;font-size:13px;color:#9AA3AB;}
@media (max-width:900px){.jo-book .lo-wrap{padding:0 20px;}}

/* ===============================================================
   THANK-YOU PAGE · Before The Next Big Call · thank-you-next-big-call-f2.html
   Added 2 November 2026. Builds on the jo-optin rules above.
   Every rule is scoped to body.jo-tyc.
   =============================================================== */
.jo-tyc .lo-hero{min-height:calc(100vh - 170px);}
.jo-tyc .lo-hero-grid{align-items:center;}
.jo-tyc .tyc-steps{list-style:none;margin:8px 0 0;padding:0;counter-reset:tyc;max-width:600px;}
.jo-tyc .tyc-steps li{counter-increment:tyc;position:relative;padding:0 0 26px 58px;margin:0 0 26px;border-bottom:1px solid rgba(244,242,238,.16);}
.jo-tyc .tyc-steps li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.jo-tyc .tyc-steps li::before{content:counter(tyc,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:var(--font-heading);font-weight:700;font-size:26px;color:#C9A46A;}
.jo-tyc .tyc-steps h2{font-family:var(--font-heading);font-weight:700;font-size:21px;line-height:1.3;color:#F4F2EE;margin:0 0 6px;}
.jo-tyc .tyc-steps p{font-size:17px;line-height:1.6;color:#F4F2EE;margin:0 0 14px;}
.jo-tyc .tyc-steps li p:last-child{margin-bottom:0;}
.jo-tyc .tyc-btn{display:inline-block;min-height:48px;padding:13px 26px;border-radius:6px;font:700 16px var(--font-body);text-decoration:none;line-height:1.35;}
.jo-tyc .tyc-btn-open{border:2px solid #F4F2EE;color:#F4F2EE;background:transparent;}
.jo-tyc .tyc-btn-open:hover{background:#F4F2EE;color:#1C1F24;}
.jo-tyc .tyc-btn-call{border:2px solid #C9A46A;background:#C9A46A;color:#1C1F24;}
.jo-tyc .tyc-btn-call:hover{background:#1C1F24;border-color:#1C1F24;color:#C9A46A;}
.jo-tyc .tyc-btn:focus{outline:3px solid #C9A46A;outline-offset:3px;}
.jo-tyc .tyc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (max-width:900px){
  .jo-tyc .lo-hero{min-height:0;}
  .jo-tyc .tyc-steps li{padding-left:46px;}
  .jo-tyc .tyc-steps li::before{font-size:22px;}
  .jo-tyc .tyc-steps h2{font-size:19px;}
  .jo-tyc .tyc-steps p{font-size:16px;}
  .jo-tyc .tyc-btn{display:block;text-align:center;}
}

/* ===============================================================
   BOOKED PAGE · Before The Next Big Call · booked-next-big-call-f4.html
   Added 2 November 2026. Builds on the jo-optin and jo-tyc rules above.
   =============================================================== */
.jo-f4 .f4-portrait{display:flex;justify-content:center;align-self:end;margin-bottom:-72px;}
.jo-f4 .f4-portrait img{max-width:440px;}
@media (max-width:900px){
  .jo-f4 .f4-portrait{margin-bottom:-48px;}
  .jo-f4 .f4-portrait img{max-width:280px;}
}
/* Counsel's final, 7 November 2026: price and renewal terms above the acceptance box, and the save-a-copy link. */
.jo-pay .jo-pay-termsbox{margin:0 0 18px;padding:16px 18px;border:1px solid rgba(154,163,171,.45);border-radius:4px;background:#F4F2EE;}
.jo-pay .jo-pay-terms{margin:0 0 10px;font-size:15px;line-height:1.6;color:#3A3F47;}
.jo-pay .jo-pay-terms:last-child{margin-bottom:0;}
.jo-pay .jo-pay-terms:first-child{font-weight:600;color:#1C1F24;}
.jo-pay .jo-pay-terms a,.jo-pay .jo-agree-save a{color:#223A5E;text-decoration:underline;}
.jo-pay .jo-agree-save{margin:0 0 18px;font-size:15px;font-weight:600;}
/* Cookie consent banner and Cookie Settings control, 7 November 2026 (counsel's checklist). */
.jo-consent{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#1C1F24;border-top:2px solid #C9A46A;box-shadow:0 -6px 24px rgba(0,0,0,.25);}
.jo-consent[hidden]{display:none;}
.jo-consent-in{max-width:1120px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;}
.jo-consent-t{margin:0;flex:1 1 420px;font-family:var(--font-body,Inter,'Helvetica Neue',Arial,sans-serif);font-size:15px;line-height:1.6;color:#F4F2EE;}
.jo-consent-t a{color:#C9A46A;text-decoration:underline;}
.jo-consent-b{display:flex;gap:12px;flex-wrap:wrap;}
.jo-consent-b button{min-height:44px;padding:10px 20px;border-radius:6px;font-family:var(--font-body,Inter,'Helvetica Neue',Arial,sans-serif);font-size:15px;font-weight:700;cursor:pointer;}
.jo-consent-yes{background:#F4F2EE;color:#1C1F24;border:1px solid #F4F2EE;}
.jo-consent-no{background:transparent;color:#F4F2EE;border:1px solid #9AA3AB;}
.jo-consent-b button:focus-visible,.jo-consent-t a:focus-visible{outline:3px solid #C9A46A;outline-offset:3px;}
@media (max-width:620px){.jo-consent-in{padding:16px;gap:14px;}.jo-consent-b{width:100%;}.jo-consent-b button{flex:1 1 0;}}
button.jo-cookie-settings{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;min-height:44px;}

/* Stripe Embedded Checkout mount, 8 November 2026. The acceptance checkbox is inside Stripe's form. */
.jo-pay .jo-stripe-mount{width:100%;margin:0;}
.jo-pay .jo-stripe-mount:empty{display:none;}
.jo-pay .jo-pay-error{margin:12px 0 0;font-weight:600;color:#1C1F24;}

.jo-pay-termsbox .jo-agree-open{text-align:left;}

/* Photographs, 9 November 2026. Each replaces a stand-in box and keeps its slot class, so the slot's size rules still apply.
   The picture fills its box and crops to it. Decorative, so alt is empty. */
.jo-pic{position:relative;display:block;overflow:hidden;border-radius:4px;background:#1C1F24;}
.jo-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* How This Works opening: the end-line, 9 November 2026. Replaces the beach photo.
   Slate line = the work together, in stages. Brass point = the agreed end. Off-white line = the business carrying on without him.
   Built in CSS so it stays sharp and transparent on the opening band. */
.jo-endline{position:relative;width:100%;height:76px;margin:8px 0 0;}
.jo-endline-a,.jo-endline-b{position:absolute;top:15px;height:2px;}
.jo-endline-a{left:0;width:68%;background:#9AA3AB;}
.jo-endline-b{left:68%;right:0;background:#F4F2EE;}
.jo-endline-start{position:absolute;left:0;top:11px;width:10px;height:10px;border-radius:50%;background:#9AA3AB;}
.jo-endline-tick{position:absolute;top:9px;width:2px;height:14px;margin-left:-1px;background:#9AA3AB;}
.jo-endline-end{position:absolute;left:68%;top:6px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#C9A46A;}
.jo-endline-label{position:absolute;top:42px;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;white-space:nowrap;}
.jo-endline-label-start{left:0;color:#9AA3AB;}
.jo-endline-label-end{left:68%;transform:translateX(-50%);color:#C9A46A;}
@media (max-width:420px){ .jo-endline-label{font-size:11px;letter-spacing:.1em;} }
@media (max-width:340px){ .jo-endline-label{font-size:10px;letter-spacing:.06em;} .jo-endline-label-start{max-width:44%;white-space:normal;} }

/* Meet Jeffrey, the 2003 story: the lunch photo, 9 November 2026. Replaces the week graphic.
   Under the heading in the left column on desktop, after the heading on phones. */
.jo-mj .jo-mj-lunch{width:100%;aspect-ratio:4 / 5;margin-top:6px;}
.jo-mj .jo-mj-lunch img{object-position:50% 32%;}
.jo-mj .fx-read-head:has(.jo-mj-lunch){position:static;}
@media (max-width:900px){ .jo-mj .jo-mj-lunch{aspect-ratio:3 / 2;margin-top:0;} .jo-mj .jo-mj-lunch img{object-position:50% 34%;} }

/* Meet Jeffrey, the mentor: the photo of him showing his work, 9 November 2026. Replaces the placeholder org chart. */
.jo-mj .jo-mj-mentor{width:100%;aspect-ratio:4 / 5;margin-top:6px;}
.jo-mj .jo-mj-mentor img{object-position:45% 40%;}
.jo-mj .fx-read-head:has(.jo-mj-mentor){position:static;}
@media (max-width:900px){ .jo-mj .jo-mj-mentor{aspect-ratio:3 / 2;margin-top:0;} .jo-mj .jo-mj-mentor img{object-position:50% 38%;} }

/* Meet Jeffrey story sections (lunch, mentor), desktop: the photo fills the left column for the full height of the section, and the heading sits above the text on the right. Phones keep heading, photo, text. Added 2026-11-10. */
@media (min-width:901px){
  .jo-mj .fx-read:has(.jo-mj-lunch,.jo-mj-mentor) .fx-wrap{grid-template-rows:auto 1fr;row-gap:28px;}
  .jo-mj .fx-read:has(.jo-mj-lunch,.jo-mj-mentor) .fx-read-head{display:contents;}
  .jo-mj .fx-read:has(.jo-mj-lunch,.jo-mj-mentor) .fx-read-head .fx-h{grid-column:2;grid-row:1;max-width:640px;text-wrap:balance;}
  .jo-mj .fx-read:has(.jo-mj-lunch,.jo-mj-mentor) .jo-pic{grid-column:1;grid-row:1 / 3;align-self:stretch;aspect-ratio:auto;margin:0;min-height:520px;}
  .jo-mj .fx-read:has(.jo-mj-lunch,.jo-mj-mentor) .fx-read-body{grid-column:2;grid-row:2;}
}
/* The Condition opening: the whole photo shows at every width, so nobody in the doorway is cut off. Desktop keeps it at 3:2, centred beside the quote. Added 2026-11-10. */
@media (min-width:901px){
  .jo-tc .jo-hid-open .fx-wrap{align-items:center;}
  .jo-tc .jo-hid-open .jo-hid-ph{aspect-ratio:3 / 2;min-height:0;}
}
/* The Condition, seven problems: on desktop the photo runs the full width across the top of the section, so the screen reads large and no column is left empty beside it. Phones keep heading, sentence, photo, text. Added 2026-11-10. */
@media (min-width:901px){
  .jo-tc .fx-read:has(.jo-seven-pic) .fx-wrap{row-gap:24px;}
  .jo-tc .fx-read:has(.jo-seven-pic) .fx-read-head{grid-column:1;grid-row:2 / span 4;position:static;}
  .jo-tc .fx-read:has(.jo-seven-pic) .fx-read-body{display:contents;}
  .jo-tc .fx-read:has(.jo-seven-pic) .fx-read-body > *{grid-column:2;max-width:640px;margin:0;}
  .jo-tc .fx-read:has(.jo-seven-pic) .jo-seven-pic{grid-column:1 / -1;grid-row:1;max-width:none;aspect-ratio:2 / 1;margin:0 0 32px;}
}
/* Start a Conversation, desktop: the copy column runs the full height of the form, top to top and bottom to bottom. What the call covers sits in the column, a small portrait closes it. Phones keep the plates band below. Added 2026-11-11. */
.jo-sc .jo-sc-covers{display:none;}
@media (min-width:901px){
  .jo-sc .jo-sc-plates{display:none;}
  .jo-sc .fx-opening-form .fx-wrap{align-items:stretch;}
  .jo-sc .fx-opening-form .fx-opening-copy{align-self:stretch;display:flex;flex-direction:column;}
  .jo-sc .jo-sc-covers{display:block;margin-top:0;}
  .jo-sc .jo-sc-covers-h{font-family:var(--font-body);font-size:16px;font-weight:600;color:#F4F2EE;margin-bottom:14px;}
  .jo-sc .jo-sc-covers ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .jo-sc .jo-sc-covers li{display:flex;gap:16px;align-items:baseline;color:rgba(244,242,238,.82);font-size:16px;line-height:1.6;max-width:560px;}
  .jo-sc .jo-sc-covers .n{font-family:var(--font-heading);font-weight:700;font-size:14px;color:#C9A46A;flex:0 0 22px;}
  .jo-sc .jo-sc-covers strong{display:block;color:#F4F2EE;font-weight:600;margin-bottom:2px;}
  .jo-sc .jo-sc-you{margin-top:0;padding-top:0;display:flex;align-items:center;gap:20px;flex:0 0 auto;min-height:0;}
  .jo-sc .jo-sc-you::after{content:none;}
  .jo-sc .jo-sc-pic{position:relative;flex:0 0 168px;width:168px;height:168px;margin:0;border-radius:50%;overflow:hidden;}
  .jo-sc .jo-sc-pic img{position:absolute;inset:auto;left:43%;top:-4%;width:165%;height:auto;max-width:none !important;transform:translateX(-50%);object-fit:initial;}
  .jo-sc .jo-sc-you .fx-text{align-self:center;margin:0;max-width:440px;font-size:16px;}
  .jo-sc .fx-opening-form .fx-label{margin-top:0;}
}