/* =========================================================
   SITE TEMPLATE — layout, motion and interaction only.
   RE-SKIN HERE: every color and font in the page reads from this block.
   Placeholder values are neutral grays + system fonts on purpose.
   ========================================================= */
:root{
  /* ---- COLORS ---- */
  --c-bg:#2f4f3a;          /* page ground — Forest, "the green" */
  --c-bg-2:#1e3a2e;        /* cards, panels — Pine, the darkest */
  --c-bg-3:#3d6b4f;        /* image wells — Moss */
  --c-ink:#f4ecdd;         /* primary text — Paper */
  --c-ink-2:color-mix(in srgb,#f4ecdd 84%,#2f4f3a);       /* body text */
  --c-muted:color-mix(in srgb,#c9a24a 62%,#e3c980);       /* labels, small caps — Old Gold lifted toward Straw */
  --c-rule:color-mix(in srgb,var(--c-ink) 12%,transparent);
  --c-rule-2:color-mix(in srgb,var(--c-ink) 26%,transparent);
  --c-accent:color-mix(in srgb,#c9a227 66%,#e3c980);      /* buttons, highlights — Brass lifted toward Straw */
  --c-accent-2:#e3c980;    /* button hover — Straw */
  --c-on-accent:#1e3a2e;   /* text on accent — Pine */
  /* PF secondary tones (used sparingly: intro glow) */
  --c-forest:#2f4f3a;--c-sage:#3d6b4f;--c-sage-2:#c9a24a;--c-sage-3:#e3c980;--c-sand:#f8f1d7;
  /* ---- FONTS (add a <link> in the HTML head for web fonts) ---- */
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:"EB Garamond",Georgia,serif;
  --font-mono:"Cinzel",Georgia,serif;
  --display-case:none;      /* none | uppercase */
  --display-lh:.98;         /* condensed faces like ~.84, wide faces ~.95 */
  --display-track:-.015em;
  /* ---- LAYOUT + MOTION (usually leave alone) ---- */
  --sc:1;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --nav-h:96px;
  --gut:clamp(18px,4.4vw,68px);
  --maxw:1680px;
}

/* ---- hard reset of the old skin's page-level look ---- */
/* NO overflow on <html> or <body>. The body's overflow propagates to the
   viewport, so any value here (hidden OR clip) stops the page scrolling.
   Horizontal overflow is contained by the elements that cause it instead. */
body.tpl{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-body);font-size:calc(19px * var(--sc));line-height:1.55;-webkit-font-smoothing:antialiased;}
.tpl-wrap{overflow-x:clip;}
/* overflow alone holds the page still; a fixed body height would also collapse the document, and some engines then reset the scroll position */
body.tpl.intro-lock{overflow:hidden;}
body.tpl a{color:var(--c-ink);text-decoration:none;}
body.tpl a:hover{color:var(--c-accent);}
body.tpl ::selection{background:var(--c-accent);color:var(--c-bg);}
.tpl-wrap{position:relative;z-index:2;}
.tpl-foot-wordwrap{overflow:hidden;}
.tpl-foot-wordwrap .tpl-foot-word{line-height:.92;padding-bottom:.16em;}
.tpl-shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}

/* ---- type system ---- */
.tpl h1,.tpl h2,.tpl h3,.tpl-poster{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);line-height:var(--display-lh);letter-spacing:var(--display-track);margin:0;}
.tpl-poster-xl{font-size:clamp(62px,13.4vw,calc(212px * var(--sc)));}
.tpl-poster-l{font-size:clamp(46px,8.6vw,calc(132px * var(--sc)));}
.tpl-poster-m{font-size:clamp(34px,5.4vw,calc(78px * var(--sc)));}
.tpl-lab{font-family:var(--font-mono);font-size:calc(11px * var(--sc));font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--c-muted);}
.tpl-lede{font-size:clamp(16px,1.35vw,calc(20px * var(--sc)));line-height:1.6;color:var(--c-ink-2);max-width:54ch;text-wrap:pretty;}
.tpl-em{color:var(--c-accent);}
.tpl-out{-webkit-text-stroke:2px color-mix(in srgb,var(--c-ink) 62%,transparent);color:transparent;}

/* ---- section rhythm: generous, cinematic ---- */
.tpl-sec{position:relative;padding:clamp(72px,10vh,150px) 0 clamp(44px,6vh,96px);background:var(--c-bg);}
.tpl-sec-hd{display:flex;flex-wrap:wrap;gap:24px;align-items:end;border-bottom:1px solid var(--c-rule);padding-bottom:22px;margin-bottom:clamp(38px,6vw,76px);}
.tpl-sec-hd .tpl-lab{margin-bottom:18px;display:block;font-size:clamp(13px,1.1vw,calc(16px * var(--sc)));color:var(--c-ink-2);}
/* section headers: thin rule swapped for the engraved vine band, repeated in gold.
   Like the buttons, the band turns from etched vine (top) to brick (bottom) via --band. */
.tpl-sec-hd,.pf-fhd{--band:url(pf-ornament/vine-band.webp);border-bottom:0;position:relative;padding-bottom:calc(22px * var(--sc) + 16px * var(--sc));}
.tpl-sec-hd:not(.has-art){justify-content:center;text-align:center;}
.tpl-sec-hd:not(.has-art) > div{display:flex;flex-direction:column;align-items:center;}
#proof .tpl-proof-sub{margin-left:auto;margin-right:auto;text-align:center;}
#process .tpl-sec-hd{--band:url(pf-ornament/band-2.webp);}
#contact .tpl-sec-hd{--band:url(pf-ornament/band-3.webp);}
.tpl-sec-hd::after,.pf-fhd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(16px * var(--sc));background:var(--c-accent);-webkit-mask:var(--band) center center/auto 100% repeat-x;mask:var(--band) center center/auto 100% repeat-x;pointer-events:none;}
.tpl-sec-hd.has-art{flex-wrap:nowrap;justify-content:flex-start;gap:0;}
.tpl-sec-hd.has-art > div{min-width:0;position:relative;z-index:1;}
.pf-art{flex:none;position:relative;display:block;overflow:hidden;}
.tpl-sec-hd .pf-art{margin:0 0 calc(-22px * var(--sc)) clamp(-70px,-3vw,-14px);}
.pf-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform:translateY(102%);transform-origin:50% 100%;transition:transform 1.6s var(--ease-out);}
.pf-art.in img{transform:none;}
.pf-art-hand{width:clamp(84px,8.4vw,150px);aspect-ratio:620/1181;}
.pf-art-hand.in img{animation:pf-sway 8s 1.6s ease-in-out infinite;}
.pf-art-flask{width:clamp(96px,17vw,310px);aspect-ratio:760/1139;}
@media (max-width:640px){.pf-art-flask{width:84px;}}
.pf-art-flask::after{content:"";position:absolute;left:46%;top:31%;width:56%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,#f4ecdd 70%,transparent),transparent 64%);opacity:0;pointer-events:none;}
.pf-art-flask.in::after{animation:pf-glow 3.8s 1.5s ease-in-out infinite;}
@keyframes pf-sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes pf-glow{0%,100%{opacity:.12;transform:scale(.82)}50%{opacity:.55;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.pf-art img{transform:none;transition:none;animation:none !important;}.pf-art-flask::after{animation:none !important;opacity:.3;}}
.tpl-sec-n{font-family:var(--font-mono);font-size:calc(12px * var(--sc));letter-spacing:.2em;color:var(--c-muted);white-space:nowrap;}

/* ---- nav: three floating elements, no bar ---- */
.tpl-nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);pointer-events:none;}
.tpl-nav > *{pointer-events:auto;}
/* once the page scrolls, a ground in the colour of the section beneath (--nav-fade, set by the nav script in
   index.html) sits behind the floating nav, so content scrolling under it never collides with the logo. */
