/* ============================================================
   Web Wizard — site.css
   Shared by every main page. Tokens mirror DESIGN.md exactly, and
   nothing below :root uses a raw colour. Mobile-first: base rules are
   the phone layout, min-width queries add to it.
   ============================================================ */

@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

:root{
  /* colours */
  --void:#0B0D12;
  --panel:#14171F;
  --panel-raised:#1A1E27;
  --hairline:rgba(255,215,113,.14);
  --hairline-strong:rgba(255,215,113,.3);
  --ink:#F3F1EC;
  --text:#D7D9DE;
  --muted:#9096A1;
  --gold:#C68127;
  --glint:#FFD771;
  --alert:#FF8A7E;
  --glint-soft:rgba(255,215,113,.12);
  --gold-soft:rgba(198,129,39,.22);
  --shade:rgb(5 6 9 / .72);

  /* type */
  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* spacing */
  --s-xs:8px; --s-sm:16px; --s-md:24px; --s-lg:48px; --s-xl:96px;
  --s-section:clamp(96px, 14vw, 200px);
  --gutter:clamp(16px, 5vw, 56px);
  --max:1240px;

  /* shape */
  --r-sm:14px; --r-md:28px; --r-full:9999px;
  --shadow-lift:0 1px 2px rgb(5 6 9/.4), 0 8px 24px rgb(5 6 9/.45), 0 32px 64px -24px rgb(5 6 9/.7);
  --shadow-glow:0 0 0 1px rgba(255,215,113,.18), 0 18px 60px -18px rgba(198,129,39,.55);

  /* time */
  --dur-fast:120ms; --dur-mid:240ms; --dur-slow:500ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  color-scheme:dark;
}

/* ---------- reset and base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scrollbar-color:var(--panel-raised) var(--void); }
@media (prefers-reduced-motion:no-preference){ html:not(.lenis){ scroll-behavior:smooth; } }
body{
  min-height:100dvh;
  font:400 1rem/1.7 var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1100px 620px at 78% -8%, var(--gold-soft), transparent 62%),
    radial-gradient(900px 700px at -10% 30%, rgba(255,215,113,.04), transparent 60%),
    var(--void);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* Static film grain: kills the flat digital look on a big dark field. */
body::after{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:.035;
  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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
[hidden]{ display:none !important; }
::selection{ background:var(--gold); color:var(--void); }
:focus-visible{ outline:2px solid var(--glint); outline-offset:3px; border-radius:6px; }

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{
  position:fixed; top:12px; left:12px; z-index:3000; padding:12px 18px; border-radius:var(--r-full);
  background:var(--glint); color:var(--void); font-weight:700; font-size:.875rem;
  transform:translateY(-200%); transition:transform var(--dur-mid) var(--ease-out);
}
.skip-link:focus{ transform:none; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:calc(var(--max) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:calc(780px + var(--gutter) * 2); }
main{ display:block; position:relative; z-index:1; overflow-x:clip; }
.section{ padding-block:var(--s-section); position:relative; }
.section--tight{ padding-block:var(--s-xl); }
.page-head{ padding-top:clamp(140px, 22vw, 220px); padding-bottom:var(--s-lg); position:relative; }
.page-head .lead{ margin-top:22px; }

/* ---------- type ---------- */
h1,h2,h3,h4,.display-hero,.display-lg,.h-lg,.h-md{
  font-family:var(--font-display); color:var(--ink); font-optical-sizing:auto; text-wrap:balance;
}
.display-hero{ font-size:clamp(3rem, 8.4vw, 8rem); font-weight:300; line-height:.94; letter-spacing:-.035em; font-variation-settings:'opsz' 144; }
.display-lg{ font-size:clamp(2.4rem, 6vw, 5.25rem); font-weight:340; line-height:.98; letter-spacing:-.03em; font-variation-settings:'opsz' 144; }
.h-lg{ font-size:clamp(1.75rem, 3.4vw, 2.75rem); font-weight:420; line-height:1.06; letter-spacing:-.02em; }
.h-md{ font-size:1.375rem; font-weight:560; line-height:1.2; letter-spacing:-.01em; }
.lead{ font-size:1.125rem; line-height:1.65; color:var(--text); max-width:60ch; }
.muted{ color:var(--muted); }
.label{ font-size:.8125rem; font-weight:600; line-height:1.4; letter-spacing:.01em; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--s-md);
  font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--glint);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; }
