/* DFRNT Group landing. Spliced from the cmo-design landing exemplar (assets/landing):
   same parts, same motion grammar, DFRNT ramp, face, plate and copy.
   The --lp-* ramp leans on the brand green #143e32. White text sits on --lp-600 or deeper. */
@font-face{font-family:Onest;src:url("assets/fonts/onest-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{
  --lp-900:#0a261d;
  --lp-800:#143e32;
  --lp-700:#1d5242;
  --lp-600:#276650;
  --lp-500:#3f8068;
  --lp-400:#78a894;
  --lp-300:#a7c9b9;
  --lp-200:#cde2d7;
  --lp-100:#e4f0e9;
  --lp-50:#f2f8f4;
  --lp-ink:#18392e;
  --lp-ink-2:#24443a;
  --lp-ink-3:#3a5248;
  --lp-mute:#58665d;
  --lp-paper:#fcfcf9;
  --lp-n-50:#f0f2ec;
  --lp-n-150:#e3e7df;
  --lp-n-200:#dce1d9;
  /* the one illustration secondary: sandstone */
  --lp-sand:#9a4a1f;
  --lp-sand-50:#fbf3ec;
  --lp-sand-100:#f6e6d6;
  --lp-sand-300:#e5bf9c;
  /* the plate's own sky, sampled from dfrnt-dusk */
  --lp-dusk-0:#041914;
  --lp-dusk-1:#0c2d21;
  --lp-dusk-2:#1b402f;
  --lp-glow:#d7d8a1;
  --lp-600-rgb:39,102,80;
  --lp-700-rgb:29,82,66;
  --lp-800-rgb:20,62,50;
  --lp-900-rgb:10,38,29;
  --lp-ink-rgb:24,57,46;
  --lp-sand-rgb:154,74,31;
  --lp-glow-rgb:215,216,161;
  --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--lp-400) var(--lp-paper);scrollbar-width:thin}
