/* =========================================================
   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;}
body.tpl.intro-lock{overflow:hidden;height:100vh;}
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;}
/* 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);}
#offer .tpl-sec-hd,#faq .tpl-sec-hd,#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);}
.tpl-explain-grid .pf-art{margin:0 0 clamp(16px,2vw,26px);}
.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;}
/* past the hero, a soft fade 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 dissolves instead of colliding. No bar, no edge. */
@property --nav-fade{syntax:'<color>';inherits:true;initial-value:#2f4f3a;}
.tpl-nav{transition:--nav-fade .45s var(--ease);}
.tpl-nav::before{content:"";position:absolute;inset:0 0 auto;height:calc(var(--nav-h) + 26px);z-index:-1;pointer-events:none;background:linear-gradient(var(--nav-fade) 0%,color-mix(in srgb,var(--nav-fade) 88%,transparent) 52%,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);}
.pf-paper .tpl-bx{box-shadow:0 1px 0 color-mix(in srgb,#2f4f3a 10%,transparent);}
.pf-paper .tpl-bx.ink{--c-ink-2:color-mix(in srgb,#f8f1d7 86%,#2f4f3a);}
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 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;}
.pf-vine{display:block;flex:none;width:calc(40px * var(--sc));height:calc(19px * var(--sc));background:var(--c-accent);-webkit-mask:url(pf-ornament/vine.webp) center/contain no-repeat;mask:url(pf-ornament/vine.webp) center/contain no-repeat;transform:scaleX(-1);transition:transform .45s var(--ease-out);}
.pf-vine.r{transform:none;}
.tpl-pill.on .pf-vine{transform:scaleX(-1) rotate(180deg);}
.tpl-pill.on .pf-vine.r{transform:rotate(180deg);}

.tpl-navcta{justify-self:end;background:none;border:0;padding:6px 2px;cursor:pointer;font-family:var(--font-mono);font-size:calc(11.5px * var(--sc));font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink);text-shadow:0 2px 14px color-mix(in srgb,var(--c-bg) 60%,transparent);transition:color .22s;}
.tpl-navcta:hover{color:var(--c-accent);}
.tpl-pill.tpl-navcta{justify-self:end;padding:10px 14px;border:1px solid var(--c-accent);text-shadow:none;}
.tpl-pill.tpl-navcta:hover{color:var(--c-ink);}
.tpl-pill.tpl-navcta:hover .pf-vine{transform:scaleX(-1) rotate(180deg);}
.tpl-pill.tpl-navcta:hover .pf-vine.r{transform:rotate(180deg);}
body.nav-on-paper .tpl-pill.tpl-navcta{color:#2f4f3a;}

/* fullscreen menu */
.tpl-menu{position:fixed;inset:0;z-index:55;background:color-mix(in srgb,var(--c-bg) 98%,transparent);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-navcta{display:none;}
  .pf-vine{width:30px;height:14px;}
  .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;}
}

/* ---- 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);}
/* ornamental buttons: menu-pill double rule + engraved scrolls either side of the label.
   The scroll grows from vine (top of page) to brick (bottom) via --orn, set per section. */
.tpl-btn{--orn:url(pf-ornament/orn-1.webp);border-radius:0;gap:10px;padding:calc(14px * var(--sc)) calc(16px * var(--sc));}
.tpl-btn::before,.tpl-btn::after{content:"";flex:none;width:calc(30px * var(--sc));height:calc(26px * var(--sc));background:var(--orn-c,currentColor);-webkit-mask:var(--orn) center/contain no-repeat;mask:var(--orn) center/contain no-repeat;transition:transform .45s var(--ease-out);}
.tpl-btn::before{transform:scaleX(-1);}
.tpl-btn:hover::before{transform:scaleX(-1) translateX(3px) rotate(-6deg);}
.tpl-btn:hover::after{transform:translateX(3px) rotate(-6deg);}
.tpl-btn-fill{border-color:var(--c-accent);}
.tpl-btn-line{--orn-c:var(--c-accent);border-color:var(--c-accent);}
.tpl-btn-line:hover{border-color:var(--c-accent-2);background:color-mix(in srgb,var(--c-accent) 12%,transparent);}
.tpl-proof .tpl-btn,#proof .tpl-btn{--orn:url(pf-ornament/orn-2.webp);}
#process .tpl-btn,#offer .tpl-btn{--orn:url(pf-ornament/orn-3.webp);}
#faq .tpl-btn,#contact .tpl-btn{--orn:url(pf-ornament/orn-4.webp);}
.tpl-foot .tpl-btn{--orn:url(pf-ornament/orn-5.webp);}
@media (max-width:520px){.tpl-btn::before,.tpl-btn::after{width:22px;height:19px;}}
/* ---- one design per button: each a different frame, all sharing the engraved scroll ---- */
/* gilded plaque: clipped corners, Pine inner rule that breaks at each corner */
.tpl-btn.pf-b-plaque{clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);outline:1px solid var(--c-on-accent);outline-offset:-6px;padding-inline:calc(20px * var(--sc));}
/* open brackets: no box, four engraved corner brackets that stretch on hover; one leading scroll */
.pf-b-brackets,.pf-b-brackets:hover{border:0;background:
  linear-gradient(var(--c-accent),var(--c-accent)) 0 0/14px 1.5px,linear-gradient(var(--c-accent),var(--c-accent)) 0 0/1.5px 14px,
  linear-gradient(var(--c-accent),var(--c-accent)) 100% 0/14px 1.5px,linear-gradient(var(--c-accent),var(--c-accent)) 100% 0/1.5px 14px,
  linear-gradient(var(--c-accent),var(--c-accent)) 0 100%/14px 1.5px,linear-gradient(var(--c-accent),var(--c-accent)) 0 100%/1.5px 14px,
  linear-gradient(var(--c-accent),var(--c-accent)) 100% 100%/14px 1.5px,linear-gradient(var(--c-accent),var(--c-accent)) 100% 100%/1.5px 14px;background-repeat:no-repeat;transition:background-size .5s var(--ease-out),transform .35s var(--ease-out),color .3s;}
.pf-b-brackets::after{display:none;}
.pf-b-brackets:hover{background-size:50% 1.5px,1.5px 50%,50% 1.5px,1.5px 50%,50% 1.5px,1.5px 50%,50% 1.5px,1.5px 50%;color:var(--c-accent-2);}
/* cartouche: full round ends, double inner rule following the curve */
.tpl-btn.pf-b-cartouche{border-radius:999px;outline:1px solid var(--c-on-accent);outline-offset:-5px;box-shadow:0 0 0 4px var(--c-bg),0 0 0 5px var(--c-accent);padding-inline:calc(22px * var(--sc));}
/* ticket: half-moon bites out of both ends, dashed perforation rule */
.tpl-btn.pf-b-ticket{-webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 97%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 97%,#000) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 50%,#0000 97%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 97%,#000) 100% 0/51% 100% no-repeat;outline:1px dashed color-mix(in srgb,var(--c-on-accent) 70%,transparent);outline-offset:-6px;padding-inline:calc(24px * var(--sc));}
/* arched doorway: round-topped, double rule, sits on a stone sill */
.tpl-btn.pf-b-arch{border-radius:60px 60px 0 0/34px 34px 0 0;outline:1px solid currentColor;outline-offset:-5px;box-shadow:0 5px 0 -1px color-mix(in srgb,var(--c-bg) 70%,#000);padding:calc(20px * var(--sc)) calc(22px * var(--sc)) calc(14px * var(--sc));}
/* ribbon: swallowtail ends, inner rule */
.tpl-btn.pf-b-ribbon{clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);outline:1px solid var(--c-on-accent);outline-offset:-5px;padding-inline:calc(30px * var(--sc));}
/* signet: round ends that nest in the pill-shaped email field, one fine Pine rule inset along the curve,
   a single leading scroll and the arrow. The scroll is set directly (not through --orn) so it can never
   fall back to a bare block if the custom-property image fails to resolve. */
.tpl-btn.pf-b-signet{--sig:var(--c-accent);border:0;border-radius:999px;background:var(--sig);box-shadow:inset 0 0 0 4px var(--sig),inset 0 0 0 5px var(--c-on-accent);transition:transform .35s var(--ease-out),background .3s,box-shadow .3s,opacity .3s;}
/* the scroll art has a hairline along its top edge; trim it off by bottom-aligning the art in a slightly shorter box */
.pf-b-signet::before{height:calc(24px * var(--sc));-webkit-mask-image:url(pf-ornament/orn-4.webp);mask-image:url(pf-ornament/orn-4.webp);-webkit-mask-size:100% auto;mask-size:100% auto;-webkit-mask-position:50% 100%;mask-position:50% 100%;}
@media (max-width:520px){.pf-b-signet::before{height:17.5px;}}
.pf-b-signet::after{display:none;}
.tpl-btn.pf-b-signet:hover{--sig:var(--c-accent-2);background:var(--sig);transform:none;}
.tpl-btn.pf-b-signet:active{transform:scale(.97);}
.tpl-btn.pf-b-signet:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px;}
.tpl-btn.pf-b-signet:disabled{--sig:var(--c-accent);background:var(--sig);opacity:.55;cursor:progress;transform:none;}
.tpl-btn.pf-b-signet:disabled::before{transform:scaleX(-1);}
.tpl-btn.pf-b-signet:disabled .ar{transform:none;}
@media (prefers-reduced-motion:reduce){.tpl-btn.pf-b-signet,.pf-b-signet::before,.pf-b-signet .ar{transition:background .3s,box-shadow .3s,opacity .3s;}.tpl-btn.pf-b-signet:hover::before{transform:scaleX(-1);}.tpl-btn.pf-b-signet:hover .ar,.tpl-btn.pf-b-signet:active{transform:none;}}
/* medallion: pointed ends like a wax-seal tab */
.tpl-btn.pf-b-medal{clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);padding-inline:calc(28px * var(--sc));}
.pf-b-medal::before,.pf-b-medal::after{width:calc(22px * var(--sc));}
/* bookplate: square gold plate, Pine rules pressed in along the top and bottom only */
.tpl-btn.pf-b-bookplate,.tpl-btn.pf-b-bookplate:hover{background-image:linear-gradient(var(--c-on-accent),var(--c-on-accent)),linear-gradient(var(--c-on-accent),var(--c-on-accent));background-size:calc(100% - 12px) 1px;background-position:50% 5px,50% calc(100% - 5px);background-repeat:no-repeat;padding-inline:calc(22px * var(--sc));}
/* 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:1180px){.tpl-btn.pf-b-ticket,.tpl-btn.pf-b-ribbon,.tpl-btn.pf-b-arch{padding-inline:16px;gap:8px;}.pf-b-ticket::before,.pf-b-ticket::after,.pf-b-ribbon::before,.pf-b-ribbon::after,.pf-b-arch::before,.pf-b-arch::after{width:22px;height:19px;}}
@media (max-width:980px){.pf-b-ticket::after,.pf-b-ribbon::after,.pf-b-arch::after{display:none;}}
@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 v2 (booth layout): centered headline between two engraved trees, three-step strip ---- */
/* --hu: the hero's unit. The third term shrinks it on short screens (~170px of the content is
   fixed-size buttons and minimum text sizes, the rest is ~40hu) so the whole hero, nav space
   included, stays one screen tall; below ~480px it stops shrinking and the hero grows instead. */
.pf-h2-hero{--hu:max(5.5px,min(1vw,1.5vh,calc((100svh - var(--nav-h) - 170px) / 40)));}
.pf-h2-hero .tpl-hero-sticky{box-sizing:border-box;height:auto;min-height:100svh;justify-content:center;padding:calc(var(--nav-h) + .6 * var(--hu)) 0 calc(1.4 * var(--hu));}
/* the Match drawing is a frame of the timeline handshake, whose sleeves run off the frame: fade the ends */
.pf-h2-art img[src*="pf-handshake/"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 72%,transparent 99%);mask-image:linear-gradient(90deg,transparent,#000 24%,#000 72%,transparent 99%);}
.pf-h2-trees{position:absolute;inset:0;pointer-events:none;z-index:0;}
.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;display:flex;flex-direction:column;align-items:center;text-align:center;}
.pf-h2-acts{margin-top:calc(3.2 * var(--hu)) !important;}
.pf-h2-lab{white-space:nowrap;color:var(--c-accent);font-size:max(11px,calc(1.05 * var(--hu)));letter-spacing:.26em;}
.pf-h2-title{margin-top:calc(1 * var(--hu)) !important;font-size:calc(6.9 * var(--hu));line-height:1;color:var(--c-ink);}
.pf-h2-title .tpl-hl-line{white-space:nowrap;}
.pf-h2-tag{white-space:nowrap;max-width:none;margin:calc(1.5 * var(--hu)) 0 0;font-family:var(--font-mono);font-size:max(13px,calc(1.5 * var(--hu)));font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink);}
.pf-h2-steps{list-style:none;margin:calc(2.8 * var(--hu)) 0 0;padding:0;width:100%;max-width:calc(88 * var(--hu));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.pf-h2-step{display:flex;flex-direction:column;align-items:center;gap:calc(.7 * var(--hu));padding:0 calc(2.4 * var(--hu));opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out);transition-delay:calc(.75s + var(--i) * .16s);}
.pf-h2-step + .pf-h2-step{border-left:1px solid var(--c-rule-2);}
.tpl-hero.type-in .pf-h2-step{opacity:1;transform:none;}
.pf-h2-art{height:calc(9 * var(--hu));width:100%;display:flex;align-items:flex-end;justify-content:center;margin-bottom:calc(.5 * var(--hu));}
.pf-h2-art img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 10px rgba(0,0,0,.16));transition:transform .6s var(--ease-out);}
.pf-h2-step:hover .pf-h2-art img{transform:translateY(-5px) rotate(-2deg);}
.pf-h2-step-h{display:flex;justify-content:center;gap:.45em;white-space:nowrap;line-height:1.2;font-family:var(--font-mono);font-size:max(15px,calc(1.6 * var(--hu)));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{margin:0;max-width:30ch;font-size:max(14px,calc(1.18 * var(--hu)));line-height:1.5;color:var(--c-ink-2);text-wrap:pretty;}
.pf-h2-acts{flex-direction:row;flex-wrap:wrap;margin-top:calc(2.8 * var(--hu));justify-content:center;justify-self:auto;pointer-events:auto;}
.pf-h2-lede{margin:calc(1.6 * var(--hu)) auto 0;max-width:84ch;font-size:max(14px,calc(1.18 * var(--hu)));line-height:1.55;color:var(--c-ink-2);text-wrap:pretty;}
.pf-h2-lede + .pf-h2-acts{margin-top:calc(1.6 * var(--hu)) !important;}
.pf-h2-hero .tpl-cue{display:none;}
@media (max-width:860px){
  .pf-h2-hero{--hu:2.2vw;}
  .pf-h2-lab,.pf-h2-tag{white-space:normal;text-wrap:balance;}
  .pf-h2-title{font-size:clamp(40px,11vw,calc(84px * var(--sc)));}
  .pf-h2-title .tpl-hl-line{white-space:normal;}
  .pf-h2-steps{grid-template-columns:1fr;gap:28px;max-width:440px;}
  .pf-h2-step + .pf-h2-step{border-left:0;border-top:1px solid var(--c-rule-2);padding-top:28px;}
  .pf-h2-art{height:120px;}
  .pf-h2-tree{height:62%;}
  .pf-h2-tree b{opacity:.08;}
  /* stacked steps make the hero taller than the screen: the two buttons move up under the tagline */
  .pf-h2 > .pf-h2-acts{order:1;margin-top:calc(2.4 * var(--hu)) !important;}
  .pf-h2-steps,.pf-h2-lede{order:2;}
  .pf-h2-steps{margin-top:max(34px,calc(4 * var(--hu)));}
}
@media (prefers-reduced-motion:reduce){.pf-h2-step{opacity:1;transform:none;transition:none;}.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;}}

