/* =========================================================
   GOAT BOLD: site styles
   Night-mode brand system: dark violet canvas, slow moving glow,
   glass surfaces, one gradient reserved for the main button.
   Mobile first. Tested down to 320px wide and short in-app browsers
   (Instagram, Messenger, WhatsApp, Gmail).
   ========================================================= */

@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit-variable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* Techna Sans (Carl Enlund, SIL Open Font License): titles and big text (--font-display) */
@font-face{
  font-family:"Techna Sans";
  src:url("../fonts/techna-sans-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  /* Brand colour */
  --night:#140E22;
  --deep:#0D0917;
  --lift:#231A3B;
  --line:#34285A;
  --goat:#68559C;
  --halo:#9B5CFF;
  --lavender:#DDD0FF;
  --ink:#FFFFFF;
  --mist:#C8C0DC;
  --muted:#A99DC9;
  --cta:linear-gradient(90deg,#7B5CFF 0%,#C9A8FF 55%,#F3E9FF 100%);
  /* Liquid version of the CTA colours: two full cycles, so sliding it by half loops seamlessly */
  --liquid:linear-gradient(90deg,#7B5CFF,#C9A8FF,#F3E9FF,#C9A8FF,#7B5CFF,#C9A8FF,#F3E9FF,#C9A8FF,#7B5CFF);
  --error:#FFB3C4;

  /* Glass */
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 100%);
  --glass-edge:rgba(255,255,255,.16);
  --glass-shine:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.05);
  --glass-drop:0 12px 32px -12px rgba(4,2,12,.7);
  --card:rgba(35,26,59,.55);
  --card-edge:rgba(255,255,255,.08);

  /* Type */
  --font:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Techna Sans","Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Type scale: one size per kind of text, used everywhere */
  --fs-h1:clamp(2.25rem,1.2rem + 4.8vw,4.9rem);    /* page titles (H1) */
  --fs-h2:clamp(1.85rem,1.3rem + 2.6vw,3.4rem);    /* section titles */
  --fs-h3:clamp(1.125rem,1rem + .5vw,1.5rem);      /* card and block titles */
  --fs-h4:1.0625rem;                               /* small titles: questions, steps, list headings */
  --fs-lead:clamp(1.0625rem,1rem + .45vw,1.3rem);  /* subtitles and intros */
  --fs-body:1rem;                                  /* body text */
  --fs-small:.875rem;                              /* notes, meta, fine print */
  --fs-kicker:.975rem;                             /* section kickers and footer titles */
  --fs-label:clamp(.8rem,.7rem + .5vw,.95rem);     /* small uppercase labels */
  --fs-num:clamp(2rem,1.6rem + 1.6vw,3rem);        /* big numbers: stats and prices */

  /* Layout */
  --container:1200px;
  --gutter:clamp(16px,5vw,48px);
  --section:clamp(56px,9vw,120px);
  --header-h:64px;
  --offer-h:0px; /* height of the founding offer bar; main.js adds .has-offer while the offer runs */
  --r-card:20px;
  --r-small:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:960px){:root{--header-h:76px}}
.has-offer{--offer-h:54px} /* main.js sets the exact height of the offer trigger */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  background:var(--night);color-scheme:dark;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--offer-h) + 12px);
}
body{
  margin:0;min-width:320px;
  font-family:var(--font);font-size:var(--fs-body);line-height:1.2;font-weight:400;
  font-synthesis:none; /* never let the browser fake a bold (Techna Sans has only one weight) */
  color:var(--mist);background:transparent;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
@supports (overflow-x:clip){body{overflow-x:clip}}
/* Keeps cards that slide in from the right from widening the page on phones */
main{overflow-x:clip}
@supports not (overflow-x:clip){@media (max-width:767px){main{overflow-x:hidden}}}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--lavender);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
p,ul,ol,dl,h1,h2,h3,h4,figure{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--halo);outline-offset:3px;border-radius:6px}
::selection{background:rgba(155,92,255,.45);color:#fff}

.visually-hidden{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:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--lavender);color:var(--night);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}

.wrap{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}

/* ---------- Moving gradient background ----------
   Four soft light pools drifting slowly behind everything.
   Only transform is animated, so it stays smooth on phones. */
.bg{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;overflow:hidden;background:var(--night);pointer-events:none}
.bg i{position:absolute;display:block;border-radius:50%;will-change:transform}
/* Site background B4 "Midnight lavender": purple family only, no blue */
.bg .b1{width:95vmax;height:95vmax;left:-35vmax;top:-40vmax;background:radial-gradient(closest-side,rgba(170,130,255,.32),rgba(170,130,255,0));animation:drift-a 34s ease-in-out infinite alternate}
.bg .b2{width:85vmax;height:85vmax;right:-40vmax;top:-10vmax;background:radial-gradient(closest-side,rgba(84,40,170,.36),rgba(84,40,170,0));animation:drift-b 41s ease-in-out infinite alternate}
.bg .b3{width:80vmax;height:80vmax;left:-10vmax;bottom:-50vmax;background:radial-gradient(closest-side,rgba(200,150,255,.16),rgba(200,150,255,0));animation:drift-c 47s ease-in-out infinite alternate}
.bg .b4{width:60vmax;height:60vmax;right:-20vmax;bottom:-25vmax;background:radial-gradient(closest-side,rgba(130,80,230,.14),rgba(130,80,230,0));animation:drift-d 38s ease-in-out infinite alternate}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(20,14,34,0) 0%,rgba(13,9,23,.55) 100%)}
@keyframes drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18vw,14vh,0) scale(1.12)}100%{transform:translate3d(6vw,32vh,0) scale(.95)}}
@keyframes drift-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-22vw,20vh,0) scale(.9)}100%{transform:translate3d(-8vw,-6vh,0) scale(1.1)}}
@keyframes drift-c{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(24vw,-18vh,0) scale(1.15)}100%{transform:translate3d(40vw,-4vh,0) scale(1)}}
@keyframes drift-d{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-16vw,-22vh,0) scale(1.2)}100%{transform:translate3d(-30vw,-8vh,0) scale(.9)}}

/* ---------- Type ---------- */
h1,h2,h3,h4,.display,.h2,.h3{color:var(--ink);font-weight:600;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
.display{display:block;font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.035em}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.015em}
h4{font-size:var(--fs-h4);letter-spacing:0}
.lead{font-size:var(--fs-lead);line-height:1.2;color:var(--mist);max-width:40em;text-wrap:pretty}
.small{font-size:var(--fs-small);color:var(--muted)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-kicker);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--lavender)}
.grad-text{background:var(--cta);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Glass surfaces ---------- */
.glass{
  background:var(--glass-fill),rgba(30,21,52,.35);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shine),var(--glass-drop);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass{background:rgba(30,21,52,.94)}
}

/* ---------- Buttons: iOS-style liquid glass ---------- */
.btn{
  --pad-y:14px;--pad-x:24px;
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:var(--pad-y) var(--pad-x);
  border-radius:999px;border:1px solid transparent;
  font-size:1rem;font-weight:600;line-height:1.2;letter-spacing:-.005em;text-align:center;text-decoration:none;
  cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
}
/* specular highlight across the top, like light on curved glass */
.btn::before{content:"";position:absolute;z-index:-1;inset:1px 1px 48% 1px;border-radius:999px 999px 40px 40px/999px 999px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0) 100%);opacity:.7;pointer-events:none}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}

.btn-primary{
  color:var(--night);
  background:var(--liquid);background-size:200% 100%;animation:liquid 10s linear infinite;
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -3px 8px rgba(91,52,190,.28),0 10px 30px -10px rgba(155,92,255,.85);
}
.btn-primary:hover{color:var(--night);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -3px 8px rgba(91,52,190,.28),0 14px 38px -10px rgba(155,92,255,1)}

.btn-glass{
  color:var(--ink);
  background:var(--glass-fill),rgba(255,255,255,.03);
  border-color:var(--glass-edge);
  box-shadow:var(--glass-shine),0 8px 24px -12px rgba(4,2,12,.8);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
}
.btn-glass::before{opacity:.35}
.btn-glass:hover{color:var(--ink);border-color:rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.btn-glass{background:rgba(52,40,90,.85)}}

.btn-sm{--pad-y:10px;--pad-x:16px;min-height:42px;font-size:.9375rem}
.btn-block{width:100%}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}}

/* Small square arrow button (from the Auros reference) */
.arrow-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--ink);background:var(--glass-fill),rgba(155,92,255,.18);border:1px solid var(--glass-edge);box-shadow:var(--glass-shine);transition:transform .3s var(--ease),background-color .3s}
.arrow-btn svg{width:16px;height:16px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top)}
.header-bar{position:relative;transition:background-color .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}

/* Scroll progress line along the bottom of the header.
   Starts at 4% at the top of the page, reaches 100% at the bottom (set by main.js).
   The gradient is fixed across the full width, so the line turns from white to purple as it fills. */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgba(255,255,255,.06);pointer-events:none;overflow:hidden}
.scroll-progress-fill{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#FFFFFF 0%,var(--lavender) 35%,#B98CFF 65%,var(--halo) 100%);
  -webkit-clip-path:inset(0 calc(100% - var(--progress,4%)) 0 0);clip-path:inset(0 calc(100% - var(--progress,4%)) 0 0);
  opacity:.9;
}
.site-header.is-scrolled .header-bar,.site-header.menu-is-open .header-bar{
  background:linear-gradient(180deg,rgba(20,14,34,.72),rgba(20,14,34,.55));
  border-bottom-color:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header.is-scrolled .header-bar,.site-header.menu-is-open .header-bar{background:rgba(20,14,34,.96)}
}
.header-inner{height:var(--header-h);display:flex;align-items:center;gap:12px}
.logo{position:relative;display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none;min-height:44px}
/* The goat mark flows in the liquid CTA colours: a gradient shaped by the logo file sits exactly over the original image */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .logo::before{content:"";position:absolute;left:0;top:50%;width:24px;aspect-ratio:76/96;transform:translateY(-50%);pointer-events:none;
    background:var(--liquid);background-size:200% 100%;animation:liquid 10s linear infinite;
    -webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat}
  .logo img:first-child{opacity:0}
}
.logo img:first-child{width:24px;height:auto}
.logo-word{width:104px;height:auto}
@media (min-width:960px){.logo img:first-child,.logo::before{width:28px}.logo-word{width:124px}}
@media (max-width:359px){.logo-word{display:none}}