.prose p + p{ margin-top:1em; }
.prose a, a.link{
  color:var(--glint);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:1px;
}
a.link{ background-size:0% 1px; transition:background-size var(--dur-mid) var(--ease-out); }
a.link:hover,a.link:focus-visible{ background-size:100% 1px; }

/* ---------- icons ---------- */
.icon{ width:1.125em; height:1.125em; flex:none; }
.icon--lg{ width:28px; height:28px; }

/* ---------- buttons ---------- */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px; border-radius:var(--r-full);
  font:600 .9375rem/1 var(--font-body); letter-spacing:.01em; white-space:nowrap;
  cursor:pointer; user-select:none;
  transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-mid) linear,
             color var(--dur-mid) linear, border-color var(--dur-mid) linear, box-shadow var(--dur-mid) var(--ease-out);
}
.btn .icon{ transition:transform var(--dur-mid) var(--ease-out); }
.btn:active{ transform:translateY(1px) scale(.98); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; }
.btn--primary{ background:var(--gold); color:var(--void); box-shadow:var(--shadow-glow); }
/* A glint that travels round the border (React Bits StarBorder idea). */
.btn--primary::before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--a), transparent 0 62%, var(--glint) 74%, transparent 86%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
@media (prefers-reduced-motion:no-preference){
  .btn--primary::before{ animation:orbit 3.6s linear infinite; }
}
@keyframes orbit{ to{ --a:360deg; } }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline-strong); }
.btn--sm{ min-height:44px; padding:0 18px; font-size:.875rem; }
@media (hover:hover){
  .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,215,113,.35), 0 22px 60px -14px rgba(198,129,39,.75); }
  .btn--ghost:hover{ transform:translateY(-2px); background:var(--panel-raised); border-color:var(--glint); }
  .btn:hover .icon--nudge{ transform:translateX(4px); }
}
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- navigation ---------- */
.site-nav{
  position:fixed; top:12px; left:0; right:0; z-index:1000; padding-inline:12px;
  view-transition-name:site-nav;
  transition:transform var(--dur-slow) var(--ease-out);
}
.site-nav.is-hidden{ transform:translateY(-140%); }
.nav-bar{
  max-width:var(--max); margin-inline:auto; height:64px; padding:0 8px 0 12px;
  display:flex; align-items:center; gap:12px;
  border-radius:var(--r-full); border:1px solid var(--hairline);
  background:rgb(11 13 18 / .62);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 12px 40px -18px rgb(5 6 9 / .8);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav-bar{ background:rgb(11 13 18 / .96); }
}
.brand{ display:flex; align-items:center; gap:10px; min-height:44px; margin-right:auto; }
.brand img{ width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 1px var(--hairline-strong); }
.brand span{ font-family:var(--font-display); font-weight:600; font-size:1.125rem; color:var(--ink); letter-spacing:-.01em; }
.nav-links{ display:none; }
.nav-cta{ display:none; }
.nav-burger{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel-raised); border:1px solid var(--hairline);
}
.nav-burger span{ display:block; width:18px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform var(--dur-mid) var(--ease-out); }
.nav-burger span + span{ margin-top:5px; }
.nav-burger-lines{ display:block; }
@media (min-width:420px){ .nav-cta{ display:inline-flex; } }
@media (min-width:1100px){
  .nav-burger{ display:none; }
  .nav-links{ display:flex; align-items:center; gap:2px; }
  .nav-links > li > a,.nav-drop > button{
    display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:var(--r-full);
    font-size:.9rem; font-weight:500; color:var(--text);
    transition:color var(--dur-fast) linear, background-color var(--dur-fast) linear;
  }
  .nav-links > li > a:hover,.nav-drop > button:hover,.nav-drop.is-open > button{ color:var(--ink); background:rgba(255,255,255,.05); }
  .nav-links a[aria-current="page"]{ color:var(--ink); }
  .nav-links a[aria-current="page"]::after{
    content:""; position:absolute; left:14px; right:14px; bottom:9px; height:1px; background:var(--glint);
  }
  .nav-links > li{ position:relative; }
}
.nav-drop{ position:relative; }
.nav-drop .icon{ width:14px; height:14px; transition:transform var(--dur-mid) var(--ease-out); }
.nav-drop.is-open .icon{ transform:rotate(180deg); }
.nav-drop-menu{
  position:absolute; top:100%; right:0; min-width:200px; padding:8px;
  margin-top:0; border-radius:20px; border:1px solid var(--hairline);
  background:var(--panel); box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98); transform-origin:top right;
  transition:opacity var(--dur-mid) linear, transform var(--dur-mid) var(--ease-out), visibility 0s linear var(--dur-mid);
}
/* invisible bridge over the gap, so hover never drops between button and menu */
.nav-drop-menu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nav-drop.is-open .nav-drop-menu{ opacity:1; visibility:visible; transform:translateY(10px); transition-delay:0s; }
.nav-drop-menu a{
  display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:12px;
  font-size:.9rem; color:var(--text);
}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{ background:var(--panel-raised); color:var(--ink); }
.nav-drop-menu svg{ width:16px; height:16px; fill:currentColor; }