/* =======================  MANIFESTO (word reveal)  ======================= */
.tpl-mani{position:relative;background:var(--c-bg);}
.tpl-mani-pin{position:relative;display:flex;align-items:center;padding:clamp(74px,13vh,150px) 0;}
.tpl-mani-txt{font-family:var(--font-display);font-weight:700;text-transform:var(--display-case);font-size:clamp(30px,5.6vw,calc(82px * var(--sc)));line-height:1.02;letter-spacing:-.005em;max-width:20ch;}
.tpl-mani-txt i{font-style:normal;transition:color .45s var(--ease),opacity .45s var(--ease);color:color-mix(in srgb,var(--c-ink) 14%,transparent);}
.tpl-mani-txt i.lit{color:var(--c-ink);}
.tpl-mani-txt i.acc.lit{color:var(--c-accent);}

/* =======================  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-offer-lede{margin:0 0 clamp(30px,4vw,56px);}
.tpl-explain-grid > *{min-width:0;}
.tpl-explain-grid h2{font-size:clamp(40px,5.2vw,calc(96px * var(--sc)));overflow-wrap:anywhere;}
.tpl-cta-card{min-width:0;}
.tpl-cta-card h2{font-size:clamp(30px,3.6vw,calc(64px * var(--sc)));overflow-wrap:anywhere;}

/* =======================  PROBLEM  ======================= */
.pf-fhd{padding-bottom:calc(clamp(14px,2vw,26px) + 16px * var(--sc));margin-bottom:clamp(38px,6vw,76px);text-align:center;}
.pf-fhd-lab{display:block;margin-bottom:clamp(10px,1.6vw,22px);}
.pf-fhd-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0 clamp(6px,1vw,18px);font-size:clamp(40px,6.4vw,calc(116px * var(--sc)));}
.pf-fhd-l{text-align:right;}
.pf-fhd-r{text-align:left;}
.pf-fhd-r .tpl-out{transition:color 1.4s var(--ease-out),-webkit-text-stroke-color 1.4s var(--ease-out),text-shadow 1.8s var(--ease-out);}
.pf-fhd.lit .pf-fhd-r .tpl-out{color:var(--c-accent);-webkit-text-stroke-color:transparent;text-shadow:0 0 .5em color-mix(in srgb,var(--c-accent) 32%,transparent);}
.pf-fhd-art{position:relative;display:block;}
.pf-fhd-art canvas{display:block;height:clamp(320px,42vw,700px);width:auto;aspect-ratio:680/700;margin:0 clamp(-130px,-7vw,-24px);}
.pf-fhd-tag{position:absolute;top:0;z-index:1;white-space:nowrap;font-size:calc(10px * var(--sc));letter-spacing:.18em;}
.pf-fhd-tag.l{right:66%;}
.pf-fhd-tag.r{left:66%;}
@media (max-width:720px){
  .pf-fhd-grid{grid-template-columns:1fr;justify-items:center;}
  .pf-fhd-l,.pf-fhd-r{text-align:center;}
  .pf-fhd-l br,.pf-fhd-r br{display:none;}
  .pf-fhd-art canvas{height:auto;width:min(92vw,440px);margin:0;}
  .pf-fhd-tag{display:none;}
}
.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{font-size:calc(17px * var(--sc));line-height:1.55;color:var(--c-ink-2);max-width:42ch;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(24px,2.6vw,calc(40px * 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(12px * var(--sc));letter-spacing:.06em;color:var(--c-muted);padding-top:2px;}
.tpl-prob-row p{font-size:calc(17px * 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)));}}