.nav{display:none;margin-inline:auto}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:999px;border:0;background:none;color:var(--mist);font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.nav-link:hover,.nav-link[aria-current=page],.nav-trigger.is-current,.has-menu.is-open>.nav-link{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-link svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.has-menu{position:relative}
.has-menu.is-open>.nav-link svg{transform:rotate(180deg)}

/* Desktop Services menu: D2 "featured + list" (2026-09-28). Bundles in the spotlight on the left (faint GOAT mark behind),
   the other seven services as a list with prices on the right, founding offer line and Free brand check underneath.
   Centred under the header (the panel is placed on .header-bar, so .has-menu is not positioned). Opens on click and on
   hover (150ms open, 250ms close delay, in main.js). No blur; fade and 8px slide only. Phones and tablets use the drawer. */
.has-menu{position:static}
.svc-mega{position:absolute;left:50%;top:calc(100% + 12px);z-index:5;opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-8px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s}
.svc-mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-menu.is-open .svc-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.svc-mega__box{width:min(880px,calc(100vw - 48px));display:grid;grid-template-columns:300px 1fr;overflow:hidden;border-radius:24px;
  background:linear-gradient(170deg,rgba(40,27,66,.98),rgba(20,14,34,.98));border:1px solid var(--glass-edge);
  box-shadow:var(--p2-shine),0 40px 100px -20px rgba(4,2,12,.75)}
.svc-feat{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:26px;color:var(--ink);text-decoration:none;
  background:radial-gradient(300px 260px at 30% 20%,rgba(155,92,255,.42),rgba(155,92,255,0) 72%),var(--lift)}
.svc-feat__mark{position:absolute;z-index:-1;top:10px;right:-40px;width:142px;height:180px;opacity:.08;pointer-events:none}
.svc-feat__tag{align-self:flex-start;padding:5px 11px;border-radius:999px;background:linear-gradient(90deg,#eddfff,#ffa77e);color:var(--night);
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.svc-feat__title{margin:18px 0 8px;font-family:var(--font-display);font-size:1.875rem;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.svc-feat__text{font-size:.9375rem;line-height:1.5;color:var(--muted)}
.svc-feat__price{width:fit-content;margin:10px 0 22px;font-size:1rem;font-weight:600;background:linear-gradient(90deg,#eddfff,#ffa77e);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-feat .svc-feat__cta{margin-top:auto;width:100%;min-height:48px}
.svc-list{display:flex;flex-direction:column;padding:12px 12px 0}
.svc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border-radius:14px;color:var(--ink);text-decoration:none;transition:background-color .25s}
.svc-row:hover,.svc-row:focus-visible{background:rgba(255,255,255,.06)}
.svc-row b{font-family:var(--font-display);font-size:1rem;font-weight:600}
.svc-row span{font-size:.875rem;font-weight:600;color:#C9A8FF;white-space:nowrap;font-variant-numeric:tabular-nums}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px -12px 0;padding:16px 26px;border-top:1px solid var(--card-edge);font-size:.875rem;color:var(--muted)}
.svc-foot__offer b{color:#ffa77e;font-weight:600}
.svc-foot__go{display:flex;align-items:center;gap:8px;margin-left:auto;font-weight:600;color:var(--ink);text-decoration:none}
.svc-foot__go svg{width:10px;height:10px;fill:#C9A8FF;transition:transform .25s var(--ease)}
.svc-foot__go:hover svg{transform:translateX(3px)}
.svc-mega a:focus-visible{outline:2px solid #C9A8FF;outline-offset:3px}
@media (max-width:959px){.svc-mega{display:none}}
@media (prefers-reduced-motion:reduce){.svc-mega{transition:none;transform:translate(-50%,0)}}

.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
/* Phones and tablets: no "Contact us" button in the header (the WhatsApp button and menu cover it) */
@media (max-width:959px){.header-actions>.btn{display:none}}
@media (min-width:960px){.header-actions{margin-left:0}.nav{display:block}.menu-toggle{display:none!important}}

.menu-toggle{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;cursor:pointer;padding:0}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{display:block;width:18px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.menu-toggle .bars{position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0}
.menu-toggle .bars::before{top:-6px}.menu-toggle .bars::after{top:6px}
.menu-toggle[aria-expanded=true] .bars{background:transparent}
.menu-toggle[aria-expanded=true] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.menu-word{display:none}
/* Phones: no circle, just two uneven lines (white on top, lilac below). Tap area stays 44px.
   (The "Menu" pill version is kept in .menu-word, hidden, in case we switch back.) */
@media (max-width:760px){
  .menu-toggle{position:relative;width:44px;height:44px;margin-right:-8px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu-toggle .bars{width:22px;height:8px;background:transparent}
  .menu-toggle .bars::before{top:0;width:22px;height:2px}
  .menu-toggle .bars::after{top:6px;left:auto;right:0;width:14px;height:2px;background:#C9A8FF}
  /* open: a flat, even X; both lines 18px and crossing at the same centre (transform only, so it animates smoothly) */
  .menu-toggle[aria-expanded=true] .bars::before{transform:translateY(3px) rotate(45deg) scaleX(.818)}
  .menu-toggle[aria-expanded=true] .bars::after{transform:translate(-4px,-3px) rotate(-45deg) scaleX(1.286)}
}

/* Mobile menu: a glass sheet under the header that scrolls on its own,
   so it always fits inside small in-app browser windows. */
.mobile-menu{position:absolute;left:10px;right:10px;top:calc(100% + 6px);border-radius:22px;padding:10px;max-height:calc(100vh - var(--header-h) - var(--offer-h) - 24px);max-height:calc(100dvh - var(--header-h) - var(--offer-h) - env(safe-area-inset-top) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mobile-menu .m-label{padding:12px 14px 4px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mobile-menu a:not(.btn){display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 14px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:1.0625rem;font-weight:500}
.mobile-menu a:not(.btn):hover,.mobile-menu a[aria-current=page]{background:rgba(255,255,255,.07)}
.mobile-menu .m-sub{display:block;font-size:var(--fs-small);color:var(--muted);font-weight:400}
.mobile-menu .m-group{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:10px 14px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;font-size:1.0625rem;font-weight:600;text-align:left;cursor:pointer}
.mobile-menu .m-group:hover,.mobile-menu .m-group[aria-expanded=true]{background:rgba(255,255,255,.07)}
.mobile-menu .m-chev{width:9px;height:9px;margin-right:4px;border-right:2px solid var(--mist);border-bottom:2px solid var(--mist);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.mobile-menu .m-group[aria-expanded=true] .m-chev{transform:rotate(-135deg) translate(-2px,-1px)}
.mobile-menu .m-services{padding:2px 0 4px 10px;margin-left:14px;border-left:1px solid rgba(201,168,255,.25)}
.mobile-menu .m-services a:not(.btn){min-height:46px;font-size:1rem}
.mobile-menu hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:6px 8px}
.mobile-menu .btn{margin:10px 4px 4px;width:calc(100% - 8px)}
html.menu-open{overflow:hidden}   /* lock the page on <html>, not <body>: a body scroll lock broke the sticky header, so after scrolling down the menu X (the header button) was off screen */
@media (min-width:960px){.mobile-menu{display:none!important}}

/* ---------- Sections ---------- */
main{display:block}
/* grid children may shrink below their content width (prevents sideways scroll on small phones) */
.grid>*,.stack>*,.case>*,.split>*,.hero-grid>*,.post>*,.service-rows>*,.steps>*,.case-meta>*,.footer-grid>*{min-width:0}
.stack,.case,.post,.case-meta{grid-template-columns:minmax(0,1fr)}
.section{padding-block:var(--section)}
.section-tight{padding-block:calc(var(--section)*.6)}
.section-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,56px);max-width:52rem}
.section-head.section-head-tight{gap:4px}
.section-head.center{margin-inline:auto;text-align:center;justify-items:center}
@media (min-width:960px){.section-head.split{max-width:none;grid-template-columns:1fr 1fr;align-items:end;gap:48px}}

.card{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-card);padding:clamp(22px,3.2vw,36px)}
.grid{display:grid;gap:16px}
@media (min-width:700px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:700px) and (max-width:999px){.grid-4{grid-template-columns:repeat(2,1fr)}}

.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border-radius:999px;font-size:var(--fs-small);color:var(--mist);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--lavender) 0 3px,transparent 3.5px),rgba(155,92,255,.25);border:1px solid rgba(221,208,255,.35)}

/* ---------- Red placeholder boxes for media added at the end ---------- */
.slot{
  position:relative;display:grid;place-items:center;align-content:center;gap:6px;
  width:100%;aspect-ratio:var(--ar,16/9);padding:20px;border-radius:var(--r-card);
  border:2px dashed #FF4D4D;color:#FFC2C2;text-align:center;font-size:.875rem;line-height:1.45;
  background:repeating-linear-gradient(135deg,rgba(255,77,77,.10) 0 14px,rgba(255,77,77,.04) 14px 28px);
}
.slot b{display:block;color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.slot span{max-width:30em}
.slot code{font-size:.75rem;color:#FF9A9A}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(24px,5vw,64px);padding-bottom:var(--section)}
.hero-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.hero h1{display:grid;gap:18px}
.hero .eyebrow{font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--lavender);line-height:1.5}
.hero .lead{margin-top:20px}
/* Hero intro: on phones each sentence part sits on its own row */
@media (max-width:599px){.hero-lead{font-size:min(1.0625rem,4.1vw)}.hero-lead span{display:block}}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:479px){.actions .btn{flex:1 1 100%}}
.hero-foot{margin-top:clamp(32px,5vw,56px);display:grid;gap:12px}
.hero-visual .slot{--ar:4/5}
@media (max-width:959px){.hero-visual .slot{--ar:16/11}}

/* Particle logo (slot 01). The box only reserves space; particles are drawn on a fixed canvas behind the page. */
.hero-logo{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/5;max-height:74vh}
.hero-logo img{width:40%;height:auto;opacity:.9}
.hero-logo.is-live img{opacity:0}
@media (max-width:959px){.hero-logo{aspect-ratio:1/1;max-width:460px;max-height:60vh;margin-inline:auto}}
.particle-canvas{position:fixed;left:0;top:0;z-index:-1;pointer-events:none}

/* Page hero on inner pages */
.page-hero{padding-top:clamp(20px,4vw,48px);padding-bottom:clamp(40px,6vw,80px)}
.page-hero h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.03em;max-width:18ch}
.page-hero .lead{margin-top:18px}

/* Breadcrumbs */
.crumbs{margin-bottom:22px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;font-size:var(--fs-small);color:var(--muted)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:6px;opacity:.5}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* Facts strip (big numbers in lavender, from the Auros reference) */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;border-radius:var(--r-card);overflow:hidden;background:rgba(255,255,255,.08);border:1px solid var(--card-edge)}
@media (min-width:900px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{display:flex;flex-direction:column;padding:clamp(18px,3vw,32px);background:rgba(20,14,34,.72)}
.fact dd{margin:0;order:-1}
.fact-num{display:block;font-variant-numeric:tabular-nums;font-size:var(--fs-num);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--lavender)}
.fact-label{display:block;margin-top:10px;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}

/* Numbered problem list */
.reasons{counter-reset:r;list-style:none;padding:0;margin:0}
.reason{position:relative;display:grid;gap:12px}
/* Phones: the 3 reason cards stack as you scroll. Each card pins under the header, the next slides over it,
   and main.js fades the covered card out so the see-through cards never show two texts at once. */
@media (max-width:699px) and (prefers-reduced-motion:no-preference){
  .reasons:not(.r-tabs) .reason{position:sticky;top:calc(var(--header-h) + var(--offer-h) + env(safe-area-inset-top) + 16px)}
}
.reason h3+p{margin-top:-2.4px} /* body text 20% closer to its title (12px to 9.6px) */
/* "Why clients choose someone else?" cards: everything 10% smaller */
.reason.card{padding:clamp(20px,2.9vw,32px);gap:11px}
/* Phones: the 01 02 03 cards about 14% shorter, mostly less space around See the fix */
@media (max-width:760px){.reason.card{padding:16px 20px 10px;gap:9px}.reason .fix{margin-top:0}.reason .fix-label{min-height:40px;padding:8px 0 0}}

.reason-num{font-size:var(--fs-label);letter-spacing:.14em;color:var(--lavender);font-weight:500}
.fix{margin-top:6px;border-top:1px solid rgba(255,255,255,.08)}
.fix-label{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 0 4px;font-size:var(--fs-label);letter-spacing:.14em;font-weight:500;text-transform:uppercase;color:var(--lavender);-webkit-tap-highlight-color:transparent}
.fix-label::-webkit-details-marker{display:none}
.fix-label::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid var(--lavender);border-bottom:1.5px solid var(--lavender);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
.fix[open] .fix-label::after{transform:rotate(-135deg) translate(-2px,-2px)}
.fix-label:hover{color:var(--ink)}
.fix-label:focus-visible{outline:2px solid var(--halo);outline-offset:4px;border-radius:6px}
.fix-body{padding-bottom:4px;color:var(--ink)}
.fix-body a{font-size:.8em}
/* Services heading sits closer to its intro line (phones 13px, desktop 28px) */
@media (max-width:959px){#services .section-head.split{gap:13px}}
@media (min-width:960px){#services .section-head.split{gap:28px}}
.fix[open] .fix-body{animation:fix-in .35s var(--ease)}
@keyframes fix-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Service rows */
.service-rows{display:grid;gap:14px}
.service-row{display:grid;gap:16px;align-items:start;text-decoration:none;color:inherit;transition:border-color .3s,background-color .3s,transform .3s var(--ease)}
.service-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.service-row .kicker{margin-bottom:10px}
.service-row p{color:var(--mist)}
.service-row .chips{margin-top:4px}
@media (hover:hover){.service-row:hover{border-color:rgba(221,208,255,.28);background:rgba(45,34,76,.62)}.service-row:hover .arrow-btn{transform:rotate(45deg);background:var(--cta);color:var(--night)}}
@media (min-width:1000px){.service-rows{grid-template-columns:repeat(3,1fr)}}

/* Steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:14px}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{display:grid;gap:10px;align-content:start}
.step-num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-weight:600;color:var(--night);background:var(--cta);box-shadow:inset 0 1px 1px rgba(255,255,255,.8)}

/* Split media + text */
.split{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split.reverse>:first-child{order:2}}

/* Case study */
.case{display:grid;gap:clamp(20px,3vw,40px)}

/* Work showcase (slot 03): laptop behind on the right, phone recording in front on the left */
.showcase{position:relative;margin:0;aspect-ratio:1/1}
@media (min-width:600px){.showcase{aspect-ratio:16/12}}
.showcase-laptop{position:absolute;top:0;right:-2%;width:90%;height:auto;filter:drop-shadow(0 24px 40px rgba(4,2,12,.55))}
.showcase-phone{position:absolute;left:20%;bottom:10%;width:28.8%;aspect-ratio:412/858;filter:drop-shadow(0 22px 34px rgba(4,2,12,.6))}
.showcase-phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:14%/6.8%;background:#EDEDED}
@media (min-width:600px){.showcase-laptop{width:64.8%;right:0}.showcase-phone{left:12%;bottom:0;width:23.2%}}
@media (min-width:900px){.case{grid-template-columns:1.1fr .9fr;align-items:center}}
.case-meta{display:grid;gap:14px}
.case-id{display:grid;gap:0;line-height:1.1} /* project name, place and website sit tight together */
.case-id .h2{line-height:1.1}
.case-id p{line-height:1.3} /* place and website: 1.3 between the two lines */
/* a line break that only happens on phones */
.br-phone{display:none}
.br-desk{display:none}
@media (min-width:761px){.br-desk{display:inline}}
@media (max-width:760px){.br-phone{display:inline}.hide-phone{display:none}}
/* Mirabell case: its details wear the client's own brand colours (champagne gold and warm white, as in the carousel photos) */
.case-mirabell .case-id p.small{color:#E9DAB4}
.case-mirabell .case-id a{color:#D9C08A;text-decoration-color:rgba(217,192,138,.55);text-underline-offset:3px}
.case-mirabell .case-id a:hover{color:#F6EBCB}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .case-mirabell .case-id a{background:linear-gradient(90deg,#B8975A,#F6EBCB 50%,#C9A96A);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.case-mirabell>p{color:#FFF8EC}
.btn-gold{color:#2A1D0B;background:linear-gradient(135deg,#9C7F45 0%,#D9C08A 38%,#F6EBCB 52%,#D9C08A 66%,#A8884F 100%);border-color:rgba(246,235,203,.65);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -3px 8px rgba(120,90,40,.3),0 10px 28px -12px rgba(217,192,138,.75)}
.btn-gold::before{opacity:.5}
.btn-gold:hover{color:#2A1D0B;box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -3px 8px rgba(120,90,40,.3),0 14px 34px -10px rgba(217,192,138,.95)}
/* Grainy carousel in slot 03 (grain-carousel.js draws each picture on its canvas) */
.case-visual{display:grid;gap:clamp(20px,3vw,32px);min-width:0}
/* Carousel arrows: < and > made of 5 floating triangles (smaller on phones) */
.result{padding:16px;border-radius:14px;background:rgba(155,92,255,.1);border:1px solid rgba(155,92,255,.3)}
.card.is-placeholder{border:2px dashed #FF4D4D}
.result.is-placeholder{border:2px dashed #FF4D4D;background:rgba(255,77,77,.06);color:#FFC2C2}

/* Principles */
.principle h3{font-size:var(--fs-h3)}
.principle p{margin-top:6px}
.principle .never{color:var(--muted);font-size:var(--fs-body)}

/* FAQ */
.faq-list{display:grid;gap:10px}
.faq-item{border-radius:16px;background:var(--card);border:1px solid var(--card-edge);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;min-height:56px;color:var(--ink);font-weight:500;font-size:var(--fs-h4);line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid var(--lavender);border-bottom:1.5px solid var(--lavender);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s var(--ease)}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq-a{padding:0 20px 20px}
.faq-a p+p{margin-top:10px}
@media (min-width:960px){.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}.faq-grid .section-head{position:sticky;top:calc(var(--header-h) + var(--offer-h) + 24px)}}

/* CTA panel with the one halo ring */
.cta-panel{position:relative;overflow:hidden;text-align:center;display:grid;justify-items:center;gap:18px;padding:clamp(40px,7vw,96px) clamp(20px,5vw,64px);border-radius:28px;background:radial-gradient(80% 90% at 50% 0%,rgba(155,92,255,.35),rgba(155,92,255,0) 70%),rgba(13,9,23,.6);border:1px solid var(--card-edge)}
.halo{position:absolute;left:50%;top:-18%;width:min(560px,120%);aspect-ratio:2.6/1;border-radius:50%;transform:translateX(-50%) rotate(-8deg);border:2px solid rgba(155,92,255,.85);box-shadow:0 0 24px rgba(155,92,255,.6),inset 0 0 24px rgba(155,92,255,.35);pointer-events:none;opacity:.8}
.cta-panel>*:not(.halo){position:relative}
.cta-panel .actions{justify-content:center}
/* Free brand check panel (home): dark glass over the mountain scene, with the goat leaping off its top edge.
   The panel overlaps the goat a little so its back hooves sit hidden behind the glass */
.goat-stage{position:relative}
.goat-leap{position:relative;display:block;width:min(88%,480px);margin:0 auto calc(-1 * clamp(14px,3.2vw,24px));translate:-4% 0;pointer-events:none}
.goat-leap img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(8,5,16,.55))}
.goat-horns{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1148/898}   /* particle horns (goat-horns.js) */
/* the stone photo sits under the goat; 3 s after the horns form it fades away and goat-horns.js draws it in triangles */
.goat-leap .goat-stone{position:absolute;left:0;top:0;transition:opacity 1.2s ease}
.goat-leap img:not(.goat-stone){position:relative}
.goat-leap.is-dust .goat-stone{opacity:0}
@media (prefers-reduced-motion:reduce){.goat-leap .goat-stone{transition:none}.goat-leap .goat-stone{opacity:0}}
.cta-goat{z-index:1;background:linear-gradient(180deg,rgba(13,9,23,.75),rgba(13,9,23,.5) 22%);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
.cta-goat>*:not(.actions){text-shadow:0 2px 14px rgba(8,5,16,.7)}
@media (max-width:760px){.cta-goat .lead span{display:block}} /* phones: one sentence per line */
/* Wide mountain scene from the brand check panel down to the bottom of the footer (home page).
   Height is set by main.js */
.goat-zone{position:relative}
.goat-scene{position:absolute;left:0;right:0;top:0;height:var(--scene-h,100%);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,34,0) 70%,rgba(20,14,34,.35) 100%),url(../img/goat-mountain.webp?v=2) 45% 30%/cover no-repeat;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 18%);mask:linear-gradient(180deg,transparent 0,#000 18%)}
/* The scene sits at the bottom of the page, so main.js only loads it when the visitor scrolls near (keeps the first load fast) */
.js .goat-scene:not(.is-near){background-image:none}
/* Phones: a tall mountain scene made for portrait screens */
@media (max-width:760px){.goat-scene{background:linear-gradient(180deg,rgba(20,14,34,0) 70%,rgba(20,14,34,.35) 100%),url(../img/goat-mountain-phone.webp) 50% 0/cover no-repeat}}
/* Every screen (2026-09-29, owner's red line and reference picture): one sharp low-poly mountain massif lit like a 3D
   render (strong light and shadow on each face, no outlines), in the site's violets: from the very bottom on the left,
   up to peaks behind the panel, back down to the very bottom on the right (assets/img/mountains-massif.svg, 4400 x 1700
   units, made by massif.py in the Claude scratchpad; transparent around the mountains, so no box edges show at any
   zoom). Anchored to the bottom of the scene (the bottom of the footer); the middle 1440 units fill a 1440 px screen and
   never get bigger, so zooming out shows the whole massif with both feet. The drawn cliff was removed.
   Backups: _backups/before-massif/, _backups/before-drawn-mountains/ (photo version) */
.goat-zone{overflow-x:clip}
/* phones: bigger, and shifted so the summit ledge (and the goat) sits centred in the space above the panel */
.goat-scene,.js .goat-scene.is-near{background:url(../img/mountains-massif.svg?v=4) calc(50% - 38.2vw) 100%/auto 406vw no-repeat;-webkit-mask:none;mask:none}
.js .goat-scene:not(.is-near){background-image:none}
/* The goat on the summit (2026-09-29, owner's mockup): a grazing ibex (assets/img/goat-graze.webp, mirrored to face
   right) standing on the ledge at the top of the drawing, with the GOAT BOLD arrows as horns (goat-glow.webp) and drawn grass (svg.goat-grass).
   Placed in the drawing's own units (--u = one unit on this screen), so it stays on the ledge at every size:
   ledge from x 2240 to 2480 at height 330 of 1700; the box is 300 units wide, its bottom 1366 units above the bottom. */
.goat-peak,.goat-tree,.goat-grass{--u:0.2388vw;--shift:-160}
.goat-peak{position:absolute;left:calc(50% + (37.1 + var(--shift)) * var(--u));bottom:calc(1364.4 * var(--u));width:calc(277.3 * var(--u))}   /* violet goat, facing right (2026-09-29): back hoof at the ledge's left edge (2242 units), mouth near its right end */
.goat-peak img{display:block;width:100%;height:auto}
@media (max-width:760px){.goat-peak{transform:translate(calc(-25 * var(--u)),calc(10 * var(--u)))}}   /* phones only (2026-10-01, owner): goat a little back and down */
@media (min-width:761px){.goat-peak,.goat-tree,.goat-grass{--u:min(0.06941vw,1px);--shift:0}}
/* low-poly tree on the slope left of the summit (2026-09-29, T2-XL from _preview-tree.html; tree.py in the scratchpad): placed in the drawing's own units like the goat */
.goat-tree{position:absolute;left:calc(50% + (-478 + var(--shift)) * var(--u));bottom:calc(1115 * var(--u));width:calc(829 * var(--u))}   /* base moved down behind the panel (owner's yellow X) */
.goat-tree>img{display:block;width:100%;height:auto;clip-path:inset(0 0 21.8% 0)}   /* the trunk stops at the ground (the ridge top, 380 units), nothing hangs below it */
/* golden apple: one lit triangle hanging from the long right branch on a thread, swinging gently */
.tree-apple{position:absolute;left:calc(82.4% - 1.903%);top:32.5%;width:3.81%;height:auto;overflow:visible;transform-origin:50% 0;animation:appleSway 3.8s ease-in-out infinite}
@keyframes appleSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.tree-apple{animation:none}}
/* drawn grass on the summit (2026-09-29, owner's red line; G1 low-poly tufts + G4 wild meadow in C5 mountain tones from
   _preview-grass.html; grass_site.py in the scratchpad). A still drawing, no animation (owner) */
.goat-grass{position:absolute;left:calc(50% + (-165 + var(--shift)) * var(--u));bottom:calc(1308 * var(--u));width:calc(521 * var(--u));height:auto;overflow:visible}
.goat-leap{margin-bottom:60px;aspect-ratio:1148/898}   /* no photos inside since 2026-09-29: the box keeps the picture's size for the particle stone */
@media (min-width:761px){
  .goat-scene,.js .goat-scene.is-near{background-size:auto min(118vw,1700px);background-position:50% 100%}
  .goat-leap{margin-bottom:96px}
}
.site-footer.on-scene{background:linear-gradient(180deg,rgba(13,9,23,.15),rgba(13,9,23,.6));border-top-color:rgba(255,255,255,.1)}

/* Links list (related services) */
.link-cards{display:grid;gap:12px}
@media (min-width:700px){.link-cards{grid-template-columns:repeat(2,1fr)}}
.link-card{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;color:var(--ink)}
.link-card h3{font-size:var(--fs-h3)}
.link-card p{color:var(--muted);font-size:var(--fs-body);margin-top:4px}
@media (hover:hover){.link-card:hover .arrow-btn{transform:rotate(45deg);background:var(--cta);color:var(--night)}}

/* Article cards (insights) */
.post{display:grid;gap:12px;align-content:start}
.post .slot{--ar:16/10}
.post time,.post .small{color:var(--muted)}

/* Prose (privacy etc.) */
.prose{max-width:46rem}
.prose h2{font-size:var(--fs-h3);margin:40px 0 12px}
.prose p,.prose ul{margin-bottom:14px}
.prose ul{padding-left:20px}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:8px;min-width:0;border:0;padding:0;margin:0}
.field-row{display:grid;gap:16px}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
label,legend{font-size:.9375rem;font-weight:500;color:var(--ink);padding:0}
.opt{color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;min-height:52px;padding:13px 16px;border-radius:14px;
  font-size:16px; /* 16px stops iPhone zooming the page on focus */
  color:var(--ink);background:rgba(13,9,23,.6);border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:120px;resize:vertical;line-height:1.5}
select{background-image:linear-gradient(45deg,transparent 50%,var(--lavender) 50%),linear-gradient(135deg,var(--lavender) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
input::placeholder,textarea::placeholder{color:#8E82AE}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--halo);box-shadow:0 0 0 3px rgba(155,92,255,.3)}
.check-chips{display:flex;flex-wrap:wrap;gap:8px}
.check-chip{position:relative;cursor:pointer}
.check-chip input{position:absolute;opacity:0;width:1px;height:1px}
.check-chip span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;font-size:.9375rem;font-weight:400;color:var(--mist);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:all .2s}
.check-chip input:checked+span{color:var(--night);background:var(--lavender);border-color:var(--lavender);font-weight:500}
.check-chip input:focus-visible+span{outline:2px solid var(--halo);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:var(--fs-small);color:var(--mist)}
.form-status.is-error{color:var(--error)}
.form-done{display:grid;gap:8px}
.form-done:focus{outline:none}

.contact-list{display:grid;gap:18px;margin-top:28px}
.contact-list dt{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact-list dd{margin:4px 0 0;color:var(--ink);overflow-wrap:anywhere}

/* ---------- Footer ---------- */
.site-footer{margin-top:var(--section);padding:clamp(48px,6vw,80px) 0 calc(28px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(13,9,23,.4),rgba(13,9,23,.92));border-top:1px solid rgba(255,255,255,.07)}
.footer-grid{display:grid;gap:36px}
@media (min-width:800px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand .flogo{width:150px}
.footer-brand p{margin-top:16px;max-width:22rem;font-size:var(--fs-body)}
.footer-col h2{font-size:var(--fs-kicker);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.footer-col a{display:inline-flex;align-items:center;min-height:30px;color:var(--mist);text-decoration:none;font-size:var(--fs-body);overflow-wrap:anywhere}
.footer-col a:hover{color:var(--ink)}
.footer-ico{flex:none;margin-right:10px}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07);font-size:var(--fs-small);color:var(--muted)}
.footer-base a{color:var(--muted);text-decoration:none}
.footer-base a:hover{color:var(--ink)}

/* ---------- Scroll reveal (only runs when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
/* Phones: cards slide in from the right as they scroll into view */
@media (max-width:767px){
  .js .card.reveal{transform:translateX(48px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
  .js .card.reveal.is-in{transform:none}
}
/* Stat numbers rise up while they count */
.js .fact-num[data-count]{opacity:0;transform:translateY(.45em);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .fact-num[data-count].is-counting{opacity:1;transform:none}

/* ---------- Floating WhatsApp button (bottom right, every page) ---------- */
.wa-float{position:fixed;z-index:45;right:calc(20px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;justify-content:center;gap:10px;width:56px;height:56px;border-radius:999px;background:var(--liquid);background-size:200% 100%;animation:liquid 10s linear infinite;color:#fff;text-shadow:0 1px 4px rgba(40,10,90,.55);text-decoration:none;font-weight:600;font-size:.9375rem;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -3px 8px rgba(91,52,190,.28),0 10px 30px -8px rgba(155,92,255,.85);-webkit-tap-highlight-color:transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .25s var(--ease)}
.wa-float::before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 0 rgba(155,92,255,.55);animation:wa-ring 3.2s var(--ease) 2s infinite;pointer-events:none}
.wa-float svg{flex:none;width:28px;height:28px;filter:drop-shadow(0 1px 3px rgba(40,10,90,.55))}
.wa-float-text{display:none}
.wa-float-note{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:.75rem;font-weight:500;letter-spacing:.02em;color:var(--ink);text-shadow:0 1px 8px rgba(13,9,23,.9),0 0 2px rgba(13,9,23,.8);opacity:0;animation:wa-note-in .6s var(--ease) 1.2s forwards;pointer-events:none}
@keyframes wa-note-in{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}
.wa-float:hover{transform:translateY(-2px);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -3px 8px rgba(91,52,190,.28),0 14px 38px -8px rgba(155,92,255,1)}
.wa-float:active{transform:scale(.96)}
.wa-float:focus-visible{outline:2px solid var(--lavender);outline-offset:4px;border-radius:999px}
body.menu-open .wa-float{opacity:0;pointer-events:none}
.site-footer{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
@keyframes liquid{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes wa-ring{0%{box-shadow:0 0 0 0 rgba(155,92,255,.55)}70%,100%{box-shadow:0 0 0 16px rgba(155,92,255,0)}}
@media (min-width:960px){
  .wa-float-note{display:none}
  .wa-float{right:32px;bottom:32px;width:auto;height:56px;padding:0 22px 0 16px}
  .wa-float-text{display:inline}
  .site-footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}
@media print{.wa-float{display:none}}


/* ---------- Stat tiles assemble (2 x 2 layout) ---------- */
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .js .facts.reveal{opacity:1;transform:none;overflow:visible;background:none;border:0;gap:4px;border-radius:0}
  .js .facts .fact{border:1px solid var(--card-edge);border-radius:6px;opacity:0;transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
  .js .facts .fact:nth-child(1){border-top-left-radius:var(--r-card);transform:translate(-70px,-24px) rotate(-8deg)}
  .js .facts .fact:nth-child(2){border-top-right-radius:var(--r-card);transform:translate(70px,-24px) rotate(8deg);transition-delay:.08s}
  .js .facts .fact:nth-child(3){border-bottom-left-radius:var(--r-card);transform:translate(-70px,24px) rotate(8deg);transition-delay:.16s}
  .js .facts .fact:nth-child(4){border-bottom-right-radius:var(--r-card);transform:translate(70px,24px) rotate(-8deg);transition-delay:.24s}
  .js .facts.reveal.is-in .fact{opacity:1;transform:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bg i{animation:none}
  .js .reveal,.js .card.reveal,.js .fact-num[data-count]{opacity:1;transform:none;transition:none}
  .fix[open] .fix-body{animation:none}
  .wa-float::before,.wa-float,.btn-primary,.logo::before{animation:none}
  .wa-float-note{animation:none;opacity:1}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ---------- Utilities ---------- */
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}
.center{text-align:center}
.muted{color:var(--muted)}
.stack{display:grid;gap:16px}

/* "Built for" label, 30% larger */
.hero-foot .small{font-size:var(--fs-lead)}

/* Hero line under the logo: short version on phones */
.eyebrow-short{display:none}
@media (max-width:599px){.eyebrow-full{display:none}.eyebrow-short{display:inline}}

/* ---------- Founder photo with bubble gum (home, slot 04) ----------
   The bubble sits over the mouth in the photo (positions are % of the photo, so it scales).
   assets/js/bubble.js grows it as you scroll, then pops it. */
.bubble-photo{position:relative;margin:0;width:100%;max-width:460px;aspect-ratio:896/1166;border-radius:var(--r-card);overflow:hidden;background:#5f5f66}
@media (max-width:899px){.bubble-photo{margin-inline:auto}}
.bubble-photo img{width:100%;height:100%;object-fit:cover}
.gum{--s:1;position:absolute;left:50.33%;top:17.92%;width:6.8%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.gum-bubble{position:absolute;inset:0;transform:translateY(calc((var(--s) - 1) * 7%)) scale(var(--s));transition:opacity .06s linear}
.gum-skin{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.9) 0 5%,rgba(255,255,255,0) 16%),
    radial-gradient(circle at 70% 76%,rgba(255,255,255,.18) 0 8%,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 42% 38%,#c9a6f2 0%,#9467d2 38%,#6d42a8 72%,#4e2b82 100%);
  box-shadow:inset -3px -4px 8px rgba(35,10,70,.45),0 2px 6px rgba(20,8,40,.35);
  opacity:var(--o,1);animation:gum-wobble 1.6s ease-in-out infinite}
@keyframes gum-wobble{0%,100%{transform:scale(1.02,.98)}50%{transform:scale(.98,1.02)}}
.gum-popped{position:absolute;left:50%;top:56%;width:150%;height:150%;transform:translate(-50%,-50%) scale(.4);opacity:0;overflow:visible}
.gum-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(221,208,255,.9);opacity:0;transform:scale(var(--s))}
.gum-burst{position:absolute;left:50%;top:50%;width:0;height:0}
.gum-burst i{position:absolute;left:-4px;top:-2px;width:8px;height:4px;border-radius:2px;background:#8a5bcc;opacity:0}
.gum.is-popped .gum-bubble{opacity:0}
.gum.is-popped .gum-popped{opacity:1;transform:translate(-50%,-50%) scale(1);transition:transform .28s cubic-bezier(.3,1.6,.5,1),opacity .06s}
.gum.is-popped .gum-ring{animation:gum-ring .38s ease-out forwards}
.gum.is-popped .gum-burst i{animation:gum-shard .6s cubic-bezier(.15,.7,.3,1) forwards}
.gum.is-popped.no-anim .gum-ring,.gum.is-popped.no-anim .gum-burst i{animation:none;opacity:0}
.gum.is-popped.no-anim .gum-popped{transition:none}
@keyframes gum-ring{0%{opacity:.9;transform:scale(var(--s))}100%{opacity:0;transform:scale(calc(var(--s) * 1.5))}}
@keyframes gum-shard{0%{opacity:1;transform:rotate(var(--a)) translateX(var(--r0,20px)) rotate(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--r1,60px)) rotate(160deg)}}
@media (prefers-reduced-motion:reduce){.gum{display:none}}

/* Phones: all text is centred (titles, kicker lines, body text, chips and buttons) */
@media (max-width:760px){
  main{text-align:center}
  main .chips,main .actions{justify-content:center}
  /* ...except the six service tiles, the How it works steps, the FAQ list and the "See the fix" answers, which stay left-aligned */
  main .gb-tile,main .gb-panel,main .gb-how ol,main .faq-list,main .fix-body{text-align:left}
  main h1,main h2,main .h2{text-align:center;margin-inline:auto}
  main .kicker{display:flex;justify-content:center;text-align:center}
  .gb-tap{text-align:center}
}

/* Techna Sans letters are wide: the big headline gets a little looser spacing than the old font had */
.hero .display{letter-spacing:-.01em;line-height:1.05}

/* Titles and big text in Techna Sans; everything else in Outfit */
h1,h2,h3,h4,.h2,.h3,.display,.eyebrow,.kicker,.btn,.gb-price,.gb-head,.gb-lab,.gb-tap,.gb-badge,.gb-flow b,
.fact-num,.fact-label,.reason-num,.fix-label,.fco-pct,.fco-h,.menu-word{font-family:var(--font-display)}
/* Prices in the menus use same-width digits too */
.m-sub{font-variant-numeric:tabular-nums}

/* Founder photo (About section, slot 04) */
.founder-photo{position:relative;margin:0;width:100%;max-width:460px}
.founder-photo::before{content:"";position:absolute;inset:6% 4% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(123,92,255,.42),rgba(123,92,255,.12) 60%,transparent);filter:blur(24px);z-index:0;pointer-events:none}
.founder-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.aura-canvas{position:absolute;pointer-events:none}
.founder-photo img,.founder-photo .aura-canvas,.founder-photo::before{opacity:var(--form,1)}
.aura-back{z-index:0}
.aura-front{z-index:2}
@media (max-width:760px){.founder-photo{margin-inline:auto}}
/* About page chess photo (2026-09-28): a cut-out like the home page photo (no background), fading out at the bottom;
   the aura, the bishop and the chess set are drawn by about-chess.js */

/* About page: closing WhatsApp chat card with tap-to-answer replies */
.wa-chat{border-radius:28px;padding:32px 20px;background:radial-gradient(80% 70% at 100% 0%,rgba(123,92,255,.28),transparent 60%),linear-gradient(170deg,#1f1737,#130d20);border:1px solid rgba(214,196,255,.16);display:grid;gap:26px}
.wa-chat h2{font-size:clamp(2.2rem,7vw,3.4rem);line-height:1;text-align:center}
.wa-chat-box{display:grid;gap:10px;text-align:left}
.wa-chat-who{display:flex;align-items:center;gap:10px}
.wa-chat-av{width:46px;height:46px;border-radius:50%;overflow:hidden;background:#2a2045;border:2px solid #C9A8FF;flex:none}
.wa-chat-av img{display:block;width:100%;height:100%;object-fit:cover}
.wa-chat-nm b{display:block;font-size:1rem;color:#fff}
.wa-chat-nm span{font-size:.8rem;color:var(--muted)}
.wa-chat-bub{position:relative;margin:0;background:#2a2045;color:#fff;border-radius:4px 18px 18px 18px;padding:12px 14px 20px;font-size:1rem;line-height:1.45;max-width:88%;width:fit-content}
.wa-chat-bub time{position:absolute;right:10px;bottom:4px;font-size:.68rem;color:var(--muted)}
.wa-chat-qr{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.wa-chat-qr a{border-radius:16px 16px 4px 16px;padding:9px 12px;background:linear-gradient(135deg,#7B5CFF,#B79BFF);color:#fff;text-decoration:none;font-weight:600;font-size:.84rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.wa-chat-qr a:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(155,92,255,.9)}
.wa-chat-qr a:focus-visible{outline:2px solid #D6C4FF;outline-offset:2px}
.wa-chat-hint{margin:-2px 0 0;font-size:.8rem;color:var(--muted);text-align:right}
.wa-chat-typing{display:none;gap:4px;width:fit-content;background:#2a2045;border-radius:4px 18px 18px 18px;padding:12px 14px}
.wa-chat-typing i{width:7px;height:7px;border-radius:50%;background:#C9A8FF;animation:waDots 1.2s infinite}
.wa-chat-typing i:nth-child(2){animation-delay:.15s}.wa-chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes waPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes waDots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes waHide{to{opacity:0;height:0;padding:0;margin:0}}
.wa-chat.is-in .c1{animation:waPop .5s .2s both}
/* live typing (set up by main.js): dots, then the message is typed letter by letter, then the answers pop in */
.wa-chat.is-live .wa-chat-bub{display:none}
.wa-chat.is-live .wa-chat-bub.is-on{display:block;animation:waPop .3s both}
.wa-chat.is-live .wa-chat-bub time{opacity:0;transition:opacity .3s}
.wa-chat.is-live .wa-chat-bub.is-sent time{opacity:1}
.wa-chat-typing.is-on{display:inline-flex;animation:waPop .3s both}
.wa-chat.is-live:not(.is-done) .wa-chat-qr a,.wa-chat.is-live:not(.is-done) .c3{opacity:0}
@keyframes waBounce{0%{opacity:0;transform:translateY(10px) scale(.6)}60%{opacity:1;transform:translateY(-2px) scale(1.08)}100%{opacity:1;transform:none}}
.wa-chat.is-live.is-done .wa-chat-qr a{animation:waBounce .45s cubic-bezier(.2,.8,.3,1.2) backwards}
.wa-chat.is-live.is-done .wa-chat-qr a:nth-child(2){animation-delay:.18s}
.wa-chat.is-live.is-done .wa-chat-qr a:nth-child(3){animation-delay:.36s}
.wa-chat.is-live.is-done .wa-chat-qr a:nth-child(4){animation-delay:.54s}
.wa-chat.is-live.is-done .c3{animation:waPop .5s .9s both}
@media (min-width:860px){.wa-chat{grid-template-columns:1fr 1.1fr;align-items:center;padding:48px}.wa-chat h2{text-align:left}}
@media (prefers-reduced-motion:reduce){.wa-chat.is-in *{animation:none!important}}

/* Footer (F5): mountain scene + glowing logo, glass contact bar with a sliding bubble, link grid. Phone first, desktop layout below. */
.site-footer{padding-top:0}
.footer-grid,.footer-base{display:none}
.footer-m-scene{position:relative;display:block;margin:0 calc(-1 * var(--gutter,16px));height:320px;background:url(../img/goat-mountain-phone.webp) 50% 82%/cover no-repeat;-webkit-mask:linear-gradient(180deg,transparent 0,#000 38%);mask:linear-gradient(180deg,transparent 0,#000 38%)} /* same misty lower rocks as the home page, fading in from the page above */
.footer-m-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,9,23,.25),rgba(13,9,23,.12) 40%,rgba(13,9,23,.92))}
.on-scene .footer-m-scene{background:none;height:230px}
.on-scene .footer-m-scene::after{display:none}
.footer-m-scene .flogo{position:absolute;left:50%;bottom:18px;z-index:1;width:120px;transform:translateX(-50%);filter:drop-shadow(0 0 22px rgba(155,122,255,.8))}
.footer-m-bar{display:flex;gap:8px;margin-top:6px;padding:8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(214,196,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.footer-m-bar a{flex:1;display:grid;place-items:center;height:46px;border-radius:999px;color:#E6DCFF}
.footer-m-bar a.is-wa{background:linear-gradient(135deg,#7B5CFF,#C9A8FF);color:#fff}
.footer-m-bar{position:relative}
.footer-m-bar a{position:relative;z-index:1;transition:color .3s}
.footer-m-bar.has-pill a.is-wa{background:none;color:#E6DCFF}
.footer-m-bar.has-pill a.is-on{color:#fff}
.footer-m-pill{position:absolute;left:8px;top:8px;bottom:8px;border-radius:999px;background:linear-gradient(135deg,#7B5CFF,#C9A8FF);box-shadow:0 6px 18px -6px rgba(155,92,255,.9);transition:transform .45s cubic-bezier(.3,1.35,.5,1),width .45s}
.footer-m-bar a:focus-visible,.footer-m-links a:focus-visible{outline:2px solid #D6C4FF;outline-offset:2px}
.footer-m-links{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 10px;margin-top:20px;text-align:center}
.footer-m-links a{color:var(--mist);text-decoration:none;font-size:.9rem;line-height:2.4}
.footer-m-base{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:var(--fs-small);color:var(--muted)}
.footer-m-base p{margin:0}
@media (min-width:800px){
.site-footer{padding-top:clamp(40px,5vw,72px)}
.footer-m{display:grid;grid-template-columns:1fr minmax(320px,400px);column-gap:56px;align-items:center}
.footer-m-scene{grid-column:1/-1;margin:0;height:340px;border-radius:28px;overflow:hidden;background-image:url(../img/goat-mountain.webp?v=2);background-position:center 38%;border:1px solid rgba(214,196,255,.12);-webkit-mask:none;mask:none}
.on-scene .footer-m-scene{height:260px;border:0}
.footer-m-scene .flogo{width:150px;bottom:28px}
.footer-m-links{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:0 clamp(14px,1.8vw,26px);margin-top:30px;text-align:left}
.footer-m-links a{font-size:.95rem;white-space:nowrap}
.footer-m-links a:hover{color:var(--ink)}
.footer-m-bar{grid-column:2;grid-row:2;margin-top:30px;padding:6px 8px}
.footer-m-bar a{height:42px}
.footer-m-bar a svg{width:20px;height:20px}
.footer-m-pill{top:6px;bottom:6px}
.footer-m-base{grid-column:1/-1;margin-top:30px}
}
@media (prefers-reduced-motion:reduce){.footer-m-pill{transition:none}}
@media (max-width:799px){.site-footer{border-top:0;background:linear-gradient(180deg,rgba(13,9,23,0),rgba(13,9,23,.6) 45%,rgba(13,9,23,.95))}.site-footer.on-scene{background:linear-gradient(180deg,rgba(13,9,23,0),rgba(13,9,23,.6))}} /* phones: no hard line where the footer starts */

/* About page principles: promise on top, benefit in a purple bar, a floating logo-particle triangle */
.principle.p-bar{padding:0;overflow:hidden;display:grid;grid-template-rows:1fr auto;text-align:left}
.p-bar .p-top{padding:clamp(22px,3vw,30px) clamp(20px,2.6vw,26px);display:grid;gap:8px;align-content:start}
.p-bar h3{margin:0}
.p-bar .p-top p{margin:0}
.p-tri{width:34px;height:36px;overflow:visible;animation:pTri 4.2s ease-in-out infinite}
.p-tri polygon{fill:#F1ECFF;filter:drop-shadow(0 0 8px rgba(214,196,255,.75))}
.p-bar:nth-child(2) .p-tri{animation-delay:-1s}.p-bar:nth-child(3) .p-tri{animation-delay:-2.1s}.p-bar:nth-child(4) .p-tri{animation-delay:-3.2s}
.p-bar:nth-child(2n) .p-tri polygon{fill:#D6C4FF}
@keyframes pTri{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(2px,-4px) rotate(16deg)}}
.p-gain{margin:0;padding:14px clamp(20px,2.6vw,26px);background:linear-gradient(135deg,rgba(123,92,255,.92),rgba(201,168,255,.88));color:#fff;font-weight:600;font-size:.95rem;line-height:1.35}
@media (prefers-reduced-motion:reduce){.p-tri{animation:none}}

/* Home "Why your clients choose someone else?" cards: same style as the About page principles
   (floating logo-particle triangle on top, "See the fix" in the purple bar at the bottom) */
.reason.card.r-bar{padding:0;gap:0;overflow:hidden;grid-template-rows:1fr auto;text-align:left}
.r-bar .r-top{display:grid;gap:11px;align-content:start;padding:clamp(20px,2.9vw,30px) clamp(20px,2.6vw,28px)}
.r-bar .r-top h3+p{margin-top:-2.4px}
.r-mark{display:flex;align-items:center;gap:12px}
.r-bar:nth-child(2) .p-tri{animation-delay:-1.3s}.r-bar:nth-child(3) .p-tri{animation-delay:-2.6s}
.r-bar:nth-child(2) .p-tri polygon{fill:#D6C4FF}
.reason.r-bar .fix{margin:0;border-top:0;padding:0 clamp(20px,2.6vw,28px);background:linear-gradient(135deg,rgba(123,92,255,.92),rgba(201,168,255,.88))}
.reason.r-bar .fix-label{min-height:48px;padding:0;color:#fff}
.reason.r-bar .fix-label::after{border-color:#fff}
.reason.r-bar .fix-label:hover{color:#fff;opacity:.85}
.reason.r-bar .fix-body{color:#fff;padding-bottom:14px}
.reason.r-bar .fix-body a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.reason.card.r-bar{padding:0;gap:0}.r-bar .r-top{padding:18px 20px 16px;gap:9px}.reason.r-bar .fix-label{min-height:46px;padding:0}}

/* Home: "at a glance" facts as a slow moving ticker (one line) */
.ticker{overflow:hidden;border-block:1px solid rgba(214,196,255,.16);padding:16px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:tick 26s linear infinite}
.ticker-track li{display:inline-flex;align-items:center;gap:10px;padding-right:36px;white-space:nowrap;font-family:var(--font-display);font-size:clamp(1rem,1.6vw,1.25rem);color:#E6DCFF}
.ticker-track b{color:var(--lavender);font-size:1.45em;font-weight:500;font-variant-numeric:tabular-nums}
.ticker-track li::after{content:"";width:0;height:0;margin-left:26px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid #C9A8FF;transform:rotate(-16deg);filter:drop-shadow(0 0 5px #C9A8FF)} /* small triangle, turned slightly left (was a round dot) */
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.ticker-track li[aria-hidden]{display:none}}

/* Home: reason cards as tabs 01 · 02 · 03, one card at a time */
.r-switch{display:flex;gap:6px;padding:4px;margin:0 0 18px;width:fit-content;border-radius:999px;border:1px solid rgba(214,196,255,.2);background:rgba(255,255,255,.04)}
.r-switch button{appearance:none;border:0;background:none;color:var(--muted);font-family:var(--font-display);font-size:1rem;min-height:44px;padding:10px 22px;border-radius:999px;cursor:pointer;transition:background-color .2s,color .2s}
.r-switch button[aria-selected="true"]{background:linear-gradient(135deg,#7B5CFF,#C9A8FF);color:#fff;box-shadow:0 8px 22px -12px #7B5CFF}
.r-switch button:focus-visible{outline:2px solid #D6C4FF;outline-offset:2px}
.reasons.r-tabs{display:block;max-width:620px}
.reasons.r-tabs .reason[hidden]{display:none}
.reasons.r-tabs .reason.is-swap{animation:rSwap .35s var(--ease)}
@keyframes rSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:760px){.r-switch{margin-inline:auto}.reasons.r-tabs{margin-inline:auto}}

/* Desktop: less empty space above and below the facts ticker (about half) */
@media (min-width:800px){.hero{padding-bottom:88px}section[aria-labelledby="glance-title"]{padding-block:0}#why{padding-top:88px}}

/* Desktop: the 01 · 02 · 03 tabs stand upright on the left side of the card */
@media (min-width:800px){.r-tabs-wrap{display:flex;align-items:flex-end;gap:14px;max-width:720px}.r-tabs-wrap .r-switch{flex-direction:column;margin:0 0 -4px;padding:4px;gap:6px;background:var(--card);border-color:var(--card-edge)}.r-tabs-wrap .r-switch button{width:60px;height:48px;min-height:48px;padding:0}.r-tabs-wrap .r-switch button:not([aria-selected="true"]):hover{background:rgba(214,196,255,.08);color:#fff}.r-tabs-wrap .reasons.r-tabs{flex:1;max-width:none}}
/* Phone: the 01 02 03 switch is hidden (still there for screen readers); tapping the section changes the card */
.r-hint{display:none}
@media (max-width:760px){
  .r-tabs-wrap .r-switch{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
  .r-hint{display:block;margin:0 auto 14px;text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.8}
  #why{cursor:pointer;-webkit-tap-highlight-color:transparent}
}
/* About page: the bishop in the hand flies down and builds itself again next to "Your turn.", then gets knocked over (about-chess.js) */
.pawn-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.wa-chat{position:relative}
.pawn-spot{position:absolute;top:22px;right:7%;width:38px;aspect-ratio:89/200;pointer-events:none}
@media (min-width:800px){.pawn-spot{top:50%;right:auto;left:25%;width:54px;transform:translateY(-45%)}}
/* Footer logo: the goat mark flows in the same liquid colours as the header logo; the words stay as they are */
.flogo{position:relative;display:inline-block;line-height:0}
.flogo img{display:block;width:100%;height:auto}
.flogo-mark{position:absolute;left:18.8%;top:.8%;width:63.7%;aspect-ratio:76/96;pointer-events:none;background:#DDD0FF;
  -webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){.flogo-mark{background:var(--liquid);background-size:200% 100%;animation:liquid 10s linear infinite}}
/* Contact form (K1): left-aligned, floating labels with icons, "What do you need?" as icon cards */
.cf-card{background:linear-gradient(170deg,rgba(123,92,255,.16),rgba(27,20,48,.9) 40%);border-color:rgba(214,196,255,.14)}
.cf{gap:12px;text-align:left}
.cf .field-row{gap:12px}
.cf-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.cf-title{margin:0;font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:#fff;line-height:1.2}
.cf-status{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
.cf-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:cfPulse 2.4s ease-out infinite}
@keyframes cfPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.cf-fl{position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:58px;padding:0 14px;border-radius:16px;background:rgba(10,7,20,.55);border:1px solid rgba(214,196,255,.14);color:var(--muted);transition:border-color .2s,box-shadow .2s}
.cf-fl:focus-within{border-color:#B79BFF;box-shadow:0 0 0 3px rgba(123,92,255,.25)}
.cf-fl svg,.cf-need svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cf .cf-fl input,.cf .cf-fl select{flex:1;min-width:0;min-height:0;height:56px;margin:0;padding:22px 0 8px;border:0;border-radius:0;background:none;box-shadow:none;outline:0;color:#fff;font-size:1rem;-webkit-appearance:none;appearance:none}
.cf-fl label{position:absolute;left:44px;top:50%;transform:translateY(-50%);font-size:.95rem;font-weight:400;color:var(--muted);pointer-events:none;transition:top .2s,font-size .2s,color .2s}
.cf-fl input:focus+label,.cf-fl input:not(:placeholder-shown)+label,.cf-select label{top:15px;font-size:.72rem;color:#D6C4FF}
.cf-fl .opt,.cf-area .opt{font-size:.85em;opacity:.7}
.cf-select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid #D6C4FF;border-bottom:2px solid #D6C4FF;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cf-select select{padding-right:22px;cursor:pointer}
.cf-select select option{color:#140E22}
.cf-needs{margin:4px 0 0;padding:0;border:0;min-width:0}
.cf-needs legend,.cf-area label{margin:0 2px 8px;font-size:.85rem;font-weight:500;color:var(--muted)}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px}
.cf-need{position:relative;display:flex;cursor:pointer}
.cf-need input{position:absolute;opacity:0;width:1px;height:1px}
.cf-need span{flex:1;display:flex;flex-direction:column;gap:6px;min-height:76px;padding:12px;border-radius:16px;background:rgba(10,7,20,.55);border:1px solid rgba(214,196,255,.14);font-size:.88rem;color:#fff;line-height:1.25;transition:background-color .2s,border-color .2s}
.cf-need span svg{width:22px;height:22px;color:#C9A8FF}
.cf-need input:checked+span{background:rgba(123,92,255,.22);border-color:#B79BFF}
.cf-need input:focus-visible+span{outline:2px solid #D6C4FF;outline-offset:2px}
.cf-area{display:grid}
.cf-area label{display:block}
.cf textarea{min-height:104px;border-radius:16px;background:rgba(10,7,20,.55);border:1px solid rgba(214,196,255,.14)}
.cf textarea:focus{border-color:#B79BFF;box-shadow:0 0 0 3px rgba(123,92,255,.25)}
.cf-send{margin-top:4px}
.cf .small{text-align:center}
@media (min-width:640px){.cf-grid{grid-template-columns:repeat(4,1fr)}}
@media (prefers-reduced-motion:reduce){.cf-dot{animation:none}}
/* contact page status follows the same hours as the menu card: yellow dot, Idle */
[data-live].is-idle .cf-dot{background:#facc15;animation:none}
/* Contact page, phones only (M3): left-aligned hero, contact card with photo and "Active now", steps as a timeline.
   Desktop keeps the original list and steps. */
.ct-card,.ct-tl{display:none}
@media all{
  .ct-col,.ct-col>.kicker,.ct-col>h1,.ct-col>h2,.ct-col>.lead{text-align:left;margin-left:0;margin-right:0}
  .ct-col>.kicker{justify-content:flex-start}
  .ct-col>.actions{display:none}
  .ct-col .actions{justify-content:flex-start}
  .ct-col .contact-list,.ct-col .ticks{display:none}
  .ct-card{display:grid;gap:14px;margin:6px 0 22px;padding:18px;border-radius:22px;background:rgba(10,7,20,.45);border:1px solid rgba(214,196,255,.14)}
  .ct-who{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(214,196,255,.14)}
  .ct-av{position:relative;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid #B79BFF;background:#2a1f48}
  .ct-av img{display:block;width:100%;height:100%;object-fit:cover}
  .ct-who b{display:block;font-size:1.05rem;color:#fff}
  .ct-live{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--muted)}
  .ct-live .cf-dot{width:8px;height:8px}
  .ct-ln{display:flex;align-items:center;gap:12px;margin:0;color:#fff;text-decoration:none;font-size:.98rem;min-height:28px}
  .ct-ln svg{flex:none;width:20px;height:20px;fill:none;stroke:#C9A8FF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ct-tl{display:grid;list-style:none;margin:14px 0 0;padding:0}
  .ct-tl li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:12px;padding-bottom:18px}
  .ct-tl li:last-child{padding-bottom:0}
  .ct-tl li:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:linear-gradient(#7B5CFF,rgba(123,92,255,.15))}
  .ct-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7B5CFF,#B79BFF);color:#fff;font-weight:700}
  .ct-tl p{margin:6px 0 0;color:var(--muted);font-size:.93rem;line-height:1.4}
  .ct-tl p b{display:block;margin-bottom:2px;color:#fff;font-size:1rem}
}
/* V1 Graphite glass: the 01 02 03 switch and the "See the fix" bar step back in soft grey glass,
   so the purple buttons stay the main thing to press */
.reason.r-bar .fix{background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.08)}
.r-switch button{color:rgba(255,255,255,.4)}
.r-switch button[aria-selected="true"]{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
/* Contact page: brand check strip, centred, one WhatsApp button */
.bc-strip{text-align:center;justify-items:center}
.bc-strip .kicker{justify-content:center}
.bc-strip .actions{justify-content:center}

/* ===== P2 top-lit gradient: one light-weight background for the glass pieces (chips, cards, FAQ rows,
   offer bar, 01 02 03 switch, footer bar, contact card and form, glass buttons). No blur, so it stays fast
   even on 4K screens. Only the background changes; shapes stay as they are. ===== */
:root{
  /* W2 frosted base: a thin lilac-grey base under the white gradient keeps the same brightness over light and dark parts of the page */
  --p2-bg:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),rgba(72,60,104,.38);
  --p2-edge:rgba(255,255,255,.16);
  --p2-shine:inset 0 1px 0 rgba(255,255,255,.2);
}
.card,.faq-item,.chip,.footer-m-bar,.r-switch,.r-tabs-wrap .r-switch,.ct-card,.cf-card,.cf-need span{
  background:var(--p2-bg);border-color:var(--p2-edge);box-shadow:var(--p2-shine);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.btn-glass{background:var(--p2-bg);border-color:var(--p2-edge);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn-glass:hover{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07)),rgba(82,68,118,.42)}
.cf-need input:checked+span{background:rgba(123,92,255,.22);border-color:#B79BFF}

/* ===== Phones, home page: one motion language (M1). Every piece flies in from its own side at a slight
   angle and settles, like the services tiles. Big wrappers stay still and their pieces move, long lists
   reveal item by item as they scroll in. Only moves and fades, plays once, off for reduced motion. ===== */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .js .home .section-head.reveal,.js .home .stack.reveal{opacity:1;transform:none}
  .js .home :is(.section-head.reveal,.section-head[data-reveal]) :is(.kicker,h2,.lead),.js .home .stack.reveal>*{opacity:0;transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  /* section titles: kicker and title from the left, intro line from the right */
  .js .home :is(.section-head.reveal,.section-head[data-reveal]) .kicker{transform:translate(-50px,0) rotate(-3deg)}
  .js .home :is(.section-head.reveal,.section-head[data-reveal]) h2{transform:translate(-70px,0) rotate(-2deg);transition-delay:.08s}
  .js .home :is(.section-head.reveal,.section-head[data-reveal]) .lead{transform:translate(70px,0) rotate(2deg);transition-delay:.16s}
  .js .home :is(.section-head.reveal.is-in,.section-head[data-reveal].is-in) :is(.kicker,h2,.lead){opacity:1;transform:none}
  /* stats ticker slides in from the right, the way it scrolls */
  .js .home .ticker.reveal{transform:translate(80px,0);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  .js .home .ticker.reveal.is-in{transform:none}
  /* offer bar from the left; Start your project rises like the Extras tile */
  .js .home .gb-offer.reveal{transform:translate(-70px,0) rotate(-3deg);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  .js .home .gb-cta.reveal{transform:translate(0,40px) rotate(2deg);transition:opacity .9s var(--ease),transform 1.2s var(--ease)} /* rises like the Extras tile */
  .js .home :is(.gb-offer,.gb-cta).reveal.is-in{transform:none}
  /* about: text from the right (the photo has no slide-in since 2026-09-28; it only forms from the particles) */
  .js .home .stack.reveal>*{transform:translate(60px,0) rotate(2deg)}
  .js .home .stack.reveal>:nth-child(2){transition-delay:.08s}
  .js .home .stack.reveal>:nth-child(3){transition-delay:.16s}
  .js .home .stack.reveal>:nth-child(4){transition-delay:.24s}
  .js .home .stack.reveal>:nth-child(5){transition-delay:.32s}
  .js .home .stack.reveal.is-in>*{opacity:1;transform:none}
}

/* ===== Desktop and tablet, home page: the same motion language as phones (M1), calmer. Each column comes
   from its own side and they meet in the middle, like the D3 service tiles. Shorter moves (about 40px) and
   smaller tilts, because the same move looks bigger on a large or 4K screen. Only moves and fades. ===== */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .js .home .section-head.reveal,.js .home .stack.reveal{opacity:1;transform:none}
  .js .home :is(.section-head.reveal,.section-head[data-reveal]) :is(.kicker,h2,.lead),.js .home .stack.reveal>*{opacity:0;transition:opacity .8s var(--ease),transform 1s var(--ease)}
  /* section titles: title from the left, intro from the right */
  .js .home :is(.section-head.reveal,.section-head[data-reveal]) .kicker{transform:translate(-40px,0) rotate(-1.5deg)}
  .js .home :is(.section-head.reveal,.section-head[data-reveal]) h2{transform:translate(-40px,0) rotate(-1deg);transition-delay:.08s}
  .js .home :is(.section-head.reveal,.section-head[data-reveal]) .lead{transform:translate(40px,0) rotate(1deg);transition-delay:.16s}
  .js .home :is(.section-head.reveal.is-in,.section-head[data-reveal].is-in) :is(.kicker,h2,.lead){opacity:1;transform:none}
  /* stats ticker from the right, the way it scrolls */
  .js .home .ticker.reveal{transform:translate(60px,0);transition:opacity .8s var(--ease),transform 1s var(--ease)}
  .js .home .ticker.reveal.is-in{transform:none}
  /* offer bar from the left; Start your project rises like the Extras tile */
  .js .home .gb-offer.reveal{transform:translate(-40px,0) rotate(-1.5deg);transition:opacity .8s var(--ease),transform 1s var(--ease)}
  .js .home .gb-cta.reveal{transform:translate(0,45px) rotate(2deg) scale(.94);transition:opacity .7s cubic-bezier(.2,.7,.2,1) .48s,transform .9s cubic-bezier(.34,1.3,.64,1) .48s} /* like the Extras tile (D3), right after it */
  .js .home :is(.gb-offer,.gb-cta).reveal.is-in{transform:none}
  /* about: text from the right (the photo has no slide-in since 2026-09-28; it only forms from the particles) */
  .js .home .stack.reveal>*{transform:translate(40px,0) rotate(1deg)}
  .js .home .stack.reveal>:nth-child(2){transition-delay:.08s}
  .js .home .stack.reveal>:nth-child(3){transition-delay:.16s}
  .js .home .stack.reveal>:nth-child(4){transition-delay:.24s}
  .js .home .stack.reveal>:nth-child(5){transition-delay:.32s}
  .js .home .stack.reveal.is-in>*{opacity:1;transform:none}
}

/* ---------- Founding client offer: edge trigger + popup (every page, built by main.js).
   Hangs under the header on the right edge. Desktop: half hidden (20% + spots), slides out on hover or focus.
   Touch screens: always fully out. Open spot = filled lavender triangle, taken = outline. No blur (4K lag). ---------- */
:root{--fco-panel:#1f1633;--fco-panel-2:#2a1d45;--fco-line:rgba(196,176,255,.16);--fco-text:#f4f0ff;--fco-muted:#b9acd8;--fco-lav:#c9b6ff;--fco-pink:#f7b3cf}
.fco-trigger{position:absolute;top:calc(100% + 8px);right:0;z-index:1;display:flex;align-items:center;gap:12px;padding:10px max(18px,env(safe-area-inset-right)) 10px 16px;
  border:1px solid rgba(201,182,255,.35);border-right:0;border-radius:999px 0 0 999px;background:rgba(42,29,69,.96);
  color:var(--fco-text);font:inherit;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent;
  transform:translateX(calc(100% - var(--fco-peek,170px)));transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.fco-trigger:hover,.fco-trigger:focus-visible,.fco-trigger.is-open{transform:translateX(0)}
@media (hover:none){.fco-trigger{transform:none}}
.fco-pct{font-weight:800;font-size:18px;line-height:1;letter-spacing:-.02em;color:var(--fco-pink)}
.fco-mini{display:flex;gap:3px}
.fco-mini svg{display:block;width:11px;height:11px}
.fco-lbl{font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap;color:var(--fco-muted)}
.fco-popup{position:absolute;top:calc(100% + var(--offer-h) + 10px);right:max(24px,env(safe-area-inset-right));z-index:2;width:360px;max-width:calc(100vw - 32px);padding:26px 22px 22px;
  background:linear-gradient(160deg,var(--fco-panel-2),var(--fco-panel) 60%);border:1px solid var(--fco-line);border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);color:var(--fco-text);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
.fco-popup.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.fco-h{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:0 0 8px;padding-right:34px;color:var(--fco-text)}
.fco-popup p.fco-txt{color:var(--fco-muted);font-size:15px;line-height:1.45;margin:0 0 18px}
.fco-row{display:flex;gap:7px;margin-bottom:10px}
.fco-row svg{display:block;width:30px;height:30px;filter:drop-shadow(0 0 10px rgba(201,182,255,.45))}
.fco-count{margin:0 0 20px;font-size:14px;color:var(--fco-muted)}
.fco-count b{color:var(--fco-pink);font-weight:600}
.fco-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--fco-muted);font-size:18px;line-height:1;cursor:pointer}
.fco-close:hover{background:rgba(255,255,255,.12);color:var(--fco-text)}
.fco-trigger:focus-visible,.fco-close:focus-visible,.fco-popup .btn:focus-visible{outline:2px solid var(--fco-lav);outline-offset:3px}
.site-header.menu-is-open .fco-trigger{opacity:0;pointer-events:none}
.site-header.menu-is-open .fco-popup{display:none}
/* phones: shorter label */
.fco-short{display:none}
@media (max-width:760px){.fco-long{display:none}.fco-short{display:inline}}
/* desktop: when the trigger slides out, its left edge lines up with the popup's left edge (popup 360px + 24px from the edge) */
@media (hover:hover) and (min-width:761px){.fco-trigger{min-width:384px;justify-content:space-between}.fco-lbl{margin-left:auto}}
@media (max-width:480px){
  .fco-trigger{gap:8px;padding:7px max(12px,env(safe-area-inset-right)) 7px 12px}
  .fco-pct{font-size:15px}
  .fco-mini{gap:2px}.fco-mini svg{width:9px;height:9px}
  .fco-lbl{font-size:12px}
  .fco-popup{left:16px;right:16px;width:auto;max-width:440px;margin-inline:auto}
  .fco-h{font-size:25px}
}
/* touch screens: the trigger is always fully out, so the page starts just below it instead of under it */
@media (hover:none),(max-width:760px){.has-offer main{padding-top:var(--offer-h)}}
@media (prefers-reduced-motion:reduce){.fco-trigger,.fco-popup{transition:none}}
@media print{.fco-trigger,.fco-popup{display:none}}

/* Offer popup: spots line in the lilac-to-coral gradient (heading stays white) of "Save up to €550" */
.fco-count{width:fit-content}
.fco-count,.fco-count b{color:#ffb894}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fco-count{background:linear-gradient(90deg,#ffa77e,#eddfff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .fco-count b{color:inherit;-webkit-text-fill-color:inherit}
}
.fco-row svg{filter:drop-shadow(0 0 10px rgba(255,180,140,.35))}

/* ---------- Desktop services: no founding offer bar under the board; Start your project takes its place,
   as wide as the Extras bar ---------- */
@media (min-width:761px){
  .gb-pricing .gb-offer{display:none}
  .gb-cta .btn{flex:1 1 100%}
  .gb-pricing .gb-board{margin-bottom:0}
  .gb-pricing .gb-offer + .gb-cta,.gb-pricing .gb-cta{margin-top:6px} /* same 6px gap as between the service tiles */
}

/* ---------- Phones: founding offer tab 7% bigger (everything inside it), 20% in peach, triangles from peach to
   near white (the "Save up to €550" gradient reversed), label in white ---------- */
/* every screen: 20% in peach, triangles from peach (left) to near white (right) */
.fco-mini-d{display:none}.fco-pct{color:#ffa77e}
@media (max-width:760px){
  .fco-trigger{gap:12.84px;padding:10.7px max(19.26px,env(safe-area-inset-right)) 10.7px 17.12px}
  .fco-pct{font-size:19.26px;color:#ffa77e}
  .fco-mini{gap:3.21px}.fco-mini svg{width:11.77px;height:11.77px}
  .fco-lbl{font-size:14.98px;color:#fff}
}
@media (max-width:480px){
  .fco-trigger{gap:8.56px;padding:7.49px max(12.84px,env(safe-area-inset-right)) 7.49px 12.84px}
  .fco-pct{font-size:16.05px}
  .fco-mini{gap:2.14px}.fco-mini svg{width:9.63px;height:9.63px}
  .fco-lbl{font-size:12.84px}
}
/* Tab order (every screen): 20%, label, triangles. The 20% and label are peach, the open spots run from peach
   to near white and the taken spots are white outlines on the right */
.fco-trigger .fco-lbl{color:#ffa77e;text-transform:uppercase;letter-spacing:.04em}
/* "20%" reads as part of the label: same font, size, weight and spacing */
.fco-trigger .fco-pct{font-family:inherit;font-weight:500;font-size:14px;line-height:1.2;letter-spacing:.04em;color:#ffa77e;margin-right:-6px}
@media (max-width:760px){.fco-trigger .fco-pct{font-size:14.98px}}
@media (max-width:480px){.fco-trigger .fco-pct{font-size:12.84px;margin-right:-4px}}
/* Tab entry (every screen): it waits off the right edge and slides in 5 seconds after the page opens (main.js adds .is-in).
   Desktop shows the whole tab with all 9 triangles; phones show only "20% FOUNDING OFFER" (triangles stay in the popup) */
.fco-trigger,.fco-trigger:hover,.fco-trigger:focus-visible,.fco-trigger.is-open{transform:none}
html .fco-trigger:not(.is-in){transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none}
.fco-trigger.is-in{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s}
@media (max-width:760px){.fco-trigger .fco-mini{display:none}}
/* Phones: "20% FOUNDING OFFER" runs as one gradient from white (20%) to peach (OFFER) */
@media all{
  .fco-trigger .fco-pct,.fco-trigger .fco-lbl{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .fco-trigger .fco-pct{background-image:linear-gradient(90deg,#fff,#ffece3)}
  .fco-trigger .fco-lbl{background-image:linear-gradient(90deg,#ffe6db,#ffa77e)}
}
@media (prefers-reduced-motion:reduce){.fco-trigger.is-in{transition:none}}
/* Popup: same order and gradient (open spots peach to near white, taken spots white on the right); the count line runs peach to near white;
   heading white in capitals */
.fco-popup .fco-row svg[viewBox]:has(path[fill=none]){filter:none}
.fco-count{background-image:linear-gradient(90deg,#ffa77e,#eddfff)}
@media (hover:hover) and (min-width:761px){.fco-trigger .fco-lbl{margin-left:0}.fco-trigger .fco-mini{margin-left:auto}}
.fco-popup .fco-h{text-transform:uppercase;font-size:24px;letter-spacing:-.01em;color:#fff}
@media (max-width:480px){.fco-popup .fco-h{font-size:22px}}

/* ---------- Popup text and hero accent (2026-09-28) ---------- */
/* Phones: "Same work, same standards, lower price." sits together on its own row */
@media (max-width:760px){.fco-popup .fco-nb{display:block;white-space:nowrap}}
/* Count line: one size, one weight (bold), one gradient from "7" to the end of "November" */
.fco-popup .fco-count,.fco-popup .fco-count b{font-weight:600}
/* Hero: "Does your brand?" slightly smaller, in the moving liquid gradient of Start your project */
.hero-liquid{display:block;font-size:.88em;background:var(--liquid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:liquid 10s linear infinite}
@media (prefers-reduced-motion:reduce){.hero-liquid{animation:none}}
@media (max-width:374px){.fco-popup p.fco-txt{font-size:14px}}
/* ---------- No backdrop blur anywhere (it lagged on 4K and can leave parts of the page undrawn while scrolling).
   The header, menus, goat panel, footer bar and carousel arrows get solid tints instead. ---------- */
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.glass:not(.menu-toggle){background:rgba(30,21,52,.94)}
.site-header.is-scrolled .header-bar{background:linear-gradient(180deg,rgba(20,14,34,.78),rgba(20,14,34,.6))}   /* see-through again while scrolling (owner 2026-10-03), no blur */
.site-header.menu-is-open .header-bar{background:rgba(20,14,34,.94)}
.cta-goat{background:linear-gradient(180deg,rgba(13,9,23,.84),rgba(13,9,23,.62) 22%)}
/* ---------- No sideways scroll: the founding offer tab waits off the right edge before it slides in. Clip it inside
   the header so it never makes the page wider than the screen (a wider page made phones scroll sideways and
   size the background and particles wrongly) ---------- */
.site-header{overflow-x:clip}
html{overflow-x:clip}
.mobile-menu.glass{background:linear-gradient(180deg,#261b40,#1e1534)}
/* ---------- Founding offer: the last open spot (next to the empty ones) flickers to empty for a split second, twice,
   like a failing bulb (T6). main.js marks it, so it moves along when a spot expires every 2 days ---------- */
@keyframes fco-flicker{0%,62%,70%,78%,100%{opacity:1}66%,74%{opacity:0}}
.fco-last path{animation:fco-flicker 3s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.fco-last path{animation:none}}
/* ---------- Home hero "Built for" (2026-09-28), replaces the six pill chips that looked like buttons.
   Phones (B3): "Built for" + one audience at a time, changing every 2 seconds (main.js); the line shifts so the
   words always sit centred together. Desktop (B2): small capitals split by tiny lavender triangles.
   All six audiences stay in the page text, plus a full sentence for screen readers and Google ---------- */
.bf{margin:0}
.bf-list{list-style:none;margin:0;padding:0}
@media (max-width:760px){
  .bf{display:inline-flex;justify-self:center;align-items:baseline;gap:.32em;font-family:var(--font-display);font-size:1.25rem;color:#b9acd8;
    transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .bf-list{display:inline-grid;text-align:left;color:#fff}
  .bf-list li{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
  .bf-list li.is-on{opacity:1;transform:none}
}
@media (min-width:761px){
  .bf-lab{display:block;font-family:var(--font-display);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#8f84ad;margin:0 0 8px}
  /* tablets and small laptops: two even rows (no word left alone on a line); wide screens: one row */
  .bf-list{display:block;text-wrap:balance;line-height:1.9;font-family:var(--font-display);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#E6DCFF}
  .bf-list li{display:inline;white-space:nowrap}
  .bf-list li.bf-phone{display:none}
  /* separators: small lavender triangles, turned slightly to the left like the brand mark */
  .bf-list li+li::before{content:"";display:inline-block;vertical-align:.1em;width:0;height:0;margin:0 10px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid #C9A8FF;opacity:.8;transform:rotate(16deg)}
}
@media (min-width:1200px){
  .bf-list{white-space:nowrap;font-size:.7rem;letter-spacing:.06em}
  .bf-list li+li::before{margin:0 7px}
}
@media (prefers-reduced-motion:reduce){.bf,.bf-list li{transition:none}}
/* ---------- Phones: a faint fingerprint in the top right corner of the 01/02/03 cards, so people see the card is
   there to tap (icon: Ionicons fingerprint, MIT licence). It breathes softly; off for reduced motion ---------- */
@media (max-width:760px){
  .reasons .reason.r-bar::after{content:"";position:absolute;top:16px;right:18px;width:39px;height:39px;pointer-events:none;
    background:#C9A8FF;-webkit-mask:url(../img/tap-fingerprint.svg) center/contain no-repeat;mask:url(../img/tap-fingerprint.svg) center/contain no-repeat;
    opacity:.28;animation:tap-breathe 2.8s ease-in-out infinite}
  @keyframes tap-breathe{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.5;transform:scale(1.06)}}
}
@media (prefers-reduced-motion:reduce){.reasons .reason.r-bar::after{animation:none}}
/* ---------- Home Recent work: W1 glass panel behind the whole section (2026-09-28, from _preview-work-panel.html;
   G2 gold frame tried first). A separate box drawn behind the content (nothing moves), in exactly the glass of the
   01/02/03 cards: P2 gradient, thin light edge, light line along the top. Fixed gradients only, no blur ---------- */
#work>.wrap{position:relative;isolation:isolate}
#work>.wrap::before{content:"";position:absolute;inset:-34px -40px;z-index:-1;border-radius:32px;pointer-events:none;
  background:var(--p2-bg);border:1px solid var(--p2-edge);box-shadow:var(--p2-shine)}
@media (max-width:760px){#work>.wrap::before{inset:-22px var(--gutter);border-radius:22px}}   /* same side margins as the other boxes (owner 2026-10-03) */
/* ---------- Home Recent work: DNA helix carousel (2026-09-28, H1 from _preview-dna.html; replaced the grainy
   carousel, backup _backups/before-dna/). Pictures on two opposite strands drift right to left; dna-carousel.js only
   changes transform and opacity. No on-screen arrows (removed 2026-09-28); the left and right keys work when it is focused ---------- */
.dna{position:relative;height:clamp(360px,34vw,440px);overflow:hidden;perspective:900px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.dna:active{cursor:grabbing}
.dna-card{position:absolute;left:50%;top:50%;margin:0;border-radius:12px;overflow:hidden;background:#1b1330;box-shadow:none}
.dna-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.dna:focus-visible{outline:2px solid #D6C4FF;outline-offset:4px;border-radius:12px}
@media (max-width:760px){.dna{margin-inline:calc(50% - 50vw);height:380px}}
/* FAQ intro: "Ask me directly." always stays together on one row */
[aria-labelledby="faq-title"] .lead a{white-space:nowrap}

/* ---------- Phone and tablet menu: T4 "chat drawer" (2026-09-28, from _preview-menu-5.html; replaced N2 bottom sheet,
   backup in _backups/before-chat-menu/). A panel slides in from the right over the header with the page dimmed
   behind (tap the dimmed page or the X to close). Big links, the page you are on glows with a dot, a soft lavender
   light on the panel edge and a faint GOAT mark behind. At the bottom a small chat: Serj's card, a typing dots moment,
   "Hi, what can I help you with?", then three ready questions that open WhatsApp with the message written.
   Only transform and opacity animate. Desktop (960px and up) keeps its normal menu ---------- */
.mobile-menu .m-grab,.mobile-menu .m-top,.mobile-menu .m-chat{display:none}
@media (max-width:959px){
  .site-header.menu-is-open::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(10,6,20,.66)}
  .site-header .logo,.site-header .scroll-progress{transition:opacity .3s}
  .site-header.menu-is-open .header-bar{background:none;border-bottom-color:transparent;box-shadow:none}
  .site-header.menu-is-open .logo{opacity:.32}
  .site-header.menu-is-open .scroll-progress{opacity:0}
  /* X2: the menu button sits above the drawer and its two lines turn into the X in the same spot */
  .site-header.menu-is-open .menu-toggle{position:relative;z-index:3}
  .mobile-menu{position:fixed;z-index:2;top:0;right:0;bottom:0;left:auto;width:min(84vw,380px);max-height:none;border-radius:26px 0 0 26px;border-right:0;
    padding:env(safe-area-inset-top) 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;isolation:isolate;
    box-shadow:inset 2px 0 0 rgba(201,168,255,.55),-18px 0 40px -18px rgba(123,92,255,.55)}
  .mobile-menu:not([hidden]){animation:drawerIn .42s cubic-bezier(.2,.8,.2,1)}
  @keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
  /* the GOAT mark as a plain white watermark (no animation): big, turned 12 degrees left, bleeding off the left edge
     (placed from the owner's picture, 2026-09-28) */
  .mobile-menu{overflow-x:hidden}
  .mobile-menu .m-wm{position:absolute;z-index:-1;left:25%;top:54%;width:100%;aspect-ratio:76/96;transform:translate(-50%,-50%) rotate(-12.4deg);
    background:#fff;opacity:.07;pointer-events:none;
    -webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat}
  .mobile-menu .m-grab,.mobile-menu hr{display:none}
  .mobile-menu .m-top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);margin-bottom:4px}
  .mobile-menu .m-lbl{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#9d8fc4}
  .mobile-menu .m-links>a:not(.btn),.mobile-menu .m-group{min-height:0;padding:6px 2px;border-radius:0;background:none;
    font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
  .mobile-menu .m-links>a:not(.btn):hover,.mobile-menu .m-group:hover,.mobile-menu .m-group[aria-expanded=true]{background:none}
  .mobile-menu .m-links>a[aria-current=page],.mobile-menu .m-links>a[aria-current=page]:hover{background:linear-gradient(90deg,#C9A8FF,#F3E9FF) 0 0/calc(100% - 20px) 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
  /* V5: Services swaps the big links for the price list in the same place ("Back to menu" returns); the chat stays */
  .mobile-menu .m-group .m-chev,.mobile-menu .m-group[aria-expanded=true] .m-chev{transform:rotate(-45deg)}
  .mobile-menu .m-services{margin:0;padding:0;border-left:0}
  .mobile-menu .m-back{-webkit-appearance:none;appearance:none;position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:46px;margin-bottom:6px;
    padding:0 2px 4px;border:0;background:none;color:#fff;font:inherit;font-size:1.1rem;font-weight:600;cursor:pointer}
  /* a thicker lavender line fading out to the right keeps Back apart from the services */
  .mobile-menu .m-back::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#C9A8FF,rgba(201,168,255,.08))}
  .mobile-menu .m-back svg{flex:none;width:12px;height:12px;color:var(--mist)}   /* same colour as the Services arrow */
  .mobile-menu .m-services a:not(.btn){min-height:0;padding:10px 2px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.07);font-size:1rem;font-weight:600;color:#C9A8FF}
  .mobile-menu .m-services a:not(.btn):hover{background:none}
  .mobile-menu .m-services a>span{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%}
  .mobile-menu .m-services .m-sub{margin:0;color:#fff;font-size:.85rem;font-weight:500;white-space:nowrap}
  .mobile-menu .m-services .gb-plus{color:inherit}
  .mobile-menu .m-services:not([hidden]){animation:mSwapIn .32s cubic-bezier(.2,.8,.2,1)}
  .mobile-menu .m-links.m-in{animation:mSwapBack .32s cubic-bezier(.2,.8,.2,1)}
  @keyframes mSwapIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
  @keyframes mSwapBack{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
  /* the chat */
  .mobile-menu .m-chat{display:flex;flex-direction:column;gap:7px;margin-top:auto;padding-top:18px}
  .mobile-menu .m-who{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:20px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(72,60,104,.3);border:1px solid rgba(255,255,255,.14)}
  .mobile-menu .m-av{position:relative;flex:none;width:50px;height:50px;border-radius:50%;overflow:hidden;background:#2a1f48}
  .mobile-menu .m-av img{display:block;width:100%;height:100%}
  .mobile-menu .m-nm{min-width:0}
  .mobile-menu .m-nm b{display:block;width:fit-content;white-space:nowrap;font-family:var(--font-display);font-size:1.08rem;
    background:linear-gradient(90deg,#C9A8FF,#F3E9FF 60%,#C9A8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
  .mobile-menu .m-live{display:flex;align-items:center;gap:7px;font-size:.86rem;color:#4ade80;white-space:nowrap}
  .mobile-menu .m-live i{flex:none;width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}
  .mobile-menu .m-live em{font-style:normal;font-size:.8rem;color:#b9acd8}
  .mobile-menu .m-live{flex-wrap:wrap;column-gap:6px}   /* safety for very narrow phones: the reply time drops under the status */
  @media (max-width:370px){.mobile-menu .m-who{gap:10px;padding:12px}.mobile-menu .m-av{width:46px;height:46px}}
  /* outside Serj's hours (Dublin time, main.js CONFIG) the dot turns yellow and the status reads Idle */
  .mobile-menu .m-live.is-idle{color:#facc15}
  .mobile-menu .m-live.is-idle i{background:#facc15;box-shadow:0 0 8px #facc15}
  .mobile-menu .m-say{display:grid;margin-top:3px}
  .mobile-menu .m-say>*{grid-area:1/1;justify-self:start;align-self:start}
  .mobile-menu .m-hi{transform-origin:0 100%}
  .mobile-menu .m-hi,.mobile-menu .m-typing{margin:0;padding:10px 14px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.86rem;line-height:1.4;color:#F3E9FF}
  .mobile-menu .m-typing{display:flex;gap:4px;align-items:center;height:40px;opacity:0}
  .mobile-menu .m-typing i{width:6px;height:6px;border-radius:50%;background:#C9A8FF}
  .mobile-menu a.m-q:not(.btn){align-self:flex-end;min-height:0;padding:10px 14px;border-radius:16px 16px 4px 16px;font-size:.86rem;font-weight:500;color:#F3E9FF;
    background:linear-gradient(135deg,rgba(123,92,255,.35),rgba(201,168,255,.22));border:1px solid rgba(201,168,255,.3);transform-origin:100% 100%}
  .mobile-menu .m-note{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:1px 2px 0;font-size:.74rem;color:#9d8fc4}
  .mobile-menu .m-note svg{color:#C9A8FF;flex:none}
  .mobile-menu .m-seen{display:inline-flex;vertical-align:-1px;margin-left:8px;color:#C9A8FF}
  /* chat effect each time the menu opens: typing dots, then the hi, then the three questions one by one
     (bubbles pop in .56s, .38s apart; the WhatsApp note under them does not animate) */
  .mobile-menu:not([hidden]) .m-typing{animation:mTyping 1.05s .3s both}
  .mobile-menu:not([hidden]) .m-typing i{animation:mDot .5s ease-in-out .3s 2 alternate}
  .mobile-menu:not([hidden]) .m-typing i:nth-child(2){animation-delay:.42s}
  .mobile-menu:not([hidden]) .m-typing i:nth-child(3){animation-delay:.54s}
  .mobile-menu:not([hidden]) .m-hi{animation:mPop .56s cubic-bezier(.2,.9,.3,1.2) 1.05s both}
  .mobile-menu:not([hidden]) .m-q{animation:mPop .56s cubic-bezier(.2,.9,.3,1.2) both}
  .mobile-menu:not([hidden]) .m-q:nth-of-type(1){animation-delay:1.6s}
  .mobile-menu:not([hidden]) .m-q:nth-of-type(2){animation-delay:1.98s}
  .mobile-menu:not([hidden]) .m-q:nth-of-type(3){animation-delay:2.36s}
  @keyframes mTyping{0%{opacity:0;transform:translateY(6px)}20%,80%{opacity:1;transform:none}100%{opacity:0;transform:none}}
  @keyframes mDot{from{transform:translateY(2px);opacity:.5}to{transform:translateY(-3px);opacity:1}}
  @keyframes mPop{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .mobile-menu:not([hidden]),.mobile-menu:not([hidden]) .m-hi,.mobile-menu:not([hidden]) .m-q,.mobile-menu .m-services:not([hidden]),.mobile-menu .m-links.m-in{animation:none}
  .mobile-menu .m-typing{display:none}
}

/* ===== Home FAQ entrance (2026-09-28, F3 "corners" from _preview-faq-entry.html): each card builds itself the first
   time it scrolls into view, one card after another (0.2 s apart, queue in main.js). Four 9px lavender triangles fly to
   the card's corners and turn to point along the edge (0.8 s), then fade; the card's glass grows in from 96% and fades
   in from 0.4 s, the question from 0.55 s. Opacity and transform only: the glass sits in ::after. .fq is added by
   main.js, so without script the cards are simply shown. Earlier versions: _backups/before-faq-particles/ (line draw),
   _backups/before-faq-f3/ (particle gather). ===== */
.faq-list{position:relative;overflow-x:clip}
.faq-item.fq{position:relative;isolation:isolate;overflow:visible;background:transparent;border-color:transparent;box-shadow:none}
.faq-item.fq::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--p2-bg);
  border:1px solid var(--p2-edge);box-shadow:var(--p2-shine);opacity:0;transform:scale(.96);
  transition:opacity .4s .4s,transform .55s .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.faq-item.fq summary{opacity:0;transition:opacity .4s .55s}
.faq-item.fq.is-in::after{opacity:1;transform:none}
.faq-item.fq.is-in summary{opacity:1}
.faq-parts{position:absolute;z-index:1;pointer-events:none}
.faq-parts i{position:absolute;left:var(--l);top:var(--t);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--lavender);
  clip-path:polygon(0 0,100% 50%,0 100%);opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r));
  animation:faqCorner .8s cubic-bezier(.2,.8,.2,1) var(--d) forwards}
@keyframes faqCorner{
  0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}
  30%{opacity:1}
  65%{opacity:1;transform:rotate(var(--end))}
  100%{opacity:0;transform:rotate(var(--end)) scale(.3)}
}
@media (prefers-reduced-motion:reduce){
  .faq-item.fq::after,.faq-item.fq summary{opacity:1;transform:none;transition:none}
  .faq-parts{display:none}
}

/* Work page Slot 12: before / after logo slider, A3 "labels on the handle" (2026-10-01) */
.ba{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;background:#fff;--p:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-after{clip-path:inset(0 0 0 var(--p))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#1E1432}
.ba-knob{position:absolute;top:50%;left:var(--p);transform:translate(-50%,-50%);display:flex;border-radius:999px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.ba-knob span{padding:8px 12px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;line-height:1}
.ba-knob span:first-child{background:#1E1432;color:#fff}.ba-knob span:last-child{background:#C9A8FF;color:#1E1432}
.ba:focus-visible{outline:2px solid #C9A8FF;outline-offset:3px}
.case-img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;border-radius:18px;background:#fff}   /* Work page slots 13-15, Mirabell photos (2026-10-01) */
/* Work page, phones only: Challenge / What I did / Result as P1 "timeline" (from _preview-case-blocks.html, 2026-10-01) */
@media (max-width:760px){
  .case-steps{position:relative;display:grid;grid-template-columns:1fr;gap:22px;padding-left:34px;counter-reset:cs;text-align:left}
  .case-steps::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(#C9A8FF 0%,#C9A8FF 55%,#C9A96A 85%,#F6EBCB 100%)}
  .case-steps>*{position:relative;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0;text-align:left;gap:4px}
  .case-steps>*::after{display:none}
  .case-steps>*::before{counter-increment:cs;content:counter(cs);position:absolute;left:-34px;top:-2px;width:24px;height:24px;border-radius:50%;background:#1E1432;border:2px solid #C9A8FF;color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;box-sizing:border-box}
  .case-steps>.result::before{border-color:#C9A96A;background:linear-gradient(#1E1432,#1E1432) padding-box,linear-gradient(135deg,#B8975A,#F6EBCB,#C9A96A) border-box;border-color:transparent;color:#F6EBCB}
  .case-steps h3,.case-steps .fix-label{margin:0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#C9A8FF;line-height:1.6}
  .case-steps .fix-label{color:#C9A96A;background:linear-gradient(90deg,#B8975A,#F6EBCB 55%,#C9A96A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:max-content;display:block;min-height:0;padding:0;font-family:inherit;cursor:default}
  .case-steps .fix-label::after{display:none}
  .case-steps .result p:last-child{color:#fff;font-weight:500}
  .case-steps .ticks{gap:4px;margin-top:2px}
  .case-steps .ticks li{padding-left:18px;text-align:left}
  .case-steps .ticks li::before{width:6px;height:6px;top:.6em;left:2px;background:currentColor;border:0}
}
.case-img.case-img-wide{aspect-ratio:16/9}   /* Work page: Mirabell website mockup, first photo under the Result */

/* Work page: Mirabell photos as G3 "card deck" (from _preview-gallery.html, 2026-10-01): fanned pile, changes by itself every 3.5 s, tap for the next one */
.deck{position:relative;aspect-ratio:16/10;margin:6px 10px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.35);transition:transform .9s cubic-bezier(.25,1,.35,1),opacity .9s ease}
.deck img.out{opacity:0;transform:translate(-14%,4%) rotate(-7deg) scale(.96)!important}
@media (min-width:761px){.deck{max-width:900px;margin:10px auto 24px}}
/* Work page: Mirabell Academy photo Q3 "shatter in" (from _preview-academy-particles.html, 2026-10-02) */
.shatter{position:relative}
.shatter canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.js .shatter.wait img{opacity:0}
.shatter img{transition:opacity .4s}
/* Work page closing panel C1 "gold corner" (from _preview-work-cta.html, 2026-10-02) */
.cta-panel .cta-tris{position:absolute;right:clamp(12px,5vw,64px);top:clamp(12px,3vw,34px);width:clamp(110px,18vw,150px);pointer-events:none}
.cta-gold{background:linear-gradient(90deg,#B8975A,#F6EBCB 55%,#C9A96A);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cta-line{display:block;width:64px;height:2px;margin:14px auto 16px;background:linear-gradient(90deg,transparent,#C9A96A,transparent)}
.cta-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin:16px 0 0;font-size:.82rem;color:var(--muted,#b6aacb)}
.cta-trust span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;transform:rotate(45deg);background:#C9A96A;vertical-align:middle}
/* Work page: the card deck's top photo shatters in from the top right the first time it is seen (2026-10-03) */
.deck .deck-shatter{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}
.deck.wait img{opacity:0}
/* Work page closing panel: the gold corner triangles levitate softly, each on its own rhythm (2026-10-03) */
.cta-tris path{transform-box:fill-box;transform-origin:center;animation:cta-float 5s ease-in-out infinite}
.cta-tris path:nth-child(2){animation-duration:6.2s;animation-delay:-1.4s}
.cta-tris path:nth-child(3){animation-duration:5.6s;animation-delay:-2.8s}
.cta-tris path:nth-child(4){animation-duration:7s;animation-delay:-.7s}
.cta-tris path:nth-child(5){animation-duration:6.6s;animation-delay:-3.6s}
@keyframes cta-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.cta-tris path{animation:none}}
/* Work page closing panel: "in one place." drawn as gold triangle particles, W3b from _preview-particle-words.html (2026-10-03).
   The real text stays in place (for Google and screen readers) and turns see-through once the canvas is drawn. */
.cta-panel .cta-gold{position:relative;display:table;margin:2px auto 0}   /* plain gold text since 2026-10-02 (particle version removed, owner) */
.cta-gold.gp-on{-webkit-text-fill-color:transparent;background:none;color:transparent}
.cta-gold canvas{position:absolute;left:-24px;top:-14px;width:calc(100% + 48px);height:calc(100% + 28px);pointer-events:none}
/* Work page photo entrance E2 "sweep" (2026-10-03): the particle canvas reaches 30px beyond the photo so the wave can arrive from outside */
.shatter canvas,.deck .deck-shatter{inset:auto;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px)}
.deck img,.shatter img{transition:opacity .6s ease,transform .9s cubic-bezier(.25,1,.35,1)}

/* Work page Mirabell chips (2026-10-02): phones show Print and Social together on the second row */
.chip-br{display:none}
@media (max-width:760px){.chip-br{display:block;flex-basis:100%;height:0;margin:-4px 0}}
/* Work page closing heading (2026-10-02, owner): the comma after "needs" is a small white triangle particle; gold line removed; phones: title closer to the text */
.cta-comma{display:inline-block;width:.24em;height:.24em;margin-left:.05em;vertical-align:-.02em}
.cta-comma svg{display:block;width:100%;height:100%;fill:#fff;transform:rotate(-8deg)}
@media (max-width:760px){.cta-panel #cta-title{margin-bottom:-10px}}
/* Work page client site links (2026-10-02, L2 from _preview-links.html): one more tag with a dashed outline */
.chip.chip-link{background:transparent;border:1px dashed rgba(201,168,255,.55);padding:0}
.chip-link a{display:inline-flex;align-items:center;padding:inherit;padding:6px 14px;color:#C9A8FF;text-decoration:none;border-radius:inherit}
.chip-link a:hover,.chip-link a:focus-visible{color:#fff}
.chip-tri{display:inline-block;width:.5em;height:.5em;margin-left:.4em}.chip-tri svg{display:block;width:100%;height:100%;fill:currentColor}
.case-link{display:flex;justify-content:center;margin:14px 0 0}.case-link .chip{display:inline-flex}
@media (max-width:760px){.case-link .chip{display:flex;width:100%}.case-link .chip-link a{width:100%;justify-content:center;padding:12px 14px}}   /* phones: as wide as the Academy photo */
/* Work page phone timeline: V2 liquid glass tube (2026-10-02, _preview-liquid-steps.html). As you scroll from 1 to 3 the
   tube fills purple to gold (main.js sets --p), starting at the top of number 1; the liquid falls into each number from above as it passes; scrolling up drains it */
.cs-track,.cs-dot{display:none}
@media (max-width:760px){
  .case-steps[data-liquid-steps]::before{display:none}
  .case-steps[data-liquid-steps]>*::before{display:none}
  .cs-track{display:block;position:absolute;left:8px;top:-2px;height:var(--th,100%);width:7px;border-radius:9px;background:rgba(201,168,255,.16);overflow:hidden}
  .cs-fill{position:absolute;inset:0;border-radius:inherit;overflow:hidden;transform:translateY(calc((var(--p,0) - 1) * 100%))}
  .cs-fill>i{position:absolute;inset:0;transform:translateY(calc((1 - var(--p,0)) * 100%));background:linear-gradient(#7B5CFF,#C9A8FF 40%,#C9A96A 80%,#F6EBCB)}
  .cs-wave{position:absolute;left:0;bottom:-5px;width:200%;height:10px;animation:cs-slosh 1.6s linear infinite}
  .cs-wave svg{display:block;width:100%;height:100%;fill:#1E1432;opacity:.55}
  @keyframes cs-slosh{to{transform:translateX(-50%)}}
  .cs-dot{display:grid;place-items:center;position:absolute;left:-34px;top:-2px;width:24px;height:24px;border-radius:50%;border:2px solid rgba(201,168,255,.35);background:#1E1432;overflow:hidden;box-sizing:border-box;font-size:.7rem;font-weight:700;color:#9b8cc0;transition:border-color .4s,color .4s}
  .cs-dot b{position:relative;z-index:1}
  .cs-liq{position:absolute;inset:0;transform:translateY(-101%);transition:transform .45s cubic-bezier(.5,0,.7,1);background:linear-gradient(#9b7bff,#7B5CFF)}
  .cs-dot.g .cs-liq{background:linear-gradient(#F6EBCB,#C9A96A)}
  .cs-dot.on{border-color:#C9A8FF;color:#fff}.cs-dot.g.on{border-color:#C9A96A;color:#1E1432}
  .cs-dot.on .cs-liq{transform:translateY(0)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.cs-wave{animation:none}.cs-liq,.cs-dot{transition:none}}
/* phones: each step's text fades in once the liquid has filled its number (only when the script runs) */
@media (max-width:760px){
  .case-steps.cs-ready>:not(.cs-track)>:not(.cs-dot){opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
  .case-steps.cs-ready>.cs-lit>:not(.cs-dot){opacity:1;transform:none}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.case-steps.cs-ready>:not(.cs-track)>:not(.cs-dot){opacity:1;transform:none;transition:none}}
/* Work page trust line follows the live status (2026-10-02): green "47 minutes" in active hours, yellow "12 hours" outside them */
.cta-trust .cta-live{color:#4ade80}.cta-trust .cta-live::before{background:#4ade80}
.cta-trust .cta-live.is-idle{color:#facc15}.cta-trust .cta-live.is-idle::before{background:#facc15}
/* phone menu: small plain Instagram icon in the top right corner of the Serj Popa card, same style as the WhatsApp icon in "Tap one to send it on WhatsApp" (owner, 2026-10-02); it does not move the status line */
.mobile-menu .m-who{position:relative}
.mobile-menu .m-who a.m-ig{position:absolute;top:9px;right:11px;display:grid;place-items:center;width:28px;height:28px;min-height:0;padding:0;margin:0;color:#C9A8FF;font-size:0;background:none;border:0;-webkit-tap-highlight-color:transparent}
.mobile-menu .m-who a.m-ig svg{display:block;width:15px;height:15px;flex:none}
/* Work page: other clients, trial layouts C2 / C3 / C4 (2026-10-02, owner keeps one) + I3 Instagram mini feed */
.oc-title{text-align:center;margin:0 0 6px}
.oc-try{margin:26px 0 10px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#ffa77e;text-align:center}
.oc-rows{display:grid;gap:12px;max-width:760px;margin:0 auto}
.oc-row{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:12px;border-radius:18px;background:var(--p2-bg,rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12)}
.oc-row img{width:110px;height:110px;object-fit:cover;border-radius:12px}
.oc-row h3,.oc-card h3,.oc-tile h3{margin:2px 0 8px;font-size:1.1rem}
.oc-row .small,.oc-card .small,.oc-tile .small{margin:0}
.oc-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.oc-strip::-webkit-scrollbar{display:none}
.oc-card{flex:0 0 min(78%,340px);scroll-snap-align:start;display:grid;gap:6px}
.oc-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px}
.oc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:760px;margin:0 auto}
.oc-tile{text-align:center;padding:18px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12)}
.oc-logo{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 10px;border-radius:50%;font-weight:800;color:#1E1432;background:linear-gradient(135deg,#C9A8FF,#F3E9FF)}
.oc-feed{display:block;max-width:560px;margin:34px auto 0;text-decoration:none;color:#fff}
.oc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:16px;overflow:hidden}
.oc-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.oc-more{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:.9rem;color:#b9acd8}
.oc-more b{color:#C9A8FF;font-weight:600}
.oc-ig{width:18px;height:18px;flex:none}
/* About page: Instagram profile chip under the intro (A3) */
.ig-chip{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;font-size:.9rem;width:fit-content}
.ig-chip img{width:30px;height:30px;border-radius:50%}
.ig-chip:hover{border-color:rgba(201,168,255,.5)}
/* Work page Instagram profile card (I6, 2026-10-02) under the other clients */
.ig-prof{display:flex;align-items:center;gap:12px;max-width:520px;margin:30px auto 0;padding:14px;border-radius:18px;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(72,60,104,.3);border:1px solid rgba(255,255,255,.14)}
.ig-prof img{width:48px;height:48px;border-radius:50%;flex:none}
.ig-prof b{display:block}.ig-prof small{color:#b9acd8;font-size:.8rem}
.ig-follow{margin-left:auto;flex:none;padding:9px 18px;border-radius:999px;font-weight:700;font-size:.88rem;color:#1E1432;text-decoration:none;background:linear-gradient(90deg,#C9A8FF,#F3E9FF)}
/* Home (2026-10-02): small link to the Work page clients strip under See the full project */
.more-clients-link{margin:12px 0 0}.more-clients-link a{color:#C9A8FF;text-decoration:none;font-weight:600;font-size:.92rem;border-bottom:1px solid rgba(201,168,255,.4);padding-bottom:1px}.more-clients-link a:hover{color:#fff}
/* Home About: B1 matching pair (2026-10-02, _preview-about-ig.html): More about me + Instagram as two pills of the same width, 10px apart */
.about-pair{display:grid;gap:10px;width:100%;max-width:420px;margin-top:8px}
.about-pair .btn{width:100%}
.ig-prof.ig-pill{margin:0;max-width:none;border-radius:999px;padding:10px 12px}
@media (max-width:760px){.about-pair{margin-left:auto;margin-right:auto}}
/* desktop: B3, the button and an Instagram pill side by side (phones keep B1) */
.ig-pill-d{display:none}
@media (min-width:761px){.about-pair{display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:none}.about-pair .btn{width:auto}.about-pair .ig-pill{display:none}
.ig-pill-d{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;color:#fff;text-decoration:none;font-weight:600;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(72,60,104,.3);border:1px solid rgba(255,255,255,.18)}
.ig-pill-d img{width:38px;height:38px;border-radius:50%}.ig-pill-d svg{width:16px;height:16px}.ig-pill-d:hover{border-color:rgba(201,168,255,.5)}}
/* Work page phones: half the gap between the Mirabell Aesthetics photos and Mirabell Academy (2026-10-02) */
@media (max-width:760px){#mirabell-academy{padding-top:0;margin-top:-7px}}
/* Work page More clients: the first photo builds from the left with the site's particles, then the strip slides on by
   itself every 3.5 s (main.js, data-oc-strip) */
.oc-shot{position:relative;display:block}
.oc-shot img{display:block;transition:opacity .6s ease}
.oc-shot canvas{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);pointer-events:none}
.js .oc-strip.wait img{opacity:0}
/* More clients text: T4 name left, tags right (owner, 2026-10-02) */
.oc-t4 .oc-card{text-align:left}.oc-line{display:flex;align-items:center;justify-content:space-between;gap:10px}.oc-line h3{margin:0}.oc-line .chips{flex-wrap:nowrap;justify-content:flex-end}
/* Work page K4 "one brand, two chapters" (2026-10-02, _preview-case-layout.html): a shared Mirabell title, then
   Chapter 1 (clinic) and Chapter 2 (academy) on one lilac-to-gold line. Phones: name and tags above the photos, left aligned */
.fam{text-align:center;display:grid;gap:4px;margin:0 0 clamp(24px,5vw,44px)}
.fam-kick,.chn{margin:0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#C9A8FF;font-weight:600}
.fam-nm{margin:0;font-family:var(--font-display);font-size:clamp(2.2rem,7vw,3.4rem);font-weight:800;line-height:1.05;background:linear-gradient(90deg,#B8975A,#F6EBCB 55%,#C9A96A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fam .small{margin:0}
.k4-dot{display:none}
@media (max-width:760px){
  .k4-ch{position:relative;padding-left:28px}
  .k4-ch::before{content:"";position:absolute;left:8px;top:10px;bottom:-60px;width:3px;border-radius:3px;background:linear-gradient(#7B5CFF,#C9A8FF 55%,#C9A96A)}
  .k4-last::before{display:none}
  .k4-dot{display:block;position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:#1E1432;border:2px solid #C9A8FF;box-sizing:border-box;z-index:1}
  .k4-last .k4-dot{border-color:#C9A96A}
  .k4-ch .case,.k4-ch.case{display:flex;flex-direction:column;gap:16px}
  .k4-ch .case-meta{order:-1;text-align:left;justify-items:start}
  .k4-ch .case-meta>*{text-align:left;margin-left:0}
  .k4-ch .case-meta .chips{justify-content:flex-start}
  .k4-ch .case-link{justify-content:flex-start}
}
/* K4 clinic chapter on phones (owner, 2026-10-02): chapter label, place, then the before/after slider, then the tags */
@media (max-width:760px){#mirabell-aesthetics .k4-ch .case-meta{display:contents}#mirabell-aesthetics .chn{order:-3}#mirabell-aesthetics .case-meta>.small{order:-2;margin-top:-8px}#mirabell-aesthetics .ba{order:-1}#mirabell-aesthetics .case-meta>.chips{order:0;justify-content:flex-start}}
/* phones only: extra grass to the right of the goat's mouth (g.ph-only), apple moved onto the owner's green mark */
.goat-grass .ph-only{display:none}
@media (max-width:760px){.goat-grass .ph-only{display:inline}.tree-apple{left:calc(82.4% - 1.903% + 2.7%);top:31%}}
/* Work page (2026-10-02): the remaining tags sit under each photo slide (clinic: under the 3-photo deck; academy: under its photo) */
.chips-after{justify-content:center;margin-top:14px}
@media (max-width:760px){.k4-ch .chips-after{justify-content:flex-start}.k4-ch .deck{margin-top:28px}.k4-ch .deck+.chips-after{margin-top:-8px}}

/* Work page ending F2 (2026-10-02): quiet tags, Instagram row without a box between thin gold lines, gold-edged closing panel */
.oc-t4 .oc-line .chip::after{display:none}
.oc-t4 .oc-line .chip{background:none;border:0;box-shadow:none;padding:0;color:#C9A8FF;font-size:.85rem}
.oc-t4 .oc-line .chip+.chip::before{content:"·";margin:0 6px 0 2px;color:#8f82ad}
.oc-t4 .oc-line .chips{gap:0}
.ig-prof.ig-line{position:relative;background:none;border:0;border-radius:0;padding:24px 0;margin-top:22px}
.ig-prof.ig-line::before,.ig-prof.ig-line::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,106,.7),transparent)}
.ig-prof.ig-line::before{top:0}.ig-prof.ig-line::after{bottom:0}
.ig-prof.ig-line .ig-follow{background:none;color:#F6EBCB;padding:0;font-weight:600;box-shadow:none;border:0}
.cta-panel.cta-f2{border:1px solid rgba(201,169,106,.45);background:linear-gradient(180deg,rgba(201,169,106,.08),transparent)}
.cta-trust span:not(.cta-live)::before{background:linear-gradient(135deg,#B8975A,#F6EBCB 55%,#C9A96A)}
#more-clients{padding-bottom:0}
/* FO4 follow + BT1 gold buttons (Work page ending) */
.ig-prof.ig-line .ig-follow{display:inline-flex;align-items:center;gap:7px;color:#bba9e6;font-size:.86rem;font-weight:400;text-decoration:none}
.ig-prof.ig-line .ig-follow .igs{width:17px;height:17px;flex:none}
.ig-prof.ig-line .ig-follow .u{padding-bottom:3px;background:linear-gradient(90deg,#B8975A,#F6EBCB,#C9A96A) 0 100%/100% 1px no-repeat}
.cta-f2 .actions .btn::before,.cta-f2 .actions .btn::after{display:none}
.cta-f2 .actions .btn-primary{color:#1E1432;background:linear-gradient(90deg,#B8975A,#F6EBCB 50%,#C9A96A);border:0;box-shadow:0 8px 26px rgba(201,169,106,.28)}
.cta-f2 .actions .btn-glass{color:#F6EBCB;background:rgba(255,255,255,.04);border:1px solid rgba(201,169,106,.6);box-shadow:none}
/* Phones (2026-10-02, Samsung flashing): the drifting background lights are big layers redrawn all the time and
   used up the phone's graphics memory, so parts of the page flashed. On phones they stay still. */
@media (max-width:760px){.bg i{animation:none!important;will-change:auto}}
/* Phone menu (2026-10-02): Instagram icon right after "Serj Popa", on the same row, centred with the name */
.mobile-menu .m-nm b{display:inline-flex;align-items:center;gap:6px}
.mobile-menu .m-who a.m-ig{position:static;width:22px;height:22px}
/* Home Instagram pill: same Follow as the Work page (icon + small lilac word), purple underline instead of gold */
.ig-prof.ig-pill .ig-follow{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:0 6px 0 0;color:#bba9e6;font-size:.86rem;font-weight:400;text-decoration:none;background:none;border:0;box-shadow:none}
.ig-prof.ig-pill .ig-follow .igs{width:17px;height:17px;flex:none}
.ig-prof.ig-pill .ig-follow .u{padding-bottom:3px;background:linear-gradient(90deg,#7B5CFF,#C9A8FF) 0 100%/100% 1px no-repeat}
/* FAQ "Ask me directly.": same colour and size as the rest of the line, thin lilac underline */
[aria-labelledby="faq-title"] .lead a{font-size:1em;font-weight:inherit;color:inherit;text-decoration:underline;text-decoration-color:rgba(201,168,255,.6);text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:760px){#about .kicker.hide-phone{display:none}}
/* Home Recent work, PHONES ONLY, R1 (2026-10-03, from _preview-work-block.html): one block: short title
   "From first sketch to launch", the carousel (unchanged), a client card (MB tile, name, place, site link),
   "What I built" chips, the gold button, a thin gold line, then How it works. Desktop unchanged. */
.w-ph,.w-mono,.w-built,.w-gl{display:none}
@media all{
  #work .section-head{text-align:center}
  #work-title .w-ph{display:inline}
  #work-title .w-gold{background:linear-gradient(90deg,#B8975A,#F6EBCB 55%,#C9A96A);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  #work .case-mirabell{text-align:left}
  #work .case-id{display:grid;grid-template-columns:48px 1fr;gap:0 12px;align-items:center;text-align:left}
  #work .w-mono{display:grid;grid-row:span 3;width:54px;height:54px;border-radius:14px;place-items:center;background:#fff;border:1px solid rgba(201,169,106,.45)}
  #work .w-mono img{display:block;width:40px;height:auto}
  #work .case-id h3{font-size:1.15rem;margin:0;text-align:left!important;justify-self:start}
  #work .case-id>*{text-align:left!important;justify-self:start}
  #work .case-id .small{margin:0;font-size:.8rem}
  #work .case-id a::after{content:" ↗"}
  #work .w-built{display:block;margin-top:14px}
  #work .w-built p{margin:0 0 8px;color:#b9acd8;font-size:.86rem}
  #work .w-built .chips{justify-content:flex-start}
  #work .case-mirabell .actions .btn{width:100%}
  #work .w-gl{display:block;height:1px;margin:24px 0 22px;background:linear-gradient(90deg,transparent,rgba(201,169,106,.7),transparent)}
}
/* Contact page, PHONES, K2 (2026-10-03, from _preview-contact-card.html): Let's talk + line, the contact card as
   the main piece (for everyone: projects, partnerships, questions), status like the menu (green 10:00-22:00, yellow
   outside), then "What happens next" + "Starting a project? Here's how it works." and the 3 steps as tiles in a row */
.ct-sub{margin:4px 0 0;color:var(--muted);font-size:.95rem}
@media all{
  .ct-col .ct-card{margin:18px 0 6px}
  .ct-live{color:#4ade80}
  .ct-live em{font-style:normal;font-size:.8rem;color:#b9acd8}
  .ct-live.is-idle{color:#facc15}
  .ct-tl{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
  .ct-tl li{display:block;padding:12px 6px;text-align:center;border-radius:14px;background:#1E1432;border:1px solid rgba(255,255,255,.12)}
  .ct-tl li:not(:last-child)::before{display:none}
  .ct-tl .ct-n{width:26px;height:26px;margin:0 auto 6px;font-size:.75rem}
  .ct-tl p{margin:0;font-size:.68rem;line-height:1.3}
  .ct-tl p b{font-size:.8rem;margin-bottom:2px}
}
/* Contact phone step tiles: T4 card flip + corner sparks (script end of main.js) */
@media all{
  .ct-tl li{position:relative;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
  .ct-tl.flip-wait li{opacity:0;transform:perspective(500px) rotateY(-80deg)}
  .ct-tl.flip-wait li.flip-on{opacity:1;transform:none}
  .ct-spark{position:absolute;width:9px;height:9px;background:#C9A8FF;clip-path:polygon(50% 0,100% 100%,0 100%);opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s}
}
@media all{.ct-spark.ct-spark-w{background:#fff}}
/* Home Recent work, PHONES, A3 (2026-10-03, from _preview-work-align.html): 18px inner margin inside the glass card,
   the project part centred (MB tile above the name, place, link, chips), How it works on a clean left line */
@media all{
  #work>.wrap{padding-inline:calc(var(--gutter) + 18px)}
  #work .dna{margin-inline:calc(50% - 50vw)}
  #work .case-id{grid-template-columns:1fr;justify-items:center;text-align:center}
  #work .case-id>*{text-align:center!important;justify-self:center!important}
  #work .w-mono{grid-row:auto;margin-bottom:8px}
  #work .w-built .chips{justify-content:center}
}
/* Founding offer tab, PHONES, V4 (2026-10-03, from _preview-offer-tab.html): a slim vertical tab on the right edge,
   about 42% down the screen: "20%" on top, then the 9 spot triangles stacked down, pointing down (owner). The popup
   is unchanged. */
@media all{
  .fco-trigger{position:fixed;top:calc(var(--header-h) + env(safe-area-inset-top) + 12px);right:0;bottom:auto;flex-direction:column;align-items:center;gap:5px;padding:12px 7px!important;border-radius:14px 0 0 14px;background:rgba(30,21,52,.92);border:1px solid rgba(255,255,255,.14);border-right:0}
  .fco-trigger .fco-lbl{display:none}
  .fco-trigger .fco-pct{margin:0 0 2px!important;font-size:12.5px!important}
  .fco-trigger .fco-mini{display:flex!important;flex-direction:column;align-items:center;gap:4px}
  .fco-trigger .fco-mini svg{display:block;width:11px;height:11px;transform:rotate(180deg)}
}

/* Phones: offer tab T5 (no box) with OFF under 20%, and no scrollbar on any page (2026-10-04) */
@media all{
  .fco-trigger{background:none!important;border:0!important;box-shadow:none!important;filter:drop-shadow(0 0 6px rgba(10,6,20,.9))}
  .fco-trigger .fco-pct{text-align:center}
  .fco-trigger .fco-pct::after{content:"OFF";display:block}
}
@media (max-width:760px){  html{scrollbar-width:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
}

/* Phones (2026-10-04): the vertical offer tab floats, so it no longer pushes the page down (that left a ~200px gap
   under the header); the hero particle logo moves ON TOP of the hero text, compact, so logo, headline and
   buttons all fit on the first screen */
@media (max-width:760px){
  .has-offer main{padding-top:0}
  html{scroll-padding-top:calc(var(--header-h) + 12px)}
  .hero{padding-top:8px}
  .hero-grid{gap:4px}
  .hero-visual{order:-1}
  .hero-logo{aspect-ratio:auto;height:min(36vh,288px);max-height:none}
}

/* Phones (2026-10-04): offer tab entry D1 soft drop (from _preview-offer-entry.html) instead of sliding in: 20%, then OFF,
   then each triangle drops a little and fades in, top to bottom. The last-spot flicker is unchanged. */
@media all{
  html .fco-trigger:not(.is-in){transform:none;opacity:1}
  .fco-trigger.is-in{transition:none}
  .fco-trigger:not(.is-in) .fco-pct,.fco-trigger:not(.is-in) .fco-pct::after,.fco-trigger:not(.is-in) .fco-mini svg{opacity:0}
  @keyframes fco-drop{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
  .fco-trigger.is-in .fco-pct{animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) both}
  .fco-trigger.is-in .fco-pct::after{animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) .25s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(1){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 0.62s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(2){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 0.74s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(3){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 0.86s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(4){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 0.98s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(5){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 1.10s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(6){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 1.22s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(7){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 1.34s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(8){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 1.46s both}
  .fco-trigger.is-in .fco-mini svg:nth-child(9){animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) 1.58s both}
}
@media (prefers-reduced-motion:reduce){.fco-trigger.is-in .fco-pct,.fco-trigger.is-in .fco-pct::after,.fco-trigger.is-in .fco-mini svg{animation:none;opacity:1}}

/* Desktop (761px+, 2026-10-04, owner): the phone designs now used on desktop too (the @media all blocks above):
   Recent work client card (R1/A3), contact card + 3 step tiles (K2/T4), offer tab (V4 vertical, T5 "20% OFF", D1 drop).
   These rules only adjust them for the wider screen. */
@media (min-width:761px){
  /* Recent work: one centred column like the phone, the carousel full width above the client card */
  #work-title .hide-phone,#work .section-head>.lead,#work .case-mirabell>p.hide-phone{display:none}
  #work .section-head{display:block}
  #work .case{display:block}
  #work .dna{margin-inline:0}
  #work .case-mirabell{max-width:520px;margin:28px auto 0}
  #work .case-mirabell .actions{justify-content:center}
  #work .w-gl{max-width:520px;margin-inline:auto}
  /* contact: the card + tiles replace the old list, a bit bigger for the wide screen */
  .ct-tl li{padding:18px 10px}
  .ct-tl .ct-n{width:32px;height:32px;font-size:.85rem}
  .ct-tl p{font-size:.85rem}
  .ct-tl p b{font-size:1rem}
  /* offer tab: no hover peek or wide bar, the label stays hidden */
  .fco-trigger{min-width:0!important;justify-content:flex-start!important;transform:none!important}
  .fco-trigger .fco-mini{margin-left:0!important}
  .fco-trigger .fco-pct{font-size:13.5px!important}
  .fco-trigger .fco-mini svg{width:12px;height:12px}
  .fco-popup{top:calc(100% + 12px);right:64px}
}

/* Offer popup (2026-10-04, owner's green line): opens level with the top of the "20% OFF" tab (12px under the header), every screen */
.fco-popup{top:calc(100% + 12px)}

/* Legal pages L4 (2026-10-04, from _preview-legal.html; ALL legal pages share this design, give any new one .prose.legal):
   lilac contents chips on top (built by main.js from the h2s), left-aligned reading column, lilac section titles with a
   thin line above, small lilac triangle bullets. Desktop: the chips stay in a sticky column on the left. */
.legal{max-width:680px;margin-inline:auto}
.legal,.legal *{text-align:left!important}
.legal ul{list-style:none;padding-left:0}
.legal li{position:relative;padding-left:20px;margin:0 0 8px}
.legal li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;background:#C9A8FF;clip-path:polygon(50% 100%,0 0,100% 0)}
.legal h2{color:#C9A8FF;font-size:1.15rem;margin:30px 0 10px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);scroll-margin-top:calc(var(--header-h) + 20px)}
.legal-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.legal-toc a{padding:6px 12px;border-radius:999px;border:1px solid rgba(201,168,255,.35);background:rgba(201,168,255,.08);color:#fff;font-size:.8rem;line-height:1.3;text-decoration:none}
.legal-toc a:hover,.legal-toc a:focus-visible{background:rgba(201,168,255,.2)}
@media (min-width:961px){
  .legal.has-toc{max-width:980px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start}
  .legal-toc{position:sticky;top:calc(var(--header-h) + 24px);flex-direction:column;align-items:flex-start;margin:0}
}
/* Legal pages (2026-10-04, owner): bullets are empty white triangles (outline) instead of full lilac */
.legal li::before{width:9px;height:9px;top:.5em;clip-path:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1.5h8L5 8.8z' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Offer tab F4 (2026-10-04, from _preview-offer-count.html, every screen): 20% OFF, then the REAL number of open spots
   big in peach with "LEFT" under it (span.fco-left, from "shown" in main.js), then only the flickering last-spot
   triangle. The popup still shows all 9. */
.fco-left{display:none}
.fco-trigger .fco-left{display:block;text-align:center;font-size:8.5px;letter-spacing:.08em;line-height:1.1;text-transform:uppercase;color:#fff;opacity:.85;margin-top:2px}
.fco-trigger .fco-left b{display:block;font-size:20px;line-height:1;color:#ffa77e;letter-spacing:0;font-weight:600}
.fco-trigger .fco-mini svg:not(.fco-last){display:none!important}
.fco-trigger.is-in .fco-left{animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) .45s both}
.fco-trigger.is-in .fco-mini svg.fco-last{animation:fco-drop .5s cubic-bezier(.2,.8,.2,1) .65s both!important}
.fco-trigger:not(.is-in) .fco-left{opacity:0}
@keyframes fco-drop{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.fco-trigger.is-in .fco-left,.fco-trigger.is-in .fco-mini svg.fco-last{animation:none!important}}

/* ---------- Button system B3 (2026-10-04, from _preview-buttons.html), EVERY page and screen ----------
   1 main (.btn-primary, also the old gold .btn-gold): the moving lilac gradient on a slant ( / ), drifting corner to corner
   2 second (.btn-glass): dark violet #1E1432 with the same moving slanted gradient as its edge
   3 text links stay as they are; .btn-sm is the small size of the same styles. WhatsApp float unchanged. */
:root{--diag:linear-gradient(120deg,#7B5CFF,#C9A8FF 25%,#F3E9FF 40%,#C9A8FF 55%,#7B5CFF 75%,#C9A8FF)}
@keyframes diag{from{background-position:0% 0%}to{background-position:100% 100%}}
.btn.btn-primary,.btn.btn-gold,.cta-f2 .actions .btn.btn-primary{color:#140E22;background:var(--diag);background-size:300% 300%;animation:diag 10s linear infinite alternate;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 10px 30px -10px rgba(155,92,255,.85)}
.btn.btn-primary:hover,.btn.btn-gold:hover{color:#140E22;box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 14px 38px -10px rgba(155,92,255,1)}
.btn.btn-glass,.cta-f2 .actions .btn.btn-glass{color:#fff;background:linear-gradient(#1E1432,#1E1432) padding-box,var(--diag) border-box;background-size:100% 100%,300% 300%;animation:diag 10s linear infinite alternate;border:1.5px solid transparent;box-shadow:0 8px 24px -12px rgba(4,2,12,.8)}
.btn.btn-glass:hover{color:#fff;background:linear-gradient(#281B42,#281B42) padding-box,var(--diag) border-box;background-size:100% 100%,300% 300%}
.btn.btn-glass::before{opacity:.12}
@media (prefers-reduced-motion:reduce){.btn.btn-primary,.btn.btn-gold,.btn.btn-glass{animation:none}}

/* Phones (2026-10-04, owner): the offer tab shows only the number LEFT and the flickering triangle, no "20% OFF" */
@media (max-width:760px){.fco-trigger .fco-pct{display:none!important}}

/* Phones (2026-10-04, owner): offer tab sits higher (the number starts right under the header line), and the About
   page Instagram chip is centred */
@media (max-width:760px){
  .fco-trigger{top:calc(var(--header-h) + env(safe-area-inset-top) + 2px);padding-top:4px!important}
  .ig-chip{margin-inline:auto}
}

/* Phones (2026-10-04, owner picked M4 from _preview-phone-scene-3.html): the brand check scene seen from far away.
   The whole massif, goat, grass, tree and apple at 42% (--u 0.10vw), the group shifted so the tree and apple stand on
   the left and the goat on the summit (--shift 82); the summit stays at the same height above the panel (offset --D).
   Under it a darker, nearer ridge (the same drawing at the old phone size, darkened) fills the base down to the footer. */
@media (max-width:760px){
  .goat-peak,.goat-tree,.goat-grass{--u:0.10vw;--shift:82}
  .goat-zone{--D:calc(325.8vw - 136.44vw)}
  .goat-scene,.js .goat-scene.is-near{background:url(../img/mountains-massif.svg?v=4) calc(50% + 8.2vw) calc(100% - var(--D))/auto 170vw no-repeat,#160f26!important}
  .js .goat-scene:not(.is-near){background:#160f26!important}
  .goat-scene::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--D) + 60vw);z-index:-1;background:url(../img/mountains-massif.svg?v=4) calc(50% - 60vw) 100%/auto 230vw no-repeat;filter:brightness(.5) saturate(.9)}
  .goat-peak{bottom:calc(var(--D) + 136.44vw)}
  .goat-tree{bottom:calc(var(--D) + 111.5vw)}
  .goat-grass{bottom:calc(var(--D) + 130.8vw)}
}

/* Phones (2026-10-04, owner): base F1 "valley" (new low-poly foothills, assets/img/base/base-valley.svg) instead of the
   darkened copy; the scene has NO own background colour any more, so the page background and its floating particles
   run on behind and around the mountain (there was a hard line where the scene began); the goat faces LEFT (eats on
   the left side). */
@media (max-width:760px){
  .goat-scene,.js .goat-scene.is-near{background:url(../img/mountains-massif.svg?v=4) calc(50% + 8.2vw) calc(100% - var(--D))/auto 170vw no-repeat!important}
  .js .goat-scene:not(.is-near){background:none!important}
  .goat-scene::before{height:280vw;filter:none;background:url(../img/base/base-valley.svg) 50% 100%/100% auto no-repeat}
  .goat-peak img{transform:scaleX(-1)}
}

/* Phones (2026-10-05, owner picked G1 from _preview-scene-fit.html): the scene never climbs up behind the FAQ. The goat's
   summit sits a fixed 75vw under the TOP of the scene (= the end of the FAQ), whatever the phone width (--D from
   --scene-h, set by main.js); the brand check panel moves down 28vw to make room. The goat stands in front of the grass
   so its head and face show (it faces left on phones). */
@media (max-width:760px){
  .goat-scene{--D:calc(var(--scene-h) - 75vw - 136.44vw)}
  .goat-stage{margin-top:28vw}
  .goat-peak{z-index:2}
  .goat-grass{z-index:1}
}

/* Home FAQ open card O3 (2026-10-05, from _preview-faq-open.html): the open question gets the moving slanted gradient
   edge of the B3 second buttons */
.faq-item[open]{border:1.5px solid transparent;background:linear-gradient(#241838,#241838) padding-box,var(--diag) border-box;background-size:100% 100%,300% 300%;animation:diag 10s linear infinite alternate}
@media (prefers-reduced-motion:reduce){.faq-item[open]{animation:none}}

/* ---------- Type tidy-up (2026-10-05, owner OK after the sitewide text audit) ----------
   One set of sizes: H1 --fs-h1, H2 --fs-h2 (weight 600), H3 --fs-h3, intro --fs-lead, text 1rem, footer / breadcrumbs
   --fs-small (14px), small notes --fs-note (13px). Fonts: Techna Sans for titles, labels and buttons; Outfit for text. */
:root{--fs-note:.8125rem}
/* titles that were bigger or bolder than the other section titles */
#cta-title,.fam-nm{font-size:var(--fs-h2)!important;font-weight:600!important}
.cta-panel h1{font-size:var(--fs-h1)}
/* card titles: all the same size */
#work .case-id h3,.oc-line h3{font-size:var(--fs-h3)!important}
.legal h2{font-size:var(--fs-h3)}
/* FAQ page questions look like the home page FAQ questions */
.faqp-sec h3{font-family:var(--font);font-size:1.0625rem;font-weight:500;letter-spacing:0}
/* contact page: normal text at 1rem like everywhere else */
.ct-ln,.ct-ln span,.ct-sub{font-size:1rem}
/* small notes: one size (13px) instead of seven */
.r-hint,#work .case-id .small,#work .case-id .small a,.ig-prof small,.ig-follow,.wa-chat-nm>span,.wa-chat-hint,.ct-live em,
.legal-toc a,.cta-trust,.cta-trust span,.cf-status,.gb-tile .gb-desc,.fam-kick,.chn,.case-steps h3,.result .fix-label,.chips .chip,
.wa-chat-qr a{font-size:var(--fs-note)!important}
/* contact step tiles: readable (were 10.9px) */
@media (max-width:760px){.ct-tl p{font-size:var(--fs-note)}.ct-tl p b{font-size:.9375rem}}

/* ---------- Spacing tidy-up (2026-10-05, owner OK after the spacing audit), EVERY page and screen ----------
   One spacing scale: --sp-1 4px, --sp-2 8px, --sp-3 12px, --sp-4 16px, --sp-5 24px, --sp-6 32px, --sp-7 56px.
   Fixed gaps: small label > title 12, page title > intro 18, section title > text 14, card title > text 8,
   paragraph > paragraph 12, other stacked pieces 16. */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:56px}
main .stack:has(> .kicker),main .section-head:not(.split):has(> .kicker){gap:0}
main .stack:has(> .kicker) > * + *,main .section-head:not(.split):has(> .kicker) > * + *{margin-top:var(--sp-4)}
main .section-head.split .stack{gap:var(--sp-3)}
main .kicker{margin-bottom:0}
main .kicker + :is(h1,h2,.h2,h3){margin-top:var(--sp-3)!important}
main h1 + :is(p,.lead){margin-top:18px!important}
main :is(h2,.h2):not(.legal h2) + :is(p,.lead,ul){margin-top:14px}
main :is(h3,.h3) + :is(p,ul),.legal h2 + :is(p,ul){margin-top:var(--sp-2)}
main :is(.prose,.legal-body,.card,.faqp-sec,.stack) > p + p{margin-top:var(--sp-3)}
.legal h2{margin-bottom:0}
main :is(.prose,.legal-body,.faqp-sec) :is(p,ul){margin-bottom:0}
main :is(.prose,.legal-body) :is(p,ul) + :is(p,ul){margin-top:var(--sp-3)}
/* stacked grids: no grid gap, the gap is the margin above each piece (16), so the fixed pairs above are exact */
main :is(.stack,.cta-panel,.case-meta,.step){row-gap:0!important}
main :is(.stack,.cta-panel,.case-meta,.step) > * + :not(.actions){margin-top:var(--sp-4)}
main :is(.stack,.cta-panel,.case-meta,.step) > * + .actions{margin-top:var(--sp-5)}
/* the fixed pairs win over the stacked-grid margin above */
main :is(h2,.h2):not(.legal h2) + :is(p,.lead,ul){margin-top:14px!important}
main :is(h3,.h3) + :is(p,ul),.legal h2 + :is(p,ul){margin-top:var(--sp-2)!important}
main :is(.prose,.legal-body,.card,.faqp-sec,.stack) > p + p{margin-top:var(--sp-3)!important}

/* Offer tab (2026-10-05, owner): the big number, LEFT and the flickering triangle all end on one straight line under
   the right end of the menu lines (--fco-r measured by main.js); every screen */
.fco-trigger{right:var(--fco-r,0px)!important;padding-right:0!important;align-items:flex-end!important}
.fco-trigger .fco-left,.fco-trigger .fco-left b,.fco-trigger .fco-pct{text-align:right!important}
.fco-trigger .fco-mini{align-items:flex-end!important}
/* Offer tab (2026-10-05, owner): under the big number it now says "20% OFF" instead of "LEFT", so the separate "20% OFF" on
   top is hidden on every screen */
.fco-trigger .fco-pct{display:none!important}
.fco-trigger .fco-left{white-space:nowrap}

/* WhatsApp float W2 "typing bubble" (2026-10-05, from _preview-wa-button.html), every page and screen: every 6 s the
   icon turns into three typing dots for a moment, as if someone is writing back, then the icon returns */
.wa-float::before{animation:none;box-shadow:none}
.wa-float svg{animation:wa-icon 6s infinite}
.wa-float::after{content:"";position:absolute;inset:0;margin:auto;width:30px;height:8px;pointer-events:none;background:radial-gradient(circle,#fff 3px,transparent 3.5px) 0 50%/10px 8px repeat-x;opacity:0;animation:wa-dots 6s infinite}
@keyframes wa-icon{0%,60%,100%{opacity:1;transform:none}66%,94%{opacity:0;transform:scale(.6)}}
@keyframes wa-dots{0%,62%,98%,100%{opacity:0}68%,92%{opacity:1}}
@media (min-width:761px){.wa-float::after{left:16px;right:auto;margin:auto 0}}
@media (prefers-reduced-motion:reduce){.wa-float svg,.wa-float::after{animation:none}.wa-float::after{opacity:0}}

/* Main buttons D1 (2026-10-05, owner, from _preview-btn-text.html): white text on the moving lilac gradient, with a soft
   violet shadow so it stays readable on the pale parts */
.btn.btn-primary,.btn.btn-gold,.btn.btn-primary:hover,.btn.btn-gold:hover,.cta-f2 .actions .btn.btn-primary{color:#fff;text-shadow:0 1px 3px rgba(40,16,90,.65)}

/* Contact page free brand check (2026-10-05, H3 from _preview-brand-check-4.html), every screen: left aligned like the
   page, a list of what I check with one levitating triangle per line (pointing right, soft lilac glow under it) */
.bc-list{max-width:560px}
.bc-list,.bc-list *{text-align:left}
main .bc-list .kicker{justify-content:flex-start}
.bc-list .actions{justify-content:flex-start}
.bc-list .actions .btn{width:100%}
.bc-list > .small{color:var(--muted);font-size:var(--fs-note);margin-top:var(--sp-3)}
.bc-checks{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:grid;gap:10px}
.bc-checks li{position:relative;padding-left:32px;color:#fff;min-height:22px}
.bc-checks li::before{content:"";position:absolute;left:5px;top:4px;width:12px;height:12px;background:linear-gradient(135deg,#fff,#C9A8FF);clip-path:polygon(0 0,100% 50%,0 100%);animation:bc-lev 3.2s ease-in-out infinite}
.bc-checks li::after{content:"";position:absolute;left:3px;top:18px;width:16px;height:5px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,168,255,.55),transparent);animation:bc-sh 3.2s ease-in-out infinite}
.bc-checks li:nth-child(2)::before,.bc-checks li:nth-child(2)::after{animation-delay:-.8s}
.bc-checks li:nth-child(3)::before,.bc-checks li:nth-child(3)::after{animation-delay:-1.6s}
.bc-checks li:nth-child(4)::before,.bc-checks li:nth-child(4)::after{animation-delay:-2.4s}
@keyframes bc-lev{0%,100%{transform:translateY(1px)}50%{transform:translateY(-4px)}}
@keyframes bc-sh{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(.6);opacity:.35}}
@media (prefers-reduced-motion:reduce){.bc-checks li::before,.bc-checks li::after{animation:none}}
@media (min-width:761px){.bc-list{margin-inline:auto}}
/* Contact brand check entry J2 (2026-10-05, from _preview-bc-entry.html): the first time the list scrolls into view, the 4
   triangles fly in from the right, spinning, and land on their lines one by one; each line fades in as its triangle
   lands. Only the list animates (title, text and button stay still). main.js adds .bc-wait, then .bc-go. */
.bc-checks.bc-wait li{opacity:0}
.bc-checks.bc-go li{animation:bc-in .4s ease both}
.bc-checks.bc-go li::before{animation:bc-fly .7s cubic-bezier(.2,.8,.2,1) both,bc-lev 3.2s ease-in-out infinite}
.bc-checks.bc-go li:nth-child(1),.bc-checks.bc-go li:nth-child(1)::before{animation-delay:.2s,1.1s}
.bc-checks.bc-go li:nth-child(2),.bc-checks.bc-go li:nth-child(2)::before{animation-delay:.46s,1.36s}
.bc-checks.bc-go li:nth-child(3),.bc-checks.bc-go li:nth-child(3)::before{animation-delay:.72s,1.62s}
.bc-checks.bc-go li:nth-child(4),.bc-checks.bc-go li:nth-child(4)::before{animation-delay:.98s,1.88s}
@keyframes bc-in{from{opacity:0}to{opacity:1}}
@keyframes bc-fly{from{transform:translateX(70vw) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}

/* Offer tab (2026-10-06, owner): the number, then "20%" and "OFF" on their own lines, then the triangle */
.fco-trigger .fco-left span{display:block}

/* ---------- Home reviews (2026-10-06): S3 deck with client name tabs, K7 key words, K8 tinted top with one triangle ----------
   Without the script the cards simply stack as a list. Key words use a still lilac gradient (no animation, the home page
   is heavy enough). */
.rv-deck{position:relative;width:min(100%,460px);margin:var(--sp-5) auto 0;display:grid;gap:var(--sp-3);outline:none;-webkit-tap-highlight-color:transparent}
.rv-deck:focus-visible{outline:2px solid var(--lavender);outline-offset:6px;border-radius:24px}
.rv-card{position:relative;border-radius:22px;background:linear-gradient(180deg,#2a1f48,#1E1432);border:1px solid rgba(214,196,255,.18);overflow:hidden}
.rv-card,.rv-card *{text-align:left}
.rv-tab{display:none}
.rv-top{padding:20px 20px 16px;background:linear-gradient(135deg,rgba(155,123,255,.26),rgba(201,168,255,.08) 60%,rgba(201,168,255,.02));border-bottom:1px solid rgba(214,196,255,.14)}
.rv-mk{display:block;width:12px;height:14px;margin-bottom:10px;fill:#C9A8FF}
.rv-h{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.25;color:#fff}
.rv-h em{font-style:normal;background:linear-gradient(120deg,#9C7BFF,#C9A8FF 45%,#F3E9FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.rv-q{margin:var(--sp-4) 20px 0;color:#cfc4ea;line-height:1.55}
.rv-who{display:flex;align-items:center;gap:12px;margin:var(--sp-4) 20px 20px}
.rv-av{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7B5CFF,#C9A8FF);color:#fff;font-weight:700;font-size:.85rem;font-family:var(--font-display)}
.rv-who b{display:block;color:#fff}.rv-who small{display:block;color:var(--muted);font-size:var(--fs-note)}
.rv-dots,.rv-hint{display:none}
.rv-deck.is-deck{display:block;cursor:pointer}
.rv-deck.is-deck .rv-card{position:absolute;left:0;right:0;bottom:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s;box-shadow:0 -10px 24px -16px rgba(0,0,0,.9)}
.rv-deck.is-deck .rv-tab{position:absolute;left:20px;right:20px;top:0;height:40px;display:flex;align-items:center;gap:8px;font-size:var(--fs-note);color:#C9A8FF;opacity:0;transition:opacity .4s}
.rv-deck.is-deck .rv-tab::before{content:"";flex:none;width:7px;height:7px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.rv-deck.is-deck .rv-card.is-back .rv-tab{opacity:1}
.rv-deck.is-deck .rv-body{transition:opacity .4s}
.rv-deck.is-deck .rv-card.is-back .rv-body{opacity:0}
.rv-deck.is-deck ~ .rv-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--sp-5)}
.rv-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
.rv-dots i.on{width:22px;border-radius:99px;background:#C9A8FF}
.rv-deck.is-deck ~ .rv-hint{display:block;text-align:center;color:var(--muted);font-size:var(--fs-note);margin-top:var(--sp-3)}
@media (prefers-reduced-motion:reduce){.rv-deck.is-deck .rv-card,.rv-deck.is-deck .rv-tab,.rv-deck.is-deck .rv-body{transition:none}}
/* Offer tab (2026-10-06, owner): number, "20%", "OFF" and the triangle centred on one axis, with the same gap above
   and below the "20% OFF" lines */
.fco-trigger{align-items:center!important;gap:0!important}
.fco-trigger .fco-left,.fco-trigger .fco-left b,.fco-trigger .fco-left span{text-align:center!important}
.fco-trigger .fco-left b{margin-bottom:6px}
.fco-trigger .fco-left span{line-height:1.15}
.fco-trigger .fco-mini{align-items:center!important;margin-top:6px!important}

/* Home 2026-10-06: "See more projects" link under the Mirabell button (no client list, the reviews show them) */
.w-more{margin:var(--sp-4) 0 0;text-align:center}
.w-more a{display:inline-flex;align-items:center;gap:8px;color:#C9A8FF;font-weight:600;text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(201,168,255,.45)}
.w-more a::after{content:"";width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}

/* How it works P4 (2026-10-06): one-row 01-04 switch and one card, own block under About, every screen */
.hs-gold{background:linear-gradient(90deg,#B8975A,#F6EBCB 55%,#C9A96A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs{max-width:560px;margin:var(--sp-5) auto 0}
.hs-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.hs-tabs button{padding:10px 0;border:0;border-radius:999px;background:none;color:var(--muted);font:700 1rem var(--font-display);cursor:pointer}
.hs-tabs button.on{background:var(--diag);background-size:300% 300%;color:#fff;text-shadow:0 1px 3px rgba(40,16,90,.65)}
.hs-tabs button:focus-visible{outline:2px solid var(--lavender);outline-offset:2px}
.hs-pane{margin-top:var(--sp-3);padding:20px;border-radius:20px;background:#1E1432;border:1px solid rgba(201,168,255,.6);box-shadow:0 0 22px rgba(160,120,255,.3)}
.hs-pane,.hs-pane *{text-align:left}
.hs-pane.on{animation:hs-in .4s ease}
.hs-pane b{display:block;font-family:var(--font-display);font-size:var(--fs-h3);background:linear-gradient(90deg,#B8975A,#F6EBCB 55%,#C9A96A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-pane p{margin:var(--sp-2) 0 0;color:#cfc4ea;line-height:1.5}
@keyframes hs-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hs-pane.on{animation:none}}

/* Home FAQ open card (2026-10-06, owner: P1 look): lilac edge and soft lilac glow instead of the moving gradient edge */
.faq-item[open]{animation:none;background:var(--card);border:1px solid rgba(201,168,255,.6);box-shadow:0 0 22px rgba(160,120,255,.3)}
.faq-item{transition:border-color .3s,box-shadow .3s}
.faq-item.is-closing{border-color:var(--card-edge);box-shadow:none}

/* Home About, PHONES (2026-10-06, owner): "Hi, I'm Serj." sits above the photo */
@media (max-width:760px){
  #about .wrap.split{display:flex;flex-direction:column}
  #about .stack{display:contents}
  #about-title{order:-1;text-align:center;margin:0 0 var(--sp-4)}
  #about .founder-photo{order:0}
  #about .stack > :not(#about-title){order:1}
  #about .about-lead{margin-top:var(--sp-4)}
  #about .stack > p:not(.about-lead):not(.kicker){margin-top:var(--sp-3)}
  #about .about-pair{margin-top:var(--sp-5)}
}

/* Home 2026-10-06 (owner): the full stop of "Hi, I'm Serj." is a site triangle, turned to point down-right towards the
   WhatsApp button (the real full stop stays for screen readers) */
.dot-tri{display:inline-block;width:.32em;height:.32em;margin-left:.08em;vertical-align:baseline;background:linear-gradient(135deg,#fff,#C9A8FF);clip-path:polygon(0 0,100% 50%,0 100%);transform:rotate(35deg);transform-origin:50% 50%}

/* Home Recent work tags C1 (2026-10-06): no pills, the words split by small lilac triangles like the ticker */
#work .w-built .chips{gap:6px 14px}
#work .w-built .chip{background:none;border:0;box-shadow:none;padding:0;color:#e6dcff;position:relative}
#work .w-built .chip:not(:last-child)::after{content:"";position:absolute;right:-10px;top:50%;width:6px;height:6px;margin-top:-3px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}

/* Home FAQ arrow A4 (2026-10-06): an empty white triangle pointing down, it flips up when the answer is open */
.faq-item summary::after{border:0;width:12px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M1 1h10L6 10z' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:none;transition:transform .35s}
.faq-item[open] summary::after{transform:rotate(180deg)}
/* tags in two even rows of two (no lone word on a row, no triangle at a line end) */
#work .w-built .chips{max-width:300px;margin-inline:auto;justify-content:center}
#work .w-built .chip:nth-child(2)::after{display:none}

#work .w-built .chips{display:grid!important;grid-template-columns:auto auto;justify-content:center;column-gap:22px;row-gap:8px;max-width:none}
#work .w-built .chip{justify-self:start}
#work .w-built .chip:nth-child(odd){justify-self:end}
#work .w-built .chip::after{display:none}
#work .w-built .chip:nth-child(odd)::after{display:block;right:-14px}

/* Home Recent work tags (2026-10-06, owner): ONE row on phones, small text, triangles between ("Website + booking" now "Website") */
#work .w-built .chips{display:flex!important;flex-wrap:nowrap;justify-content:center;gap:0 14px;max-width:none}
#work .w-built .chip{font-size:var(--fs-note);white-space:nowrap;justify-self:auto}
#work .w-built .chip::after{display:block!important;right:-10px}
#work .w-built .chip:last-child::after{display:none!important}
/* Serj's note about the project (2026-10-06, owner pick 6) */
#work .w-note{max-width:34em;margin:var(--sp-5) auto 0;color:#cfc4ea;line-height:1.55;text-align:center}
#work .w-note span{display:block;margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-note)}
#work .w-built .chips{gap:0 16px}
#work .w-built .chip::after{right:-11px!important}

/* How it works H4 (2026-10-06, owner): no big title; the label sits on the same row as 01-04; a progress line fills with
   the chosen step; each card has "Next step"; brand lilac instead of the Mirabell gold; closer under the Instagram card */
#how{padding-top:var(--sp-6)}
.hs{margin-top:0}
.hs-row{display:flex;align-items:center;gap:12px}
.hs-lab{flex:none;margin:0;color:var(--lavender);font-size:var(--fs-note);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-display)}
.hs-row .hs-tabs{flex:1;min-width:0}
.hs-tabs button{font-size:.95rem;padding:9px 0}
.hs-prog{height:2px;margin:10px 4px 0;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.hs-prog i{display:block;height:100%;background:linear-gradient(90deg,#7B5CFF,#C9A8FF,#F3E9FF);transform-origin:0 50%;transform:scaleX(.25);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hs-pane b{background:linear-gradient(120deg,#9C7BFF,#C9A8FF 45%,#F3E9FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-next{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-3);padding:0;border:0;background:none;color:#C9A8FF;font:600 var(--fs-note) var(--font);cursor:pointer}
.hs-next::after{content:"";width:7px;height:7px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.hs-next:focus-visible{outline:2px solid var(--lavender);outline-offset:3px;border-radius:4px}
#about{padding-bottom:var(--sp-5)}
@media (prefers-reduced-motion:reduce){.hs-prog i{transition:none}}

/* Home 2026-10-06 (owner): "See more projects" link, its underline and triangle in white */
.w-more a{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.w-more a::after{background:#fff}
/* Serj's note: phones keep the owner's four rows (br.br-phone), so the text must not wrap inside a row */
@media (max-width:760px){#work .w-note{max-width:none;white-space:normal}}

/* How it works B3 (2026-10-06, from _preview-how-blend.html): everything in ONE glass card with the Instagram card's
   rounding: label + four round numbers on top, the step, "Next step", and the progress line along the bottom edge */
.hs-b3{max-width:420px;margin:0 auto}
.hs-card{position:relative;padding:18px 20px 0;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);overflow:hidden}
.hs-card .hs-row{justify-content:space-between;margin-bottom:var(--sp-4)}
.hs-card .hs-tabs{flex:none;display:flex;gap:6px;padding:0;border:0;background:none;border-radius:0}
.hs-card .hs-tabs button{width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);font-size:.78rem}
.hs-card .hs-tabs button.on{border-color:transparent}
.hs-card .hs-pane{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.hs-card .hs-next{margin-bottom:18px}
.hs-card .hs-pane:last-of-type p{margin-bottom:18px}
.hs-card .hs-prog{margin:0 -20px;border-radius:0}
#how{padding-top:var(--sp-4)}
.hs-card .hs-tabs button.on{background:var(--diag);background-size:300% 300%;color:#fff}
.hs-card .hs-pane{padding-bottom:18px}
.hs-card .hs-next{margin-bottom:0}

/* How it works card sits under the Instagram card with the same 10px gap as between the two pills above */
#about{padding-bottom:0}
#how{padding-top:10px}

/* Home Recent work (2026-10-06, owner Q1 / P6): the two project buttons look the same, one under the other, dark glass
   pills with an icon (eye / grid) and a lilac triangle; they do NOT use the booking gradient */
.w-pair{display:grid;gap:10px;margin-top:var(--sp-5)}
.w-pbtn{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;font:600 1rem var(--font-display);text-decoration:none;transition:transform .25s,background .25s}
.w-pbtn:hover{background:rgba(255,255,255,.1)}
.w-pbtn:active{transform:scale(.97)}
.w-pbtn:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}
.w-pbtn svg{width:18px;height:18px;flex:none;fill:none;stroke:#C9A8FF;stroke-width:1.8}
.w-pbtn::after{content:"";margin-left:auto;width:8px;height:8px;flex:none;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
#work .w-pair,#work .w-pair *{text-align:left}

/* How it works numbers N6 (2026-10-06): no bubbles; the chosen number bigger in the lilac gradient, the others small grey */
.hs-card .hs-tabs{align-items:center;gap:2px}
.hs-card .hs-tabs button{width:auto;height:auto;min-width:30px;min-height:32px;padding:0 5px;border:0;border-radius:0;background:none;color:var(--muted);font-size:.8rem;transition:font-size .3s}
.hs-card .hs-tabs button.on{font-size:1.25rem;background:linear-gradient(120deg,#9C7BFF,#C9A8FF 45%,#F3E9FF);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}

/* How it works numbers (2026-10-06, owner): plain numbers, all the same size; the chosen one is white and underlined
   with the same thin violet-to-lilac line as the Instagram "Follow" link (replaces N6) */
.hs-card .hs-tabs button,.hs-card .hs-tabs button.on{min-width:30px;min-height:32px;padding:0 5px;font-size:.875rem;animation:none;text-shadow:none;-webkit-background-clip:border-box;background-clip:border-box;background:linear-gradient(90deg,#7B5CFF,#C9A8FF) 50% calc(50% + .8em)/0 1px no-repeat;transition:color .3s,background-size .35s}
.hs-card .hs-tabs button{color:var(--muted)}
.hs-card .hs-tabs button.on{color:#fff;background-size:calc(100% - 10px) 1px}

/* FAQ closed look F1 (2026-10-06, owner, from _preview-faq-closed.html): the same frosted glass and 22px rounding as the
   Instagram and How it works cards; the open look (P1 lilac edge + glow) is unchanged */
.faq-item{border-radius:22px}
.faq-item:not([open]){background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}

/* One size S1 (2026-10-06, owner, _preview-text-match.html): FAQ questions, How it works step title and the two Mirabell
   buttons all 17px (--fs-h4); FAQ stays Outfit, titles and buttons stay Techna Sans */
.hs-pane b,.hs-pane h3,.w-pbtn{font-size:var(--fs-h4)}

/* Home "Why your clients choose someone else?" card P2 (2026-10-06, owner, _preview-problem-card.html): the same frosted
   glass and 28px corners as the Instagram / How it works / FAQ cards; no fingerprint, no hint; 01 02 03 above the card,
   lined up with the card text, the chosen one white with the Follow line (like How it works); "See the fix" lilac with
   the FAQ white triangle. Every screen (the desktop side column is gone). */
.reasons .reason.card.r-bar{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);border-radius:28px;box-shadow:none}
.reasons .reason.r-bar::after{display:none}
.r-hint{display:none!important}
.reason.r-bar .reason-num{display:none}
.reason.r-bar .fix{background:none;border-top:1px solid rgba(255,255,255,.1)}
.reason.r-bar .fix-label,.reason.r-bar .fix-label:hover{color:#C9A8FF}
.reason.r-bar .fix-label::after{border:0;width:12px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M1 1h10L6 10z' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:none;transition:transform .35s}
.reason.r-bar .fix[open] .fix-label::after{transform:rotate(180deg)}
.reason.r-bar .fix-body{color:var(--ink)}
.reason.r-bar .fix-body a{color:#C9A8FF}
.r-tabs-wrap{display:block}
.r-tabs-wrap .r-switch{position:static;flex-direction:row;width:fit-content;height:auto;margin:0 0 var(--sp-3) calc(clamp(20px,2.6vw,28px) - 8px);padding:0;overflow:visible;clip:auto;border:0;background:none;box-shadow:none;gap:4px}
.r-tabs-wrap .r-switch button,.r-tabs-wrap .r-switch button[aria-selected="true"],.r-tabs-wrap .r-switch button:not([aria-selected="true"]):hover{width:auto;height:auto;min-height:36px;padding:0 8px;border-radius:0;font-size:.875rem;box-shadow:none;background:linear-gradient(90deg,#7B5CFF,#C9A8FF) 50% calc(50% + .8em)/0 1px no-repeat;transition:color .3s,background-size .35s}
.r-tabs-wrap .r-switch button{color:var(--muted)}
.r-tabs-wrap .r-switch button:not([aria-selected="true"]):hover{color:#fff}
.r-tabs-wrap .r-switch button[aria-selected="true"]{color:#fff;background-size:calc(100% - 16px) 1px}
@media (max-width:760px){.r-tabs-wrap .r-switch{margin-left:12px}}

/* Header while scrolling (2026-10-06, owner): more see-through again (was .78 to .6), still no blur */
.site-header.is-scrolled:not(.menu-is-open) .header-bar{background:linear-gradient(180deg,rgba(20,14,34,.55),rgba(20,14,34,.3))}

/* Start your project under Extras: E5 typing entry (2026-10-06, owner, _preview-start-entry.html), every screen.
   The button rises showing three typing dots (like the WhatsApp button), then the words appear. */
.syp-dots{display:none}
@media (prefers-reduced-motion:no-preference){
  .js .home .gb-pricing .gb-cta.reveal{transform:none;transition:opacity .2s}
  .js .home .gb-cta.reveal .btn.syp{opacity:0}
  .js .home .gb-cta.reveal.is-in .btn.syp{opacity:1;animation:sypUp .6s cubic-bezier(.2,.7,.2,1) .45s both,sypTx 1.9s .45s both}
  .js .home .gb-cta.reveal.is-in .syp-dots{position:absolute;left:50%;top:50%;display:flex;gap:6px;transform:translate(-50%,-50%);pointer-events:none;animation:sypDo 1.9s .45s both}
  .syp-dots i{width:7px;height:7px;border-radius:50%;background:#fff;animation:sypDot .9s infinite}
  .syp-dots i:nth-child(2){animation-delay:.15s}.syp-dots i:nth-child(3){animation-delay:.3s}
}
@keyframes sypUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sypTx{0%,72%{color:transparent;text-shadow:none}100%{}}
@keyframes sypDo{0%,68%{opacity:1}80%,100%{opacity:0;visibility:hidden}}
@keyframes sypDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
/* ONE card background everywhere (owner 2026-10-06): the Instagram card glass. Used by the Instagram card, How it works,
   the home Mirabell card, FAQ cards, the "Why" problem card, the footer contact bar and the About principle cards. */
:root{--one-bg:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(72,60,104,.3);--one-edge:1px solid rgba(255,255,255,.14)}
.ig-prof,.hs-card,#work>.wrap::before,.faq-item,.faq-item:not([open]),.faq-item[open],.reasons .reason.card.r-bar,.footer-m-bar,.card.principle.p-bar{background:var(--one-bg)!important;border:var(--one-edge)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.faq-item[open]{border-color:rgba(201,168,255,.45)!important}
#work>.wrap::before{box-shadow:none!important}
.site-header.is-scrolled .header-bar{background:#140E22!important}   /* solid header while scrolling, every page (owner 2026-10-06) */
.site-header.is-scrolled .header-bar{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),#2A1D45!important;border-bottom:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important}   /* H6 lavender glass header while scrolling, every page (owner 2026-10-06) */
/* Work page closing panel C2 (owner 2026-10-06, from _preview-work-close.html): lilac instead of gold, no corner triangles.
   Edge: one soft lilac light travels smoothly round the panel edge (a rotating conic gradient behind the panel, transform only). */
.cta-panel.cta-c2{position:relative;isolation:isolate;overflow:hidden;border:0!important;background:none!important}
.cta-panel.cta-c2::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;z-index:-2;transform:translate(-50%,-50%) rotate(0deg);background:conic-gradient(from 0deg,rgba(201,168,255,.18) 0deg,rgba(201,168,255,.18) 200deg,#7B5CFF 260deg,#C9A8FF 300deg,#F3E9FF 320deg,#C9A8FF 340deg,rgba(201,168,255,.18) 360deg);animation:c2spin 9s linear infinite}
.cta-panel.cta-c2::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),#1c1430}
@keyframes c2spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.cta-c2 .cta-gold{background:linear-gradient(120deg,#7B5CFF,#C9A8FF 60%,#E9DDFF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cta-c2 .cta-trust span:not(.cta-live)::before{background:#C9A8FF}
/* Start your project here: no moving gradient, the home page typing-dots entry instead */
.cta-c2 .actions .btn.btn-primary.syp{animation:none;background-position:0 0;position:relative}
.js .cta-c2[data-syp] .btn.syp{opacity:0}
.js .cta-c2.syp-go .btn.syp{opacity:1;animation:sypUp .6s cubic-bezier(.2,.7,.2,1) both,sypTx 1.9s both}
.cta-c2.syp-go .syp-dots{position:absolute;left:50%;top:50%;display:flex;gap:6px;transform:translate(-50%,-50%);pointer-events:none;animation:sypDo 1.9s both}
.cta-c2 .syp-dots i{width:7px;height:7px;border-radius:50%;background:#fff;animation:sypDot .9s infinite}
.cta-c2 .syp-dots i:nth-child(2){animation-delay:.15s}.cta-c2 .syp-dots i:nth-child(3){animation-delay:.3s}
@media (prefers-reduced-motion:reduce){.cta-panel.cta-c2::before{animation:none}.js .cta-c2[data-syp] .btn.syp{opacity:1;animation:none}.cta-c2 .syp-dots{display:none!important}}
/* Work page Instagram row I5 (owner 2026-10-06, from _preview-work-ig.html): no box, no lines; the photo gets a lilac ring,
   Follow is a small lilac outline pill */
.ig-prof.ig-line{background:none!important;border:0!important;border-radius:0;padding:8px 2px}
.ig-prof.ig-line::before,.ig-prof.ig-line::after{display:none}
.ig-prof.ig-line img{border-radius:50%;box-shadow:0 0 0 2px #160f26,0 0 0 4px #C9A8FF}
.ig-prof.ig-line .ig-follow{padding:8px 14px;border-radius:999px;border:1px solid rgba(201,168,255,.5);color:#fff;font-size:var(--fs-small)}
.ig-prof.ig-line .ig-follow .u{padding:0;background:none}
.ig-prof.ig-line .ig-follow:hover{border-color:#C9A8FF}
/* Work page Instagram row I4 (owner 2026-10-06, replaces I5): glass pill with its own small lilac light running round the edge,
   the opposite way to the closing panel below (rotating conic gradient behind, transform only) */
.ig-prof.ig-line{position:relative;isolation:isolate;overflow:hidden;border-radius:999px;padding:10px 16px 10px 10px;margin-top:22px}
.ig-prof.ig-line::before{content:"";display:block!important;position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:140%;height:auto;aspect-ratio:1;z-index:-2;transform:translate(-50%,-50%);background:conic-gradient(from 180deg,rgba(201,168,255,.18) 0deg 230deg,#7B5CFF 280deg,#C9A8FF 315deg,rgba(201,168,255,.18) 360deg);animation:c2spin 9s linear infinite reverse}
.ig-prof.ig-line::after{content:"";display:block!important;position:absolute;inset:1.5px;left:1.5px;right:1.5px;top:1.5px;bottom:1.5px;height:auto;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),#1c1430}
.ig-prof.ig-line img{box-shadow:none}
.ig-prof.ig-line .ig-follow{padding:0 6px 0 0;border:0;border-radius:0;color:#bba9e6;font-size:.86rem}
.ig-prof.ig-line .ig-follow .u{padding-bottom:3px;background:linear-gradient(90deg,#7B5CFF,#C9A8FF) 0 100%/100% 1px no-repeat}
@media (prefers-reduced-motion:reduce){.ig-prof.ig-line::before{animation:none}}
/* Floating triangles on the About principle cards and the home "Why" card: plain colour, no neon glow (owner 2026-10-06) */
.p-tri polygon{filter:none}
.p-gain{background:linear-gradient(135deg,rgba(123,92,255,.55),rgba(201,168,255,.35));border-top:1px solid rgba(201,168,255,.35)}   /* About card bottom strip S5 see-through tint (owner 2026-10-06) */
/* Site check 2026-10-06: bigger invisible tap area (about 44px) on small links, the look does not change */
.ig-follow,.hs-next{position:relative}
.ig-follow::before,.hs-next::before{content:"";position:absolute;inset:-12px -10px}
/* P8 small-triangle system (owner 2026-10-06, from _preview-triangle-set.html). Use ONLY these for new small triangles:
   A action (links, Next step, tag dividers, list bullets, punctuation, floating card triangles) = solid lilac #C9A8FF, no glow
   B open / close (FAQ, See the fix) = empty white outline (the FAQ arrow svg)
   C offer tab only = solid peach #ffa77e */
.dot-tri{background:#C9A8FF!important}
.cta-comma svg{fill:#C9A8FF}
.bc-checks li::before{background:#C9A8FF!important;box-shadow:none!important;filter:none!important}
.legal li::before,.rv-deck.is-deck .rv-tab::before,.w-more a::after,.hs-next::after,.w-pbtn::after,#work .w-built .chip:not(:last-child)::after{background:#C9A8FF}
.bf-list li+li::before{border-bottom-color:#C9A8FF;opacity:1}
.p-tri polygon,.p-bar:nth-child(2n) .p-tri polygon,.r-bar:nth-child(2) .p-tri polygon{fill:#C9A8FF!important;filter:none!important}
.rv-mk polygon{fill:#C9A8FF}

/* Work page Challenge / What I did / Result: V4 labels with fading lilac lines + A. B. C. (owner 2026-10-06; replaces the liquid 1-2-3 timeline) */
.case-v4{display:grid;gap:var(--sp-4);margin:0;text-align:left}
.cv4{display:grid;gap:var(--sp-2);padding-bottom:var(--sp-4);border-bottom:1px solid rgba(255,255,255,.08)}
.cv4:last-child{border-bottom:0;padding-bottom:0}
.cv4-k{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-display);font-weight:400;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#C9A8FF}
.cv4-k::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,168,255,.4),transparent)}
.cv4-l{color:#fff}
.cv4 p{margin:0;color:#d9d0ea}
.cv4-res p{color:#fff;font-weight:500}
.cv4-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cv4-list li{display:flex;gap:10px;align-items:baseline;color:#d9d0ea}
.cv4-list li::before{content:"";flex:none;width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (min-width:761px){.case-v4{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}.cv4{border-bottom:0;padding-bottom:0}}

/* Work page chapter rail on phones (owner 2026-10-06): triangles instead of circles (top: solid lilac pointing down, middle on the CHAPTER 1 line; bottom: gold pointing up, its base on the CHAPTER 2 line) and the line is a liquid that falls with gravity as you scroll (script end of main.js). Gap around the photo deck evened out. */
@media (max-width:760px){
  .k4-dot{left:.5px;width:18px;height:15px;border:0;border-radius:0;background:#C9A8FF;clip-path:polygon(0 0,100% 0,50% 100%)}
  .k4-last .k4-dot{background:#C9A96A;clip-path:polygon(50% 0,100% 100%,0 100%)}
  .k4-js::before,.k4-js .k4-dot,.k4-js~* .k4-dot,#mirabell-aesthetics:has(.k4-js)~#mirabell-academy .k4-dot{display:none}
  main .k4-ch.k4-ch .k4-tube{position:absolute;left:.5px;width:18px;margin:0;overflow:visible;pointer-events:none;z-index:1}
  main .k4-ch.k4-ch .deck{margin-top:40px;margin-bottom:22px}
  main .k4-ch.k4-ch .deck+.chips-after{margin-top:0}
}
@media (min-width:761px){main .k4-ch.k4-ch .case-v4+.deck{margin-top:48px}}
/* Work page "CHAPTER 2 · THE ACADEMY" label in the gold gradient of the rail's bottom triangle, still (owner 2026-10-06) */
.k4-last .chn{background:linear-gradient(90deg,#B8975A,#F6EBCB 55%,#C9A96A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#C9A96A;justify-self:start;width:fit-content}
/* Work page: "C. Result" label and its line in white; Mirabell tags use the one card glass like the FAQ (owner 2026-10-06) */
.cv4-res .cv4-k{color:#fff}
.cv4-res .cv4-k::after{background:linear-gradient(90deg,rgba(255,255,255,.55),transparent)}
.k4-ch .chip:not(.chip-link){background:var(--one-bg)!important;border:var(--one-edge)!important;box-shadow:none!important;color:#fff}
/* About "Why me?" client links: white text and white underline (owner 2026-10-06) */
[aria-labelledby="story-title"] .stack p a{color:#fff;text-decoration-color:#fff}
/* Work page Other clients: tags on the same line as the client name, right after it (owner 2026-10-07) */
main .oc-t4 .oc-line{justify-content:flex-start;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
main .oc-t4 .oc-line .chips{margin:0!important;padding:0;justify-content:flex-start;align-items:baseline}
main .oc-t4 .oc-line .chip{margin:0!important;line-height:1.2}
/* Home reviews: client logos in the round badge (owner 2026-10-07); Liv Lashes keeps its initials until the logo arrives */
.rv-av.rv-logo{background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.rv-av.rv-logo img{display:block;width:100%;height:100%;object-fit:cover}
/* Home reviews: client name links to their website (owner 2026-10-07) */
.rv-who .rv-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(201,168,255,.6);text-underline-offset:3px}
.rv-who .rv-link:hover{text-decoration-color:#C9A8FF}
/* Offer tab number: G5 white shine sweeping across the peach, same timing as the triangle (owner 2026-10-07) */
@keyframes fco-shine{from{background-position:100% 0}to{background-position:0 0}}
.fco-trigger .fco-left b{background:linear-gradient(120deg,#ffa77e 0%,#ffa77e 40%,#fff 50%,#ffa77e 60%,#ffa77e 100%) 100% 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:fco-shine 3.2s linear infinite}
@media (prefers-reduced-motion:reduce){.fco-trigger .fco-left b{animation:none;background-position:100% 0}}
/* WhatsApp float: the same slanted moving gradient as Start your project (owner 2026-10-07) */
.wa-float{background:var(--diag);background-size:300% 300%;animation:diag 10s linear infinite alternate}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}}
/* Offer tab number: still peach gradient, no shine (owner 2026-10-07) */
.fco-trigger .fco-left b{background:linear-gradient(160deg,#ff8a5c,#ffa77e 55%,#ffd2a8);-webkit-background-clip:text;background-clip:text;animation:none}
/* W1 Work menu (owner 2026-10-07): phone = same slide-in as Services, name in white Techna with a short grey line under it and a lilac triangle; desktop = small dropdown under Work */
.mobile-menu .m-work a:not(.btn){display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}
.mobile-menu .m-work a>span{display:block;width:auto}
.mobile-menu .m-work .m-sub{display:block;margin-top:2px;color:var(--muted);font-size:.8rem;font-weight:400;white-space:normal}
.mobile-menu .m-work a::after{content:"";flex:none;width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.has-work{position:relative}.work-mega{left:50%}
.work-mega__box{width:300px;padding:10px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),#1d1433;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.work-mega .svc-row{display:block;padding:11px 14px}
.work-mega .svc-row b{display:block;color:#fff}
.work-mega .svc-row span{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-note)}
/* Service pages F3d (owner 2026-10-07): hero, "How many sound like you?" self-check, proof, what you get, prices, FAQ, moving-edge panel */
.sp-narrow{max-width:720px;margin-inline:auto;text-align:left}
.sp-hero .kicker{margin:0}.sp-hero h1{margin:12px 0 0}.sp-hero .lead{margin:18px 0 0;max-width:none}
.sp-narrow>h2{margin:12px 0 0}.sp-narrow>.kicker{margin:0}
.sp-list{display:grid;gap:8px;margin-top:16px}
.sp-chk{-webkit-appearance:none;appearance:none;display:flex;width:100%;gap:12px;align-items:flex-start;text-align:left;padding:14px 16px;border-radius:16px;background:var(--one-bg);border:var(--one-edge);color:#fff;font:inherit;font-size:1rem;line-height:1.45;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.sp-chk[aria-pressed=true]{border-color:rgba(201,168,255,.6);box-shadow:0 0 22px -8px rgba(123,92,255,.6)}
.sp-bx{position:relative;flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid #C9A8FF;transition:background-color .2s}
.sp-chk[aria-pressed=true] .sp-bx{background:#C9A8FF}
.sp-chk[aria-pressed=true] .sp-bx::after{content:"";position:absolute;inset:0;margin:auto;width:11px;height:8px;background:#140E22;clip-path:polygon(0 50%,35% 100%,100% 0,85% 0,35% 70%,15% 40%)}
.sp-out{margin:12px 0 0;color:#fff;font-weight:500}
.sp-fix{margin:12px 0 0;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(123,92,255,.55),rgba(201,168,255,.35));border-top:1px solid rgba(201,168,255,.35);color:#fff}
.sp-ready .sp-fix{display:none}.sp-ready .sp-fix.on{display:block;animation:spIn .35s cubic-bezier(.22,.8,.24,1)}
@keyframes spIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.sp-img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px;background:#fff}
.sp-grid-web .sp-img{aspect-ratio:16/10}.sp-grid-web .sp-img:first-child{grid-column:span 2}
.sp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0;color:#d9d0ea}
.sp-tags i{width:7px;height:7px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.sp-more{margin:12px 0 0}.sp-more a{color:#fff;text-decoration:underline;text-decoration-color:rgba(201,168,255,.6);text-underline-offset:3px}
.sp-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.sp-fact{padding:14px;border-radius:16px;background:var(--one-bg);border:var(--one-edge)}
.sp-fact b{display:block;font-family:var(--font-display);font-size:var(--fs-h3);background:linear-gradient(120deg,#7B5CFF,#C9A8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-fact span{display:block;margin-top:4px;font-size:var(--fs-small);color:#d9d0ea;line-height:1.4}
.sp-prices{margin-top:16px;padding:4px 18px;border-radius:20px;background:var(--one-bg);border:var(--one-edge)}
.sp-price{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}.sp-price:last-child{border-bottom:0}
.sp-price b{color:#fff;font-weight:600}.sp-price small{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-note);font-weight:400}
.sp-price>span{color:#C9A8FF;white-space:nowrap}
.sp-actions{margin-top:24px}
@media (min-width:761px){.sp-grid-4{grid-template-columns:repeat(4,1fr)}.sp-facts{grid-template-columns:repeat(4,1fr)}}
@media (prefers-reduced-motion:reduce){.sp-ready .sp-fix.on{animation:none}}
.sp-narrow .kicker,.sp-narrow h1,.sp-narrow h2,.sp-narrow .lead,.sp-narrow .section-head{text-align:left;margin-left:0}
/* the kept sections (What's included, ways to work, FAQ) follow the same single left column on service pages */
.sp-check~section>.wrap{max-width:720px;margin-inline:auto}
.sp-check~section .section-head,.sp-check~section .section-head .kicker,.sp-check~section .section-head h2{text-align:left;margin-left:0;max-width:none}
.sp-check~section .grid-3,.sp-check~section .faq-grid{grid-template-columns:1fr}
.sp-narrow .kicker,.sp-check~section .section-head .kicker{justify-content:flex-start}
/* each ticked problem gets its own fix line in the strip (owner 2026-10-07) */
.sp-fixes{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.sp-fixes li{display:flex;gap:10px;align-items:baseline;line-height:1.45}
.sp-fixes li+li{padding-top:6px;border-top:1px solid rgba(255,255,255,.18)}
.sp-fixes li[hidden]{display:none}
/* Service pages What's included: I7 result strip + I2 icon tiles, new text (owner 2026-10-07) */
.inc-list{display:grid;gap:10px;margin-top:16px}
.inc-card{position:relative;overflow:hidden;padding:18px 18px 0;border-radius:20px;background:var(--one-bg);border:var(--one-edge);text-align:left}
.inc-hd{display:flex;align-items:center;gap:12px}
.inc-ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:rgba(201,168,255,.14);color:#C9A8FF}
.inc-ico svg{width:22px;height:22px}
.inc-card h3{margin:0;font-size:var(--fs-h3);color:#fff}
.inc-card>p{margin:8px 0 0;color:#d9d0ea}
.inc-tl{margin:8px 0 0;padding:0;list-style:none}
.inc-tl li{display:flex;gap:10px;align-items:baseline;padding:7px 0;color:#fff}
.inc-tl li::before{content:"";flex:none;width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.inc-card>p.inc-out{margin:16px -18px 0;padding:12px 18px;background:linear-gradient(135deg,rgba(123,92,255,.55),rgba(201,168,255,.35));border-top:1px solid rgba(201,168,255,.35);color:#fff;font-weight:500}
.inc-sum{margin:16px 0 0;color:#fff;font-weight:500;text-align:left}
/* What's included as a C3 deck (owner 2026-10-07): the cards stack like the reviews, the back ones show icon + title on a tab, Back / Next with a progress line; tinted top like the review cards */
.inc-card{padding:0}
.inc-tab{display:none}
.inc-hd{padding:18px;background:linear-gradient(135deg,rgba(155,123,255,.26),rgba(201,168,255,.08) 60%,rgba(201,168,255,.02));border-bottom:1px solid rgba(214,196,255,.14)}
.inc-body>p{margin:14px 18px 0;color:#d9d0ea}
.inc-body>.inc-tl{margin:8px 18px 0}
.inc-body>p.inc-out{margin:16px 0 0;padding:12px 18px;background:linear-gradient(135deg,rgba(123,92,255,.55),rgba(201,168,255,.35));border-top:1px solid rgba(201,168,255,.35);color:#fff;font-weight:500}
.inc-list.is-deck{display:block;position:relative;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.inc-list.is-deck:focus-visible{outline:2px solid var(--lavender);outline-offset:6px;border-radius:24px}
.inc-list.is-deck .inc-card{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#2a1f48,#1E1432);border:1px solid rgba(214,196,255,.18);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s;box-shadow:0 -10px 24px -16px rgba(0,0,0,.9)}
.inc-list.is-deck .inc-body{height:100%;display:flex;flex-direction:column;transition:opacity .35s}
.inc-list.is-deck .inc-body>.inc-tl{flex:1}
.inc-list.is-deck .inc-body>p.inc-out{margin-top:auto}
.inc-list.is-deck .inc-body>.inc-tl+p.inc-out,.inc-list.is-deck .inc-body>p:not(.inc-out)+p.inc-out{margin-top:16px}
.inc-list.is-deck .inc-tab{position:absolute;left:18px;right:18px;top:0;height:44px;display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:var(--fs-small);color:#C9A8FF;opacity:0;transition:opacity .35s;pointer-events:none}
.inc-mini{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(201,168,255,.14)}.inc-mini svg{width:16px;height:16px}
.inc-list.is-deck .inc-card.is-back .inc-tab{opacity:1}
.inc-list.is-deck .inc-card.is-back .inc-body{opacity:0}
.inc-nav[hidden]{display:none}
.inc-prog{height:2px;margin-top:16px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.inc-prog i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7B5CFF,#C9A8FF);transition:width .5s}
.inc-btns{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.inc-btns button{-webkit-appearance:none;appearance:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;color:#fff;font:inherit;font-family:var(--font-display);cursor:pointer}
.inc-btns button::after{content:"";width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.inc-prev{flex-direction:row-reverse}.inc-prev::after{transform:scaleX(-1)}
.inc-count{color:var(--muted);font-size:var(--fs-note)}
@media (prefers-reduced-motion:reduce){.inc-list.is-deck .inc-card,.inc-list.is-deck .inc-tab,.inc-list.is-deck .inc-body,.inc-prog i{transition:none}}
/* Service pages A4 (owner 2026-10-07): FAQ as plain rows with thin lines (no boxes), prices live inside the closing panel next to the buttons */
main .sp-check~section .faq-list{gap:0;border-top:1px solid rgba(255,255,255,.12)}
main .sp-check~section .faq-item,main .sp-check~section .faq-item:not([open]),main .sp-check~section .faq-item[open]{margin:0;background:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;border-radius:0!important;box-shadow:none!important}
main .sp-check~section .faq-item::before,main .sp-check~section .faq-item::after{display:none!important}
main .sp-check~section .faq-item summary{padding-left:2px;padding-right:2px}
main .sp-check~section .faq-item .faq-a{padding-left:2px;padding-right:2px}
.cta-tag{display:inline-block;margin:18px 0 0;padding:5px 12px;border-radius:999px;border:1px solid rgba(201,168,255,.4);color:#fff;font-size:var(--fs-note)}
.cta-prices{width:100%;justify-self:stretch;align-self:stretch;margin:12px 0 8px;text-align:left;border-top:1px solid rgba(255,255,255,.1)}
.cta-prices .sp-price{padding:12px 0}
.cta-prices .sp-price b,.cta-prices .sp-price small{text-align:left}

/* Service pages quick check hint H2s (owner 2026-10-07, _preview-check-boxes.html): a small solid lilac triangle drops into each empty box, bounces and fades, one box at a time (never two at once), then a short rest; stops after the first tick */
.sp-ready:not(.sp-used) .sp-chk[aria-pressed=false] .sp-bx::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:7px;margin:-3.5px 0 0 -4px;background:#C9A8FF;clip-path:polygon(0 0,100% 0,50% 100%);opacity:0;animation:spHop 4.4s var(--hd,0s) infinite both}
.sp-check .sp-bx{overflow:hidden}
.sp-chk:nth-child(2){--hd:.9s}.sp-chk:nth-child(3){--hd:1.8s}.sp-chk:nth-child(4){--hd:2.7s}
@keyframes spHop{0%{transform:translateY(-14px);opacity:0}5%{transform:translateY(1px);opacity:1}7%{transform:translateY(-3px)}9%{transform:translateY(0);opacity:1}15%{opacity:1;transform:translateY(0)}19.5%,100%{opacity:0;transform:translateY(0) scale(.6)}}
@media (prefers-reduced-motion:reduce){.sp-ready .sp-bx::before{display:none}}
/* Service pages: subtle lilac divider between the quick check and the proof (owner 2026-10-07): thickest in the middle, tapering to nothing at both ends */
main .sp-check,main .sp-check+section,main .has-div{position:relative}
/* same line under the proof too (owner 2026-10-07) */
/* .has-div: the same line at the bottom of any section where the topic changes (owner 2026-10-07) */
main .sp-check::after,main .sp-check+section::after,main .has-div::after{content:"";position:absolute;left:50%;bottom:0;width:min(84%,600px);height:3px;transform:translate(-50%,50%);background:linear-gradient(90deg,rgba(123,92,255,0),#7B5CFF 25%,#C9A8FF 50%,#7B5CFF 75%,rgba(123,92,255,0));clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%);opacity:.8;pointer-events:none}

/* Graphic design gallery H1 (owner 2026-10-08): glass groups with + (Logos open first); Logos = square tiles, the rest = small mosaic; tap a photo for the full-screen viewer */
.gal{margin-top:16px}
.gal-grp{border-radius:18px;background:var(--one-bg);border:var(--one-edge);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.gal-grp+.gal-grp{margin-top:12px}
.gal-hd{width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;background:none;border:0;color:#fff;cursor:pointer;text-align:left;font:inherit}
.gal-hd b{flex:1;font-family:"Techna Sans",sans-serif;font-size:var(--fs-h3);font-weight:400}
.gal-hd small{color:var(--muted);font-size:var(--fs-note)}
.gal-hd i{position:relative;width:22px;height:22px;flex:none}
.gal-hd i::before,.gal-hd i::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;border-radius:2px;background:#fff;transition:transform .3s}
.gal-hd i::after{transform:rotate(90deg)}
.gal-grp.is-open{border-color:rgba(201,168,255,.55);box-shadow:0 0 22px rgba(123,92,255,.25)}
.gal-grp.is-open .gal-hd i::before{transform:rotate(45deg)}.gal-grp.is-open .gal-hd i::after{transform:rotate(135deg)}
.gal-bd{display:grid;gap:8px;padding:0 12px 12px}
.gal-js .gal-grp:not(.is-open) .gal-bd{display:none}
.gal-js .gal-grp.is-open .gal-bd{animation:galIn .35s ease both}
@keyframes galIn{from{opacity:0;transform:translateY(8px)}}
.gal-ph{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in}
.gal-ph img{display:block;width:100%;height:100%;object-fit:cover}
.gal-sq{grid-template-columns:repeat(3,1fr)}
.gal-sq .gal-ph{aspect-ratio:1}.gal-sq .gal-ph img{object-fit:contain;padding:8%}
.gal-ph.gal-cream{background:#EAE2CC}.gal-ph.gal-dark{background:#0d0a14}
.gal-mo{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;grid-auto-flow:dense}
.gal-mo .gal-ph:first-child{grid-column:span 2;grid-row:span 2}.gal-mo .gal-ph:last-child:nth-child(even){grid-column:span 2}
@media (min-width:761px){.gal-sq{grid-template-columns:repeat(6,1fr)}.gal-mo{grid-template-columns:repeat(4,1fr);grid-auto-rows:150px}.gal-mo .gal-ph:last-child:nth-child(even){grid-column:auto}.gal-mo .gal-ph:nth-child(2):last-child{grid-column:span 2;grid-row:span 2}.gal-mo .gal-ph:first-child:nth-last-child(3)~.gal-ph{grid-row:span 2}.gal-mo .gal-ph:nth-child(4):last-child{grid-column:span 2}}
.gal-lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 16px 24px;background:rgba(12,8,22,.96)}
.gal-lb[hidden]{display:none}
.gal-lb img{max-width:100%;max-height:72vh;width:auto;height:auto;border-radius:12px;background:#fff}
.gal-lb p{margin:14px 0 0;color:#d9d0ea;font-size:var(--fs-small);text-align:center}
.gal-lb .gal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;background:none;border:0;cursor:pointer}
.gal-lb .gal-x::before,.gal-lb .gal-x::after{content:"";position:absolute;left:12px;right:12px;top:21px;height:2px;background:#fff;transform:rotate(45deg)}.gal-lb .gal-x::after{transform:rotate(-45deg)}
.gal-lb nav{display:flex;gap:40px;margin-top:16px}
.gal-lb nav button{display:flex;align-items:center;gap:8px;padding:8px;background:none;border:0;color:#fff;font:inherit;cursor:pointer}
.gal-lb nav i{width:7px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.gal-lb nav button:first-child i{transform:scaleX(-1)}
html.gal-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.gal-js .gal-grp.is-open .gal-bd{animation:none}}

/* What's included deck entry E3 "fan out" (owner 2026-10-08, from _preview-inc-entry.html): plays once the first time the cards come into view: the stack rises in, fans open for a moment so you see there are 3 or 4 cards, then closes; separate translate / rotate properties so it never fights the deck script's transform */
.inc-list.inc-wait .inc-card{opacity:0}
.inc-list.inc-go{animation:incUp .45s cubic-bezier(.22,.8,.24,1) both}
.inc-list.inc-go .inc-card{animation:incFan 1.1s .45s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 100%}
@keyframes incUp{from{translate:0 40px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes incFan{0%{rotate:0deg;translate:0 0}45%,60%{rotate:calc(var(--i) * -7deg);translate:calc(var(--i) * -16px) 0}100%{rotate:0deg;translate:0 0}}
@media (prefers-reduced-motion:reduce){.inc-list.inc-wait .inc-card{opacity:1}.inc-list.inc-go,.inc-list.inc-go .inc-card{animation:none}}

/* Web design proof (owner 2026-10-08): client sites as screenshots, never live (fast, no client cookies). Phones up to 960px: L4 phone deck; desktop 961px+: one browser window with a tab per client showing the DESKTOP site. The page always scrolls normally: the screen inside only scrolls by finger / wheel after a tap or click ("explore", with a Done button); otherwise it plays one slow trip down and back up, then rests */
.wl{position:relative;display:flex;gap:16px;overflow-x:auto;margin-top:24px;padding-bottom:8px;scrollbar-width:none}
.wl-ph{position:relative;flex:none;width:min(210px,56vw);aspect-ratio:9/19;margin:0;padding:8px;border-radius:34px;background:linear-gradient(160deg,#3a2c5a,#140e22 60%);box-shadow:0 0 0 1px rgba(201,168,255,.35),0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(123,92,255,.18)}
.wl-ph::before{content:"";position:absolute;top:14px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:10px;background:#0b0812;z-index:2}
.wl-bar{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 18px 0 22px;border-radius:26px 26px 0 0;background:#0b0812;color:#fff;font-size:10px;font-weight:600}
.wl-bar svg{display:block;width:34px;height:auto}
.wl-scr,.wb-scr{overflow:hidden;background:#fff;scrollbar-width:none;overscroll-behavior:contain}
.wl-scr{height:calc(100% - 30px);border-radius:0 0 26px 26px}
.wl-scr::-webkit-scrollbar,.wb-scr::-webkit-scrollbar{display:none}
.wl-scr img,.wb-scr img{display:block;width:100%;height:auto}
.wl-fc{margin-top:10px;font-size:var(--fs-note);color:var(--muted);text-align:center}.wl-fc a{color:#fff}
.wl-done{display:none;position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%);min-height:36px;padding:0 16px;border:0;border-radius:999px;background:rgba(20,14,34,.88);box-shadow:0 0 0 1px rgba(201,168,255,.5);color:#fff;font:inherit;font-family:var(--font-display);font-size:var(--fs-note);cursor:pointer}
.is-explore>.wl-done,.wb-view.is-explore>.wl-done{display:block}
.is-explore .wl-scr,.wb-view.is-explore .wb-scr{overflow:auto;touch-action:pan-y}
.wl-ph.is-explore,.wb-view.is-explore{box-shadow:0 0 0 2px #C9A8FF,0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(123,92,255,.4)}
.wl-js{display:block;overflow:visible;padding:0;height:calc(min(210px,56vw) * 19 / 9 + 24px)}
.wl-js .wl-ph{position:absolute;left:50%;top:0;cursor:pointer;transition:transform .55s cubic-bezier(.22,.8,.24,1),filter .55s}
.wl-js .wl-fc{display:none}
.wb{display:none;margin-top:24px;border-radius:14px;overflow:hidden;background:#140E22;box-shadow:0 0 0 1px rgba(201,168,255,.35),0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(123,92,255,.18)}
.wb-top{display:flex;align-items:flex-end;gap:14px;padding:10px 12px 0;background:#0b0812}
.wb-dots{display:flex;gap:6px;padding-bottom:12px}.wb-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.wb-tabs{display:flex;gap:4px;min-width:0}
.wb-tab{display:flex;align-items:center;gap:8px;min-width:0;max-width:220px;padding:8px 14px;border:0;border-radius:10px 10px 0 0;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-note);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.wb-tab img{width:16px;height:16px;border-radius:50%;flex:none;object-fit:cover}
.wb-tab.is-on{background:#fff;color:#140E22}
.wb-view{position:relative;height:min(460px,52vh);background:#fff;cursor:pointer}
.wb-scr{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.wb-scr.is-on{opacity:1;visibility:visible}
.wb-view.is-explore{cursor:default}
.wl-cap{margin-top:16px;text-align:center}
.wl-name{margin:0;font-size:var(--fs-h3)}
.wl-place{margin:8px 0 0;color:var(--muted);font-size:var(--fs-note)}
.wl-visit{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding-bottom:2px;color:#fff;font-size:var(--fs-small);background:linear-gradient(90deg,#7B5CFF,#C9A8FF) 0 100%/100% 1px no-repeat}
.wl-visit::after{content:"";width:7px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.wl-hint{margin:12px 0 0;text-align:center;color:var(--muted);font-size:var(--fs-note)}
.wl-hd{display:none}
@media (min-width:961px){.wl,.wl-nav{display:none!important}.wb{display:block}.wl-hp{display:none}.wl-hd{display:inline}}
@media (prefers-reduced-motion:reduce){.wl-js .wl-ph,.wb-scr{transition:none}}

/* Web design proof text (owner 2026-10-08, from _preview-web-text-compare.html): T2 logo tabs + name / Visit site row on phones, T1 tags line with a thin line above; "See selected work" removed */
.wl-tabs{display:flex;gap:8px;margin-top:24px}
.wl-tabs[hidden]{display:none}
.wl-tab{-webkit-appearance:none;appearance:none;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);color:var(--muted);font:500 12px var(--font-display);cursor:pointer;transition:background .3s,border-color .3s,box-shadow .3s,color .3s}
.wl-tab img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#fff;opacity:.55;transition:opacity .3s}
.wl-tab.is-on{background:var(--one-bg);border-color:#C9A8FF;color:#fff;box-shadow:0 0 18px rgba(201,168,255,.22)}
.wl-tab.is-on img{opacity:1}
.wl-tab:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}
.wl-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:16px;text-align:left}
.wl-cap[hidden]{display:none}
.wl-place{margin:4px 0 0}
.wl-visit{margin-top:0;white-space:nowrap}
.wl-hint{text-align:left}
.wl-tags{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-note)}
.wl-tags i{width:6px;height:6px}
@media (min-width:961px){.wl-tabs{display:none!important}}
/* Service pages (owner 2026-10-08): the divider under the What's included deck sits closer to Back / Next (the 44px tap row adds about 12px of its own), and the FAQ comes up under it, so the gap above and below the line looks the same */
main #included.has-div{padding-bottom:var(--sp-5)}
main #included.has-div+.section{padding-top:var(--sp-6)}
/* Graphic design gallery P1 "peek" (owner 2026-10-09, from _preview-gd-open.html): each group title has a line saying what is inside, and closed groups show 3 tiny photos (+N) built by the script from the group's own photos, so people want to open them */
.gal-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.gal-tt b{flex:none}
.gal-tt small{margin-top:4px;line-height:1.35}
.gal-ct{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gal-pk{display:flex;flex:none;padding-left:10px}
.gal-pk img{width:34px;height:34px;margin-left:-10px;border-radius:8px;object-fit:cover;background:#fff;border:2px solid #241a3a}
.gal-pk em{display:grid;place-items:center;width:34px;height:34px;margin-left:-10px;border-radius:8px;background:#2a1f48;border:2px solid #241a3a;color:#fff;font:600 11px "Techna Sans",sans-serif;font-style:normal}
.gal-grp.is-open .gal-pk{display:none}
/* Header is the same solid H6 colour from the top of the page, not only after scrolling (owner 2026-10-10), every page */
.site-header .header-bar{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),#2A1D45!important;border-bottom:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important}
/* Home Start your project under Extras: S1 "rises with a tilt like the Extras tile" (owner 2026-10-10, _preview-syp-entry-2.html), every screen; replaces the E5 typing dots. */
@media (prefers-reduced-motion:no-preference){
  .js .home .gb-cta.reveal.is-in .syp-dots{display:none}
  .js .home .gb-cta.reveal.is-in .btn.syp{animation:sypRise 1.2s cubic-bezier(.2,.8,.2,1) .55s both}
}
@keyframes sypRise{from{opacity:0;transform:translateY(70px) rotate(2deg)}to{opacity:1;transform:none}}
/* Home reviews (owner 2026-10-10): the services I did for each client stand out in white inside the review text */
.rv-q .rv-s{color:#fff;font-weight:500}
/* Graphic design gallery: Websites group (owner 2026-10-10): 3 phone screenshots, each a link to the live client site in a new tab */
.gal-wb{grid-template-columns:repeat(3,1fr)}
.gal-web{aspect-ratio:9/19;cursor:pointer;background:#0b0812;text-decoration:none}
.gal-web img{object-fit:cover;object-position:top}
.gal-wn{position:absolute;left:6px;right:6px;bottom:6px;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 4px;border-radius:999px;background:rgba(20,14,34,.85);color:#fff;font:600 12px var(--font-display)}
.gal-wn i{width:7px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (min-width:761px){.gal-wb{grid-template-columns:repeat(3,minmax(0,200px));justify-content:center}}
/* Contact (owner 2026-10-10) */
/* step tiles flip 0.2 s slower */
.ct-tl li{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .7s}
/* form: "Anything I should know?" label in white */
.cf-area label{color:#fff}
/* C1 "line" button (from _preview-bc-button.html): see-through, a thin moving gradient line as the edge, white words.
   Reusable: add .btn-line to any .btn. */
.btn.btn-line{background:transparent;color:#fff;border:0;box-shadow:none}
.btn.btn-line::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:var(--diag);background-size:300% 300%;animation:diag 10s linear infinite alternate;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.btn.btn-line:hover{background:rgba(201,168,255,.08)}
/* brand check: no "Back to you" line, button closer under the list, Instagram line centred, no underline */
.bc-list .bc-act{margin-top:var(--sp-4)}
.bc-list > .bc-ig,.bc-list .bc-ig{text-align:center;margin-top:var(--sp-3)}
.bc-ig a{text-decoration:none;color:#fff}
/* the button opens out from the middle after the 4 list triangles have landed */
@media (prefers-reduced-motion:no-preference){
  .bc-checks.bc-wait ~ .bc-act .btn-line{opacity:0}
  .bc-checks.bc-go ~ .bc-act .btn-line{animation:bcLine .9s cubic-bezier(.2,.8,.2,1) 1.5s both}
}
@keyframes bcLine{from{opacity:0;clip-path:inset(0 50% 0 50% round 999px)}to{opacity:1;clip-path:inset(0 0 0 0 round 999px)}}
/* Contact brand check list in 2 columns (owner 2026-10-10, D1 from _preview-bc-rows.html, every screen):
   left column logo + website, right column Instagram + prices; the triangles sit on the OUTSIDE edges pointing in.
   Entry: logo slides in from the left, Instagram from the right, website from the left, prices from the right. */
.bc-checks{grid-template-columns:1fr 1fr;gap:16px 24px}
.bc-checks li{line-height:1.3}
.bc-checks li:nth-child(even){padding-left:0;padding-right:32px;text-align:right}
.bc-checks li:nth-child(even)::before{left:auto;right:5px;scale:-1 1}
.bc-checks li:nth-child(even)::after{left:auto;right:3px}
@media (prefers-reduced-motion:no-preference){
  .bc-checks.bc-go li::before{animation:bc-lev 3.2s ease-in-out infinite}
  .bc-checks.bc-go li:nth-child(odd){animation:bcFromL .9s cubic-bezier(.2,.8,.2,1) both}
  .bc-checks.bc-go li:nth-child(even){animation:bcFromR .9s cubic-bezier(.2,.8,.2,1) both}
  .bc-checks.bc-go li:nth-child(1){animation-delay:.2s}
  .bc-checks.bc-go li:nth-child(2){animation-delay:.55s}
  .bc-checks.bc-go li:nth-child(3){animation-delay:.9s}
  .bc-checks.bc-go li:nth-child(4){animation-delay:1.25s}
  .bc-checks.bc-go ~ .bc-act .btn-line{animation-delay:2.1s}
}
@keyframes bcFromL{from{opacity:0;transform:translateX(-60vw)}to{opacity:1;transform:none}}
@keyframes bcFromR{from{opacity:0;transform:translateX(60vw)}to{opacity:1;transform:none}}
/* Contact brand check list R1 "zigzag" (owner 2026-10-10, _preview-bc-rows-2.html): 4 rows, left / right / left / right,
   every item on one line, rows tight together (8px), triangles on the outside edges pointing in; same slide-in entry. */
.bc-checks{grid-template-columns:1fr;gap:var(--sp-2)}
.bc-checks li{white-space:nowrap}
/* Contact (owner 2026-10-10): "Prefer Instagram? DM BOLD" fades up 0.3 s after Get my free brand check starts opening */
@media (prefers-reduced-motion:no-preference){
  .bc-checks.bc-wait ~ .bc-ig{opacity:0}
  .bc-checks.bc-go ~ .bc-ig{animation:bcIg .4s ease 2.4s both}
}
@keyframes bcIg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* About (2026-10-10): the comet / watch layer scrolls with the page between frames (main.js moves it to the scroll position), so it never shakes */
.pawn-canvas{inset:auto;position:absolute;top:0;left:0;width:100%;height:calc(100vh + 120px);will-change:transform}
/* About "How I work": a little more space between the words (Techna Sans spaces are narrow) */
#principles-title{word-spacing:.12em}
/* About "Your turn." answers Q2 (owner 2026-10-10, _preview-chat-buttons.html): 3 answers in a row, then a wide "Help me choose" (was "Not sure yet") */
.wa-chat-qr{display:grid;grid-template-columns:repeat(3,auto);justify-content:end}
.wa-chat-qr a{text-align:center}
.wa-chat-qr a.wa-wide{grid-column:1/-1}
.pawn-wrap{position:absolute;top:0;left:0;width:100%;height:0;overflow:hidden;pointer-events:none;z-index:40}
.pawn-wrap .pawn-canvas{z-index:auto}
/* Service pages quick check hint (owner 2026-10-10): the little triangle dropping into the boxes is white, not lilac */
.sp-ready:not(.sp-used) .sp-chk[aria-pressed=false] .sp-bx::before{background:#fff}
/* Graphic design gallery, Logos (owner 2026-10-10): the 5 real logo files (800x800, white, their own margin built in), then a 6th tile
   "Your logo could be next" that opens WhatsApp */
.gal-sq .gal-ph.gal-logo img{object-fit:cover;padding:0}
.gal-next{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1;border-radius:12px;text-decoration:none;text-align:center;padding:8px;
  border:1.5px dashed rgba(201,168,255,.55);background:rgba(201,168,255,.06);color:#fff;transition:background .25s}
.gal-next:hover{background:rgba(201,168,255,.12)}
.gal-nx-t{font:600 var(--fs-small) var(--font-display);line-height:1.2}
.gal-nx-s{font-size:12px;color:#C9A8FF;line-height:1.2}
.gal-next i{width:8px;height:9px;margin-top:4px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
/* Graphic design gallery, Websites W4 (owner 2026-10-10, _preview-gal-web.html): each client = laptop (desktop site) + phone in front,
   one card at a time, swipe sideways (the next card peeks in), dots + arrows, auto slide every 4 s until the first touch */
.gal-wb.gw4{display:block;padding:0 0 12px}
.gw4-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 12px 4px;scrollbar-width:none;overscroll-behavior-x:contain}
.gw4-strip::-webkit-scrollbar{display:none}
.gal-ph.gw4-card{flex:none;width:86%;height:auto;scroll-snap-align:center;background:none;border-radius:0;overflow:visible;text-decoration:none;cursor:pointer;color:#fff}
.gw4-combo{position:relative;display:block;padding-bottom:6%}
.gw4-lap{display:block;width:88%}
.gw4-lid{display:block;aspect-ratio:16/10;padding:6px 6px 8px;border-radius:10px 10px 2px 2px;background:#1b1430;box-shadow:0 0 0 1px rgba(201,168,255,.3)}
.gw4-lid>span{display:block;width:100%;height:100%;overflow:hidden;border-radius:3px;background:#fff}
.gw4-lid img{display:block;width:100%;height:auto;object-fit:initial}
.gw4-base{display:block;height:7px;margin:0 -6%;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#3a2c5a,#1b1430)}
.gw4-ph{position:absolute;right:0;bottom:0;width:26%;aspect-ratio:9/19;padding:3px;border-radius:14px;background:linear-gradient(160deg,#4a3a6e,#140e22 55%,#2a1f48);box-shadow:0 0 0 1px rgba(201,168,255,.35),0 10px 24px rgba(0,0,0,.55)}
.gw4-ph>span{display:block;width:100%;height:100%;overflow:hidden;border-radius:11px;background:#0b0812}
.gw4-ph img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.gw4-nm{display:flex;align-items:center;gap:6px;margin-top:10px;font:600 var(--fs-small) var(--font-display)}
.gw4-nm i,.gw4-nav button::after{width:7px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.gw4-pl{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-note)}
.gw4-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
.gw4-nav[hidden]{display:none}
.gw4-nav button{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);cursor:pointer}
.gw4-nav button::after{content:""}
.gw4-prev::after{transform:scaleX(-1)}
.gw4-dots{display:flex;gap:6px}.gw4-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.25);transition:width .3s,background .3s}.gw4-dots i.on{width:18px;background:#C9A8FF}
@media (min-width:761px){.gal-ph.gw4-card{width:62%}}
/* W4 (owner 2026-10-10): Back / Next arrows sit on the left and right edges, level with the middle of the laptop; the dots stay underneath */
.gw4{position:relative}
.gw4-nav .gw4-prev,.gw4-nav .gw4-next{position:absolute;top:var(--gw4-mid,32%);transform:translateY(-50%);z-index:2;width:40px;height:40px;background:rgba(20,14,34,.82);border-color:rgba(201,168,255,.4)}
.gw4-nav .gw4-prev{left:4px}.gw4-nav .gw4-next{right:4px}
.gw4-nav{margin-top:12px}
/* Graphic design gallery (owner 2026-10-10): groups with more than 4 pieces show 4 at a time in a neat 2 x 2 grid,
   with Back / "1 of 4" / Next underneath (swipe works too); tapping a photo still opens the full-screen viewer */
.gal-mo.gal-paged{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
.gal-mo.gal-paged .gal-ph{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3;height:auto}
.gal-mo.gal-paged .gal-ph.gal-off{display:none}
.gal-mo.gal-paged .gal-ph:not(.gal-off){animation:galIn .35s ease both}
.gal-pg{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.gal-pg button{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);cursor:pointer}
.gal-pg button::after{content:"";width:7px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.gal-pg .gal-pv::after{transform:scaleX(-1)}
.gal-pg span{color:var(--muted);font-size:var(--fs-note)}
@media (min-width:761px){.gal-mo.gal-paged{grid-template-columns:repeat(4,1fr)}}
/* Graphic design gallery, Social L1 (owner 2026-10-11, _preview-social-layout.html): carousels on top (each swipes through its own slides,
   with a 1/N counter and dots), posts in 2 columns under them, then a sideways row of stories; posts and stories open the viewer */
.gal-bd.gal-soc{display:block;padding:0 12px 14px}
.soc-lab{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 8px;font:600 12px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#C9A8FF}
.soc-lab:first-child{margin-top:0}
.soc-lab span{font:400 12px Outfit,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted)}
.soc-cars{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -12px;padding:0 12px;scrollbar-width:none}
.soc-cars::-webkit-scrollbar,.soc-sc::-webkit-scrollbar,.soc-stories::-webkit-scrollbar{display:none}
.soc-car{position:relative;flex:none;width:min(300px,82%);height:300px;border-radius:12px;overflow:hidden;background:#fff;scroll-snap-align:center}
.soc-sc{height:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.soc-sc img{height:100%;width:auto;max-width:none;display:block}
.soc-badge{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:999px;background:rgba(20,14,34,.78);color:#fff;font:600 11px var(--font-display);pointer-events:none}
.soc-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:4px;pointer-events:none}
.soc-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.4)}.soc-dots i.on{background:#fff}
.soc-posts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.soc-posts .gal-ph{aspect-ratio:4/5;height:auto}
.soc-stories{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -12px;padding:0 12px;scrollbar-width:none}
.soc-stories .gal-ph{flex:none;width:34%;aspect-ratio:9/16;height:auto;scroll-snap-align:start}
@media (min-width:761px){.soc-car{width:340px;height:340px}.soc-posts{grid-template-columns:repeat(5,1fr)}.soc-stories .gal-ph{width:150px}}
/* logos T1 gather canvas (2026-10-11) */
#gal-logos{position:relative}#gal-logos .gal-tri{position:absolute;left:0;top:0;pointer-events:none;z-index:3}

/* closed group photos S2 fan + sparks (2026-10-11) */
.gal-pk{position:relative}
.gal-pk i{position:absolute;width:7px;height:7px;background:#C9A8FF;clip-path:polygon(50% 0,100% 100%,0 100%);opacity:0;pointer-events:none;z-index:2}
.pk-wait .gal-pk>img,.pk-wait .gal-pk>em{opacity:0}
.pk-go .gal-pk>img,.pk-go .gal-pk>em{opacity:1;animation:pkFan .6s cubic-bezier(.2,.8,.2,1) calc(var(--r) * .2s + var(--j) * .1s) both}
.pk-go .gal-pk i{animation:pkSpk .8s ease-out calc(var(--r) * .2s + .35s) both}
@keyframes pkFan{from{opacity:0;transform:translateX(calc(var(--j) * -24px)) rotate(-12deg)}}
@keyframes pkSpk{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(200deg)}}

/* web-design phones: the page must always scroll over the phone (2026-10-11): overscroll contain on the screen blocked the page scroll */
.wl-scr{overscroll-behavior:auto}.wl-ph,.wl-scr{touch-action:pan-y}

/* web-design Visit site: one white underline only (2026-10-11) */
.wl-visit{background:none}

/* service pages quick check (owner 2026-10-11): a ticked card is clearly chosen and its box shows its number 1-4; each fix line starts with the same number */
.sp-chk[aria-pressed=true]{background:linear-gradient(135deg,rgba(123,92,255,.34),rgba(201,168,255,.14))!important;border:1px solid #C9A8FF!important;box-shadow:0 0 0 1px rgba(201,168,255,.35),0 0 26px -6px rgba(123,92,255,.75)}
.sp-chk[aria-pressed=true] .sp-bx::after{clip-path:none;width:auto;height:auto;background:none;display:grid;place-items:center;color:#140E22;font:600 13px/1 var(--font-display)}
.sp-chk:nth-child(1) .sp-bx::after{content:"1"}.sp-chk:nth-child(2) .sp-bx::after{content:"2"}.sp-chk:nth-child(3) .sp-bx::after{content:"3"}.sp-chk:nth-child(4) .sp-bx::after{content:"4"}
.sp-chk[aria-pressed=false] .sp-bx::after{content:none}
.sp-fixes li::before{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#C9A8FF;color:#140E22;font:600 13px/1 var(--font-display);transform:translateY(3px)}
.sp-fixes li{align-items:flex-start}
.sp-fixes li[data-i="0"]::before{content:"1"}.sp-fixes li[data-i="1"]::before{content:"2"}.sp-fixes li[data-i="2"]::before{content:"3"}.sp-fixes li[data-i="3"]::before{content:"4"}
/* gallery small photos 0.2 s slower (owner 2026-10-11) */
.pk-go .gal-pk>img,.pk-go .gal-pk>em{animation-duration:.8s}.pk-go .gal-pk i{animation-duration:1s}

/* graphic-design H1 "Make them count." in still brand lilac (owner 2026-10-11) */
.h-lil{background:linear-gradient(120deg,#7B5CFF,#C9A8FF 55%,#EDE3FF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* web-design H1 "z Z z" E2 (owner 2026-10-11): white z's appear one by one, then the middle Z flips like a coin into a lilac euro */
.zz{display:inline-flex;align-items:baseline;gap:.08em;margin-left:.3em;white-space:nowrap}
.zz b{position:relative;display:inline-block;font-weight:inherit;color:#fff;animation:zzIn .35s ease .5s both}
.zz b:nth-child(1),.zz b:nth-child(3){font-size:.5em}.zz b:nth-child(2){font-size:.8em;animation-delay:.65s}.zz b:nth-child(3){animation-delay:.8s}
.zz i,.zz u{font-style:normal;text-decoration:none;display:inline-block}
.zz u{position:absolute;left:0;top:0;opacity:0;background:linear-gradient(120deg,#7B5CFF,#C9A8FF 55%,#EDE3FF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.zz i{animation:zzOut .35s ease-in 1.45s both}.zz u{animation:zzFlip .35s ease-out 1.8s both}
@keyframes zzIn{from{opacity:0;transform:translateY(8px)}}
@keyframes zzOut{to{opacity:0;transform:rotateY(90deg)}}
@keyframes zzFlip{from{opacity:1;transform:rotateY(-90deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.zz b,.zz i,.zz u{animation:none}.zz i{opacity:0}.zz u{opacity:1}}
/* service pages What's included cards: faint GOAT BOLD mark in the empty lower right (owner 2026-10-11) */
.inc-card.inc-logo::after{content:"";position:absolute;z-index:0;right:-8%;bottom:56px;width:46%;aspect-ratio:76/96;transform:rotate(-12.4deg);background:#fff;opacity:.06;pointer-events:none;-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat}
.inc-card>*{position:relative;z-index:1}
.inc-list.is-deck .inc-card.inc-logo.is-back::after{opacity:0}

/* social carousels: let a swipe at the end of one carousel reach the row (owner 2026-10-11) */
.soc-sc{overscroll-behavior-x:auto}

.gal{overflow-anchor:none}

/* graphic-design "see you" triangle eyes Y4 (2026-10-11) */
.h-eyes{position:relative;display:inline-block;vertical-align:middle;margin-left:.25em;width:77px;height:29px}.h-eyes canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}

/* What's included cards: triangle eyes over the eyes of the faint GOAT BOLD mark (2026-10-11); same box as .inc-card::after */
.inc-card>.inc-eyes{position:absolute;z-index:0;right:-8%;bottom:56px;width:46%;aspect-ratio:76/96;transform:rotate(-12.4deg);pointer-events:none}
.inc-eyes canvas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.inc-list.is-deck .inc-card.is-back>.inc-eyes{opacity:0}

/* web-design: the tags line replaces the hint under the caption, no line above (owner 2026-10-11) */
.wl-tags{margin-top:12px;padding-top:0;border-top:0}

/* web-design closing card: receipt (owner 2026-10-11, S3): paper whose lower part is the same paper cut into a triangle grid,
   broken on an uneven slant (deeper on the right), lilac at the break; 6 pieces fall one by one (every 3 s), then float under it */
.rcp{position:relative;margin:24px 0 104px;padding:22px 18px 30px;text-align:left;color:#1E1432;border-radius:14px 14px 0 0;background:linear-gradient(#F4EFFF calc(100% - 4px),transparent 0)}
.rcp>*{position:relative;z-index:1}
.rcp canvas{position:absolute;left:0;top:calc(100% - 4px);z-index:0;pointer-events:none}
.rcp-hd{display:flex;justify-content:space-between;margin-bottom:12px;font:600 12px var(--font-display);letter-spacing:.12em;color:#7B5CFF}
.rcp-l{display:flex;align-items:baseline;gap:6px;margin:9px 0;font-size:15px}.rcp-l span{flex:1;border-bottom:2px dotted #b9a9e6;transform:translateY(-4px)}.rcp-l b{font-weight:600}
.rcp-t{position:relative;display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:2px solid currentColor;font:600 15px var(--font-display)}
.rcp-stamp{position:absolute;left:50%;top:8px;transform:translateX(-50%) rotate(-10deg);border:2px solid #7B5CFF;color:#7B5CFF;border-radius:8px;padding:4px 8px;font:600 11px var(--font-display);letter-spacing:.1em;opacity:.85}

.cta-panel .rcp{align-self:stretch;width:100%;max-width:440px;margin-left:auto;margin-right:auto}

/* receipt: one text style for every row, title on one line (owner 2026-10-11) */
.rcp-l b{font-weight:400}.rcp-t{font:400 15px Outfit,sans-serif}
.cta-panel .rcp-title .cta-gold{display:inline;margin:0}

/* receipt: N4 "NO EXTRAS" big faint watermark across the paper (owner 2026-10-11, _preview-stamp.html) */
.rcp>.rcp-wm{position:absolute;inset:0;z-index:0;display:grid;place-items:center;overflow:hidden;border-radius:inherit;pointer-events:none}
.rcp-wm b{transform:rotate(-18deg);font:600 46px var(--font-display);letter-spacing:.06em;color:rgba(123,92,255,.12);white-space:nowrap}

/* web-design title: z € z Z z z (owner 2026-10-11) */
.zz b:nth-child(4){font-size:.8em;animation-delay:.95s}.zz b:nth-child(5){font-size:.5em;animation-delay:1.1s}.zz b:nth-child(6){font-size:.5em;animation-delay:1.25s}

/* closing panels K1 broken corner: the falling pieces layer (2026-10-11) */
.cta-fx{position:absolute;z-index:3;pointer-events:none}

/* closing panels with one button: keep it full width (2026-10-11) */
.cta-panel .actions{width:100%}.cta-panel .actions .btn:only-child{width:100%;flex:1 1 100%}

/* GOAT BOLD mark details (owner 2026-10-12, _preview-logo-spots.html L1 L2 L3 L4 L6 L9 L10) */
/* L1 web design receipt: the mark before GOAT BOLD */
.rcp-hd span:first-child{display:inline-flex;align-items:center;gap:6px}
.rcp-hd span:first-child::before{content:"";width:11px;height:14px;background:#7B5CFF;-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat}
/* L2 client work photos: a quiet "Designed by GOAT BOLD" tag (full tag on big photos, mark only on small gallery tiles) */
.deck::after,.shatter::after{content:"DESIGNED BY GOAT BOLD";position:absolute;right:10px;bottom:10px;z-index:30;padding:5px 10px 5px 24px;border-radius:99px;background:rgba(20,14,34,.6) url(../img/goatbold-mark.svg) no-repeat 9px 50%/10px 13px;color:#fff;font:600 10px/1.2 var(--font-display);letter-spacing:.08em;pointer-events:none}
.shatter{position:relative}
.gal-mo .gal-ph{position:relative}
.gal-mo .gal-ph::after{content:"";position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:50%;background:rgba(20,14,34,.55) url(../img/goatbold-mark.svg) no-repeat 50% 50%/10px 12px;pointer-events:none}
/* L3 faint mark in the corner of the How it works card and the review cards */
.hs-card,.rv-card{position:relative;overflow:hidden}
.hs-card::after,.rv-card::after{content:"";position:absolute;right:-18px;bottom:-24px;width:110px;height:140px;background:#fff;opacity:.05;transform:rotate(-12.4deg);-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat;pointer-events:none}
/* L4 closing panels: the mark instead of the small diamond before "No obligation" */
.cta-trust span:not(.cta-live)::before{width:9px;height:11px;transform:none;-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat}
/* L6 lilac divider lines: a gap in the middle with the mark in it */
main .sp-check::after,main .sp-check+section::after,main .has-div::after{-webkit-mask:linear-gradient(90deg,#000 calc(50% - 20px),transparent calc(50% - 20px),transparent calc(50% + 20px),#000 calc(50% + 20px));mask:linear-gradient(90deg,#000 calc(50% - 20px),transparent calc(50% - 20px),transparent calc(50% + 20px),#000 calc(50% + 20px));clip-path:none;height:2px}
main .sp-check::before,main .sp-check+section::before,main .has-div::before{content:"";position:absolute;left:50%;bottom:0;z-index:1;width:15px;height:19px;transform:translate(-50%,50%);background:linear-gradient(#C9A8FF,#7B5CFF);-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat;pointer-events:none}
/* L9 legal pages end like a signed document */
.legal-end{margin:40px 0 0;text-align:center;color:var(--muted);font-size:var(--fs-note)}
.legal-end::before{content:"";display:block;margin:0 auto 8px;width:22px;height:28px;background:linear-gradient(#C9A8FF,#7B5CFF);-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat}
/* L10 404: the 0 is the mark */
.e404{display:flex;justify-content:center;align-items:center;gap:6px;margin:0 0 12px;font:600 clamp(64px,18vw,104px)/1 var(--font-display);color:#fff}
.e404 i{width:.72em;height:.92em;background:linear-gradient(#C9A8FF,#7B5CFF);-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat}

/* offer tab "20% OFF" readable on phones (owner 2026-10-12): 10px, was 8.5px */
.fco-trigger .fco-left span{font-size:10px!important}

/* Back to top D2 at P1 (owner 2026-10-12): above the WhatsApp button and its "Here for you" note */
.btt{position:fixed;z-index:44;right:calc(25px + env(safe-area-inset-right));bottom:calc(118px + env(safe-area-inset-bottom));width:46px;height:46px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#1E1432;color:#fff;cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.7);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s;-webkit-tap-highlight-color:transparent}
.btt.on{opacity:1;transform:none;pointer-events:auto}
.btt svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.btt circle{fill:none;stroke-width:3}.btt .btt-bg{stroke:rgba(255,255,255,.12)}.btt .btt-fg{stroke:url(#bttG);stroke-linecap:round}
.btt i{width:13px;height:11px;margin-top:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M6 1l5 9H1z' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
body.menu-open .btt{opacity:0;pointer-events:none}
@media (min-width:960px){.btt{right:37px;bottom:100px}}
@media (prefers-reduced-motion:reduce){.btt{transition:none}}

/* S1 status dot everywhere (owner 2026-10-12, _preview-status-dot.html): menu card, contact page, closing panels; 8px round dot,
   green with a soft pulsing ring while active (10:00-22:00 Dublin), yellow and still when idle */
.mobile-menu .m-live i,.cf-dot,.cta-trust .cta-live::before{position:relative;display:inline-block;flex:none;width:8px!important;height:8px!important;border-radius:50%!important;background:#4ade80!important;box-shadow:none!important;transform:none!important;-webkit-mask:none!important;mask:none!important;animation:none!important;vertical-align:middle}
.mobile-menu .m-live i::after,.cf-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #4ade80;opacity:0;animation:stPulse 2s ease-out infinite}
.cta-trust .cta-live{position:relative}
.cta-trust .cta-live::after{content:"";position:absolute;left:-4px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:1.5px solid #4ade80;opacity:0;animation:stPulse 2s ease-out infinite}
@keyframes stPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.mobile-menu .m-live.is-idle i,[data-live].is-idle .cf-dot,.cta-trust .cta-live.is-idle::before{background:#facc15!important}
.mobile-menu .m-live.is-idle i::after,[data-live].is-idle .cf-dot::after,.cta-trust .cta-live.is-idle::after{display:none}
@media (prefers-reduced-motion:reduce){.mobile-menu .m-live i::after,.cf-dot::after,.cta-trust .cta-live::after{animation:none;display:none}}

/* ============ DESKTOP + TABLET PASS (2026-10-12, owner: optimise the wider screens, phones unchanged) ============
   Every rule below sits in a min-width query (761px and up), so phones (up to 760px) are not touched.
   Backup: _backups/before-desktop-pass/ */
@media (min-width:761px){
  /* Work page: the 3-photo deck had zero width on wider screens (it was invisible); give it the full column */
  .k4-ch .deck{width:100%;max-width:900px}
  /* Home Recent work: the small "Recent work" label centred like its title */
  #work .section-head .stack{text-align:center;justify-items:center}
  /* Home Reviews: title block centred above the centred card deck */
  #reviews .section-head{text-align:center;margin-inline:auto;max-width:720px}
  #reviews .section-head>*{text-align:center;margin-inline:auto}
  /* Home How it works card: a little wider so the steps read in fewer lines */
  .hs-b3{max-width:560px}
  /* Work page Other clients: the two client cards share the full width */
  .oc-strip .oc-card{flex:1 1 0;min-width:0}
}
@media (min-width:761px) and (max-width:959px){
  /* Tablets: the hero logo was a 460px empty block under the text; smaller so the page reaches the content sooner */
  .hero-logo{max-width:340px;max-height:340px}
}
@media (min-width:800px){
  /* Footer links: a tidy 5 x 2 grid (Terms no longer alone on its own row) */
  .footer-m-links{display:grid;grid-template-columns:repeat(5,max-content);column-gap:clamp(18px,2.2vw,32px);row-gap:2px;justify-content:start}
}
@media (min-width:900px){
  /* Work page Mirabell Academy: tags under the photo (they sat alone under the text column) */
  #mirabell-academy .case>.chips-after{grid-column:2;justify-content:center}
}
@media (min-width:961px){
  /* Home "Why your clients choose someone else?": all three problems side by side (no 01 02 03 switch needed) */
  #why .r-tabs-wrap{max-width:none}
  #why .r-tabs-wrap .r-switch{display:none}
  #why .reasons.r-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:none;margin:0}
  #why .reasons.r-tabs>.reason[hidden]{display:grid!important}
  #why .reason.r-bar .reason-num{display:inline}
  /* Home FAQ: room below the questions so the tree crown no longer reaches behind the last cards */
  #faq{padding-bottom:calc(var(--sp-7) * 2 + 200px)}
  /* Service pages + guide: the FAQ title sat 112px above its questions; same title gap as the rest of the page */
  .sp-check~section .faq-grid{row-gap:0}
  .sp-check~section .section-head{margin-bottom:var(--sp-6)}
}
@media (min-width:761px){
  /* Branding guide closing panel: the line under the centred title is centred too */
  .bgb-end .lead{text-align:center;margin-inline:auto;max-width:520px}
}
@media (min-width:961px){
  /* Legal pages: the title lines up with the contents list and text below it (was further left) */
  main:has(.legal.has-toc) .page-hero .wrap{max-width:980px;margin-inline:auto}
}
@media (min-width:761px) and (max-width:959px){
  /* Tablets: the goat, tree and summit sat hidden behind the brand check panel with an empty gap above it. Same idea as
     the phone G1 fix: the summit sits a fixed 56vw under the TOP of the scene (--scene-h from main.js), so the goat and
     tree stand above the panel at every tablet width; a second, bigger copy of the massif fills the base below it. */
  .goat-scene{--D:calc(var(--scene-h) - 56vw - 94.7vw)}
  .goat-scene,.js .goat-scene.is-near{background:url(../img/mountains-massif.svg?v=4) 50% calc(100% - var(--D))/auto 118vw no-repeat,url(../img/mountains-massif.svg?v=4) 42% 100%/auto 175vw no-repeat!important}
  .js .goat-scene:not(.is-near){background:none!important}
  .goat-peak{bottom:calc(var(--D) + 94.7vw)}
  .goat-tree{bottom:calc(var(--D) + 77.39vw)}
  .goat-grass{bottom:calc(var(--D) + 90.79vw)}
  .goat-stage{margin-top:10vw}
}
/* Guide closing panel "Now make it yours." on phones (2026-10-12, owner): less empty space above the title */
@media (max-width:760px){.bgp .cta-panel[data-corner="br"]{padding-top:24px}.bgp .cta-panel[data-corner="br"] h2{margin-top:0;line-height:1.05}}
/* Floating WhatsApp + Back to top (2026-10-12, owner): they fade and sink away softly once the footer links and contact
   bar come on screen (they covered them), and come back the same way when scrolling up. html.near-foot from main.js */
.wa-float{transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .5s ease,translate .5s ease}
.btt{transition:opacity .5s ease,transform .3s,translate .5s ease}
html.near-foot .wa-float,html.near-foot .btt{opacity:0!important;translate:0 16px;pointer-events:none!important}
@media (prefers-reduced-motion:reduce){.wa-float,.btt{transition:opacity .2s}html.near-foot .wa-float,html.near-foot .btt{translate:none}}
/* Footer links L3 (2026-10-12, owner, _preview-footer-links.html): phones = the 6 main links in 3 x 2, then FAQs, Brand
   guide, Privacy, Terms on one small line. Wider screens: all 10 flow into the 5 x 2 grid as before. */
.fl3 .fl-l{margin:0}
@media (max-width:760px){
  .fl3{display:block!important;text-align:center}
  .fl3 .fl-m{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px}
  .fl3 .fl-m a{line-height:2.3;font-size:.95rem}
  .fl3 .fl-l{margin-top:10px;color:#6d5f8f;font-size:var(--fs-note)}
  .fl3 .fl-l a{font-size:var(--fs-note);line-height:1.8}
  .fl3 .fl-l i{font-style:normal;margin:0 6px}
}
@media (min-width:761px){.fl3 .fl-m,.fl3 .fl-l{display:contents}.fl3 .fl-l i{display:none}}
/* Guide Do and don't S5 on phones (2026-10-12, owner, _preview-dos-strip.html): one sideways swipe line of glass cards,
   each with a faint GOAT BOLD mark in its lower right corner */
@media (max-width:760px){
  .bg-dos{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gutter,16px));padding:0 var(--gutter,16px) 10px;scroll-padding-inline:var(--gutter,16px);scrollbar-width:none}
  .bg-dos::-webkit-scrollbar{display:none}
  .bg-dos li{scroll-snap-align:start;flex:0 0 68%;position:relative;padding:10px 10px 14px;border-radius:22px;background:var(--one-bg,linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)));border:1px solid var(--one-edge,rgba(255,255,255,.14))}
  .bg-dos .bg-vt{border-radius:14px}
  .bg-dos li::after{content:"";position:absolute;right:14px;bottom:12px;width:30px;height:38px;background:url(../img/goatbold-mark.svg) center/contain no-repeat;opacity:.12;pointer-events:none}
}
/* Big screens (2026-10-12, owner: text too small on wide / dual screens): from 1600px the whole page scales up in steps
   (html zoom), so it keeps the 1440px laptop look. Pieces that measure the real screen are kept at normal scale
   (inverse zoom): the hero particles, the photo auras, the About bishop layer and the background lights. Scripts that
   write sizes from measurements divide by the zoom (main.js, about-chess.js). */
@media (min-width:1600px){html{zoom:1.12}.particle-canvas,.aura-canvas,.pawn-canvas,.bg{zoom:0.8929}}
@media (min-width:1800px){html{zoom:1.25}.particle-canvas,.aura-canvas,.pawn-canvas,.bg{zoom:0.8000}}
@media (min-width:2000px){html{zoom:1.38}.particle-canvas,.aura-canvas,.pawn-canvas,.bg{zoom:0.7246}}
@media (min-width:2300px){html{zoom:1.55}.particle-canvas,.aura-canvas,.pawn-canvas,.bg{zoom:0.6452}}
@media (min-width:2700px){html{zoom:1.8}.particle-canvas,.aura-canvas,.pawn-canvas,.bg{zoom:0.5556}}
@media (min-width:3200px){html{zoom:2.15}.particle-canvas,.aura-canvas,.pawn-canvas,.bg{zoom:0.4651}}
@media (min-width:3700px){html{zoom:2.5}.particle-canvas,.aura-canvas,.pawn-canvas,.bg{zoom:0.4000}}
/* DESKTOP PASS 2 (2026-10-12, owner: visual bugs on wide screens). Phones untouched (761px+ only). */
@media (min-width:761px){
  /* offer tab: a small glass tab stuck to the right screen edge, so it no longer floats loose over the content */
  html .fco-trigger{right:0!important;padding:12px 12px 12px 14px!important;border-radius:16px 0 0 16px!important;background:#221838!important;border:1px solid rgba(255,255,255,.14)!important;border-right:0!important;box-shadow:0 10px 30px rgba(0,0,0,.35)!important}
  /* footer over the mountain: fade in from clear, no hard line where it starts */
  .site-footer.on-scene{border-top:0;background:linear-gradient(180deg,rgba(13,9,23,0),rgba(13,9,23,.45) 40%,rgba(13,9,23,.7))}
  .site-footer:not(.on-scene){border-top:0;background:linear-gradient(180deg,rgba(13,9,23,0),rgba(13,9,23,.6) 35%,rgba(13,9,23,.92))}
}
/* service pages: the one reading column a little wider on big desktops (was 720px, looked like a thin strip) */
@media (min-width:1200px){.sp-narrow,.sp-check~section>.wrap{max-width:860px}}
/* service pages: the FAQ is one column there, so its title must not stick (it slid over the questions while scrolling) */
@media (min-width:960px){.sp-check~section .faq-grid .section-head{position:static}}
/* Accessibility pass (2026-10-12): links inside a line of text need more than colour to stand out */
.bc-ig a{text-decoration:underline;text-decoration-color:rgba(201,168,255,.6);text-decoration-thickness:1px;text-underline-offset:3px}
/* Phone menu ONE (2026-10-12, owner): Services holds the 3 service pages + all prices, then a thin line with the small
   GOAT BOLD mark, then Selected work and the Branding & logo guide. The Work button is gone from the phone menu. */
.mobile-menu .m-div{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
.mobile-menu .m-div i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,255,.6))}
.mobile-menu .m-div i:last-child{background:linear-gradient(90deg,rgba(201,168,255,.6),transparent)}
.mobile-menu .m-div img{width:16px;height:20px;opacity:.85}

/* lite mode (lite.js, owner 2026-10-12): background lights stand still */
html.lite .bg i{animation:none!important}

/* Home "Built for" O4 on phones (owner 2026-10-12, _preview-built-for-2.html): small capitals label, the word below in a lilac to white gradient, progress dots under it */
.bf-dots{display:none!important}
@media (max-width:760px){
  .bf{flex-direction:column;align-items:center;gap:2px;transform:none!important}
  .bf .bf-lab{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#8f84ad}
  .bf-list{text-align:center;justify-items:center}
  .bf-list li{background:linear-gradient(90deg,#C9A8FF,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .bf-dots{display:flex;gap:6px}.bf-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.2);transition:width .3s,background-color .3s}.bf-dots i.on{width:18px;background:#C9A8FF}
}
@media (prefers-reduced-motion:reduce){.bf-dots{display:none!important}}

/* FAQ cards T15 on every page (owner 2026-10-12, _preview-faq-tight.html): inside 15% tighter, text size and gaps unchanged */
html .faq-item summary{padding-top:15.3px;padding-bottom:15.3px;min-height:47.6px}
html .faq-item .faq-a{padding-bottom:17px}

/* phone menu Services view M1 (owner 2026-10-12, _preview-menu-services.html): icon tile, name + line, price in lilac on the right */
.mobile-menu .m-work a:not(.btn){justify-content:flex-start;gap:12px}
.mobile-menu .m-work a>span:not(.m-ic){flex:1;min-width:0}
.mobile-menu .m-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(201,168,255,.12);border:1px solid rgba(201,168,255,.3);color:#C9A8FF}
.mobile-menu .m-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mobile-menu .m-pr{flex:none;font:600 13px var(--font-display);color:#C9A8FF;white-space:nowrap}
.mobile-menu .m-work a.m-hp::after{display:none}
.mobile-menu .m-work a>span.m-ic{display:grid;width:36px;height:36px;align-self:center}
.mobile-menu .m-work a>span.m-ic{place-items:center;align-items:center;justify-items:center;line-height:0}
.mobile-menu .m-work a>span.m-ic{display:flex!important;align-items:center!important;justify-content:center!important;color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.mobile-menu .m-work a>span.m-ic svg{margin:0!important;flex:none}

/* phone menu Services view: M7 selected look (owner 2026-10-12): the page you are on, and the row you touch, get a lilac bar on the left edge and a soft lilac glow fading right (full row, no cut-off grey box) */
.mobile-menu .m-work a:not(.btn){margin-inline:-10px;padding-inline:10px;border-radius:0;background:none;box-shadow:none;transition:background-color .2s}
.mobile-menu .m-work a:not(.btn):hover,.mobile-menu .m-work a:not(.btn):focus-visible,.mobile-menu .m-work a:not(.btn):active,.mobile-menu .m-work a[aria-current=page]{background:linear-gradient(90deg,rgba(201,168,255,.16),rgba(201,168,255,0) 85%);box-shadow:inset 2px 0 0 #C9A8FF;outline:none}

/* phone menu Services view K5 (owner 2026-10-12, _preview-menu-lighter.html): everything stays, fits one screen.
   K2 smaller Back line + tighter rows, K3 Selected work + Brand guide as two half tiles under the logo divider, K4 chat a bit smaller with the 3 questions flowing two per line (only while the Services view is open) */
.mobile-menu .m-work .m-back{min-height:36px;margin-bottom:2px;font-size:.98rem}
.mobile-menu .m-work a:not(.btn){padding-top:7px;padding-bottom:7px}
.mobile-menu .m-work a>span.m-ic{width:32px;height:32px;border-radius:10px}
.mobile-menu .m-work .m-div{margin:8px 0 8px}
.mobile-menu .m-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-menu .m-pair a.m-tile{margin:0!important;padding:9px 10px!important;gap:8px!important;border:1px solid rgba(214,196,255,.18)!important;border-radius:14px!important;background:rgba(255,255,255,.04)}
.mobile-menu .m-pair a.m-tile::after{display:none}
.mobile-menu .m-pair a.m-tile>span:not(.m-ic){font-size:.9rem;line-height:1.2}
.mobile-menu .m-pair a.m-tile .m-sub{font-size:.72rem}
.mobile-menu .m-pair a.m-tile[aria-current=page],.mobile-menu .m-pair a.m-tile:hover,.mobile-menu .m-pair a.m-tile:active{border-color:#C9A8FF!important;box-shadow:0 0 16px -6px rgba(123,92,255,.9)}
.mobile-menu.m-svc-open .m-chat{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:6px;padding-top:12px}
.mobile-menu.m-svc-open .m-chat>*:not(.m-q){flex:1 0 100%}
.mobile-menu.m-svc-open .m-who{padding:9px 12px;gap:10px}
.mobile-menu.m-svc-open .m-av{width:38px;height:38px}
.mobile-menu.m-svc-open .m-hi{padding:8px 12px;font-size:.8rem}
.mobile-menu.m-svc-open .m-q{padding:8px 12px;font-size:.8rem;min-height:0}

/* phone menu Services view on SMALL phones (owner 2026-10-12): everything still fits without scrolling */
@media (max-width:374px){
  .mobile-menu .m-pair a.m-tile{padding:8px!important;gap:7px!important}
  .mobile-menu .m-pair a.m-tile .m-sub{display:none}
  .mobile-menu .m-pair a.m-tile>span:not(.m-ic){font-size:.84rem;white-space:nowrap}
  .mobile-menu .m-pair a.m-tile>span.m-ic{width:28px;height:28px}
  .mobile-menu.m-svc-open .m-nm em,.mobile-menu.m-svc-open [data-live-reply]{display:none}
}
@media (max-height:720px){
  .mobile-menu .m-work>a .m-sub{display:none}
  .mobile-menu .m-work>a:not(.btn){padding-top:8px;padding-bottom:8px}
  .mobile-menu.m-svc-open .m-chat{padding-top:8px;gap:5px}
  .mobile-menu.m-svc-open .m-who{padding:7px 10px}
  .mobile-menu.m-svc-open .m-av{width:34px;height:34px}
  .mobile-menu.m-svc-open .m-hi,.mobile-menu.m-svc-open .m-q{padding:7px 11px}
}
@media (max-height:600px){
  .mobile-menu .m-work .m-back{min-height:32px}
  .mobile-menu .m-work .m-div{margin:5px 0}
  .mobile-menu.m-svc-open .m-note{display:none}
}
@media (max-width:374px){.mobile-menu .m-pair a.m-tile{min-width:0}.mobile-menu .m-pair a.m-tile>span:not(.m-ic){white-space:normal;font-size:.8rem;min-width:0}}
@media (max-height:600px){.mobile-menu .m-work>a:not(.btn){padding-top:6px;padding-bottom:6px}}

/* PHONE PASS (owner 2026-10-12): small phones to big phones, Safari / Chrome / Samsung Internet and the in-app browsers (WhatsApp, Messenger, Instagram, Discord) */
/* iPhones zoom the whole page when you tap a field with text under 16px: every field is 16px on phones */
@media (max-width:760px){input,select,textarea{font-size:16px!important}}
/* small text links get a bigger invisible tap area (look unchanged): footer legal line, breadcrumbs */
.fl-l a,.crumbs a{display:inline-block;padding:12px 6px;margin:-12px -6px}
/* the open phone menu never scrolls the page behind it (iOS / in-app browsers) */
.mobile-menu{overscroll-behavior:contain}
/* older iPhones (iOS 15) and older Samsung Internet do not know overflow clip: fall back to hidden so nothing can be dragged sideways */
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
/* long words or links never push the page wider on narrow phones */
p,li,dd,h1,h2,h3{overflow-wrap:break-word}
/* no grey flash on tap in Android / in-app browsers */
a,button,[role=button]{-webkit-tap-highlight-color:transparent}

/* divider mark drawn as a built-in picture (no mask), so it always shows (owner 2026-10-12: the mark vanished on his screen) */
main .sp-check::before,main .sp-check+section::before,main .has-div::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 96'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C9A8FF'/%3E%3Cstop offset='1' stop-color='%237B5CFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url%28%23g%29' fill-rule='evenodd' d='M36.5 95C35 93.9 34.7 93.6 33.5 92C31.2 89 28.3 83.7 26.1 78.5L25.5 77.1L25.2 75.1C24.9 72.1 24.7 70.4 24.6 67.7C24.5 66.4 24.4 65.3 24.4 65.3C24.4 65.3 24.2 66.1 24 67.1C23.9 68 23.7 68.9 23.6 68.9C23.4 69.1 18.5 67.4 15 65.9C13.4 65.2 9.4 63.3 9.4 63.2C9.4 63.1 11.3 62.2 12.6 61.8C15.5 60.8 19.4 59.9 22.3 59.6C22.7 59.6 23 59.5 23 59.5C23 59.5 22.5 59.1 22 58.6C18.5 55.9 12.3 50 4.1 41.6C1.8 39.3 0 37.4 0 37.4C0 37.4 0.6 36.6 1.4 35.7C5.8 30.5 12.1 24 20.2 15.8C22.5 13.5 24.4 11.6 24.4 11.6C22.9 10.2 20.3 8 20.3 7.9C20.3 7.8 40.5 -0.1 40.5 0C40.6 0.1 35 20.8 35 20.9C34.9 20.9 34.6 20.7 31.9 18.3C31.2 17.6 30.6 17.1 30.5 17.1C30.4 17.1 31 16.2 25 25.6C17.4 37.5 17.3 37.7 17.2 37.8C17.2 37.9 17.8 38.6 18.7 39.6C22 43.1 26.3 46.8 31.3 50.6C34.1 52.7 37.8 55.3 38 55.3C38.1 55.3 40.5 53.3 43.5 50.9C46.4 48.4 51.6 44.2 55.1 41.4C58.5 38.6 61.3 36.2 61.4 36.1L61.6 35.9L57.3 31C55 28.3 53 26 53 26C52.9 26 51.1 27.6 48.9 29.7L44.9 33.5L46.7 35.2C47.8 36.3 48.4 36.9 48.3 37C48.2 37.1 27.9 43.9 27.8 43.9C27.8 43.9 28.2 42.6 28.7 41.1C29.2 39.6 30.6 35.1 31.9 31.1C33.2 27.1 34.3 23.8 34.3 23.7C34.4 23.6 34.5 23.5 34.6 23.5C34.7 23.5 35.6 24.3 36.7 25.4L38.7 27.3L38.8 27.1C38.9 27 43.5 21.1 50.9 11.4C51.6 10.4 52.3 9.6 52.3 9.6C52.5 9.6 71.9 32.4 75.4 36.6L76 37.4L74.4 39.1C66.9 46.9 56.9 56.5 53.5 59C52.9 59.5 52.9 59.6 53.3 59.6C54.4 59.6 58.6 60.4 60.7 61C62.9 61.6 66.6 63 66.6 63.2C66.6 63.3 62.5 65.3 60.9 66C57.5 67.4 52.6 69.1 52.3 68.9C52.3 68.8 52.1 68.1 52 67.1C51.7 65.3 51.5 64.9 51.5 65.8C51.5 67.3 51.2 71.7 50.9 74.2L50.5 77.1L50.1 78.1C47.5 84.2 44.2 90 41.7 93.1L40.9 94L39.5 95C38.7 95.5 38 96 38 96C37.9 96 37.2 95.5 36.5 95ZM34.3 74.8C34.2 73.1 33.7 71.9 32.8 70.5C32.2 69.6 30.8 68.3 29.8 67.7L29.1 67.2L29 67.4C28.9 67.7 28.9 69.2 29.1 69.9C29.3 70.9 29.8 71.7 30.5 72.4L31.2 73.1L32 73.5C32.5 73.7 32.9 73.9 33 73.9C33.1 74 33.4 74.5 33.6 75.1L34.1 76.3L34.2 76.1C34.3 76 34.3 75.5 34.3 74.8ZM42.5 75L43 74L43.7 73.7C45.5 72.9 46.6 71.6 47 69.8C47.2 69.2 47.2 67.7 47.1 67.4L47 67.2L46.3 67.7C45.3 68.3 43.9 69.6 43.3 70.5C42.3 71.9 41.9 73.1 41.8 74.8C41.8 75.5 41.8 76.1 41.8 76.2L41.9 76.4L42 76.2C42.1 76 42.3 75.5 42.5 75Z'/%3E%3C/svg%3E") center/contain no-repeat!important;-webkit-mask:none!important;mask:none!important}

/* home brand check panel O2 (owner 2026-10-12, _preview-brand-panel.html): the C2 moving lilac edge like the Work / service endings, no blur */
.cta-panel.cta-goat.cta-c2{-webkit-backdrop-filter:none;backdrop-filter:none}

/* PALETTE G5 (owner 2026-10-12, _preview-n1-gradients.html): two-tone cards on every page. Body = dark violet with a faint violet wash at the bottom; card tops (reviews, What's included, open FAQ, open price group) deep to bright violet left to right; result strips (included, About gain, Your fix) violet to bright violet; every closing panel has the moving lilac light (cta-c2) */
:is(#pvz,html) body .bg{background:#140E22!important}:is(#pvz,html) body main .inc-card,:is(#pvz,html) body main .rv-card,:is(#pvz,html) body main .hs-card,:is(#pvz,html) body .reason.card,:is(#pvz,html) body .principle,:is(#pvz,html) body .ig-prof,:is(#pvz,html) body .ig-pill-d,:is(#pvz,html) body .ct-card,:is(#pvz,html) body .cf-card,:is(#pvz,html) body .oc-card,:is(#pvz,html) body .gb-panel,:is(#pvz,html) body .faq-item,:is(#pvz,html) body .gb-cat,:is(#pvz,html) body .gal-grp,:is(#pvz,html) body .footer-m-bar,:is(#pvz,html) body .sp-chk,:is(#pvz,html) body .wl-cap{background:linear-gradient(180deg,#1E1432 55%,#271a45)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important}
:is(#pvz,html) body .faq-item::after,:is(#pvz,html) body .gb-cat::after,:is(#pvz,html) body .gal-grp::after{background:none!important;border:0!important;box-shadow:none!important}
:is(#pvz,html) body main .inc-card,:is(#pvz,html) body main .rv-card{background-color:#1E1432!important;overflow:hidden}
:is(#pvz,html) body main .inc-hd,:is(#pvz,html) body main .rv-top,:is(#pvz,html) body main .faq-item[open]>summary,:is(#pvz,html) body .gb-cat.open>.gb-cat-hd{background:linear-gradient(90deg,#2E1F58,#5B45A8)!important}:is(#pvz,html) body main .faq-item[open]>summary{border-radius:17px 17px 0 0}
:is(#pvz,html) body main .inc-out,:is(#pvz,html) body .p-gain,:is(#pvz,html) body .sp-fix{background:linear-gradient(90deg,#6F55C8,#9D7BFF)!important;border-top:0!important}
:is(#pvz,html) body main .faq-item[open],:is(#pvz,html) body .gb-cat.open,:is(#pvz,html) body .gal-grp.open{border-color:#C9A8FF!important}

/* SMALL DETAILS (owner 2026-10-12, _preview-details.html 1-8, 10, 11, 12; 9 skipped so photo particle builds are untouched) */
/* 1 lilac text highlight */
::selection{background:#C9A8FF;color:#140E22;-webkit-text-fill-color:#140E22}
/* 2 buttons press in (scale property, so it never fights existing transform animations) */
.btn,.w-pbtn,.gb-pick button,.wa-float{transition:scale .12s ease}
.btn:active,.w-pbtn:active,.gb-pick button:active,.wa-float:active{scale:.96}
/* 3 neat price numbers */
.gb-price,.m-pr,.svc-feat__price,.sp-price,.cta-prices,.rcp,.gb-save,.gb-pick,.fco-left{font-variant-numeric:tabular-nums lining-nums}
/* 4 tighter big titles */
h1{letter-spacing:-.025em}
h2{letter-spacing:-.015em}
/* 5 text links: faint line always, lilac line grows in on hover / keyboard focus */
main p a:not(.btn):not([class]),main li a:not(.btn):not([class]),.faq-a a:not(.btn){text-decoration:none;background:linear-gradient(90deg,#7B5CFF,#C9A8FF) 0 100%/0 1.5px no-repeat,linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .35s ease}
main p a:not(.btn):not([class]):hover,main p a:not(.btn):not([class]):focus-visible,main li a:not(.btn):not([class]):hover,main li a:not(.btn):not([class]):focus-visible,.faq-a a:not(.btn):hover,.faq-a a:not(.btn):focus-visible{background-size:100% 1.5px,100% 1px}
/* 6 fine grain over the background (static) */
.bg::after{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background: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")}
/* 7 lilac line under the header */
.site-header .header-bar{border-bottom-color:transparent!important;background-clip:padding-box}
.site-header .header-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#C9A8FF 30%,#7B5CFF 70%,transparent);pointer-events:none}
/* 8 cards lift on hover, desktop with a mouse only (translate property, decks excluded) */
@media (hover:hover) and (min-width:961px){
  .faq-item,.gal-grp,.oc-card,.ig-prof,.ig-pill-d,.hs-card,.gb-cat,.principle,.reason.card,.w-pbtn,.wl-cap{transition:translate .25s ease,border-color .25s ease,box-shadow .25s ease}
  .faq-item:hover,.gal-grp:hover,.oc-card:hover,.ig-prof:hover,.ig-pill-d:hover,.hs-card:hover,.gb-cat:hover,.principle:hover,.reason.card:hover,.w-pbtn:hover{translate:0 -3px;border-color:rgba(201,168,255,.5)!important;box-shadow:0 14px 30px -16px rgba(123,92,255,.7)!important}
}
/* 10 savings and premium package prices: white to lilac */
.gb-save,.gb-tier.gb-prem .gb-price{background:linear-gradient(90deg,#fff,#C9A8FF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* 11 section titles land under the header after a jump link */
[id]{scroll-margin-top:calc(var(--header-h,64px) + 16px)}
/* 12 icon tiles with a violet glow */
.inc-ico,.mobile-menu .m-ic{background:linear-gradient(135deg,rgba(123,92,255,.55),rgba(201,168,255,.18))!important;border:1px solid rgba(201,168,255,.45)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)!important}
.inc-ico{color:#fff}
@media (prefers-reduced-motion:reduce){.btn,.w-pbtn,.wa-float{transition:none}}

/* POLISH (owner 2026-10-12, _preview-polish.html) */
/* 1 one corner rounding: every card and panel 20px, pills stay round */
:is(#pvz,html) body .inc-card,:is(#pvz,html) body .rv-card,:is(#pvz,html) body .hs-card,:is(#pvz,html) body .reason.card,:is(#pvz,html) body .principle,:is(#pvz,html) body .ig-prof:not(.ig-pill):not(.ig-line),:is(#pvz,html) body .ct-card,:is(#pvz,html) body .cf-card,:is(#pvz,html) body .oc-card,:is(#pvz,html) body .gb-panel,:is(#pvz,html) body .faq-item,:is(#pvz,html) body .gb-cat,:is(#pvz,html) body .gal-grp,:is(#pvz,html) body .sp-chk,:is(#pvz,html) body .wl-cap,:is(#pvz,html) body .cta-panel,:is(#pvz,html) body .gb-tier,:is(#pvz,html) body #work>.wrap::before{border-radius:20px!important}
:is(#pvz,html) body main .faq-item[open]>summary{border-radius:19px 19px 0 0!important}
/* 2 text back on the scale */
.p-gain{font-size:1rem!important}
.bg-hub li,.bgb-fbox p{font-size:var(--fs-note,13px)!important}
/* 4 page fade removed (owner: not modern); wow options in _preview-page-change.html */

/* Page change W3 (owner 2026-10-12): leaving = .pc-fx deep violet + glowing GOAT mark pops in; arriving = html.pc-in, the same screen zooms through (mark grows and fades). Reduced motion: none. */
.pc-fx{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:#140E22;opacity:0;pointer-events:none;transition:opacity .2s ease}
.pc-fx img{width:64px;height:auto;opacity:0;scale:.6;filter:drop-shadow(0 0 18px rgba(201,168,255,.8));transition:opacity .25s,scale .45s cubic-bezier(.3,1.4,.4,1)}
.pc-fx.on{opacity:1;pointer-events:auto}.pc-fx.on img{opacity:1;scale:1}
html.pc-in body::before{content:"";position:fixed;inset:0;z-index:2147483001;background:#140E22;pointer-events:none;animation:pcBg .45s .05s ease forwards}
html.pc-in body::after{content:"";position:fixed;left:50%;top:50%;z-index:2147483002;width:64px;height:81px;margin:-40px 0 0 -32px;background:url(../img/goatbold-mark.svg) center/contain no-repeat;filter:drop-shadow(0 0 18px rgba(201,168,255,.8));pointer-events:none;animation:pcMark .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pcBg{to{opacity:0}}@keyframes pcMark{to{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.pc-fx{display:none}html.pc-in body::before,html.pc-in body::after{display:none}}