/* ============================================================
   Fur Lab — "pages1" homepage option
   A card-based layout: rounded, inset panels on a deep violet canvas,
   one big hero card with the wordmark, a dark "best builds" grid, a light
   four-step panel and a pink call-to-action. The palette is the site's
   own (violet / pink / cyan tokens from assets/site.css); only the shapes
   and the italic serif accents are new.
   ------------------------------------------------------------
   watermark: abdullah fayyaz
   ============================================================ */
:root{
  /* base palette — identical to the original homepage */
  --violet-950:#1D022E; --violet-900:#2A1055; --violet-800:#3B1470; --violet-700:#7E22CE;
  --violet-600:#9333EA; --violet-500:#A855F7;
  --pink-500:#FF5AA6; --pink-300:#FF9ECE; --pink-200:#FFC2E2;
  --cyan-400:#33F0E5; --green-400:#34EA7D; --blue-400:#548BF0; --magenta-400:#F65DEF;
  --white:#FFFFFF; --lavender-50:#F5F2FF; --lavender-100:#E9E2FF;
  --gradient-neon:linear-gradient(90deg,#F65DEF 0%,#A05AFA 27%,#7471F8 40%,#548BF0 50%,#33F0E5 80%,#34EA7D 92%);
  --gradient-rainbow:linear-gradient(100deg,#FF4D6D 0%,#FF8A3D 13%,#FFD93D 26%,#5CE86A 41%,#33F0E5 56%,
    #548BF0 70%,#A05AFA 84%,#F65DEF 100%);

  /* the canvas behind the panels: the same pink, a good deal darker */
  --page-bg:#310819;
  --text-body:rgba(255,255,255,.74); --text-muted:rgba(255,255,255,.5);
  --rule:rgba(255,255,255,.14);

  --font-display:'Poppins','Helvetica Neue',Arial,sans-serif;
  --font-body:'Open Sans',Arial,sans-serif;
  --font-funky:'Rampart One','Poppins',sans-serif;
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  /* the brush script of the splash wordmark, the hero's Fur Lab and the logo */
  --font-mark:'Dr Sugiyama',var(--font-serif);

  --r-xl:36px; --r-lg:26px; --r-md:18px; --r-sm:12px; --r-pill:999px;
  --gutter:clamp(12px,1.5vw,20px);
  --pad:clamp(22px,3.4vw,48px);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --dur:.7s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page-bg);color:#fff;font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
::selection{background:var(--pink-500);color:var(--violet-950)}

.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:#fff;color:var(--violet-950);padding:12px 18px;border-radius:var(--r-sm)}
.skip:focus{left:12px;top:12px}
/* hidden watermark — never painted, never read aloud */
.wm{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}

/* ---------- Keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes riseBlur{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes wordUp{from{transform:translateY(112%) rotate(4deg)}to{transform:translateY(0) rotate(0)}}
@keyframes letterUp{from{opacity:0;transform:translateY(60%) rotate(6deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@keyframes aurora1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(8%,-6%) scale(1.15)}66%{transform:translate(-5%,8%) scale(.95)}}
@keyframes aurora2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-10%,6%) scale(1.2)}70%{transform:translate(6%,-8%) scale(.9)}}
@keyframes aurora3{0%,100%{transform:translate(0,0)}50%{transform:translate(-8%,-10%) scale(1.1)}}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:200% 50%}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes stripe{from{background-position:0 0}to{background-position:28px 0}}

/* ---------- Page frame ---------- */
.page{padding:var(--gutter);display:flex;flex-direction:column;gap:var(--gutter)}
.panel{border-radius:var(--r-xl);position:relative;overflow:hidden}

/* ---------- Type ---------- */
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:11px;
  font-weight:700;letter-spacing:.26em;text-transform:uppercase;margin:0}
.eyebrow::before{content:'';width:30px;height:1px;background:currentColor;opacity:.6}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-display);
  font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:18px 30px;
  border-radius:var(--r-pill);border:0;cursor:pointer;background:var(--violet-950);color:#fff;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .3s}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--gradient-neon);background-size:200% 100%;
  opacity:0;transition:opacity .35s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(147,51,234,.35)}