@property --nav-fade{syntax:'<color>';inherits:true;initial-value:#2f4f3a;}
.tpl-nav{transition:--nav-fade .45s var(--ease);}
/* the ground is solid for the whole header height, so the logo and buttons never sit over page content;
   only a short fade below the header softens the edge */
.tpl-nav::before{content:"";position:absolute;inset:0 0 auto;height:calc(100% + 22px);z-index:-1;pointer-events:none;background:linear-gradient(var(--nav-fade) 0%,var(--nav-fade) calc(100% - 22px),transparent);opacity:0;transition:opacity .4s var(--ease);}
body.nav-faded .tpl-nav::before{opacity:1;}
body:has(.tpl-menu.on) .tpl-nav::before{opacity:0;}
/* Parchment sections: the same components, re-inked for a light ground (Forest type, Ink body, deep gold labels) */
.pf-paper{--c-bg:#f8f1d7;--c-bg-2:#f4ecdd;--c-bg-3:color-mix(in srgb,#f4ecdd 82%,#c9a24a);--c-ink:#2f4f3a;--c-ink-2:color-mix(in srgb,#1c1a17 84%,#f8f1d7);--c-muted:color-mix(in srgb,#b8860b 55%,#1c1a17);--c-accent:#c9a227;--c-accent-2:#b8860b;--c-on-accent:#1e3a2e;background:var(--c-bg);color:var(--c-ink);}
body.nav-on-paper .tpl-mark,body.nav-on-paper .tpl-mark:hover{color:#2f4f3a;}
body.nav-on-paper .tpl-mark-logo{filter:none;}
body.nav-on-paper .tpl-pill{color:#2f4f3a;}
.tpl-mark{justify-self:center;display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:calc(30px * var(--sc));line-height:.9;letter-spacing:-.01em;text-transform:var(--display-case);color:var(--c-ink);text-shadow:0 2px 18px color-mix(in srgb,var(--c-bg) 55%,transparent);transition:color .25s;}
.tpl-mark i{width:calc(8px * var(--sc));height:calc(8px * var(--sc));border-radius:50%;background:var(--c-accent);display:block;flex:none;}
.tpl-mark-logo{align-self:center;height:calc(72px * var(--sc));width:auto;margin-right:8px;transition:opacity .2s;}
body.pf-intro-on .tpl-mark-logo{opacity:0;transition:none;}
.tpl-nav .tpl-mark{flex-direction:column;gap:calc(5px * var(--sc));}
.tpl-nav .tpl-mark-logo{height:calc(64px * var(--sc));margin:0;}
.tpl-mark-word{display:block;width:calc(118px * var(--sc));aspect-ratio:1018/154;background:currentColor;-webkit-mask:url(pf-art/wordmark.webp) center/contain no-repeat;mask:url(pf-art/wordmark.webp) center/contain no-repeat;transition:opacity .6s .45s;}
body.pf-intro-on .tpl-mark-word{opacity:0;transition:none;}
.tpl-mark:hover{color:var(--c-ink);}
.tpl-mark:hover i{background:var(--c-ink);}

.tpl-pill{justify-self:start;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--c-accent);border-radius:0;background:none;color:var(--c-ink);cursor:pointer;box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px color-mix(in srgb,var(--c-accent) 60%,transparent);transition:color .25s,background .25s,transform .3s var(--ease-out);}
.tpl-pill:hover{background:color-mix(in srgb,var(--c-accent) 12%,transparent);transform:translateY(-1px);}
.tpl-pill:active{transform:scale(.97);}
.tpl-pill span{font-family:var(--font-mono);font-weight:600;font-size:calc(12px * var(--sc));letter-spacing:.2em;text-transform:uppercase;min-width:5.2em;text-align:center;}

/* Book a Call: the header's one action, on every page and every width. Gold-filled so it reads as the primary action. */
.tpl-pill.tpl-navcta{justify-self:end;white-space:nowrap;background:var(--c-accent);color:var(--c-on-accent);box-shadow:none;outline:1px solid color-mix(in srgb,var(--c-on-accent) 60%,transparent);outline-offset:-5px;}
.tpl-pill.tpl-navcta:hover{background:var(--c-accent-2);color:var(--c-on-accent);}
.tpl-pill.tpl-navcta span{min-width:0;}
.tpl-pill.tpl-navcta:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px;}
body.nav-on-paper .tpl-pill.tpl-navcta{color:var(--c-on-accent);}

/* fullscreen menu */
.tpl-menu{position:fixed;inset:0;z-index:55;background:var(--c-bg);display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,4vh,52px);padding:calc(var(--nav-h) + 18px) var(--gut) clamp(22px,4vh,48px);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .42s var(--ease),visibility .42s;}
.tpl-menu.on{opacity:1;visibility:visible;}
.tpl-menu-links{display:flex;flex-direction:column;}
.tpl-menu-links a{display:flex;align-items:center;gap:clamp(12px,1.6vw,28px);padding:clamp(6px,1vh,13px) 0;border-bottom:1px solid var(--c-rule);opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease),transform .6s var(--ease-out),color .2s;}
.tpl-menu.on .tpl-menu-links a{opacity:1;transform:none;}
.tpl-menu-links a:hover{color:var(--c-accent);}
.tpl-menu-n{font-family:var(--font-mono);font-size:calc(11px * var(--sc));letter-spacing:.18em;color:var(--c-muted);flex:none;width:calc(34px * var(--sc));}
.tpl-menu-t{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:min(10vw,9.2vh,calc(124px * var(--sc)));line-height:.9;letter-spacing:-.015em;}
.tpl-menu-foot{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--c-rule);padding-top:clamp(18px,2.4vh,30px);}
.tpl-menu-foot > div{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.tpl-menu-foot a{font-size:calc(15px * var(--sc));color:var(--c-ink-2);}
.tpl-menu-foot a:hover{color:var(--c-accent);}

@media (max-width:720px){
  .tpl-pill{gap:8px;padding:9px 10px;}
  .tpl-mark{font-size:calc(22px * var(--sc));}
  .tpl-nav .tpl-mark-logo{height:46px;}
  .tpl-mark-word{width:88px;}
  :root{--nav-h:76px;}
}
/* narrow phones: menu, logo and Book a Call share about 290px, so the two pills tighten */
@media (max-width:420px){
  .tpl-nav{column-gap:8px;}
  .tpl-pill{padding:8px 8px;}
  .tpl-pill span{font-size:10.5px;letter-spacing:.1em;min-width:0;}
}

/* ---- buttons ---- */
.tpl-btn{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;flex:none;font-family:var(--font-mono);font-size:calc(12px * var(--sc));font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:17px 28px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:transform .35s var(--ease-out),background .3s,border-color .3s,color .3s;}
.tpl-btn .ar{transition:transform .35s var(--ease-out);}
.tpl-btn:hover .ar{transform:translateX(5px);}
.tpl-btn-fill{background:var(--c-accent);color:var(--c-on-accent) !important;}
.tpl-btn-fill:hover{background:var(--c-accent-2);transform:translateY(-3px);color:var(--c-on-accent) !important;}
.tpl-btn-line{border-color:var(--c-rule-2);color:var(--c-ink);}
.tpl-btn-line:hover{border-color:var(--c-ink);transform:translateY(-3px);}
/* clean gold frame: square ends (round only where the container is round), a fine inner rule, no ornaments */
.tpl-btn{border-radius:0;gap:10px;padding:calc(14px * var(--sc)) calc(20px * var(--sc));}
.tpl-btn-fill{border-color:var(--c-accent);outline:1px solid color-mix(in srgb,currentColor 60%,transparent);outline-offset:-5px;}
.tpl-cta-card.ink .tpl-btn-fill{border-color:var(--c-bg);}
.tpl-btn-line{border-color:var(--c-accent);box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px color-mix(in srgb,var(--c-accent) 45%,transparent);}
.tpl-btn-line:hover{border-color:var(--c-accent-2);background:color-mix(in srgb,var(--c-accent) 12%,transparent);}
.tpl-btn:active{transform:scale(.97);}
.tpl-btn:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px;}
.tpl-btn-fill:focus-visible{outline-color:var(--c-ink);}
.tpl-btn:disabled{opacity:.55;cursor:progress;transform:none;}
@media (prefers-reduced-motion:reduce){.tpl-btn,.tpl-btn .ar{transition:background .3s,border-color .3s,color .3s,opacity .3s;}.tpl-btn:hover,.tpl-btn:active,.tpl-btn:hover .ar{transform:none;}}
/* the mailing-list submit nests in the round email field, so it takes the field's round ends */
.tpl-loop-field .tpl-btn{border-radius:999px;}
/* never wider than the column: tighten, then drop the trailing scroll, then wrap */
.tpl-btn{max-width:100%;box-sizing:border-box;}
@media (max-width:520px){.tpl-btn{white-space:normal;text-align:left;}}

/* =======================  INTRO  ======================= */
#pf-intro{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;background:#132a20;}
#pf-intro.out{background:transparent;}
#pf-bg-a,#pf-bg-b{position:absolute;inset:0;}
#pf-bg-b{opacity:0;}
#pf-intro.out #pf-bg-a,#pf-intro.out #pf-bg-b{opacity:0 !important;transition:opacity .85s var(--ease);}
#pf-logo{position:relative;z-index:1;width:min(540px,76vw,72vh);filter:drop-shadow(0 18px 50px rgba(0,0,0,.45));transition:transform .85s cubic-bezier(.65,0,.35,1),filter .85s;}
#pf-intro.out #pf-logo{filter:none;transition:opacity .45s var(--ease);}
.pf-sun-fly{position:absolute;z-index:2;max-width:none;transform-origin:50% 50%;transition:transform .95s cubic-bezier(.65,0,.35,1);will-change:transform;}
.tpl-scrim{position:fixed;inset:0;z-index:80;background:radial-gradient(120% 90% at 12% 112%,color-mix(in srgb,var(--c-sage-2) 34%,transparent),transparent 58%),radial-gradient(90% 70% at 92% -8%,color-mix(in srgb,var(--c-sand) 20%,transparent),transparent 55%),radial-gradient(70% 60% at 60% 60%,color-mix(in srgb,var(--c-sage) 30%,transparent),transparent 70%),var(--c-bg);pointer-events:none;opacity:0;transition:opacity .9s var(--ease);}
.tpl-scrim.on{opacity:1;}

