/**
 * Its Personal homepage v3 - conversion redesign.
 * Brand tokens (--ip-*, --fs-*, --font-*, etc.) come from style.css (loaded via wp_head).
 * Front-page only. One signature morph (the Turn); everything else is fast/static.
 */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body.front-page-morph{
  background:var(--ip-parchment);color:var(--ip-charcoal);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.front-page-morph img{max-width:100%;display:block}
body.front-page-morph a:not(.btn){color:inherit}
.wrap{max-width:1120px;margin:0 auto}
.eyebrow{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600}

/* ---------- Buttons / dual CTA ---------- */
.btn{display:inline-block;font-size:16px;font-weight:600;padding:16px 30px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;letter-spacing:-.005em;transition:background .25s var(--ease-quiet),color .25s var(--ease-quiet),border-color .25s var(--ease-quiet)}
.btn-primary{color:var(--ip-parchment)!important;background:var(--ip-charcoal);border:2px solid var(--ip-charcoal)}
.btn-primary:hover{background:var(--ip-terracotta);border-color:var(--ip-terracotta)}
.btn-ghost{color:var(--ip-charcoal);background:transparent;border:2px solid var(--ip-charcoal)}
.btn-ghost:hover{background:var(--ip-charcoal);color:var(--ip-parchment)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Nav: shared, see style.css ---------- */

/* ---------- 1. HERO (value-first, all visible on load) ---------- */
.hp-hero{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:128px 24px 64px;background:var(--ip-parchment)}
.hp-hero .eyebrow{color:var(--ip-sienna);margin-bottom:14px}
.hp-hero h1{font-weight:300;font-size:clamp(38px,6vw,72px);letter-spacing:var(--ls-tight);line-height:1.08;color:var(--ip-charcoal);max-width:900px;text-wrap:balance}
.hp-hero h1 .accent{font-weight:700}
.hp-hero-sub{margin-top:14px;font-size:var(--fs-lede);line-height:1.55;color:var(--ip-ash);max-width:620px;text-wrap:pretty}
.hp-hero .cta-row{margin-top:40px;justify-content:center}
.hp-hero-tag{margin-top:44px;font-family:var(--font-script);font-weight:400;font-size:clamp(28px,4vw,40px);color:var(--ip-terracotta);line-height:1}

/* ---------- 2. POINT OF VIEW (charcoal statement) ---------- */
.pov{background:var(--ip-charcoal);color:var(--ip-parchment);padding:96px 24px}
.pov .eyebrow{color:var(--ip-sienna);margin-bottom:24px}
.pov-statement{font-weight:300;letter-spacing:var(--ls-tight);line-height:var(--lh-display);font-size:clamp(30px,4.5vw,52px);color:var(--ip-parchment);max-width:920px;text-wrap:pretty;margin:0}
.pov-support{margin-top:24px;font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--ip-copper);max-width:760px;text-wrap:pretty}
.pov-cta{margin-top:28px}
.pov .btn-ghost{color:var(--ip-parchment)!important;border-color:var(--ip-parchment)}
.pov .btn-ghost:hover{background:var(--ip-parchment)!important;color:var(--ip-charcoal)!important}
@media(min-width:720px){.pov{padding:120px 32px}}

/* ---------- 3. WHO'S IN THE ROOM (credibility spine) ---------- */
.crew{background:var(--ip-linen);padding:96px 24px}
.crew .eyebrow{color:var(--ip-terracotta);margin-bottom:20px}
.crew-stat{font-weight:700;letter-spacing:var(--ls-snug);line-height:var(--lh-heading);font-size:var(--fs-h2);color:var(--ip-charcoal);max-width:800px;text-wrap:pretty}
.crew-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:56px;border-top:1px solid var(--ip-divider);padding-top:40px}
.crew-member h4{font-weight:700;font-size:var(--fs-h4);color:var(--ip-charcoal);letter-spacing:-.01em}
.crew-member .role{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ip-sienna);font-weight:600;margin:5px 0 10px}
.crew-member p{font-size:15px;line-height:var(--lh-body);color:var(--ip-ash);text-wrap:pretty}
.crew-cred{margin-top:40px;font-size:15px;color:var(--ip-charcoal)}
.crew-cred strong{font-weight:700}
@media(min-width:720px){.crew{padding:120px 32px}.crew-grid{grid-template-columns:repeat(4,1fr);gap:32px}}

