/* =========================================================
   NEMCON — base styles shared by every page
   Brand: Red #FF0000 · Black #0B0B0B · White
   ========================================================= */
/* footer wordmark font — free Google font closest to the logo lettering */
/* Saira now comes from assets/css/fonts.css, loaded in each page head.
   A CSS @import made the browser wait for this stylesheet, then for
   Google's, then for the font — three round trips, all blocking. */
/* the logo's own stepped "N", traced from logo-full-color.png — used for the letter N only */
@font-face{font-family:"Nemcon N";src:url("../fonts/nemcon-n.ttf") format("truetype");font-weight:800;font-display:swap;unicode-range:U+004E}
:root{
  --bg:#0B0B0B;
  --red:#FF0000;
  --text:#F4F4F4;
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.72);
  --hair:rgba(255,255,255,.14);
  --ink:#0B0B0B;
  --paper:#FFFFFF;
  --paper-2:#F3F3F2;
  --ink-muted:rgba(11,11,11,.58);
  --ink-hair:rgba(11,11,11,.12);
  /* section shades — alternate these instead of flat black / white */
  --shade-1:#0B0B0B;   /* deep black */
  --shade-2:#151518;   /* graphite */
  --shade-3:#1E1F23;   /* charcoal */
  --light-1:#FFFFFF;   /* white */
  --light-2:#F6F5F1;   /* warm ivory */
  --light-3:#ECEAE4;   /* stone */
  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* one standard content width, centred on every desktop and laptop —
     the gutter grows on wide screens so the page never stretches edge to edge */
  --maxw:1352px;                       /* same content column as the reference site */
  --pad:max(24px,(var(--vw,100vw) - var(--maxw)) / 2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-loading,body.menu-open{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
.ico{width:16px;height:16px;flex:0 0 auto}
::selection{background:var(--red);color:#fff}

.display{font-family:"Inter Tight","Inter",sans-serif;font-weight:300;letter-spacing:-.045em;line-height:.92}
/* every figure on the site reads clearly: lining (not old-style) digits, and the small
   counters use Inter Tight's tabular numerals a size up (user) */
body{font-variant-numeric:lining-nums}
.hero__spots button small,.hs__label small,.ring__txt small,.ring__txt b,.gl-no,.pj-group__count,
.face__idx,.face__size,.face__area,.mono,.strip,.footer__col p,.pd-stats b,.pj-hero__stats b,.ld-stat b,
.pj-card__facts span,.eyebrow span,.pd-label,.gl-label{font-family:"Inter Tight","Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums lining-nums}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow span{color:var(--red);margin-right:6px}

/* ---- text splits ---- */
.ch{display:inline-block;will-change:transform}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wd>span{display:inline-block;will-change:transform}

/* ---- corner ticks ---- */
.corners{--c:rgba(255,255,255,.85);--s:9px;background:
  linear-gradient(var(--c),var(--c)) 0 0/var(--s) 1.5px,
  linear-gradient(var(--c),var(--c)) 0 0/1.5px var(--s),
  linear-gradient(var(--c),var(--c)) 100% 0/var(--s) 1.5px,
  linear-gradient(var(--c),var(--c)) 100% 0/1.5px var(--s),
  linear-gradient(var(--c),var(--c)) 0 100%/var(--s) 1.5px,
  linear-gradient(var(--c),var(--c)) 0 100%/1.5px var(--s),
  linear-gradient(var(--c),var(--c)) 100% 100%/var(--s) 1.5px,
  linear-gradient(var(--c),var(--c)) 100% 100%/1.5px var(--s);
  background-repeat:no-repeat}

/* ---- glass + chips ---- */
.glass{background:rgba(42,42,44,.5);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-size:12.5px;white-space:nowrap;background:rgba(38,38,40,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);transition:background .3s,transform .3s var(--ease-out),box-shadow .3s,color .3s}
.chip:hover{background:rgba(70,70,72,.7)}
.chip--red{background:var(--red);border-color:var(--red);color:#fff}
.chip--red:hover{background:#ff2a2a;box-shadow:0 0 30px rgba(255,0,0,.45);transform:translateY(-1px)}
.chip--lg{padding:12px 22px;font-size:13.5px}
.chip .ico{width:14px;height:14px}

/* both edges line up: the first column starts at the gutter, the last ends on it */
.footer__top{grid-template-columns:1.5fr 1fr 1.15fr .95fr}
.footer__col:last-child{align-items:flex-end;text-align:right}
.footer__col:last-child small{display:block}

/* ---- the page's own up / down control, right edge ---- */
.scroller{position:fixed;right:clamp(10px,1.4vw,20px);top:50%;z-index:94;translate:0 -50%;
  display:flex;flex-direction:column;gap:6px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(11,11,11,.1);box-shadow:0 16px 40px rgba(0,0,0,.28);
  opacity:.55;transition:opacity .4s,box-shadow .4s}
.scroller:hover,.scroller.is-lit{opacity:1}
.scroller button{width:clamp(32px,2.6vw,38px);height:clamp(32px,2.6vw,38px);border-radius:50%;
  display:grid;place-items:center;color:#0b0b0b;transition:background .3s,color .3s,transform .3s var(--ease-out)}
.scroller button:hover{background:var(--red);color:#fff}
.scroller button:active{transform:scale(.94)}
.scroller button .ico{width:16px;height:16px}
.scroller button.is-off{opacity:.28;pointer-events:none}
.is-loading .scroller,.menu-open .scroller{opacity:0;pointer-events:none}
@media (max-width:760px){
  .scroller{top:auto;bottom:86px;right:10px;translate:0}
}

/* ---- card grips: resize and turn a card the user can drag ---- */
.grip{position:absolute;z-index:6;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:#fff;color:#0b0b0b;border:1px solid rgba(11,11,11,.14);box-shadow:0 6px 16px rgba(11,11,11,.22);
  cursor:grab;touch-action:none;opacity:0;transform:scale(.7);transition:opacity .25s,transform .3s var(--ease-out)}
.grip svg{width:13px;height:13px}
.grip:active{cursor:grabbing}
.grip--size{right:-6px;bottom:-6px}
.grip--rot{right:-6px;top:-6px}
*:hover>.grip,.grip:focus-visible{opacity:1;transform:none}
@media (hover:none){.grip{opacity:1;transform:none}}

/* ---- clock ring (home + contact) ---- */
.ring{position:relative;width:104px;height:104px;flex:0 0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:1.6}
.ring__track{stroke:rgba(255,255,255,.16)}
.ring__prog{stroke:#fff;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}
.ring__txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.ring__txt b{font-family:"Inter Tight";font-weight:300;font-size:26px;letter-spacing:-.03em}
.ring__txt small{font-size:9.5px;color:var(--muted)}

/* ---- intro choreography ---- */
.intro{transition:opacity .9s var(--ease-out) var(--d,0s),transform 1s var(--ease-out) var(--d,0s)}
.is-loading .intro{opacity:0;transform:translateY(16px)}

/* ---- page transition ---- */
.pt{position:fixed;inset:0;z-index:300;background:#0B0B0B;display:grid;place-items:center;pointer-events:none;transition:transform .9s var(--ease)}
/* intro: the mark lands first, then the lettering types itself in (user).
   The two pieces are cut from the real logo at its own gap column and share one height,
   so side by side they line up exactly like the original lockup. */
.pt__logo{--h:clamp(44px,7.6vw,66px);display:flex;align-items:flex-start;gap:0;width:calc(var(--h) * 2.7287)}
.pt__mark{height:var(--h);width:calc(var(--h) * .6);opacity:0;transform:translateY(8px) scale(.88);animation:ptMark .34s var(--ease-out) .04s forwards}
.pt__type{overflow:hidden;width:0;white-space:nowrap;border-right:2px solid var(--red);
  animation:ptType .6s steps(22) .26s forwards,ptCaret .42s steps(1) .26s 3}
.pt__word{display:block;height:var(--h);width:calc(var(--h) * 2.1287);max-width:none}
@keyframes ptMark{to{opacity:1;transform:none}}
@keyframes ptType{to{width:calc(var(--h) * 2.1287)}}
@keyframes ptCaret{50%{border-right-color:transparent}}
@media (prefers-reduced-motion:reduce){
  .pt__mark{opacity:1;transform:none;animation:none}
  .pt__type{width:calc(var(--h) * 2.1287);border-right-color:transparent;animation:none}
}
.pt.is-out{transform:translateY(-101%)}
.pt.is-in{animation:ptIn .62s var(--ease) both}
@keyframes ptIn{from{transform:translateY(101%)}to{transform:none}}

/* ---- custom cursor ---- */
/* above every overlay (brochure flipbook, lightbox, drawers) so the custom cursor never disappears */
.cursor{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor summary,.has-cursor [data-hover]{}
/* registered so the frame colour can fade when it inverts */
@property --c{syntax:"<color>";inherits:true;initial-value:#fff}
.cursor__box{position:absolute;left:-14px;top:-14px;width:28px;height:28px;--c:#fff;--s:7px;transition:left .35s var(--ease-out),top .35s var(--ease-out),width .35s var(--ease-out),height .35s var(--ease-out),--c .35s}
/* frame inverts with what is under the pointer: white on dark, black on light */
.cursor.is-light .cursor__box{--c:#0B0B0B}
.cursor__dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:var(--red);transform:rotate(45deg);box-shadow:0 0 14px var(--red);transition:transform .35s var(--ease-out)}
.cursor.is-hover .cursor__box{left:-24px;top:-24px;width:48px;height:48px}
.cursor.is-hover .cursor__dot{transform:rotate(45deg) scale(.6)}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:18px var(--pad);pointer-events:none}
.nav>*{pointer-events:auto}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,11,.92),rgba(11,11,11,.6) 55%,rgba(11,11,11,0));opacity:0;transition:opacity .45s}
.is-scrolled .nav::before{opacity:1}
.nav__logo{justify-self:start;display:block}
.nav__logo img{height:38px;width:auto}
.nav__logo .logo-on-light{display:none}
.nav__pill{position:relative;display:flex;align-items:center;padding:4px;border-radius:999px;background:rgba(34,34,36,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);transition:background .4s,border-color .4s}
.nav__pill a{position:relative;z-index:1;display:flex;align-items:center;padding:8px 13px;border-radius:999px;font-size:12.5px;white-space:nowrap;color:rgba(255,255,255,.75);transition:color .3s}
.nav__pill a:hover{color:#fff}
.nav__pill a .ico:not(.ico-caret){width:0;height:14px;margin-right:0;opacity:0;transition:width .45s var(--ease),margin .45s var(--ease),opacity .3s}
.nav__pill a.is-active{color:#fff}
.nav__pill a.is-active .ico:not(.ico-caret){width:14px;margin-right:6px;opacity:1}
.nav__pill .ico-caret{width:12px;height:12px;margin-left:3px;opacity:.7;transition:transform .35s var(--ease-out)}
.nav__glow{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:var(--red);box-shadow:0 0 26px rgba(255,0,0,.4);transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s}
.nav__dd{position:relative}
.nav__menu{position:absolute;left:50%;top:calc(100% + 10px);min-width:170px;padding:6px;border-radius:16px;display:grid;opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .3s,transform .4s var(--ease-out),visibility .3s}
.nav__menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__dd:hover .ico-caret{transform:rotate(180deg)}
.nav__menu a{padding:9px 12px;border-radius:10px;font-size:12.5px;color:rgba(255,255,255,.85)}
.nav__menu a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav__cta{justify-self:end;display:flex;align-items:center;gap:6px}
.nav__burger{display:none;width:40px;height:40px;border-radius:50%;background:rgba(38,38,40,.7);place-content:center;gap:5px}
.nav__burger span{display:block;width:16px;height:1.5px;background:#fff;transition:transform .4s var(--ease)}
.menu-open .nav__burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .nav__burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* nav pill + number chip invert with the section behind them (like the dock):
   black section → white pill, white section → black pill */
.nav__pill,.nav__cta .chip--ghost,.nav__burger{transition:background .45s,border-color .45s,color .45s,box-shadow .45s}
.nav__pill>a,.nav__dd>a,.nav__burger span{transition:color .45s,background .45s,transform .4s var(--ease)}
.nav__pill{background:rgba(255,255,255,.94);border-color:rgba(11,11,11,.1);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav__pill>a,.nav__dd>a{color:rgba(11,11,11,.72)}
.nav__pill>a:hover,.nav__dd>a:hover{color:#0B0B0B}
.nav__pill a.is-active{color:#fff}
.nav__cta .chip--ghost{background:rgba(255,255,255,.94);border-color:rgba(11,11,11,.1);color:#0B0B0B;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav__cta .chip--ghost:hover{background:#fff}
.nav__burger{background:rgba(255,255,255,.94)}
.nav__burger span{background:#0B0B0B}

/* nav over light sections */
.nav-light .nav::before{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.65) 55%,rgba(255,255,255,0))}
.nav-light .nav__logo .logo-on-dark{display:none}
.nav-light .nav__logo .logo-on-light{display:block}
.nav-light .nav__pill{background:rgba(11,11,11,.92);border-color:rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.nav-light .nav__pill>a,.nav-light .nav__dd>a{color:rgba(255,255,255,.78)}
.nav-light .nav__pill>a:hover,.nav-light .nav__dd>a:hover{color:#fff}
.nav-light .nav__pill a.is-active{color:#fff}
.nav-light .nav__cta .chip--ghost{background:rgba(11,11,11,.92);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.nav-light .nav__cta .chip--ghost:hover{background:#0B0B0B}
.nav-light .nav__burger{background:rgba(11,11,11,.92)}
.nav-light .nav__burger span{background:#fff}
/* open mobile menu sits on a dark overlay → keep the close button white */
.menu-open .nav__burger{background:rgba(255,255,255,.94)}
.menu-open .nav__burger span{background:#0B0B0B}

.mnav{position:fixed;inset:0;z-index:55;background:rgba(11,11,11,.97);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:90px var(--pad) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
/* the open menu reads in the brand serif, like the section headings (user) */
.mnav>a{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:300;font-style:italic;font-size:clamp(40px,10vw,74px);letter-spacing:.01em;line-height:1.12;transition:color .3s}
.mnav>a:hover{color:var(--red)}
.mnav>a.is-active{color:var(--red)}
.mnav__sub{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 0 10px;font-size:13px;color:var(--muted)}
.mnav p{margin-top:24px;color:var(--muted)}
.mnav p a{color:var(--red)}
.menu-open .mnav{opacity:1;visibility:visible}

/* ---- sticky + strip ---- */
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.strip{position:absolute;left:var(--pad);right:var(--pad);bottom:5.5vh;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.strip--static{position:relative;left:auto;right:auto;bottom:auto}

/* ---- form fields ---- */
.field span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);color:#fff;padding:9px 0;font-size:15px;outline:none;border-radius:0;transition:border-color .3s;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background:linear-gradient(45deg,transparent 50%,currentColor 50%) calc(100% - 6px) 55%/5px 5px no-repeat,linear-gradient(-45deg,transparent 50%,currentColor 50%) 100% 55%/5px 5px no-repeat}
.field select option{background:#151515;color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red)}
.field--light span{color:var(--ink-muted)}
.field--light input,.field--light select,.field--light textarea{color:var(--ink);border-bottom-color:var(--ink-hair)}
.field--light select option{background:#fff;color:#111}

/* ---- floating call + social dock (every page) ---- */
.dock{position:fixed;left:50%;bottom:18px;z-index:95;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(11,11,11,.1);box-shadow:0 18px 44px rgba(0,0,0,.35);translate:-50% 0;transition:translate .8s var(--ease-out) .9s,opacity .5s .9s}
.is-loading .dock{translate:-50% 160%;opacity:0}
.fb-open .dock,.sv-open .dock{opacity:0;pointer-events:none;transition-delay:0s}
.dock__call{display:flex;align-items:center;gap:10px;padding:4px 18px 4px 4px;border-radius:999px;background:var(--red);color:#fff;transition:background .3s,box-shadow .3s}
.dock__call:hover{background:#ff2626;box-shadow:0 0 28px rgba(255,0,0,.5)}
.dock__ring{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2)}
.dock__ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.8);animation:dockPing 2s var(--ease-out) infinite}
@keyframes dockPing{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.7);opacity:0}}
.dock__ring .ico{width:17px;height:17px;animation:dockRing 2.4s ease-in-out infinite}
@keyframes dockRing{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(-14deg)}78%{transform:rotate(12deg)}82%{transform:rotate(-10deg)}86%{transform:rotate(8deg)}}
.dock__txt small{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;opacity:.85}
.dock__txt b{display:block;font-size:15.5px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.dock__sep{width:1px;height:24px;margin:0 4px;background:rgba(11,11,11,.15)}
.dock__soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#0B0B0B;transition:background .3s,transform .3s var(--ease-out)}
.dock__soc:hover{background:rgba(11,11,11,.08);transform:translateY(-2px)}
.dock__soc .ico,.footer__soc .ico{width:18px;height:18px}
/* dock over a light section: light pill, black icons (dark section: dark pill, white icons) */
.dock{transition:translate .8s var(--ease-out) .9s,opacity .5s .9s,background .45s,border-color .45s,box-shadow .45s}
.dock__soc,.dock__sep{transition:background .3s,transform .3s var(--ease-out),color .45s}
/* white section → black dock, black section → white dock */
.dock-light .dock{background:rgba(11,11,11,.92);border-color:rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.22)}
.dock-light .dock__soc{color:#fff}
.dock-light .dock__soc:hover{background:rgba(255,255,255,.14)}
.dock-light .dock__sep{background:rgba(255,255,255,.2)}
.footer__social{display:flex;gap:8px;margin-top:22px}
.footer__soc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.18);transition:background .3s,border-color .3s}
.footer__soc:hover{background:var(--red);border-color:var(--red)}

.toast{position:fixed;left:50%;bottom:92px;z-index:400;transform:translate(-50%,20px);padding:12px 20px;border-radius:999px;background:#fff;color:#0b0b0b;font-size:13px;opacity:0;pointer-events:none;transition:opacity .4s,transform .5s var(--ease-out)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease-out) var(--d,0s),transform 1.2s var(--ease-out) var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal=fade]{transform:none}
[data-reveal=words]{opacity:1;transform:none}
/* multi-line copy: every line slides up from behind its own mask (user) */
[data-reveal=lines]{opacity:1;transform:none;transition:none}
.ln{display:block;overflow:hidden}
.ln__in{display:block;transform:translateY(115%);transition:transform 1s var(--ease-out) calc(var(--i) * 95ms + var(--d,0s))}
[data-reveal=lines].is-in .ln__in{transform:none}
@media (prefers-reduced-motion:reduce){ .ln__in{transform:none;transition:none} }
[data-reveal=words] .wd>span{transform:translateY(110%) rotate(4deg);transform-origin:left bottom;transition:transform 1.1s var(--ease) calc(var(--i) * 45ms + var(--d,0s))}
[data-reveal=words].is-in .wd>span{transform:none}
[data-reveal=chars]{opacity:1;transform:none}
[data-reveal=chars] .ch{opacity:0;transform:translateY(40%);filter:blur(8px);transition:opacity .8s var(--ease-out) calc(var(--i) * 28ms),transform 1s var(--ease-out) calc(var(--i) * 28ms),filter .9s var(--ease-out) calc(var(--i) * 28ms)}
[data-reveal=chars].is-in .ch{opacity:1;transform:none;filter:none}
/* clip lives on the child: IntersectionObserver ignores fully clipped targets */
[data-reveal=clip]{opacity:1;transform:none}
[data-reveal=clip]>img{clip-path:inset(100% 0 0 0);transition:clip-path .95s var(--ease-out) var(--d,0s)}
[data-reveal=clip].is-in>img{clip-path:inset(0 0 0 0)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{position:relative;background:#0B0B0B;color:#fff;padding:14vh var(--pad) 26px;border-top:1px solid var(--hair);overflow:hidden}
.footer__top{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:4vw;margin-bottom:10vh}
.footer__brand img{height:52px;width:auto;margin-bottom:18px}
.footer__brand p{color:var(--muted);max-width:320px;font-size:13px}
.footer__col{display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer__col small{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:6px}
.footer__col a{color:rgba(255,255,255,.85);transition:color .3s;width:max-content}
.footer__col a:hover{color:var(--red)}
.footer__col p{color:rgba(255,255,255,.7)}
/* the red line and the filled letters live in pseudo-elements, so this value
   has to inherit into them */
@property --fill{syntax:"<percentage>";inherits:true;initial-value:0%}

.footer__word{pointer-events:none;position:relative;font-family:"Nemcon N","Saira Extra Condensed","Agency FB","Inter Tight",sans-serif;font-weight:800;font-size:26vw;letter-spacing:.02em;line-height:.8;text-align:center;white-space:nowrap;margin:0 0 30px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);user-select:none}
.footer__word::after{content:attr(data-text);position:absolute;inset:0;color:#fff;-webkit-text-stroke:0;clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0)}
.footer__word i{font-style:normal;color:transparent}
.footer__word::before{content:"";position:absolute;left:var(--fill,0%);top:8%;bottom:8%;width:2px;background:var(--red);box-shadow:0 0 18px var(--red);opacity:calc(1 - var(--fill-done,0))}
/* only the Land Partnership page swaps the fill for the pointer glow (user) */
body[data-page=land] .footer__word{background:radial-gradient(clamp(220px,26vw,520px) clamp(220px,26vw,520px) at var(--mx,50%) var(--my,50%),#fff 0%,rgba(255,255,255,.72) 32%,rgba(255,255,255,.18) 58%,rgba(255,255,255,0) 78%);-webkit-background-clip:text;background-clip:text}
body[data-page=land] .footer__word::after{display:none}
body[data-page=land] .footer__word::before{left:var(--mx,50%);top:var(--my,50%);bottom:auto;width:clamp(180px,20vw,420px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,0,0,.22),rgba(255,0,0,0) 68%);box-shadow:none;opacity:1;pointer-events:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1360px){ .nav__cta .chip--ghost{display:none} .nav__pill a{padding:8px 11px} }
@media (max-width:1120px){
  .nav{grid-template-columns:auto 1fr}
  .nav__pill{display:none}
  .nav__burger{display:grid}
}
@media (max-width:900px){
  :root{--pad:20px}
  .nav__logo img{height:32px}
  .footer__top{grid-template-columns:1fr 1fr;gap:34px}
  .footer__brand{grid-column:1/-1}
  .strip--static{flex-direction:column;align-items:flex-start;gap:6px}
  .dock{bottom:12px;max-width:calc(100vw - 20px)}
  .dock__soc{width:36px;height:36px}
  .dock__txt b{font-size:14px;white-space:nowrap}
  .dock__txt small{white-space:nowrap}
}
@media (max-width:420px){
  .dock{gap:0;padding:4px}
  .dock__call{gap:8px;padding-right:14px}
  .dock__ring{width:34px;height:34px}
  .dock__txt small{font-size:8.5px;letter-spacing:.05em}
  .dock__txt b{font-size:13px}
  .dock__sep{margin:0 2px}
  .dock__soc{width:34px;height:34px}
  .dock__soc .ico{width:16px;height:16px}
  .footer{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}


/* ---------------------------------------------------------- TEXT PRESETS */
/* web takes on the After Effects presets the user picked (user) */
[data-reveal=anim]{opacity:1;transform:none;transition:none}
/* Frontside – Backside: every letter turns over on its own axis */
[data-anim=flip]{perspective:800px}
[data-anim=flip] .ch{display:inline-block;transform-origin:50% 60%;transform:rotateX(88deg);opacity:0;
  transition:transform .85s var(--ease-out) calc(var(--i) * 34ms + var(--d,0s)),opacity .6s linear calc(var(--i) * 34ms + var(--d,0s))}
[data-anim=flip].is-in .ch{transform:none;opacity:1}
/* Jetstream: letters streak in from the left, blurred, and settle */
[data-anim=jet] .ch{display:inline-block;transform:translateX(-.55em) skewX(16deg);opacity:0;filter:blur(5px);
  transition:transform .75s var(--ease-out) calc(var(--i) * 26ms + var(--d,0s)),opacity .5s ease calc(var(--i) * 26ms + var(--d,0s)),filter .6s ease calc(var(--i) * 26ms + var(--d,0s))}
[data-anim=jet].is-in .ch{transform:none;opacity:1;filter:none}
/* Outgoing – Incoming: letters drop out of one line and into the next */
[data-anim=swap] .ch{display:inline-block;transform:translateY(-.9em) rotate(6deg);opacity:0;
  transition:transform .7s var(--ease-out) calc(var(--i) * 30ms + var(--d,0s)),opacity .45s ease calc(var(--i) * 30ms + var(--d,0s))}
[data-anim=swap].is-in .ch{transform:none;opacity:1}
/* Scale Bounce: every letter jumps up, overshoots and settles — one after the other (user) */
[data-anim=bounce] .ch{display:inline-block;opacity:0;transform-origin:50% 85%}
[data-anim=bounce].is-in .ch{animation:bounceUp .78s cubic-bezier(.22,.9,.28,1) both;
  animation-delay:calc(var(--i) * 34ms + var(--d,0s))}
@keyframes bounceUp{
  0%{opacity:0;transform:translateY(16px) scale(.2)}
  35%{opacity:1;transform:translateY(-14px) scale(1.32)}
  58%{transform:translateY(5px) scale(.9)}
  76%{transform:translateY(-4px) scale(1.08)}
  90%{transform:translateY(1px) scale(.98)}
  100%{opacity:1;transform:none}}
/* Underscore: the line rises with the words and a red rule sweeps in beneath it */
[data-anim=underscore]{position:relative}
[data-anim=underscore]::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease-out) .3s}
[data-anim=underscore].is-in::after{transform:scaleX(1)}
[data-anim=underscore] .ch{display:inline-block;transform:translateY(.38em);opacity:0;
  transition:transform .62s var(--ease-out) calc(var(--i) * 24ms + var(--d,0s)),opacity .45s ease calc(var(--i) * 24ms + var(--d,0s))}
[data-anim=underscore].is-in .ch{transform:none;opacity:1}
/* Hazard: the letters flicker on like a warning light, red ghosting, then settle */
[data-anim=hazard] .ch{display:inline-block;opacity:0}
[data-anim=hazard].is-in .ch{animation:hzd .95s steps(1,end) both;animation-delay:calc(var(--i) * 22ms + var(--d,0s))}
@keyframes hzd{
  0%{opacity:0;transform:translateX(-.06em)}
  12%{opacity:1;transform:translateX(.05em);text-shadow:2px 0 rgba(255,0,0,.9),-2px 0 rgba(255,255,255,.45)}
  22%{opacity:.15;transform:none}
  38%{opacity:1;text-shadow:-2px 0 rgba(255,0,0,.85)}
  52%{opacity:.3}
  66%{opacity:1;text-shadow:1px 0 rgba(255,0,0,.55)}
  80%{opacity:.7;text-shadow:none}
  100%{opacity:1;transform:none;text-shadow:none}
}
/* Dealer: the cards are dealt onto the table one by one */
[data-anim=deal] > *{opacity:0;transform:translateY(32px) rotate(-5deg) scale(.96);
  transition:transform .8s var(--ease-out) calc(var(--n) * 95ms),opacity .6s ease calc(var(--n) * 95ms)}
[data-anim=deal].is-in > *{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-anim] .ch,[data-anim=deal] > *{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
}

.wdn{display:inline-block;white-space:nowrap}

/* a red hairline marks the seam between every section (user) */


/* ============================================================
   ENTRANCE MOTION — data-in="left|right|up|down|zoom" arrives when the
   section reaches the screen; --i staggers one piece after another (user)
   ============================================================ */
/* uses the independent translate / scale properties, so a piece that already
   carries its own transform (a centred card, say) keeps it */
[data-in]{opacity:0;will-change:translate,scale,opacity;
  transition:opacity .85s var(--ease-out),translate 1.05s var(--ease-out),scale 1.05s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms + var(--d,0s))}
[data-in="left"]{translate:-26px 0}
[data-in="right"]{translate:26px 0}
[data-in="up"]{translate:0 40px}
[data-in="down"]{translate:0 -38px}
[data-in="zoom"]{scale:.88}
[data-in="zoom-out"]{scale:1.12}
[data-in].is-in{opacity:1;translate:none;scale:none}
@media (prefers-reduced-motion:reduce){
  [data-in]{opacity:1 !important;translate:none !important;scale:none !important;transition:none}
}



/* on a narrow screen the gutters are small, so the travel is smaller too */
@media (max-width:640px){
  [data-in="left"]{translate:-14px 0}
  [data-in="right"]{translate:14px 0}
}

/* ── picked motion ─────────────────────────
   A spring that settles with the smallest overshoot — no bounce. */
:root{ --spring:cubic-bezier(.22,1.2,.28,1) }

/* A2 — the red button morphs, and an arrow arrives. */
.chip--red{overflow:hidden;
  transition:background .3s,border-radius .5s var(--spring),padding .5s var(--spring),
             box-shadow .3s,transform .34s var(--spring)}
.chip--red::after{content:"→";display:inline-block;width:0;margin-left:-8px;opacity:0;
  transform:translateX(-6px);
  transition:width .45s var(--spring),margin .45s var(--spring),opacity .3s,transform .45s var(--spring)}
.chip--red:hover{border-radius:14px;padding-right:13px}
.chip--red:hover::after{width:13px;margin-left:0;opacity:1;transform:translateX(0)}
.chip--red:active{transform:scale(.96)}
.chip--ghost:active{transform:scale(.96)}

/* B1 — the nav marker stretches: its two edges are on different springs. */
.nav__glow{left:auto;width:auto;
  transition:left .52s var(--spring),right .62s var(--spring) .04s,opacity .3s}
.nav__pill.is-back .nav__glow{
  transition:left .62s var(--spring) .04s,right .52s var(--spring),opacity .3s}

/* C1 — the number answers. The ring keeps ringing on its own. */
.dock__txt b span{display:inline-block;
  transition:transform .4s var(--spring);transition-delay:calc(var(--i) * 22ms)}
.dock__call:hover .dock__txt b span{transform:translateY(-3px)}
.dock__call:hover .dock__ring{animation:dockAnswer .62s var(--ease-out)}
.dock__call:active{transform:scale(.97)}
@keyframes dockAnswer{30%{transform:rotate(-13deg) scale(1.07)}60%{transform:rotate(9deg)}100%{transform:none}}
.chip .num span{display:inline-block;
  transition:transform .4s var(--spring);transition-delay:calc(var(--i) * 22ms)}
.chip:hover .num span{transform:translateY(-2px)}

/* D1 — the bars stretch to different widths, then cross. */
.nav__burger span{transform-origin:left center;
  transition:transform .46s var(--spring),width .3s var(--ease-out)}
.nav__burger span:last-child{transition-delay:.05s}
.nav__burger:hover span:first-child{width:11px}
.nav__burger:hover span:last-child{width:16px}
.menu-open .nav__burger span:first-child{width:17px;transform:translate(-1px,3.25px) rotate(45deg)}
.menu-open .nav__burger span:last-child{width:17px;transform:translate(-1px,-3.25px) rotate(-45deg)}

.mnav>a,.mnav>.mnav__sub,.mnav>p{opacity:0;transform:translateY(-14px);
  transition:opacity .34s var(--ease),transform .5s var(--spring)}
.menu-open .mnav>a,.menu-open .mnav>.mnav__sub,.menu-open .mnav>p{opacity:1;transform:none}
.menu-open .mnav>*:nth-child(1){transition-delay:.06s}
.menu-open .mnav>*:nth-child(2){transition-delay:.1s}
.menu-open .mnav>*:nth-child(3){transition-delay:.14s}
.menu-open .mnav>*:nth-child(4){transition-delay:.18s}
.menu-open .mnav>*:nth-child(5){transition-delay:.22s}
.menu-open .mnav>*:nth-child(6){transition-delay:.26s}
.menu-open .mnav>*:nth-child(7){transition-delay:.3s}
.menu-open .mnav>*:nth-child(8){transition-delay:.34s}
.menu-open .mnav>*:nth-child(n+9){transition-delay:.38s}

@media (prefers-reduced-motion:reduce){
  .chip--red::after{display:none}
  .dock__call:hover .dock__ring{animation:none}
  .mnav>a,.mnav>.mnav__sub,.mnav>p{opacity:1;transform:none;transition:none}
}
/* ── end picked motion ── */

/* ── header: the lit item, and the ringing handset ────────────── */

/* Only the item the marker sits under is white. Without this the current
   page stayed white while the marker was elsewhere — invisible against
   the pill, which is white over dark sections. */
.nav__pill a.is-lit{color:#fff}
.nav__pill a.is-active:not(.is-lit){color:rgba(11,11,11,.72)}
.nav__pill a.is-active:not(.is-lit):hover{color:#0B0B0B}
.nav-light .nav__pill a.is-active:not(.is-lit){color:rgba(255,255,255,.78)}
.nav-light .nav__pill a.is-active:not(.is-lit):hover{color:#fff}
.nav__pill a.is-lit:hover{color:#fff}

/* The number in the header now opens with a handset. It tilts every few
   seconds on its own and answers more eagerly under the pointer. */
.chip__ring{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;margin-right:7px;border-radius:50%;flex:0 0 auto;
  background:var(--red);color:#fff;
  animation:chipRing 3.4s ease-in-out infinite}
.chip__ring .ico{width:11px;height:11px}
.chip:hover .chip__ring{animation-duration:1.1s}
@keyframes chipRing{
  0%,62%,100%{transform:rotate(0)}
  67%{transform:rotate(-15deg)}
  72%{transform:rotate(12deg)}
  77%{transform:rotate(-9deg)}
  82%{transform:rotate(6deg)}
  87%{transform:rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .chip__ring{animation:none}
}

/* ── the pointer ───────────────────────────────────
   A red rectangle in the mark's proportions (345:575), trailing the
   pointer. The native cursor is only hidden once the element exists, so
   nothing is lost if the script never runs. */
.cur{position:fixed;left:0;top:0;z-index:400;pointer-events:none;
  width:21px;height:24px;opacity:0;will-change:transform;
  transition:opacity .18s}
.cur.is-on{opacity:1}

/* The mark itself. non-scaling-stroke keeps the outline a 1.4px hairline
   however far the mark is scaled, so growing it over a link does not
   fatten the strokes into a blob. */
.cur svg{display:block;width:100%;height:100%;overflow:visible}

/* ── the speed ray ───────────────────────────────
   A line left behind the mark while it is travelling: 1px wide, stretched
   along the direction of travel by site.js and tapered to nothing at the
   tail, so it reads as a trail rather than a pointer aimed somewhere. It
   is a child of .cur, so its own transform cannot disturb the one that
   follows the pointer -- which is the mistake that used to throw the mark
   across the screen. */
.cur__ray{position:absolute;left:50%;top:50%;width:1px;height:1.6px;
  margin-top:-.8px;transform-origin:0 50%;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--red),rgba(255,0,0,0))}

/* ── the mark is at work ───────────────────────────
   A slow loop through the two solid shapes, one half a cycle behind the
   other, so there is always something in progress in it (user). It is
   deliberately faint; a pointer that flashes would be unbearable to sit
   next to all day. */
@keyframes curWork{
  0%,100%{opacity:1}
  50%{opacity:.62}
}
.cur svg .f{animation:curWork 2.6s ease-in-out infinite}
.cur svg .f:last-of-type{animation-delay:-1.3s}
.cur svg rect,.cur svg line{fill:none;stroke:var(--red);stroke-width:1.4;
  vector-effect:non-scaling-stroke;transition:stroke .22s}
/* the two solid shapes the mark carries inside its squares */
.cur svg .f{fill:#fff;stroke:none;transition:fill .22s}

/* The mark wears whichever of the logo's OWN two colourways reads on what
   is behind it, so the pointer is never a colour the brand does not have:
   on dark, the white lockup (red outline, white solids - logo-full-white);
   on light, the colour lockup (near-black outline, red solids -
   logo-mark.svg). site.js decides which by reading the background behind
   the pointer. */
.cur.on-light svg rect,.cur.on-light svg line{stroke:#0B0B0B}
.cur.on-light svg .f{fill:var(--red)}

/* Over anything the browser has a cursor for -- a link, a button, a field
   -- the mark gets out of the way and the browser's own cursor does the
   talking, because the hand is what tells people a thing can be clicked
   and the caret is what tells them they can type (user). After .is-on, so
   it wins.
   The mark is also ONE size now and is never scaled: it used to grow to
   1.75 over a link through the `scale` property, which was a bug -- the
   individual transform properties apply after `transform`, so the scale
   multiplied the translate that follows the pointer and threw the mark
   hundreds of pixels away. At (600,400) it landed at (1042,691). */
.cur.is-off{opacity:0}

/* Ours shows over the page's own surfaces; everything interactive keeps
   the cursor the browser would have given it. */
.has-cur{cursor:none}
.has-cur a[href],.has-cur button,.has-cur [role="button"],
.has-cur summary,.has-cur label{cursor:pointer}
.has-cur input,.has-cur textarea,.has-cur select,
.has-cur [contenteditable]{cursor:auto}

@media (pointer:coarse){ .cur{display:none} .has-cur,.has-cur *{cursor:auto} }
@media (prefers-reduced-motion:reduce){ .cur{display:none} .has-cur,.has-cur *{cursor:auto} }