/* =======================  HERO  =======================
   No pin, no extra scroll length: the hero is exactly one viewport tall and
   leaves the moment you scroll. The photo drifts slower than the page and the
   type slightly faster, so every layer is moving together the whole way. */
.tpl-hero{position:relative;}
.tpl-hero-sticky{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + clamp(8px,3vh,48px)) 0 clamp(40px,7vh,96px);}
.tpl-hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 62% at 76% 46%,color-mix(in srgb,var(--c-accent) 20%,transparent),transparent 70%),radial-gradient(60% 50% at 8% 108%,color-mix(in srgb,var(--c-bg-3) 55%,transparent),transparent 65%);}
.tpl-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,72px);align-items:center;}
.tpl-hero-meta{display:flex;flex-wrap:wrap;gap:6px 24px;}
.tpl-hero-meta .tpl-lab{color:var(--c-muted);}
.tpl-hero-body{position:relative;z-index:2;min-width:0;container-type:inline-size;}
.tpl-hero-type{position:relative;pointer-events:none;margin-top:clamp(16px,2.4vh,28px);}
.tpl-hero-type h1{font-size:min(12.6cqw,15vh,calc(176px * var(--sc)));color:var(--c-ink);}
.tpl-hero-type .tpl-hl-line{white-space:nowrap;}
.tpl-hero-art{position:relative;display:grid;place-items:center;min-width:0;pointer-events:none;}
.tpl-hero-art img{display:block;width:min(112%,calc(100svh - var(--nav-h) - 96px),760px);max-width:none;height:auto;opacity:0;transform:scale(.9) rotate(-6deg);will-change:transform;}
.tpl-hero.type-in .tpl-hero-art img{opacity:1;transition:opacity 1.4s var(--ease) .15s;}
.tpl-hl-line{display:block;overflow:hidden;padding:.08em 0 .22em;margin:-.08em 0 -.22em;}
.tpl-hl-line > span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease-out);}
.tpl-hl-line:nth-child(2) > span{transition-delay:.09s;}
.tpl-hl-line:nth-child(3) > span{transition-delay:.18s;}
.tpl-hero.type-in .tpl-hl-line > span{transform:none;}
.tpl-hero-foot{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vh,26px);align-items:start;margin-top:clamp(14px,2.4vh,26px);}
.tpl-hero-foot .tpl-lede{max-width:46ch;margin:0;}
.tpl-hero-acts{display:flex;flex-wrap:wrap;gap:12px;justify-self:start;}
.tpl-hero .tpl-cue{display:none;}
.tpl-hero-side{justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:16px;pointer-events:auto;}
.tpl-hero:has(.tpl-hero-aside) .tpl-cue{display:none;}
.tpl-hero-aside{display:inline-flex;gap:8px;font-family:var(--font-mono);font-size:calc(11px * var(--sc));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2) !important;border-bottom:1px solid var(--c-rule-2);padding-bottom:4px;transition:color .25s,border-color .25s;}
.tpl-hero-aside:hover{color:var(--c-ink) !important;border-color:var(--c-ink);}
.tpl-hero-aside .ar{transition:transform .35s var(--ease-out);}
.tpl-hero-aside:hover .ar{transform:translateX(4px);}
.tpl-hero-fade{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease-out);transition-delay:.5s;}
.tpl-hero.type-in .tpl-hero-fade{opacity:1;transform:none;}
/* ---- hero v3: a left-aligned split over the two engraved trees ----
   The message and the two audience buttons lead from the top left, where the eye starts; "how it
   works" is a slim Pine panel beside them (below them under 1024px) whose three steps, each in a
   small engraved medallion, are joined by a thin gold line. The panel supports the message rather
   than competing with it, and nothing is centered poster-style. */
.pf-h2-hero{--md:clamp(56px,4.6vw,calc(64px * var(--sc)));--sg:clamp(14px,2.2vh,26px);}
.pf-h2-hero .tpl-hero-sticky{box-sizing:border-box;height:auto;min-height:100svh;justify-content:center;padding:calc(var(--nav-h) + clamp(6px,2vh,28px)) 0 clamp(24px,5vh,64px);}
.pf-h2-trees{position:absolute;inset:0;pointer-events:none;z-index:0;}
/* a soft dark wash on the left keeps the type crisp where it crosses the left tree */
.pf-h2-trees::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c-bg) 70%,transparent) 0%,color-mix(in srgb,var(--c-bg) 38%,transparent) 36%,transparent 62%);}
.pf-h2-tree{position:absolute;bottom:0;height:100%;transition:none;}
.pf-h2-tree b{display:block;width:100%;height:100%;background:var(--c-ink);opacity:.15;-webkit-mask:var(--m) center bottom/contain no-repeat;mask:var(--m) center bottom/contain no-repeat;clip-path:inset(100% 0 0 0);transition:clip-path 2.4s var(--ease-out) .1s,opacity 2s var(--ease);}
.tpl-hero.type-in .pf-h2-tree b{clip-path:inset(0 0 0 0);}
.pf-h2-tree-l{left:0;aspect-ratio:1200/1404;--m:url(pf-art/tree-apple.webp);transform:translate3d(calc(var(--hp,0) * -12vw),0,0);}
.pf-h2-tree-r{right:0;aspect-ratio:1000/1426;--m:url(pf-art/tree-bloom.webp);transform:translate3d(calc(var(--hp,0) * 12vw),0,0);}
.pf-h2{position:relative;z-index:2;width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,30vw,calc(470px * var(--sc)));gap:clamp(28px,3.5vw,96px);align-items:center;}
/* the message: label, headline, one sentence, the two audience buttons */
.pf-h2-copy{min-width:0;container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.pf-h2-lab{color:var(--c-accent);font-size:calc(13px * var(--sc));letter-spacing:.26em;text-wrap:balance;}
/* sized from the column so the first line ("AI Can Change Your Business.") always fits on one line
   and the second balances over two; the vh term keeps it on short screens */
.pf-h2-title{margin-top:clamp(10px,1.8vh,22px) !important;font-size:min(8.5cqw,10.4vh,calc(104px * var(--sc)));line-height:1.02;letter-spacing:-.02em;color:var(--c-ink);}
.pf-h2-title .tpl-hl-line,.pf-h2-title .tpl-hl-line > span{white-space:normal;text-wrap:balance;}
.pf-h2-lede{margin:clamp(12px,2.4vh,28px) 0 0;max-width:46ch;font-size:clamp(18px,1.45vw,calc(22px * var(--sc)));line-height:1.5;color:var(--c-ink-2);text-wrap:pretty;}
.pf-h2-acts{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,3.4vh,36px);justify-content:flex-start;justify-self:auto;pointer-events:auto;}
/* how it works: a slim Pine card with a fine gold frame */
.pf-h2-steps{list-style:none;margin:0;padding:clamp(18px,3vh,34px) clamp(20px,2vw,34px);justify-self:end;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--sg);background:color-mix(in srgb,var(--c-bg-2) 90%,transparent);border:1px solid color-mix(in srgb,var(--c-accent) 60%,transparent);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--c-bg-2) 90%,transparent),inset 0 0 0 5px color-mix(in srgb,var(--c-accent) 24%,transparent),0 28px 60px -34px rgba(0,0,0,.55);}
/* each step fades in after the headline has landed, one after another */
.pf-h2-step{position:relative;display:grid;grid-template-columns:var(--md) minmax(0,1fr);column-gap:clamp(14px,1.4vw,22px);row-gap:4px;align-items:start;opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform 1s var(--ease-out);transition-delay:calc(1s + var(--i) * .2s);}
.tpl-hero.type-in .pf-h2-step{opacity:1;transform:none;}
/* the gold line joining one medallion to the next draws down as its step arrives */
.pf-h2-step:not(:last-child)::after{content:"";position:absolute;left:calc(var(--md) / 2 - .5px);top:calc(var(--md) + 6px);bottom:calc(6px - var(--sg));width:1px;background:linear-gradient(var(--c-accent),color-mix(in srgb,var(--c-accent) 30%,transparent));transform:scaleY(0);transform-origin:50% 0;transition:transform .9s var(--ease-out);transition-delay:calc(1.3s + var(--i) * .2s);}
.tpl-hero.type-in .pf-h2-step::after{transform:none;}
/* round engraved medallion holding the step's art; the ring sits over the art */
.pf-h2-art{grid-row:1 / span 2;position:relative;width:var(--md);height:var(--md);box-sizing:border-box;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 36%,var(--c-bg-3),var(--c-bg-2) 74%);border:1px solid var(--c-accent);transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .5s var(--ease-out);}
.pf-h2-art::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 3px var(--c-bg-2),inset 0 0 0 4px color-mix(in srgb,var(--c-accent) 55%,transparent);pointer-events:none;}
.pf-h2-art img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%;transition:transform .6s var(--ease-out);}
.pf-h2-art img[src*="seeing-hand"]{object-position:50% 42%;}
.pf-h2-art img[src*="pf-handshake/"]{object-position:47% 62%;}
.pf-h2-art img[src*="pf-key/"]{object-position:50% 14%;}
.pf-h2-step-h{grid-column:2;display:flex;gap:.45em;padding-top:4px;line-height:1.2;font-family:var(--font-mono);font-size:calc(14px * var(--sc));font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent);}
.pf-h2-step-h b{display:inline;font-weight:500;color:var(--c-ink);}
.pf-h2-step p{grid-column:2;margin:0;font-size:clamp(16px,1.15vw,calc(18px * var(--sc)));line-height:1.45;color:var(--c-ink-2);text-wrap:pretty;}
/* mouse: the step's medallion comes into focus (the touch version is in the TOUCH block) */
@media (hover:hover){
  .pf-h2-step:hover .pf-h2-art{border-color:var(--c-accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 18%,transparent),0 10px 22px -8px rgba(0,0,0,.5);}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pf-h2-step:hover .pf-h2-art{transform:translateY(-3px);}
  .pf-h2-step:hover .pf-h2-art img{transform:scale(1.08);}
}
.pf-h2-hero .tpl-cue{display:none;}
/* phones and tablets: the message, then the buttons, then the panel as a compact list */
@media (max-width:1023px){
  .pf-h2-hero{--md:52px;--sg:20px;}
  .pf-h2-trees::after{display:none;}
  .pf-h2{grid-template-columns:minmax(0,1fr);gap:clamp(30px,6vw,48px);align-items:start;}
  .pf-h2-copy{container-type:normal;}
  .pf-h2-title{font-size:clamp(36px,10.4vw,calc(72px * var(--sc)));}
  .pf-h2-lede{font-size:clamp(18px,4.6vw,22px);}
  .pf-h2-steps{justify-self:start;max-width:560px;padding:20px clamp(16px,4vw,26px);}
  .pf-h2-step p{font-size:16px;}
  .pf-h2-tree{height:62%;}
  .pf-h2-tree b{opacity:.08;}
}
/* phones: the two buttons stack full width, the filled For Entrepreneurs on top */
@media (max-width:600px){
  .pf-h2-acts{flex-direction:column;align-items:stretch;width:100%;}
  .pf-h2-acts .tpl-btn{justify-content:center;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .pf-h2-step,.pf-h2-step::after{opacity:1;transform:none;transition:none;}
  .pf-h2-art,.pf-h2-art img{transition:border-color .4s var(--ease),box-shadow .4s var(--ease);}
  .pf-h2-tree b{clip-path:none;transition:none;}
}

.tpl-cue{position:absolute;right:var(--gut);bottom:16px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;opacity:0;}
.tpl-hero.type-in .tpl-cue{opacity:1;}
.tpl-cue{transition:opacity .25s linear;}
.tpl-cue span{font-family:var(--font-mono);font-size:calc(9.5px * var(--sc));letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb,var(--c-ink) 60%,transparent);}
.tpl-cue i{width:1px;height:26px;background:linear-gradient(180deg,color-mix(in srgb,var(--c-ink) 55%,transparent),transparent);}