/* ---------- mobile menu (staggered, full screen) ---------- */
.menu{
  position:fixed; inset:0; z-index:1100; display:flex; flex-direction:column;
  padding:20px var(--gutter) 28px; overflow-y:auto;
  background:radial-gradient(700px 500px at 80% 0%, var(--gold-soft), transparent 60%), var(--void);
  visibility:hidden; opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.menu.is-open{ visibility:visible; opacity:1; transition-delay:0s; }
.menu-top{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.menu-close{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--panel-raised); border:1px solid var(--hairline); color:var(--ink); }
.menu-links{ margin-top:clamp(24px, 6vh, 56px); display:flex; flex-direction:column; }
.menu-links a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--hairline);
  font-family:var(--font-display); font-weight:340; font-size:clamp(2rem, 9vw, 3rem); line-height:1.05; color:var(--ink);
  font-variation-settings:'opsz' 144;
}
.menu-links a small{ font-family:var(--font-body); font-size:.75rem; font-weight:500; color:var(--muted); letter-spacing:.06em; }
.menu-links a[aria-current="page"]{ color:var(--glint); }
.menu-foot{ margin-top:auto; padding-top:32px; display:grid; gap:18px; }
.menu-socials{ display:flex; gap:10px; }
.menu-socials a{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--hairline); color:var(--ink); }
.menu-socials svg{ width:18px; height:18px; fill:currentColor; }
@media (prefers-reduced-motion:no-preference){
  .menu-links a,.menu-foot{ opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease-out), transform .7s var(--ease-out); }
  .menu.is-open .menu-links a,.menu.is-open .menu-foot{ opacity:1; transform:none; transition-delay:calc(80ms + var(--i, 0) * 55ms); }
  .menu-links a:nth-child(2){ --i:1; } .menu-links a:nth-child(3){ --i:2; } .menu-links a:nth-child(4){ --i:3; }
  .menu-links a:nth-child(5){ --i:4; } .menu-links a:nth-child(6){ --i:5; } .menu-links a:nth-child(7){ --i:6; } .menu-foot{ --i:7; }
}

/* ---------- cards ---------- */
/* Spotlight card: the cursor's light, inside the card (React Bits SpotlightCard). */
.spot{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-md);
}
.spot::before,.spot::after{ content:""; position:absolute; pointer-events:none; opacity:0; transition:opacity var(--dur-mid) linear; }
.spot::before{ inset:0; z-index:-1; background:radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), var(--glint-soft), transparent 62%); }
.spot::after{
  inset:-1px; border-radius:inherit; padding:1px;
  background:radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255,215,113,.6), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
@media (hover:hover) and (pointer:fine){
  .spot:hover::before,.spot:hover::after{ opacity:1; }
}

