/* ===========================================================================
   TrendFusion brand pack v2 — shared foundation, linked by every page.
   Tokens, fonts, typography, header, footer, buttons, ticker, rail controls,
   sticky chrome and the motion layer. Page-specific components stay in that
   page's own <style>. Font paths are relative to the site root.
   Rules marked LOAD-BEARING are depended on by the funnel's JavaScript.
   Font URLs are relative to THIS FILE, not to the page that links it.
   =========================================================================== */

/* ===========================================================================
   TRENDFUSION MENTORSHIP — brand pack v2
   Rebuilt 31 Aug 2026. Replaces the v1.6 stylesheet in full.

   Copy, section order, form logic, the TF_TRACK measurement layer and the
   Calendly routing are untouched. Everything here is treatment and motion.

   Functional rules the JS depends on are marked LOAD-BEARING. Do not remove
   or reorder them: .step/.active, .hidden, .err, .progress-fill width,
   .opt.checked, body.tf-on, .tf-capped, #tf-sticky, .tf-more.
   =========================================================================== */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-var.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url(../fonts/fraunces-var-italic.woff2) format('woff2');}
@font-face{font-family:'Schibsted';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/schibsted-var.woff2) format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/geist-var.woff2) format('woff2');}
@font-face{font-family:'Geist Fallback';src:local('Arial'),local('Helvetica');
  size-adjust:115.52%;ascent-override:87.0%;descent-override:25.54%;line-gap-override:0%;}

:root{
  --canvas:#F5F2F9; --card:#FFFFFF; --tint:#F1ECFA; --sunk:#E8E2F0;
  --ink:#1E1626; --ink-2:#4A3D50; --mute:#5F5566;
  --rule:#E2DCEB; --rule-2:#CFC6DC;
  --acc:#6425D0; --acc-deep:#5219B0; --acc-wash:rgba(100,37,208,.08);
  --acc-ring:rgba(100,37,208,.18);
  --hot:#FFA10A; --hot-soft:#FFF1D8; --hot-ink:#8A5A12;
  --deep:#2A1147; --deep-2:#361659; --deep-rule:#452474;
  --ink-txt:#FFFFFF; --ink-mute:#B6A9BE; --on-ink:#C4A8FF;
  --pos:#0F6B4F; --pos-ink:#4EBE96;
  /* vivid green: a FILL on a dark or coloured ground, ink on it — the amber rule
     applied to the semantic colour. Never text on light; --pos stays for that. */
  --pos-vivid:#10B981; --pos-glow:rgba(16,185,129,.16); --neg:#B0332A;
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --text:'Schibsted',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ui:'Geist','Geist Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --t-xs:12px; --t-sm:14px; --t-base:18px; --t-lg:20px;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r1:8px; --r2:12px; --r3:999px; --r4:18px;
  --ar-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11.4 5.2 16.2 10l-4.8 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ar-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17 10H4M8.6 5.2 3.8 10l4.8 4.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --sh-card:0 2px 20px rgba(30,22,38,.06);
  --sh-lift:0 10px 30px rgba(30,22,38,.10);
  --sh-btn:0 1px 2px rgba(30,22,38,.22), 0 8px 22px rgba(100,37,208,.22);
  --e:cubic-bezier(.2,.7,.25,1); --e-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--canvas);color:var(--ink);font-family:var(--text);
  font-size:var(--t-base);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.024em;line-height:1;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
strong{font-weight:400;font-style:italic;color:var(--acc);
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(18px,3.4vw,44px)}
.wrap-wide{max-width:1280px;margin:0 auto;padding:0 clamp(18px,3.4vw,44px)}
.hidden{display:none !important}                      /* LOAD-BEARING */

/* ---------------- header: the one amber bar ---------------- */
.site-header{background:var(--hot);color:var(--ink);position:relative;z-index:40;
  border-bottom:1px solid rgba(30,22,38,.16)}