/* =======================  PROBLEM / EXPLAINER SWAP  =======================
   Same reveal language as the hero headline (masked, rises from below).
   Problem rises into place on entry; further down, it sinks back out while
   the explainer rises in behind it, replacing it. Normal flow, no pin. */
.tpl-swap{position:relative;background:var(--c-bg);min-height:130svh;display:flex;align-items:center;padding:clamp(60px,9vh,110px) 0 clamp(12px,2vh,32px);}
.tpl-swap-stack{display:grid;overflow:hidden;overflow:clip;position:relative;width:100%;}
.tpl-swap-over::after{content:"";display:block;height:120svh;}
.tpl-swap-under::after{content:"";display:block;height:75svh;}
.tpl-swap-layer{grid-area:1/1;background:var(--c-bg);transform:translate3d(0,105%,0);transition:transform 1.05s var(--ease-out);}
.tpl-swap.enter .tpl-swap-under{transform:translate3d(0,0,0);}
.tpl-swap.swap .tpl-swap-under{transform:translate3d(0,105%,0);}
.tpl-swap.swap .tpl-swap-over{transform:translate3d(0,0,0);}
.tpl-explain-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center;position:sticky;top:calc(var(--nav-h) + 4vh);}
.tpl-explain-list{display:flex;flex-direction:column;}
.tpl-explain-item{border-top:1px solid var(--c-rule);padding:clamp(20px,2.6vw,30px) 0;}
.tpl-explain-item:last-child{border-bottom:1px solid var(--c-rule);}
.tpl-explain-item h3{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(22px,2.2vw,calc(34px * var(--sc)));line-height:1;margin-bottom:10px;}
.tpl-explain-item p{font-size:calc(17px * var(--sc));line-height:1.55;color:var(--c-ink-2);margin:0;max-width:52ch;text-wrap:pretty;}
@media (max-width:860px){.tpl-explain-grid{grid-template-columns:1fr;position:static;}.tpl-swap-over::after,.tpl-swap-under::after{display:none;}}
/* Secret Weapon: the seeing hand (cream + green line) holds the tile up in its palm.
   On swap the tile rises from below, then the hand rises behind it until the fingertips
   clear the top edge. Hover: the hand lifts the tile a little higher (no tilt, text never covered).
   `translate` drives the reveal, `transform` the hover, so each keeps its own timing. */