/* Screenshot card: tilts toward the pointer with a glare sweep (TiltedCard / GlareHover). */
.shot{
  position:relative; display:block; border-radius:var(--r-md); padding:8px;
  background:var(--panel-raised); border:1px solid var(--hairline); box-shadow:var(--shadow-lift);
  transform:perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform var(--dur-slow) var(--ease-out), border-color var(--dur-mid) linear;
}
.shot img{ width:100%; border-radius:calc(var(--r-md) - 8px); }
.shot__glare{
  position:absolute; inset:8px; border-radius:calc(var(--r-md) - 8px); pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity var(--dur-mid) linear;
  background:linear-gradient(115deg, transparent 30%, rgba(255,247,226,.32) 48%, transparent 64%);
  background-size:250% 250%; background-position:var(--gx, 100%) 0;
}
.shot.is-tilting{ transition:transform 90ms linear, border-color var(--dur-mid) linear; }
@media (hover:hover) and (pointer:fine){
  .shot:hover{ border-color:var(--hairline-strong); }
  .shot:hover .shot__glare{ opacity:1; }
}
.tag{
  display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 12px; border-radius:var(--r-full);
  font-size:.75rem; font-weight:600; letter-spacing:.02em; color:var(--glint); background:var(--glint-soft); border:1px solid var(--hairline);
}

/* ---------- FAQ (native details, animated in site.js) ---------- */
.faq{ display:grid; gap:12px; }
.faq details{ border-radius:20px; border:1px solid var(--hairline); background:var(--panel); transition:border-color var(--dur-mid) linear, background-color var(--dur-mid) linear; }
.faq details[open]{ border-color:var(--hairline-strong); background:var(--panel-raised); }
.faq summary{
  list-style:none; cursor:pointer; min-height:64px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-weight:600; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .icon{ color:var(--glint); transition:transform var(--dur-mid) var(--ease-out); }
.faq details[open] summary .icon{ transform:rotate(45deg); }
.faq summary:focus-visible{ outline-offset:-4px; border-radius:20px; }
.faq .faq-a{ padding:0 22px 22px; color:var(--muted); max-width:68ch; }
.faq .faq-a p + p{ margin-top:.8em; }
.faq .faq-a a{ color:var(--glint); text-decoration:underline; text-underline-offset:3px; }

/* ---------- scroll reveals (JS opts in; see site.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal-ready [data-reveal]{
    opacity:0; transform:translate3d(var(--rx0, 0), var(--ry0, 32px), 0);
    transition:opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--rd, 0ms);
  }
  /* sideways entrances only where there is room; on a phone they rise instead,
     so nothing ever sits past the screen edge and widens the page */
  @media (min-width:900px){
    .reveal-ready [data-reveal="left"]{ --rx0:-40px; --ry0:0; }
    .reveal-ready [data-reveal="right"]{ --rx0:40px; --ry0:0; }
  }
  .reveal-ready [data-reveal="scale"]{ --ry0:0; transform:scale(.94); }
  .reveal-ready [data-reveal].is-in{ opacity:1; transform:none; }
}

/* ---------- final call to action (shared by several pages) ---------- */
.cta-final{ text-align:center; position:relative; overflow:hidden; }
.cta-final::before{
  content:""; position:absolute; left:50%; top:50%; width:min(1100px, 140vw); aspect-ratio:1; transform:translate(-50%,-42%);
  background:radial-gradient(closest-side, var(--gold-soft), transparent 70%); pointer-events:none; z-index:-1;
}
.cta-final .display-lg{ max-width:16ch; margin-inline:auto; }
.cta-final p{ margin:var(--s-md) auto 0; max-width:52ch; }
.cta-final .btn-row{ justify-content:center; margin-top:var(--s-lg); }
.cta-final .fine{ margin-top:var(--s-md); font-size:.875rem; color:var(--muted); }