@media (max-width:900px){
  .tpl-hero-grid{grid-template-columns:1fr;}
  .tpl-hero-art{order:-1;}
  .tpl-hero-art img{width:min(70%,360px);}
  .tpl-hero-type h1{font-size:min(11.4cqw,calc(110px * var(--sc)));}
  .tpl-hero-foot{grid-template-columns:1fr;align-items:start;}
  .tpl-hero-acts{justify-self:start;}
  .tpl-hero-side{justify-self:start;align-items:flex-start;}
}
@media (max-width:720px){
  .tpl-hero-meta{gap:6px 16px;}
  .hide-sm{display:none;}
  .tpl-cue{display:none;}
}

/* =======================  MARQUEE  ======================= */
.tpl-marq{position:relative;background:var(--c-bg);border-top:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule);padding:22px 0;overflow:hidden;display:flex;}
.tpl-marq-run{display:flex;flex:none;gap:clamp(26px,4vw,64px);padding-right:clamp(26px,4vw,64px);animation:tpl-marq 34s linear infinite;}
.tpl-marq span{font-family:var(--font-display);font-weight:700;text-transform:var(--display-case);font-size:clamp(22px,2.6vw,calc(38px * var(--sc)));letter-spacing:.01em;white-space:nowrap;color:var(--c-ink);opacity:.92;}
.tpl-marq span.g{-webkit-text-stroke:1.2px var(--c-accent);color:transparent;}
@keyframes tpl-marq{to{transform:translateX(-100%);}}
/* an off-screen marquee still burns frames — skip it when it isn't painted */
.tpl-marq{content-visibility:auto;contain-intrinsic-size:auto 84px;}
@media (prefers-reduced-motion:reduce){.tpl-marq-run{animation:none;}}

/* =======================  WORK — COVER STACK  =======================
   Each project is a near-full-bleed image panel. The deck is back — cards
   overlap and cover the one before — but nothing pins: the overlap is real
   negative margin, so every card keeps moving with the scroll while it slides. */
.tpl-sec-work{padding-bottom:clamp(40px,7vh,90px);}
.tpl-stack{position:relative;padding:0 var(--gut);display:flex;flex-direction:column;}
.tpl-panel{position:relative;height:min(82svh,860px);overflow:hidden;background:var(--c-bg-2);transform-origin:50% 0;will-change:transform;}
/* no shadow on the seam: a soft dark shadow cast up onto the photo above read
   as a grey bar across the card edge. The cover edge is clean and hard. */
.tpl-panel + .tpl-panel{margin-top:max(-22svh,-220px);}
.tpl-panel-media{position:absolute;inset:-10% 0;will-change:transform;}
.tpl-panel-media img,.tpl-panel-media image-slot{position:absolute;inset:0;width:100%;height:100%;}
.tpl-panel-media img{object-fit:cover;object-position:50% 52%;}
/* caption sits in the strip the NEXT card leaves exposed — the TOP of the card
   — so every project in the deck reads its name at rest, like file tabs */
.tpl-panel-cap{position:absolute;left:0;right:0;top:-10px;z-index:3;display:flex;flex-direction:column;gap:9px;padding:clamp(22px,3.4vw,54px);padding-top:calc(clamp(22px,3.4vw,54px) + 10px);background:linear-gradient(180deg,color-mix(in srgb,var(--c-bg) 96%,transparent) 0%,color-mix(in srgb,var(--c-bg) 90%,transparent) 26%,color-mix(in srgb,var(--c-bg) 62%,transparent) 52%,color-mix(in srgb,var(--c-bg) 20%,transparent) 78%,color-mix(in srgb,var(--c-bg) 0%,transparent) 100%);}
.tpl-panel-n{font-family:var(--font-mono);font-size:calc(11.5px * var(--sc));font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);}
.tpl-panel-n i{font-style:normal;opacity:.75;margin:0 2px;}
.tpl-panel-cap h3{font-size:clamp(32px,5.2vw,calc(84px * var(--sc)));line-height:.88;color:var(--c-ink);}
/* scope list is folded away until you hover the card */
.tpl-panel-rows{display:grid;gap:7px;overflow:hidden;max-height:0;opacity:0;transform:translateY(10px);transition:max-height .55s var(--ease-out),opacity .38s var(--ease),transform .55s var(--ease-out),margin-top .55s var(--ease-out);}
.tpl-panel-row{display:flex;gap:11px;font-family:var(--font-mono);font-size:calc(11.5px * var(--sc));letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--c-ink) 80%,transparent);}
.tpl-panel-row i{font-style:normal;color:var(--c-accent);}
/* hover: the card pulls up out of the deck and opens its scope */
.tpl-panel-dim{position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--c-bg);opacity:0;transition:opacity .3s var(--ease);}
.tpl-panel{cursor:pointer;transition:translate .55s var(--ease-out),box-shadow .55s var(--ease);}
.tpl-panel:hover{translate:0 -30px;z-index:6;box-shadow:0 3px 10px rgba(0,0,0,.7),0 18px 40px -10px rgba(0,0,0,.78),0 46px 90px -30px rgba(0,0,0,.85);}
.tpl-panel:hover .tpl-panel-rows{max-height:160px;opacity:1;transform:none;margin-top:4px;}
@media (hover:none){
  .tpl-panel{cursor:auto;}
  .tpl-panel-rows{max-height:160px;opacity:1;transform:none;}
}
@media (max-width:720px){
  .tpl-panel{height:min(72svh,620px);}
  .tpl-panel + .tpl-panel{margin-top:max(-15svh,-130px);}
  .tpl-panel-media img{object-position:50% 42%;}
  .tpl-panel-row{font-size:calc(10.5px * var(--sc));letter-spacing:.08em;}
}