.tpl-explain-grid{isolation:isolate;min-height:calc(100svh - var(--nav-h) - 8vh);}
.tpl-explain-grid > div{position:relative;z-index:1;}
.pf-hold{padding:calc(var(--th,600px) * .3) 0 calc(var(--th,600px) * .32);}
.pf-hold-in{position:relative;isolation:isolate;transform:translate3d(0,24vh,0);transition:transform 1.5s var(--ease-out) .2s;}
.pf-hold .tpl-explain-list{z-index:2;box-shadow:0 46px 70px -34px rgba(0,0,0,.6);transition:transform .7s var(--ease-out),border-color .4s var(--ease);}
.pf-hold-hand{position:absolute;z-index:1;left:50%;top:-27%;height:156%;aspect-ratio:620/1181;display:block;pointer-events:none;transform:translate3d(-62%,0,0);}
.pf-hold-hand img{display:block;width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 92%);mask-image:linear-gradient(to bottom,#000 80%,transparent 92%);transition:transform .7s var(--ease-out);}
.pf-hold-rays{position:absolute;z-index:0;left:50%;top:38%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:repeating-conic-gradient(color-mix(in srgb,var(--c-accent) 22%,transparent) 0deg 1.4deg,transparent 1.4deg 9deg);-webkit-mask:radial-gradient(closest-side,transparent 18%,#000 30%,rgba(0,0,0,.5) 58%,transparent 100%);mask:radial-gradient(closest-side,transparent 18%,#000 30%,rgba(0,0,0,.5) 58%,transparent 100%);opacity:0;transition:opacity 1.6s var(--ease) 2s;}
.tpl-swap.swap .pf-hold-in{transform:none;}
.tpl-swap.swap .pf-hold-rays{opacity:.5;animation:pf-seer-turn 90s linear infinite;}
@media (hover:hover){
  .pf-hold:hover .tpl-explain-list,.pf-hold:hover .pf-hold-hand img{transform:translateY(-12px);}
}
@keyframes pf-seer-turn{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (max-width:860px){.tpl-explain-grid{min-height:0;}}
@media (prefers-reduced-motion:reduce){.pf-hold-in{transform:none;transition:none;}.pf-hold-hand{transform:translate3d(-62%,0,0);transition:none;}.pf-hold-rays{transition:none;animation:none !important;opacity:.4;}}
/* Stacked widths and reduced motion: no overlay swap. The Gap and The Secret Weapon sit one after
   the other in normal flow (the JS skips the swap here too). width:auto because the stack's
   width:100% plus the shell's padding would overflow once it is no longer a flex item. */
@media (prefers-reduced-motion:reduce),(max-width:860px){
  .tpl-swap{min-height:0;display:block;}
  .tpl-swap-stack{display:block;overflow:visible;width:auto;}
  .tpl-swap-layer{position:static;transform:none !important;transition:none;}
  .tpl-swap-under{margin-bottom:clamp(60px,10vh,100px);}
  .tpl-swap-over::after,.tpl-swap-under::after{display:none;}
  .tpl-explain-grid{position:static;}
}
/* stacked widths: The Secret Weapon's own entrance (.sw-in, once) — the tile and hand rise in,
   then the rays fade up */
/* on the narrowest phones the tile grows tall, and a hand sized to it would push its thumb off
   the left edge: cap its size by the screen width, scaled about the tile's middle */
@media (max-width:860px){.pf-hold-hand{height:min(156%,150vw);top:calc(51% - min(78%,75vw));}}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .tpl-swap .pf-hold-in{opacity:0;transform:translate3d(0,12vh,0);transition:transform 1.4s var(--ease-out) .1s,opacity .9s var(--ease) .1s;}
  .tpl-swap.sw-in .pf-hold-in{opacity:1;transform:none;}
  .tpl-swap.sw-in .pf-hold-rays{opacity:.5;animation:pf-seer-turn 90s linear infinite;}
}

/* =======================  PROOF  ======================= */
.tpl-proof-sub{font-size:clamp(16px,1.3vw,calc(19px * var(--sc)));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(32px,4.6vw,52px) 0 clamp(50px,7vw,90px);}
.tpl-proof-stat-num{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(32px,3.6vw,calc(56px * var(--sc)));line-height:.92;margin-bottom:8px;color:var(--c-ink);}
.tpl-proof-stat-lab{font-size:calc(15px * var(--sc));color:var(--c-muted);}
.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;}
/* palm: arm reaches in from the viewport's left edge (--bleed set in JS); Owen fades up off the palm */
.tpl-proof-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
.pf-proof-side{position:sticky;top:clamp(80px,12vh,140px);}
.pf-palm{position:relative;margin-bottom:clamp(22px,2.8vw,34px);}
.pf-palm-art{position:relative;width:calc(100% + var(--bleed,0px));margin-left:calc(-1 * var(--bleed,0px));aspect-ratio:970/380;margin-top:calc(42% + var(--bleed,0px) * .42);}
.pf-palm-art canvas{display:block;width:100%;height:100%;position:relative;z-index:1;}
.pf-palm-owen{position:absolute;z-index:2;left:25.6%;bottom:56%;width:44%;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 5%);mask-image:linear-gradient(to top,transparent 0,#000 5%);height:auto;transform:translateY(16%);clip-path:inset(100% 0 0 0);opacity:0;transition:clip-path 1.1s var(--ease-out),transform 1.1s var(--ease-out),opacity .7s var(--ease);}
.pf-palm.open .pf-palm-owen{clip-path:inset(0 0 0 0);transform:none;opacity:1;}
/* gold aura behind the head, high on the portrait, to light the open green above */
.pf-palm-art::before{content:"";position:absolute;z-index:0;left:47.6%;bottom:152%;width:62%;aspect-ratio:1;transform:translate(-50%,50%) scale(.7);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--c-accent) 34%,transparent),color-mix(in srgb,var(--c-accent) 12%,transparent) 50%,transparent);opacity:0;transition:opacity 1.4s var(--ease) .3s,transform 1.8s var(--ease-out) .3s;}
.pf-palm.open .pf-palm-art::before{opacity:1;transform:translate(-50%,50%) scale(1);}
.pf-palm-art::after{content:"";position:absolute;z-index:1;left:12.6%;width:70%;top:-14%;height:84%;pointer-events:none;background:radial-gradient(closest-side,rgba(244,236,221,.55),rgba(244,236,221,.18) 45%,rgba(244,236,221,0));opacity:0;transition:opacity 1.4s var(--ease);}
.pf-palm.open .pf-palm-art::after{opacity:1;}
@media (prefers-reduced-motion:reduce){.pf-palm-owen{transition:none;}}
@media (max-width:860px){.pf-proof-side{position:static;}}
@media (max-width:860px){.tpl-proof-grid{grid-template-columns:1fr;}}
/* timeline: the track fills with scroll; day 30 lights up when it arrives */
/* min-height = the hands' height minus how far they rise above the timeline, so the art always ends inside #proof */
.tpl-tl{margin-top:clamp(90px,12vw,160px);position:relative;min-height:calc(min(96vw,1480px) * 540 / 1440 - clamp(30px,5vw,90px));}
#proof{overflow-x:clip;}
/* engraved handshake behind "Capability Meets Opportunity": capability (left) meets opportunity (right) as the track fills */
.tpl-tl-hands{position:absolute !important;left:50%;top:clamp(-90px,-5vw,-30px);width:min(96vw,1480px);height:auto;aspect-ratio:1440/540;transform:translateX(-50%);-webkit-mask-image:none;mask-image:none;opacity:.3;pointer-events:none;z-index:0;}
.tpl-tl > :not(.tpl-tl-hands){position:relative;z-index:1;}
.tpl-tl.shaking .tpl-tl-hands{animation:pf-pump .3s ease-in-out infinite;}
@keyframes pf-pump{0%,100%{translate:0 0}50%{translate:0 7px}}
@media (prefers-reduced-motion:reduce){.tpl-tl.shaking .tpl-tl-hands{animation:none;}}
/* phones: exactly screen-wide, so both hands stay whole and the canvas's own faded edges meet the screen edges */
@media (max-width:720px){.tpl-tl-hands{width:100vw;top:10px;opacity:.22;}}
.tpl-tl-title{text-align:center;margin-bottom:clamp(40px,5vw,66px);}
.tpl-tl-row{display:flex;align-items:center;gap:clamp(14px,2vw,26px);}
.tpl-tl-dot{flex:none;width:calc(62px * var(--sc));height:calc(62px * var(--sc));border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:calc(13px * var(--sc));font-weight:600;letter-spacing:.06em;border:1px solid var(--c-rule-2);color:var(--c-ink);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);}
.tpl-tl-dot-a{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-bg);}
.tpl-tl.done .tpl-tl-dot-b{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);}
.tpl-tl-track{position:relative;flex:1;height:2px;background:var(--c-rule);}
.tpl-tl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c-accent);}
.tpl-tl-knob{position:absolute;top:50%;left:0;width:calc(12px * var(--sc));height:calc(12px * var(--sc));border-radius:50%;background:var(--c-accent);transform:translate(-50%,-50%);box-shadow:0 0 0 6px color-mix(in srgb,var(--c-accent) 18%,transparent);}
.tpl-tl-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,120px);margin-top:clamp(22px,3vw,34px);}
.tpl-tl-text > div:last-child{text-align:right;}
.tpl-tl-text > div:last-child p{margin-left:auto;}
.tpl-tl-lab{display:block;color:var(--c-accent);margin-bottom:12px;}
.tpl-tl-text h4{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(22px,2.2vw,calc(32px * var(--sc)));line-height:1;margin:0 0 10px;}
.tpl-tl-text p{font-size:calc(17px * var(--sc));line-height:1.6;color:var(--c-ink-2);margin:0;max-width:40ch;text-wrap:pretty;}
.tpl-tl-call{display:flex;gap:18px;align-items:baseline;max-width:880px;margin:clamp(56px,7vw,96px) auto 0;border-top:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule);padding:clamp(22px,3vw,34px) 0;}
.tpl-tl-call i{font-style:normal;color:var(--c-accent);font-size:calc(18px * var(--sc));flex:none;}
.tpl-tl-call p{font-size:clamp(17px,1.5vw,calc(22px * var(--sc)));line-height:1.5;color:var(--c-ink);margin:0;text-wrap:pretty;}
@media (max-width:720px){
  .tpl-tl-text{grid-template-columns:1fr;}
  .tpl-tl-text > div:last-child{text-align:left;}
  .tpl-tl-text > div:last-child p{margin-left:0;}
}
@media (max-width:720px){.tpl-proof-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Pine panels (same treatment as the offer tiles) to break up the open green ground */
.tpl-proof-step,.tpl-prob-col,.tpl-explain-list,.tpl-proc > div:first-child{--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,.tpl-explain-list::before,.tpl-proc > div:first-child::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,.tpl-explain-list:hover,.tpl-proc > div:first-child: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,.tpl-explain-list:hover::before,.tpl-proc > div:first-child:hover::before{opacity:1;}
}
.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(17px,1.32vw,calc(21px * var(--sc)));line-height:1.62;}
.pf-proof-steps .tpl-proof-step-h{font-size:clamp(13px,1vw,calc(16px * var(--sc)));margin-bottom:clamp(12px,1vw,18px);}
.tpl-proc > div:first-child{padding-top:0;padding-bottom:30px;}
.tpl-proc .tpl-step:first-child{border-top:0;}
.tpl-proc .tpl-step:last-of-type{border-bottom:0;}
.tpl-prob-col .tpl-prob-row:last-child{border-bottom:0;padding-bottom:0;}
.tpl-explain-list{padding-top:0;padding-bottom:0;}
.tpl-explain-item:first-child{border-top:0;}
.tpl-explain-item:last-child{border-bottom:0;}