.btn:hover::before{opacity:1;animation:shimmer 1.6s linear infinite}
.btn:hover{color:var(--violet-950)}
.btn .arr{display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(5px)}
.btn--ghost{background:rgba(255,255,255,.08);border:1px solid var(--rule)}
.btn--light{background:#fff;color:var(--violet-950)}

/* ============================================================
   Floating dock — a compact bar that slides in once the hero card has
   scrolled away, so the primary action is never more than a glance away.
   ============================================================ */
.dock{position:fixed;top:var(--gutter);left:var(--gutter);right:var(--gutter);z-index:900;transform:translateY(-140%);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px 8px 12px;border-radius:var(--r-pill);
  background:rgba(29,2,46,.8);border:1px solid var(--rule);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 50px rgba(0,0,0,.35);transition:transform .6s var(--ease-out),opacity .4s;opacity:0}
.dock.is-visible{transform:none;opacity:1}
.dock__left,.dock__right{display:flex;align-items:center;gap:14px;min-width:0}
.dock__right{gap:22px}
.dock__brand{display:flex;align-items:center;gap:8px;font-family:var(--font-mark);font-size:20px;letter-spacing:.02em;line-height:1;
  text-transform:uppercase;white-space:nowrap}
.dock__links{display:flex;gap:20px;padding-right:10px}
.dock__links a{font-family:var(--font-serif);font-style:italic;font-size:18px;color:#fff;position:relative;white-space:nowrap}
.dock__links a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--pink-300);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.dock__links a:hover::after{transform:scaleX(1);transform-origin:left}
.dock .burger{display:flex;width:40px;height:40px}
.dock .mail{min-width:300px;padding:4px 4px 4px 16px}
.dock .mail input{font-size:10px}
.dock .mail button{width:32px;height:32px}
.dock .mail button svg{width:14px;height:14px}
.dock__progress{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:2px;
  background:var(--gradient-neon);transform-origin:left;transform:scaleX(var(--p,0))}

/* ============================================================
   Opening photo — the first screen of the home page
   Wide screens: the photograph fills the card, one screen tall, with the
   wordmark a quarter of the card's height tall. Portrait screens: see the
   orientation rule below — photograph on top, wordmark underneath.
   ============================================================ */
/* the card is one screen tall less the page gutters on every layout (its
   content never outgrows the min-height), which the wordmark sizes from;
   it is also a width container, for the wordmark's width cap */
.splash{--splash-h:calc(100vh - var(--gutter) * 2);position:relative;display:grid;place-items:end center;
  background:var(--violet-950);color:#fff;container-type:inline-size;
  min-height:var(--splash-h)}
@supports (height:1svh){.splash{--splash-h:calc(100svh - var(--gutter) * 2)}}
.splash__media{position:absolute;inset:0;overflow:hidden}
.splash__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* darker at the foot, where the wordmark's weight sits over the fountain */
.splash__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,0,34,.35) 0%,rgba(21,0,34,.05) 36%,rgba(21,0,34,.72) 100%)}
/* The letters are 25% of the card's height tall. "FUR LAB" in Dr Sugiyama
   stands .95em from the top of its capitals to the bottom of its lowest
   stroke, so the font size is 25 / .95 = 26.3% of the card's height. The
   word is 4.153em wide, so the second term keeps it inside 95% of the
   card's width (95 / 4.153 = 22.9cqw) wherever a quarter of the height
   would run off the sides — on a portrait screen that is always the one
   that applies. The vw term is the fallback without container units. */
/* The visible bottom of the letters sits 10% up from the bottom of the
   photograph, or just clear of the arrow where 10% would not be: the
   arrow's offset + its 46px + a 12px gap. The face carries .32em of
   empty descender room under its letters, so the box is pulled down by
   that much to measure from the letters, not the box. */
.splash__mark{position:absolute;left:0;right:0;bottom:calc(max(10%, clamp(18px,3vh,34px) + 58px) - .32em);z-index:1;text-align:center;white-space:nowrap;margin:0;
  font-family:var(--font-mark);font-weight:400;font-size:min(calc(var(--splash-h) * .263),22vw);font-size:min(calc(var(--splash-h) * .263),22.9cqw);line-height:1.1;
  letter-spacing:0;text-transform:uppercase;filter:drop-shadow(0 14px 40px rgba(21,0,34,.55))}
/* the logo's spectrum, painted on the word's own box so the whole sweep
   lands across the letters. A drop-shadow filter on the parent rather than
   a text-shadow, which would show through the transparent fill. The script
   face's swashes reach well outside the letter box, and the gradient only
   paints inside the box, so the padding is what keeps them visible. */
