/* Otium Operations — Phase 2: the Ledger (option 6b, confirmed 2026-10-26).
   Ruled paper, navy ink, one golden-orange margin line and the double-underlined total.
   Square corners, no gradients-as-colour, no glows. Rules live in the hero, intro and scorecard. */
:root{
  --paper:#F3EEE3; --surface:#EAE2D2; --surface-2:#E1D7C4;
  --navy:#0D2B52; --navy-2:#173C6B; --on-navy:#F3EEE3; --on-navy-mute:#C9D6E8;
  --umber:#5E4017; --salvia:#96BFE6; --orange:#FA9442; --orange-2:#FBA45F;
  --rule-h:48px; --rule:rgba(150,191,230,.6); /* salvia, softened so the ruling sits behind the copy */
  --edge:max(24px,calc((100% - 1200px) / 2 + 24px)); /* left edge of .wrap content */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --hover:180ms ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:84px}
body{background:var(--paper);color:var(--navy);font:400 17px/1.6 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
.grad{color:inherit}
.eyebrow{display:inline-block;font:600 15px/1.4 Manrope,sans-serif;color:var(--umber)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
:is(.cta-box,footer,.side-col.after,.svc.feature,.seneca) :focus-visible{outline-color:var(--orange)}
::selection{background:var(--navy);color:var(--on-navy)}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--navy);color:var(--on-navy);padding:10px 16px;font-weight:700}
.skip:focus{top:12px}

/* The notebook: the whole page is ruled paper, with one orange margin line running from top
   to bottom. Solid fields (panels, navy bands, footer) sit on top of it like pasted-in cards. */
body{position:relative;
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--rule-h) - 1px),var(--rule) calc(var(--rule-h) - 1px) var(--rule-h))}
body::before{content:"";position:absolute;top:0;bottom:0;left:max(8px,calc(var(--edge) - 28px));width:3px;background:var(--orange);z-index:-1;pointer-events:none;transform-origin:top center}
@media (prefers-reduced-motion:no-preference){body::before{animation:margin-draw 1400ms var(--ease-out) 150ms both}}
@keyframes margin-draw{from{transform:scaleY(0)}to{transform:none}}
/* Draw-in: each hero, intro and scorecard starts under a sheet of blank paper that wipes
   away to the right as it enters (main.js adds .drawn). Without JS the sheet never shows. */
.hero,.intro,.measure{position:relative;isolation:isolate}
.hero::after,.intro::after,.measure::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--paper);
  transform:scaleX(0);transform-origin:right center;transition:transform 1100ms var(--ease-out)}
.js :is(.hero,.intro,.measure):not(.drawn)::after{transform:none}
.hero-light{display:none}

/* Header */
header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--navy)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font:800 19px Manrope,sans-serif;letter-spacing:-.02em;color:var(--navy)}
.logo svg{width:30px;height:30px;flex:none}
.logo span{font-weight:500}
/* Hourglass mark: drain, drip, fill and flip on hover (unchanged from Phase 1) */
.logo-mark *{transform-box:view-box}
.logo-mark .hg-top{transform:scale(0)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .logo:hover .hg-body{transform-origin:32px 32px;animation:hg-flip 6s infinite}
  .logo:hover .hg-top{transform-origin:32px 22.5px;animation:hg-drain 6s infinite}
  .logo:hover .hg-pile{transform-origin:32px 47.5px;animation:hg-fill 6s infinite}
  .logo:hover .hg-grain{animation:hg-drip 6s infinite}
}
@keyframes hg-flip{0%,70%{transform:rotate(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}90%,100%{transform:rotate(180deg)}}
@keyframes hg-drain{0%,4%{transform:scale(1)}60%,100%{transform:scale(0)}}
@keyframes hg-fill{0%,6%{transform:scale(0)}62%,100%{transform:scale(1)}}
@keyframes hg-drip{
  0%{transform:translateY(-3px);opacity:0}2%{opacity:1}13%{transform:translateY(6px);opacity:0}
  15%{transform:translateY(-3px);opacity:0}17%{opacity:1}28%{transform:translateY(6px);opacity:0}
  30%{transform:translateY(-3px);opacity:0}32%{opacity:1}43%{transform:translateY(6px);opacity:0}
  45%{transform:translateY(-3px);opacity:0}47%{opacity:1}58%{transform:translateY(6px);opacity:0}
  60%,100%{transform:translateY(-3px);opacity:0}}
.hg-anim *{transform-box:view-box}
.hg-anim .hg-top{transform:scale(0)}
@media (prefers-reduced-motion:no-preference){
  .hg-anim .hg-body{transform-origin:32px 32px;animation:hg-flip var(--hg-cycle,6s) infinite}
  .hg-anim .hg-top{transform-origin:32px 22.5px;animation:hg-drain var(--hg-cycle,6s) infinite}
  .hg-anim .hg-pile{transform-origin:32px 47.5px;animation:hg-fill var(--hg-cycle,6s) infinite}
  .hg-anim .hg-grain{animation:hg-drip var(--hg-cycle,6s) infinite}
}
nav{display:flex;align-items:center;gap:28px}
nav a{font-size:15px;font-weight:600;padding:4px 0;border-bottom:3px solid transparent;transition:border-color var(--hover)}
nav a:not(.btn):hover,nav a[aria-current]{border-bottom-color:var(--orange)}

/* Buttons: square, flat */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border:2px solid var(--navy);font-weight:700;font-size:15px;line-height:1.2;transition:background var(--hover),color var(--hover),border-color var(--hover),transform 140ms ease-out}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:scale(.97)}
nav a.btn.primary,.btn.primary{background:var(--navy);color:var(--on-navy);padding-block:9px}
.btn.primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn.ghost{background:var(--paper);color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--on-navy)}
.btn.lg{min-height:56px;padding:15px 28px;font-size:17px}
.btn svg{width:16px;height:16px;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover svg{transform:translateX(3px)}}
/* On navy fields the action turns orange with navy text (6.3:1) */
:is(.cta-box,footer) .btn.primary{background:var(--orange);border-color:var(--orange);color:var(--navy)}
:is(.cta-box,footer) .btn.primary:hover{background:var(--orange-2);border-color:var(--orange-2)}

/* Hero */
.hero{padding:120px 0 96px}
.hero h1{font-size:clamp(44px,6.6vw,92px);margin-top:20px;max-width:17ch}
.hero .lede{margin-top:26px;font-size:clamp(18px,1.6vw,21px);line-height:1.6;max-width:54ch}
@media (prefers-reduced-motion:no-preference){
  .js :is(.hero,.intro) .wrap > *{animation:rise 800ms var(--ease-out) both}
  .js :is(.hero,.intro) .wrap > :nth-child(2){animation-delay:80ms}
  .js :is(.hero,.intro) .wrap > :nth-child(3){animation-delay:160ms}
  .js :is(.hero,.intro) .wrap > :nth-child(4){animation-delay:240ms}
  .js :is(.hero,.intro) .wrap > :nth-child(5){animation-delay:320ms}
}
@keyframes rise{from{transform:translateY(24px)}to{transform:none}}
.actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.assure{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;font-size:15px;font-weight:600}
.assure li{display:inline-flex;align-items:center;gap:8px}
.assure svg{width:16px;height:16px;color:var(--navy);flex:none}

/* Tools: one static line, the ledger's column of accounts */
.strip{border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);padding:24px 0;display:grid;gap:12px}
.strip > *{width:100%}
.strip p{font-size:15px;color:var(--umber);font-weight:600}
.ticker{display:flex;overflow:hidden}
/* Clip sideways only: the tool names are nudged down onto the ruled lines, and a vertical clip
   cut off the descenders (g, p) */
@supports (overflow:clip){.ticker{overflow:clip visible;min-width:0}}
/* Unlike hidden, clip keeps the long list's full width in the grid's sizing, so cap the column */
.strip{grid-template-columns:minmax(0,1fr)}
.tools{flex:none;display:flex;gap:36px;padding-right:36px;list-style:none}
@media (prefers-reduced-motion:no-preference){
  .ticker .tools{animation:ticker 45s linear infinite}
  @media (hover:hover) and (pointer:fine){.ticker:hover .tools{animation-play-state:paused}}   /* a tap on a phone shouldn't freeze it */
  @keyframes ticker{to{transform:translateX(-100%)}}
}
.tools li{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;white-space:nowrap}
.tools li::before{content:"";width:7px;height:7px;background:var(--orange);flex:none}

/* Sections */
section{padding:120px 0}
.tight-top{padding-top:0}
.head{max-width:740px;margin-bottom:56px}
.head h2{font-size:clamp(36px,5vw,60px);margin-top:12px}
.head p{margin-top:18px;font-size:18px}
.head.row{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.head.row > div{max-width:660px}
.more{font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}
.more:hover{text-decoration-color:var(--navy)}

/* Problem: three ledger entries */
.cards{list-style:none;border-top:3px solid var(--navy)}
.card{display:grid;grid-template-columns:150px minmax(0,1.3fr) minmax(0,1fr);gap:8px 40px;align-items:start;padding:32px 0;border-bottom:2px solid var(--navy)}
.icon{display:none}
.card .tag{grid-row:1 / span 2;font-weight:700;font-size:15px;color:var(--umber);padding-top:6px}
.card h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em}
.card p{grid-column:2;font-size:17px}
.card .fix{grid-column:3;grid-row:1 / span 2;display:flex;gap:10px;font-weight:700;font-size:16px;padding:16px 18px;background:var(--surface)}
.card{transition:background var(--hover)}
@media (hover:hover) and (pointer:fine){.card:hover .fix{background:var(--surface-2)}.card:hover .tag{color:var(--navy)}}
.card .fix,.card .tag{transition:background var(--hover),color var(--hover)}
.card .fix svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--navy)}

/* Before / after */
.shift{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.side-col{padding:36px}
.side-col.before{background:var(--surface)}
.side-col.after{background:var(--navy);color:var(--on-navy)}
.side-col h3{font-size:22px;letter-spacing:-.01em}
.side-col ul{list-style:none;margin-top:22px;display:grid;gap:16px}
.side-col li{display:flex;gap:12px;font-size:17px}
.side-col li svg{width:18px;height:18px;flex:none;margin-top:4px}
.side-col.before li svg{color:var(--umber)}
.side-col.after li svg{color:var(--orange)}
.arrow{display:grid;place-items:center;color:var(--navy)}
.arrow svg{width:32px;height:32px}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{position:relative;background:var(--surface);border-top:4px solid var(--navy);padding:36px;display:flex;flex-direction:column;transition:background var(--hover),border-color var(--hover),translate 200ms var(--ease-out)}
.svc.feature{background:var(--navy);color:var(--on-navy);border-top-color:var(--orange)}
.svc .num{font-weight:700;font-size:15px;color:var(--umber)}
.svc.feature .num{color:var(--on-navy-mute)}
.badge{position:absolute;top:32px;right:32px;background:var(--orange);color:var(--navy);font-weight:800;font-size:14px;padding:4px 12px}
.svc :is(h2,h3){font-size:30px;margin:14px 0 12px}
.svc p{font-size:17px}
.deliver{list-style:none;margin-top:22px;display:grid;gap:10px}
.deliver li{display:flex;gap:10px;font-size:16px}
.deliver svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--navy)}
.svc.feature .deliver svg{color:var(--orange)}
.svc .meta{margin-top:auto;padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;font-weight:700}
.svc .meta a{font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}
@media (hover:hover) and (pointer:fine){.svc:hover{translate:0 -4px}.svc:not(.feature):hover{background:var(--surface-2);border-top-color:var(--orange)}}
.svc:not(.feature):focus-within{background:var(--surface-2)}

