/* Shared stylesheet - tobilawal.com (offer brand: Ship Something Real, resolved 4 Jul 26 - see index.html)
   Extracted and evolved from the v1 single-page inline styles.
   Palette is fixed (Brand-Guidelines.md): navy #252a52, deep navy #1b1f3e,
   stone #e8e5dc, paper #faf9f5, orange #d4562b. Serif: Charter/Georgia. */

:root{
  --navy:#252a52;
  --navy-deep:#1b1f3e;
  --stone:#e8e5dc;
  --stone-soft:#f2f0ea;
  --paper:#faf9f5;
  --ink:#22243a;
  --ink-soft:#4d5068;
  --orange:#d4562b;
  --orange-deep:#b8441f;
  --rule:#d9d5c9;
  --max:1080px;
  /* Resident-brand accents inside the personal frame (see Brand-Guidelines coexistence rule).
     Kinship green #5a7654 / #3d5a47 (from withkinship.ai/brand); Conquest onyx #15181d + bronze #c9a86a (theconquest.co.uk). */
  --sage:#5a7654;
  --sage-deep:#3d5a47;
  --sage-soft:#e9eee7;
  --claret:#7a3a3f;
  --onyx:#15181d; --bronze:#c9a86a; --bone:#f7f6f3; --amber:#fab219;
  --claret-deep:#5f2c30;
  --claret-soft:#f2e9e8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Charter,Georgia,"Times New Roman",serif;font-weight:600;line-height:1.15;letter-spacing:-0.01em}
a{color:var(--orange-deep)}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:88px 0}
.kicker{
  display:block;font-size:13px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--orange);margin-bottom:18px;
}
h2{font-size:clamp(28px,4vw,40px);margin-bottom:24px;max-width:24ch}
p{max-width:66ch}
.standfirst{color:var(--ink-soft);margin-bottom:28px}
.btn{
  display:inline-block;background:var(--orange);color:#fff;text-decoration:none;
  padding:14px 30px;border-radius:999px;font-weight:600;font-size:16px;
  transition:background .15s ease;
}
.btn:hover{background:var(--orange-deep)}
.btn.ghost{background:transparent;color:var(--stone);border:1.5px solid var(--stone)}
.btn.ghost:hover{background:rgba(232,229,220,.12)}
.btn.ghost.on-light{color:var(--navy);border-color:var(--navy)}
.btn.ghost.on-light:hover{background:rgba(37,42,82,.06)}
.btn.alt{background:var(--navy)}
.btn.alt:hover{background:var(--navy-deep)}