/* ---------- footer ---------- */
.site-footer{ position:relative; z-index:1; border-top:1px solid var(--hairline); padding-top:var(--s-xl); overflow:hidden; }
.foot-grid{ display:grid; gap:40px 24px; grid-template-columns:1fr 1fr; }
.foot-intro{ grid-column:1 / -1; max-width:360px; }
.foot-intro p{ margin-top:14px; font-size:.9rem; color:var(--muted); }
.foot-socials{ display:flex; gap:10px; margin-top:20px; }
.foot-socials a{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--hairline); color:var(--ink);
  transition:background-color var(--dur-mid) linear, color var(--dur-mid) linear, transform var(--dur-fast) var(--ease-out);
}
.foot-socials a:hover{ background:var(--gold); color:var(--void); }
.foot-socials a:active{ transform:scale(.94); }
.foot-socials svg{ width:17px; height:17px; fill:currentColor; }
.foot-col h2{ font-family:var(--font-body); font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--glint); margin-bottom:14px; }
.foot-col li a{ display:inline-flex; align-items:center; gap:10px; min-height:40px; font-size:.9375rem; color:var(--text); }
.foot-col li a:hover{ color:var(--ink); }
.foot-col .icon{ color:var(--glint); width:16px; height:16px; }
.foot-contact{ grid-column:1 / -1; }
.foot-nocold{ margin-top:12px; max-width:34ch; font-size:.8125rem; line-height:1.6; color:var(--muted); }
@media (min-width:760px){
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; }
  .foot-intro,.foot-contact{ grid-column:auto; }
}
/* The giant wordmark: each letter's weight follows the pointer (React Bits VariableProximity). */
.wordmark{
  margin-top:var(--s-xl); display:flex; justify-content:center; white-space:nowrap; user-select:none;
  font-family:var(--font-display); font-size:clamp(3.4rem, 17.5vw, 17rem); line-height:.8; letter-spacing:-.045em;
  color:var(--ink); font-variation-settings:'opsz' 144, 'wght' 200; contain:layout paint;
  -webkit-mask:linear-gradient(to bottom, #000 30%, transparent 96%); mask:linear-gradient(to bottom, #000 30%, transparent 96%);
}
.wordmark span{ display:inline-block; font-variation-settings:'opsz' 144, 'wght' var(--w, 200); }
.wordmark .gap{ width:.22em; }
.foot-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px;
  padding-block:22px 28px; border-top:1px solid var(--hairline); font-size:.8125rem; color:var(--muted);
}
.foot-base nav{ display:flex; gap:18px; }
.foot-base a{ min-height:32px; display:inline-flex; align-items:center; }
.foot-base a:hover{ color:var(--ink); }

/* ---------- click sparks, the spell, toast ---------- */
.spark-canvas{ position:fixed; inset:0; z-index:1900; pointer-events:none; width:100vw; height:100dvh; }
.ww-sparks{ position:fixed; inset:0; z-index:1950; overflow:hidden; pointer-events:none; filter:drop-shadow(0 0 4px rgba(255,215,113,.75)); }
.ww-spark{
  position:absolute; width:var(--s, 10px); height:var(--s, 10px); will-change:transform,opacity;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  background:radial-gradient(circle, var(--ink) 0 16%, var(--glint) 42%, var(--gold) 80%);
}
.ww-toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:2100;
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); padding:14px 20px; border-radius:var(--r-full);
  background:var(--panel-raised); border:1px solid var(--hairline-strong); color:var(--ink); font-size:.9rem; font-weight:600;
  box-shadow:var(--shadow-lift); opacity:0; transform:translate(-50%, 16px); pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.ww-toast.show{ opacity:1; transform:translate(-50%, 0); }
.ww-toast svg{ color:var(--glint); }

/* ---------- page transitions ---------- */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vt-out .28s var(--ease-in-out) both; }
  ::view-transition-new(root){ animation:vt-in .5s var(--ease-out) both; }
}
@keyframes vt-out{ to{ opacity:0; transform:translateY(-12px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(18px); } }

/* ---------- reduced motion safety net ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}

/* ---------- jargon tooltips (glossary.js) ---------- */
.term{ position:relative; border-bottom:1px dashed var(--hairline-strong); cursor:help; transition:color var(--dur-mid) linear, border-color var(--dur-mid) linear; }
.term:hover,.term.open{ color:var(--glint); border-bottom-color:var(--glint); }
.term-pop{
  position:absolute; bottom:calc(100% + 12px); left:50%; z-index:70; width:min(300px, 78vw); padding:14px 16px;
  border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--panel-raised); box-shadow:var(--shadow-lift);
  text-align:left; font:400 .84rem/1.65 var(--font-body); color:var(--muted); letter-spacing:normal; text-transform:none;
  opacity:0; pointer-events:none; transform:translate(calc(-50% + var(--shift, 0px)), 6px) scale(.97);
  transition:opacity .22s linear .35s, transform .22s var(--ease-out) .35s;
}
.term-pop b{ display:block; margin-bottom:6px; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--glint); }
.term-pop::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(calc(-50% - var(--shift, 0px))); border:6px solid transparent; border-top-color:var(--panel-raised); }
.term-pop::before{ content:""; position:absolute; top:100%; left:0; right:0; height:18px; }
.term-pop.below{ bottom:auto; top:calc(100% + 12px); }
.term-pop.below::before{ top:auto; bottom:100%; }
.term-pop.below::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--panel-raised); }
.term.open .term-pop{ opacity:1; pointer-events:auto; transform:translate(calc(-50% + var(--shift, 0px)), 0) scale(1); transition-delay:0s; }
@media (hover:hover){ .term:hover .term-pop{ opacity:1; pointer-events:auto; transform:translate(calc(-50% + var(--shift, 0px)), 0) scale(1); transition-delay:0s; } }