/* Add-ons */
.addons{margin-top:32px;border-top:3px solid var(--navy);padding-top:28px}
.addons-title{font-size:22px;font-weight:800;letter-spacing:-.01em}
.addon-list{list-style:none;margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
.addon-list li{display:grid;gap:4px;min-width:0;align-content:start}
.addon-list b{font-weight:800;font-size:18px;letter-spacing:-.01em}
.addon-list span{font-size:16px}
.addon-list li.soon > span:not(.soon-tag){color:var(--umber)}
.addon-list .soon-tag{justify-self:start;margin-top:6px;padding:2px 10px;border:2px solid var(--umber);font-weight:700;font-size:14px;color:var(--umber)}
@media (max-width:960px){.addon-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.addon-list{grid-template-columns:1fr}}

/* Steps: four entries on one line, order shown by position */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none}
.step{padding-top:22px;border-top:3px solid var(--navy)}
.step :is(h2,h3){font-size:24px;margin-bottom:10px}
.step p{font-size:16px}
.step .when{display:inline-block;margin-top:16px;font-size:15px;font-weight:700;color:var(--umber)}

/* Scorecard: the ledger's totals */
.measure{border-top:3px solid var(--navy);border-bottom:3px solid var(--navy)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;border-top:2px solid var(--navy);border-bottom:6px double var(--orange)}
.metric{padding:28px 24px 32px 0}
.metric + .metric{padding-left:24px;border-left:2px solid var(--navy)}
.metric b{display:block;font-weight:800;font-size:24px;letter-spacing:-.02em}
.metric span{display:block;margin-top:10px;font-size:16px}
.metric b::after{content:"";display:block;width:100%;height:3px;margin-top:8px;background:var(--orange);transform:scaleX(0);transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  .metric b{width:fit-content}
  .js .metric b.draw::after{animation:tally-once 700ms cubic-bezier(.23,1,.32,1) forwards}
  .metric:nth-child(2) b::after{animation-delay:120ms}
  .metric:nth-child(3) b::after{animation-delay:240ms}
  .metric:nth-child(4) b::after{animation-delay:360ms}
}
@keyframes tally{0%{transform:scaleX(0);transform-origin:left}8%,22%{transform:scaleX(1);transform-origin:left}23%{transform-origin:right}30%,100%{transform:scaleX(0);transform-origin:right}}

/* Audience */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.aud-col{padding-top:22px;border-top:3px solid var(--navy)}
.aud-col :is(h2,h3){font-size:26px}
.aud-col > p{margin-top:10px;font-size:17px}
.aud-col ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.aud-col li{display:flex;gap:12px;font-size:16px}
.aud-col li::before{content:"";flex:none;width:7px;height:7px;margin-top:10px;background:var(--orange)}
.aud-foot{margin-top:40px;font-size:18px;font-weight:600}
.aud-foot a{font-weight:800;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}

/* Founder */
.founder-block{max-width:760px;padding:56px 40px;display:grid;justify-items:start;background:var(--surface)}
.person-photo{position:relative;overflow:hidden;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:var(--navy);font:800 34px Manrope,sans-serif;color:var(--on-navy)}
.person-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(1.45);transform-origin:52% 38%}
.founder-block h2{margin-top:32px;font-size:clamp(30px,4vw,48px)}
.person-name{margin-top:22px;font-weight:800;font-size:19px}
.person-role{margin-top:2px;font-size:16px;color:var(--umber)}
.person-bio{margin-top:18px;font-size:17px;max-width:58ch}
.person-li{margin-top:24px;width:44px;height:44px;display:grid;place-items:center;background:var(--navy);color:var(--on-navy);transition:background var(--hover)}
.person-li svg{width:18px;height:18px}
.person-li:hover{background:var(--navy-2)}
@media (max-width:640px){.founder-block{padding:40px 20px}.person-photo{width:96px;height:96px;font-size:28px}}

/* About */
.about-hero h1{max-width:15ch}
.mission{font:800 clamp(30px,4.4vw,56px)/1.12 Manrope,sans-serif;letter-spacing:-.03em;text-wrap:balance;max-width:24ch;padding-block:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 56px;align-items:start;margin-bottom:40px}
.split h2{font-size:clamp(28px,3.6vw,44px)}
.split p{margin-top:16px;font-size:18px;max-width:60ch}
.principles .card h3{margin-top:0}
.dive-title{font-size:clamp(28px,3.6vw,44px);margin-bottom:28px}
@media (max-width:760px){.split{grid-template-columns:1fr}}
/* The Seneca line is the one navy band on About */
.seneca{margin:8px 0 0;padding:72px 40px;background:var(--navy);color:var(--on-navy)}
.seneca blockquote p{font:800 clamp(36px,6vw,84px)/1.05 Manrope,sans-serif;letter-spacing:-.03em;display:flex;flex-wrap:wrap;gap:0 .4em}
.seneca figcaption{margin-top:28px;max-width:62ch;font-size:18px;color:var(--on-navy-mute)}
.seneca figcaption b{color:var(--on-navy);font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}
.rows-title{font-size:clamp(28px,3.6vw,44px);margin-bottom:24px;max-width:20ch}
.principle-rows{list-style:none;border-top:3px solid var(--navy)}
.principle-rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px 48px;padding:28px 0;border-bottom:2px solid var(--navy)}
.principle-rows h3{font-size:22px;line-height:1.25;letter-spacing:-.01em}
.principle-rows p{font-size:17px;max-width:60ch}
.way h3{font-size:24px;margin-top:4px}
.founder-strip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:28px 32px;background:var(--surface)}
.founder-strip .person-photo{width:96px;height:96px;font-size:26px}
.founder-strip h2{font-size:clamp(22px,2.4vw,30px)}
.founder-strip p{margin-top:6px;color:var(--umber);font-size:16px}
@media (max-width:760px){.principle-rows li{grid-template-columns:1fr}.founder-strip{grid-template-columns:auto minmax(0,1fr)}.founder-strip .more{grid-column:1/-1}}