.splash__mark span{display:inline-block;padding:.12em .3em;background-image:var(--gradient-rainbow);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* Bold. Dr Sugiyama has a single weight, and the browser's synthetic bold
   renders its overlapping strokes as hollow outlines, so instead the drawn
   letters are dilated by an SVG filter (the #bold-* filters in index.html),
   which keeps the rainbow and the brush shapes. The radius is fixed in
   pixels, so it steps up with the screen width, and with it the letters:
   about 1.4% of the font size. */
.splash__mark span{filter:url(#bold-sm)}
@media (min-width:700px){.splash__mark span{filter:url(#bold-md)}}
@media (min-width:1100px){.splash__mark span{filter:url(#bold-lg)}}
@media (min-width:1600px){.splash__mark span{filter:url(#bold-xl)}}
@media (min-width:2200px){.splash__mark span{filter:url(#bold-xxl)}}
/* --- the opening photo as a slideshow ---
   The photos sit in a snap-scrolling track (swipe, trackpad, arrows and dots
   all just move its scroll position); the gradient above and the wordmark
   below are not part of it, so "Fur Lab" is in front of every photo. Both
   let pointers through, so a swipe works wherever it starts. */
.splash__media::after{pointer-events:none}
.splash__mark{pointer-events:none}
.splash__track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none}
.splash__track::-webkit-scrollbar{display:none}
.splash__track:focus-visible{outline:2px solid var(--pink-300);outline-offset:-4px}
.splash__slide{flex:0 0 100%;position:relative;margin:0;overflow:hidden;scroll-snap-align:center}
.splash__slide img{position:absolute;inset:0;-webkit-user-drag:none}
/* Every slide fills the screen exactly as the first one does (cover). A photo
   that is squarer or taller than the screen loses its top and bottom to that,
   so the added ones are anchored high: heads sit in the upper part of a group
   photo, and the bottom of the frame is under the wordmark anyway. */
.splash__slide--added img{object-position:center 28%}
.splash__media.is-multi .splash__track{cursor:grab}
.splash__track.is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.splash__arrow{position:absolute;z-index:2;top:50%;width:46px;height:46px;margin-top:-23px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(21,0,34,.3);color:#fff;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;
  transition:background .3s,transform .35s var(--ease-out)}
.splash__arrow:hover{background:rgba(255,255,255,.2)}
.splash__arrow--prev{left:clamp(12px,2vw,28px)}
.splash__arrow--next{right:clamp(12px,2vw,28px)}
.splash__arrow--prev:hover{transform:translateX(-3px)}
.splash__arrow--next:hover{transform:translateX(3px)}
.splash__arrow svg{width:18px;height:18px}
/* the floating dock (60px tall, fixed at the top of the screen) sits over the top of this photo, so the dots start just below it */
.splash__dots{position:absolute;z-index:2;top:74px;left:0;right:0;display:flex;justify-content:center}
.splash__arrow[hidden],.splash__dots[hidden]{display:none}
/* each dot is a 26px tap target around an 8px mark; the current one stretches into a pink bar */
.splash__dot{position:relative;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer}
.splash__dot::after{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:99px;
  transform:translate(-50%,-50%);background:rgba(255,255,255,.55);box-shadow:0 1px 6px rgba(21,0,34,.5);
  transition:width .35s var(--ease-out),background .3s}
.splash__dot.is-on::after{width:24px;background:var(--pink-300)}
@media (max-width:700px){
  .splash__arrow{width:38px;height:38px;margin-top:-19px}
  .splash__arrow svg{width:15px;height:15px}
}
.splash__cue{position:absolute;z-index:1;left:50%;bottom:clamp(18px,3vh,34px);width:46px;height:46px;margin-left:-23px;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(21,0,34,.3);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);display:grid;place-items:center;animation:bob 2.4s ease-in-out infinite;
  transition:background .3s}
.splash__cue:hover{background:rgba(255,255,255,.2)}
.splash__cue svg{width:18px;height:18px}

@media (orientation:portrait){
  .splash{display:flex;flex-direction:column;align-items:stretch}
  /* the box grows into whatever the wordmark leaves; the photograph is
     pinned to it, since a % height on a flex item's child has nothing to
     resolve against */
  .splash__media{position:relative;inset:auto;flex:1;min-height:50vh;min-height:50svh}
  .splash__media img{position:absolute;inset:0}
  .splash__media::after{background:linear-gradient(180deg,rgba(21,0,34,.2) 0%,rgba(21,0,34,0) 50%,rgba(29,2,46,.6) 100%)}
  /* same size rule as above; here the width cap is what applies */
  .splash__mark{position:relative;left:auto;right:auto;bottom:auto;align-self:center;margin:clamp(18px,4vw,34px) 0 clamp(22px,5vw,40px);filter:none}
  .splash__cue{display:none}
}

.js .splash__media img{opacity:0;transform:scale(1.06)}
.js.is-ready .splash__media img{animation:splashIn 1.6s var(--ease-out) forwards}
@keyframes splashIn{to{opacity:1;transform:scale(1)}}
.js .splash__mark span{opacity:0;transform:translateY(30px)}
.js.is-ready .splash__mark span{animation:rise 1.1s var(--ease-out) .35s forwards}

/* ============================================================
   Hero card
   ============================================================ */
.hero{background:linear-gradient(140deg,#3A1466 0%,#2A1055 40%,#4A1A78 100%);color:#fff;
  padding:var(--pad) var(--pad) 0;display:flex;flex-direction:column;
  /* one screen tall: everything in the card, wordmark included, is on the
     first screen. The figure scales to whatever fits between 20% and the
     bottom edge, up to half the viewport wide. */
  min-height:calc(100vh - var(--gutter) * 2);min-height:calc(100svh - var(--gutter) * 2)}
.hero__aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(60px);opacity:.9}
.hero__aurora i{position:absolute;border-radius:50%;display:block;mix-blend-mode:screen}
.hero__aurora i:nth-child(1){width:52vw;height:52vw;left:-12%;top:-20%;background:radial-gradient(circle,rgba(255,90,166,.55),transparent 62%);animation:aurora1 18s ease-in-out infinite}
.hero__aurora i:nth-child(2){width:46vw;height:46vw;right:-10%;top:10%;background:radial-gradient(circle,rgba(168,85,247,.6),transparent 62%);animation:aurora2 22s ease-in-out infinite}
.hero__aurora i:nth-child(3){width:38vw;height:38vw;left:30%;bottom:-20%;background:radial-gradient(circle,rgba(51,240,229,.3),transparent 62%);animation:aurora3 26s ease-in-out infinite}
.hero__grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the splash's down button scrolls the card right up to the top, so its own
   nav takes over from the floating dock rather than sitting beneath it */
#hero{scroll-margin-top:var(--gutter)}
.hero > *{position:relative;z-index:1}
.hero > .hero__figure{z-index:0}
/* on scroll the script pushes each layer down by its own share of the scroll
   distance, so the card's contents slide down inside it as the page moves up */
.hero [data-slide]{will-change:transform}

/* --- top row: brand, vertical nav, quick links, email --- */
.hero__top{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:clamp(20px,4vw,60px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mark);font-size:24px;letter-spacing:.02em;line-height:1;
  text-transform:uppercase;color:#fff}
.brand__paw{font-size:20px;line-height:1;display:inline-block;transition:transform .5s var(--ease-back)}
.brand:hover .brand__paw{transform:rotate(-18deg) scale(1.15)}
.hero__nav{display:flex;flex-direction:column;gap:10px;padding-left:24px;border-left:1px solid var(--rule)}
.hero__nav a{position:relative;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.66);line-height:1.5;width:fit-content;transition:color .25s,transform .4s var(--ease-out)}
.hero__nav a::before{content:'';position:absolute;left:-25px;top:0;bottom:0;width:3px;background:var(--pink-500);
  transform:scaleY(0);transform-origin:center;transition:transform .35s var(--ease-out)}
/* a pink underline that draws in from the left under the hovered link */
.hero__nav a::after{content:'';position:absolute;left:0;right:.2em;bottom:-3px;height:1px;
  background:linear-gradient(90deg,var(--pink-300),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out)}
.hero__nav a:hover{color:#fff;transform:translateX(8px)}
.hero__nav a:hover::before,.hero__nav a[aria-current="page"]::before{transform:scaleY(1)}
.hero__nav a:hover::after,.hero__nav a[aria-current="page"]::after{transform:scaleX(1)}
.hero__nav a[aria-current="page"]{color:#fff}
/* the six links slide in one after another once the fonts are in; backwards
   fill, so the hover slide above takes over again when each has landed */
.js.is-ready .hero__nav a{animation:navIn .7s var(--ease-out) backwards;animation-delay:calc(.45s + var(--n,0) * .07s)}
.hero__nav a:nth-child(2){--n:1}
.hero__nav a:nth-child(3){--n:2}
.hero__nav a:nth-child(4){--n:3}
.hero__nav a:nth-child(5){--n:4}
.hero__nav a:nth-child(6){--n:5}
@keyframes navIn{from{opacity:0;transform:translateX(-16px)}}
.hero__quick{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
/* the column is otherwise sized by the three short links above the pill */
.hero__quick .mail{width:380px;max-width:100%}
.hero__quicklinks{display:flex;gap:22px}
.hero__quicklinks a{font-family:var(--font-serif);font-style:italic;font-size:19px;color:#fff;position:relative}
.hero__quicklinks a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--pink-300);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.hero__quicklinks a:hover::after{transform:scaleX(1);transform-origin:left}

.mail{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 22px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid var(--rule);min-width:min(360px,100%);position:relative;
  transition:background .3s,border-color .3s,box-shadow .3s}
.mail:focus-within{background:rgba(255,255,255,.12);border-color:var(--pink-300);box-shadow:0 0 0 4px rgba(255,90,166,.18)}
.mail--mobile{display:none}
.mail input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-family:var(--font-display);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mail input::placeholder{color:rgba(255,255,255,.55)}
.mail button{width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--violet-950);cursor:pointer;
  display:grid;place-items:center;flex:none;transition:transform .4s var(--ease-back),background .3s}
.mail button svg{width:16px;height:16px;transition:transform .35s var(--ease-out)}
.mail:hover button svg{transform:translateX(3px)}
.mail button:hover{background:var(--pink-300)}
.mail.is-sent button{background:var(--green-400)}
.mail.is-sent button svg{transform:none}
.mail__note{position:absolute;right:12px;top:calc(100% + 8px);font-size:11px;letter-spacing:.08em;color:var(--pink-200);
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.mail.is-sent .mail__note,.mail.is-error .mail__note{opacity:1;transform:none}
.mail.is-error .mail__note{color:#ffb3c4}
.mail.is-busy button{opacity:.6;cursor:progress}
/* honeypot: off screen for people, still in the form for bots */
.mail__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* burger: only below the desktop breakpoint */
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);background:rgba(255,255,255,.06);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:18px;height:1.5px;background:#fff;transition:transform .35s var(--ease-out),opacity .25s}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* --- middle: copy | photograph | quote --- */
.hero__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,3vw,48px);
  align-items:center;flex:1;margin-top:clamp(12px,2vh,28px)}
.hero__h1{font-family:var(--font-display);font-weight:800;font-size:clamp(42px,5.3vw,82px);line-height:.94;
  letter-spacing:-.03em;text-transform:uppercase;margin:0}
/* clip-path rather than overflow: it masks the word only above and below,
   so a long word can run into the column gap instead of being cut short */
.hero__h1 .w{display:block;clip-path:inset(-.02em -40% -.02em -5%);padding-bottom:.06em;margin-bottom:-.06em}
.hero__h1 .w span{display:block;transform-origin:left bottom}
.hero__blurb{font-size:15px;line-height:26px;color:var(--text-body);max-width:330px;margin:18px 0 0}
.hero__thumbs{display:flex;gap:14px;margin-top:22px}
.thumb{position:relative;width:132px;aspect-ratio:1/.72;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.28);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(29,2,46,.7))}
.thumb__tag{position:absolute;left:10px;bottom:9px;z-index:1;font-family:var(--font-display);font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#fff}
.thumb:hover{transform:translateY(-6px) rotate(-1.5deg);box-shadow:0 24px 40px rgba(0,0,0,.4)}
.thumb:hover img{transform:scale(1.12)}

/* centred by geometry, not by a transform: the scroll slide owns transform */
.hero__figure{position:absolute;left:calc(50% - 25vw);top:20%;bottom:0;width:50vw;margin:0;pointer-events:none}
.hero__figure .fx{position:absolute;inset:0;will-change:transform}
.hero__figure .fx img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 30px 40px rgba(29,2,46,.55));animation:floaty 7s ease-in-out infinite}
.hero__figure .halo{position:absolute;left:50%;top:40%;width:110%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,158,206,.4),rgba(168,85,247,.22) 45%,transparent 68%);filter:blur(40px);z-index:-1}

.quote{display:flex;flex-direction:column;align-items:flex-start;gap:0;justify-self:end}
/* The card's height comes from the screen, not the column: never under half
   the viewport, never over three quarters of the hero card, and in between
   whatever the nav, wordmark and slot line leave room for (about 340px).
   Written with vh first so browsers without svh still size it. */
:root{--quote-h:clamp(50vh,calc(100vh - var(--gutter) * 2 - 400px),calc(75vh - var(--gutter) * 1.5))}
@supports (height:1svh){:root{--quote-h:clamp(50svh,calc(100svh - var(--gutter) * 2 - 400px),calc(75svh - var(--gutter) * 1.5))}}
.quote__card{position:relative;width:auto;max-width:100%;height:var(--quote-h);aspect-ratio:1/1.32;border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--violet-500) 0%,#C86BDF 55%,var(--pink-300) 100%);
  display:grid;align-items:end;justify-items:center;padding-bottom:24px;box-shadow:0 30px 60px rgba(0,0,0,.35);overflow:hidden;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.quote__card::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 40%);
  pointer-events:none}
/* the clip fills the card; the poster is its first frame so nothing flashes
   while it buffers, and the gradient behind it is what shows if it never plays */
.quote__video{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
.quote__card:hover .quote__video{transform:scale(1.1)}
/* a soft violet vignette under the button: the ring text has to read over fur */
.quote__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 80%,rgba(29,2,46,.45) 0%,rgba(29,2,46,.22) 22%,rgba(29,2,46,0) 44%),
    linear-gradient(180deg,rgba(29,2,46,0) 40%,rgba(29,2,46,.4) 100%)}
.quote__card:hover{box-shadow:0 40px 70px rgba(0,0,0,.45)}
/* 90px is 60% of the 150px it started at; the label and ring scale with it
   but stay a touch above strict proportion so they remain readable */
.quote__btn{position:relative;z-index:3;width:90px;height:90px;border-radius:50%;background:var(--violet-950);color:#fff;
  display:grid;place-items:center;text-align:center;font-family:var(--font-display);font-size:8px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.6;box-shadow:0 14px 28px rgba(29,2,46,.4);
  transition:transform .5s var(--ease-back),background .3s;will-change:transform}
.quote__btn:hover{background:#2C0A45;transform:scale(1.06)}
.quote__ring{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);pointer-events:none;
  animation:spin 22s linear infinite;transition:animation-duration .3s}
.quote__card:hover .quote__ring{animation-duration:8s}
.quote__ring text{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  fill:rgba(255,255,255,.92);paint-order:stroke;stroke:rgba(29,2,46,.4);stroke-width:3.5px;stroke-linejoin:round}
.quote__meta{margin-top:14px;max-width:calc(var(--quote-h) / 1.32)}
.slots{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.01em;margin:0}
.slots .dot{width:8px;height:8px;border-radius:50%;background:var(--pink-500);box-shadow:0 0 0 4px rgba(255,90,166,.22);
  align-self:center;animation:pulseDot 2.4s ease-in-out infinite}
.slots__n{color:var(--pink-300);font-variant-numeric:tabular-nums}
.quote__note{font-size:12px;line-height:18px;color:var(--text-muted);margin:6px 0 0}

/* --- the giant wordmark line --- */
.hero__mark{position:relative;z-index:2;text-align:center;margin:clamp(-20px,-2.4vw,-40px) calc(var(--pad) * -1) 0;
  padding:0 var(--pad);pointer-events:none;overflow:hidden}
.hero__mark{filter:drop-shadow(0 20px 40px rgba(29,2,46,.45))}
/* Each letter moves on its own, so each carries the whole rainbow sized to
   the full line and offset back to its own position (the script measures
   this): the six slices reassemble into one sweep across "Fur Lab". Until
   the script has measured, the letters are the flat brand pink. */
.hero__mark span{display:inline-block;font-family:var(--font-mark);font-size:clamp(72px,min(12vw,14vh),200px);
  line-height:1.1;letter-spacing:0;text-transform:uppercase;color:var(--pink-200);will-change:transform}
.hero__mark.is-rainbow span:not(.sp){background-image:var(--gradient-rainbow);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* the logo takes the same spectrum, solid enough at 20px to still read */
.rainbow{background-image:var(--gradient-rainbow);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.hero__mark .sp{width:.22em}
/* home page: the wordmark sits in the copy column under the blurb instead of
   running along the foot of the card. Scoped under .hero__copy so it outranks
   the full-width sizing in the responsive blocks further down. The padding
   gives the brush swashes room inside the rise-in mask. */
.hero__copy .hero__mark--side{margin:clamp(12px,2.4vh,26px) 0 0;padding:.04em .2em .08em .06em;text-align:left;
  filter:drop-shadow(0 12px 26px rgba(29,2,46,.5))}
.hero__copy .hero__mark--side span{font-size:clamp(56px,min(6.4vw,11vh),112px);line-height:1}
@media (max-width:680px){
  .hero__copy .hero__mark--side{margin-top:16px}
  .hero__copy .hero__mark--side span{font-size:clamp(52px,17vw,96px)}
}

/* --- entrance choreography: everything sits still until fonts are in --- */
.js .hero [data-in]{opacity:0}
.js.is-ready .hero [data-in]{animation:riseBlur .9s var(--ease-out) forwards;animation-delay:calc(var(--d,0) * 1s)}
.js .hero__h1 .w span{transform:translateY(112%)}
.js.is-ready .hero__h1 .w span{animation:wordUp 1.1s var(--ease-out) forwards;animation-delay:calc(.35s + var(--i) * .12s)}
.js .hero__figure .fx{opacity:0;transform:translateY(5%) scale(.94)}
.js.is-ready .hero__figure .fx{animation:heroImg 1.4s var(--ease-out) .25s forwards}
@keyframes heroImg{to{opacity:1;transform:translateY(0) scale(1)}}
.js .quote__card{opacity:0;transform:translateY(30px) scale(.92)}
.js.is-ready .quote__card{animation:quoteIn 1s var(--ease-out) .7s forwards}
@keyframes quoteIn{to{opacity:1;transform:none}}
.js .hero__mark span{opacity:0}
.js.is-ready .hero__mark span{animation:letterUp 1s var(--ease-out) forwards;animation-delay:calc(.8s + var(--i) * .045s)}

/* ---------- Short desktop screens ----------
   Laptops at 125% zoom land around 1366x650 or 1536x720. The card is meant
   to be one screen tall with the wordmark on it, so on a short viewport the
   vertical rhythm scales with height instead of overflowing past the fold. */
@media (min-width:1181px) and (max-height:820px){
  .hero{padding-top:clamp(14px,2.4vh,48px)}
  .hero__nav{gap:4px}
  .hero__nav a{line-height:1.5;font-size:11.5px}
  .hero__body{margin-top:clamp(6px,1.2vh,28px)}
  .hero__h1{font-size:clamp(36px,min(5.3vw,8.2vh),82px)}
  .hero__blurb{margin-top:clamp(8px,1.4vh,18px);font-size:14px;line-height:1.55;max-width:320px}
  .hero__thumbs{margin-top:clamp(8px,1.6vh,22px)}
  .thumb{width:clamp(96px,14vh,132px)}
  .quote__meta{margin-top:clamp(6px,1.2vh,14px)}
  .slots{font-size:clamp(16px,2.6vh,22px)}
  .quote__note{font-size:12px;line-height:18px;margin-top:4px}
  .thumb__tag{white-space:nowrap;font-size:8px;letter-spacing:.14em}
  .hero__mark{margin-top:clamp(-30px,-3vh,-8px)}
  .hero__mark span{font-size:clamp(56px,min(12vw,15vh),200px)}
}
@media (min-width:1181px) and (max-height:680px){
  /* no room for the six-line nav: it folds into the menu button instead */
  .hero__nav{display:none}
  .hero__quick{flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:14px}
  .hero__quick .burger{display:flex;width:40px;height:40px}
  .hero__quicklinks a{font-size:17px}
  .quote__note{display:none}
  .hero__mark span{font-size:clamp(48px,min(12vw,13vh),200px)}
}

/* ============================================================
   Ticker
   ============================================================ */
.ticker{overflow:hidden;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;width:max-content;animation:ticker 32s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__list{display:flex;align-items:center;gap:34px;padding-right:34px;list-style:none;margin:0}
.ticker__list li{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.7);display:flex;align-items:center;gap:34px;white-space:nowrap}
.ticker__list li::after{content:'✦';color:var(--pink-500);font-size:10px}
.ticker__list li em{font-family:var(--font-serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:17px;color:var(--pink-200)}

/* ============================================================
   Best builds — the dark card with the category grid
   ============================================================ */
.builds{background:#7C1A44;padding:var(--pad);color:#fff}
.builds::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(168,85,247,.16),transparent 60%)}
.builds:hover::before{opacity:1}
.builds > *{position:relative;z-index:1}
.builds__head{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-bottom:26px}
.builds__title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-.01em;
  text-transform:uppercase;margin:0;background-image:linear-gradient(90deg,var(--pink-500),var(--pink-300));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.grid{display:grid;grid-template-columns:1.05fr repeat(3,1fr);grid-auto-rows:minmax(230px,1fr);gap:14px;
  perspective:1400px}
.tile{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;min-height:230px;
  transform-style:preserve-3d;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .6s var(--ease-out),opacity .5s,filter .5s;background:var(--violet-900)}
.tile.is-tilting{transition:transform .08s linear}
.tile--tall{grid-row:span 2}
.tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out),filter .6s}
.tile__tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.55;transition:opacity .6s}
.tile__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,2,46,0) 45%,rgba(29,2,46,.78) 100%)}
.tile__glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 60%)}
.tile:hover .tile__glare{opacity:1}
.tile:hover .tile__img{transform:scale(1.08)}
.tile:hover .tile__tint{opacity:.3}
.tile__word{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;
  font-family:var(--font-serif);font-style:italic;font-size:clamp(44px,5vw,72px);color:rgba(255,255,255,.88);
  text-shadow:0 10px 40px rgba(29,2,46,.6);transition:transform .6s var(--ease-out),letter-spacing .6s var(--ease-out);pointer-events:none}
.tile:hover .tile__word{transform:translateY(-50%) scale(1.06);letter-spacing:.02em}
.tile__paw{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);fill:rgba(255,255,255,.7);
  filter:drop-shadow(0 8px 20px rgba(29,2,46,.6));transition:transform .6s var(--ease-back)}