/* ---------- Nav (sticky, with checkbox disclosure menu below 760px) ---------- */
nav{
  position:sticky;top:0;z-index:10;background:var(--navy);
  border-bottom:1px solid rgba(232,229,220,.15);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.wordmark img{height:30px;display:block}
.nav-toggle{display:none}
.nav-burger{display:none}
nav ul{display:flex;gap:26px;list-style:none;align-items:center}
nav ul a{color:var(--stone);text-decoration:none;font-size:15px;font-weight:500;opacity:.85}
nav ul a:hover{opacity:1}
nav ul a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
nav ul a.nav-cta{background:var(--orange);color:#fff;padding:9px 20px;border-radius:999px;opacity:1;text-decoration:none}
nav ul a.nav-cta:hover{background:var(--orange-deep)}
@media(max-width:760px){
  .nav-burger{
    display:block;cursor:pointer;width:28px;height:22px;position:relative;flex:none;
  }
  .nav-burger span{
    position:absolute;left:0;width:100%;height:2px;background:var(--stone);
    border-radius:2px;transition:transform .18s ease,opacity .18s ease;
  }
  .nav-burger span:nth-child(1){top:0}
  .nav-burger span:nth-child(2){top:10px}
  .nav-burger span:nth-child(3){top:20px}
  nav ul{
    display:none;position:absolute;top:66px;left:0;right:0;
    background:var(--navy);flex-direction:column;align-items:flex-start;gap:0;
    padding:10px 24px 22px;border-bottom:1px solid rgba(232,229,220,.15);
  }
  .nav-toggle:checked ~ ul{display:flex}
  nav ul li{width:100%}
  nav ul a{display:block;padding:12px 0;font-size:16px}
  nav ul a.nav-cta{display:inline-block;margin-top:12px;padding:11px 24px}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
}

/* ---------- Hero (home) ---------- */
.hero{background:var(--navy);color:var(--stone);padding:104px 0 96px}
.hero .kicker{color:var(--orange)}
.hero h1{font-size:clamp(36px,6vw,58px);max-width:18ch;margin-bottom:28px;color:#fff}
.hero .lede{font-size:clamp(18px,2.2vw,21px);color:var(--stone);opacity:.92;max-width:56ch;margin-bottom:20px}
.hero .proof{
  font-size:15px;color:var(--stone);opacity:.82;max-width:56ch;
  padding-left:16px;border-left:2px solid rgba(232,229,220,.45);margin-bottom:38px;
}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Hero portrait (home only) ---------- */
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center}
.hero-figure{margin:0}
.hero-figure img{width:100%;border-radius:14px;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center top}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-figure{max-width:360px}
}

/* ---------- Page hero (subpages) ---------- */
.page-hero{background:var(--navy);color:var(--stone);padding:60px 0 72px}
.page-hero .kicker{color:var(--orange)}
.page-hero h1{font-size:clamp(30px,5vw,46px);max-width:22ch;margin-bottom:22px;color:#fff}
.page-hero .lede{font-size:clamp(17px,2vw,19px);color:var(--stone);opacity:.92;max-width:60ch}
.page-hero .lede+.lede{margin-top:14px}
.crumb{font-size:14px;margin-bottom:30px}
.crumb a{color:var(--stone);opacity:.7;text-decoration:none}
.crumb a:hover{opacity:1;text-decoration:underline}

/* ---------- Question band - stone ---------- */
.band{background:var(--stone);color:var(--navy);padding:72px 0}
.band p{font-family:Charter,Georgia,serif;font-size:clamp(22px,3vw,30px);line-height:1.4;max-width:36ch}
.band em{color:var(--orange-deep);font-style:normal}

/* ---------- Story ---------- */
.story-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
@media(max-width:860px){.story-grid{grid-template-columns:1fr}}
.story-grid img{width:100%;border-radius:12px;display:block}
.story-grid .txt p+p{margin-top:18px}

/* ---------- Logo wall ---------- */
.logos{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:56px 0}
.logos h3{font-size:13px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin-bottom:28px;font-family:inherit}
.logo-row{display:flex;justify-content:center;align-items:center;gap:56px;flex-wrap:wrap;margin-bottom:40px}
.logo-row:last-child{margin-bottom:0}
.logo-row img{height:34px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:all .15s}
.logo-row img:hover{filter:none;opacity:1}

/* ---------- Record - deep navy ---------- */
.record{background:var(--navy-deep);color:var(--stone)}
.record h2{color:#fff}
.record .kicker{color:var(--orange)}
.record .standfirst{color:var(--stone);opacity:.9;max-width:60ch;margin-bottom:26px}
.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(232,229,220,.18);border:1px solid rgba(232,229,220,.18);border-radius:12px;overflow:hidden;margin-top:12px}
@media(max-width:820px){.record-grid{grid-template-columns:1fr}}
.record-cell{background:var(--navy);padding:28px 26px}
.record-cell h3{font-size:17px;margin-bottom:8px;color:#fff}
.record-cell p{font-size:15px;color:var(--stone);opacity:.85}
.record-note{font-size:13.5px;opacity:.65;margin-top:16px}

/* ---------- Framework ---------- */
.levels{margin-top:8px}
.level{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--rule)}
.level:last-child{border-bottom:1px solid var(--rule)}
.level .num{font-family:Charter,Georgia,serif;font-size:34px;color:var(--orange);font-weight:600}
.level h3{font-size:19px;margin-bottom:6px}
.level p{color:var(--ink-soft);font-size:15.5px}
.threads{margin-top:30px;background:var(--stone-soft);border:1px solid var(--rule);border-radius:12px;padding:26px 28px}
.threads h3{font-size:16px;margin-bottom:10px}
.threads ul{list-style:none}
.threads li{padding:6px 0 6px 22px;position:relative;font-size:15.5px;color:var(--ink-soft)}
.threads li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:2px;background:var(--orange)}

/* ---------- Diagnostic band ---------- */
.diagnostic{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.diag-meta{display:flex;gap:44px;flex-wrap:wrap;margin:26px 0 30px}
.diag-meta div{font-size:14.5px;color:var(--ink-soft)}
.diag-meta strong{display:block;font-family:Charter,Georgia,serif;font-size:26px;font-weight:600;color:var(--navy);margin-bottom:2px}
.diag-note{font-size:13.5px;color:var(--ink-soft);margin-top:14px}

/* ---------- Offers ---------- */
.offers{background:var(--stone)}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
@media(max-width:860px){.offer-grid{grid-template-columns:1fr}}
.offer{border-radius:14px;background:#fff;padding:36px 32px;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(27,31,62,.08)}
.offer .tag{font-size:12.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.offer h3{font-size:24px;margin-bottom:6px}
.offer .who{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px}
.offer ul{list-style:none;margin:0 0 22px}
.offer li{padding:7px 0 7px 26px;position:relative;font-size:15.5px}
.offer li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:6px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.price{margin-top:auto;padding-top:18px;border-top:1px solid var(--rule)}
.price .amount{font-family:Charter,Georgia,serif;font-size:30px;font-weight:700;color:var(--navy)}
.price .terms{font-size:13.5px;color:var(--ink-soft);margin:4px 0 18px}
.price .fwd{font-size:13px;color:var(--ink-soft);margin-top:12px}

/* ---------- Fit ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:8px}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr}}
.fit h3{font-size:18px;margin-bottom:14px}
.fit ul{list-style:none}
.fit li{padding:8px 0 8px 26px;position:relative;font-size:15.5px;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.fit.yes li::before{content:"";position:absolute;left:2px;top:16px;width:12px;height:6px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.fit.no li::before{content:"\00d7";position:absolute;left:2px;top:6px;color:var(--navy);opacity:.5;font-size:18px;font-weight:700}

/* ---------- FAQ (native disclosure, no JS) ---------- */
.faq{max-width:780px;margin-top:8px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:20px 40px 20px 0;
  font-family:Charter,Georgia,serif;font-weight:600;font-size:18px;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-52%);
  color:var(--orange);font-size:24px;font-weight:400;line-height:1;
}
.faq details[open] summary::after{content:"-"}
.faq details p{padding:0 0 22px;color:var(--ink-soft);font-size:15.5px;max-width:64ch}
.faq details p+p{margin-top:-8px}

/* ---------- Workstreams (sprint page) ---------- */
.ws{border:1px solid var(--rule);border-radius:14px;background:#fff;padding:30px 32px;margin-top:22px}
.ws h3{font-size:21px;margin-bottom:12px}
.ws p{font-size:15.5px;color:var(--ink);max-width:72ch}
.ws .done{
  background:var(--stone-soft);border-left:3px solid var(--orange);
  padding:12px 18px;margin:16px 0;font-size:15.5px;max-width:none;
}
.ws .done strong{color:var(--navy)}
.ws .excl{font-size:14px;color:var(--ink-soft)}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;margin-top:8px}
.terms-table{width:100%;border-collapse:collapse;font-size:15.5px}
.terms-table th,.terms-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.terms-table th{font-weight:600;color:var(--navy);width:32%;white-space:nowrap}
.weeks-table{width:100%;border-collapse:collapse;font-size:15.5px}
.weeks-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.weeks-table td:first-child{font-family:Charter,Georgia,serif;font-size:19px;font-weight:600;color:var(--orange);width:64px;white-space:nowrap}
.weeks-table td strong{color:var(--navy)}

/* ---------- Alternative maths (sprint page) ---------- */
.maths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:820px){.maths-grid{grid-template-columns:1fr}}
.maths-cell{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:26px 24px}
.maths-cell h3{font-size:16px;margin-bottom:6px}
.maths-cell .figure{font-family:Charter,Georgia,serif;font-size:28px;font-weight:600;color:var(--navy);margin-bottom:8px}
.maths-cell p{font-size:14.5px;color:var(--ink-soft)}
.maths-cell.this{background:var(--navy);border-color:var(--navy)}
.maths-cell.this h3{color:#fff}
.maths-cell.this .figure{color:#fff}
.maths-cell.this p{color:var(--stone);opacity:.9}
.maths-close{margin-top:24px;font-size:16px;color:var(--ink)}

/* ---------- Receipts / plain lists ---------- */
.tick-list{list-style:none;margin-top:8px}
.tick-list li{padding:9px 0 9px 28px;position:relative;font-size:15.5px;color:var(--ink);border-bottom:1px solid var(--rule);max-width:76ch}
.tick-list li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:6px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}

/* ---------- Investment panel (programme page) ---------- */
.invest{background:var(--stone-soft);border:1px solid var(--rule);border-radius:14px;padding:32px;margin-top:8px}
.invest .amount{font-family:Charter,Georgia,serif;font-size:34px;font-weight:700;color:var(--navy)}
.invest .list-price{font-size:14px;color:var(--ink-soft);margin:4px 0 16px}
.invest p{font-size:15.5px}
.invest p+p{margin-top:12px}

/* ---------- CTA - navy ---------- */
.cta{background:var(--navy);color:var(--stone)}
.cta h2{color:#fff}
.cta p{opacity:.9;margin-bottom:32px}

/* ---------- Sprint variants ---------- */
.variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:820px){.variant-grid{grid-template-columns:1fr}}
.variant{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:26px 24px}
.variant .tag{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.variant h3{font-size:18px;margin-bottom:8px}
.variant p{font-size:14.5px;color:var(--ink-soft)}
.invest .btn{margin-top:22px}

/* ---------- Brand illustrations (assets/illustrations/, navy risograph set) ---------- */
.illo{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 1px 3px rgba(27,31,62,.08)}
.illo-frame{margin:0}
.illo-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:52px;align-items:center;margin-top:8px}
@media(max-width:860px){
  .illo-split{grid-template-columns:1fr;gap:36px}
  .illo-split .illo-frame{max-width:480px}
}
.illo-close{max-width:860px;margin:72px auto 0}
.illo-close.illo-support{max-width:420px;margin:40px auto 8px}

/* ---------- System diagrams (assets/diagrams/, transparent SVGs) ----------
   A white panel keeps the diagrams' stone fills legible on any section colour
   (paper, stone, or white). On narrow screens the panel scrolls horizontally
   so labels stay readable rather than shrinking away. */
.diagram{
  margin:36px 0 8px;background:#fff;border:1px solid var(--rule);
  border-radius:14px;padding:26px 30px;box-shadow:0 1px 3px rgba(27,31,62,.08);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.diagram img{display:block;width:100%;height:auto}
.diagram figcaption{margin-top:16px;text-align:center;font-size:13.5px;color:var(--ink-soft)}
.diagram--tall img{max-width:600px;margin-left:auto;margin-right:auto}
@media(max-width:640px){
  .diagram img{min-width:600px}
  .diagram--tall img{min-width:0;max-width:420px}
}

/* ---------- Umbrella note (advisory hero back-reference to the home) ---------- */
.umbrella-note{
  font-size:14.5px;color:var(--stone);opacity:.82;max-width:60ch;
  margin:18px 0 30px;
}
.umbrella-note a{color:var(--stone);text-decoration:underline;text-underline-offset:3px}
.umbrella-note a:hover{color:#fff}

/* ---------- The three expressions (personal home) ----------
   One frame, three residents. Each block shares the same architecture; a single
   left accent rule distinguishes it - orange (native advisory), sage (Kinship),
   claret (Conquest placeholder). Nothing restyles the surrounding page. */
.expressions{display:flex;flex-direction:column;gap:26px;margin-top:8px}
.expr{
  position:relative;background:#fff;border:1px solid var(--rule);
  border-radius:16px;padding:38px 38px 38px 42px;overflow:hidden;
}
.expr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--orange)}
.expr--kinship::before{background:var(--sage)}
.expr--advisory::before{background:var(--orange)}
.expr--conquest::before{background:var(--bronze)}
.expr-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.expr-wordmark{letter-spacing:.06em;
  font-family:Charter,Georgia,serif;font-weight:600;font-size:32px;
  line-height:1;letter-spacing:.01em;color:var(--sage-deep);
}
.expr-wordmark--conquest{font-family:Marcellus,Charter,Georgia,serif;color:var(--onyx);font-weight:400;letter-spacing:.1em;text-transform:none;font-size:23px}
.expr-role{
  font-size:12.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:12px;
}
.expr h3{font-size:clamp(22px,3vw,28px);margin-bottom:14px;max-width:22ch;color:var(--navy)}
.expr--conquest h3{color:var(--onyx)}
.expr p{font-size:16px;color:var(--ink);max-width:62ch}
.expr p+p{margin-top:14px}
.expr-proof{
  color:var(--ink-soft);border-left:2px solid var(--sage);
  padding-left:16px;font-size:15.5px;
}
.expr-note{font-size:14px;color:var(--ink-soft);font-style:italic}
.expr-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.expr .btn{margin-top:0}
.expr--advisory .btn:not(.ghost){margin-top:0}
.expr--kinship .btn,.expr--conquest .btn{margin-top:24px}
.btn--onyx{background:var(--onyx);color:var(--bone)}
.btn--onyx:hover{background:#000}
.expr--conquest h3{display:inline-block;border-bottom:2px solid var(--amber);padding-bottom:2px}

/* Kinship flagship: two-column card - text beside a branded advert tile (see .ad-tile) */
.expr-grid{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:center}
@media(max-width:860px){.expr-grid{grid-template-columns:1fr;gap:32px}}
.expr-visual{margin:0;background:var(--sage-soft);border-radius:14px;padding:22px 22px 16px}
.expr--advisory .expr-visual{background:#f4e6db}
.expr--conquest .expr-visual{background:#efe8d6}
.expr-visual img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 6px 20px rgba(27,31,62,.14)}
.expr-visual figcaption{
  margin-top:12px;text-align:center;font-size:13px;font-weight:600;
  letter-spacing:0.04em;color:var(--sage-deep);
}
.expr--advisory .expr-visual figcaption{color:var(--orange-deep)}
.expr--conquest .expr-visual figcaption{color:var(--onyx)}

/* ---------- Branded advert tile (reusable poster block) ----------
   A designed advert that replaces a card's screenshot. The whole tile is one
   clickable link. To theme it for another brand, duplicate the .ad-tile--kinship
   rule below and change only the swap points: --tile-bg, --tile-fg, --tile-accent
   (colour), plus the wordmark, tagline and href in the markup. */
.ad-tile{
  --tile-bg:var(--sage);
  --tile-fg:var(--paper);
  --tile-accent:rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:290px;padding:32px 32px 26px;border-radius:14px;
  background:var(--tile-bg);color:var(--tile-fg);text-decoration:none;
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 6px 20px rgba(27,31,62,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ad-tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,31,62,.22)}
.ad-tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ad-tile__motif{
  position:absolute;right:-14%;bottom:-6%;width:82%;height:auto;
  z-index:-1;opacity:.32;color:var(--tile-accent);
}
.ad-tile__arc{stroke:currentColor;stroke-width:5;stroke-linecap:round}
.ad-tile__node{fill:currentColor}
/* Brand spot illustration (e.g. the Ship Something Real compass) */
.ad-tile__spot{
  position:absolute;right:-8%;bottom:-8%;width:56%;height:auto;
  z-index:-1;opacity:.9;pointer-events:none;
}
.ad-tile__wordmark{
  font-family:Charter,Georgia,serif;font-weight:600;font-size:34px;
  line-height:1;letter-spacing:.01em;
}
.ad-tile__tagline{
  margin-top:12px;font-size:19px;line-height:1.32;max-width:16ch;
  color:var(--tile-fg);opacity:.94;
}
.ad-tile__cta{
  margin-top:auto;padding-top:24px;font-size:14px;font-weight:600;
  letter-spacing:.04em;display:inline-flex;align-items:center;gap:7px;
}
.ad-tile__cta::after{content:"\2192";transition:transform .2s ease}
.ad-tile:hover .ad-tile__cta::after{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .ad-tile,.ad-tile__cta::after{transition:none}
  .ad-tile:hover{transform:none}
}
/* Kinship theme (swap point): brand green canvas, the real monogram as the spot */
.ad-tile--kinship{--tile-bg:var(--sage);--tile-fg:var(--paper);--tile-accent:rgba(255,255,255,.55)}
.ad-tile--kinship .ad-tile__cta{color:#fdc490}
.ad-tile__spot--mono{right:-6%;bottom:-10%;width:46%;opacity:1}
.ad-tile__wordmark--kinship{font-family:"Bodoni Moda",Didot,Charter,Georgia,serif;font-weight:500;letter-spacing:.04em}
/* Studio theme (swap point): navy canvas so the stone/orange spot reads as designed */
.ad-tile--studio{--tile-bg:var(--navy);--tile-fg:var(--stone);--tile-accent:var(--orange)}
.ad-tile--studio .ad-tile__cta{color:var(--orange)}
/* Conquest theme (swap point): onyx canvas, bone marks, bronze accent - matches theconquest.co.uk */
.ad-tile--conquest{--tile-bg:var(--onyx);--tile-fg:var(--bone);--tile-accent:var(--bronze)}
.ad-tile--conquest .ad-tile__cta{color:var(--bronze)}
.ad-tile__wordmark--conquest{font-family:Marcellus,Charter,Georgia,serif;font-weight:400;letter-spacing:.1em}

/* Pills */
.pill{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;padding:5px 12px;border-radius:999px;line-height:1;
}
.pill--live{background:var(--sage-soft);color:var(--sage-deep);border:1px solid var(--sage)}
.pill--soon{background:#2a2620;color:var(--bronze);border:1px solid var(--bronze)}

/* Sage button variant (Kinship CTA - the one place the resident accent drives a click) */
.btn--sage{background:var(--sage)}
.btn--sage:hover{background:var(--sage-deep)}

/* ---------- Ad landing pages (Website/go/*, single-goal, no nav) ----------
   Distraction-free pages for paid traffic (LinkedIn/Instagram). They reuse the
   site's hero, cta, illo, diagram and tick-list components; only the slim
   header, the centred hero, the reassurance line and the interim email form
   are new here. The brand wordmark is deliberately NOT a link - one page, one
   action, no exits. */
.lp-head{background:var(--navy);border-bottom:1px solid rgba(232,229,220,.15)}
.lp-head .wrap{display:flex;align-items:center;justify-content:center;height:64px}
.lp-head img{height:28px;display:block}
.lp-hero{text-align:center}
.lp-hero h1,.lp-hero .lede{margin-left:auto;margin-right:auto}
.lp-hero .actions{justify-content:center}
.lp-hero .proof{display:inline-block;text-align:left;margin-left:auto;margin-right:auto}
.lp-reassure{font-size:14px;color:var(--stone);opacity:.82;margin-top:22px}
.lp-lead{max-width:640px;margin:0 auto}
.lp-form{display:flex;gap:12px;flex-wrap:wrap;max-width:520px;margin:8px auto 0;justify-content:center}
.lp-form input[type=email]{
  flex:1 1 240px;min-width:0;font:inherit;font-size:16px;
  padding:13px 18px;border:1.5px solid var(--rule);border-radius:999px;
  background:#fff;color:var(--ink);
}
.lp-form input[type=email]::placeholder{color:var(--ink-soft)}
.lp-form input[type=email]:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--orange)}
.lp-form .btn{flex:none}
.lp-form-note{margin:16px auto 0;font-size:15px;font-weight:600}
.lp-hero .lp-form-note{color:var(--stone)}
.cta .lp-form-note{color:var(--stone)}
.lp-fineprint{margin:14px auto 0;font-size:13.5px;opacity:.85}
.lp-hero .lp-fineprint{color:var(--stone)}
.lp-foot{background:var(--navy-deep);color:var(--stone);padding:32px 0;font-size:13px}
.lp-foot .wrap{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.lp-foot img{height:22px;opacity:.9}
.lp-foot a{color:var(--stone);text-decoration:underline;text-underline-offset:3px;opacity:.8}
.lp-foot a:hover{opacity:1}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:var(--stone);padding:44px 0;font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer img{height:24px;opacity:.9}
footer a{color:var(--stone);text-decoration:none;opacity:.8}
footer a:hover{opacity:1}

/* ---------- Motion (progressive enhancement) ----------
   Everything below is either plain hover polish or gated on .js-enabled,
   which is added by the inline script on each page. Without JS the gate
   never applies and all content renders fully visible. */

/* Hover lift on cards */
.offer,.ws,.maths-cell,.variant,.record-cell,.invest{transition:transform .25s ease,box-shadow .25s ease}
.offer:hover,.ws:hover,.maths-cell:hover,.variant:hover,.invest:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(27,31,62,.12)}
.record-cell:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.logo-row img{transition:filter .25s ease,opacity .25s ease,transform .25s ease}
.logo-row img:hover{transform:translateY(-2px)}
.btn{transition:background .15s ease,transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(27,31,62,.18)}

/* Scroll reveal - fade and rise, staggered by the script */
.js-enabled .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js-enabled .reveal.in{opacity:1;transform:none}

/* Hero gentle load-in */
.js-enabled .hero .wrap>*,.js-enabled .page-hero .wrap>*{opacity:0;animation:hero-rise .65s cubic-bezier(.22,.61,.36,1) forwards}
.js-enabled .hero .wrap>*:nth-child(2),.js-enabled .page-hero .wrap>*:nth-child(2){animation-delay:.08s}
.js-enabled .hero .wrap>*:nth-child(3),.js-enabled .page-hero .wrap>*:nth-child(3){animation-delay:.16s}
.js-enabled .hero .wrap>*:nth-child(4),.js-enabled .page-hero .wrap>*:nth-child(4){animation-delay:.24s}
.js-enabled .hero .wrap>*:nth-child(5),.js-enabled .page-hero .wrap>*:nth-child(5){animation-delay:.32s}
@keyframes hero-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Reduced motion: disable everything */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-enabled .reveal{opacity:1;transform:none;transition:none}
  .js-enabled .hero .wrap>*,.js-enabled .page-hero .wrap>*{opacity:1;animation:none}
  .offer,.ws,.maths-cell,.variant,.record-cell,.invest,.logo-row img,.btn{transition:none}
  .offer:hover,.ws:hover,.maths-cell:hover,.variant:hover,.invest:hover,.record-cell:hover,.logo-row img:hover,.btn:hover{transform:none;box-shadow:none}
}