.tpl-proc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,90px);align-items:start;}

.tpl-step-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;}
.tpl-step-top h3{margin:0 !important;flex:1;min-width:0;}
.tpl-step-price{font-family:var(--font-mono);font-size:calc(13px * var(--sc));font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap;transition:color .5s var(--ease);}
.tpl-step.lit .tpl-step-price{color:var(--c-ink);}
.tpl-proc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(18px,2.6vw,36px);margin-top:clamp(40px,5vw,64px);}
.tpl-proc-stat-num{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(40px,4.6vw,calc(72px * var(--sc)));line-height:.9;color:var(--c-accent);}
.tpl-proc-stat-num span{font-size:.36em;margin-left:5px;}
.tpl-proc-stat-lab{font-size:calc(15px * var(--sc));line-height:1.45;color:var(--c-muted);margin-top:10px;max-width:36ch;text-wrap:pretty;}
/* preview column sticks beside the steps and swaps to the active step's image */
.tpl-proc-side{position:sticky;top:calc(var(--nav-h) + 30px);display:flex;flex-direction:column;gap:14px;}
.tpl-proc-media{position:relative;aspect-ratio:4/3;background:var(--c-bg-3);overflow:hidden;}
/* hand + key reaching in from the right, in place of the step previews */
#process{overflow-x:clip;}
.tpl-proc > div:first-child{position:relative;z-index:1;}
.tpl-proc-side:has(.tpl-proc-key){top:calc(var(--nav-h) + (100vh - var(--nav-h)) * .06);z-index:0;}
.tpl-proc-side:has(.tpl-proc-key) .tpl-proc-cap{position:absolute;top:14px;right:0;z-index:1;}
.tpl-proc-key{container-type:inline-size;display:flex;justify-content:flex-end;margin-right:calc((100vw - min(100vw,var(--maxw))) / -2 - var(--gut));pointer-events:none;}
/* sized by screen height, but never wider than its column plus the right bleed (100cqw), so it can't reach under the pricing panel */
.tpl-proc-key canvas{pointer-events:auto;display:block;flex:none;height:min(calc((100vh - var(--nav-h)) * .94),calc(100cqw * 720 / 795));max-height:1040px;width:auto;aspect-ratio:795/720;max-width:none;-webkit-mask-image:none;mask-image:none;}
@media (max-width:860px){.tpl-proc-key{margin-right:calc(var(--gut) * -1);}.tpl-proc-key canvas{height:auto;width:min(100%,640px);}.tpl-proc-side:has(.tpl-proc-key) .tpl-proc-cap{position:static;}}
.tpl-proc-shot{position:absolute;inset:0;opacity:0;transform:translateY(4%);pointer-events:none;transition:opacity .6s var(--ease),transform .8s var(--ease-out);}
.tpl-proc-shot.on{opacity:1;transform:none;pointer-events:auto;z-index:1;}
.tpl-proc-shot image-slot,.tpl-proc-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tpl-proc-cap{font-family:var(--font-mono);font-size:calc(11px * var(--sc));letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);}
.tpl-proc-cap i{font-style:normal;color:var(--c-accent);margin-right:8px;}
.tpl-step{border-top:1px solid var(--c-rule);padding:clamp(30px,4.6vw,64px) 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,42px);}
.tpl-step:last-child{border-bottom:1px solid var(--c-rule);}
.tpl-step-n{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,5vw,calc(78px * var(--sc)));line-height:.8;-webkit-text-stroke:1.4px var(--c-rule-2);color:transparent;transition:color .5s var(--ease),-webkit-text-stroke-color .5s;}
.tpl-step.lit .tpl-step-n{color:var(--c-accent);-webkit-text-stroke-color:transparent;}
.tpl-step h3{font-size:clamp(24px,2.4vw,calc(38px * var(--sc)));margin-bottom:12px;}
.tpl-step p{font-size:calc(17px * var(--sc));color:var(--c-ink-2);max-width:52ch;text-wrap:pretty;}
.tpl-step-fees{margin:18px 0 0;max-width:52ch;display:grid;}
.tpl-step-fees div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 0;border-top:1px solid var(--c-rule);font-family:var(--font-mono);font-size:calc(11.5px * var(--sc));letter-spacing:.06em;text-transform:uppercase;}
.tpl-step-fees dt{color:var(--c-muted);white-space:nowrap;}
/* on the narrowest phones the amount wraps under its label, still right-aligned */
.tpl-step-fees dd{margin:0 0 0 auto;font-weight:600;color:var(--c-ink);white-space:nowrap;}
@media (max-width:860px){.tpl-proc{grid-template-columns:1fr;}.tpl-proc-side{position:static;}}
/* journey: --p (0→1) draws the rule; each column's --q drops its divider and wipes its text in */
.tpl-jr{--p:0;margin-top:clamp(100px,13vw,180px);}
.tpl-jr-hd{margin-bottom:clamp(36px,5vw,64px);}
.tpl-jr-rule{height:1px;background:var(--c-rule-2);transform-origin:0 50%;transform:scaleX(var(--p));}
.tpl-jr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.tpl-jr-col{--q:0;position:relative;padding:clamp(30px,3.6vw,50px) clamp(18px,2vw,32px) clamp(20px,3vw,40px);}
.tpl-jr-col:first-child{padding-left:0;}
.tpl-jr-col + .tpl-jr-col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--c-rule);transform-origin:50% 0;transform:scaleY(var(--q));}
.tpl-jr-in{clip-path:inset(0 calc((1 - var(--q)) * 100%) 0 0);transform:translateX(calc((1 - var(--q)) * 28px));}
.tpl-jr-n{display:block;font-family:var(--font-mono);font-size:calc(12px * var(--sc));letter-spacing:.1em;color:var(--c-accent);margin-bottom:16px;}
.tpl-jr-col h4{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(22px,2.1vw,calc(32px * var(--sc)));line-height:1;margin:0 0 14px;}
.tpl-jr-col p{font-size:calc(17px * var(--sc));line-height:1.6;color:var(--c-ink-2);margin:0;text-wrap:pretty;}
.tpl-jr-out{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,120px);margin-top:clamp(40px,5vw,70px);padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule);}
.tpl-jr-out::before{content:"";position:absolute;left:50%;top:clamp(28px,3.4vw,44px);bottom:clamp(28px,3.4vw,44px);width:1px;background:var(--c-rule);}
.tpl-jr-out > div:last-child{text-align:right;}
.tpl-jr-out > div:last-child p{margin-left:auto;}
.tpl-jr-out-lab{display:block;color:var(--c-accent);margin-bottom:12px;}
.tpl-jr-out h4{font-family:var(--font-display);font-weight:600;text-transform:var(--display-case);font-size:clamp(20px,1.9vw,calc(28px * var(--sc)));line-height:1;margin:0 0 10px;}
.tpl-jr-out p{font-size:calc(17px * var(--sc));line-height:1.6;color:var(--c-ink-2);margin:0;max-width:44ch;text-wrap:pretty;}
@media (max-width:720px){.tpl-jr-out{grid-template-columns:1fr;}.tpl-jr-out::before{display:none;}.tpl-jr-out > div:last-child{text-align:left;}.tpl-jr-out > div:last-child p{margin-left:0;}}
@media (max-width:860px){.tpl-jr-cols{grid-template-columns:repeat(2,minmax(0,1fr));}.tpl-jr-col:nth-child(3){padding-left:0;}.tpl-jr-col:nth-child(3)::before{display:none;}}
@media (max-width:560px){.tpl-jr-cols{grid-template-columns:1fr;}.tpl-jr-col{padding-left:0;}.tpl-jr-col::before{display:none;}}
/* stacked journey: no sideways wipe (it cut lines mid-word); each step fades up whole as it
   enters the screen (.in, set once by the JS), and its divider drops with it */