/* ---------- ticked lists (services, extras) ---------- */
.ticks{ display:grid; gap:12px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--text); }
.tick{ width:20px; height:20px; flex:none; margin-top:3px; padding:3px; border-radius:50%; background:var(--glint-soft); color:var(--glint); stroke-width:3; }
@media (min-width:760px){ .ticks--two{ grid-template-columns:1fr 1fr; gap:14px 28px; } }

/* ---------- search box (showcase, portfolio) ---------- */
.finder{ margin-top:var(--s-lg); display:grid; gap:10px; max-width:460px; }
.search{ position:relative; }
.search input{
  width:100%; min-height:56px; padding:0 20px 0 50px; border-radius:var(--r-full); font-size:1rem;
  border:1px solid var(--hairline-strong); background:var(--panel); color:var(--ink);
  transition:border-color var(--dur-mid) linear, box-shadow var(--dur-mid) linear;
}
.search input::placeholder{ color:var(--muted); }
.search input:focus{ outline:none; border-color:var(--glint); box-shadow:0 0 0 4px var(--glint-soft); }
.search-icon{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--glint); pointer-events:none; }
.finder-count{ font-size:.875rem; color:var(--muted); }
.finder-empty{ padding:28px; border-radius:var(--r-md); border:1px dashed var(--hairline-strong); color:var(--muted); text-align:center; }

