/* Metanoia one-page site template. Colours and font arrive as CSS variables from each client's
   site.json (see build.mjs), so this file carries layout only. Written from scratch for the first
   client (2026-10-22) to match that site's existing look; no code from the previous WordPress theme. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font);color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500;line-height:1.15}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem);text-align:center;margin-bottom:2rem}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}

.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font:inherit;font-size:1.05rem;padding:.55rem 1.4rem;border:0;border-radius:3px;cursor:pointer;transition:background .2s}
.btn:hover,.btn:focus-visible{background:var(--accent-dark)}
.btn--small{font-size:.85rem;padding:.4rem 1rem}

/* ---- header ---- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(240,240,240,.92);backdrop-filter:blur(6px)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo img{height:58px;width:auto}
.nav{display:flex;gap:0}
.nav a{text-decoration:none;font-size:1.1rem;padding:0 1rem;border-left:1px solid currentColor;line-height:1}
.nav a:first-child{border-left:0}
.nav a:hover{color:var(--accent)}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:2px;margin:5px 0;background:var(--ink)}

/* ---- hero ---- */
.hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:center;overflow:hidden;background:#e8e8e8;margin-top:-72px;padding-top:72px}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.hero__inner{position:relative}
.hero h1{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:1.6rem;max-width:12em}

/* ---- statement ---- */
.statement{margin-top:-3.2rem;position:relative;z-index:2}
.statement__box{background:var(--ink);color:#fff;text-align:center;font-size:clamp(1rem,1.5vw,1.2rem);padding:2.6rem clamp(1.2rem,6vw,6rem);margin:0 auto;max-width:980px}

/* ---- cards ---- */
.cards{padding:5rem 0 4rem;position:relative}
.cards::after{content:"";position:absolute;right:-90px;bottom:-60px;width:260px;height:260px;border-radius:50%;border:56px solid var(--accent);z-index:-1}
.cards__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:980px;margin:0 auto}
.card{background:var(--surface);padding:2rem 2.2rem}
.card__head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.card h3{font-size:1.35rem;font-weight:600}
.card__icon{width:64px;height:64px;flex:none}
.card p{margin:0;color:var(--ink);max-width:24em}

/* ---- people ---- */
.people{padding:1rem 0 0;background:linear-gradient(#fff 45%,var(--ink) 45%)}
.people__panel{background:var(--surface);max-width:980px;margin:0 auto;padding:2.5rem 1.5rem 3rem}
.people__grid{display:flex;justify-content:center;gap:clamp(1.5rem,6vw,5rem);flex-wrap:wrap}
.person{background:none;border:0;font:inherit;color:inherit;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:0}
.person__photo{position:relative;width:180px;height:180px;border-radius:50%;overflow:hidden;margin-bottom:.8rem}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person__hover{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.person:hover .person__hover,.person:focus-visible .person__hover{opacity:1}
.person__name{color:var(--accent);font-weight:600;font-size:1.2rem}
.person__meta{font-size:.95rem;color:var(--ink)}
.bio{max-width:640px;width:calc(100% - 32px);border:0;padding:2.5rem;border-radius:4px;color:var(--ink)}
.bio::backdrop{background:rgba(7,5,72,.6)}
.bio img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:1rem}
.bio h3{color:var(--accent);font-size:1.4rem;margin-bottom:.3rem}
.bio__close{position:absolute;top:.6rem;right:.9rem;background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--ink)}

/* ---- carousel ---- */
.carousel{background:var(--ink);color:#fff;padding:4rem 0 3rem}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2rem)/2);gap:2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.5rem}
.carousel__track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;background:#f2f2f2;color:var(--ink);padding:3.2rem 2rem 2rem;position:relative;font-size:.95rem}
.slide p{margin:.4rem 0}
.slide__tag{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-size:.75rem;line-height:1.2;padding:.45rem .8rem;text-align:center}
.slide:nth-child(even) .slide__tag{background:var(--secondary)}
.slide__logo{height:56px;width:auto;max-width:70%;object-fit:contain;margin-bottom:1rem}
.slide .btn{margin-top:1rem}
.carousel__dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.4rem}
.carousel__dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.5);cursor:pointer}
.carousel__dots button[aria-current="true"]{background:var(--accent)}