@media (max-width:860px){
  .tpl-jr-in{clip-path:none;transform:none;}
  .tpl-jr-col + .tpl-jr-col::before{transition:transform .8s var(--ease-out);}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .tpl-jr-in{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease),transform 1s var(--ease-out);}
  .tpl-jr-col.in .tpl-jr-in{opacity:1;transform:none;}
}
@media (min-width:561px) and (max-width:860px) and (prefers-reduced-motion:no-preference){.tpl-jr-col:nth-child(even) .tpl-jr-in{transition-delay:.12s;}}
@media (max-width:560px){.tpl-proc-stats{grid-template-columns:1fr;}}

/* =======================  OFFER (bento)  =======================
   Every tile is a link. Tiles unmask upward as they enter; on hover a
   cursor spotlight follows the pointer, the ghost number fills, an arrow
   swings in, and the rest of the grid steps back. */
.tpl-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);grid-auto-flow:dense;}
.tpl-bx{--d:0ms;--spot:color-mix(in srgb,var(--c-ink) 10%,transparent);position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(230px,20vw,300px);padding:clamp(24px,2.8vw,44px);background:var(--c-bg-2);border:1px solid var(--c-rule);color:var(--c-ink) !important;text-decoration:none;
  clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease-out) var(--d),transform .5s var(--ease-out),opacity .4s var(--ease),border-color .4s var(--ease);}