html,body{margin:0}
body{background:var(--lp-paper);color:var(--lp-ink);font-family:Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--lp-600)}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
h1,h2,h3,p,dl,dd{margin:0}
svg{flex:none}
:focus-visible{outline:2px solid var(--lp-500);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
::selection{background:var(--lp-200);color:var(--lp-900)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:16px;z-index:70;padding:10px 16px;border-radius:999px;background:var(--lp-800);color:#fff;font-size:14px;text-decoration:none}
.skip:focus{top:12px}

/* reveal: visible by default, hidden only once JS is confirmed */
.js [data-r]{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .7s var(--out),transform .7s var(--out),filter .7s var(--out)}
.js [data-r].in{opacity:1;transform:none;filter:none}

/* ================= DFRNT ================= */
.sc{--ink:var(--lp-ink);--mute:var(--lp-mute);background:var(--lp-paper);color:var(--ink);overflow:hidden}
.sc-hero{position:relative;margin:12px;border-radius:22px;overflow:hidden;background:var(--lp-dusk-0);min-height:min(92vh,820px);color:#fff;isolation:isolate;display:flex;flex-direction:column}
.sc-sky{position:absolute;inset:0;z-index:-4;background:linear-gradient(180deg,var(--lp-dusk-0) 0%,var(--lp-dusk-1) 22%,var(--lp-dusk-2) 44%,var(--lp-700) 100%)}
.sc-plate{position:absolute;inset:0;z-index:-3;background:url(assets/plate/dfrnt-dusk.webp) 50% 100%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%);transform-origin:50% 100%;animation:platein 1.4s var(--out) both}
@keyframes platein{from{transform:translate3d(0,60px,0) scale(1.14);opacity:0}}
.sc-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(var(--lp-900-rgb),.55) 0%,rgba(var(--lp-900-rgb),.3) 42%,transparent 64%)}
.sc-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 28px}
.sc-logo{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none}
.sc-links{display:flex;gap:28px;font-size:14px}
.sc-links a{padding:10px 0;text-decoration:none;opacity:.9;transition:opacity .2s var(--out)}
.sc-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.sc-nav .ghost{display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.55);color:#fff;font-size:13px;font-weight:500;text-decoration:none;transition:background .2s var(--out)}
.sc-nav .ghost:hover{background:rgba(255,255,255,.14)}
/* the DFRNT Group lockup, Option A (Tehbyn 6 Oct 2026, brand/dfrnt-group-logo): Onest 800 wordmark, reversed R, Onest 600 submark at 30% */
.dfrnt-brand{display:inline-block;width:max-content;font-size:var(--brand-size,31px);line-height:1;color:currentColor}
.dfrnt-brand__wordmark{display:block;font-weight:800;line-height:1;letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap}
.dfrnt-brand__accent{display:inline-block;transform:translateX(.061em) scaleX(-1);transform-origin:center}
.dfrnt-brand__submark{display:block;width:100%;font-size:.30em;font-weight:600;line-height:1;letter-spacing:.30em;text-align:right;text-transform:uppercase;white-space:nowrap;transform:translate(-.2em,.02em)}
.sc-copy{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(28px,8vh,84px) 16px 0;transform:translate3d(0,calc(var(--p,0)*-120px),0);opacity:calc(1 - var(--p,0)*1.1)}
.sc-h1{font-size:clamp(46px,8.6vw,124px);font-weight:560;letter-spacing:-.045em;line-height:.95;--d:250ms}
/* one We, a swapping icon, a swapping verb: the verb uses the page's word-mask rise */
.sc-rot{display:inline-flex;align-items:center;gap:.16em;white-space:nowrap}
.sc-ico{display:inline-grid;width:.9em;height:.9em}
.sc-ico i{grid-area:1/1;background:50%/contain no-repeat;opacity:0;transform:scale(.6) rotate(-8deg);filter:blur(8px);transition:opacity .6s var(--out),transform 1s var(--out),filter .8s var(--out)}
.sc-ico i.on{opacity:1;transform:none;filter:none}
/* an icon carries its image only while it shows or leaves, so nothing hidden loads */
.sc-ico i.on:nth-child(1),.sc-ico i.out:nth-child(1){background-image:url(assets/icons/pool.webp)}
.sc-ico i.on:nth-child(2),.sc-ico i.out:nth-child(2){background-image:url(assets/icons/cone.webp)}
.sc-ico i.on:nth-child(3),.sc-ico i.out:nth-child(3){background-image:url(assets/icons/pergola.webp)}
.sc-verbs{display:inline-grid;justify-items:start;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;text-align:left;clip-path:inset(.05em 0 0 0)}
.sc-verb{grid-area:1/1;transform:translateY(108%) rotate(4deg);transform-origin:0 100%;transition:transform 1s var(--out)}
.sc-verb.on{transform:none}
.sc-verb.out{transform:translateY(-108%) rotate(-4deg)}
.js .sc-h1:not(.split-in) .sc-verb.on{transform:translateY(108%) rotate(4deg)}
.js .sc-h1:not(.split-in) .sc-ico i.on{opacity:0;transform:scale(.6) rotate(-8deg);filter:blur(8px)}
.sc-h1:not(.ready) .sc-ico i{transition-delay:305ms}
.sc-h1:not(.ready) .sc-verb{transition-delay:360ms}
.sc-sub{max-width:500px;margin:24px auto 0;font-size:17px;line-height:1.5;text-wrap:balance;color:rgba(255,255,255,.92);animation:fadein 1s .5s var(--out) both}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}}
.sc-ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px;animation:fadein 1s .8s var(--out) both}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid transparent;text-decoration:none;transition:transform .2s var(--out),box-shadow .2s var(--out),background .2s var(--out),border-color .2s var(--out)}
.btn svg{transition:transform .2s var(--out)}
.btn:hover svg{transform:translateX(3px)}
.sc .fill{background:linear-gradient(180deg,var(--lp-600),var(--lp-700));color:#fff;box-shadow:0 8px 20px -8px rgba(var(--lp-700-rgb),.7),inset 0 1px 0 rgba(255,255,255,.25)}
.sc .fill:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(var(--lp-700-rgb),.8),inset 0 1px 0 rgba(255,255,255,.25)}
.sc .line{background:#fff;color:var(--lp-700);border-color:rgba(var(--lp-600-rgb),.28)}
.sc .line:hover{border-color:var(--lp-600)}
/* on the dusk sky the filled button turns to daylight and the outline goes clear */
.sc-hero .fill,.sc-band .fill{background:#fff;color:var(--lp-800);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.sc-hero .fill:hover,.sc-band .fill:hover{box-shadow:0 14px 28px -12px rgba(0,0,0,.55)}
.sc-hero .line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sc-hero .line:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* trust row */
.sc-marq{padding:28px 0 6px}
.sc-marq ul{list-style:none;margin:0;padding:0 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;font-size:14px;color:var(--lp-ink-3)}
.sc-marq li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sc-marq b{font-weight:600;color:var(--lp-ink)}
.sc-marq svg{color:var(--lp-600)}

/* sections */
.sc-sec{padding:96px clamp(16px,5vw,64px)}
.sc-in{max-width:1240px;margin:0 auto}
.sc-h2{font-size:clamp(30px,3.6vw,48px);font-weight:560;letter-spacing:-.04em;line-height:1.04;text-wrap:balance;max-width:22ch}

/* the three businesses: one card anatomy, a live scene each */
/* one height for every card: each card spans four shared rows (scene, name, line, links) so names, lines and dividers align */
.sc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:0;margin-top:40px}
/* each card wears its business's own brand, the way Tradie School sub-brands its pro instructors:
   dark brand gradient, accent mark tile + wordmark + trade line, accent links, a scene tinted in the brand */
.sc-card--mfp{--sb-c1:#07032d;--sb-c2:#1b1650;--sb-acc:#c97d44;--sb-glyph:#07032d;--sb-text:#e3a06b;--sb-ink:#07032d;--sb-t1:#f6efe8;--sb-t2:#ead3bd;--sb-rgb:7,3,45}
.sc-card--ts{--sb-c1:#0f1a27;--sb-c2:#172535;--sb-acc:#0858f8;--sb-glyph:#ffffff;--sb-text:#8fb3ff;--sb-ink:#0858f8;--sb-t1:#eaf1fd;--sb-t2:#c6d9f9;--sb-rgb:15,26,39}
.sc-card--leads{--sb-c1:#0a261d;--sb-c2:#143e32;--sb-text:#a7c9b9;--sb-ink:#1d5242;--sb-t1:#f2f8f4;--sb-t2:#cde2d7;--sb-rgb:10,38,29}
.sc-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;margin-bottom:16px;color:#fff;background:linear-gradient(150deg,var(--sb-c1) 0%,var(--sb-c1) 45%,var(--sb-c2) 100%);border-radius:22px;padding:8px;border:1px solid rgba(255,255,255,.06);box-shadow:0 20px 40px -28px rgba(var(--sb-rgb),.6);scroll-margin-top:24px;transition:transform .3s var(--out),box-shadow .3s var(--out)}
.sc-card:hover{transform:translateY(-3px);box-shadow:0 28px 50px -26px rgba(var(--sb-rgb),.7)}
.sc-scene{position:relative;height:260px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:var(--lp-dusk-1)}
.sc-scene.b,.sc-scene.s{background:linear-gradient(180deg,var(--sb-t1),var(--sb-t2))}
.sc-card h3{margin:20px 12px 12px;font-weight:600}
/* the businesses' own logos, white on their brand colour */
.sb-logo{display:block;height:48px;width:auto}
.sb-logo--ts{height:46px}
.sb-group{--brand-size:38.5px;color:#fff}
/* operate: photos from the MFP Easy website crossfade while on screen; each carries its image only while shown */
.sc-gallery i{position:absolute;inset:0;background:50%/cover no-repeat;opacity:0;transform:scale(1.04);transition:opacity .9s var(--out),transform 1s var(--out)}
.sc-gallery i.on{opacity:1;transform:none}
.sc-gallery i.on:nth-child(1),.sc-gallery i.out:nth-child(1){background-image:url(assets/pools/mfp-twilight.webp)}
.sc-gallery i.on:nth-child(2),.sc-gallery i.out:nth-child(2){background-image:url(assets/pools/mfp-valentina.webp)}
.sc-gallery i.on:nth-child(3),.sc-gallery i.out:nth-child(3){background-image:url(assets/pools/mfp-family.webp)}
/* educate: Smoko beside the course stack */
.sc-card--ts .sc-scene{place-items:center start;padding-left:18px}
.sc-card--ts .stack{width:min(58%,250px)}
.sc-card--ts .stack>div{grid-template-columns:36px 1fr;gap:10px;padding:12px}
.sc-card--ts .stack img{width:36px;height:36px}
.sc-card--ts .stack b{font-size:15px}
.smoko{position:absolute;right:-8px;bottom:-14px;z-index:1;width:min(48%,224px);height:auto;filter:drop-shadow(0 14px 18px rgba(8,88,248,.25))}
/* generate: the ten lead types from app.dfrntgroup.com/leads */
.lt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:min(330px,86%)}
.lt i{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:#fff;box-shadow:0 8px 18px -12px rgba(var(--sb-rgb),.55)}
.lt img{width:76%;height:auto}
.sc-card>p{margin:0 12px 20px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.74)}
.sc-go{align-self:start;list-style:none;margin:0 4px 2px;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.sc-go a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 8px;border-radius:10px;font-size:15px;font-weight:600;color:var(--sb-text);text-decoration:none;transition:background .2s var(--out)}
.sc-go a:hover{background:rgba(255,255,255,.07)}
.sc-card :focus-visible{outline-color:var(--sb-text)}
.sc-go a:hover svg{transform:translate(2px,-2px)}
.sc-go svg{transition:transform .2s var(--out)}
.tag{position:absolute;z-index:2;padding:6px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--sb-ink,var(--lp-700));box-shadow:0 6px 16px -8px rgba(var(--sb-rgb,var(--lp-700-rgb)),.5);transform:rotate(-6deg)}
.stack{position:relative;width:74%;height:150px}
.stack>div{position:absolute;inset:auto 0 0 0;height:100px;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -16px rgba(var(--sb-rgb),.45);font-size:13px;color:#606c8d;opacity:0;transform:translateY(-54px) scale(.82);transition:transform .5s var(--out),opacity .5s var(--out)}
.stack>div:nth-last-child(3){transform:translateY(-36px) scale(.88);opacity:.6}
.stack>div:nth-last-child(2){transform:translateY(-18px) scale(.94);opacity:.85}
.stack>div:last-child{transform:none;opacity:1}
.stack img{width:44px;height:44px}
.stack b{display:block;margin-bottom:2px;font-size:16px;font-weight:600;letter-spacing:-.02em;color:#0a0a0b}

/* this quarter: the managed snapshot, figures count up */
.sc-q{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;margin-top:44px}
.sc-q>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px}
.sc-q dd{font-size:clamp(30px,3.3vw,46px);font-weight:560;letter-spacing:-.04em;line-height:1;color:var(--lp-800);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-q dt{font-size:14px;color:var(--mute)}
.sc-period{margin-top:20px;font-size:13px;color:var(--mute)}

/* our story */
.sc-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);align-items:end}
.sc-story p{max-width:52ch;font-size:18px;line-height:1.6;color:var(--lp-ink-2)}

/* recognition: one flat anatomy per entry, grouped by whitespace */
.toggle{position:relative;display:inline-flex;max-width:100%;margin-top:24px;padding:4px;border-radius:999px;background:var(--lp-n-50);overflow-x:auto;scrollbar-width:none}
.toggle::-webkit-scrollbar{display:none}
.toggle button{position:relative;z-index:1;flex:none;min-height:40px;padding:8px 16px;border:0;border-radius:999px;background:none;font-size:14px;font-weight:500;color:var(--mute);white-space:nowrap;transition:color .25s var(--out)}
.toggle button[aria-pressed=true]{color:var(--lp-ink)}
.toggle small{margin-left:6px;font-size:12px;font-weight:600;color:var(--lp-600);font-variant-numeric:tabular-nums}
.toggle .th{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:#fff;box-shadow:0 2px 8px -2px rgba(var(--lp-ink-rgb),.2);transition:transform .35s var(--out),width .35s var(--out)}
.rc-grid{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}
.rc-item[data-off]{display:none}
.rc-card{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.rc-vis{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:16px;background:var(--lp-n-50);overflow:hidden;transition:background .25s var(--out)}
.rc-card:hover .rc-vis{background:var(--lp-100)}
.rc-vis img{transition:transform .5s var(--out)}
.rc-card:hover .rc-vis img{transform:scale(1.04)}
.rc-vis .badge{width:42%;height:auto}
.rc-vis .logo{width:56%;height:auto;max-height:64%;object-fit:contain;border-radius:10px}
.rc-vis .trophy{position:absolute;inset:6% 0;width:100%;height:88%;object-fit:contain}
.rc-vis .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-card h3{margin:16px 0 4px;font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.rc-who{font-size:14px;line-height:1.45;color:var(--mute)}
.rc-meta{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:12px;font-size:13px;line-height:1.45;color:var(--lp-ink-3)}
.rc-who+.rc-meta{margin-top:12px}
.rc-meta span{display:inline-flex;align-items:center;gap:4px}
.rc-meta span+span{color:var(--mute)}
.rc-more{display:flex;justify-content:center;margin-top:40px}

/* the plate returns as a closing band */
.sc-band{position:relative;margin:0 clamp(16px,5vw,64px);border-radius:22px;overflow:hidden;color:#fff;text-align:center;padding:72px 16px 0;min-height:560px;background:var(--lp-dusk-0) url(assets/plate/dfrnt-dusk.webp) 50% 100%/cover no-repeat}
.sc-band h2{max-width:20ch;margin:0 auto;font-size:clamp(30px,3.8vw,50px);font-weight:560;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.sc-band p{max-width:440px;margin:14px auto 26px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.92)}

/* next move: scattered icons sort into a grid; a row lights its pair */
.sc-feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;margin-top:40px}
.sc-box{position:relative;aspect-ratio:5/4;border-radius:22px;background:linear-gradient(180deg,var(--lp-50),var(--lp-200));overflow:hidden}
.chip{position:absolute;left:0;top:0;width:88px;height:88px;border-radius:22px;background:#fff;display:grid;place-items:center;box-shadow:0 12px 24px -14px rgba(var(--lp-600-rgb),.7);transition:transform .9s var(--out),box-shadow .3s var(--out),background .3s var(--out)}
.chip img{width:62px;height:62px;object-fit:contain}
.chip.hot{background:var(--lp-700);box-shadow:0 0 0 8px rgba(var(--lp-600-rgb),.18),0 16px 30px -12px rgba(var(--lp-600-rgb),.8)}
.sc-flist{display:grid;gap:8px}
.sc-f{display:grid;grid-template-columns:44px 1fr 20px;gap:16px;align-items:center;padding:18px;border-radius:16px;color:inherit;text-decoration:none;transition:background .25s var(--out)}
.sc-f:hover,.sc-f.hot,.sc-f:focus-visible{background:var(--lp-50)}
.sc-f i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--lp-100);color:var(--lp-600)}
.sc-f h3{font-size:18px;font-weight:600;letter-spacing:-.02em}
.sc-f p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--mute)}
.sc-f p b{font-weight:600;color:var(--lp-ink-2)}
.sc-f>svg{color:var(--lp-600);transition:transform .2s var(--out)}
.sc-f:hover>svg{transform:translateX(3px)}

/* footer: the plate again behind the scrim */
.sc-foot{position:relative;margin:0 12px 12px;border-radius:22px;overflow:hidden;color:#fff;padding:48px clamp(16px,5vw,56px) 220px;background:var(--lp-dusk-0) url(assets/plate/dfrnt-dusk.webp) 50% 92%/cover no-repeat;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px;font-size:14px}
.sc-foot b{display:block;margin-bottom:10px;font-size:15px;font-weight:600}
.sc-foot a{display:block;padding:4px 0;text-decoration:none;opacity:.88}
.sc-foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.sc-foot .sc-logo{display:inline-flex;margin-bottom:12px;opacity:1}
.sc-foot p{opacity:.88}

/* ============ motion layer ============ */
.sc-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--lp-700),var(--lp-400));transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none}
/* hero: the lights come up on the dusk plate, then it settles with depth */
.sc-dawn{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,var(--lp-dusk-0) 0%,rgba(4,25,20,.94) 55%,rgba(4,25,20,.82) 100%);animation:dawn 2.4s .15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes dawn{to{opacity:0}}
.sc-sun{position:absolute;left:50%;top:74%;width:120vmax;height:50vmax;translate:-50% -50%;z-index:-2;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--lp-glow-rgb),.4),rgba(var(--lp-glow-rgb),.12) 45%,transparent 70%);mix-blend-mode:screen;opacity:.5;animation:sun 2.8s .1s var(--out) both}
@keyframes sun{from{opacity:0;transform:scale(.3)}60%{opacity:.8}}
.sc-plate{transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--p,0)*40px + var(--my,0)*-8px),0) scale(calc(1.06 - var(--p,0)*.03));transition:transform .9s var(--out)}
.sc-copy{translate:calc(var(--mx,0)*6px) calc(var(--my,0)*4px);transition:translate .9s var(--out)}
/* word masks: every heading rises word by word */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .wi{display:inline-block;transform:translateY(108%) rotate(4deg);transform-origin:0 100%;transition:transform 1s var(--out);transition-delay:calc(var(--i)*55ms + var(--d,0ms))}
.js .split-in .wi{transform:none}
/* strokes draw themselves */
.js .draw svg,.js .sc-f i svg{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--out)}
.js .draw.in svg,.js .sc-f.in i svg{stroke-dashoffset:0}
.sc-marq li:nth-child(2) svg{transition-delay:.1s}.sc-marq li:nth-child(3) svg{transition-delay:.2s}.sc-marq li:nth-child(4) svg{transition-delay:.3s}.sc-marq li:nth-child(5) svg{transition-delay:.4s}
/* scene tags land; lead-type tiles pop in */
.js .lt i{transform:scale(.4);opacity:0;transition:transform .6s var(--out),opacity .4s var(--out)}
.js .in .lt i{transform:none;opacity:1}
.lt i:nth-child(2){transition-delay:.03s}.lt i:nth-child(3){transition-delay:.06s}.lt i:nth-child(4){transition-delay:.09s}.lt i:nth-child(5){transition-delay:.12s}.lt i:nth-child(6){transition-delay:.15s}.lt i:nth-child(7){transition-delay:.18s}.lt i:nth-child(8){transition-delay:.21s}.lt i:nth-child(9){transition-delay:.24s}.lt i:nth-child(10){transition-delay:.27s}
.js .sc-scene .tag{opacity:0;scale:.6;transition:opacity .4s var(--out),scale .6s var(--out);transition-delay:.35s}
.js .in .sc-scene .tag{opacity:1;scale:1}
/* next move: chips settle and breathe */
.chip.bob{animation:bob 4.8s ease-in-out infinite}
.chip.bob:nth-child(2n){animation-delay:-1.6s}.chip.bob:nth-child(3n){animation-delay:-3.1s}
@keyframes bob{50%{translate:0 -6px}}
/* band and footer: the house climbs into frame as you arrive */
.sc-band,.sc-foot{background-position:50% calc(100% + 80px - var(--bp,0)*80px)!important}
.sc-band>*,.sc-foot>*{position:relative;z-index:1}
.sc-band::before,.sc-foot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--lp-900-rgb),.72) 0%,rgba(var(--lp-800-rgb),.38) 38%,transparent 62%)}