/* ---------- 4. FIVE THINGS (fast grid, no sticky) ---------- */
.five{background:var(--ip-parchment);padding:96px 24px}
.five .eyebrow{color:var(--ip-terracotta);margin-bottom:20px}
.five-h{font-weight:700;letter-spacing:var(--ls-snug);line-height:var(--lh-heading);font-size:var(--fs-h2);color:var(--ip-charcoal);text-wrap:pretty}
.five-grid{display:grid;grid-template-columns:1fr;margin-top:48px}
.five-item{padding:28px 0;border-top:1px solid var(--ip-divider)}
.five-item .n{font-family:var(--font-script);font-size:30px;color:var(--ip-terracotta);line-height:1;margin-bottom:8px}
.five-item h3{font-weight:700;font-size:var(--fs-h3);letter-spacing:var(--ls-snug);color:var(--ip-charcoal);margin-bottom:10px;text-wrap:pretty}
.five-item p{font-size:16px;line-height:var(--lh-body);color:var(--ip-ash);text-wrap:pretty}
.five-salesx{display:block;width:168px;max-width:55%;height:auto;margin-top:16px}
@media(min-width:720px){.five{padding:120px 32px}.five-grid{grid-template-columns:1fr 1fr;column-gap:64px}.five-item{padding:32px 0}}

/* ---------- 5. WHY NOW (condensed reasons-why) ---------- */
.why{background:var(--ip-charcoal);color:var(--ip-parchment);padding:96px 24px}
.why .eyebrow{color:var(--ip-sienna);margin-bottom:20px}
.why-h{font-weight:300;letter-spacing:var(--ls-tight);line-height:var(--lh-display);font-size:clamp(28px,4vw,46px);color:var(--ip-parchment);max-width:900px;text-wrap:pretty;margin-bottom:56px}
.why-h .dim{color:var(--ip-ash)}
.why-grid{display:grid;grid-template-columns:1fr;gap:32px;border-top:1px solid var(--ip-divider-dark);padding-top:40px}
.why-col h4{font-weight:700;font-size:var(--fs-h4);color:var(--ip-parchment);margin-bottom:10px;letter-spacing:-.01em}
.why-col p{font-size:16px;line-height:var(--lh-body);color:var(--ip-copper);text-wrap:pretty}
@media(min-width:720px){.why{padding:120px 32px}.why-grid{grid-template-columns:repeat(3,1fr);gap:48px}}

/* ---------- 6. SELECTED WORK (honest tiles) ---------- */
.work{background:var(--ip-parchment);padding:96px 24px}
.work .eyebrow{color:var(--ip-terracotta);margin-bottom:20px}
.work-head{margin-bottom:48px}
.work-h{font-weight:700;letter-spacing:var(--ls-snug);line-height:var(--lh-heading);font-size:var(--fs-h2);color:var(--ip-charcoal)}
.work-note{margin-top:14px;font-size:15px;line-height:var(--lh-body);color:var(--ip-ash);max-width:600px;text-wrap:pretty}
.work-grid{display:grid;grid-template-columns:1fr;gap:16px}
.work-tile{display:flex;flex-direction:column;gap:12px;background:var(--ip-linen);border:1px solid var(--ip-divider);border-radius:var(--r-card);padding:32px 28px;text-decoration:none;transition:border-color .25s var(--ease-quiet),transform .25s var(--ease-quiet)}
.work-tile:hover{border-color:var(--ip-sienna);transform:translateY(-2px)}
.work-tile .figure{font-weight:300;font-size:clamp(28px,3vw,40px);letter-spacing:var(--ls-tight);line-height:1.05;color:var(--ip-terracotta)}
.work-tile .who{font-size:15px;font-weight:600;color:var(--ip-charcoal)}
.work-tile .desc{font-size:15px;line-height:var(--lh-body);color:var(--ip-ash);flex:1;text-wrap:pretty}
.work-tile .more{font-size:13px;font-weight:600;color:var(--ip-sienna)}
.work-alllink{display:inline-block;margin-top:32px;font-size:15px;font-weight:600;color:var(--ip-charcoal);text-decoration:none;border-bottom:2px solid var(--ip-terracotta);padding-bottom:2px}
.work-alllink:hover{color:var(--ip-terracotta)}
@media(min-width:720px){.work{padding:120px 32px}.work-grid{grid-template-columns:repeat(3,1fr);gap:24px}}