.tpl-cta-card{min-width:0;}
.tpl-cta-card h3{font-size:clamp(32px,3.8vw,calc(64px * var(--sc)));overflow-wrap:break-word;}

/* =======================  THE AI IMPLEMENTATION GAP  =======================
   The title is the biggest line in the section; the flask sits beside it on desktop and,
   smaller, above it on phones. "One Solution." in the kicker turns gold as the flask lights. */
.pf-fhd{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 clamp(16px,3vw,48px);padding-bottom:calc(clamp(14px,2vw,26px) + 16px * var(--sc));margin-bottom:clamp(38px,6vw,76px);}
.pf-fhd-txt{min-width:0;}
.pf-fhd-lab{display:block;margin-bottom:clamp(12px,1.6vw,22px);font-size:clamp(13px,1.1vw,calc(16px * var(--sc)));color:var(--c-ink-2);}
.pf-fhd-sol{transition:color 1.4s var(--ease-out),text-shadow 1.8s var(--ease-out);}
.pf-fhd.lit .pf-fhd-sol{color:var(--c-accent);text-shadow:0 0 .6em color-mix(in srgb,var(--c-accent) 32%,transparent);}
.pf-gap-title{font-size:clamp(44px,8.2vw,calc(140px * var(--sc)));line-height:.95;text-wrap:balance;overflow-wrap:normal;hyphens:none;}
.pf-fhd-art{position:relative;display:block;}
.pf-fhd-art canvas{display:block;height:clamp(220px,26vw,440px);width:auto;aspect-ratio:680/700;margin:clamp(-30px,-2vw,-10px) clamp(-50px,-3vw,-10px);}
@media (max-width:720px){
  .pf-fhd{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .pf-fhd-art{order:-1;}
  .pf-fhd-art canvas{height:auto;width:min(52vw,240px);margin:0 0 4px;}
  /* "Implementation" is the longest word: sized so it always fits one line, never breaks mid-word */
  .pf-gap-title{font-size:min(13.4vw,64px);}
}
.tpl-prob-stat{display:flex;align-items:center;gap:clamp(18px,2.6vw,30px);flex-wrap:wrap;margin:clamp(4px,1vh,10px) 0 clamp(44px,6.4vw,78px);}
.tpl-prob-num{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(72px,9vw,calc(148px * var(--sc)));line-height:.78;color:var(--c-accent);flex:none;}
.tpl-prob-stat-txt{margin:0;font-size:clamp(19px,1.55vw,calc(24px * var(--sc)));line-height:1.5;color:var(--c-ink);max-width:44ch;text-wrap:pretty;}
.tpl-prob-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,84px);}
.tpl-prob-col h3{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(30px,3vw,calc(48px * var(--sc)));line-height:1;margin-bottom:clamp(18px,2.4vw,30px);}
.tpl-prob-rows{display:flex;flex-direction:column;}
.tpl-prob-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--c-rule);}
.tpl-prob-row:last-child{border-bottom:1px solid var(--c-rule);}
.tpl-prob-n{font-family:var(--font-mono);font-size:calc(13px * var(--sc));letter-spacing:.06em;color:var(--c-muted);padding-top:2px;}
.tpl-prob-row p{font-size:clamp(18px,1.4vw,calc(21px * var(--sc)));line-height:1.55;color:var(--c-ink-2);margin:0;text-wrap:pretty;}
.tpl-prob-row p b{color:var(--c-ink);font-weight:700;}
@media (max-width:860px){.tpl-prob-cols{grid-template-columns:1fr;gap:clamp(34px,8vw,54px);}}
@media (max-width:640px){.tpl-prob-stat{flex-direction:column;align-items:flex-start;gap:12px;}.tpl-prob-num{font-size:clamp(64px,22vw,calc(96px * var(--sc)));}}

/* =======================  PROOF  ======================= */
.tpl-proof-sub{font-size:clamp(20px,1.7vw,calc(26px * var(--sc)));color:var(--c-ink) !important;line-height:1.5;color:var(--c-ink-2);margin:14px 0 0;max-width:60ch;text-wrap:pretty;}
.tpl-proof-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);border-top:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule);padding:clamp(28px,4vw,46px) 0;margin:clamp(28px,4vw,48px) 0 clamp(36px,5vw,64px);}
.tpl-proof-stat-num{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(38px,4.4vw,calc(68px * var(--sc)));line-height:.92;margin-bottom:8px;color:var(--c-ink);}
.tpl-proof-stat-lab{font-size:clamp(16px,1.25vw,calc(19px * var(--sc)));line-height:1.35;color:var(--c-ink-2);}
.tpl-proof-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,5vw,70px);align-items:start;}
.tpl-proof-step{margin-bottom:clamp(26px,3.4vw,36px);}
.tpl-proof-step:last-child{margin-bottom:0;}
.tpl-proof-step-h{display:block;font-family:var(--font-mono);font-size:calc(11.5px * var(--sc));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent);margin-bottom:10px;}
.tpl-proof-step p{font-size:calc(17px * var(--sc));line-height:1.6;color:var(--c-ink-2);margin:0;max-width:56ch;text-wrap:pretty;}
.tpl-proof-media{position:relative;aspect-ratio:4/3;background:var(--c-bg-3);overflow:hidden;margin-bottom:clamp(18px,2.4vw,26px);}
.tpl-proof-media img,.tpl-proof-media image-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tpl-proof-quote{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(21px,2vw,calc(30px * var(--sc)));line-height:1.22;color:var(--c-ink);margin:0;text-wrap:pretty;}
/* key: the hand-and-key art, mirrored so the arm reaches in from the viewport's left edge (--bleed
   set in JS). Sized by the column, but never taller than the screen below the nav. */
.tpl-proof-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
.pf-proof-side{position:sticky;top:clamp(80px,12vh,140px);}
.pf-key{position:relative;margin-bottom:clamp(22px,2.8vw,34px);}
.pf-key canvas{display:block;max-width:none;height:auto;aspect-ratio:795/720;margin-left:calc(-1 * var(--bleed,0px));width:min(calc(100% + var(--bleed,0px)),calc((100svh - var(--nav-h) - 60px) * 795 / 720));transform:scaleX(-1);-webkit-tap-highlight-color:transparent;touch-action:pan-y;}
@media (max-width:860px){.pf-proof-side{position:static;}}
@media (max-width:860px){.tpl-proof-grid{grid-template-columns:1fr;}}
@media (max-width:720px){.tpl-proof-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Pine panels to break up the open green ground: The Gap's two columns and Owen's three steps */
.tpl-proof-step,.tpl-prob-col{--spot:color-mix(in srgb,var(--c-ink) 10%,transparent);position:relative;isolation:isolate;overflow:hidden;background:var(--c-bg-2);border:1px solid var(--c-rule);padding:clamp(22px,2.6vw,40px);transition:transform .5s var(--ease-out),border-color .4s var(--ease);}
.tpl-proof-step::before,.tpl-prob-col::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 62%);opacity:0;transition:opacity .4s var(--ease);}
@media (hover:hover){
  .tpl-proof-step:hover,.tpl-prob-col:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);border-color:var(--c-rule-2);}
  .tpl-proof-step:hover::before,.tpl-prob-col:hover::before{opacity:1;}
}
/* Pine panels (same treatment as the offer tiles) to break up the open green ground */
.pf-proof-steps{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);}
.tpl-proof-step,.tpl-proof-step:last-child{margin:0;}
/* proof tiles: copy fills the panel edge to edge, gold step headers glow */
.pf-proof-steps .tpl-proof-step{padding:clamp(26px,2.4vw,46px) clamp(26px,2.6vw,50px);}
.pf-proof-steps .tpl-proof-step p{max-width:none;font-size:clamp(18px,1.4vw,calc(22px * var(--sc)));line-height:1.6;}
.pf-proof-steps .tpl-proof-step-h{font-size:clamp(14px,1.1vw,calc(17px * var(--sc)));margin-bottom:clamp(12px,1vw,18px);}
.tpl-prob-col .tpl-prob-row:last-child{border-bottom:0;padding-bottom:0;}
#proof{overflow-x:clip;}