/* ---------- themed dropdowns (forms.js: forms, homepage estimator) ---------- */
.cselect{ position:relative; }
.cselect-native{ position:absolute !important; inset:0; opacity:0; pointer-events:none; }
.cselect-btn{
  width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; text-align:left;
  border-radius:var(--r-sm); border:1px solid var(--hairline-strong); background:var(--panel-raised); color:var(--ink); font-size:1rem;
  transition:border-color var(--dur-mid) linear, box-shadow var(--dur-mid) linear;
}
.cselect-btn.is-placeholder .cselect-value{ color:var(--muted); }
.cselect-btn.invalid{ border-color:var(--alert); }
.cselect-btn:focus-visible,.cselect.open .cselect-btn{ outline:none; border-color:var(--glint); box-shadow:0 0 0 4px var(--glint-soft); }
.cselect-chevron{ color:var(--glint); flex:none; transition:transform var(--dur-mid) var(--ease-out); }
.cselect.open .cselect-chevron{ transform:rotate(180deg); }
.cselect-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:80; overflow-y:auto; padding:6px;
  border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--panel-raised); box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity var(--dur-mid) linear, transform var(--dur-mid) var(--ease-out), visibility 0s linear var(--dur-mid);
}
.cselect.drop-up .cselect-list{ top:auto; bottom:calc(100% + 6px); transform:translateY(4px); }
.cselect.open .cselect-list{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.cselect-option{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:10px 12px; border-radius:10px; cursor:pointer; color:var(--text); font-size:.9375rem; }
.cselect-option svg{ color:var(--glint); opacity:0; flex:none; }
.cselect-option.is-active{ background:var(--panel); color:var(--ink); }
.cselect-option.is-selected{ color:var(--glint); }
.cselect-option.is-selected svg{ opacity:1; }

.field > label{ display:block; font-size:.875rem; font-weight:600; color:var(--ink); margin-bottom:8px; }

/* ---------- "Magical Job" option and its confirmation (magical.js) ---------- */
.magic-opt{ position:relative; margin-top:18px; }
.magic-check{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; cursor:pointer;
  padding:18px 56px 18px 18px; border-radius:var(--r-sm); background:var(--void); isolation:isolate;
  border:1px solid transparent; transition:background-color var(--dur-mid) linear, transform var(--dur-fast) var(--ease-out);
}
/* a gold border with a slow shimmer travelling round it */
.magic-check::before{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--a), var(--hairline-strong) 0 60%, var(--glint) 75%, var(--hairline-strong) 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
@media (prefers-reduced-motion:no-preference){ .magic-check::before{ animation:orbit 5s linear infinite; } }
.magic-check:active{ transform:scale(.99); }
.magic-check input{ position:absolute; opacity:0; width:1px; height:1px; }
.magic-box{
  width:24px; height:24px; margin-top:1px; display:grid; place-items:center; border-radius:7px;
  border:1.5px solid var(--glint); color:var(--void); transition:background-color var(--dur-mid) linear;
}
.magic-box svg{ width:15px; height:15px; stroke-width:3; opacity:0; transform:scale(.4); transition:opacity var(--dur-mid) linear, transform var(--dur-mid) var(--ease-out); }
.magic-check input:checked + .magic-box{ background:var(--gold); border-color:var(--gold); }
.magic-check input:checked + .magic-box svg{ opacity:1; transform:none; }
.magic-check input:focus-visible + .magic-box{ outline:2px solid var(--glint); outline-offset:3px; }
.magic-check:has(input:checked){ background:var(--panel-raised); }
.magic-title{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:1.25rem; font-weight:500; color:var(--glint); line-height:1.2; }
.magic-title .icon{ width:20px; height:20px; transform-origin:15% 85%; }

/* the "!" button and its panel */
.magic-info{ position:absolute; top:50%; right:14px; z-index:6; margin-top:-14px; }
.magic-info-btn{
  position:relative; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  background:var(--glint); color:var(--void); font:800 15px/1 var(--font-body);
  transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-mid) linear;
}
.magic-info-btn::after{ content:""; position:absolute; inset:-8px; border-radius:50%; }   /* a bigger target for thumbs */
.magic-info-btn:hover, .magic-info.is-open .magic-info-btn{ transform:scale(1.08); background:var(--gold); }
.magic-info-btn:focus-visible{ outline:2px solid var(--glint); outline-offset:3px; }
@media (prefers-reduced-motion:no-preference){ .magic-info-btn{ animation:info-ping 2.6s ease-out infinite; } .magic-info.is-open .magic-info-btn{ animation:none; } }
@keyframes info-ping{ 0%{ box-shadow:0 0 0 0 var(--glint-soft); } 70%, 100%{ box-shadow:0 0 0 10px transparent; } }
.magic-info-tip{
  position:absolute; top:calc(100% + 12px); right:-8px; width:min(360px, calc(100vw - 64px)); cursor:auto;
  padding:18px 18px 16px; border-radius:var(--r-sm); border:1px solid var(--hairline-strong); background:var(--panel-raised);
  box-shadow:var(--shadow-lift); color:var(--text); font-size:.875rem; line-height:1.55; text-align:left;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s linear, transform .22s var(--ease-out), visibility 0s linear .22s;
}
.magic-info-tip::before{
  content:""; position:absolute; top:-7px; right:17px; width:12px; height:12px; transform:rotate(45deg);
  background:var(--panel-raised); border-left:1px solid var(--hairline-strong); border-top:1px solid var(--hairline-strong);
}
.magic-info.is-open .magic-info-tip,
html:not(.js) .magic-info:hover .magic-info-tip,
html:not(.js) .magic-info:focus-within .magic-info-tip{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.magic-info-head{ font-family:var(--font-display); font-size:1.15rem; color:var(--glint); margin-bottom:6px; }
.magic-pc-head{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.magic-pc-head--pro{ color:var(--glint); }
.magic-pc-head--con{ color:var(--ink); }
.magic-pros, .magic-cons{ display:grid; gap:6px; list-style:none; margin:0; padding:0; font-size:.8125rem; line-height:1.5; }
.magic-pros li, .magic-cons li{ position:relative; padding-left:18px; }
.magic-pros li::before, .magic-cons li::before{ position:absolute; left:0; top:0; font-weight:800; }
.magic-pros li::before{ content:"+"; color:var(--glint); }
.magic-cons li::before{ content:"\2013"; color:var(--muted); }
.magic-pay{ margin-top:14px; padding:10px 12px; border-radius:10px; background:var(--glint-soft); color:var(--text); font-size:.8125rem; line-height:1.55; }
.magic-pay strong{ color:var(--ink); }

/* the confirmation pop-up */
.magic-dialog{
  width:min(600px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain;
  padding:0; margin:auto; border-radius:var(--r-md);
  border:1px solid var(--hairline-strong); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lift), var(--shadow-glow);
}
.magic-dialog::backdrop{ background:var(--shade); }
.magic-dialog-inner{ padding:clamp(22px, 4vw, 30px); }
.magic-dialog-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.magic-dialog-icon{ flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--glint-soft); color:var(--glint); }
.magic-dialog-icon svg{ width:22px; height:22px; }
.magic-dialog-title{ font-size:clamp(1.4rem, 4vw, 1.75rem); font-weight:420; letter-spacing:-.02em; }
.magic-dialog-lead{ color:var(--text); font-size:.9375rem; line-height:1.55; }
.magic-dialog-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
@media (max-width:540px){ .magic-dialog-cols{ grid-template-columns:1fr; } }
.magic-dialog-col{ padding:12px 14px; border-radius:var(--r-sm); background:var(--void); border:1px solid var(--hairline); }
.magic-dialog .magic-pros, .magic-dialog .magic-cons{ font-size:.875rem; }
.magic-agree{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; margin-top:14px; padding:14px 16px; cursor:pointer;
  border-radius:var(--r-sm); border:1px solid var(--hairline-strong); font-size:.875rem; line-height:1.55; color:var(--text);
  transition:border-color var(--dur-mid) linear, background-color var(--dur-mid) linear;
}
.magic-agree[hidden]{ display:none; }
.magic-agree input{ width:20px; height:20px; margin-top:1px; accent-color:var(--gold); cursor:pointer; }
.magic-agree:has(input:checked){ border-color:var(--glint); background:var(--glint-soft); }
.magic-dialog-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top:18px; }
.magic-dialog-actions .btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
@media (max-width:480px){ .magic-dialog-actions .btn{ width:100%; } }
@media (prefers-reduced-motion:no-preference){
  .magic-dialog[open]{ animation:magic-in .35s var(--ease-out); }
  .magic-dialog[open]::backdrop{ animation:magic-fade .35s linear; }
}
@keyframes magic-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
@keyframes magic-fade{ from{ opacity:0; } }