/* FAQ */
.faq-page{max-width:820px}
.faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
.faq-grid .head{margin-bottom:0;position:sticky;top:100px}
.faq{border-top:3px solid var(--navy)}
.faq details{border-bottom:2px solid var(--salvia);transition:background var(--hover)}
.faq details[open]{background:var(--surface)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 16px;font:700 19px/1.3 Manrope,sans-serif;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(45deg);transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{background:var(--surface)}
.faq details p{padding:0 56px 24px 16px;font-size:17px}

/* Closing call: a full navy field */
.cta{padding:40px 0 120px}
.cta-box{position:relative;padding:88px 56px;background:var(--navy);color:var(--on-navy)}
.cta-mark{width:64px;height:64px;margin-bottom:22px;color:var(--on-navy)}
.cta-mark svg{width:100%;height:100%;display:block}
.cta-box .eyebrow{color:var(--on-navy-mute)}
.cta-box h2{font-size:clamp(40px,6vw,80px);margin-top:12px;max-width:16ch}
.cta-box p{margin:20px 0 36px;max-width:48ch;font-size:19px;color:var(--on-navy-mute)}
.cta-box .assure{color:var(--on-navy)}
.cta-box .assure svg{color:var(--orange)}

/* Footer: navy, the name returns at the close */
footer{padding:72px 0 32px;background:var(--navy);color:var(--on-navy)}
footer .logo{color:var(--on-navy)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:40px;border-bottom:2px solid rgba(243,238,227,.25)}
.foot-top p{color:var(--on-navy-mute);font-size:16px;margin-top:8px}
.top-link{font-size:15px;font-weight:600;color:var(--on-navy-mute);display:inline-flex;align-items:center;gap:6px}
.top-link:hover{color:var(--on-navy)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:32px;padding:40px 0}
.foot-cols :is(h2,h4){font-weight:800;font-size:16px;line-height:1.6;letter-spacing:normal;margin-bottom:16px}
.foot-cols ul{list-style:none;display:grid;gap:10px}
.foot-cols a{font-size:15px;color:var(--on-navy-mute)}
.foot-cols a:hover{color:var(--on-navy);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
.social{display:flex;gap:12px}
.social a{width:44px;height:44px;display:grid;place-items:center;border:2px solid rgba(243,238,227,.35);color:var(--on-navy);transition:border-color var(--hover),background var(--hover)}
.social a:hover{border-color:var(--orange)}
.social svg{width:20px;height:20px}
.legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:28px;border-top:2px solid rgba(243,238,227,.25);font-size:14px;color:var(--on-navy-mute)}
.mail-btn{margin-top:20px;font-size:15px}

/* Inner-page intro */
.intro{padding:100px 0 64px}
.intro h1{font-size:clamp(40px,6vw,80px);margin-top:16px;max-width:18ch}
.intro .lede{margin-top:22px;font-size:clamp(18px,1.6vw,21px);max-width:54ch}

/* Booking page */
.book{padding:56px 0 120px}
.book-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:start}
.aside{display:grid;gap:16px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fact{background:var(--surface);padding:22px;border-top:3px solid var(--navy)}
.fact b{display:block;font-weight:800;font-size:30px;letter-spacing:-.03em}
.fact span{font-size:15px}
.panel{background:var(--surface);padding:28px}
.panel h2{font-size:22px}
.expect{list-style:none;margin-top:20px;display:grid;gap:18px}
.expect li{display:flex;gap:14px}
.expect b{flex:none;width:32px;height:32px;background:var(--navy);color:var(--on-navy);display:grid;place-items:center;font-weight:800;font-size:15px}
.expect h3{font-size:17px;letter-spacing:-.01em}
.expect p{font-size:16px}
.prep{list-style:none;margin-top:16px;display:grid;gap:10px}
.prep li{display:flex;gap:10px;font-size:16px}
.prep li::before{content:"";flex:none;width:7px;height:7px;margin-top:10px;background:var(--orange)}
.note{border-left:3px solid var(--orange);padding:4px 0 4px 16px;font-size:16px}
.other{font-size:16px}
.other a{font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
.widget-shell{position:sticky;top:96px;background:#fff;border:2px solid var(--navy);padding:14px}
.widget-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 10px 14px;font-size:15px;font-weight:600}
.widget-bar .live{display:inline-flex;align-items:center;gap:8px}
.widget-bar .live i{width:8px;height:8px;border-radius:50%;background:#2E8B57}
.widget-bar a{font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
.widget{position:relative;min-height:640px;background:transparent;color:var(--navy);overflow:hidden;container-type:inline-size}   /* transparent: no white bands beside zcal's blue page */
.widget::before{content:"Loading available times…";position:absolute;inset:0;display:grid;place-items:center;color:var(--umber);font-size:16px;animation:widget-pulse 1.6s ease-in-out infinite}
@keyframes widget-pulse{50%{opacity:.45}}
.widget iframe{position:relative;z-index:1;display:block}
.zcal-inline-widget > div{min-width:0 !important}   /* zcal sets min-width:320px inline, which cut the calendar off on small phones */
/* zcal resizes its iframe to fit each step (calendar, then the details form), so only the empty band
   at the top is trimmed; trimming the bottom cut off the form's last fields and Confirm button */
@container (min-width:600px){.widget iframe{margin-top:-80px}}

/* Contact us */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.way{position:relative;background:var(--surface);border-top:4px solid var(--navy);padding:32px;display:flex;flex-direction:column;transition:background var(--hover),border-color var(--hover),translate 200ms var(--ease-out)}
.way h2{font-size:26px;margin-top:20px}
.way p{margin-top:10px;font-size:17px}
.way .addr{margin-top:18px;font-weight:800;font-size:clamp(16px,1.6vw,19px);letter-spacing:-.01em}
.way .acts{margin-top:auto;padding-top:28px;display:flex;gap:10px;flex-wrap:wrap}
@media (hover:hover) and (pointer:fine){.way:hover{background:var(--surface-2);border-top-color:var(--orange);translate:0 -4px}}
.way:focus-within{background:var(--surface-2)}

/* Mobile menu + bottom bar */
.menu-btn{display:none;width:44px;height:44px;border:2px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .25s,background .25s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:70px 0 0;z-index:19;background:var(--paper);padding:24px 16px 32px;display:flex;flex-direction:column;gap:4px;overflow:auto;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.menu-open .mobile-menu{opacity:1;visibility:visible}
.mobile-menu a{font:800 28px Manrope,sans-serif;letter-spacing:-.02em;padding:12px 0;border-bottom:2px solid var(--salvia)}
.mobile-menu .btn{margin-top:24px;font-size:17px;padding:16px;border-bottom:2px solid var(--navy)}
body.menu-open{overflow:hidden}
/* the open menu is its own layer: the stick figure (and its friend) and the sticky Book bar step out of the way */
body.menu-open :is(.jumper,.mbar){opacity:0;visibility:hidden}
/* Book a call, always in reach: a floating orange button bottom right on desktop (a full-width bar on
   phones, below). It slides in once the hero has scrolled away and steps aside at the closing block. */
.mbar{display:flex;position:fixed;right:24px;bottom:24px;z-index:18;align-items:center;gap:8px;padding:14px 22px;
  background:var(--orange);color:var(--navy);border:2px solid var(--navy);font-weight:800;font-size:16px;
  box-shadow:0 10px 24px rgba(13,43,82,.3);transform:translateY(160%);transition:transform .35s var(--ease)}
.mbar.show{transform:none}
@media (hover:hover) and (pointer:fine){.mbar:hover{background:var(--orange-2)}}

/* Scroll reveal (main.js adds .js and removes .reveal when done). Content is visible from
   the first frame; it only rises into place. */
.js .reveal{transform:translateY(20px);transition:transform 450ms var(--ease-out)}
.js .reveal.in{transform:none}

@media (max-width:960px){
  .svc-grid,.book-grid,.faq-grid,.shift,.ways{grid-template-columns:1fr}
  .faq-grid .head,.widget-shell{position:static}
  .steps,.metrics{grid-template-columns:1fr 1fr}
  .metric:nth-child(3){padding-left:0;border-left:0}
  .metric:nth-child(-n+2){border-bottom:2px solid var(--navy)}
  .aud{grid-template-columns:1fr}
  .card{grid-template-columns:120px minmax(0,1fr);gap:8px 24px}
  .card .tag{grid-row:1 / span 3}
  .card .fix{grid-column:2;grid-row:auto;margin-top:12px}
  .arrow{transform:rotate(90deg)}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  nav{display:none}
  .menu-btn{display:grid}
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:18;justify-content:center;align-items:center;gap:8px;padding:16px;background:var(--orange);color:var(--navy);border:2px solid var(--navy);font-weight:800;box-shadow:0 10px 24px rgba(13,43,82,.3);transform:translateY(140%);transition:transform .35s var(--ease)}
  .mbar.show{transform:none}
  body.has-mbar footer{padding-bottom:96px}
  .actions .btn{flex:1 1 auto}
}
@media (max-width:640px){
  .wrap,.ticker{padding:0 20px}
  section{padding:80px 0}
  .tight-top{padding-top:0}
  .hero{padding:56px 0 56px}
  .intro{padding:56px 0 40px}
  :root{--rule-h:44px;--rule:rgba(150,191,230,.45)} /* lighter, so lines sit quietly behind dense phone text */
  .steps,.metrics{grid-template-columns:1fr}
  .metric,.metric + .metric{padding:22px 0;border-left:0;border-bottom:2px solid var(--navy)}
  .metric:last-child{border-bottom:0}
  .card{grid-template-columns:1fr}
  .card .tag,.card p,.card .fix{grid-column:1;grid-row:auto}
  .svc,.side-col,.way{padding:28px 24px}
  .badge{top:26px;right:24px}
  .cta-box{padding:56px 24px}
  .seneca{padding:56px 24px}
  .faq details p{padding-right:16px}
}
/* Reduced motion: no travel, content stays */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none}
  .btn:active,.btn:hover svg{transform:none}
  .mbar{transition:none}
  .widget::before{animation:none}
  .js :is(.hero,.intro,.measure)::after{display:none}
  .ticker{padding:0 24px}
  .tools{flex:1 1 auto;flex-wrap:wrap;padding-right:0}
  .tools[aria-hidden="true"]{display:none}
}

/* ===== Line grid =====================================================================
   Copy sits on the ruled lines. Every text line is a whole number of 28px rows, and each
   line is nudged down so its baseline lands on the rule (Manrope: ascent 1.07em, descent
   0.30em, so the baseline sits at lh/2 + .385em inside its line box). The header is two
   rows tall, so the paper's first rule falls one row under it, as before. Boxes whose
   height can't be a whole number of rows (cards, panels, buttons) are snapped by main.js. */
:root{--rule-h:28px}
header .wrap{height:54px}
.mobile-menu{inset:56px 0 0}
/* main:not(#_) lifts specificity above the component rules, which set their own line-heights */
main:not(#_) :is(h1,h2,h3,h4,p,summary,.eyebrow,.tag,.when,.metric b,.metric span,.addon-list b,.addon-list span,.fact b,.fact span,.addr,.strip p),
main:not(#_) .more:not(p .more),
main:not(#_) li:not(:has(h2,h3,p,div,b,ul,a.btn)){
  --lh:round(up,1em,var(--rule-h));
  line-height:var(--lh);
  position:relative;
  top:calc(var(--lh) / 2 - 1px - .385em);
}
/* Sizes chosen so headings fill whole rows */
.hero h1{font-size:clamp(44px,6.6vw,84px);margin-top:0}
.intro h1{font-size:clamp(44px,6vw,84px);margin-top:0}
.head h2{font-size:clamp(40px,4.6vw,56px);margin-top:0}
.cta-box h2{font-size:clamp(40px,6vw,84px);margin-top:0}
.seneca blockquote p{font-size:clamp(36px,6vw,84px)}
.mission{font-size:clamp(28px,4.4vw,56px);padding-block:28px}
.card h3{font-size:26px}
.svc :is(h2,h3){font-size:28px;margin:0}
.founder-strip h2{font-size:26px}
.fact b{font-size:28px}
/* Vertical spacing in whole rows */
section{padding:112px 0}
.tight-top{padding-top:0}
.hero{padding:112px 0 84px}
.intro{padding:84px 0 56px}
.cta{padding:28px 0 112px}
.book{padding:56px 0 112px}
.hero .lede,.intro .lede{margin-top:28px}
.actions{margin-top:28px;gap:14px 14px}
.btn.lg{min-height:56px}
.assure{margin-top:28px;gap:0 28px}
.strip{padding:25px 0;gap:0}
.head{margin-bottom:56px}
.head p{margin-top:28px}
/* Ledger rows: the rule sits on top of each row, so every row's text starts one row down */
.cards{border-top:0;border-bottom:2px solid var(--navy)}
.card{border-top:2px solid var(--navy);border-bottom:0;padding:26px 0 28px;gap:0 40px}
.card:first-child{border-top-width:3px;padding-top:25px}
.card .tag{padding-top:0}
.card .fix{margin-top:0}
.step{padding-top:25px}
.step :is(h2,h3){margin-bottom:0}
.step .when{display:block;margin-top:0}
.steps{gap:28px}
.metric{padding:26px 24px 28px 0}
.metric + .metric{padding-left:24px}
.metric span{margin-top:0}
.aud{gap:28px}
.aud-col{padding-top:25px}
.aud-col > p{margin-top:0}
.aud-col ul{margin-top:28px;gap:0}
.aud-foot{margin-top:56px}
.faq{padding-top:25px}
.faq details{border-bottom:0}
.faq summary{padding:0 16px 28px}
.faq details p{padding:0 56px 28px 16px}
.split{gap:28px 56px;margin-bottom:56px}
.split p{margin-top:28px}
.rows-title{margin-bottom:28px}
.principle-rows{border-top:0;border-bottom:3px solid var(--navy)}
.principle-rows li{border-top:2px solid var(--navy);border-bottom:0;padding:26px 0 28px;gap:0 48px}
.principle-rows li:first-child{border-top-width:3px;padding-top:25px}
.seneca{margin-top:28px}
.addons{margin-top:28px;padding-top:25px}
.addon-list{margin-top:28px;gap:28px 32px}
.addon-list li{gap:0}
.addon-list .soon-tag{margin-top:0;padding:0 10px;line-height:24px}
.aside{gap:28px}
.facts{gap:28px}
.fact{padding:25px 22px 28px}
.note{padding:0 0 0 16px}
.dive-title{margin-bottom:28px}
@media (max-width:960px){
  .card{grid-template-columns:120px minmax(0,1fr);gap:0 24px}
  .card .fix{margin-top:28px}
  .metric:nth-child(3){padding-left:0}
}
@media (max-width:640px){
  section{padding:84px 0}
  .tight-top{padding-top:0}
  .hero{padding:56px 0}
  .intro{padding:56px 0 28px}
  .card{grid-template-columns:1fr}
  .metrics{border-top:2px solid var(--navy)}
  .metric,.metric + .metric{padding:26px 0 28px;border-left:0;border-bottom:0}
  .metric + .metric{border-top:2px solid var(--navy)}
  .faq details p{padding-right:16px}
}
/* The scorecard tally mark hangs under its label without adding height */
.metric b::after{position:absolute;left:0;top:100%;margin-top:0}
/* Scorecard: its 3px rules come out of the padding so the rows stay on the grid */
.measure{padding:109px 0}
.card{grid-template-rows:auto 1fr}
.head.row{gap:28px}
@media (max-width:640px){.measure{padding:81px 0}}
/* The moving tools strip is a plain band: its solid paper hides the ruled lines and the margin line */
.strip{position:relative;background:var(--paper)}
.strip > *{position:relative}

/* ===== The system as sticky notes ===================================================
   Four notes, two by two, stuck to the ruled page, each held by a strip of tape and set at a
   slight angle. Colours are tints of the brand orange and blue, a classic sticky yellow and
   kraft; navy text reads 9:1 or better on all four. Uses the independent rotate/translate
   properties so the scroll reveal (transform) doesn't fight the tilt. */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 48px;border:0;padding-top:28px}
.card,.card:first-child{display:flex;flex-direction:column;position:relative;border:0;padding:36px 30px 30px;
  background:var(--note,#F5E18E);box-shadow:0 14px 20px -14px rgba(13,43,82,.45);rotate:-1.5deg;
  transition:rotate 260ms var(--ease-out),translate 260ms var(--ease-out)}
.card:nth-child(1){--note:#FBC593}
.card:nth-child(2){--note:#BFD7EF;rotate:1.2deg;--y:14px;translate:0 var(--y)}
.card:nth-child(3){--note:#F5E18E;rotate:-.6deg}
.card:nth-child(4){--note:#E9D8C2;rotate:.9deg;--y:14px;translate:0 var(--y)}
.card::before{content:"";position:absolute;top:-14px;left:50%;width:92px;height:28px;margin-left:-46px;background:rgba(243,238,227,.78);rotate:-3deg}
.card .tag{font-size:15px;color:var(--umber)}
.card h3{font-size:26px;margin-top:0}
.card p{margin-top:0}
.card .fix{margin-top:auto;padding:28px 0 0;background:none;font-weight:800}
.card .fix svg{color:var(--navy)}
@media (hover:hover) and (pointer:fine){
  .card:hover{rotate:0deg;translate:0 calc(var(--y,0px) - 6px)}
  .card:hover .fix{background:none}
}
@media (max-width:960px){
  .cards{grid-template-columns:1fr;max-width:560px;gap:48px}
  .card,.card:first-child{grid-template-columns:none;padding:36px 28px 28px}
  .card:is(:nth-child(2),:nth-child(4)){--y:0px;translate:none}
  .card .tag,.card p,.card .fix{grid-column:auto;grid-row:auto}
  .card .fix{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}}

/* ===== "Who we help" as sticky notes, matching the problem section ==================== */
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:28px}
.aud-col{position:relative;border:0;padding:36px 30px 32px;background:var(--note,#F5E18E);
  box-shadow:0 14px 20px -14px rgba(13,43,82,.45);rotate:1deg;
  transition:rotate 260ms var(--ease-out),translate 260ms var(--ease-out)}
.aud-col:nth-child(1){--note:#BFD7EF;rotate:1deg}
.aud-col:nth-child(2){--note:#F5E18E;rotate:-1.4deg;--y:14px;translate:0 var(--y)}
.aud-col:nth-child(3){--note:#FBC593;rotate:.7deg}
.aud-col::before{content:"";position:absolute;top:-14px;left:50%;width:92px;height:28px;margin-left:-46px;background:rgba(243,238,227,.78);rotate:2deg}
.aud-col li::before{background:var(--navy)}
@media (hover:hover) and (pointer:fine){
  .aud-col:hover{rotate:0deg;translate:0 calc(var(--y,0px) - 6px)}
}
@media (max-width:960px){
  .aud{grid-template-columns:1fr;max-width:560px;gap:48px}
  .aud-col:nth-child(2){--y:0px;translate:none}
}
@media (prefers-reduced-motion:reduce){.aud-col{transition:none}}

/* ===== Add-ons as sticky notes ======================================================
   Available add-ons are coloured notes; "coming soon" ones are blank cream notes with a
   dashed outline, like a placeholder pinned up for later. */
.addon-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 36px;padding-top:28px}
.addon-list li{position:relative;padding:32px 26px 28px;background:var(--note,#F5E18E);
  box-shadow:0 12px 18px -12px rgba(13,43,82,.4);rotate:var(--tilt,-1deg);
  transition:rotate 260ms var(--ease-out),translate 260ms var(--ease-out)}
.addon-list li::before{content:"";position:absolute;top:-12px;left:50%;width:76px;height:24px;margin-left:-38px;background:rgba(243,238,227,.78);rotate:-2deg}
.addon-list li:nth-child(1){--note:#FBC593;--tilt:-1.2deg}
.addon-list li:nth-child(2){--note:#BFD7EF;--tilt:1deg}
.addon-list li:nth-child(3){--tilt:-.6deg}
.addon-list li:nth-child(4){--tilt:1.3deg}
.addon-list li:nth-child(5){--tilt:-1.4deg}
.addon-list li:nth-child(6){--note:#F5E18E;--tilt:.8deg}
.addon-list li.soon{--note:var(--surface);box-shadow:none;outline:2px dashed var(--umber);outline-offset:-10px}
.addon-list li.soon::before{background:rgba(243,238,227,.9)}
.addon-list li.soon > span:not(.soon-tag){color:var(--umber)}
.addon-list .soon-tag{background:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .addon-list li:hover{rotate:0deg;translate:0 -5px}
}
@media (max-width:960px){.addon-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.addon-list{grid-template-columns:1fr;gap:44px}}
@media (prefers-reduced-motion:reduce){.addon-list li{transition:none}}

/* ===== Paper-craft system ============================================================
   One set of materials on the ruled page, so every page reads as the same notebook:
   - Sticky notes: short, informal items (problems, audiences, add-ons, contact options,
     quick facts, "Today"). Coloured, tilted, held by tape.
   - Index cards: structured detail (services, booking steps, the founder card, the
     calendar). White, straight, an orange top edge, held by tape.
   - Navy cards: the big statements (With Otium, Start here, Seneca, the closing call).
     Taped at both top corners.
   - Ink rules: lists and tables (steps, scorecard, principles, FAQ) stay on the lines.
   - Polaroid: Faye's photo. */
:root{--tape:rgba(243,238,227,.8);--index:#FFFDF8;--lift:0 14px 20px -14px rgba(13,43,82,.45);--lift-hover:0 22px 26px -16px rgba(13,43,82,.5)}
.card::before,.aud-col::before,.addon-list li::before{background:var(--tape)}

/* Sticky notes (new members) */
.side-col.before,.fact,.way{position:relative;background:var(--note,#F5E18E);border:0;box-shadow:var(--lift);rotate:var(--tilt,-1deg);
  transition:rotate 260ms var(--ease-out),translate 260ms var(--ease-out)}
.side-col.before::before,.fact::before,.way::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:26px;margin-left:-42px;background:var(--tape);rotate:-2deg}
.side-col.before{--note:#F5E18E;--tilt:-1.2deg}
.side-col.before li svg{color:var(--navy)}
.fact:nth-child(1){--note:#FBC593;--tilt:-1.5deg}
.fact:nth-child(2){--note:#BFD7EF;--tilt:1.2deg}
.way:nth-child(1){--note:#FBC593;--tilt:-1deg}
.way:nth-child(2){--note:#BFD7EF;--tilt:1.2deg;--y:10px;translate:0 var(--y)}
.way:nth-child(3){--note:#F5E18E;--tilt:-.6deg}
.facts{padding-top:14px}
.ways{gap:40px;padding-top:28px}
@media (hover:hover) and (pointer:fine){
  :is(.side-col.before,.fact,.way):hover{rotate:0deg;translate:0 calc(var(--y,0px) - 6px);background:var(--note)}
}
.way:focus-within{background:var(--note)}

/* Index cards */
.svc:not(.feature),.panel,.founder-strip,.founder-block,.widget-shell{position:relative;background:var(--index);border:0;border-top:4px solid var(--orange);box-shadow:var(--lift);
  transition:translate 260ms var(--ease-out)}
.svc:not(.feature)::before,.panel::before,.founder-strip::before,.founder-block::before,.widget-shell::before{content:"";position:absolute;top:-16px;left:28px;width:84px;height:26px;background:var(--tape);rotate:-3deg;z-index:2}
.widget-shell{padding-top:18px}
.widget-shell::before{left:auto;right:28px;rotate:3deg}
@media (hover:hover) and (pointer:fine){
  .svc:not(.feature):hover{background:var(--index);border-top-color:var(--orange);translate:0 -6px}
}
.svc:not(.feature):focus-within{background:var(--index)}
.svc-grid{gap:32px;padding-top:16px}

/* Navy cards, taped at both corners */
.svc.feature,.side-col.after,.seneca,.cta-box{position:relative;box-shadow:var(--lift)}
.svc.feature::before,.side-col.after::before,.seneca::before,.cta-box::before,
.svc.feature::after,.side-col.after::after,.seneca::after,.cta-box::after{content:"";position:absolute;top:-12px;width:80px;height:26px;background:var(--tape);z-index:2;pointer-events:none}
.svc.feature::before,.side-col.after::before,.seneca::before,.cta-box::before{left:-18px;rotate:-32deg;top:-4px}
.svc.feature::after,.side-col.after::after,.seneca::after,.cta-box::after{right:-18px;rotate:32deg;top:-4px}
.side-col.after{rotate:.6deg}
.svc.feature{border-top-color:var(--orange)}

/* Polaroid for Faye */
.person-photo,.founder-strip .person-photo{border-radius:0;border:8px solid #fff;border-bottom-width:26px;box-shadow:0 10px 16px -10px rgba(13,43,82,.5);rotate:-3deg;background:var(--navy);width:132px;height:150px}
.founder-strip .person-photo{width:104px;height:122px}
.person-photo img{transform:scale(1.25)}

/* FAQ: an open answer is highlighted, like a marked passage */
.faq details[open],.faq summary:hover{background:rgba(245,225,142,.55)}

@media (max-width:960px){
  .ways{max-width:560px;gap:48px}
  .way:nth-child(2){--y:0px;translate:none}
  .svc-grid{gap:44px}
}
@media (max-width:640px){
  .person-photo{width:112px;height:130px}
}
@media (prefers-reduced-motion:reduce){:is(.side-col.before,.fact,.way,.svc){transition:none}}
/* Tape reads as tape on cream paper and on white cards: a shade lighter than the paper with a faint edge */
:root{--tape:rgba(255,253,246,.88)}
:is(.card,.aud-col,.addon-list li,.side-col.before,.fact,.way,.svc:not(.feature),.panel,.founder-strip,.founder-block,.widget-shell)::before{box-shadow:0 1px 2px rgba(13,43,82,.14)}

/* ===== Parachuting stick figure (built by main.js) ==================================
   Positioned on the page itself: it starts standing on the title, falls as you scroll,
   perches on the card below it when you stop, and lands on the closing Book a call
   button. States: .packed (standing at the start), .open (chute up, swaying), .landed
   (chute folded, standing), .on-dark (cream ink over navy), .dropping (slow settle).
   Transform and opacity only. */
.jumper{position:absolute;top:0;left:0;z-index:15;pointer-events:none;width:clamp(48px,5vw,72px);
  opacity:0;transition:opacity 240ms ease-out;transform-origin:50% 14%;will-change:transform;
}
.jumper.ready{opacity:1}
/* Sitting on the header's bottom rule beside the nav: legs over the edge, hands on the ledge.
   It sits above the sticky header so it isn't hidden behind it. */
.jumper{z-index:21}
.jumper .sit-pose{opacity:0;transition:opacity 120ms ease-out}
.jumper.sit .sit-pose{opacity:1}
.jumper.sit :is(.legs,.arms-down,.arms-up){opacity:0}
.jumper .legs{transition:transform 220ms var(--ease-out),opacity 120ms ease-out}   /* fades in once it's standing on the title, never flies in from the corner */
.jumper.touch .legs{transform:scaleY(var(--squash,.78));transition:transform 90ms ease-out}   /* fast squash, as deep as the landing was hard */
.jumper svg{display:block;width:100%;height:auto;overflow:visible;stroke:#0D2B52;transition:stroke 250ms}
.jumper *{transform-box:view-box}
.jumper .canopy{fill:#FBC593}
.jumper .head{fill:#F3EEE3;transition:fill 250ms}
.jumper .chute{transform-origin:55px 100px;transform:translateY(10px) scale(.55);opacity:0;transition:transform 380ms cubic-bezier(.34,1.45,.64,1),opacity 160ms ease-out}
.jumper .legs{transform-origin:55px 128px;transition:transform 320ms cubic-bezier(.34,1.45,.64,1)}   /* springs back with a little give (damping ~0.8, response ~0.3s) */
.jumper.open .chute{transform:none;opacity:1}
.jumper.open .legs{transform:scaleY(.86)}
.jumper.open .rig{transform-origin:55px 20px;animation:jumper-sway 2.8s ease-in-out infinite alternate}
.jumper.landed .chute{transform:translateY(10px) scale(.55);opacity:0}   /* packed away: it's the backpack now */
/* Backpack: the packed chute, worn on its feet; it becomes the canopy (open) or gives way to the tanks (jet) */
.jumper .pack{opacity:0;transition:opacity 160ms ease-out}
.jumper:is(.landed,.sit) .pack{opacity:1}
.jumper:is(.open,.jet) .pack{opacity:0}
.jumper .pack-bag{fill:#FBC593}
.jumper.on-dark .halo{display:none}   /* over navy the cream ink needs no outline */
.jumper.on-dark svg{stroke:#F3EEE3}
.jumper.on-dark .head{fill:#0D2B52}
.jumper .face,.jumper .hand{fill:#0D2B52;stroke:none;transition:fill 250ms}
.jumper.on-dark .face,.jumper.on-dark .hand{fill:#F3EEE3}
@keyframes jumper-sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
/* Faces: happy by default, scared while falling, joy (arms up, hopping) on a call to action */
.jumper .f-scared,.jumper .f-joy,.jumper .arms-up{opacity:0}
.jumper :is(.f-happy,.f-scared,.f-joy,.arms-down,.arms-up){transition:opacity 160ms}
.jumper.open .f-happy{opacity:0}
.jumper.open .f-scared{opacity:1}
.jumper.joy .f-happy,.jumper.joy .f-scared,.jumper.joy .arms-down{opacity:0}
.jumper.joy .f-joy,.jumper.joy .arms-up{opacity:1}
.jumper .grin{fill:#0D2B52;transition:fill 250ms}
.jumper.on-dark .grin{fill:#F3EEE3}
.jumper.joy .man{animation:jumper-hop 700ms ease-in-out infinite}
@keyframes jumper-hop{0%,100%{transform:none}50%{transform:translateY(-7px)}}
/* Jetpack while scrolling up: chute packed away, arms up, tanks on the back, flames flicker */
.jumper .jetpack{opacity:0;transition:opacity 150ms}
.jumper .tank{fill:#BFD7EF}
.jumper .flame{fill:#FA9442;stroke:none}
.jumper .flame-core{fill:#F5E18E;stroke:none}
.jumper.jet .jetpack{opacity:1}
.jumper.jet .chute{transform:translateY(10px) scale(.55);opacity:0}
.jumper.jet .arms-down{opacity:0}
.jumper.jet .arms-up{opacity:1}
.jumper.jet .rig{transform-origin:55px 110px;animation:jet-wobble 320ms ease-in-out infinite alternate}
.jumper.jet :is(.flame,.flame-core){transform-origin:55px 121px;animation:jet-flicker 110ms linear infinite alternate}
@keyframes jet-wobble{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes jet-flicker{from{transform:scaleY(.72)}to{transform:scaleY(1.12)}}
/* Idle moves after landing (main.js): walk, dance, and small acting beats (wave, think, glance
   back over a shoulder, rub an arm) drawn with a pencil-line wobble. Short, calm, then still again. */
.jumper .man{transform-origin:55px 148px}
.jumper.i-left .man{scale:-1 1}                                   /* face the way it walks or looks */
.jumper.i-walk .man{animation:idle-bob 360ms ease-in-out infinite}
.jumper.i-walk .legs{transform-origin:55px 124px;animation:idle-step 360ms ease-in-out infinite alternate}
@keyframes idle-bob{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes idle-step{from{transform:skewX(-9deg)}to{transform:skewX(9deg)}}
.jumper.i-dance .man{animation:idle-dance 800ms ease-in-out 2}
.jumper.i-dance .arms-down{animation:idle-arms 400ms steps(1,end) 4}
.jumper.i-dance .arms-up{animation:idle-arms 400ms steps(1,end) 4 reverse}
@keyframes idle-dance{0%,100%{rotate:0deg;translate:0 0}25%{rotate:-7deg;translate:-3px -2px}75%{rotate:7deg;translate:3px -2px}}
@keyframes idle-arms{0%{opacity:1}50%{opacity:0}}
/* Acting beats: swap in a pose and a face, settle into it (small dip), lines wobble like pencil.
   Poses: wave, think, idea (finger up, bulb pops), hips, shrug, point, kick (knee up), star jump. */
.jumper :is(.p-wave,.p-think,.p-idea,.p-hips,.p-shrug,.p-point,.p-kick,.legs-kick,.legs-star,.bulb,.f-think,.f-shrug){opacity:0;transition:opacity 140ms ease-out}
.jumper:is(.i-wave,.i-think,.i-idea,.i-hips,.i-shrug,.i-point,.i-kick) :is(.arms-down,.arms-up){opacity:0}
.jumper.i-star .arms-down{opacity:0}
.jumper.i-star .arms-up{opacity:1}
.jumper.i-wave .p-wave,.jumper.i-think .p-think,.jumper.i-idea :is(.p-idea,.bulb),.jumper.i-hips .p-hips,
.jumper.i-shrug .p-shrug,.jumper.i-point .p-point,.jumper.i-kick :is(.p-kick,.legs-kick),.jumper.i-star .legs-star{opacity:1}
.jumper:is(.i-kick,.i-star) .legs{opacity:0}
.jumper:is(.i-think,.i-shrug,.i-idea,.i-star) .f-happy{opacity:0}
.jumper.i-think .f-think,.jumper.i-shrug .f-shrug,.jumper:is(.i-idea,.i-star) .f-joy{opacity:1}
.jumper:is(.i-wave,.i-think,.i-idea,.i-hips,.i-shrug,.i-point,.i-kick,.i-star) .man{animation:idle-boil 330ms steps(1,end) infinite}
.jumper:is(.i-wave,.i-think,.i-idea,.i-hips,.i-shrug,.i-point) .rig{animation:idle-settle 520ms var(--ease-out)}
@keyframes idle-boil{0%{filter:url(#jb1)}33%{filter:url(#jb2)}66%{filter:url(#jb3)}}
@keyframes idle-settle{0%,100%{translate:0 0}30%{translate:0 2px}}
.jumper .wave-arm{transform-origin:55.5px 101px}
.jumper.i-wave .wave-arm{animation:idle-wave 300ms ease-in-out 200ms 4 alternate}
@keyframes idle-wave{from{rotate:0deg}to{rotate:14deg}}
.jumper.i-think .man{rotate:-4deg;transition:rotate 300ms var(--ease-out)}
/* Idea: the bulb pops in with a little overshoot, its rays flicker */
.jumper .bulb{transform-origin:77px 52px;scale:.6;transition:opacity 140ms ease-out,scale 380ms cubic-bezier(.34,1.45,.64,1)}
.jumper.i-idea .bulb{scale:1;transition-delay:260ms}
.jumper .bulb-glass{fill:#F5E18E}
.jumper.i-idea .bulb path:last-child{animation:idle-rays 260ms steps(1,end) 500ms 5}
@keyframes idle-rays{50%{opacity:.25}}
/* Hands on hips: a pleased little rock back and forth */
.jumper.i-hips .rig{animation:idle-settle 520ms var(--ease-out),idle-rock 1100ms ease-in-out 300ms}
@keyframes idle-rock{0%,100%{rotate:0deg}30%{rotate:-4deg}70%{rotate:4deg}}
/* Shrug: shoulders up twice */
.jumper .p-shrug{transform-origin:55px 101px}
.jumper.i-shrug .p-shrug{animation:idle-shrug 600ms ease-in-out 2}
@keyframes idle-shrug{0%,100%{translate:0 0}45%{translate:0 -4px}}
/* Point: the arm reaches out a touch */
.jumper .point-arm{transform-origin:55.5px 101px}
.jumper.i-point .point-arm{animation:idle-reach 700ms var(--ease-out) 150ms 2 alternate}
@keyframes idle-reach{from{rotate:0deg;translate:0 0}to{rotate:-6deg;translate:2px 0}}
/* Kick: a hop on one leg, knee up */
.jumper.i-kick .rig{animation:idle-hop 650ms cubic-bezier(.23,1,.32,1) 2}
@keyframes idle-hop{0%,100%{translate:0 0}40%{translate:0 -8px}}
/* Pull up a chair: it slides in from the side, the figure sits (relaxed, or thinking), then stands
   and the chair slides away. Transitions, so a scroll mid-sit just reverses it. */
.jumper .chair{opacity:0;translate:-14px 0;transition:opacity 200ms ease-out,translate 320ms var(--ease-out)}
.jumper.i-sitthink .chair{opacity:1;translate:0 0}
.jumper .man{transition:translate 280ms var(--ease-out)}
.jumper.i-sitthink .man{translate:0 8px;transition-delay:220ms}
.jumper .legs-chair{opacity:0;transition:opacity 140ms ease-out}
.jumper.i-sitthink :is(.legs,.arms-down,.arms-up){opacity:0}
.jumper.i-sitthink :is(.legs-chair,.p-think){opacity:1}
.jumper.i-sitthink .f-happy{opacity:0}
.jumper.i-sitthink .f-think{opacity:1}
.jumper.i-sitthink :is(.legs-chair,.p-think){transition-delay:220ms}
.jumper.i-sitthink .man{animation:idle-boil 330ms steps(1,end) infinite}
/* Tea break: chair from the left, table and cup from the right, then it sips on a slow loop with a
   wisp of steam, until you scroll or the mouse comes near. i-sip is the same scene as a short idle
   move (one sip, starting sooner); i-tea is where it settles after 5s */
.jumper :is(.table,.cup){opacity:0;translate:14px 0;transition:opacity 200ms ease-out,translate 320ms var(--ease-out)}
.jumper:is(.i-tea,.i-sip) :is(.table,.cup){opacity:1;translate:0 0;transition-delay:120ms}
.jumper:is(.i-tea,.i-sip) .chair{opacity:1;translate:0 0}
.jumper:is(.i-tea,.i-sip) .man{translate:0 8px;transition-delay:220ms}
.jumper:is(.i-tea,.i-sip) :is(.legs,.arms-down,.arms-up){opacity:0}
.jumper :is(.p-tea){opacity:0;transition:opacity 140ms ease-out}
.jumper:is(.i-tea,.i-sip) :is(.legs-chair,.p-tea){opacity:1;transition-delay:220ms}
.jumper .cup-body{fill:#F3EEE3}
.jumper.on-dark .cup-body{fill:#0D2B52}
.jumper .cup{transform-origin:86px 124px}
.jumper.i-tea .cup{animation:tea-cup 4200ms ease-in-out 1200ms infinite}
.jumper .tea-sip{opacity:0}
.jumper.i-tea .tea-reach{animation:tea-reach 4200ms linear 1200ms infinite}
.jumper.i-tea .tea-sip{animation:tea-reach 4200ms linear 1200ms infinite reverse}
.jumper:is(.i-tea,.i-sip) .steam{animation:tea-steam 1600ms ease-out infinite}
.jumper.i-sip .cup{animation:tea-cup 4200ms ease-in-out 400ms}
.jumper.i-sip .tea-reach{animation:tea-reach 4200ms linear 400ms both}
.jumper.i-sip .tea-sip{animation:tea-reach 4200ms linear 400ms both reverse}
@keyframes tea-cup{0%,24%{translate:0 0;rotate:0deg}40%,62%{translate:-24px -29px;rotate:-22deg}78%,100%{translate:0 0;rotate:0deg}}
@keyframes tea-reach{0%,31%{opacity:1}33%,69%{opacity:0}71%,100%{opacity:1}}
@keyframes tea-steam{0%{opacity:0;translate:0 1px}30%{opacity:.85}100%{opacity:0;translate:0 -4px}}
/* Tea party (tea on a long navy line): a friend parachutes in from above, lands beside the table,
   pulls in a chair and sits. A 6s loop: our figure talks (bubble, flapping mouth), the friend talks,
   then both laugh. When it ends (a scroll), the friend rockets off up and away to the right. */
.jumper :is(.friend,.bub,.haha,.f-talk,.f2-talk,.f2-laugh,.f2-jet,.f2-arms-up,.f2-legs-hang,.f2-chute){opacity:0}
.jumper .friend{transition:opacity 200ms ease-out}
.jumper.i-party .friend{opacity:1}
.jumper .friend .head{fill:#F3EEE3}
.jumper.on-dark .friend .head{fill:#0D2B52}
/* arrival (3.4s): sinks from high up under its canopy, sways, flares and lands beside the table,
   folds the chute, walks over, then a chair slides in and it sits. The chat starts after that. */
.jumper.i-party .friend-body{animation:f2-arrive 3400ms linear both,party-giggle-f 6000ms ease-in-out 3600ms infinite}
@keyframes f2-arrive{
  0%{translate:96px -620px;rotate:-5deg;opacity:0;animation-timing-function:cubic-bezier(.3,.5,.5,1)}
  6%{opacity:1}
  18%{rotate:5deg}
  32%{rotate:-4deg}
  44%{rotate:2deg}
  50%{translate:62px -8px;rotate:0deg;animation-timing-function:ease-out}
  53%{translate:62px -5px}
  57%{translate:62px -8px;animation-timing-function:linear}
  88%{translate:0 -8px;animation-timing-function:ease-in-out}
  100%{translate:0 0;rotate:0deg;opacity:1}}
.jumper.i-party .f2-chute{transform-origin:128px 95px;animation:f2-chute 3400ms ease-out both}
@keyframes f2-chute{0%,50%{opacity:1;scale:1}58%,100%{opacity:0;scale:.4}}
.jumper.i-party .f2-arms-up{animation:f2-vis-up 3400ms steps(1,end) both}
.jumper.i-party .f2-arms-walk{animation:f2-vis-walk 3400ms steps(1,end) both}
.jumper.i-party .f2-legs-hang{transform-origin:128px 132px;animation:f2-vis-hang 3400ms steps(1,end) both,f2-step 250ms ease-in-out 1950ms 4 alternate}
.jumper.i-party :is(.f2-arms-sit,.f2-legs-sit){animation:f2-vis-sit 3400ms steps(1,end) both}
@keyframes f2-vis-up{0%{opacity:1}56%,100%{opacity:0}}
@keyframes f2-vis-walk{0%{opacity:0}56%{opacity:1}96%,100%{opacity:0}}
@keyframes f2-vis-hang{0%{opacity:1}96%,100%{opacity:0}}
@keyframes f2-vis-sit{0%{opacity:0}96%,100%{opacity:1}}
@keyframes f2-step{from{transform:skewX(-10deg)}to{transform:skewX(10deg)}}
.jumper.i-party .f2-chair{animation:f2-chair 400ms var(--ease-out) 3000ms both}
@keyframes f2-chair{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}
.jumper .f2-arms-walk{opacity:0}
/* departure: chair goes, its jetpack fires, it rockets up and away to the right */
.jumper.party-leave .friend{opacity:1;transition:none}
.jumper.party-leave :is(.f2-chair,.f2-arms-sit,.f2-legs-sit,.f2-chute){opacity:0}
.jumper.party-leave :is(.f2-arms-up,.f2-legs-hang,.f2-jet){opacity:1}
.jumper.party-leave .f2-arms-walk{opacity:0}
.jumper.party-leave .friend-body{animation:f2-fly 1400ms cubic-bezier(.55,0,.75,.4) both}
@keyframes f2-fly{0%{translate:0 0;opacity:1}15%{translate:0 3px}100%{translate:120px -260px;rotate:14deg;opacity:0}}
/* The departing friend's copy: only the friend shows; it stays put while the figure moves on */
.jumper.ghost{z-index:20}
.jumper.ghost *{visibility:hidden}
.jumper.ghost :is(.friend,.friend *){visibility:visible}
.jumper.party-leave .f2-jet :is(.flame,.flame-core){transform-origin:128px 129px;animation:jet-flicker 110ms linear infinite alternate}
/* it sips its tea while the friend talks (the middle of the 6s chat loop) */
.jumper.i-party .cup{animation:party-cup 6000ms ease-in-out 3600ms infinite}
.jumper.i-party .tea-reach{animation:party-reach 6000ms linear 3600ms infinite}
.jumper.i-party .tea-sip{animation:party-sip 6000ms linear 3600ms infinite}
@keyframes party-cup{0%,31%{translate:0 0;rotate:0deg}38%,51%{translate:-24px -29px;rotate:-22deg}57%,100%{translate:0 0;rotate:0deg}}
@keyframes party-reach{0%,33%{opacity:1}34%,55%{opacity:0}56%,100%{opacity:1}}
@keyframes party-sip{0%,33%{opacity:0}34%,55%{opacity:1}56%,100%{opacity:0}}
.jumper .mouth{transform-origin:center;transform-box:fill-box}
.jumper.i-party .mouth{animation:party-flap 220ms steps(2,jump-none) infinite alternate}
@keyframes party-flap{from{scale:1 .35}to{scale:1 1}}
.jumper.i-party :is(.f-happy,.f-joy,.f-think,.f-talk,.f2-happy,.f2-talk,.f2-laugh,.bub-a,.bub-b,.haha){animation-duration:6000ms;animation-delay:3600ms;animation-iteration-count:infinite;animation-timing-function:steps(1,end)}
.jumper.i-party .f-talk{animation-name:party-a}
.jumper.i-party .f-happy{animation-name:party-a-rest}
.jumper.i-party .f-joy{animation-name:party-laugh}
.jumper.i-party .f2-talk{animation-name:party-b}
.jumper.i-party .f2-happy{animation-name:party-b-rest}
.jumper.i-party .f2-laugh{animation-name:party-laugh}
.jumper.i-party .bub-a{animation-name:party-a}
.jumper.i-party .bub-b{animation-name:party-b}
.jumper.i-party .haha{animation-name:party-laugh}
@keyframes party-a{0%{opacity:1}28%,100%{opacity:0}}
@keyframes party-b{0%,29%{opacity:0}30%{opacity:1}58%,100%{opacity:0}}
@keyframes party-laugh{0%,59%{opacity:0}60%{opacity:1}85%,100%{opacity:0}}
@keyframes party-a-rest{0%,27%{opacity:0}28%{opacity:1}59%{opacity:0}85%,100%{opacity:1}}
@keyframes party-b-rest{0%{opacity:1}29%{opacity:0}58%{opacity:1}59%{opacity:0}85%,100%{opacity:1}}
.jumper.i-party .man{animation:party-giggle 6000ms ease-in-out 3600ms infinite}
@keyframes party-giggle{0%,60%,85%,100%{translate:0 8px}64%,72%,80%{translate:0 5px}68%,76%{translate:0 8px}}
@keyframes party-giggle-f{0%,60%,85%,100%{translate:0 0}66%,74%,82%{translate:0 -3px}70%,78%{translate:0 0}}
/* Scared of the mouse: scared face, arms up, quick little steps (or the jetpack) away from it */
.jumper.scared :is(.f-happy,.f-joy,.f-think,.f-shrug){opacity:0}
.jumper.scared .f-scared{opacity:1}
.jumper.scared .arms-down{opacity:0}
.jumper.scared .arms-up{opacity:1}
.jumper.scared.i-walk :is(.man,.legs){animation-duration:180ms}
/* Backflip: crouch, spring up, tuck and rotate a full turn around the waist, land with a squash */
.jumper.i-flip :is(.arms-down,.f-happy){opacity:0}
.jumper.i-flip :is(.arms-up,.f-joy){opacity:1}
.jumper.i-flip .rig{transform-origin:55px 112px;animation:idle-flip 1100ms linear}
@keyframes idle-flip{
  0%{translate:0 0;rotate:0deg;scale:1 1;animation-timing-function:ease-out}
  14%{translate:0 3px;rotate:0deg;scale:1.05 .92;animation-timing-function:cubic-bezier(.23,1,.32,1)}
  48%{translate:0 -40px;rotate:-190deg;scale:.96 1.02;animation-timing-function:cubic-bezier(.55,0,.75,.4)}
  82%{translate:0 0;rotate:-360deg;scale:1.06 .92;animation-timing-function:ease-out}
  100%{translate:0 0;rotate:-360deg;scale:1 1}}
.jumper.i-flip .legs{transform-origin:55px 124px;animation:idle-tuck 1100ms ease-in-out}
@keyframes idle-tuck{0%,20%,80%,100%{transform:none}40%,60%{transform:scaleY(.62)}}
/* Star jump: crouch, spring up arms and legs wide, land with a squash */
.jumper .rig{transform-origin:55px 148px}
.jumper.i-star .rig{animation:idle-star 700ms ease-in-out 2}
@keyframes idle-star{0%,100%{translate:0 0;scale:1 1}15%{translate:0 2px;scale:1.04 .94}45%{translate:0 -14px;scale:.97 1.04}80%{translate:0 0;scale:1.03 .96}}
@media (prefers-reduced-motion:reduce){.jumper{display:none}}

/* ===== Booking page: the calendar is a big blue sticky note ==========================
   The booking is the page's one job, so its frame becomes the strongest colour on the
   page: a salvia-blue note with tape, kept straight so the calendar stays easy to use.
   The "Free" note moves to yellow so the two blues don't sit side by side.
   Navy on this blue reads 9.5:1. */
.widget-shell{background:#BFD7EF;border-top:0;padding:16px 16px 18px;box-shadow:var(--lift)}
.widget-shell::before{left:50%;right:auto;margin-left:-46px;width:92px;rotate:-2deg}
.widget-bar{padding:6px 6px 14px}
.fact:nth-child(2){--note:#F5E18E}

/* ===== Steps and scorecard as sticky notes (approved 2026-10-27) =====================
   "Four steps" and "How we measure" on the home and How it works pages. Every step and
   every measure is a taped note; the last step, Hand over, is the navy card: the outcome.
   The html prefix keeps these ahead of the earlier ink-line styles for the same parts. */
html .steps{gap:32px;padding-top:28px}
html .steps::after{display:none}
html .step{position:relative;border-top:0;padding:32px 24px 28px;background:var(--note);
  box-shadow:var(--lift);rotate:var(--tilt,-1deg)}
html .step::before,html .metric::before{content:"";position:absolute;top:-12px;left:50%;width:80px;height:24px;margin-left:-40px;
  background:var(--tape);box-shadow:0 1px 2px rgba(13,43,82,.14);rotate:-2deg}
html .step:nth-child(1){--note:#FBC593;--tilt:-1.2deg}
html .step:nth-child(2){--note:#BFD7EF;--tilt:1deg}
html .step:nth-child(3){--note:#F5E18E;--tilt:-.7deg}
html .step:nth-child(4){--note:var(--navy);--tilt:1.3deg;color:var(--on-navy)}
html .step:nth-child(4) .when{color:var(--on-navy-mute)}
html .metrics{border:0;gap:32px;padding-top:28px}
html .metric,html .metric + .metric{position:relative;padding:32px 24px 28px;border:0;
  background:var(--note);box-shadow:var(--lift);rotate:var(--tilt,1deg)}
html .metric:nth-child(1){--note:#F5E18E;--tilt:1deg}
html .metric:nth-child(2){--note:#BFD7EF;--tilt:-1.2deg}
html .metric:nth-child(3){--note:#FBC593;--tilt:.8deg}
html .metric:nth-child(4){--note:#F5E18E;--tilt:-.9deg}
html .metric b::after{background:var(--navy)}   /* the tally mark shows on orange paper too */

@media (max-width:960px){
  html .steps,html .metrics{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  html .steps,html .metrics{grid-template-columns:1fr;max-width:420px}
  html .metric,html .metric + .metric{border-top:0}
}

/* Inline diagrams (FAQ layer stack, Services after-the-audit branch, About otium/negotium pair). Labels are the site's own words. */
.faq-fig{padding:0 56px 28px 16px}
.faq-fig svg{display:block;width:100%;height:auto;max-width:640px}
.faq-fig .fig-m{display:none;max-width:420px}
:is(.faq-fig,.svc-fig,.otium-fig,.steps-fig) text{font-family:Manrope,system-ui,sans-serif;fill:#0D2B52}
:is(.faq-fig,.svc-fig,.otium-fig,.steps-fig) .fl-name{font-size:17px;font-weight:700;letter-spacing:-.01em}
.fig-m .fl-name{font-size:16px}
:is(.faq-fig,.svc-fig,.otium-fig,.steps-fig) .fl-idx{font-size:12px;font-weight:700;fill:#5E4017}
:is(.faq-fig,.svc-fig,.otium-fig,.steps-fig) .fl-eye{font-size:12px;font-weight:700;letter-spacing:.08em;fill:#5E4017}
:is(.faq-fig,.svc-fig,.otium-fig,.steps-fig) .fl-sub{font-size:14px;font-weight:500;fill:#5E4017}
.fig-m .fl-sub{font-size:13px}
@media (max-width:760px){.faq-fig{padding-right:16px}.faq-fig .fig-d{display:none}.faq-fig .fig-m{display:block}}
.svc-fig{margin-top:40px}
.svc-fig svg{display:block;width:100%;height:auto;max-width:960px}
.svc-fig .fig-m{display:none;max-width:420px}
@media (max-width:760px){.svc-fig .fig-d{display:none}.svc-fig .fig-m{display:block}}
.otium-fig{margin-top:32px}
.otium-fig svg{display:block;width:100%;height:auto;max-width:640px}
.otium-fig .fig-m{display:none;max-width:420px}
.otium-fig .fl-word{font-size:34px;font-weight:800;font-style:italic;letter-spacing:-.02em}
.otium-fig .fl-neg{fill:#5E4017}
@media (max-width:760px){.otium-fig .fig-d{display:none}.otium-fig .fig-m{display:block}}
/* Small phones: zcal's calendar needs ~320px, so the booking panel runs edge to edge */
@media (max-width:420px){.widget-shell{margin-inline:-20px;padding-inline:0}.widget-bar{padding-inline:20px}}

/* Highlighter: an orange marker stroke behind a key sentence (About, "Why Otium?") */
mark.hl{color:inherit;background:linear-gradient(transparent 30%,#FCAA66 30%,#FCAA66 94%,transparent 94%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .15em;margin:0 -.15em}

/* System notes: the result is its own green tag, so what the part is and what it produces read separately */
.card .fix{margin-top:auto;padding:12px 14px;background:#DCEFD9;color:#1C5232;border-left:4px solid #2E8B57;font-weight:800}
.card .fix svg{color:#2E8B57}
@media (hover:hover) and (pointer:fine){.card:hover .fix{background:#CFE8CB}}
.card p:has(+ .fix){margin-bottom:20px}   /* breathing room above the tag; the tag itself sits at the card's foot */

/* Four steps, hand-drawn: sketched boxes and arrows, crisp text */
.steps-fig{margin:0}
.steps-fig svg{display:block;width:100%;height:auto;max-width:1040px;overflow:visible}
.steps-fig .fig-m{display:none;max-width:420px}
.steps-fig .st-name{font-size:24px;font-weight:800;letter-spacing:-.02em}
.steps-fig .fig-m .st-name{font-size:22px}
.steps-fig .st-desc{font-size:14px;font-weight:500}
.steps-fig .st-when{font-size:12px;font-weight:700;fill:#5E4017}
@media (max-width:760px){.steps-fig .fig-d{display:none}.steps-fig .fig-m{display:block}}

/* Fix tag as a small green page-flag sticky: translucent mint, a darker adhesive end, an arrow point */
.card .fix{position:relative;margin-top:auto;padding:11px 14px 11px 30px;border:0;color:#123F2A;font-weight:800;
  background:linear-gradient(90deg,rgba(102,190,160,.95) 0 20px,rgba(150,218,194,.92) 20px);
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);rotate:-1deg;
  filter:drop-shadow(0 2px 1px rgba(13,43,82,.18))}
.card .fix svg{color:#123F2A}
@media (hover:hover) and (pointer:fine){.card:hover .fix{background:linear-gradient(90deg,rgba(92,182,152,.97) 0 20px,rgba(140,212,186,.95) 20px)}}

/* Problem notes are crumpled (soft crinkle shading, slightly uneven corners); solution notes stay clean.
   The home page's system notes are solutions, so they stay smooth. */
.side-col.before{
  border-radius:3px 7px 4px 6px / 6px 3px 7px 4px}
.side-col.before::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016 .021' numOctaves='3' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='3.4' diffuseConstant='1.05'%3E%3CfeDistantLight azimuth='225' elevation='44'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center/320px 320px}
.side-col.before:nth-child(2)::after{background-position:110px 60px}
.side-col.before:nth-child(3)::after{background-position:220px 150px}
.card .fix{z-index:1}   /* the result flag sits above the note */
/* Booking page note: highlighted with the orange marker instead of a side rule */
.note{border-left:0;padding:4px 0}
mark.hl.hl-yellow{background:linear-gradient(transparent 30%,#F7DA6B 30%,#F7DA6B 94%,transparent 94%)}

/* Scorecard: a small pencil sketch on each note (decorative; the words carry the meaning) */
.metric .metric-fig{display:block;width:140px;max-width:100%;height:auto;margin-top:16px;overflow:visible;color:#0D2B52}
.metric .metric-fig .acc{stroke:#C4561A;color:#C4561A}

/* The four-step sketch is drawn on its own torn strip of plain paper, taped onto the ruled page */
.steps-fig{position:relative;padding:52px 40px 56px;rotate:-.4deg;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='s' x='-5%25' y='-10%25' width='110%25' height='130%25'%3E%3CfeDropShadow dx='0' dy='5' stdDeviation='5' flood-color='%230D2B52' flood-opacity='.22'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FFFDF8'/%3E%3Cstop offset='.03' stop-color='%23FFFDF8'/%3E%3Cstop offset='.97' stop-color='%23FFFDF8'/%3E%3Cstop offset='1' stop-color='%23FFFDF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0.0 15.5 L14.3 15.7 L28.6 12.8 L42.9 15.8 L57.1 11.9 L71.4 11.4 L85.7 17.5 L100.0 11.2 L114.3 12.9 L128.6 15.6 L142.9 16.2 L157.1 17.6 L171.4 21.0 L185.7 18.1 L200.0 18.2 L214.3 15.0 L228.6 20.6 L242.9 13.1 L257.1 20.8 L271.4 17.3 L285.7 11.9 L300.0 14.5 L314.3 16.8 L328.6 12.8 L342.9 12.9 L357.1 16.2 L371.4 13.1 L385.7 19.0 L400.0 13.1 L414.3 25.2 L428.6 13.1 L442.9 14.3 L457.1 11.9 L471.4 17.0 L485.7 20.6 L500.0 19.7 L514.3 20.1 L528.6 12.9 L542.9 13.0 L557.1 17.0 L571.4 11.4 L585.7 18.0 L600.0 17.0 L614.3 13.9 L628.6 16.6 L642.9 13.8 L657.1 11.2 L671.4 11.6 L685.7 16.7 L700.0 19.9 L714.3 17.9 L728.6 17.9 L742.9 18.0 L757.1 17.4 L771.4 14.2 L785.7 16.5 L800.0 18.4 L814.3 20.2 L828.6 20.0 L842.9 18.9 L857.1 17.2 L871.4 19.3 L885.7 20.9 L900.0 14.9 L914.3 15.4 L928.6 20.1 L942.9 15.8 L957.1 16.0 L971.4 10.4 L985.7 17.8 L1000.0 20.1 L1000.0 380.3 L985.7 387.3 L971.4 386.3 L957.1 387.9 L942.9 388.2 L928.6 388.0 L914.3 381.3 L900.0 387.5 L885.7 385.3 L871.4 384.3 L857.1 383.4 L842.9 381.5 L828.6 386.3 L814.3 382.6 L800.0 381.3 L785.7 381.9 L771.4 385.2 L757.1 383.8 L742.9 383.3 L728.6 381.7 L714.3 383.1 L700.0 386.5 L685.7 387.0 L671.4 388.7 L657.1 384.0 L642.9 384.7 L628.6 387.5 L614.3 387.5 L600.0 384.6 L585.7 385.4 L571.4 384.3 L557.1 384.0 L542.9 385.9 L528.6 384.2 L514.3 386.9 L500.0 387.0 L485.7 379.3 L471.4 384.5 L457.1 381.5 L442.9 382.2 L428.6 388.8 L414.3 381.1 L400.0 387.2 L385.7 385.5 L371.4 387.0 L357.1 382.8 L342.9 383.5 L328.6 388.3 L314.3 386.9 L300.0 385.1 L285.7 382.5 L271.4 386.1 L257.1 380.3 L242.9 385.8 L228.6 385.6 L214.3 385.3 L200.0 381.4 L185.7 388.8 L171.4 381.1 L157.1 386.1 L142.9 379.3 L128.6 388.8 L114.3 383.9 L100.0 381.1 L85.7 380.7 L71.4 386.1 L57.1 384.0 L42.9 384.8 L28.6 388.1 L14.3 381.0 L0.0 387.9 Z' fill='url(%23g)' filter='url(%23s)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.steps-fig .tape{position:absolute;top:-2px;width:96px;height:28px;background:var(--tape);box-shadow:0 1px 2px rgba(13,43,82,.14);z-index:2;pointer-events:none}
.steps-fig .tape-l{left:5%;rotate:-6deg}
.steps-fig .tape-r{right:5%;rotate:5deg}
@media (max-width:760px){.steps-fig{padding:48px 18px 52px;rotate:0deg}.steps-fig .tape{width:76px;height:24px}}

/* "30 minutes" on the Talk step links to the booking page */
.steps-fig .st-link .st-cta{fill:#0D2B52;text-decoration:underline;text-decoration-color:#FA9442;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.steps-fig .st-link:hover .st-cta{fill:#C4561A}
.steps-fig .st-link:focus-visible{outline:3px solid #0D2B52;outline-offset:3px}

/* ===== Who it's for: marker doodles that draw themselves in once (underline, ring, arrow) ===== */
.grad,.circ,.aud-foot{position:relative}
.doodle{display:block;position:absolute;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.doodle path{stroke-dasharray:1;stroke-dashoffset:0}
.doodle-under{left:0;bottom:-.18em;width:100%;height:.32em;stroke:#FA9442;stroke-width:5}
.doodle-circ{left:-6px;top:-9px;width:calc(100% + 12px);height:calc(100% + 18px);stroke:#2E8B57;stroke-width:2.5}
.aud-foot{display:inline-block}
.doodle-arrow{left:calc(100% + 10px);top:-38px;width:96px;height:56px;stroke:#C4561A;stroke-width:3}
/* drawn in when scrolled into view (main.js adds .draw); without JS the marks simply show */
@media (prefers-reduced-motion:no-preference){
  .js .doodle path{stroke-dashoffset:1}
  .js .doodle.draw path{animation:doodle-draw 700ms cubic-bezier(.77,0,.175,1) forwards}
  .js .doodle-under.draw path{animation-delay:400ms}
  .js .doodle-under.draw path + path{animation-delay:850ms;animation-duration:500ms}
  .js .doodle-circ.draw path{animation-delay:1150ms;animation-duration:800ms}
  .js .doodle-arrow.draw path{animation-delay:250ms}
  .js .doodle-arrow.draw path + path{animation-delay:800ms;animation-duration:260ms}
}
@keyframes doodle-draw{to{stroke-dashoffset:0}}
@media (max-width:760px){.doodle-arrow{display:none}}
.circ > .doodle-circ{width:calc(100% + 12px);height:calc(100% + 18px);margin:0;flex:none}   /* beat icon sizing in rows like .assure */
.assure .circ{margin-left:-4px}   /* the row is a flex row; keep "of 5–50" spaced like text */

/* Home hero: a little marker smiley after "time back.", drawn once the underline is done */
.doodle-smile{left:calc(100% + .14em);top:.08em;width:.62em;height:.62em;stroke:#FA9442;stroke-width:4.5}
@media (prefers-reduced-motion:no-preference){
  .js .doodle-smile.draw path{animation-duration:260ms}
  .js .doodle-smile.draw path:nth-child(1){animation-delay:1450ms;animation-duration:600ms}
  .js .doodle-smile.draw path:nth-child(2){animation-delay:2100ms}
  .js .doodle-smile.draw path:nth-child(3){animation-delay:2250ms}
  .js .doodle-smile.draw path:nth-child(4){animation-delay:2400ms;animation-duration:420ms}
}
@media (max-width:760px){.doodle-smile{left:calc(100% + .05em);top:.14em;width:.42em;height:.42em;stroke-width:5}}

/* Scorecard underline: shown as a still mark without JS or with reduced motion; drawn once on view */
.metric b::after{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){.js .metric b::after{transform:scaleX(0)}}
@keyframes tally-once{to{transform:scaleX(1)}}
/* Pencil wobble only as a pose starts. Tea (sipping, steam) and the chat with the friend keep
   looping for as long as it sits there, until a scroll or the mouse ends the scene */
.jumper:is(.i-wave,.i-think,.i-idea,.i-hips,.i-shrug,.i-point,.i-kick,.i-star,.i-sitthink) .man{animation-iteration-count:3}   /* ~1s of wobble as the pose starts */
.jumper.joy .man{animation-iteration-count:6}

/* About principles: hand-drawn marker numbers 1 2 3, drawn in as the rows scroll into view */
.principle-rows li:has(.doodle-num){padding-left:64px}
.principle-rows h3:has(.doodle-num){position:relative}
.doodle.doodle-num{left:-62px;top:-.2em;width:40px;height:46px;stroke:#FA9442;stroke-width:4.5}
@media (max-width:760px){.principle-rows li:has(.doodle-num){padding-left:50px}.doodle.doodle-num{left:-48px;width:32px;height:37px}}
@media (prefers-reduced-motion:no-preference){
  .js .doodle-num.draw path{animation-duration:520ms}
  .js .doodle-num.draw path + path{animation-delay:480ms;animation-duration:260ms}
}

/* After its 10 seconds of play it rests: chair and tea in place, nothing moving */

/* FAQ answers open and close with height and a fade (new browsers; others simply snap) */
@supports selector(::details-content){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;opacity:0;
    transition:block-size 240ms cubic-bezier(.23,1,.32,1),opacity 200ms cubic-bezier(.23,1,.32,1),content-visibility 240ms allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
  @media (prefers-reduced-motion:reduce){.faq details::details-content{transition:opacity 150ms ease-out,content-visibility 150ms allow-discrete}}
}
/* Booking calendar fades in over its loading note instead of popping in */
.js .widget iframe{opacity:0;transition:opacity 200ms cubic-bezier(.23,1,.32,1)}
.js .widget iframe.loaded{opacity:1}
/* Diagram arrows draw themselves in once the diagram is seen (main.js adds .draw to the svg) */
@media (prefers-reduced-motion:no-preference){
  .js svg .arrow{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
  .js svg.draw .arrow{animation:arrow-draw 500ms cubic-bezier(.77,0,.175,1) forwards}
}
@keyframes arrow-draw{0%{stroke-dashoffset:1;opacity:0}15%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
/* Phone menu: links rise in one after another on open; they leave together on close */
@media (prefers-reduced-motion:no-preference){
  .mobile-menu > *{opacity:0;translate:0 6px;transition:opacity 200ms cubic-bezier(.23,1,.32,1),translate 200ms cubic-bezier(.23,1,.32,1)}
  .menu-open .mobile-menu > *{opacity:1;translate:0 0}
  .menu-open .mobile-menu > :nth-child(2){transition-delay:40ms}
  .menu-open .mobile-menu > :nth-child(3){transition-delay:80ms}
  .menu-open .mobile-menu > :nth-child(4){transition-delay:120ms}
  .menu-open .mobile-menu > :nth-child(5){transition-delay:160ms}
  .menu-open .mobile-menu > :nth-child(6){transition-delay:200ms}
  .menu-open .mobile-menu > :nth-child(7){transition-delay:240ms}
  .menu-open .mobile-menu > :nth-child(8){transition-delay:280ms}
}

/* Seated at the top it waves hello for its 2 seconds before jumping (scrolling down jumps at once) */
.jumper .sit-wave{opacity:0;transform-origin:54.5px 101px}
.jumper.sit .sit-l{opacity:0}
.jumper.sit .sit-wave{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .jumper.sit .sit-wave{animation:sit-wave 300ms cubic-bezier(.77,0,.175,1) 150ms 6 alternate}
}
@keyframes sit-wave{from{rotate:0deg}to{rotate:-14deg}}

/* About: once the arrow has drawn, "neg" fades in to spell out negotium, "not-otium"
   (fill-opacity, since SVG text can't be moved; three glyphs, once) */
@media (prefers-reduced-motion:no-preference){
  .js .otium-fig svg .fl-neg{fill-opacity:0}
  .js .otium-fig svg.draw .fl-neg{fill-opacity:1;transition:fill-opacity 300ms cubic-bezier(.23,1,.32,1) 450ms}
}
/* About: the Seneca line lands word by word as the quote slides in (main.js reveal) */
@media (prefers-reduced-motion:no-preference){
  .js .seneca.reveal:not(.in) blockquote p span{opacity:0;translate:0 8px}   /* hidden at once, no fade-out */
  .js .seneca:not(.reveal:not(.in)) blockquote p span{transition:opacity 300ms cubic-bezier(.23,1,.32,1),translate 300ms cubic-bezier(.23,1,.32,1)}
  .js .seneca:not(.reveal:not(.in)) blockquote p span:nth-child(1){transition-delay:150ms}
  .js .seneca:not(.reveal:not(.in)) blockquote p span:nth-child(2){transition-delay:270ms}
  .js .seneca:not(.reveal:not(.in)) blockquote p span:nth-child(3){transition-delay:390ms}
}
/* Highlighter marks sweep on left to right the first time they're seen (main.js adds .draw) */
@media (prefers-reduced-motion:no-preference){
  .js mark.hl{background-repeat:no-repeat;background-size:0% 100%;transition:background-size 600ms cubic-bezier(.77,0,.175,1)}
  .js mark.hl.draw{background-size:100% 100%}
}

/* The outline copy behind the stick figure (main.js): cream, wider strokes, never filled differently */
.jumper .halo,.jumper .halo *{stroke:#F3EEE3 !important}

/* ===== Book a call: the one action on the site =====================================
   Every button to the booking page is orange with navy text (6.6:1), the only solid orange
   button anywhere, so it never competes with navy buttons, notes or doodles. Same label
   everywhere; a short reassurance line sits under it where the page asks for the call. */
.btn.btn-book,nav a.btn.btn-book{background:var(--orange);border-color:var(--navy);color:var(--navy);font-weight:800}
.btn.btn-book:hover,nav a.btn.btn-book:hover{background:var(--orange-2);border-color:var(--navy);color:var(--navy)}
:is(.cta-box,footer) .btn.btn-book{border-color:var(--orange)}
:is(.cta-box,footer) .btn.btn-book:hover{border-color:var(--orange-2)}
.book-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:64px}
.book-note{font-size:16px;font-weight:600;max-width:44ch}
.cta-who{display:flex;align-items:center;gap:14px;margin-top:28px}
.cta-who img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--orange);flex:none}
.cta-who p{margin:0;font-size:16px;color:var(--on-navy-mute)}
@media (max-width:640px){.book-row{margin-top:48px}.book-row .btn{flex:1 1 100%}}
nav a.btn.btn-book{white-space:nowrap;flex:none;padding:9px 20px}   /* never squeezed, and keeps its side padding (nav links have none) */

/* Who it's for: each note is a persona, kept simple: a pencil portrait, the role, one value line
   that carries the note, and a short "you" line describing who that is */
.aud-col .aud-face{display:block;width:64px;height:64px;margin-bottom:14px;overflow:visible}
.aud-col .aud-value{margin-top:10px;font-size:20px;font-weight:700;line-height:1.35;color:var(--navy)}
.aud-col .aud-persona{margin-top:12px;font-size:16px;color:var(--umber)}