/* =======================  THE JOURNEY (how it works)  =======================
   Four steps, two by two on desktop, one column on phones; each panel fades up whole as it
   reaches the screen (.tpl-rv), so no line is ever wiped or cut mid-word. */
.tpl-jr-cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);counter-reset:none;}
.tpl-jr-col{position:relative;min-width:0;padding:clamp(24px,2.8vw,46px);border-top:2px solid var(--c-accent);background:color-mix(in srgb,var(--c-bg-2) 70%,transparent);}
.tpl-jr-n{display:block;font-family:var(--font-mono);font-size:calc(14px * var(--sc));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent);margin-bottom:14px;}
.tpl-jr-col h3{font-size:clamp(28px,2.8vw,calc(44px * var(--sc)));line-height:1.02;margin:0 0 14px;text-wrap:balance;}
.tpl-jr-col p{font-size:clamp(18px,1.4vw,calc(21px * var(--sc)));line-height:1.6;color:var(--c-ink-2);margin:0;text-wrap:pretty;}
@media (max-width:720px){.tpl-jr-cols{grid-template-columns:1fr;}}



/* =======================  IMPACT (gold flood)  =======================
   Shared by the homepage and Mission #impact; the motion is impact-reveal.js. Without
   .pf-imp-live (no script, failed script, reduced motion) this is the finished state:
   gold ground, portrait, quote and pillars all visible. */
.tpl-imp{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding:clamp(90px,14vh,180px) 0;background:var(--c-bg);}
.tpl-imp-bg{position:absolute;inset:0;background:var(--c-accent);}
.tpl-imp-in{position:relative;z-index:1;width:100%;color:var(--c-on-accent);}
.tpl-imp-hd{margin-bottom:clamp(30px,4.6vw,64px);}
.tpl-imp-hd .tpl-lab{display:block;margin-bottom:14px;color:var(--c-on-accent);font-size:clamp(13px,1.1vw,calc(16px * var(--sc)));}
.tpl-imp-t{margin:0;font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);letter-spacing:var(--display-track);font-size:clamp(28px,3.4vw,calc(52px * var(--sc)));line-height:1.04;color:var(--c-on-accent);text-wrap:balance;}
.tpl-imp-q{margin:0;font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(34px,5vw,calc(84px * var(--sc)));line-height:1.02;letter-spacing:var(--display-track);max-width:22ch;text-wrap:balance;color:var(--c-on-accent);}
/* Mission quotes John in full, so it sets smaller */
.tpl-imp-q.long{font-size:clamp(26px,3vw,calc(50px * var(--sc)));line-height:1.1;max-width:30ch;}
.tpl-imp-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;}
.tpl-imp-w > span{display:inline-block;}
.tpl-imp-cite{display:block;margin-top:clamp(24px,3vw,40px);font-family:var(--font-mono);font-style:normal;font-size:calc(12px * var(--sc));font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.tpl-imp-rule{height:1px;background:currentColor;margin:clamp(50px,7vw,100px) 0 clamp(26px,3vw,40px);transform-origin:0 50%;}
.tpl-imp-cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);}
.tpl-imp-cols h3{font-family:var(--font-body);font-weight:700;font-size:calc(18px * var(--sc));text-transform:none;letter-spacing:0;line-height:1.3;margin:0 0 10px;color:var(--c-on-accent);}
.tpl-imp-cols p{font-size:calc(15px * var(--sc));line-height:1.55;margin:0;color:color-mix(in srgb,var(--c-on-accent) 82%,var(--c-accent));text-wrap:pretty;}
.tpl-imp-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,72px);align-items:end;}
.tpl-imp-face{position:relative;margin:0 0 calc(-1 * clamp(50px,7vw,100px));width:clamp(324px,41vw,690px);aspect-ratio:845/1047;overflow:hidden;left:-40px;}
.tpl-imp-face img{display:block;width:100%;height:auto;}
/* animated state: only once impact-reveal.js has set the section up */
.tpl-imp.pf-imp-live .tpl-imp-bg{clip-path:circle(0px at 18% 30%);will-change:clip-path;}
.tpl-imp.pf-imp-live .tpl-imp-face{clip-path:circle(0px at -50% 0);will-change:clip-path;}
.tpl-imp.pf-imp-live .tpl-imp-w > span{transform:translateY(108%);transition:transform .75s var(--ease-out);}
.tpl-imp.pf-imp-live .tpl-imp-w.on > span{transform:none;}
.tpl-imp.pf-imp-live .tpl-imp-cite{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease-out);}
.tpl-imp.pf-imp-live .tpl-imp-rule{transform:scaleX(0);transition:transform 1.2s var(--ease-out) .1s;}
.tpl-imp.pf-imp-live .tpl-imp-cols > li{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .7s var(--ease-out);transition-delay:calc(.1s + var(--i,0) * 70ms);}
.tpl-imp.pf-imp-live .tpl-imp-cite.on,.tpl-imp.pf-imp-live .tpl-imp-cols > li.on{opacity:1;transform:none;}
.tpl-imp.pf-imp-live .tpl-imp-rule.on{transform:scaleX(1);}
/* stacked: the portrait sits above the quote with clear space below it */
@media (max-width:860px){.tpl-imp-top{grid-template-columns:1fr;}.tpl-imp-face{left:0;width:min(82%,420px);margin:0 auto clamp(20px,5vw,40px);order:-1;}}
@media (max-width:860px){.tpl-imp-cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.tpl-imp-cols{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.tpl-imp-bg,.tpl-imp-face{clip-path:none !important;}.tpl-imp-w > span{transform:none !important;}}

/* =======================  CTA  ======================= */
.tpl-cta{position:relative;background:var(--c-bg);border-top:1px solid var(--c-rule);padding:clamp(64px,9vh,120px) 0 clamp(72px,10vh,140px);}
.tpl-cta-hd{text-align:center;margin-bottom:clamp(30px,4.4vw,60px);}
.tpl-cta-hd .tpl-lab{display:block;margin-bottom:14px;}
.tpl-cta-hd h2{font-size:clamp(40px,7vw,calc(112px * var(--sc)));text-wrap:balance;}
.tpl-cta-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);}
.tpl-cta-cell{display:flex;}
.tpl-cta-card{--spot:color-mix(in srgb,var(--c-ink) 10%,transparent);position:relative;overflow:hidden;isolation:isolate;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;min-height:clamp(340px,30vw,460px);padding:clamp(30px,4vw,64px);border:1px solid var(--c-rule-2);color:var(--c-ink);transition:transform .6s var(--ease-out),border-color .4s var(--ease);will-change:transform;}
.tpl-cta-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 62%);opacity:0;transition:opacity .45s var(--ease);}
.tpl-cta-card:hover::before{opacity:1;}
.tpl-cta-card h2{color:inherit;}
.tpl-cta-card p{font-size:clamp(18px,1.45vw,calc(22px * var(--sc)));line-height:1.55;color:var(--c-ink-2);margin:0;max-width:44ch;text-wrap:pretty;}
.tpl-cta-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;}
.tpl-mag{transition:transform .45s var(--ease-out),background .3s,border-color .3s,color .3s !important;}
.tpl-cta-card.ink{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-bg);--spot:color-mix(in srgb,var(--c-bg) 12%,transparent);}
.tpl-cta-card.ink .tpl-lab{color:color-mix(in srgb,var(--c-bg) 70%,var(--c-ink));}
.tpl-cta-card.ink p{color:color-mix(in srgb,var(--c-bg) 82%,var(--c-ink));}
.tpl-cta-card.ink .tpl-btn-fill{background:var(--c-bg);color:var(--c-ink) !important;}
.tpl-cta-card.ink .tpl-btn-line{border-color:color-mix(in srgb,var(--c-bg) 35%,transparent);color:var(--c-bg) !important;}
.tpl-cta-card.ink .tpl-btn-line:hover{border-color:var(--c-bg);}
/* Stay in the Loop, at the top of the footer */
.tpl-loop{padding:clamp(28px,4vw,56px) 0 clamp(40px,5vw,70px);margin-bottom:clamp(40px,5vw,70px);border-bottom:1px solid var(--c-rule);}
.tpl-loop h2{font-size:clamp(30px,3.6vw,calc(54px * var(--sc)));}
.tpl-loop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:end;}
.tpl-loop-d{font-size:clamp(18px,1.4vw,calc(21px * var(--sc)));line-height:1.55;color:var(--c-ink-2);margin:18px 0 0;max-width:46ch;}
.tpl-loop-form{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.tpl-seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border:1px solid var(--c-rule-2);border-radius:100px;}
.tpl-seg-pill{position:absolute;top:4px;bottom:4px;left:4px;border-radius:100px;background:var(--c-accent);transition:transform .45s var(--ease-out);}
.tpl-seg button{position:relative;z-index:1;background:none;border:0;cursor:pointer;padding:10px 20px;font-family:var(--font-mono) !important;font-size:calc(12px * var(--sc));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);white-space:nowrap;transition:color .3s var(--ease);}
.tpl-seg button.on{color:var(--c-on-accent);}
.tpl-loop-swap{position:relative;width:100%;}
.tpl-loop-field{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;padding:5px;border:1px solid var(--c-rule-2);border-radius:100px;transition:border-color .3s var(--ease),opacity .45s var(--ease),transform .55s var(--ease-out);}
.tpl-loop-field:focus-within{border-color:var(--c-ink);}
.tpl-loop-field input{flex:1;min-width:0;background:none;border:0;outline:0;padding:0 18px;color:var(--c-ink);font-family:var(--font-body);font-size:calc(18px * var(--sc));}
.tpl-loop-field input::placeholder{color:var(--c-muted);}
.tpl-loop-field .tpl-btn{flex:none;padding:calc(11px * var(--sc)) calc(24px * var(--sc)) calc(11px * var(--sc)) calc(20px * var(--sc));}
.tpl-loop-done{position:absolute;left:0;right:0;top:50%;margin:0;display:flex;gap:12px;align-items:center;font-family:var(--font-display);font-weight:700;text-transform:var(--display-case);font-size:clamp(20px,2vw,calc(30px * var(--sc)));color:var(--c-ink);opacity:0;transform:translateY(-20%);pointer-events:none;transition:opacity .5s var(--ease) .15s,transform .7s var(--ease-out) .15s;}
.tpl-loop-done i{font-style:normal;color:var(--c-accent);}
.tpl-loop-err{margin:12px 0 0;font-family:var(--font-mono);font-size:calc(11px * var(--sc));letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent-2);}
.tpl-loop-form.sent .tpl-loop-field{opacity:0;transform:translateY(-14px);pointer-events:none;}
.tpl-loop-form.sent .tpl-loop-done{opacity:1;transform:translateY(-50%);}
@media (max-width:860px){.tpl-cta-cards,.tpl-loop-grid{grid-template-columns:1fr;}}
/* the role toggle needs ~470px: stack the loop block until the form column has room, and on phones let the toggle fill the width and wrap */
@media (max-width:1180px){.tpl-loop-grid{grid-template-columns:1fr;}}
@media (max-width:560px){.tpl-seg{display:grid;width:100%;box-sizing:border-box;grid-auto-columns:minmax(0,1fr);}body.tpl .tpl-seg button{padding:10px 6px;font-size:clamp(12px,3.9vw,16px);letter-spacing:.06em;white-space:normal;line-height:1.25;}}
@media (max-width:520px){.tpl-loop-field{flex-direction:column;border-radius:30px;align-items:stretch;}.tpl-loop-field input{padding:12px 20px;}body.tpl .tpl-loop-field .tpl-btn{justify-content:center;white-space:nowrap;font-size:clamp(12px,3.9vw,16px);}}