/* the celebration once they confirm: glow, shimmer sweep, wand wave, sparks */
.magic-burst{ position:fixed; inset:0; width:100vw; height:100vh; z-index:9999; pointer-events:none; }
.magic-check::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255, 236, 170, .38) 50%, transparent 65%) 130% 0 / 250% 100% no-repeat;
}
.magic-check.is-casting{ animation:magic-glow 1.5s var(--ease-out); }
.magic-check.is-casting::after{ animation:magic-sweep 1s ease-out .12s; }
.magic-check.is-casting .magic-box{ animation:magic-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
.magic-check.is-casting .magic-title{ animation:magic-shine 1.5s ease-out; }
.magic-check.is-casting .magic-title .icon{ animation:magic-wave .9s ease-in-out; }
@keyframes magic-glow{
  0%{ box-shadow:0 0 0 0 transparent, 0 0 0 0 transparent; }
  22%{ box-shadow:0 0 0 2px var(--glint), 0 0 60px 8px var(--glint-soft); }
  100%{ box-shadow:0 0 0 0 transparent, 0 0 0 0 transparent; }
}
@keyframes magic-sweep{ 0%{ opacity:1; background-position:130% 0; } 100%{ opacity:1; background-position:-30% 0; } }
@keyframes magic-pop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
@keyframes magic-shine{ 0%, 100%{ text-shadow:none; } 25%{ text-shadow:0 0 18px var(--glint), 0 0 4px var(--glint); } }
@keyframes magic-wave{ 0%, 100%{ transform:rotate(0); } 25%{ transform:rotate(-22deg); } 55%{ transform:rotate(16deg); } 80%{ transform:rotate(-8deg); } }