/* ---- contact ---- */
.contact{padding:4rem 0 5rem;background:linear-gradient(var(--ink) 20%,#fff 20%)}
.contact__panel{max-width:980px;margin:0 auto;background:linear-gradient(180deg,var(--accent) 0%,var(--ink) 100%);color:#fff;text-align:center;padding:3rem 1.5rem}
.contact__panel h2{margin-bottom:1rem}
.contact__panel a{color:#fff}
.contact form{max-width:440px;margin:1.6rem auto 0;display:grid;gap:.8rem;text-align:left}
.field span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.field input,.field textarea{width:100%;font:inherit;font-size:.95rem;padding:.6rem .8rem;border:0;border-radius:2px;color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:#555}
.contact .btn{justify-self:center;margin-top:.6rem}
.hp{position:absolute;left:-9999px}

.thanks{padding:8rem 0;text-align:center}
.thanks h1{font-size:2.4rem;margin-bottom:1rem}

/* ---- footer ---- */
.footer{background:var(--ink);color:#fff;padding:3rem 0}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.nav--footer a{font-size:.85rem}
.credit{font-size:.8rem;color:#c9c9d9;text-decoration:none}

/* ---- small screens ---- */
@media (max-width:820px){
  .menu-toggle{display:block}
  .nav:not(.nav--footer){position:absolute;top:72px;left:0;right:0;flex-direction:column;background:#f0f0f0;padding:.5rem 16px 1rem;display:none}
  .nav:not(.nav--footer) a{border:0;padding:.7rem 0}
  .topbar.open .nav{display:flex}
  .cards__grid{grid-template-columns:1fr}
  .carousel__track{grid-auto-columns:100%}
  .cards::after{display:none}
  .hero__bg{object-position:70% center;opacity:.55}
  .footer__inner{flex-direction:column;text-align:center}
  .nav--footer{flex-wrap:wrap;justify-content:center;row-gap:.6rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* =====================================================================================
   Opt-in additions (2026-10-29), modelled on Kidron's "HOME2" design. Nothing below matches
   markup the original section types produce, so sites that don't opt in look exactly as before.
   - .skin-bold (theme.skin = "bold"): dark header, pill buttons, uppercase nav, footer meta line.
   - .tone--dark / --light / --accent (section "tone"): full-width alternating backgrounds.
   - .sec + layouts: hero "split", cards "tiles", people "cards", carousel "grid", contact "plain",
     and the new types strip / text / quote / notice.
   ===================================================================================== */
:root{--on-dark:#f0dce8;--on-dark-muted:#d4a0bc;--on-dark-label:#f0b8d0;--dark-card:color-mix(in srgb,var(--ink) 80%,var(--accent) 20%);--line:color-mix(in srgb,var(--accent) 25%,transparent)}

/* ---- bold skin: header, buttons, footer ---- */
.skin-bold{line-height:1.7;color:var(--ink)}
.skin-bold .topbar{background:color-mix(in srgb,var(--ink) 97%,transparent);border-bottom:.5px solid var(--line)}
.skin-bold .logo img{height:40px}
.skin-bold .topbar .nav a{border:0;color:var(--on-dark-muted);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:0 1rem}
.skin-bold .topbar .nav a:hover{color:#fff}
.skin-bold .topbar__inner{gap:1.5rem}
.skin-bold .topbar .nav{margin-left:auto}
.skin-bold .menu-toggle span{background:var(--on-dark-muted)}
.skin-bold .btn{border-radius:99px;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 2rem}
.skin-bold .btn:hover{background:var(--accent-dark)}
.btn--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff}
.btn--ghost:hover{border-color:#fff;background:transparent}
.header-cta.btn{font-size:.7rem;font-weight:700;letter-spacing:.12em;padding:.6rem 1.5rem;white-space:nowrap}
.skin-bold .footer{background:var(--ink);padding:1.75rem 0}
.skin-bold .footer .logo img{height:32px}
.skin-bold .nav--footer{display:none}
.footer__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;font-size:.8rem;color:var(--on-dark)}
.footer__meta a{color:var(--on-dark);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:600}
.footer__meta a:hover{color:var(--on-dark-label)}

/* ---- shared section scaffolding ---- */
.sec{padding:6rem 0;position:relative;overflow:hidden}
.sec h2,.textsec h2,.quote h2{text-align:left;font-size:clamp(1.5rem,2.6vw,2.4rem);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin-bottom:1.25rem;max-width:660px}
.sec h2 em,.textsec h2 em,.hero-split h1 em,.tile h3 em,.aside-card h3 em{font-style:normal;color:var(--accent)}
.eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 1.1rem;font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.sec__head>.eyebrow::after,.textsec>.wrap>.eyebrow::after{content:"";flex:0 0 28px;height:1.5px;background:currentColor}
.sec__intro{font-size:1.05rem;line-height:1.82;max-width:560px;margin:0 0 1rem}
.sec__intro--lead{font-weight:600;font-size:1rem}
.sec__outro{margin:2.25rem 0 0;font-style:italic;font-weight:500;max-width:560px}

/* tones: full-bleed backgrounds and the text colours that go with them */
.tone--dark{background:var(--ink);color:#fff}
.tone--dark p,.tone--dark li{color:var(--on-dark)}
.tone--dark .eyebrow{color:var(--on-dark-label)}
.tone--dark h2 em,.tone--dark h1 em{color:var(--on-dark-label)}
.tone--dark .sec__outro{color:var(--on-dark-label)}
.tone--light{background:var(--surface);color:var(--ink)}
.tone--light p,.tone--light li{color:color-mix(in srgb,var(--ink) 85%,var(--accent) 15%)}
.tone--light .sec__intro{color:var(--muted)}
.tone--accent{background:var(--accent);color:#fff}
.tone--accent p,.tone--accent .eyebrow{color:#fff}

/* ---- hero, split: text panel left, photo right ---- */
.hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:min(94vh,860px);background:var(--ink);color:#fff}
.hero-split__text{display:flex;flex-direction:column;justify-content:flex-end;padding:5rem 3.5rem 5rem max(16px,calc((100vw - 1180px)/2));position:relative}
.hero-split__text::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--accent),transparent)}
.hero-split__eyebrow{display:flex;align-items:center;gap:.6rem;margin:0 0 1.75rem;font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-label)}
.hero-split__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(1.5)}}
.hero-split h1{font-size:clamp(2rem,4vw,3.1rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;margin-bottom:1.4rem;color:#fff}
.hero-split p{color:#e8c8d8;max-width:500px;line-height:1.82;margin:0 0 2.5rem}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}
.hero-split .hero-split__tagline{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--on-dark-muted) 60%,transparent);margin:0}
.hero-split__media{position:relative;overflow:hidden}
.hero-split__media img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* ---- strip: band of short labelled items ---- */
.strip{padding:1.75rem 0;background:var(--accent);color:#fff}
.strip__inner{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.strip__item{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem;padding:0 .5rem;border-left:1px solid rgba(255,255,255,.25)}
.strip__item:first-child{border-left:0}
.strip__item strong{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.strip__item span{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.9)}

/* ---- text: two columns ---- */
.textsec__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:4.5rem;align-items:start}
.textsec p{font-size:1.05rem;line-height:1.82;margin:0 0 1.1rem}
.textsec__lead{font-weight:600;border-left:3px solid var(--accent);padding-left:1rem}
.textsec__quote{font-weight:700;font-style:italic;color:var(--accent)!important}
.regions{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2rem}
.region{display:flex;flex-direction:column;gap:.15rem;padding-top:.75rem;border-top:2px solid var(--accent)}
.region strong{font-size:1.6rem;font-weight:800;color:var(--accent);line-height:1}
.region span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.bullets{list-style:none;margin:0;padding:0}
.bullets li{display:flex;gap:1rem;padding:1rem 0;border-bottom:.5px solid var(--line);line-height:1.75}
.bullets li:first-child{border-top:.5px solid var(--line)}
.bullets li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:.5rem}
.aside-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:1.75rem;margin-bottom:1rem;transition:transform .3s,border-color .3s,box-shadow .3s}
.aside-card:hover{transform:translateX(6px);border-color:var(--accent);box-shadow:0 4px 24px color-mix(in srgb,var(--accent) 10%,transparent)}
.aside-card .eyebrow{margin-bottom:.5rem}
.aside-card h3{font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
.aside-card p{font-size:1rem;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:2.5rem}
.stat{background:var(--dark-card);padding:2rem 1.75rem;display:flex;flex-direction:column;gap:.6rem}
.stat strong{font-size:1.4rem;font-weight:700;color:var(--on-dark-label)}
.stat span{font-size:.8rem;line-height:1.6;color:var(--on-dark-muted)}
.tone--light .stat{background:#fff}.tone--light .stat strong{color:var(--accent)}.tone--light .stat span{color:var(--muted)}

/* ---- tiles (cards layout) ---- */
.tiles__grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:3rem}
.tiles__grid--4{grid-template-columns:repeat(4,1fr)}.tiles__grid--3{grid-template-columns:repeat(3,1fr)}.tiles__grid--2{grid-template-columns:repeat(2,1fr)}
.tile{background:#fff;padding:2.25rem 1.75rem;border-left:3px solid transparent;transition:background .25s,border-color .25s}
.tile__num{font-size:.8rem;font-weight:700;letter-spacing:.16em;margin:0 0 1rem;color:var(--accent)}
.tile h3{font-size:1.15rem;font-weight:700;line-height:1.35;margin-bottom:.85rem}
.tile p{font-size:.95rem;line-height:1.78;margin:0}
.tone--dark .tile{background:var(--dark-card)}
.tone--dark .tile:hover{border-left-color:var(--accent);background:color-mix(in srgb,var(--dark-card) 88%,#fff 12%)}
.tone--dark .tile__num{color:var(--on-dark-label)}
.tone--dark .tile h3{color:#fff}
/* on a light section the tiles separate into bordered cards with an accent top edge */
.tone--light .tiles__grid{background:none;border:0;gap:1.25rem;overflow:visible}
.tone--light .tile{border:1.5px solid var(--line);border-top:3px solid var(--accent);border-radius:10px}
.tone--light .tile:hover{box-shadow:0 8px 32px color-mix(in srgb,var(--accent) 10%,transparent)}
.tone--light .tile h3{font-size:1.3rem}

/* ---- people cards ---- */
.gp__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem}
.gp__card{background:var(--dark-card);border:1px solid var(--line);border-radius:12px;transition:transform .25s,border-color .25s}
.gp__card:hover{transform:translateY(-4px);border-color:var(--accent)}
.gp__top{display:flex;align-items:center;gap:1.5rem;padding:2rem 2rem 1.5rem;border-bottom:1px solid var(--line);margin:0 0 0}
.gp__photo{width:110px;height:110px;flex:none;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid var(--accent)}
.gp__card .eyebrow{color:var(--on-dark-label);margin-bottom:.5rem;letter-spacing:.12em;font-weight:600}
.gp__card h3{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:.3rem}
.gp__role{margin:0;font-size:.95rem;color:var(--on-dark-label)!important;font-weight:500}
.gp__bio{padding:1.5rem 2rem 2rem}
.gp__bio p{margin:0 0 .8rem;line-height:1.78}

/* ---- portfolio grid + filter ---- */
.pgrid__filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 2.25rem}
.chip{font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.06em;padding:.5rem 1.25rem;border-radius:99px;border:1.5px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);cursor:pointer;transition:background .2s}
.chip:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pgrid__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pcard{background:#fff;border:1.5px solid color-mix(in srgb,var(--accent) 15%,transparent);border-left:3px solid var(--accent);border-radius:10px;padding:1.75rem 1.5rem;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.pcard[hidden]{display:none}
.pcard:hover{box-shadow:0 8px 32px color-mix(in srgb,var(--accent) 12%,transparent);transform:translateY(-2px)}
.pcard .eyebrow{font-size:.72rem;letter-spacing:.14em;margin-bottom:.6rem}
.pcard__logo{height:40px;width:auto;max-width:70%;object-fit:contain;object-position:left;margin-bottom:.8rem}
.pcard h3{font-size:1.25rem;font-weight:600;margin-bottom:.3rem}
.pcard p.pcard__title{font-size:.95rem;color:var(--accent);font-weight:600;line-height:1.48;margin:0 0 .75rem}
.pcard__body{flex:1}.pcard__body p{font-size:.95rem;line-height:1.75;margin:0}
.pcard__foot{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid color-mix(in srgb,var(--accent) 12%,transparent);font-size:.8rem;color:#888;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.pcard__foot a{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-decoration:none;font-weight:700;white-space:nowrap}

/* ---- contact, plain ---- */
.contact-plain{text-align:center}
.contact-plain .sec__head{display:flex;flex-direction:column;align-items:center}
.contact-plain h2,.contact-plain .sec__intro{text-align:center;margin-inline:auto}
.contact-plain__email a{color:var(--on-dark);text-decoration:none;font-size:1rem}
.contact-plain form{max-width:440px;margin:2rem auto 0;display:grid;gap:.8rem;text-align:left}
.contact-plain .btn{justify-self:center;margin-top:.6rem}
.contact-plain .field input,.contact-plain .field textarea{border-radius:6px}

/* ---- quote band, notice ---- */
.quote{padding:3.75rem 0;text-align:center}
.quote h2{margin-inline:auto;text-align:center}
.quote__text{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:500;font-style:italic;line-height:1.5;max-width:720px;margin:0 auto}
.notice{padding:1.25rem 0;background:var(--ink);border-top:.5px solid var(--line)}
.notice p{font-size:.65rem;line-height:1.7;color:color-mix(in srgb,var(--on-dark-muted) 55%,transparent);max-width:1100px;margin:0 auto;text-align:center}

@media (max-width:1024px){
  .tiles__grid--4,.tiles__grid--3,.pgrid__grid{grid-template-columns:repeat(2,1fr)}
  .textsec__grid{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:820px){
  .skin-bold .nav:not(.nav--footer){background:color-mix(in srgb,var(--ink) 98%,#000)}
  .skin-bold .topbar .nav:not(.nav--footer) a{font-size:1rem;color:#fff;padding:1.1rem 0;border-bottom:1px solid var(--line)}
  .skin-bold .topbar .nav{margin-left:0}
  .header-cta.btn{margin-left:auto;font-size:.65rem;padding:.5rem .9rem}
  .hero-split{grid-template-columns:1fr}
  .hero-split__text{padding:3.5rem 20px}
  .hero-split__text::after{display:none}
  .hero-split__media{height:300px;order:2}
  .sec{padding:3.75rem 0}
  .strip__inner{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1rem}
  .strip__item{align-items:flex-start;text-align:left;border:0;padding:0}
  .tiles__grid--4,.tiles__grid--3,.tiles__grid--2,.pgrid__grid,.gp__grid,.stats{grid-template-columns:1fr}
  .gp__top{flex-direction:column;align-items:flex-start;padding:1.5rem 1.25rem 1.25rem}
  .gp__bio{padding:1.25rem}
  .footer__meta{flex-direction:column;align-items:center}
}
@media (max-width:480px){.header-cta.btn{display:none}}
@media (prefers-reduced-motion:reduce){.hero-split__eyebrow::before{animation:none}}
.contact-plain .eyebrow::after{display:none}

/* =====================================================================================
   v3 additions (2026-10-29), from Maria's call that day: "lighter", "more modern", "not too much".
   All opt-in: theme.skin ["bold","light"] · tone "white" · hero "decor" · theme.motion.
   ===================================================================================== */
/* 5 tiles: two wide on top, three below, so no tile sits alone in a row (was an orphan in a 4-col grid) */
.tiles__grid--5{grid-template-columns:repeat(6,1fr)}
.tiles__grid--5>.tile{grid-column:span 2}
.tiles__grid--5>.tile:nth-child(-n+2){grid-column:span 3}

/* light skin, layered on the bold skin: white header and hero, ink text, accent only as accent */
.skin-light{background:#fff}
.skin-light .topbar{background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.skin-light .topbar .nav a{color:color-mix(in srgb,var(--ink) 75%,transparent)}
.skin-light .topbar .nav a:hover{color:var(--accent)}
.skin-light .menu-toggle span{background:var(--ink)}
.skin-light h1,.skin-light h2,.skin-light h3{font-weight:500}
.skin-light .tile h3,.skin-light .aside-card h3,.skin-light .gp__card h3,.skin-light .pcard h3{font-weight:600}
.skin-light .footer{background:#fff;color:var(--ink);border-top:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.skin-light .footer__meta,.skin-light .footer__meta a{color:var(--muted)}
.skin-light .footer__meta a:hover{color:var(--accent)}
.skin-light .notice{background:#fff;border-top:1px solid color-mix(in srgb,var(--accent) 10%,transparent)}
.skin-light .notice p{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.skin-light .btn--ghost{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.skin-light .btn--ghost:hover{border-color:var(--ink)}
@media (max-width:820px){
  .skin-light .nav:not(.nav--footer){background:#fff}
  .skin-light .topbar .nav:not(.nav--footer) a{color:var(--ink);border-bottom-color:color-mix(in srgb,var(--accent) 15%,transparent)}
  .tiles__grid--5{grid-template-columns:1fr}
  .tiles__grid--5>.tile,.tiles__grid--5>.tile:nth-child(-n+2){grid-column:auto}
}

/* tone "white" and the light hero */
.tone--white{background:#fff;color:var(--ink)}
.tone--white p,.tone--white li{color:color-mix(in srgb,var(--ink) 82%,var(--accent) 18%)}
.tone--white .sec__intro{color:var(--muted)}
.tone--white .tile,.tone--white .pcard,.tone--white .aside-card{background:#fff}
.tone--white .tiles__grid{background:none;border:0;gap:1.25rem;overflow:visible}
.tone--white .tile{border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:14px}
.tone--white .tile:hover{border-color:var(--accent);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 8%,transparent)}
.tone--light .tile,.tone--light .pcard,.tone--light .aside-card{border-radius:14px}
.hero-split.tone--light,.hero-split.tone--white{background:linear-gradient(120deg,#fff 0%,var(--surface) 100%);color:var(--ink)}
.hero-split.tone--light h1,.hero-split.tone--white h1{color:var(--ink);font-weight:500}
.hero-split.tone--light h1 em,.hero-split.tone--white h1 em{color:var(--accent)}
.hero-split.tone--light p,.hero-split.tone--white p{color:var(--muted)}
.hero-split.tone--light .hero-split__eyebrow,.hero-split.tone--white .hero-split__eyebrow{color:var(--accent)}
.hero-split.tone--light .hero-split__tagline,.hero-split.tone--white .hero-split__tagline{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.hero-split.tone--light .hero-split__text::after,.hero-split.tone--white .hero-split__text::after{display:none}
/* the photo fades into the page instead of ending on a hard edge (hides the cut-out halo in the current
   duo photo; when Maria's original photo arrives, swap hero.image in site.json, nothing else) */
.hero-split.tone--light .hero-split__media img,.hero-split.tone--white .hero-split__media img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%);object-position:right center}
.hero-split{position:relative}
.hero-split__text,.hero-split__media{position:relative;z-index:1}

/* decor: three soft, slowly drifting colour fields behind the hero (CSS only; still without motion) */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.decor span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35}
.decor span:nth-child(1){width:420px;height:420px;left:-120px;top:-80px;background:color-mix(in srgb,var(--accent) 35%,#fff)}
.decor span:nth-child(2){width:300px;height:300px;left:30%;bottom:-120px;background:color-mix(in srgb,var(--accent) 20%,#fff)}
.decor span:nth-child(3){width:220px;height:220px;left:42%;top:12%;background:color-mix(in srgb,var(--secondary) 18%,#fff)}

/* motion (theme.motion): drifting decor, sections fade up once as they enter, typed eyebrow.
   All off under prefers-reduced-motion; without JS everything is simply visible. */
[data-motion] .decor span:nth-child(1){animation:drift1 22s ease-in-out infinite}
[data-motion] .decor span:nth-child(2){animation:drift2 26s ease-in-out infinite}
[data-motion] .decor span:nth-child(3){animation:drift1 30s ease-in-out infinite reverse}
@keyframes drift1{50%{transform:translate(40px,30px) scale(1.08)}}
@keyframes drift2{50%{transform:translate(-30px,-40px) scale(.94)}}
[data-motion].js .sec .wrap>*,[data-motion].js .strip__item{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
[data-motion].js .is-in .wrap>*,[data-motion].js .is-in .strip__item{opacity:1;transform:none}
[data-type].typing::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;background:currentColor;vertical-align:-2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){[data-motion] .decor span{animation:none}[data-motion].js .sec .wrap>*,[data-motion].js .strip__item{opacity:1;transform:none;transition:none}}
/* light versions of the parts that were dark-only in v2 */
.strip.tone--light,.strip.tone--white{background:var(--surface);color:var(--ink);border-block:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.strip.tone--white{background:#fff}
.strip.tone--light .strip__item,.strip.tone--white .strip__item{border-left-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.strip.tone--light .strip__item strong,.strip.tone--white .strip__item strong{color:var(--ink);font-weight:600}
.strip.tone--light .strip__item span,.strip.tone--white .strip__item span{color:var(--accent)}
.tone--light .gp__card,.tone--white .gp__card{background:#fff;border-color:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:14px}
.tone--light .gp__card h3,.tone--white .gp__card h3{color:var(--ink)}
.tone--light .gp__card .eyebrow,.tone--white .gp__card .eyebrow,.tone--light .gp__role,.tone--white .gp__role{color:var(--accent)!important}
.tone--light .sec__outro,.tone--white .sec__outro{color:var(--muted)}
.contact-plain.tone--light .contact-plain__email a,.contact-plain.tone--white .contact-plain__email a{color:var(--accent);font-weight:600}
.contact-plain.tone--light .field input,.contact-plain.tone--light .field textarea,.contact-plain.tone--white .field input,.contact-plain.tone--white .field textarea{border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);background:#fff}
.quote.tone--light .quote__text{color:var(--ink)}
.quote.tone--light{border-top:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.quote.tone--light .quote__text em,.quote__text strong{color:var(--accent)}
.textsec.tone--light .stat,.textsec.tone--white .stat{background:#fff}
.tone--white .stats{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.tone--white .stat strong,.tone--light .stat strong{color:var(--accent)}
.tone--white .stat span{color:var(--muted)}

/* =====================================================================================
   Style skins (2026-10-29), each opt-in via theme.skin, layered on ["bold","light"]:
   - skin-editorial: big light-weight headlines, mono labels, thin rules, flat cards, rectangular photo.
     Direction taken from editorial health-VC sites Maria likes (look only; no code or assets copied).
   - skin-airy: ultra-light lowercase display headings, a large statement paragraph, solid accent
     circles, black-and-white photos.
   ===================================================================================== */
/* ---- editorial ---- */
.skin-editorial{--radius:6px;letter-spacing:.005em}
.skin-editorial h1,.skin-editorial .hero-split h1{font-weight:300;letter-spacing:-.025em;line-height:1.05}
.skin-editorial .hero-split h1{font-size:clamp(2.6rem,5.4vw,5rem)}
.skin-editorial .sec h2,.skin-editorial .textsec h2{font-weight:300;font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.02em;line-height:1.1;max-width:780px}
.skin-editorial h2 em,.skin-editorial h1 em{font-style:normal}
.skin-editorial .eyebrow,.skin-editorial .hero-split__eyebrow{font-family:var(--font-label,var(--font));font-weight:400;letter-spacing:.06em;font-size:.72rem;color:var(--muted)}
.skin-editorial .sec__head>.eyebrow::after,.skin-editorial .textsec>.wrap>.eyebrow::after{display:none}
.skin-editorial .sec__head>.eyebrow::before,.skin-editorial .textsec>.wrap>.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.skin-editorial .btn{border-radius:var(--radius);text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:500;padding:.8rem 1.4rem}
.skin-editorial .header-cta.btn{font-size:.8rem;padding:.55rem 1rem;text-transform:none;letter-spacing:0}
.skin-editorial .topbar .nav a{text-transform:none;letter-spacing:0;font-size:.9rem}
.skin-editorial .sec{padding:7.5rem 0;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.skin-editorial .tone--white,.skin-editorial .tone--light{background:#fff}
.skin-editorial .tone--dark{background:var(--ink)}
.skin-editorial .tone--white .tiles__grid,.skin-editorial .tone--light .tiles__grid{gap:0;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.skin-editorial .tone--white .tile,.skin-editorial .tone--light .tile{border:0;border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);padding:2.25rem 2rem 2.25rem 0;background:none;box-shadow:none}
.skin-editorial .tile__num{font-family:var(--font-label,var(--font));font-weight:400;color:var(--accent)}
.skin-editorial .tile h3,.skin-editorial .pcard h3,.skin-editorial .gp__card h3,.skin-editorial .aside-card h3{font-weight:400;font-size:1.35rem;letter-spacing:-.01em}
.skin-editorial .aside-card,.skin-editorial .pcard,.skin-editorial .gp__card{border-radius:var(--radius);box-shadow:none;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.skin-editorial .pcard{border-left-width:1px}
.skin-editorial .aside-card:hover,.skin-editorial .pcard:hover{transform:none;border-color:var(--ink)}
.skin-editorial .textsec__lead{border-left:0;padding-left:0;font-size:1.5rem;font-weight:300;line-height:1.4}
.skin-editorial .region strong{font-weight:300;font-size:3rem;color:var(--ink)}
.skin-editorial .region{border-top:1px solid var(--ink)}
.skin-editorial .stats{border:0;border-radius:0;background:none;gap:2rem}
.skin-editorial .stat{background:none;border-top:1px solid currentColor;padding:1.5rem 0 0}
.skin-editorial .stat strong{font-size:2rem;font-weight:300;letter-spacing:-.02em}
.skin-editorial .chip{border-radius:var(--radius);font-weight:400;letter-spacing:0}
.skin-editorial .strip{padding:2.5rem 0}
.skin-editorial .strip__item strong{font-weight:400;font-size:1.25rem}
.skin-editorial .strip__item span{font-family:var(--font-label,var(--font));font-weight:400;letter-spacing:.04em;font-size:.7rem}
.skin-editorial .hero-split.tone--white{background:#fff;min-height:auto}
.skin-editorial .hero-split.tone--white .hero-split__text{padding-top:7rem;padding-bottom:5rem}
.skin-editorial .hero-split.tone--white .hero-split__media{padding:2rem max(16px,calc((100vw - 1180px)/2)) 2rem 0}
.skin-editorial .hero-split.tone--white .hero-split__media img{-webkit-mask-image:none;mask-image:none;border-radius:16px;filter:grayscale(1)}
.skin-editorial .quote__text{font-style:normal;font-weight:300;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.015em}
.skin-editorial .gp__photo{border-radius:var(--radius);border:0;filter:grayscale(1)}
.skin-editorial .decor{display:none}
@media (max-width:820px){.skin-editorial .hero-split.tone--white .hero-split__media{padding:0 16px 2rem;height:340px}.skin-editorial .sec{padding:4.5rem 0}}

/* ---- airy ---- */
.skin-airy h1,.skin-airy .hero-split h1{font-weight:200;letter-spacing:-.02em;line-height:1.02}
.skin-airy .hero-split h1{font-size:clamp(2.8rem,6vw,5.6rem)}
.skin-airy .hero-split h1 em{font-weight:600}
.skin-airy .sec h2,.skin-airy .textsec h2{font-weight:200;text-transform:lowercase;font-size:clamp(3rem,8vw,7rem);letter-spacing:-.035em;line-height:.95;margin-bottom:2rem;max-width:none}
.skin-airy .sec h2 em,.skin-airy .textsec h2 em{color:var(--accent);font-weight:200}
.skin-airy .eyebrow{font-weight:500;letter-spacing:.14em}
.skin-airy .sec__head>.eyebrow::after,.skin-airy .textsec>.wrap>.eyebrow::after{display:none}
.skin-airy .sec__head>.eyebrow::before,.skin-airy .textsec>.wrap>.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.skin-airy .topbar .nav a{text-transform:lowercase;letter-spacing:0;font-size:.95rem;font-weight:300}
.skin-airy .btn{text-transform:lowercase;letter-spacing:.02em;font-weight:400;font-size:.95rem}
.skin-airy .header-cta.btn{text-transform:lowercase;letter-spacing:0;font-weight:400;font-size:.85rem}
.skin-airy .tone--light{background:#fff}
.skin-airy .tone--white p,.skin-airy .tone--light p{font-weight:300}
.skin-airy .textsec__quote,.skin-airy .textsec__lead{font-size:clamp(1.4rem,2.6vw,2.2rem)!important;font-weight:200!important;line-height:1.35!important;border:0!important;padding:0!important;font-style:normal!important;color:var(--ink)!important}
.skin-airy .textsec__lead strong,.skin-airy .textsec__quote strong{font-weight:700}
.skin-airy .sec{padding:8rem 0}
.skin-airy .sec::before{content:"";position:absolute;width:clamp(180px,26vw,360px);aspect-ratio:1;border-radius:50%;background:var(--accent);opacity:.9;z-index:0;pointer-events:none}
.skin-airy .sec:nth-of-type(3n+1)::before{right:-8%;top:-6%}
.skin-airy .sec:nth-of-type(3n+2)::before{left:-10%;bottom:-12%;background:color-mix(in srgb,var(--accent) 18%,#fff)}
.skin-airy .sec:nth-of-type(3n)::before{display:none}
.skin-airy .sec>.wrap{position:relative;z-index:1}
.skin-airy .decor span{filter:none;opacity:1;border-radius:50%}
.skin-airy .decor span:nth-child(1){width:110px;height:110px;left:auto;right:46%;top:18%;background:var(--accent)}
.skin-airy .decor span:nth-child(2){width:46px;height:46px;left:8%;bottom:14%;background:var(--accent)}
.skin-airy .decor span:nth-child(3){width:260px;height:260px;left:-60px;top:-80px;background:color-mix(in srgb,var(--accent) 12%,#fff)}
.skin-airy .hero-split.tone--white,.skin-airy .hero-split.tone--light{background:#fff}
.skin-airy .hero-split__media img{filter:grayscale(1)}
.skin-airy .gp__photo,.skin-airy .pcard__logo{filter:grayscale(1)}
.skin-airy .tile,.skin-airy .pcard,.skin-airy .aside-card,.skin-airy .gp__card{border-radius:0!important;border:0!important;background:color-mix(in srgb,var(--ink) 4%,#fff)!important;box-shadow:none!important}
.skin-airy .tile h3,.skin-airy .pcard h3,.skin-airy .aside-card h3,.skin-airy .gp__card h3{font-weight:300;font-size:1.5rem;letter-spacing:-.01em}
.skin-airy .tile__num{font-size:2.6rem;font-weight:200;letter-spacing:-.02em;color:var(--accent)}
.skin-airy .tiles__grid{background:none!important;border:0!important;gap:1rem!important}
.skin-airy .pcard__foot a::after{content:" →"}
.skin-airy .chip{border:0;background:none;padding:.3rem .6rem;font-weight:300;color:var(--ink)}
.skin-airy .chip[aria-pressed="true"]{background:none;color:var(--accent);font-weight:600}
.skin-airy .chip[aria-pressed="true"]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:.35rem;vertical-align:1px}
.skin-airy .strip.tone--white{border:0}
.skin-airy .strip__item strong{font-weight:300;font-size:1.3rem}
.skin-airy .quote__text{font-style:normal;font-weight:200;font-size:clamp(1.8rem,4vw,3.4rem);text-transform:lowercase;letter-spacing:-.02em}
@media (max-width:820px){.skin-airy .sec{padding:4.5rem 0}.skin-airy .sec::before{width:140px}.skin-airy .decor span:nth-child(1){right:8%;top:6%;width:60px;height:60px}}
/* editorial + airy: stacked hero (headline first, then one wide photo), so a group photo is never
   cropped into a narrow column. Hero image object-position can be tuned per site via --hero-pos. */
.skin-editorial .hero-split,.skin-airy .hero-split{grid-template-columns:1fr;min-height:auto}
.skin-editorial .hero-split .hero-split__text,.skin-airy .hero-split .hero-split__text{padding:6.5rem max(16px,calc((100vw - 1180px)/2)) 3rem}
.skin-editorial .hero-split h1,.skin-airy .hero-split h1{max-width:15em}
.skin-editorial .hero-split p,.skin-airy .hero-split p{max-width:620px}
.skin-editorial .hero-split .hero-split__media,.skin-airy .hero-split .hero-split__media{padding:0 max(16px,calc((100vw - 1180px)/2)) 3.5rem;height:auto}
.skin-editorial .hero-split .hero-split__media img,.skin-airy .hero-split .hero-split__media img{height:clamp(300px,46vw,640px);object-position:var(--hero-pos,center 25%);border-radius:16px;-webkit-mask-image:none;mask-image:none}
.skin-airy .hero-split .hero-split__media img{border-radius:0}
@media (max-width:820px){.skin-editorial .hero-split .hero-split__media,.skin-airy .hero-split .hero-split__media{height:auto;padding-bottom:2rem}.skin-editorial .hero-split .hero-split__text,.skin-airy .hero-split .hero-split__text{padding-top:3.5rem}}
.person__photo img{object-position:center 18%}
.skin-editorial .hero-split.tone--white .hero-split__media{padding:0 max(16px,calc((100vw - 1180px)/2)) 3.5rem}
.skin-airy .decor span:nth-child(1){right:7%;top:10%;left:auto}
.skin-airy .btn,.skin-airy .header-cta.btn{text-transform:none}

/* =====================================================================================
   v7 investor features (2026-10-29), opt-in: filter counts, expandable portfolio cards,
   select/checkbox form fields, "compare" section (Fund I → Fund II), raise bar.
   ===================================================================================== */
.chip__n{display:inline-block;min-width:1.4em;margin-left:.25rem;padding:0 .35em;border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:.75em;font-weight:600;text-align:center}
.pcard__more summary{cursor:pointer;list-style:none;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--accent);margin-top:.25rem}
.pcard__more summary::-webkit-details-marker{display:none}
.pcard__more summary::after{content:" +";}
.pcard__more[open] summary::after{content:" –"}
.pcard__more[open] summary{margin-bottom:.6rem}
.field select{width:100%;font:inherit;font-size:.95rem;padding:.6rem .8rem;border-radius:6px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);background:#fff;color:var(--ink)}
.field--check{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;line-height:1.5;text-align:left}
.field--check em{font-style:normal;color:var(--muted)}
.field--check input{margin-top:.2rem;accent-color:var(--accent)}
.compare__grid{display:grid;grid-template-columns:1fr 120px 1fr;align-items:start;gap:1rem;margin-top:2.5rem}
.compare__col h3{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300;margin:0 0 1rem;letter-spacing:-.02em}
.compare__col h3 em{font-style:normal;color:var(--accent);font-weight:500}
.compare__arrow{position:relative;height:2px;margin-top:4.2rem;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.compare__arrow span{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(1)}
.compare__arrow::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:9px solid var(--accent)}
[data-motion].js .compare__arrow span{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .3s}
[data-motion].js .is-in .compare__arrow span{transform:scaleX(1)}
.raise-bar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,0);z-index:30;display:flex;align-items:center;gap:1.25rem;padding:.6rem .6rem .6rem 1.4rem;border-radius:99px;background:color-mix(in srgb,#fff 92%,transparent);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);box-shadow:0 10px 40px color-mix(in srgb,var(--ink) 12%,transparent);transition:opacity .35s,transform .35s;max-width:calc(100% - 32px)}
.raise-bar p{margin:0;font-size:.9rem;color:var(--ink)}
.raise-bar .btn{padding:.6rem 1.2rem;font-size:.85rem;white-space:nowrap}
.raise-bar.is-hiding{opacity:0;transform:translate(-50%,16px)}
@media (max-width:820px){.compare__grid{grid-template-columns:1fr}.compare__arrow{height:40px;width:2px;margin:0 0 0 1rem}.compare__arrow span{transform-origin:top}.compare__arrow::after{right:auto;left:-5px;top:auto;bottom:-4px;border:6px solid transparent;border-top:9px solid var(--accent)}[data-motion].js .compare__arrow span{transform:scaleY(0)}[data-motion].js .is-in .compare__arrow span{transform:scaleY(1)}.raise-bar{gap:.75rem;padding-left:1rem}.raise-bar p{font-size:.8rem}}
.ph{display:inline-block;padding:0 .45em;border-radius:6px;background:#FFF3BF;color:#6B4E00;font-size:.9em;font-weight:500;border:1px dashed #E0B400}
.faq__list{display:grid;gap:.75rem;margin-top:2rem;max-width:820px}
.faq__item{border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding:1rem 0}
.faq__item summary{cursor:pointer;list-style:none;font-size:1.15rem;font-weight:400;display:flex;justify-content:space-between;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--accent);font-weight:300;font-size:1.4rem;line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item div{padding-top:.75rem}
.strip__title{text-align:center;margin:0 0 1rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* highlighted words keep their own case in the airy skin, so names like "Fund II" survive the lowercase style */
.skin-airy h2 em{text-transform:none}
.field--check input{width:auto;flex:none}
.contact-plain .field--check{justify-content:flex-start}

/* =====================================================================================
   Signature moments (opt-in theme.signature → <body data-signature>; 2026-10-29). Three, on purpose:
   1. the hero photo opens out of a pink circle on load;
   2. one pink orb travels down the page with the scroll, linking the sections, and comes to rest
      behind the Fund II materials form (replaces the per-section circles, which were clipped at
      section edges and made the page read as separate blocks);
   3. section headings move from hairline to light weight as they enter.
   transform/opacity/clip-path/font-weight only; all static under prefers-reduced-motion.
   ===================================================================================== */
html:has(body[data-signature]){overflow-x:clip}
[data-signature] .sec{overflow:visible}
[data-signature] .sec::before,[data-signature] .decor{display:none}
[data-signature] main>section{position:relative;z-index:1}
[data-signature] .tone--white,[data-signature] .tone--light{background:transparent}
[data-signature] .strip.tone--white{background:transparent}
.orb{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--accent) 85%,#fff) 0%,var(--accent) 60%,color-mix(in srgb,var(--accent) 80%,#000) 100%);
  will-change:transform,opacity;transform:translate3d(-400px,-400px,0)}
/* text stays readable where the orb passes: content sits above it, and cards keep their own background */
[data-signature] .sec .wrap{position:relative;z-index:1}
/* 1. hero reveal */
[data-signature] .hero-split__media{position:relative}
[data-signature] .hero-split__media::before{content:"";position:absolute;left:50%;top:45%;width:min(36vw,420px);aspect-ratio:1;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%) scale(1);transition:transform 1.4s cubic-bezier(.2,.7,.1,1),opacity 1.4s;z-index:0}
[data-signature] .hero-split__media img{position:relative;z-index:1;clip-path:circle(0% at 50% 45%);transition:clip-path 1.6s cubic-bezier(.65,0,.25,1) .25s}
[data-signature].is-loaded .hero-split__media img{clip-path:circle(75% at 50% 45%)}
[data-signature].is-loaded .hero-split__media::before{transform:translate(-50%,-50%) scale(.2);opacity:0}
/* 3. heading weight */
[data-signature].js .sec h2,[data-signature].js .textsec h2{font-weight:100;letter-spacing:-.045em;transition:font-weight 1.4s cubic-bezier(.2,.7,.2,1),letter-spacing 1.4s cubic-bezier(.2,.7,.2,1)}
[data-signature].js .is-in h2{font-weight:300;letter-spacing:-.035em}
@media (max-width:820px){.orb{width:200px;height:200px;margin:-100px 0 0 -100px}}
@media (prefers-reduced-motion:reduce){
  [data-signature] .hero-split__media img{clip-path:none;transition:none}
  [data-signature] .hero-split__media::before{display:none}
  .orb{display:none}
  [data-signature].js .sec h2{transition:none;font-weight:300}
}
/* the orb paints behind all page content (negative z-index in the root stacking context) */
.orb{z-index:-1}
[data-signature] main>section{z-index:auto}

/* Hero dots, airy skin (30 Oct 2026, Krystof + Maria's call): the circles echo the lens in the Kidron logo.
   Same slow speed as before, but they wander a larger area (lava-lamp, not bouncing), and a fourth dot
   joins. Hero only; nothing moves with the scroll. The 4th span has no size outside this skin, so other
   skins look as before. Static under reduced motion. */
.skin-airy .decor span:nth-child(4){width:64px;height:64px;left:34%;top:58%;background:var(--accent);opacity:.85}
[data-motion].skin-airy .decor span:nth-child(1){animation:lava1 34s ease-in-out infinite}
[data-motion].skin-airy .decor span:nth-child(2){animation:lava2 40s ease-in-out infinite}
[data-motion].skin-airy .decor span:nth-child(3){animation:lava3 46s ease-in-out infinite}
[data-motion].skin-airy .decor span:nth-child(4){animation:lava2 38s ease-in-out infinite reverse}
@keyframes lava1{25%{transform:translate(-120px,60px) scale(1.06)}50%{transform:translate(-40px,150px) scale(.94)}75%{transform:translate(90px,70px) scale(1.04)}}
@keyframes lava2{25%{transform:translate(140px,-50px) scale(.95)}50%{transform:translate(220px,-120px) scale(1.08)}75%{transform:translate(80px,-160px) scale(.97)}}
@keyframes lava3{33%{transform:translate(120px,80px) scale(1.05)}66%{transform:translate(40px,160px) scale(.96)}}
@media (max-width:820px){.skin-airy .decor span:nth-child(4){width:40px;height:40px;left:70%;top:40%}
  @keyframes lava1{50%{transform:translate(-50px,60px)}}
  @keyframes lava2{50%{transform:translate(60px,-50px)}}}
@media (prefers-reduced-motion:reduce){[data-motion].skin-airy .decor span{animation:none}}
/* one arrow, not two: the link label already carries "↗" */
.skin-airy .pcard__foot a::after{content:none}

/* Partner cards, airy skin (3 Nov 2026, Maria's v9 feedback: "enlarge partner portraits and tighten the
   photograph/name/biography grouping, particularly on narrow screens"). The rule between name and biography
   is gone, and the spacing inside a person's block is now smaller than the spacing between the two people,
   so each portrait, name and biography read as one thing. */
.skin-airy .gp__grid{gap:clamp(2.5rem,5vw,4.5rem);margin-top:3rem}
.skin-airy .gp__card{background:none!important}
.skin-airy .gp__card:hover{transform:none}
.skin-airy .gp__top{gap:1.5rem;padding:0 0 1.1rem;border-bottom:0}
.skin-airy .gp__photo{width:clamp(150px,15vw,190px);height:clamp(150px,15vw,190px);border:0}
.skin-airy .gp__card .eyebrow{margin-bottom:.35rem}
.skin-airy .gp__card h3{margin-bottom:.2rem}
.skin-airy .gp__bio{padding:0}
@media (max-width:600px){
  .skin-airy .gp__top{flex-direction:column;align-items:flex-start;gap:1rem;padding:0 0 .9rem}
  /* A phone is the narrow case Maria named: the portrait becomes the largest thing in the block. */
  .skin-airy .gp__photo{width:min(68vw,260px);height:min(68vw,260px)}
}

/* Section treatments, airy skin (3 Nov 2026, Maria's v9 feedback: "differentiate portfolio, investment
   principles and partner sections through subtle spacing, borders or background treatments"; same palette).
   All three used one pale grey card. Now: portfolio = white cards with a hairline frame; principles = a soft
   tinted band with no card fill, only a rule above each item; partners = white, opened by a rule, no cards. */
.skin-airy .pgrid .pcard{background:#fff!important;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)!important}
.skin-airy .tiles .tile,.skin-airy .textsec .aside-card{background:none!important;padding-left:0;padding-right:1rem;border-top:1px solid color-mix(in srgb,var(--accent) 45%,transparent)!important}
.skin-airy .sec.gp>.wrap{border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);padding-top:clamp(2.5rem,5vw,4rem)}


/* Depth and section rhythm, airy skin (4 Nov 2026, Krystof: not sure the sections are distinct enough;
   alternating white and pink under one big heading "feels a bit too basic"). The sections now differ by
   scale and composition, not only by colour:
   - portfolio is the one stage: a dark band in the palette's ink, with the only giant heading on the page
     (Maria, 30 Oct: the portfolio is "the most important thing in a fund"). Set by tone: "dark" in site.json.
   - text sections and "where we invest" read as an editorial index: a smaller heading that stays in place
     on the left while the content scrolls past it on the right.
   - tinted bands (tone: "light") end in a soft arc that echoes the lens in the Kidron logo, in place of a
     ruled straight edge.
   Bubbles: see scripts.js. They replace the per-section circles, which the section edge cut flat. */
.skin-airy .sec::before{display:none}
.skin-airy .sec{overflow:visible}
.bubbles{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0}
.bubbles__layer{position:absolute;left:0;right:0;top:0;will-change:transform}
.bubbles span{position:absolute;display:block;border-radius:50%}
/* Alpha, not a fixed pink, so the same circle works on white, on the tint and on the dark band. Near layer at
   28%: body text keeps better than 4.5:1 across it (ink 8:1, muted 5:1 on white, measured by hand 4 Nov). */
.bubbles__layer--far span{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.bubbles__layer--near span{background:color-mix(in srgb,var(--accent) 28%,transparent)}
/* Content above the bubbles; section backgrounds below them. A section must not start its own stacking
   context, or its background would rise over the bubbles again. */
.skin-airy .sec>.wrap,.skin-airy main>section>.wrap,.skin-airy .quote>*,.skin-airy .notice>*,.skin-airy .hero-split__text,.skin-airy .hero-split__media{position:relative;z-index:2}
.skin-airy .footer{position:relative;z-index:3}

/* Arc edges. The airy skin set tone "light" to white (line 454), which left it no different from "white". */
.skin-airy .sec.tone--light{background:color-mix(in srgb,var(--accent) 5%,#fff)}
.skin-airy .sec.tone--light,.skin-airy .sec.pgrid.tone--dark{border-radius:50% 50% 0 0/clamp(26px,5vw,84px) clamp(26px,5vw,84px) 0 0}
.skin-airy .sec.tone--light{border-radius:50%/clamp(26px,5vw,84px)}
.skin-airy .strip.tone--dark{border-radius:0 0 50% 50%/0 0 clamp(26px,5vw,84px) clamp(26px,5vw,84px);padding-bottom:clamp(4rem,8vw,7rem)}

/* Portfolio stage */
.skin-airy .tone--dark{background:var(--ink)}
.skin-airy .pgrid.tone--dark{padding-bottom:4rem}
.skin-airy .pgrid.tone--dark .sec__intro{color:var(--on-dark)}
.skin-airy .pgrid.tone--dark .eyebrow::before{background:var(--on-dark-label)}
.skin-airy .pgrid.tone--dark h2,.skin-airy .pgrid.tone--dark h2 em{color:#fff}
.skin-airy .pgrid.tone--dark .chip{color:var(--on-dark)}
.skin-airy .pgrid.tone--dark .chip[aria-pressed="true"]{color:#fff}
.skin-airy .pgrid.tone--dark .chip[aria-pressed="true"]::before{background:var(--on-dark-label)}
.skin-airy .pgrid.tone--dark .pcard{border:0!important}
.skin-airy .pgrid.tone--dark .pcard p,.skin-airy .pgrid.tone--dark .pcard h3{color:var(--ink)}
.skin-airy .strip.tone--dark .strip__title,.skin-airy .strip.tone--dark .strip__item strong{color:#fff}
.skin-airy .strip.tone--dark .strip__item{border-left-color:rgba(255,255,255,.2)}

/* Editorial index: the smaller, sticky heading */
.skin-airy .textsec h2,.skin-airy .sec.tiles h2,.skin-airy .sec.gp h2{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.02}
@media (min-width:901px){
  .skin-airy .textsec__main{position:sticky;top:110px}
  .skin-airy .sec.tiles>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:4.5rem;align-items:start}
  .skin-airy .sec.tiles .sec__head{position:sticky;top:110px;margin:0}
  .skin-airy .sec.tiles .tiles__grid{grid-template-columns:1fr!important;margin:0}
}
/* "Where we invest" becomes a numbered list with rules, not three boxes */
.skin-airy .tiles .tile{display:grid;grid-template-columns:clamp(3.5rem,6vw,5.5rem) minmax(0,1fr);column-gap:1rem;padding:1.75rem 0}
.skin-airy .tiles .tile__num{grid-row:1/4;font-size:clamp(2rem,3.4vw,2.8rem)}
.skin-airy .tiles .tile>*:not(.tile__num){grid-column:2}
@media (max-width:900px){.skin-airy .textsec__grid{gap:1.75rem}}


/* For LPs, airy skin (5 Nov 2026). Maria on the call: the site must appeal to investors, "finance people and
   men", and be "safe"; pink stays. Krystof: "credibility and professionality to potential LPs". */
/* Original colour in the photographs, with their blue backgrounds (Maria: "the original blue instead of the
   gray"; she also noted blue reads as the colour of finance). Company logos stay grey. */
.skin-airy .hero-split .hero-split__media img,.skin-airy .gp__photo{filter:none}
/* Sentence case, as written in site.json. The skin's lowercase headings and nav read as playful, and printed
   the firm's own name as "why kidron". Krystof's brief, my call: not asked for by name. */
.skin-airy .sec h2,.skin-airy .textsec h2,.skin-airy .topbar .nav a,.skin-airy .quote__text{text-transform:none}
.skin-airy .sec.pgrid h2{font-size:clamp(3rem,6vw,5.2rem)}
/* Taken from Maria's Quiet section rules: small stationary markers beside the section labels, quieter
   numbers, hairlines around the co-investors. */
.skin-airy .sec__head>.eyebrow::before,.skin-airy .textsec>.wrap>.eyebrow::before{width:6px;height:6px;flex:0 0 6px}
.skin-airy .sec__head>.eyebrow,.skin-airy .textsec>.wrap>.eyebrow{gap:.7rem}
.skin-airy .tiles .tile__num{font-size:1.1rem;font-weight:400}
.skin-airy .tiles .tile{grid-template-columns:2.75rem minmax(0,1fr)}
/* The eyebrow types itself in. Reserve its line so the hero doesn't jump, and the fixed dots don't move, when
   the first letter appears. */
.skin-airy .hero-split__eyebrow{min-height:1.85em}
/* Near layer a little lighter: the depth stays, the page reads calmer. Maria liked the depth ("that's a nice
   effect") and objected to the floating dots only. */
.bubbles__layer--near span{background:color-mix(in srgb,var(--accent) 22%,transparent)}

/* Headline dot (scripts.js). The template's hero circles are off in this skin: 5 Nov, Krystof and Maria. The size
   and gap are those of a full stop in this typeface. It shrinks towards its bottom edge, on the text baseline
   (Krystof, 5 Nov), so it stays a full stop all the way down. */
.skin-airy .hero-split>.decor{display:none}
.hero-period{display:inline-block;width:.17em;height:.17em;margin-left:.06em;border-radius:50%;background:var(--accent);transform-origin:50% 100%;will-change:transform}