/* The bar is chrome, not content: it runs the full width of the viewport on
   every page, so the lockup sits hard left and the chip hard right. It is the
   one element common to all four pages, and chrome that changes its margins page
   to page reads as a fault even when each page is internally consistent. */
.site-header .wrap{display:flex;align-items:center;gap:var(--s3);max-width:none;
  padding:11px clamp(20px,3vw,44px) 11px clamp(18px,1.6vw,26px)}
.logo-row{display:flex;align-items:center;gap:11px}
.logo-img{width:26px;height:26px;color:var(--ink);flex:none}
.logo-img svg{width:100%;height:100%;display:block}
.logo-badge{font-family:var(--ui);font-weight:500;font-size:var(--t-xs);letter-spacing:.21em;
  text-transform:uppercase;color:var(--ink)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:var(--s5)}
.places{font-family:var(--ui);font-weight:600;font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.appchip{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
  border-radius:var(--r3);padding:7px 15px 7px 12px;font-family:var(--ui);font-weight:600;
  font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none}
.appchip .d{width:6px;height:6px;border-radius:50%;background:var(--hot);flex:none}
@media(max-width:700px){.places{display:none}}
@media(max-width:520px){
  .logo-badge{letter-spacing:.16em}
  .appchip,.hdr-status,.topbar-back{padding:7px 13px 7px 10px;letter-spacing:.09em;gap:7px}
}
@media(max-width:380px){
  .appchip,.hdr-status,.topbar-back{padding:6px 10px 6px 8px;letter-spacing:.05em}
}
/* At 320 index's chip is 2px wider than the bar's content box and spills into the
   padding, so its right gutter measures 18 while the other three measure 20.
   Tightening the tracking buys ~5px and the four line up again. */
@media(max-width:340px){
  .appchip,.hdr-status,.topbar-back{letter-spacing:.02em}
}

.btn{font-family:var(--ui);font-weight:500;font-size:16px;background:var(--acc);color:#fff;
  border:1px solid var(--acc);padding:14px 24px;border-radius:var(--r3);cursor:pointer;
  box-shadow:var(--sh-btn);display:inline-flex;align-items:center;gap:9px;
  transition:background .2s var(--e),transform .2s var(--e),box-shadow .2s var(--e)}
.btn:hover{background:var(--acc-deep);transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(30,22,38,.22), 0 14px 32px rgba(100,37,208,.30)}
#backBtn{background:transparent;color:var(--ink);border-color:var(--rule-2);box-shadow:none}
#backBtn:hover{background:transparent;border-color:var(--ink);transform:none;box-shadow:none}/* ---------------- marquee: visible, travelling right ---------------- */
.scroll-bar{border-block:1px solid var(--rule-2);background:var(--card);overflow:hidden;
  padding:15px 0}
.scroll-track{display:flex;align-items:center;gap:var(--s5);width:max-content;
  animation:mq 46s linear infinite;will-change:transform}
.scroll-track span{font-family:var(--ui);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
@keyframes mq{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(hover:hover) and (pointer:fine){.scroll-bar:hover .scroll-track{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.scroll-track{animation:none;transform:translateX(-25%)}}

.railctl{display:none}
@media(max-width:759px){
  .railctl{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s5)}
  .railbtn{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--rule-2);
    background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;
    font-size:16px;line-height:1;padding:0;
    transition:border-color .18s var(--e),background .18s var(--e),opacity .18s var(--e)}
  .railbtn:disabled{opacity:.3;cursor:default}
  .railbtn:not(:disabled):active{background:var(--tint);border-color:var(--acc)}
  .railtrack{flex:1;height:3px;background:var(--rule);border-radius:var(--r3);overflow:hidden}
  .railtrack i{display:block;height:100%;width:30%;background:var(--acc);border-radius:var(--r3);
    transform:translateX(0);transition:transform .14s linear}
}
/* ---------------- footer ---------------- */
footer{background:var(--deep);color:var(--ink-mute);padding:0 0 clamp(44px,5vw,70px)}
footer .wrap{border-top:1px solid var(--deep-rule);padding-top:clamp(30px,3.4vw,44px);
  display:grid;gap:var(--s3);justify-items:start;
  grid-template-areas:"lock" "tag" "link" "legal"}
@media(min-width:820px){
  footer .wrap{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"lock" "tag" "link" "legal"}
}
.footer-logo{grid-area:lock;display:flex;align-items:center;gap:11px;margin-bottom:var(--s2)}
.footer-tagline{grid-area:tag}
.footer-link-row{grid-area:link}
.footer-legal{grid-area:legal;margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--deep-rule);width:100%;max-width:none}
@media(min-width:820px){.footer-legal{padding-right:38%}}
.footer-logo .logo-img,.footer-logo .logo-badge{color:var(--ink-txt)}
.footer-tagline{font-size:var(--t-sm);max-width:44ch;margin:0}
.footer-link-row{font-size:var(--t-sm);margin:0}
.footer-link-row a{color:var(--on-ink);text-decoration:none}
.footer-link-row a + a{margin-left:var(--s5)}
@media(hover:hover) and (pointer:fine){.footer-link-row a:hover{text-decoration:underline}}
footer a{color:var(--on-ink);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .18s var(--e)}
footer a:hover{border-color:var(--on-ink)}
.footer-legal{font-size:var(--t-xs);line-height:1.65;color:#9A8FA6}
.back-link{font-family:var(--ui);font-size:var(--t-sm)}

/* ---------------- sticky chrome, both tied to the VSL ---------------- */
#tf-topbar{position:fixed;left:0;right:0;top:0;z-index:70;background:var(--hot);
  border-bottom:1px solid rgba(30,22,38,.16);transform:translateY(-102%);
  transition:transform .3s var(--e)}
body.tf-past-hero #tf-topbar{transform:none}
/* Geometry IDENTICAL to .site-header .wrap above. It used to be a centred 1280
   container with symmetric padding, which put the sticky bar's logo 101px further
   in than the static bar's at 1440 and stopped its CTA 81px short of where the
   header chip stops — the bar visibly jumped as it appeared. The static bar is
   chrome that runs the full width of the viewport with the lockup hard left and
   the chip hard right; the sticky bar is the same bar, so it takes the same rule.
   Measured at nine widths, both bars now agree to the pixel. */
#tf-topbar .in{max-width:none;margin:0;
  padding:11px clamp(20px,3vw,44px) 11px clamp(18px,1.6vw,26px);
  display:flex;align-items:center;gap:var(--s3)}