.tpl-bx.in{clip-path:inset(0 0 0 0);}
/* engraved seal emblem (pf-emblems.js), inherits the tile's ink */
.tpl-bx{--pfe-road:var(--c-bg-2);}
.tpl-bx.ink{--pfe-road:var(--c-ink);}
.tpl-bx.accent{--pfe-road:var(--c-accent);}
.tpl-bx-em{display:block;width:clamp(58px,5.4vw,84px);aspect-ratio:1;margin-bottom:clamp(14px,1.6vw,22px);transform-origin:50% 50%;transition:transform .9s var(--ease-out);}
.tpl-bx.big .tpl-bx-em{width:clamp(84px,8vw,124px);}
.tpl-bx.full .tpl-bx-em{grid-column:1/-1;}
.tpl-bx.full .tpl-bx-path,.tpl-bx-path{height:200%;width:auto;aspect-ratio:1;right:6%;top:50%;background:currentColor;-webkit-mask:url("pf-emblems/path.webp") center/contain no-repeat;mask:url("pf-emblems/path.webp") center/contain no-repeat;}
.tpl-bx-em svg{display:block;width:100%;height:100%;overflow:visible;}
@media (hover:hover){.tpl-bx:hover .tpl-bx-em{transform:rotate(-8deg) scale(1.06);}}
/* large frameless engraving set into the card's background */
.tpl-bx-art{position:absolute;z-index:-1;right:-3%;top:50%;height:112%;aspect-ratio:1;transform:translateY(-50%);opacity:.2;pointer-events:none;transition:transform 1.1s var(--ease-out),opacity .5s var(--ease);}
.tpl-bx-art svg{display:block;width:100%;height:100%;}
.tpl-bx.sm .tpl-bx-art{right:-14%;top:38%;height:86%;}
.tpl-bx.full .tpl-bx-art{right:2%;height:150%;}
.tpl-bx.ink .tpl-bx-art,.tpl-bx.ink:hover .tpl-bx-art{opacity:.16;}
.tpl-bx.accent .tpl-bx-art{opacity:.42;}
.tpl-bx-brain{height:auto;width:88%;aspect-ratio:1100/810;right:-10%;top:30%;background:currentColor;-webkit-mask:url("pf-emblems/brain.webp") center/contain no-repeat;mask:url("pf-emblems/brain.webp") center/contain no-repeat;}
.tpl-bx:has(.tpl-bx-art) .tpl-bx-n{display:none;}
.tpl-bx.sm .tpl-bx-key,.tpl-bx-key{height:150%;width:auto;aspect-ratio:500/1734;right:14%;top:44%;transform:translateY(-50%) rotate(32deg);background:currentColor;-webkit-mask:url("pf-emblems/key.webp") center/contain no-repeat;mask:url("pf-emblems/key.webp") center/contain no-repeat;}
@media (hover:hover){.tpl-bx:hover .tpl-bx-key{transform:translateY(-50%) rotate(24deg) scale(1.05);}}
.tpl-bx-books,.tpl-bx-dividers,.tpl-bx-anchor{background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.tpl-bx-books{-webkit-mask-image:url("pf-emblems/books.webp");mask-image:url("pf-emblems/books.webp");height:128%;width:auto;aspect-ratio:1051/993;right:-2%;top:46%;}
.tpl-bx.sm .tpl-bx-dividers,.tpl-bx-dividers{-webkit-mask-image:url("pf-emblems/dividers.webp");mask-image:url("pf-emblems/dividers.webp");height:auto;width:112%;aspect-ratio:1108/828;right:-30%;top:34%;}
.tpl-bx.full .tpl-bx-anchor,.tpl-bx-anchor{-webkit-mask-image:url("pf-emblems/anchor.webp");mask-image:url("pf-emblems/anchor.webp");height:170%;width:auto;aspect-ratio:606/632;right:4%;top:50%;}
@media (hover:hover){.tpl-bx:hover .tpl-bx-art{transform:translateY(-50%) scale(1.05) rotate(-3deg);opacity:.28;}.tpl-bx.ink:hover .tpl-bx-art{opacity:.22;}.tpl-bx.accent:hover .tpl-bx-art{opacity:.55;}}
.tpl-bx::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 .45s var(--ease);}
.tpl-bx-body{display:flex;flex-direction:column;gap:12px;transform:translateY(28px);opacity:0;transition:transform 1s var(--ease-out) calc(var(--d) + 220ms),opacity .8s var(--ease) calc(var(--d) + 220ms);}
.tpl-bx.in .tpl-bx-body{transform:none;opacity:1;}
.tpl-bx h3{font-size:clamp(24px,2.3vw,calc(36px * var(--sc)));line-height:.95;color:inherit;max-width:18ch;}
.tpl-bx p{font-size:calc(17px * var(--sc));line-height:1.55;color:var(--c-ink-2);margin:0;max-width:46ch;text-wrap:pretty;}
.tpl-bx-n{position:absolute;top:clamp(12px,1.4vw,22px);right:clamp(18px,2vw,30px);z-index:-1;font-family:var(--font-display);font-weight:600;font-size:clamp(72px,8vw,calc(140px * var(--sc)));line-height:.8;color:transparent;-webkit-text-stroke:1px var(--c-rule-2);transition:transform .7s var(--ease-out),color .45s var(--ease),-webkit-text-stroke-color .45s var(--ease);}
.tpl-bx-go{position:absolute;top:clamp(20px,2.4vw,36px);left:clamp(24px,2.8vw,44px);width:calc(44px * var(--sc));height:calc(44px * var(--sc));border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;font-size:calc(17px * var(--sc));opacity:0;transform:translate(-8px,8px) rotate(0deg);transition:opacity .35s var(--ease),transform .55s var(--ease-out);}
.tpl-bx-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);}
.tpl-bx-list li{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--c-rule);font-size:calc(16px * var(--sc));color:var(--c-ink-2);}
.tpl-bx-list li::before{content:"✦";color:var(--c-accent);flex:none;font-size:.8em;line-height:1.9;}
@media (hover:hover){
  .tpl-bento:hover .tpl-bx:not(:hover){opacity:.5;}
  .tpl-bx:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);border-color:var(--c-rule-2);}
  .tpl-bx:hover::before{opacity:1;}
  .tpl-bx:hover .tpl-bx-n{transform:translate(-8px,6px) scale(1.06);color:color-mix(in srgb,currentColor 8%,transparent);-webkit-text-stroke-color:transparent;}
  .tpl-bx:hover .tpl-bx-go{opacity:1;transform:rotate(-45deg);}
}
/* sizes */
.tpl-bx.big{grid-column:span 2;grid-row:span 2;}
.tpl-bx.big h3{font-size:clamp(34px,3.8vw,calc(62px * var(--sc)));}
.tpl-bx.big p{font-size:clamp(16px,1.3vw,calc(19px * var(--sc)));}
.tpl-bx.wide{grid-column:span 2;}
.tpl-bx.full{grid-column:1/-1;min-height:clamp(170px,14vw,220px);}
.tpl-bx.full .tpl-bx-body{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:clamp(18px,4vw,70px);align-items:end;}
.tpl-bx.full p{max-width:62ch;}
/* tones */
.tpl-bx.ink{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-bg) !important;--spot:color-mix(in srgb,var(--c-bg) 12%,transparent);}
.tpl-bx.ink p,.tpl-bx.ink .tpl-bx-list li{color:color-mix(in srgb,var(--c-bg) 82%,var(--c-ink));}
.tpl-bx.ink .tpl-bx-list li{border-top-color:color-mix(in srgb,var(--c-bg) 16%,transparent);}
.tpl-bx.ink .tpl-bx-list li::before{color:var(--c-bg);}
.tpl-bx.ink .tpl-bx-n{-webkit-text-stroke-color:color-mix(in srgb,var(--c-bg) 22%,transparent);}
.tpl-bx.accent{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent) !important;--spot:color-mix(in srgb,var(--c-on-accent) 12%,transparent);}
.tpl-bx.accent p{color:color-mix(in srgb,var(--c-on-accent) 84%,var(--c-accent));}
.tpl-bx.accent .tpl-bx-n{-webkit-text-stroke-color:color-mix(in srgb,var(--c-on-accent) 26%,transparent);}
@media (max-width:860px){
  .tpl-bento{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tpl-bx.big{grid-row:span 1;}
  .tpl-bx.full .tpl-bx-body{grid-template-columns:1fr;}
  /* stacked, a tile's text can reach its top edge: keep the corner arrow (hover / in-focus)
     its own space so it never sits on the heading. The min-height gives the extra padding back,
     so only tiles whose text fills them grow; the rest keep their size and text position. */
  .tpl-bx{--go-room:calc(clamp(20px,2.4vw,36px) + 44px * var(--sc) + 14px - clamp(24px,2.8vw,44px));padding-top:calc(clamp(24px,2.8vw,44px) + var(--go-room));min-height:calc(clamp(230px,20vw,300px) - var(--go-room));}
  .tpl-bx.full{min-height:calc(clamp(170px,14vw,220px) - var(--go-room));}
}
@media (max-width:560px){
  .tpl-bento{grid-template-columns:1fr;}
  .tpl-bx.big,.tpl-bx.wide{grid-column:auto;}
  .tpl-bx-list{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){.tpl-bx{clip-path:none;}.tpl-bx-body{transform:none;opacity:1;}}

/* =======================  FAQ  ======================= */
.tpl-faq{border-top:1px solid var(--c-rule);}
.tpl-q{border-bottom:1px solid var(--c-rule);}
.tpl-q button{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:0;padding:clamp(22px,2.6vw,32px) 0;text-align:left;color:var(--c-ink);font-family:var(--font-display);font-weight:700;text-transform:var(--display-case);font-size:clamp(18px,1.7vw,calc(26px * var(--sc)));line-height:1.05;transition:color .25s;}
.tpl-q-t{flex:1;min-width:0;padding-right:20px;transition:transform .45s var(--ease-out);}
.tpl-q-n{flex:none;width:0;overflow:hidden;opacity:0;font-family:var(--font-mono);font-size:calc(12px * var(--sc));font-weight:500;letter-spacing:.12em;color:var(--c-accent);transition:width .45s var(--ease-out),opacity .3s var(--ease);}
.tpl-q button:hover .tpl-q-n,.tpl-q.on .tpl-q-n{width:calc(40px * var(--sc));opacity:1;}
.tpl-q button:hover{color:var(--c-accent);}
.tpl-q .pm{margin-left:auto;flex:none;width:30px;height:30px;border:1px solid var(--c-rule-2);border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:calc(15px * var(--sc));transition:transform .45s var(--ease-out),border-color .3s,background .3s;}
.tpl-q.on .pm{transform:rotate(45deg);background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);}
.tpl-q-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease);}
.tpl-q-a > div{overflow:hidden;min-height:0;}
.tpl-q.on .tpl-q-a{grid-template-rows:1fr;}
.tpl-q-a p{padding:0 0 clamp(22px,2.6vw,32px) calc(40px * var(--sc));max-width:66ch;color:var(--c-ink-2);font-size:calc(17px * var(--sc));text-wrap:pretty;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .5s var(--ease-out);}
.tpl-q.on .tpl-q-a p{opacity:1;transform:none;transition-delay:.12s;}
.tpl-faq2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,110px);align-items:start;}
.tpl-faq-side{position:sticky;top:calc(var(--nav-h) + 30px);}
.tpl-faq-side{min-width:0;}
.tpl-faq-side h2{font-size:clamp(40px,5.2vw,calc(96px * var(--sc)));overflow-wrap:anywhere;}
.tpl-faq-odo{height:1em;overflow:hidden;margin-top:clamp(30px,4vw,60px);font-family:var(--font-display);font-weight:600;font-size:clamp(90px,11vw,calc(190px * var(--sc)));line-height:1;color:transparent;-webkit-text-stroke:1px var(--c-rule-2);}
.tpl-faq-odo-strip{display:flex;flex-direction:column;transition:transform .8s var(--ease-out);}
.tpl-faq-odo-strip span{display:block;height:1em;}
.tpl-faq-count{display:block;margin-top:14px;font-family:var(--font-mono);font-size:calc(11px * var(--sc));letter-spacing:.2em;color:var(--c-muted);}
@media (max-width:860px){.tpl-faq2{grid-template-columns:1fr;}.tpl-faq-side{position:static;}.tpl-faq-odo,.tpl-faq-count{display:none;}}

/* =======================  IMPACT (accent flood)  ======================= */
.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);clip-path:circle(0px at 18% 30%);will-change:clip-path;}
.tpl-imp-in{position:relative;z-index:1;width:100%;color:var(--c-on-accent);}
.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;}
.tpl-imp-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;}
.tpl-imp-w > span{display:inline-block;transform:translateY(108%);transition:transform .75s var(--ease-out);}
.tpl-imp-w.on > span{transform:none;}
.tpl-imp-cite{display:block;margin-top:clamp(24px,3vw,40px);font-family:var(--font-mono);font-size:calc(12px * var(--sc));font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease-out);}
.tpl-imp-rule{height:1px;background:currentColor;margin:clamp(50px,7vw,100px) 0 clamp(26px,3vw,40px);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.2s var(--ease-out) .1s;}
.tpl-imp-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);}
.tpl-imp-cols > div{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .8s var(--ease-out);transition-delay:calc(.3s + var(--i) * 90ms);}
.tpl-imp-cols h4{font-family:var(--font-body);font-weight:700;font-size:calc(18px * var(--sc));margin:0 0 10px;}
.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.done .tpl-imp-cite,.tpl-imp.done .tpl-imp-cols > div{opacity:1;transform:none;}
.tpl-imp.done .tpl-imp-rule{transform:scaleX(1);}
.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;width:clamp(300px,38vw,640px);aspect-ratio:845/1047;overflow:hidden;margin-bottom:calc(-1 * clamp(50px,7vw,100px));opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease) .2s,transform 1.2s var(--ease-out) .2s;}
.tpl-imp-face img{display:block;width:100%;height:auto;}
.tpl-imp.q-in .tpl-imp-face,.tpl-imp.done .tpl-imp-face{opacity:1;transform:none;}
.tpl-imp-face{opacity:1;transform:none;transition:none;clip-path:circle(0px at -50% 0);will-change:clip-path;width:clamp(324px,41vw,690px);left:-40px;}
@media (max-width:860px){.tpl-imp-face{left:0;width:min(88%,454px);}}
/* stacked: the portrait sits above the quote with clear space below it (no overlap with the first line) */
@media (max-width:860px){.tpl-imp-top{grid-template-columns:1fr;}.tpl-imp-face{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;}}