/* ---------- 7. THREE DOORS ---------- */
.doors{background:var(--ip-linen);padding:96px 24px}
.doors-head{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.doors .eyebrow{color:var(--ip-terracotta)}
.doors-h{font-weight:700;letter-spacing:var(--ls-snug);line-height:var(--lh-heading);font-size:var(--fs-h2);color:var(--ip-charcoal);text-wrap:pretty}
.doors-intro{font-size:16px;line-height:1.6;color:var(--ip-ash);max-width:420px;text-wrap:pretty}
.doors-focus{font-size:14px;color:var(--ip-sienna);font-weight:600;letter-spacing:.01em}
.doors-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
.door{background:var(--ip-parchment);border:1px solid var(--ip-divider);border-radius:var(--r-card);padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.door .door-tag{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ip-terracotta);font-weight:600}
.door h3{font-weight:700;font-size:var(--fs-h3);letter-spacing:var(--ls-snug);color:var(--ip-charcoal)}
.door p{font-size:16px;line-height:var(--lh-body);color:var(--ip-ash);flex:1;text-wrap:pretty}
.doors-cta-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:28px 32px;background:var(--ip-charcoal);color:var(--ip-parchment);text-decoration:none;border-radius:var(--r-card);transition:background .25s var(--ease-quiet)}
.doors-cta-bar:hover{background:#000}
.doors-cta-copy{font-size:clamp(17px,2vw,22px);font-weight:500;letter-spacing:-.005em;line-height:1.3;color:var(--ip-parchment);text-wrap:pretty}
.doors-cta-action{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;background:var(--ip-terracotta);color:var(--ip-parchment);padding:14px 24px;border-radius:var(--r-pill);white-space:nowrap;transition:background .25s var(--ease-quiet),color .25s var(--ease-quiet)}
.doors-cta-bar:hover .doors-cta-action{background:var(--ip-parchment);color:var(--ip-charcoal)}
.doors-cta-arrow{transition:transform .25s var(--ease-quiet)}
.doors-cta-bar:hover .doors-cta-arrow{transform:translateX(4px)}
@media(max-width:720px){.doors-cta-bar{flex-direction:column;align-items:stretch;text-align:center;padding:24px;gap:16px}.doors-cta-action{justify-content:center}}
@media(min-width:720px){.doors{padding:120px 32px}.doors-head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:48px}.doors-grid{grid-template-columns:repeat(3,1fr);gap:24px}.door{padding:40px 32px}.doors-cta-bar{margin-top:32px;padding:32px 40px}}

/* ---------- 8. THE TURN (the one signature morph) ---------- */
.turn-track{position:relative;height:130vh}
@media(min-width:720px){.turn-track{height:160vh}}
.turn-stage{position:sticky;top:0;height:100vh;background:var(--ip-charcoal);color:var(--ip-parchment);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:88px 24px 0;overflow:hidden}
.turn-pre{font-family:var(--font-script);font-size:var(--fs-script-md);color:var(--ip-sienna);line-height:1;margin-bottom:24px;opacity:calc(min(1, var(--q) * 2));transform:translateY(calc((1 - min(1, var(--q) * 2)) * 12px))}
.turn-mark{font-weight:800;letter-spacing:var(--ls-wordmark);line-height:var(--lh-wordmark);font-size:var(--fs-wordmark);color:var(--ip-parchment);transform:scaleY(calc(0.06 + min(1, var(--q) * 1.7) * 0.94));transform-origin:center;opacity:calc(min(1, var(--q) * 3));letter-spacing:calc(var(--ls-wordmark) + (1 - min(1, var(--q) * 1.7)) * .04em)}
.turn-tag{font-family:var(--font-script);font-weight:400;line-height:var(--lh-tagline);font-size:var(--fs-tagline);color:var(--ip-sienna);margin-top:14px;opacity:calc(max(0, var(--q) * 2 - 1));transform:translateY(calc((1 - max(0, var(--q) * 2 - 1)) * 12px))}