.tile:hover .tile__paw{transform:translate(-50%,-50%) rotate(-14deg) scale(1.12)}
.tile__tag{position:absolute;left:14px;bottom:14px;padding:9px 14px;border-radius:var(--r-sm);background:#fff;color:var(--violet-950);
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px;
  transform:translateZ(30px);transition:transform .5s var(--ease-out),background .3s}
.tile__tag .arr{width:0;overflow:hidden;opacity:0;transition:width .4s var(--ease-out),opacity .3s}
.tile:hover .tile__tag{background:var(--pink-300)}
.tile:hover .tile__tag .arr{width:12px;opacity:1}
.tile__count{position:absolute;right:14px;top:14px;padding:6px 10px;border-radius:var(--r-pill);
  background:rgba(29,2,46,.55);backdrop-filter:blur(8px);font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.tile--tall .tile__img{opacity:.35}
.tile--tall .tile__tint{background:linear-gradient(180deg,var(--cyan-400),var(--blue-400));mix-blend-mode:normal;opacity:.75}
.tile--tall .tile__vert{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);white-space:nowrap;
  font-family:var(--font-funky);font-size:clamp(44px,6vw,86px);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.7);transition:letter-spacing .7s var(--ease-out),color .5s}
.tile--tall:hover .tile__vert{letter-spacing:.24em;color:#fff}

/* ============================================================
   Steps — light panel
   ============================================================ */
.steps{background:var(--lavender-50);color:var(--violet-950);padding:var(--pad)}
.steps__head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;margin-bottom:34px}
.steps__title{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.5vw,34px);line-height:1.18;
  text-transform:uppercase;letter-spacing:-.005em;margin:0;display:flex;gap:16px;align-items:flex-start;max-width:1000px}