@media (max-width:1100px){.rc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1180px){
  .sc-grid{grid-template-columns:1fr 1fr}
  .sc-grid>:first-child{grid-column:1/-1}
}
@media (max-width:980px){
  .sc-q{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .sc-nav{flex-wrap:wrap;row-gap:2px}
  .sc-links{order:3;width:100%;gap:22px;font-size:13px}
  .sc-links a{padding:8px 0}
  .sc-feat,.sc-story{grid-template-columns:1fr}
  .rc-grid{grid-template-columns:1fr 1fr}
  .sc-foot{grid-template-columns:1fr 1fr;padding-bottom:180px}
  .sc-foot>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .sc-hero{margin:8px;border-radius:18px;min-height:min(88vh,760px)}
  .sc-nav{padding:14px 16px}
  .sc-plate,.sc-band,.sc-foot{background-image:url(assets/plate/dfrnt-dusk-900.webp)}
  .sc-grid{grid-template-columns:1fr}
  .sc-sec{padding-block:72px}
  .sc-band{min-height:520px;padding-top:56px}
  .sc-foot{margin:0 8px 8px}
  .chip{width:68px;height:68px;border-radius:18px}
  .chip img{width:48px;height:48px}
}
@media (max-width:520px){
  .sc-ctas{flex-direction:column;align-items:stretch;width:100%;max-width:320px}
  .sc-q{gap:28px 16px}
  .sc-q dd{font-size:26px}
  .rc-grid{grid-template-columns:1fr;gap:24px}
  .rc-card{display:grid;grid-template-columns:104px 1fr;column-gap:16px;align-items:start}
  .rc-vis{grid-row:1/span 5;aspect-ratio:1}
  .rc-card>:not(.rc-vis){grid-column:2}
  .rc-card h3{margin-top:2px}
  .rc-meta{margin-top:8px;padding-top:0}
  .sc-foot{grid-template-columns:1fr}
  .sc-f{padding:14px 10px;gap:14px}
  .toggle button{padding:8px 10px;font-size:13px}
  .toggle small{margin-left:4px}
}
@media (max-width:400px){.toggle button{padding:8px 7px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
  .js [data-r]{transform:none;filter:none;transition:opacity .3s}
  .sc-plate,.sc-copy{transform:none!important;translate:none!important}
  .sc-dawn,.sc-sun{display:none}
  .js .wi{transform:none}
  .sc-verb,.sc-verb.out,.js .sc-h1:not(.split-in) .sc-verb.on{transform:none;opacity:0;transition:opacity .3s}
  .sc-verb.on{opacity:1}
  .sc-ico i{transform:none!important;filter:none!important;transition:opacity .3s}
  .js .lt i{transform:none;opacity:1}
  .sc-gallery i{transform:none}
  .js .draw svg,.js .sc-f i svg{stroke-dashoffset:0}
}