/* =======================  CTA  ======================= */
.tpl-cta{position:relative;background:var(--c-bg);border-top:1px solid var(--c-rule);padding-top:clamp(64px,9vh,120px);}
.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(16px,1.3vw,calc(19px * 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);}
.tpl-loop{margin-top:clamp(90px,12vh,150px);background:var(--c-bg-2);border-top:1px solid var(--c-rule);padding:clamp(70px,10vh,120px) 0;}
.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(16px,1.3vw,calc(19px * 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(11px * 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(16px * 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);}}
@media (prefers-reduced-motion:reduce){.tpl-imp-bg{clip-path:none !important;}.tpl-imp-w > span{transform:none;}}

/* =======================  EXTRA CTA TOUCHPOINTS  ======================= */
.tpl-tl-act{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,42px);}
.tpl-step-act{margin-top:20px;padding:14px 22px;}
.tpl-float{display:none;}
@media (max-width:720px){
  .tpl-float{display:inline-flex;align-items:center;gap:10px;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;padding:15px 24px;border-radius:100px;background:var(--c-accent);color:var(--c-on-accent) !important;font-family:var(--font-mono);font-size:calc(12px * var(--sc));font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translate(-50%,160%);transition:transform .5s var(--ease-out);}
  .tpl-float.on{transform:translate(-50%,0);}
}

/* =======================  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-faq-side > .tpl-lab + *{position:relative;padding-bottom:calc(22px * var(--sc) + 16px * var(--sc));}
.tpl-faq-side > .tpl-lab + *::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(16px * var(--sc));background:var(--c-accent);-webkit-mask:url(pf-ornament/band-3.webp) left center/auto 100% repeat-x;mask:url(pf-ornament/band-3.webp) left center/auto 100% repeat-x;}
.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(16px * var(--sc));color:var(--c-ink-2);}
.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(10.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;}
.tpl-foot-col .tpl-btn{font-size:calc(12px * var(--sc));margin-top:14px;}
.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-mani-txt{font-size:calc(82px * 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(17px * var(--sc));}
  .tpl-prob-col h3{font-size:calc(40px * var(--sc));}
  .tpl-prob-n{font-size:calc(12px * var(--sc));}
  .tpl-prob-row p{font-size:calc(17px * var(--sc));}
  .tpl-explain-item h3{font-size:calc(34px * var(--sc));}
  .tpl-explain-item p{font-size:calc(17px * var(--sc));}

  .tpl-proof-sub{font-size:calc(19px * var(--sc));}
  .tpl-proof-stat-num{font-size:calc(56px * var(--sc));}
  .tpl-proof-stat-lab{font-size:calc(15px * var(--sc));}
  .tpl-proof-step-h{font-size:calc(11.5px * var(--sc));}
  .tpl-proof-step p{font-size:calc(17px * var(--sc));}
  .tpl-proof-quote{font-size:calc(30px * var(--sc));}

  .tpl-step{padding:calc(64px * var(--sc)) 0;}
  .tpl-step-n{font-size:calc(78px * var(--sc));}
  .tpl-step h3{font-size:calc(38px * var(--sc));}
  .tpl-step p{font-size:calc(17px * var(--sc));}

  .tpl-bx{min-height:calc(300px * var(--sc));padding:calc(44px * var(--sc));}
  .tpl-bx h3{font-size:calc(36px * var(--sc));}
  .tpl-bx.big h3{font-size:calc(62px * var(--sc));}
  .tpl-bx p{font-size:calc(17px * var(--sc));}
  .tpl-bx-n{font-size:calc(140px * var(--sc));}

  .tpl-q button{font-size:calc(26px * var(--sc));padding:calc(32px * var(--sc)) 0;}
  .tpl-faq-odo{font-size:calc(190px * var(--sc));}
  .tpl-faq-side h2{font-size:calc(96px * var(--sc));}
  .tpl-imp-q{font-size:calc(84px * var(--sc));}
  .tpl-cta-card p,.tpl-loop-d{font-size:calc(19px * var(--sc));}
  .tpl-q .pm{width:calc(30px * var(--sc));height:calc(30px * var(--sc));font-size:calc(15px * var(--sc));}
  .tpl-q-a p{font-size:calc(17px * var(--sc));padding-bottom:calc(32px * var(--sc));}

  .tpl-closer{padding:calc(190px * var(--sc)) 0;}
  .tpl-closer h2{font-size:calc(168px * var(--sc));}
  .tpl-foot-word{font-size:calc(150px * var(--sc));}
  .tpl-explain-grid h2{font-size:calc(96px * var(--sc));}
  .tpl-cta-card h2{font-size:calc(64px * var(--sc));}
  .tpl-foot-col a,.tpl-foot-col span{font-size:calc(16px * var(--sc));}
  .tpl-foot-fine span,.tpl-foot-fine a{font-size:calc(10.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;}

/* 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),.tpl-explain-list:is(.pf-focus,.pf-press),.tpl-proc > div:first-child:is(.pf-focus,.pf-press),.tpl-bx: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-explain-list:is(.pf-focus,.pf-press)::before,.tpl-proc > div:first-child:is(.pf-focus,.pf-press)::before,.tpl-bx:is(.pf-focus,.pf-press)::before,.tpl-cta-card:is(.pf-focus,.pf-press)::before{opacity:1;}
  .tpl-bx:is(.pf-focus,.pf-press) .tpl-bx-n{color:color-mix(in srgb,currentColor 8%,transparent);-webkit-text-stroke-color:transparent;}
  .tpl-bx:is(.pf-focus,.pf-press) .tpl-bx-go{opacity:1;}
  .tpl-bx:is(.pf-focus,.pf-press) .tpl-bx-art{opacity:.28;}
  .tpl-bx.ink:is(.pf-focus,.pf-press) .tpl-bx-art{opacity:.22;}
  .tpl-bx.accent:is(.pf-focus,.pf-press) .tpl-bx-art{opacity:.55;}
  .tpl-cta-card:is(.pf-focus,.pf-press)::after{opacity:.6;}
}
@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),.tpl-explain-list:is(.pf-focus,.pf-press),.tpl-proc > div:first-child:is(.pf-focus,.pf-press),.tpl-bx:is(.pf-focus,.pf-press){transform:translateY(-4px);}
  .pf-hold:is(.pf-focus,.pf-press) .tpl-explain-list,.pf-hold:is(.pf-focus,.pf-press) .pf-hold-hand img{transform:translateY(-12px);}
  .tpl-bx:is(.pf-focus,.pf-press) .tpl-bx-n{transform:translate(-8px,6px) scale(1.06);}
  .tpl-bx:is(.pf-focus,.pf-press) .tpl-bx-go{transform:rotate(-45deg);}
  .tpl-bx:is(.pf-focus,.pf-press) .tpl-bx-em{transform:rotate(-8deg) scale(1.06);}
  .tpl-bx:is(.pf-focus,.pf-press) .tpl-bx-art{transform:translateY(-50%) scale(1.05) rotate(-3deg);}
  .pf-h2-step:is(.pf-focus,.pf-press) .pf-h2-art img{transform:translateY(-5px) rotate(-2deg);}
  .tpl-cta-card:is(.pf-focus,.pf-press)::after{transform:rotate(-6deg) scale(1.06);}
}