.steps__title .be{font-family:var(--font-serif);font-style:italic;text-transform:none;font-weight:400;
  font-size:2.9em;line-height:.72;color:var(--pink-500);letter-spacing:-.02em;margin-top:.02em}
.steps__title .hl{color:var(--pink-500);position:relative;display:inline-block}
.steps__title .hl::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--pink-500);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out) .6s;opacity:.35}
.steps.in .steps__title .hl::after{transform:scaleX(1)}
.steps__note{display:flex;align-items:center;gap:12px;font-size:12px;color:rgba(29,2,46,.7);white-space:nowrap;margin-top:8px}
.steps__note::before{content:'';width:44px;height:1px;background:var(--violet-950);transform:scaleX(0);transform-origin:right;
  transition:transform 1s var(--ease-out) .4s}
.steps.in .steps__note::before{transform:scaleX(1)}
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.step{position:relative;border-radius:var(--r-lg);min-height:360px;padding:14px;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 10px 30px rgba(29,2,46,.08);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.step:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(29,2,46,.16)}
.step--1{background:linear-gradient(180deg,#FFD6EA,var(--pink-300))}
.step--2{background:linear-gradient(180deg,#D9B9FF,#C79BFF)}
.step--3{background:linear-gradient(180deg,#FFB9DA,var(--pink-500))}
.step--4{background:linear-gradient(180deg,#F0EAFF,#D8CCFF)}
.step__n{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-serif);font-style:italic;
  font-size:clamp(84px,8vw,120px);color:rgba(255,255,255,.85);line-height:1;transition:transform .7s var(--ease-out);
  text-shadow:0 10px 30px rgba(29,2,46,.08)}
.step--4 .step__n{color:rgba(29,2,46,.14)}
.step:hover .step__n{transform:translate(-50%,-50%) scale(1.1) rotate(-3deg)}
.step__lbl{position:relative;z-index:1;align-self:flex-start;background:#fff;border-radius:var(--r-sm);padding:10px 14px;
  box-shadow:0 6px 18px rgba(29,2,46,.08);max-width:80%;transition:transform .5s var(--ease-out)}
.step:hover .step__lbl{transform:translateX(4px)}
.step__lbl b{display:block;font-family:var(--font-display);font-size:12px;font-weight:700}
.step__lbl span{display:block;font-size:11px;color:rgba(29,2,46,.65);margin-top:2px}
.step--bottom .step__lbl{margin-top:auto}
.step__bar{position:absolute;left:14px;right:14px;bottom:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.step__bar i{display:block;height:100%;width:100%;background:var(--violet-950);opacity:.55;transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease-out)}
.steps.in .step__bar i{transform:scaleX(1)}
.step--1 .step__bar i{transition-delay:.3s}.step--2 .step__bar i{transition-delay:.55s}.step--3 .step__bar i{transition-delay:.8s}.step--4 .step__bar i{transition-delay:1.05s}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:linear-gradient(135deg,#FFD0E6 0%,var(--pink-200) 45%,#E7C4FF 100%);color:var(--violet-950);
  padding:clamp(56px,8vw,96px) var(--pad);text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 60%);
  pointer-events:none;opacity:0;transition:opacity .5s}
.cta:hover::before{opacity:1}
.cta > *{position:relative}
.cta__title{font-family:var(--font-serif);font-style:italic;font-size:clamp(40px,6vw,76px);line-height:1;margin:0;letter-spacing:-.02em}
.cta__title .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.cta__title .w span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i) * .08s)}
.cta.in .cta__title .w span{transform:none}
.cta p{font-size:15px;line-height:26px;max-width:520px;margin:4px auto 6px;color:rgba(29,2,46,.78)}
.cta .btn{padding:20px 34px}
.cta__paws{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cta__paws svg{position:absolute;width:34px;height:34px;fill:var(--violet-950);opacity:.07;animation:bob 5s ease-in-out infinite}

/* ============================================================
   Footer
   ============================================================ */
.foot{padding:26px var(--pad) 12px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.foot__line{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:12px;color:var(--text-muted);align-items:center}
.foot__line a:hover{color:var(--pink-300)}
.foot__line span a{color:var(--pink-300);text-decoration:underline;text-underline-offset:3px}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.foot__links a{font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);transition:color .25s}
.foot__links a:hover{color:#fff}

/* ============================================================
   Mobile menu overlay
   ============================================================ */
.mnav{position:fixed;inset:0;z-index:950;background:rgba(21,0,34,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;justify-content:center;padding:80px 28px 40px;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility .4s}
body.menu-open .mnav{opacity:1;visibility:visible;transform:none}
.mnav a{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,8vw,48px);text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.25;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .25s;
  transition-delay:calc(var(--i) * .05s)}
body.menu-open .mnav a{opacity:1;transform:none}
.mnav a:hover,.mnav a[aria-current="page"]{color:var(--pink-300)}
.mnav__close{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);
  background:transparent;color:#fff;cursor:pointer;font-size:20px;display:grid;place-items:center}
.mnav__foot{margin-top:24px;font-size:12px;color:var(--text-muted)}

/* ============================================================
   Scroll reveals
   ============================================================ */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-stagger] > *{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--i,0) * .09s)}
.js [data-stagger].in > *{opacity:1;transform:none}
/* tiles carry their own transform for the tilt, so they reveal by opacity + scale on the wrapper instead */
.js .grid[data-stagger] > *{transform:scale(.94) translateY(20px)}
.js .grid[data-stagger].in > *{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0))}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  .hero{min-height:0}
  .hero__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);order:1}
  .hero__top{order:0}
  .hero__mark{order:3}
  .hero__figure{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:min(72vw,560px);
    order:2;margin-top:28px}
  .hero > .hero__figure{z-index:3}
  .quote{flex-direction:row;align-items:center;gap:22px;justify-self:start}
  .quote__card{height:auto;width:100%;max-width:220px}
  .quote__meta{max-width:300px}
  .quote__meta{margin-top:0}
  .grid{grid-template-columns:repeat(3,1fr)}
  .tile--tall{grid-row:span 1;grid-column:span 3;min-height:180px}
  .tile--tall .tile__vert{transform:translate(-50%,-50%);font-size:clamp(40px,8vw,72px)}
}
@media (max-width:900px){
  .hero__top{grid-template-columns:1fr auto}
  .hero__nav,.hero__quicklinks{display:none}
  .burger{display:flex}
  .hero__quick{flex-direction:row;align-items:center}
  .mail{display:none}
  .mail--mobile{display:flex;margin-top:26px;width:100%}
  .steps__grid{grid-template-columns:repeat(2,1fr)}
  .steps__head{grid-template-columns:1fr}
  .steps__note{white-space:normal}
  .dock .mail{display:none}
}
@media (max-width:680px){
  :root{--r-xl:26px;--r-lg:20px}
  .hero{min-height:0;padding-bottom:0}
  .hero__body{grid-template-columns:1fr;margin-top:24px}
  .hero__figure{height:min(96vw,420px);margin-top:20px}
  .hero__h1{font-size:clamp(44px,13vw,64px)}
  /* phone order: brand + menu, email, the fursuit, Fur Lab, the headline
     with its message and links, then the quote card full width and centred */
  .hero__top{grid-template-columns:1fr auto;row-gap:16px;align-items:center}
  .hero__quick{display:contents}
  .hero__quick .burger{grid-column:2;grid-row:1}
  .hero__quick .mail{display:flex;grid-column:1 / -1;grid-row:2;width:100%}
  .mail--mobile{display:none}
  .hero__top{order:0}
  .hero__figure{order:1}
  .hero__mark{order:2}
  .hero__body{order:3;margin-top:26px}
  .quote{flex-direction:column;align-items:center;width:100%;justify-self:stretch}
  .quote__card{width:100%;max-width:none;height:auto;aspect-ratio:1/1.15}
  .quote__meta{max-width:none;text-align:center}
  .slots{justify-content:center}
  .hero__mark{margin-top:10px}
  .hero__mark span{font-size:clamp(64px,19vw,110px)}
  .grid{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(190px,1fr);gap:10px}
  .tile{min-height:190px}
  .tile--tall{grid-column:span 2}
  .tile__word{font-size:40px}
  .steps__grid{grid-template-columns:1fr}
  .step{min-height:250px}
  .steps__title{flex-direction:column;gap:6px}
  .steps__title .be{font-size:2.4em;line-height:.9}
  .foot__line{flex-direction:column;gap:6px}
  .dock__links{gap:14px;padding-right:6px}
  .dock__links a{font-size:16px}
}

/* ============================================================
   Reduced motion — everything still arrives, just without travelling.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;scroll-behavior:auto !important}
  .js .hero [data-in],.js .hero__mark span,.js .quote__card,.js .hero__figure .fx{opacity:1;transform:none;animation:none}
  .js .hero__h1 .w span{transform:none;animation:none}
  .js .splash__media img,.js .splash__mark span{opacity:1;transform:none;animation:none}
  .splash__cue{animation:none}
  .js [data-reveal],.js [data-stagger] > *{opacity:1;transform:none}
  .hero__figure .fx{transform:none !important}
  .hero__aurora{display:none}
  .ticker__track{animation:none}
  .quote__ring{animation:none}
}