/* =======================  CLOSER + FOOTER  ======================= */
.tpl-closer{position:relative;background:var(--c-bg);text-align:center;padding:clamp(90px,15vh,190px) 0;border-top:1px solid var(--c-rule);}
.tpl-closer h2{font-size:clamp(48px,10vw,calc(168px * var(--sc)));margin-bottom:clamp(22px,3vw,40px);}
.tpl-foot{position:relative;background:var(--c-bg);border-top:1px solid var(--c-rule);padding:clamp(40px,5vw,70px) 0 26px;overflow:hidden;isolation:isolate;}
.tpl-foot > .tpl-shell{position:relative;z-index:1;}
/* lower page: plain ground, engraved accents only */
.tpl-cta-card::after{content:"";position:absolute;z-index:-1;top:calc(18px * var(--sc));right:calc(18px * var(--sc));width:calc(64px * var(--sc));height:calc(56px * var(--sc));background:currentColor;opacity:.35;-webkit-mask:url(pf-ornament/orn-4.webp) center/contain no-repeat;mask:url(pf-ornament/orn-4.webp) center/contain no-repeat;pointer-events:none;transition:opacity .4s var(--ease),transform .6s var(--ease-out);}
.tpl-cta-card:hover::after{opacity:.6;transform:rotate(-6deg) scale(1.06);}
.tpl-foot{border-top:0;}
.tpl-foot::before{content:"";position:absolute;left:0;right:0;top:0;z-index:1;height:calc(16px * var(--sc));background:var(--c-accent);-webkit-mask:url(pf-ornament/band-3.webp) center center/auto 100% repeat-x;mask:url(pf-ornament/band-3.webp) center center/auto 100% repeat-x;pointer-events:none;}
.pf-tree{position:absolute;bottom:0;z-index:0;height:100%;max-height:900px;background:var(--c-ink);opacity:.16;pointer-events:none;-webkit-mask:var(--m) center bottom/contain no-repeat;mask:var(--m) center bottom/contain no-repeat;clip-path:inset(calc((1 - var(--g,0)) * 100%) 0 0 0);transform:scale(calc(.94 + var(--g,0) * .06));}
.pf-tree-l{left:0;aspect-ratio:1200/1404;--m:url(pf-art/tree-apple.webp);transform-origin:0 100%;}
.pf-tree-r{right:0;aspect-ratio:1000/1426;--m:url(pf-art/tree-bloom.webp);transform-origin:100% 100%;}
.pf-word{width:100%;aspect-ratio:1018/154;background:color-mix(in srgb,var(--c-ink) 30%,transparent);-webkit-mask:url(pf-art/wordmark.webp) center/contain no-repeat;mask:url(pf-art/wordmark.webp) center/contain no-repeat;-webkit-text-stroke:0;clip-path:inset(0 calc((1 - min(1, var(--g,0) * 1.15)) * 100%) 0 0);}
.tpl-foot-wordwrap .pf-word{padding:0;margin-bottom:clamp(8px,1.4vw,20px);}
@media (max-width:860px){.pf-tree{height:52%;}}
.tpl-foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));gap:clamp(24px,4vw,60px);margin-bottom:clamp(40px,6vw,80px);}
.tpl-foot-col{display:flex;flex-direction:column;gap:11px;align-items:flex-start;}
.tpl-foot-col a,.tpl-foot-col span{font-size:calc(17px * var(--sc));color:var(--c-ink-2);}
.tpl-foot-blurb{font-family:var(--font-display);font-style:italic;font-size:calc(20px * var(--sc)) !important;}
.tpl-foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px;}
.tpl-foot-word{display:block;white-space:nowrap;font-family:var(--font-display);font-weight:700;text-transform:var(--display-case);font-size:clamp(34px,10vw,calc(180px * var(--sc)));line-height:.72;letter-spacing:-.012em;color:transparent;-webkit-text-stroke:1px var(--c-rule);user-select:none;text-align:center;}
.tpl-foot-fine{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;border-top:1px solid var(--c-rule);padding-top:20px;margin-top:clamp(18px,3vw,34px);}
.tpl-foot-fine span,.tpl-foot-fine a{font-family:var(--font-mono);font-size:calc(11.5px * var(--sc));letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);}
@media (max-width:1100px){.tpl-foot-grid{grid-template-columns:1fr 1fr;}.tpl-foot-col:first-child{grid-column:1/-1;}}
/* the "For Entrepreneurs" heading needs about 410px for two columns; stack them on narrower phones */
@media (max-width:410px){.tpl-foot-grid{grid-template-columns:1fr;}}
.tpl-foot-col .tpl-lab{white-space:normal;font-size:calc(12.5px * var(--sc));}
.tpl-foot-col .tpl-btn{font-size:calc(12px * var(--sc));margin-top:14px;}
/* ---- FOOTER SECTIONS: phones fold each link section into a dropdown (footer-sections.js).
   Without .pf-foot-live (no script, failed script) and wider than 760px the footer is the plain
   open columns: the links wrapper is layout-neutral and the toggle buttons stay hidden. */