/* ---------- 9. CLOSING (dual CTA) ---------- */
.closing{background:var(--ip-terracotta);color:var(--ip-parchment);padding:120px 24px;text-align:center}
.closing-mark{font-weight:800;letter-spacing:var(--ls-wordmark);line-height:var(--lh-wordmark);font-size:var(--fs-wordmark);color:var(--ip-parchment)}
.closing-tag{font-family:var(--font-script);font-weight:400;line-height:var(--lh-tagline);font-size:var(--fs-tagline);color:var(--ip-parchment);margin-top:14px}
.closing-sub{margin-top:40px;font-size:var(--fs-lede);color:var(--ip-copper);max-width:520px;margin-left:auto;margin-right:auto;text-wrap:pretty}
.closing .cta-row{margin-top:32px;justify-content:center}
.closing .btn-primary{color:var(--ip-charcoal)!important;background:var(--ip-parchment)!important;border-color:var(--ip-parchment)}
.closing .btn-primary:hover{background:var(--ip-charcoal)!important;color:var(--ip-parchment)!important;border-color:var(--ip-charcoal)}
.closing .btn-ghost{color:var(--ip-parchment)!important;border-color:var(--ip-parchment)}
.closing .btn-ghost:hover{background:var(--ip-parchment)!important;color:var(--ip-terracotta)!important}
.closing-fineprint{margin-top:24px;font-size:13px;color:var(--ip-copper);letter-spacing:.04em}

/* ---------- Footer ---------- */
body.front-page-morph footer{background:var(--ip-charcoal);color:var(--ip-ash);padding:64px 24px 40px}
.foot-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px}
.foot-mark{font-weight:800;letter-spacing:-.04em;font-size:24px;color:var(--ip-parchment);margin-bottom:12px}
.foot-blurb{font-size:13px;line-height:1.55;max-width:320px}
.foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.foot-col h5{font-size:var(--fs-label);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--ip-sienna);margin-bottom:12px;font-weight:600}
.foot-col a{display:block;font-size:13px;color:var(--ip-ash);text-decoration:none;padding:5px 0}
.foot-col a:hover{color:var(--ip-parchment)}
.foot-base{max-width:1120px;margin:40px auto 0;padding-top:24px;border-top:1px solid var(--ip-divider-dark);display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--ip-ash)}
@media(min-width:720px){body.front-page-morph footer{padding:80px 32px 48px}.foot-inner{grid-template-columns:2fr 3fr;gap:64px}.foot-base{flex-direction:row;justify-content:space-between}}

/* ---------- Hero primary lockup (replaces type headline) ---------- */
.hp-hero-logo{display:block;width:min(94%,840px);height:auto;margin:0 auto}

/* ---------- Founder note (Paul) - light variant ---------- */
.fnote{background:var(--ip-linen);color:var(--ip-charcoal);padding:96px 24px}
.fnote-inner{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.fnote-pic{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block}
.fnote-media{display:flex;flex-direction:column;align-items:flex-start;gap:14px;flex-shrink:0}
.fnote-accolade{font-size:12px;line-height:1.45;color:var(--ip-ash);max-width:180px}
.fnote-accolade strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ip-sienna);font-weight:600;margin-bottom:3px}
.fnote-text{display:flex;flex-direction:column;gap:20px}
.fnote-quote{font-weight:300;font-size:clamp(22px,3vw,32px);line-height:1.3;letter-spacing:-.01em;color:var(--ip-charcoal);text-wrap:pretty}
.fnote-sig{font-family:var(--font-script);font-size:36px;color:var(--ip-sienna);line-height:1}
.fnote-meta{font-size:13px;color:var(--ip-ash);letter-spacing:.06em}
.fnote-cta{margin-top:8px}
@media(min-width:720px){.fnote{padding:120px 32px}.fnote-inner{flex-direction:row;align-items:flex-start;gap:48px}.fnote-pic{width:120px;height:120px}}

/* ---------- Services teaser (drives to /services/) ---------- */
.svc{background:var(--ip-charcoal);color:var(--ip-parchment);padding:96px 24px;text-align:center}
.svc-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.svc .eyebrow{color:var(--ip-sienna)}
.svc-h{font-weight:700;letter-spacing:var(--ls-snug);line-height:var(--lh-heading);font-size:var(--fs-h2);color:var(--ip-parchment)}
.svc-copy{font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--ip-copper);max-width:640px;text-wrap:pretty}
.svc .btn{margin-top:10px}
.svc .btn-primary{background:var(--ip-parchment)!important;color:var(--ip-charcoal)!important;border-color:var(--ip-parchment)}
.svc .btn-primary:hover{background:var(--ip-terracotta)!important;color:var(--ip-parchment)!important;border-color:var(--ip-terracotta)}
@media(min-width:720px){.svc{padding:120px 32px}}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-quiet),transform .7s var(--ease-quiet)}
.reveal.in{opacity:1;transform:none}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .turn-track{height:auto}
  .turn-stage{position:static;height:auto;padding:96px 24px}
  .turn-pre,.turn-mark,.turn-tag{transform:none;opacity:1}
  .reveal{opacity:1;transform:none}
}