#tf-topbar .mk{display:flex;align-items:center;gap:11px}
#tf-topbar .logo-img{width:26px;height:26px;color:var(--ink)}
#tf-topbar .nm{font-family:var(--ui);font-weight:500;font-size:var(--t-xs);letter-spacing:.21em;
  text-transform:uppercase;color:var(--ink)}
#tf-topbar a.go{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border-radius:var(--r3);padding:7px 15px 7px 12px;
  font-family:var(--ui);font-weight:600;font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--e)}
#tf-topbar a.go:hover{background:#3A2C41}
/* The same shrink steps the header chip takes. They MUST live here, below
   #tf-topbar a.go's base rule — added to the header's media queries higher up
   they lost, because that selector list and the base rule are both ID-specificity
   and the base came later in source order. Without these the sticky bar measured
   56.4px against the static bar's 54.4px at 375 and below. */
@media(max-width:520px){#tf-topbar a.go{padding:7px 13px 7px 10px;letter-spacing:.09em;gap:7px}}
@media(max-width:380px){#tf-topbar a.go{padding:6px 10px 6px 8px;letter-spacing:.05em}}
@media(max-width:340px){#tf-topbar a.go{letter-spacing:.02em}}
@media(prefers-reduced-motion:reduce){#tf-topbar{transition:none}}

/* a small floating apply pill for desktop, where the full-width bottom bar
   would be wrong. Same trigger as the top bar. */
#tf-fab{position:fixed;right:clamp(18px,2.4vw,34px);bottom:clamp(18px,2.4vw,34px);z-index:65;
  display:none;opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .3s var(--e),transform .3s var(--e)}
body.tf-past-hero #tf-fab{opacity:1;transform:none;pointer-events:auto}
#tf-fab a{display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:#fff;
  border-radius:var(--r3);padding:14px 24px;font-family:var(--ui);font-weight:500;font-size:15px;
  text-decoration:none;box-shadow:0 10px 32px rgba(100,37,208,.34),0 2px 6px rgba(30,22,38,.18);
  transition:background .2s var(--e),transform .2s var(--e)}
#tf-fab a:hover{background:var(--acc-deep);transform:translateY(-2px)}
#tf-fab .ar{transition:transform .2s var(--e)}
#tf-fab a:hover .ar{transform:translateX(3px)}
@media(min-width:769px){#tf-fab{display:block}}
@media(prefers-reduced-motion:reduce){#tf-fab{transition:none}}

/* ---------------- the JS-built mobile sticky bar ---------------- */
#tf-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;                /* LOAD-BEARING */
  padding:12px clamp(18px,3.4vw,44px) calc(12px + env(safe-area-inset-bottom));
  background:rgba(245,242,249,.92);backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--rule);transform:translateY(130%);
  transition:transform .3s var(--e);display:block}
#tf-sticky.show{transform:translateY(0)}                                     /* LOAD-BEARING */
#tf-sticky a{display:flex;align-items:center;justify-content:center;min-height:52px;
  border-radius:var(--r2);background:var(--acc);color:#fff;font-family:var(--ui);
  font-size:16px;font-weight:500;letter-spacing:.005em;text-decoration:none;
  box-shadow:var(--sh-btn)}
body.tf-sticky-on{padding-bottom:82px}                                       /* LOAD-BEARING */
/* retimed to the VSL rather than the application card. Higher specificity than
   the script's own #tf-sticky.show, so the script is left untouched. */
body.tf-past-hero #tf-sticky{transform:translateY(0)}
body:not(.tf-past-hero) #tf-sticky{transform:translateY(130%)}
@media(prefers-reduced-motion:reduce){#tf-sticky{transition:none}}

/* scroll reveal. Applied by the block at the end of <body>, so no markup carries it.
   Nothing here transforms an ancestor of #tf-sticky, which is appended to <body>. */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .66s var(--e-out),transform .66s var(--e-out);
  transition-delay:calc(var(--i,0) * 60ms)}
.rv.in{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.hero :focus-visible,.final-cta :focus-visible,footer :focus-visible{outline-color:var(--on-ink)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .hero h1,.vsl-container,.cta-sub{opacity:1}
  .rv{opacity:1 !important;transform:none !important}
  /* park the loop on a whole item so the still state reads as a design, not a fault */
  .scroll-track{animation:none !important;transform:translateX(-25%)}
}


/* ---- arrows -------------------------------------------------------------
   U+2192 and U+2190 exist in none of the three embedded faces, so every arrow
   on this funnel was rendering from whatever system serif the device had.
   Drawn as a mask instead: inherits colour, weight-independent, no text node. */
.ar,.arrow{display:inline-block;width:1em;height:1em;flex:none;
  vertical-align:-.11em;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:transform .2s var(--e)}
.ar,.arrow,.ar-r{-webkit-mask-image:var(--ar-r);mask-image:var(--ar-r)}
.ar-l{-webkit-mask-image:var(--ar-l);mask-image:var(--ar-l)}
@media(prefers-reduced-motion:reduce){.ar,.arrow{transition:none}}