.tpl-foot-links{display:contents;}
.tpl-foot-tog{display:none;}
@media (max-width:760px){
  .pf-foot-live .tpl-foot-grid{grid-template-columns:minmax(0,1fr);row-gap:0;}
  .pf-foot-live .tpl-foot-col:first-child{margin-bottom:clamp(22px,6vw,34px);}
  .pf-foot-live .tpl-foot-sec{display:block;border-top:1px solid var(--c-rule-2);}
  .pf-foot-live .tpl-foot-sec:last-child{border-bottom:1px solid var(--c-rule-2);}
  .pf-foot-live .tpl-foot-sec > .tpl-lab{display:none;}
  .pf-foot-live .tpl-foot-tog{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:12px 2px;margin:0;background:none;border:0;color:var(--c-ink);text-align:left;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;}
  .pf-foot-live .tpl-foot-tog .tpl-lab{color:var(--c-ink);}
  .pf-foot-live .tpl-foot-tog:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px;}
  /* chevron: two strokes that turn from pointing down to pointing up */
  .pf-foot-live .tpl-foot-tog i{flex:none;width:9px;height:9px;margin:0 6px -1px 0;border-right:1.5px solid var(--c-accent);border-bottom:1.5px solid var(--c-accent);transform:translateY(-3px) rotate(45deg);transition:transform .35s var(--ease-out);}
  .pf-foot-live .tpl-foot-sec.open .tpl-foot-tog i{transform:translateY(2px) rotate(-135deg);}
  .pf-foot-live .tpl-foot-links{display:flex;flex-direction:column;align-items:flex-start;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .4s var(--ease-out),visibility 0s linear .4s;}
  .pf-foot-live .tpl-foot-sec.open .tpl-foot-links{max-height:30rem;visibility:visible;transition:max-height .45s var(--ease-out),visibility 0s;}
  .pf-foot-live .tpl-foot-links a{display:block;padding:9px 2px;}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .pf-foot-live .tpl-foot-links,.pf-foot-live .tpl-foot-sec.open .tpl-foot-links,.pf-foot-live .tpl-foot-tog i{transition:none;}
}
.tpl-navcta{white-space:nowrap;}
.tpl-hero-meta .tpl-lab:first-child{white-space:nowrap;}

/* =======================  REVEALS  ======================= */
.tpl-rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease-out);}
.tpl-rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .tpl-rv{opacity:1 !important;transform:none !important;}
  .tpl-hl-line > span{transform:none !important;}
  .tpl-hero-fade{opacity:1 !important;transform:none !important;}
  .tpl *{scroll-behavior:auto !important;}
}

/* =========================================================
   LARGE DISPLAYS — 1700px and up
   Every clamp() above is already at its ceiling by ~1700px, so past that
   point the whole UI shrinks into the middle of the screen. --sc scales the
   type and spacing ceilings together and --maxw widens the column with it,
   so a 4K display gets a proportionally bigger page, not a bigger margin.
   ========================================================= */
@media (min-width:1700px){
  :root{--sc:1.14;--maxw:1820px;--gut:calc(68px * var(--sc));--nav-h:calc(78px * var(--sc));}
  body.tpl{font-size:calc(19px * var(--sc));}

  .tpl-poster-xl{font-size:calc(212px * var(--sc));}
  .tpl-poster-l{font-size:calc(132px * var(--sc));}
  .tpl-poster-m{font-size:calc(78px * var(--sc));}
  .tpl-lab{font-size:calc(11px * var(--sc));}
  .tpl-lede{font-size:calc(20px * var(--sc));}
  .tpl-sec{padding:calc(150px * var(--sc)) 0 calc(96px * var(--sc));}
  .tpl-sec-n{font-size:calc(12px * var(--sc));}
  .tpl-sec-hd{padding-bottom:calc(38px * var(--sc));margin-bottom:calc(76px * var(--sc));}

  .tpl-btn{font-size:calc(12px * var(--sc));padding:calc(17px * var(--sc)) calc(28px * var(--sc));}

  .tpl-marq{padding:calc(22px * var(--sc)) 0;}
  .tpl-marq span{font-size:calc(38px * var(--sc));}


  .tpl-panel-n,.tpl-panel-row{font-size:calc(11.5px * var(--sc));}
  .tpl-panel-cap h3{font-size:calc(84px * var(--sc));}
  .tpl-prob-num{font-size:calc(148px * var(--sc));}
  .tpl-prob-stat-txt{font-size:calc(24px * var(--sc));}
  .tpl-prob-col h3{font-size:calc(48px * var(--sc));}
  .tpl-prob-n{font-size:calc(13px * var(--sc));}
  .tpl-prob-row p{font-size:calc(21px * var(--sc));}
  .pf-gap-title{font-size:calc(140px * var(--sc));}
  .tpl-jr-col h3{font-size:calc(44px * var(--sc));}
  .tpl-jr-col p{font-size:calc(21px * var(--sc));}

  .tpl-proof-sub{font-size:calc(26px * var(--sc));}
  .tpl-proof-stat-num{font-size:calc(68px * var(--sc));}
  .tpl-proof-stat-lab{font-size:calc(19px * var(--sc));}
  .tpl-proof-step-h{font-size:calc(11.5px * var(--sc));}
  .pf-proof-steps .tpl-proof-step p{font-size:calc(22px * var(--sc));}
  .tpl-proof-quote{font-size:calc(30px * var(--sc));}

  .tpl-cta-card p{font-size:calc(22px * var(--sc));}
  .tpl-loop-d{font-size:calc(21px * var(--sc));}
  .tpl-cta-hd h2{font-size:calc(112px * var(--sc));}
  .tpl-foot-word{font-size:calc(150px * var(--sc));}
  .tpl-cta-card h3{font-size:calc(64px * var(--sc));}
  .tpl-foot-col a,.tpl-foot-col span{font-size:calc(17px * var(--sc));}
  .tpl-foot-fine span,.tpl-foot-fine a{font-size:calc(11.5px * var(--sc));}
}
@media (min-width:1900px){:root{--sc:1.22;--maxw:1940px;}}
@media (min-width:2100px){:root{--sc:1.3;--maxw:2060px;}}
@media (min-width:2350px){:root{--sc:1.4;--maxw:2220px;}}
@media (min-width:2600px){:root{--sc:1.5;--maxw:2380px;}}
@media (min-width:2950px){:root{--sc:1.62;--maxw:2560px;}}
@media (min-width:3300px){:root{--sc:1.74;--maxw:2760px;}}
@media (min-width:3700px){:root{--sc:1.86;--maxw:3000px;}}

/* ---- template-only: image slots ---- */
.tpl-hero-body{pointer-events:none;}
.tpl-hero-acts,.tpl-hero-foot .tpl-lede{pointer-events:auto;}
.tpl-panel-cap{pointer-events:none;}
body.tpl button{font:inherit;}
/* the footer signup's role toggle and submit are <button>s: size them like the other labels/buttons */
body.tpl .tpl-seg button{font-size:calc(13px * var(--sc));}
body.tpl .tpl-loop-field .tpl-btn{font-family:var(--font-mono);font-weight:600;font-size:calc(12.5px * var(--sc));letter-spacing:.14em;text-transform:uppercase;}
@media (max-width:560px){body.tpl .tpl-seg button{font-size:clamp(12px,3.9vw,16px);}}
@media (max-width:520px){body.tpl .tpl-loop-field .tpl-btn{font-size:clamp(12px,3.9vw,16px);}}

/* gold in-copy links that lead into the funnel (AI Capability Score) */
body.tpl a.pf-qlink{color:var(--c-accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,var(--c-accent) 55%,transparent);transition:color .25s var(--ease),text-decoration-color .25s var(--ease);}
body.tpl a.pf-qlink:hover{color:var(--c-accent-2);text-decoration-color:currentColor;}

/* =======================  TOUCH: in-focus + pressed  =======================
   Touch screens have no hover, so the tiles and panels that react to the cursor take the same
   look while they cross the middle of the screen (.pf-focus) and right away when pressed
   (.pf-press); both are set by close.jsx. No tilt, nothing else dims, and with reduced motion
   nothing moves. Mouse hover above is untouched. */
@media (hover:none){
  .tpl-proof-step:is(.pf-focus,.pf-press),.tpl-prob-col:is(.pf-focus,.pf-press){border-color:var(--c-rule-2);}
  .tpl-proof-step:is(.pf-focus,.pf-press)::before,.tpl-prob-col:is(.pf-focus,.pf-press)::before,.tpl-cta-card:is(.pf-focus,.pf-press)::before{opacity:1;}
  .tpl-cta-card:is(.pf-focus,.pf-press)::after{opacity:.6;}
  .pf-h2-step:is(.pf-focus,.pf-press) .pf-h2-art{border-color:var(--c-accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 18%,transparent),0 10px 22px -8px rgba(0,0,0,.5);}
}
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .tpl-proof-step:is(.pf-focus,.pf-press),.tpl-prob-col:is(.pf-focus,.pf-press){transform:translateY(-4px);}
  .pf-h2-step:is(.pf-focus,.pf-press) .pf-h2-art{transform:translateY(-3px);}
  .pf-h2-step:is(.pf-focus,.pf-press) .pf-h2-art img{transform:scale(1.08);}
  .tpl-cta-card:is(.pf-focus,.pf-press)::after{transform:rotate(-6deg) scale(1.06);}
}