/* Poli PR: site styles. Brand kit 2026: purple is always present. */
:root{
  --purple:#5B2C6F;       /* primary: CTAs, nav, section backgrounds */
  --purple-2:#7D3C98;     /* hover, sub-headings */
  --lilac:#A569BD;        /* overlays, accents, dividers */
  --lilac-soft:#D2B4DE;   /* logo "POLI" on purple, overlines on purple */
  --purple-dark:#3A1B47;  /* dark headings, shadows */
  --purple-darker:#14051E;
  --logo-light:#D5C4DB;   /* "POLI" in the logo */
  --lilac-tint:color-mix(in srgb,var(--lilac-soft) 32%,#fff);
  --alert:#E53935;        /* urgency only */
  --text:#4A4A4A;
  --text-2:#6D6D6D;
  --neutral:#9C9C9C;
  --border:#D8D8D8;
  --bg:#F2F2F2;
  --white:#FFFFFF;
  --success:#0F9E6E;
  --error:#D92D4B;
  --radius-card:12px;
  --radius-ctrl:6px;
  --gutter:clamp(20px,6vw,96px);
  --max:1200px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --font-head:Montserrat,system-ui,sans-serif;
  --font-body:Poppins,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--purple)}a:hover{color:var(--purple-2)}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.on-purple :focus-visible{outline-color:var(--white)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--white);color:var(--purple);padding:10px 16px;border-radius:var(--radius-ctrl);font-weight:600}
.skip:focus{top:12px}

/* ---------- type */
.mont,h1,h2,h3,h4{font-family:var(--font-head);text-transform:uppercase;letter-spacing:-.02em}
h1,h2,h3,h4{margin:0;color:var(--purple);line-height:1}
.display{font-weight:900;font-size:clamp(44px,6.4vw,104px);line-height:.95;letter-spacing:-.03em}
.h2{font-weight:900;font-size:clamp(38px,5.4vw,88px);line-height:.94;letter-spacing:-.03em}
.h3{font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.overline{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--purple-2)}
.on-purple .overline{color:var(--lilac-soft)}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.6;max-width:36em}
.muted{color:var(--text-2)}
p{margin:0 0 1em}

/* ---------- layout */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(80px,10vw,140px) 0}
.section-tight{padding:clamp(56px,7vw,96px) 0}
.bg-grey{background:var(--bg)}
.on-purple{background:var(--purple);color:var(--white)}
.on-purple h1,.on-purple h2,.on-purple h3{color:var(--white)}
.on-purple a:not(.btn){color:var(--white)}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-lg{display:flex;flex-direction:column;gap:32px}
.row-between{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

/* ---------- buttons, pills, links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border-radius:var(--radius-ctrl);border:2px solid transparent;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-purple{background:var(--purple);color:var(--white)}.btn-purple:hover{background:var(--purple-2);color:var(--white)}
.btn-white{background:var(--white);color:var(--purple)}.btn-white:hover{background:var(--bg);color:var(--purple-2)}
.btn-outline{border-color:var(--purple);color:var(--purple);background:transparent}.btn-outline:hover{background:var(--purple);color:var(--white)}
.btn-ghost{border-color:var(--white);color:var(--white);background:transparent}.btn-ghost:hover{background:var(--white);color:var(--purple)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--bg);color:var(--text);font-size:12.5px;font-weight:600;line-height:1.2}
.on-purple .pill{background:rgba(255,255,255,.14);color:var(--white)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.arrow-link{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.arrow-link span{transition:transform .3s var(--ease)}
.arrow-link:hover span{transform:translateX(4px)}

/* ---------- logo (traced from the supplied logo files) */
.logo{display:inline-block;line-height:0;text-decoration:none}
.logo svg{height:44px;width:auto;display:block}
.logo.lg svg{height:64px}
.logo .poli{fill:var(--logo-light)}.logo .pr{fill:#FFFFFF}            /* on purple */
.logo.on-dark .poli{fill:#572466}.logo.on-dark .pr{fill:#FFFFFF} /* on dark neutral */
.logo.on-light .poli{fill:#4D2667}.logo.on-light .pr{fill:#676866} /* primary */

/* ---------- header / nav */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:76px;display:flex;align-items:center;transition:background .35s,box-shadow .35s}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header.solid,.site-header.always-solid{background:var(--purple);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.nav{display:flex;align-items:center;gap:32px}
.nav>a:not(.btn),.nav .dd>button{color:var(--white);text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;position:relative;padding:8px 0;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav>a:not(.btn)::after,.nav .dd>button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--white);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav>a:hover::after,.nav>a[aria-current]::after,.nav .dd>button:hover::after,.nav .dd.open>button::after{transform:scaleX(1);transform-origin:left}
.nav>a:hover{color:var(--white)}
.nav .btn{min-height:44px;padding:0 22px}
.dd{position:relative}
.dd svg.chev{width:12px;height:12px;transition:transform .3s}
.dd.open svg.chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);width:min(980px,92vw);background:var(--white);border-radius:var(--radius-card);box-shadow:0 24px 60px color-mix(in srgb,var(--purple-dark) 25%,transparent);padding:32px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--ease),visibility .25s}
.dd.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega h4{font-size:12px;letter-spacing:.2em;color:var(--purple-2);margin-bottom:12px}
.mega a{display:block;color:var(--text);text-decoration:none;font-size:14.5px;line-height:1.35;padding:6px 0}
.mega a:hover{color:var(--purple)}
.mega a.child{padding-left:12px;font-size:13.5px;color:var(--text-2);border-left:2px solid var(--border)}
.mega .all{grid-column:1/-1;border-top:1px solid var(--border);padding-top:16px}
.burger{display:none;width:44px;height:44px;border:0;background:none;color:var(--white);cursor:pointer}
.mobile-nav{display:none}
@media (max-width:1199px), (hover:none) and (pointer:coarse){
  .nav{display:none}.burger{display:inline-flex;align-items:center;justify-content:center}
  .mobile-nav{display:block;position:fixed;inset:76px 0 0 0;background:var(--purple);z-index:59;overflow:auto;padding:24px var(--gutter) 48px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
  .mobile-nav.open{opacity:1;visibility:visible;transform:none}
  .mobile-nav a{display:block;color:var(--white);text-decoration:none;font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:22px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.15)}
  .mobile-nav details summary{list-style:none;cursor:pointer;color:var(--white);font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:22px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.15)}
  .mobile-nav details a{font-size:15px;font-family:var(--font-body);text-transform:none;font-weight:600;padding:10px 0 10px 12px}
  .mobile-nav a.btn{margin-top:24px;width:100%;color:var(--purple);border:0;font-size:15px;padding:0 28px;display:flex}
}

/* ---------- page hero */
.page-hero{position:relative;background:var(--purple);color:var(--white);padding:calc(76px + clamp(64px,9vw,128px)) 0 clamp(64px,8vw,112px);overflow:hidden}
.page-hero h1{color:var(--white);max-width:14em}
.page-hero .lead{color:var(--white);opacity:.92;margin-top:24px}
.page-hero .overline{color:var(--lilac-soft);margin-bottom:20px;display:block}
.page-hero .btn-row{margin-top:36px}
.hero-star{position:absolute;left:calc(max(var(--gutter),(100% - var(--max))/2) + clamp(40px,12vw,220px));top:58%;width:clamp(300px,38vw,520px);transform:translateY(-50%);fill:none;stroke:var(--lilac);stroke-opacity:.45;stroke-width:.6;pointer-events:none;z-index:0}
.page-hero .wrap{position:relative;z-index:1}
@media (max-width:760px){.hero-star{left:18%;width:70vw}}
.hero-star.floating{left:0;top:0;will-change:transform}
.breadcrumbs{font-size:13px;margin-bottom:20px;opacity:.85}
.breadcrumbs a{color:var(--white);text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}

/* ---------- image placeholder */
.ph{position:relative;background:var(--neutral);overflow:hidden;border-radius:inherit}
.ph::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--purple) 45%,transparent);transition:background .3s}
.ph span{position:absolute;left:16px;bottom:12px;z-index:1;color:var(--white);font-size:12px;opacity:.9}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.no-overlay::after{display:none}

/* ---------- cards */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;text-decoration:none;color:var(--text);display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 36px color-mix(in srgb,var(--purple) 14%,transparent);color:var(--text)}
.card .ph{aspect-ratio:16/10}
.card:hover .ph::after{background:color-mix(in srgb,var(--purple-2) 45%,transparent)}
.card .ph img,.card .ph .zoom{transition:transform .7s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card-body{padding:28px;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.card-body h3{font-size:22px;font-weight:700;line-height:1.15}
.card-body p{margin:0}
.card-body .arrow-link{margin-top:auto;padding-top:8px}
.card-plain{padding:32px;gap:14px}
.card-plain .star{width:36px;height:36px;fill:var(--purple);transition:transform .8s var(--ease)}
.card-plain:hover .star{transform:rotate(360deg)}
.card-plain:hover{border-color:var(--lilac)}
.result{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--purple)}
.result svg{flex-shrink:0;width:18px;height:18px;margin-top:4px;fill:var(--purple)}

/* ---------- check list */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{position:relative;padding-left:34px}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;background:var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:20px;align-items:flex-start;padding:20px 24px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-head);font-weight:900;font-size:28px;color:var(--purple);line-height:1;min-width:44px}

/* ---------- service page */
.svc-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.svc-aside{position:sticky;top:108px;display:flex;flex-direction:column;gap:24px}
.aside-box{border:1px solid var(--border);border-radius:var(--radius-card);padding:28px;background:var(--white)}
.aside-box h3{font-size:14px;letter-spacing:.2em;color:var(--purple-2);margin-bottom:14px}
.aside-box ul{margin:0;padding-left:18px}
.aside-box.purple{background:var(--purple);border-color:var(--purple);color:var(--white)}
.aside-box.purple h3{color:var(--lilac-soft)}
.extra{border-top:1px solid var(--border);padding-top:24px}
.extra h3{font-size:20px;margin-bottom:10px}
@media (max-width:900px){.svc-layout{grid-template-columns:minmax(0,1fr)}.svc-aside{position:static}}

/* ---------- accordion (home services) */
.acc{border-bottom:1px solid var(--border)}
.acc-row{position:relative;width:100%;display:flex;align-items:center;gap:32px;padding:28px 24px;background:none;border:0;border-top:1px solid var(--border);cursor:pointer;text-align:left;font:inherit;color:inherit}
.acc-row::before{content:"";position:absolute;inset:0;background:var(--bg);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-io)}
.acc-row:hover::before{transform:scaleX(1)}
.acc-row>*{position:relative}
.acc-num{font-family:var(--font-head);font-weight:700;color:var(--purple-2);width:40px}
.acc-title{flex-grow:1;font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.6vw,40px);letter-spacing:-.01em;color:var(--text);transition:color .3s}
.acc-row:hover .acc-title,.acc-row[aria-expanded=true] .acc-title{color:var(--purple)}
.acc-icon{width:28px;height:28px;flex-shrink:0;transition:transform .45s var(--ease-io)}
.acc-row[aria-expanded=true] .acc-icon{transform:rotate(135deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
.acc-panel.open{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-inner{padding:0 24px 32px 96px;display:flex;flex-direction:column;gap:16px;max-width:780px}
@media (max-width:640px){.acc-row{gap:16px;padding:22px 8px}.acc-inner{padding:16px 8px 28px 64px}}
/* touch screens keep the grey row after a tap: leave a gap (same as text-to-link) above the opened text */
@media (hover:none){.acc-inner{padding-top:16px}}

/* ---------- home: intro */
.intro{position:relative;height:190vh;background:var(--purple)}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mark{position:relative;z-index:2;width:min(88vw,1180px);aspect-ratio:488/177}
.mark .layer{position:absolute;inset:0;width:100%;height:100%;will-change:transform,opacity}
.mark .poli{fill:var(--logo-light)}.mark .pr{fill:#FFFFFF}
.mark .lt{transform-box:fill-box;transform-origin:50% 100%;animation:markIn .8s var(--ease) both}
.mark .spin{transform-box:fill-box;transform-origin:50% 50%;animation:starSpin 1.1s var(--ease) .55s both}
.mark .frame{transform-box:fill-box;transform-origin:50% 50%;animation:frameFade .9s var(--ease) .2s both}
.hero-copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 var(--gutter);text-align:center;opacity:0;pointer-events:none}
.hero-copy h1{color:var(--white);max-width:12em}
.hero-copy p{color:var(--white);opacity:.92;max-width:34em;font-size:19px;margin:0}
.cue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--lilac-soft);font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.cue b{display:block;width:2px;height:48px;background:rgba(255,255,255,.25);overflow:hidden}
.cue b i{display:block;width:2px;height:48px;background:var(--white);animation:cue 1.8s ease-in-out infinite}
@keyframes markIn{0%{transform:translateY(-40%);opacity:0}70%{transform:translateY(3%);opacity:1}100%{transform:none;opacity:1}}
@keyframes starSpin{0%{transform:scale(0) rotate(-360deg);opacity:0}80%{transform:scale(1.15) rotate(10deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes frameFade{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes dropIn{0%{transform:translateY(-110%);opacity:0}70%{transform:translateY(6%);opacity:1}100%{transform:none;opacity:1}}
@keyframes starIn{0%{transform:translateX(-50%) scale(0) rotate(-360deg);opacity:0}80%{transform:translateX(-50%) scale(1.15) rotate(10deg);opacity:1}100%{transform:translateX(-50%) scale(1) rotate(0);opacity:1}}
@keyframes frameIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.drop{animation:dropIn .7s var(--ease) both}
.star-in{animation:starIn 1s var(--ease) .7s both}
.frame-in{animation:frameIn .9s var(--ease-io) .15s both}

/* ---------- home: fill headline */
.fill{position:relative;height:200vh;background:var(--purple)}
.fill .pin{flex-direction:column;align-items:flex-start;justify-content:center;gap:40px;padding:0 var(--gutter)}
.fill-text{font-family:var(--font-head);font-weight:900;text-transform:uppercase;font-size:clamp(46px,8.2vw,136px);line-height:.92;letter-spacing:-.03em;display:flex;flex-wrap:wrap;column-gap:.26em;max-width:12em;margin:0;color:var(--white)}
.fill-text .w{display:inline-flex;white-space:nowrap}
.fill-text .ch{color:color-mix(in srgb,var(--lilac-soft) 22%,transparent);display:inline-block;transform:translateY(.06em);transition:color .35s ease,transform .45s var(--ease)}
.fill-text .ch.on{color:var(--white);transform:none}
.fill-foot{display:flex;flex-direction:column;align-items:flex-start;gap:28px;width:100%;opacity:0}
.fill-foot p{margin:0;max-width:36em;color:var(--white);font-size:19px}
.founder-chip{display:flex;align-items:center;gap:14px;color:var(--white);text-decoration:none}
.founder-chip .avatar{width:64px;height:64px;border-radius:50%;border:3px solid var(--lilac-soft);overflow:hidden;flex-shrink:0}
.founder-chip b{display:block;font-family:var(--font-head);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac-soft)}
.founder-chip span{font-size:14px}

/* ---------- home: ticker */
.ticker{padding:96px 0;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--border);overflow:hidden}
.ticker .track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.ticker .track.rev{animation-direction:reverse}
.ticker:hover .track{animation-play-state:paused}
.ticker .item{font-family:var(--font-head);font-weight:900;text-transform:uppercase;font-size:8vw;line-height:1.05;letter-spacing:-.03em;color:var(--purple);white-space:nowrap;padding-right:.4em}
/* Outline text: the stroke is painted first and a fill in the background colour is painted over it,
   so only the outer edge shows and the overlapping strokes inside Montserrat's letters stay hidden. */
.outline-text,.ticker .item.outline{color:var(--white);-webkit-text-stroke:4px var(--purple);paint-order:stroke fill}
.ticker .item svg{width:.42em;height:.42em;vertical-align:.12em;margin:0 .18em;fill:var(--lilac)}

/* ---------- home: circle */
.circle-sec{position:relative;height:240vh}
.circle-sec .word{position:absolute;left:50%;white-space:nowrap;font-family:var(--font-head);font-weight:900;text-transform:uppercase;font-size:15vw;line-height:.85;letter-spacing:-.04em;pointer-events:none;will-change:transform}
.circle-sec .word.a{top:calc(50% - 26vmin);color:var(--purple);z-index:3}
.circle-sec .word.b{top:calc(50% + 26vmin);color:var(--white);-webkit-text-stroke:4px var(--purple);paint-order:stroke fill;z-index:1}
.circle{position:absolute;left:50%;top:50%;width:24vmin;height:24vmin;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%);z-index:2;background:var(--neutral);will-change:width,height}
.circle .ph{position:absolute;inset:0}
.circle .ph::after{background:color-mix(in srgb,var(--purple) calc(var(--ov,.7)*100%),transparent)}
.circle-copy{position:absolute;left:50%;top:50%;width:min(88vw,1100px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;opacity:0;z-index:2}
.circle-copy h2{color:var(--white)}
.circle-copy p{color:var(--white);max-width:32em;margin:0;font-size:19px}
.btn-outline-white{border-color:var(--white);color:var(--white);background:transparent}.btn-outline-white:hover{background:var(--white);color:var(--purple)}
.circle-copy .btn{margin-top:8px}

/* ---------- stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.stat{border-top:2px solid color-mix(in srgb,var(--lilac-soft) 50%,transparent);padding-top:24px;display:flex;flex-direction:column;gap:12px}
.stat b{font-family:var(--font-head);font-weight:900;font-size:clamp(72px,11vw,176px);line-height:.85;letter-spacing:-.04em;color:var(--white)}
.stat > span{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac-soft);max-width:18em;line-height:1.5}
.stats b small{font-size:.5em;letter-spacing:-.02em;margin-left:.04em}
.stats .stat{container-type:inline-size}
.stats b{font-size:min(clamp(72px,11vw,176px),20cqi);white-space:nowrap}
.stats.stats-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 96px}
@media (max-width:760px){.stats b{font-size:min(clamp(72px,11vw,176px),24cqi)}.stats.stats-2{grid-template-columns:minmax(0,1fr)}}
.stats.stats-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.stats.stats-4 .stat{container-type:inline-size}
.stats.stats-4 b{font-size:min(22cqi,104px);white-space:nowrap}
.work-results .head{margin-bottom:48px}
@media (max-width:1000px){.stats.stats-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.stats{grid-template-columns:minmax(0,1fr)}.stats.stats-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}}

/* ---------- horizontal work track */
.hwork{position:relative;background:var(--bg);padding:clamp(80px,10vw,140px) 0;display:flex;flex-direction:column;gap:40px}
.hwork .head{padding:0 var(--gutter)}
.hwork-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hwork .scroller{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.hwork .scroller::-webkit-scrollbar{display:none}
.hwork .track{display:flex;gap:24px;padding:4px var(--gutter) 16px;width:max-content}
.hwork .track>*{scroll-snap-align:start}
.slider-nav button:disabled{opacity:.35;cursor:default;background:var(--white);color:var(--purple)}
.hwork .card{width:min(460px,80vw);flex-shrink:0}
.hwork .more{width:340px;flex-shrink:0;background:var(--purple);border-color:var(--purple);color:var(--white);padding:36px;justify-content:space-between}
.hwork .more:hover{color:var(--white)}
.hwork .more svg{width:56px;height:56px;fill:var(--lilac-soft)}
.hwork .more b{font-family:var(--font-head);font-weight:900;text-transform:uppercase;font-size:40px;line-height:.95;letter-spacing:-.02em}
.progress{width:160px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--purple)}

/* ---------- testimonials */
.tslider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,calc((100% - 48px)/3));gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.tcard{scroll-snap-align:start;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:32px;display:flex;flex-direction:column;gap:20px}
.tcard .q{font-family:var(--font-head);font-weight:900;font-size:64px;line-height:.6;color:var(--lilac)}
.tcard blockquote{margin:0;font-size:16px}
.tcard cite{font-style:normal;font-weight:600;color:var(--purple)}
.tcard cite span{display:block;font-weight:400;color:var(--text-2);font-size:14px}
.slider-nav{display:flex;gap:8px}
.slider-nav button{width:44px;height:44px;border-radius:50%;border:2px solid var(--purple);background:var(--white);color:var(--purple);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.slider-nav button:hover{background:var(--purple);color:var(--white)}
@media (max-width:900px){.tslider{grid-auto-columns:minmax(280px,85%)}}

/* ---------- quote band */
.quote-band{text-align:center}
.quote-band blockquote{margin:0 auto;max-width:18em;font-family:var(--font-head);font-weight:900;text-transform:uppercase;font-size:clamp(30px,4vw,60px);line-height:1.05;letter-spacing:-.02em;color:var(--white)}
.quote-band cite{display:block;margin-top:24px;font-style:normal;font-family:var(--font-head);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--lilac-soft)}

/* ---------- CTA banner */
.cta{position:relative;overflow:hidden;text-align:center;padding:clamp(120px,14vw,180px) 0}
.cta .rays{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);pointer-events:none}
.cta .rays line{stroke:var(--lilac);stroke-opacity:.45;stroke-width:2}
.cta .rays path{fill:none;stroke:var(--lilac);stroke-opacity:.35;stroke-width:.8}
.cta .inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:36px}
.cta h2{display:flex;flex-direction:column;align-items:center;max-width:100%;min-width:0}
.cta h2 .ln{max-width:100%}
.cta h2 .ln{display:block;overflow:hidden}
.cta h2 .ln>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.cta h2 .ln.lilac{color:var(--lilac-soft)}
.cta.in h2 .ln>span{transform:none}
.cta.in h2 .ln:nth-child(2)>span{transition-delay:.08s}
.cta.in h2 .ln:nth-child(3)>span{transition-delay:.16s}
.cta p{max-width:32em;margin:0;font-size:19px}

/* ---------- footer */
.site-footer{background:var(--footer,var(--text));color:var(--white);padding:80px 0 40px}
.site-footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:48px}
.site-footer h4{font-size:12px;letter-spacing:.2em;color:var(--lilac-soft);margin-bottom:16px}
.site-footer a{color:var(--white);text-decoration:none;opacity:.85;display:block;padding:4px 0;font-size:14px;transition:color .2s,opacity .2s}
.site-footer a:hover{opacity:1;color:var(--lilac-soft);text-decoration:none}
.site-footer .bar{margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;opacity:.8}
.site-footer .bar a{display:inline;font-size:13px}
.socials{display:flex;gap:12px;margin-top:16px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:inline-flex!important;align-items:center;justify-content:center;padding:0!important}
.socials svg{width:18px;height:18px;fill:currentColor}
.sub-form{display:flex;gap:8px;margin-top:8px}
.sub-form input{flex:1;min-width:0;width:100%;border-radius:var(--radius-ctrl);border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--white);padding:0 14px;min-height:44px;font:inherit;font-size:15px}
.sub-form input::placeholder{color:rgba(255,255,255,.6)}
.sub-form button{min-height:44px;padding:0 16px;flex-shrink:0}
@media (max-width:900px){.site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.site-footer .cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- forms */
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field legend{font-weight:600;font-size:15px;color:var(--text)}
.field .req{color:var(--error)}
.field .hint{font-size:13.5px;color:var(--text-2)}
.input,select.input,textarea.input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-ctrl);background:var(--white);font:inherit;font-size:16px;color:var(--text);transition:border-color .2s,box-shadow .2s}
textarea.input{min-height:130px;resize:vertical}
.input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px color-mix(in srgb,var(--lilac) 25%,transparent)}
fieldset{border:0;margin:0;padding:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-ctrl);cursor:pointer;transition:border-color .2s,background .2s;font-weight:400}
.choice:hover{border-color:var(--lilac)}
.choice input{margin-top:4px;accent-color:var(--purple);width:18px;height:18px;flex-shrink:0}
.choice:has(input:checked){border-color:var(--purple);background:color-mix(in srgb,var(--lilac) 8%,transparent)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:640px){.two,.choices{grid-template-columns:minmax(0,1fr)}}
.form-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:clamp(24px,4vw,48px)}
.stepper{display:flex;gap:8px;margin-bottom:28px}
.stepper span{flex:1;height:6px;border-radius:3px;background:var(--border);transition:background .3s}
.stepper span.on{background:var(--purple)}
.step{display:none;flex-direction:column;gap:20px}
.step.active{display:flex;animation:stepIn .4s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.step h2{font-size:clamp(26px,3vw,36px)}
.step-nav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.form-msg{padding:16px 20px;border-radius:var(--radius-ctrl);background:rgba(15,158,110,.1);color:#0a6b4b;font-weight:600;display:none}
.form-msg.show{display:block}
.field.invalid .input,.field.invalid .choice{border-color:var(--error)}
.err{color:var(--error);font-size:13.5px;display:none}
.field.invalid .err{display:block}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.trust div{display:flex;gap:14px;align-items:flex-start}
.trust svg{width:28px;height:28px;flex-shrink:0;fill:var(--lilac-soft)}
.trust b{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:14px}
@media (max-width:760px){.trust{grid-template-columns:minmax(0,1fr)}}

/* ---------- portfolio */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--white);font:inherit;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;transition:all .2s}
.filters button:hover{border-color:var(--purple)}
.filters button[aria-pressed=true]{background:var(--purple);border-color:var(--purple);color:var(--white)}
.work-grid .card[hidden]{display:none}
.work-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;padding:calc(76px + 64px) 0 72px;color:var(--white);overflow:hidden;background:var(--purple)}
.work-hero .ph{position:absolute;inset:0;border-radius:0}
.work-hero .ph img{object-position:var(--cover-pos,50% 50%)}
.work-hero .ph::after{background:color-mix(in srgb,var(--purple) 68%,transparent)}
.work-hero .wrap{position:relative;z-index:1}
.work-hero h1{color:var(--white);max-width:14em}
.work-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.facts{position:sticky;top:108px;border:1px solid var(--border);border-radius:var(--radius-card);padding:28px;display:grid;gap:18px}
.facts dt{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-2)}
.facts dd{margin:4px 0 0;font-weight:600}
.prose{font-size:16px}
.prose h2{font-size:clamp(24px,2.4vw,32px);margin:1.6em 0 .6em}
.prose > h2:first-child{margin-top:0;font-size:clamp(32px,4vw,52px);line-height:1}
.prose h3{font-size:20px;margin:1.4em 0 .5em}
.prose ul,.prose ol{padding-left:22px}
.prose blockquote{margin:1.6em 0;padding-left:20px;border-left:4px solid var(--purple);font-size:20px}
.prose img{border-radius:var(--radius-card);margin:1.6em 0}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:8px}
.gallery button{padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-card);overflow:hidden;display:block;width:100%}
.gallery .ph{aspect-ratio:4/3;border-radius:var(--radius-card)}
.gallery figure:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.gallery figure:nth-child(6n+1) button{flex:1;display:flex}
.gallery figure:nth-child(6n+1) .ph{aspect-ratio:auto;flex:1;min-height:320px}
.gallery figcaption{font-size:14px;color:var(--text-2)}
@media (max-width:900px){.work-layout{grid-template-columns:minmax(0,1fr)}.facts{position:static}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery figure:nth-child(6n+1){grid-column:span 2;grid-row:auto}.gallery figure:nth-child(6n+1) .ph{min-height:0;aspect-ratio:16/9}}
.lightbox{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--purple-dark) 86%,transparent);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lightbox[hidden]{display:flex}
.lightbox.open{opacity:1;visibility:visible}
.lb-box{position:relative;background:var(--white);border-radius:var(--radius-card);width:min(1040px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px color-mix(in srgb,var(--purple-darker) 45%,transparent);transform:translateY(24px) scale(.96);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lightbox.open .lb-box{transform:none}
.lb-stage{background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:0;flex:1}
.lb-stage img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain}
.lb-stage .ph{width:100%;aspect-ratio:4/3;max-height:72vh;border-radius:0}
.lb-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border-top:1px solid var(--border)}
.lb-text{display:flex;align-items:baseline;gap:16px;min-width:0}
.lb-count{font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--purple-2);white-space:nowrap}
.lightbox p{margin:0;color:var(--text);font-size:15px}
.lb-nav{display:flex;gap:8px;flex-shrink:0}
.lightbox button{width:44px;height:44px;border-radius:50%;border:2px solid var(--purple);background:var(--white);color:var(--purple);cursor:pointer;font-size:18px;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.lightbox button:hover{background:var(--purple);color:var(--white)}
.lightbox .close{position:absolute;top:14px;right:14px;z-index:2;border-color:transparent;background:rgba(255,255,255,.92);font-size:24px}
@media (max-width:600px){.lb-foot{flex-direction:column;align-items:stretch}.lb-nav{justify-content:flex-end}}
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.pager a{padding:40px var(--gutter);text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:6px;transition:background .3s}
.pager a:hover{background:var(--bg)}
.pager a+a{text-align:right;border-left:1px solid var(--border)}
.pager b{font-family:var(--font-head);text-transform:uppercase;color:var(--purple);font-size:clamp(18px,2vw,26px)}

/* ---------- founder */
.founder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.founder .avatar{width:clamp(200px,22vw,280px);aspect-ratio:1;border-radius:50%;border:6px solid var(--purple);overflow:hidden;position:sticky;top:108px}
.founder .avatar .ph{height:100%;border-radius:50%}
.founder .avatar .ph::after{background:color-mix(in srgb,var(--lilac) 35%,transparent)}
.timeline{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:16px}
.timeline div{flex:1 1 180px;padding:20px 20px 0 0;border-right:1px solid var(--border);margin-right:20px}
.timeline div:last-child{border-right:0}
.timeline b{display:block;font-family:var(--font-head);font-weight:900;color:var(--purple);font-size:28px}
.timeline span{font-size:14px}
@media (max-width:760px){.founder{grid-template-columns:minmax(0,1fr)}.founder .avatar{position:static}}
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.logos div{aspect-ratio:3/2;border-radius:var(--radius-card);background:var(--white);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-size:13px;font-weight:600;color:var(--text-2)}
.logos div.anon{background:var(--purple);color:var(--white);border-color:var(--purple)}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- news */
.feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;text-decoration:none;color:var(--text);transition:box-shadow .3s,transform .3s var(--ease)}
.feature:hover{transform:translateY(-2px);box-shadow:0 14px 36px color-mix(in srgb,var(--purple) 14%,transparent);color:var(--text)}
.feature .ph{min-height:360px;border-radius:0}
.feature .card-body{padding:clamp(28px,4vw,48px);justify-content:center}
.feature h2{font-size:clamp(26px,3vw,40px)}
@media (max-width:800px){.feature{grid-template-columns:minmax(0,1fr)}.feature .ph{min-height:240px}}
.meta{font-size:14px;color:var(--text-2);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.article{max-width:760px;margin:0 auto}
.share{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.share a{min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;text-decoration:none}

/* ---------- reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .drop,.star-in,.frame-in,.cue b i,.ticker .track,.mark .lt,.mark .spin,.mark .frame{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .cta h2 .ln>span{transform:none;transition:none}
  *{transition-duration:.01ms!important}
}
@media (max-width:760px){
  .intro{height:160vh}.fill{height:170vh}.circle-sec{height:200vh}
  .hero-copy p,.fill-foot p,.circle-copy p{font-size:17px}
  .acc-title{font-size:20px}
}

.reveal>.card{width:100%}
.card .ph{border-radius:0}

/* ---------- home: opening slideshow */
.hero-show{position:relative;min-height:max(640px,100svh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--purple)}
.hero-show .slides{position:absolute;inset:0}
.hero-show .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero-show .slide.active{opacity:1;z-index:1}
.hero-show .slide .ph{position:absolute;inset:0;border-radius:0;background:var(--shade,var(--neutral));transform:scale(1.02)}
.hero-show .slide .ph::after{background:color-mix(in srgb,var(--purple) 80%,transparent)}
.hero-show .slide.active .ph{animation:kenburns 5.5s linear both}
.hero-show .slide:nth-child(even).active .ph{animation-name:kenburns2}
.hero-show .slide .ph span{left:auto;right:var(--gutter);bottom:36px;font-size:13px}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
@keyframes kenburns2{from{transform:scale(1.14) translate(1.5%,1%)}to{transform:scale(1.02) translate(0,0)}}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;padding-top:140px;padding-bottom:40px}
.hero-inner .lead{color:var(--white);margin:0;max-width:34em}
.hero-title{color:var(--white);font-size:clamp(56px,11vw,184px);line-height:.88;letter-spacing:-.035em;margin:0}
.hero-title .swap{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.04em;color:var(--lilac-soft)}
.hero-title .word{display:inline-block;transition:transform .55s var(--ease-io),opacity .55s}
.hero-title .word.out{transform:translateY(-105%);opacity:0}
.hero-title .word.pre{transform:translateY(105%);opacity:0;transition:none}
.hero-controls{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding-bottom:40px}
.hero-controls .dots{display:flex;gap:8px}
.hero-controls .dots button{width:56px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.hero-controls .dots i{display:block;position:relative;width:100%;height:3px;background:rgba(255,255,255,.3);overflow:hidden;border-radius:2px}
.hero-controls .dots i::after{content:"";position:absolute;inset:0;background:var(--white);transform:scaleX(0);transform-origin:left}
.hero-controls .dots button.done i::after{transform:scaleX(1)}
.hero-controls .dots button.on i::after{animation:dotfill var(--dur,6s) linear forwards}
.hero-show.paused .dots button.on i::after{animation-play-state:paused}
@keyframes dotfill{to{transform:scaleX(1)}}
.hero-controls .pause{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:transparent;color:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.hero-controls .pause svg{width:16px;height:16px;fill:currentColor}
.hero-controls .pause .i-play{display:none}
.hero-show.paused .pause .i-play{display:block}.hero-show.paused .pause .i-pause{display:none}
@media (max-width:640px){.hero-controls .dots button{width:36px}.hero-show .slide .ph span{bottom:100px}}
@media (prefers-reduced-motion:reduce){.hero-show .slide.active .ph{animation:none}.hero-show .slide{transition:none}}
.hero-inner .lead,.hero-inner .overline{text-shadow:0 1px 14px color-mix(in srgb,var(--purple-dark) 70%,transparent)}
.hero-show .slide .ph img{object-position:var(--pos,50% 50%)}
.founder-chip .avatar .ph{width:100%;height:100%;border-radius:50%}.founder-chip .avatar .ph span{display:none}
.founder-chip{gap:22px}
.founder-chip .avatar{width:120px;height:120px;border-width:4px}
.founder-chip b{font-size:20px;letter-spacing:.12em;margin-bottom:4px}
.founder-chip span{font-size:17px}
@media (max-width:640px){.founder-chip .avatar{width:88px;height:88px}.founder-chip b{font-size:17px}}
.circle-sec{background:var(--bg)}
.circle-sec .word.b{color:var(--bg)}
.circle-copy h2,.circle-copy p{text-shadow:0 1px 16px color-mix(in srgb,var(--purple-dark) 70%,transparent)}
/* In their words: lighter brand purple band */
.testimonials{background:var(--lilac-soft);color:var(--purple);overflow:hidden}
.testimonials .overline,.testimonials h2{color:var(--purple)}
.qs{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px);align-items:stretch}
.qs-side{display:flex;flex-direction:column;gap:20px}
.qs-side h2{font-size:clamp(34px,3.6vw,54px);line-height:1.02}
.qs-count{margin-top:auto;display:flex;align-items:baseline;gap:10px;font-family:var(--font-head);font-weight:800;color:var(--purple)}
.qs-count b{font-size:clamp(56px,7vw,96px);line-height:1;font-weight:900;color:var(--lilac-soft);-webkit-text-stroke:3px var(--purple);paint-order:stroke fill;font-variant-numeric:tabular-nums}
.qs-count span{font-size:18px;letter-spacing:.08em}
.qs-nav{display:flex;gap:10px}
.qs-nav button{width:56px;height:56px;border-radius:50%;border:2px solid var(--purple);background:transparent;color:var(--purple);font-size:20px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.qs-nav button:hover{background:var(--purple);color:var(--white)}
.qs-nav button:active{transform:scale(.94)}
.qs-stage{position:relative;display:grid;min-height:clamp(320px,34vw,440px);padding:clamp(48px,5vw,72px) 0 64px clamp(0px,3vw,48px);border-left:2px solid color-mix(in srgb,var(--purple) 25%,transparent)}
.qs-star{position:absolute;right:-6%;top:50%;width:clamp(260px,34vw,520px);transform:translateY(-50%) rotate(var(--spin,0deg));fill:var(--purple);opacity:.07;pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.qs-mark{position:absolute;left:clamp(0px,3vw,48px);top:0;width:auto;height:var(--qm,64px);fill:var(--lilac-soft);stroke:var(--purple);stroke-width:2.5;stroke-linejoin:miter;pointer-events:none;overflow:visible}
@media (max-width:900px){.qs-stage{--qm:52px}}
.qs-slide{grid-area:1/1;margin:0;position:relative;display:flex;flex-direction:column;justify-content:center;gap:36px;visibility:hidden}
.qs-slide.on{visibility:visible}
.qs-slide blockquote{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(22px,2.5vw,36px);line-height:1.25;letter-spacing:-.01em;color:var(--purple)}
.qs-slide .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.qs-slide.on .w{opacity:1;transform:none}
.qs-slide.out .w{opacity:0;transform:translateY(-.4em);transition-duration:.3s;transition-delay:0s!important}
.qs-slide figcaption{display:flex;align-items:center;gap:16px;opacity:0;transform:translateX(-12px);transition:opacity .5s .35s,transform .5s .35s}
.qs-slide.on figcaption{opacity:1;transform:none}
.qs-av{width:56px;height:56px;border-radius:50%;background:var(--purple);color:var(--lilac-soft);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:22px;flex:none}
.qs-av svg{width:26px;height:26px;fill:var(--lilac-soft)}
.qs-slide cite{font-style:normal;font-weight:700;font-size:18px;color:var(--purple)}
.qs-slide cite span{display:block;font-weight:400;font-size:15px;color:var(--purple);opacity:.8}
.qs-bars{position:absolute;left:clamp(0px,3vw,48px);right:0;bottom:0;display:flex;gap:8px}
.qs-bars button{flex:1;height:18px;padding:7px 0;border:0;background:none;cursor:pointer}
.qs-bars i{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--purple) 20%,transparent);position:relative;overflow:hidden}
.qs-bars i::after{content:"";position:absolute;inset:0;background:var(--purple);transform:scaleX(0);transform-origin:left}
.qs-bars button.done i::after{transform:scaleX(1)}
.qs-bars button.on i::after{animation:qsfill var(--qs-dur,7s) linear forwards}
.testimonials.paused .qs-bars button.on i::after{animation-play-state:paused}
@keyframes qsfill{to{transform:scaleX(1)}}
@media (max-width:900px){.qs{grid-template-columns:1fr;gap:32px}.qs-side{flex-direction:column}.qs-count{margin-top:8px}.qs-stage{border-left:0;padding-left:0;padding-top:64px}.qs-mark{left:-4px}.qs-bars{left:0}.qs-star{right:-30%}}
@media (prefers-reduced-motion:reduce){.qs-slide .w,.qs-slide figcaption{transition:none}.qs-bars button.on i::after{animation:none;transform:scaleX(1)}}
/* founder photos show untinted */
.founder .avatar .ph::after,.founder-chip .avatar .ph::after{display:none}
.founder .avatar img,.founder-chip .avatar img{display:block}

/* ---------- service showcase carousel */
.showcase{background:var(--bg);display:flex;flex-direction:column;gap:40px;overflow:hidden}
.showcase .row-between{align-items:flex-end;gap:24px;flex-wrap:wrap}
.sc-controls{display:flex;align-items:center;gap:20px}
.sc-controls .progress{width:160px;height:3px;background:color-mix(in srgb,var(--purple) 18%,transparent);border-radius:2px;overflow:hidden}
.sc-controls .progress i{display:block;height:100%;width:0;background:var(--purple);transition:width .3s}
.showcase .slider-nav button:disabled{opacity:.35;cursor:default}
.showcase .slider-nav button:disabled:hover{background:transparent;color:var(--purple)}
.showcase .scroller{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(var(--gutter),(100% - var(--max))/2);scrollbar-width:none;overscroll-behavior-x:contain}
.showcase .scroller::-webkit-scrollbar{display:none}
.showcase .track{display:flex;gap:24px;padding:4px max(var(--gutter),(100% - var(--max))/2) 8px;width:max-content}
.sc-item{margin:0;width:min(420px,78vw);flex-shrink:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.sc-item button{position:relative;display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-card);overflow:hidden}
.sc-item .ph{aspect-ratio:4/3;border-radius:var(--radius-card)}
.sc-item .ph img{transition:transform .7s var(--ease)}
.sc-item button:hover .ph img{transform:scale(1.05)}
.sc-item button:hover .ph::after{background:color-mix(in srgb,var(--purple) 30%,transparent)}
.sc-item .ph::after{background:color-mix(in srgb,var(--purple) 8%,transparent)}
.sc-item .ph span{display:none}
.sc-item button:not(:has(img)) .ph::after{background:color-mix(in srgb,var(--purple) 45%,transparent)}
.sc-item button:not(:has(img)) .ph span{display:block}
.sc-zoom{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--purple);display:flex;align-items:center;justify-content:center;z-index:2;transform:scale(.8);opacity:0;transition:opacity .25s,transform .25s}
.sc-zoom svg{width:20px;height:20px}
.sc-item button:hover .sc-zoom,.sc-item button:focus-visible .sc-zoom{opacity:1;transform:none}
.sc-item figcaption{font-size:14px;color:var(--text-2)}
@media (hover:none){.sc-zoom{opacity:1;transform:none}}

.sub-block{padding-top:32px;border-top:2px solid var(--purple)}
.sub-block .note{margin:4px 0 0;padding:14px 18px;background:var(--bg);border-left:4px solid var(--lilac);border-radius:0 8px 8px 0;font-size:15px}

/* ---------- service options (e.g. Social Media) */
.options{display:flex;flex-direction:column;gap:24px}
.option{position:relative;display:flex;flex-direction:column;gap:16px;padding:36px 32px 32px;border-radius:var(--radius-card);background:var(--white);border:2px solid var(--purple);transition:transform .3s var(--ease),box-shadow .3s}
.option:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--purple) 16%,transparent)}
.option .opt-num{font-family:var(--font-head);font-weight:900;font-size:48px;line-height:1;color:var(--white);-webkit-text-stroke:2px var(--purple);paint-order:stroke fill}
.option h3{margin:0;font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1.1;color:var(--purple)}
.option>p{margin:0}
.option .checks{margin:4px 0 0}
.option .note{margin:0;padding:12px 14px;background:var(--bg);border-left:4px solid var(--lilac);border-radius:0 8px 8px 0;font-size:14px}
.option .btn{margin-top:auto;align-self:flex-start}
.option:nth-child(2){background:var(--purple);color:var(--white)}
.option:nth-child(2) h3,.option:nth-child(2) .checks li{color:var(--white)}
.option:nth-child(2) .opt-num{color:var(--purple);-webkit-text-stroke-color:var(--lilac-soft)}
.option:nth-child(2) .btn{border-color:var(--white);color:var(--white)}
.option:nth-child(2) .btn:hover{background:var(--white);color:var(--purple)}
.option:nth-child(2) .checks li::before{background-color:var(--lilac-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%235B2C6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* option boxes use small star bullets instead of ticks */
.option .checks{gap:10px}
.option .checks li{padding-left:26px}
.option .checks li::before,.option:nth-child(2) .checks li::before{top:6px;width:13px;height:13px;border-radius:0;background:var(--purple);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0L59.64 29.98L89.09 18.83L71.67 45.06L98.75 61.13L67.37 63.86L71.69 95.05L50 72.22L28.31 95.05L32.63 63.86L1.25 61.13L28.33 45.06L10.91 18.83L40.36 29.98Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0L59.64 29.98L89.09 18.83L71.67 45.06L98.75 61.13L67.37 63.86L71.69 95.05L50 72.22L28.31 95.05L32.63 63.86L1.25 61.13L28.33 45.06L10.91 18.83L40.36 29.98Z'/%3E%3C/svg%3E") center/contain no-repeat}
.option:nth-child(2) .checks li::before{background:var(--lilac-soft)}
.option .checks li{padding-left:32px}
.option .checks li::before,.option:nth-child(2) .checks li::before{top:3px;width:19px;height:19px}
/* option box enquiry link */
.option .opt-cta{margin:auto -32px -32px;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:2px solid var(--purple);background:var(--bg);color:var(--purple);text-decoration:none;font-family:var(--font-head);font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;border-radius:0 0 calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px);transition:background .3s,color .3s}
.option .opt-cta i{flex:none;width:48px;height:48px;border-radius:50%;background:var(--purple);color:var(--white);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),background .3s,color .3s}
.option .opt-cta svg{width:22px;height:22px}
.option .opt-cta:hover{background:var(--purple);color:var(--white)}
.option .opt-cta:hover i{background:var(--white);color:var(--purple);transform:translateX(6px) rotate(-45deg)}
.option:nth-child(2) .opt-cta{background:rgba(255,255,255,.08);border-top-color:var(--lilac-soft);color:var(--white)}
.option:nth-child(2) .opt-cta i{background:var(--lilac-soft);color:var(--purple)}
.option:nth-child(2) .opt-cta:hover{background:var(--lilac-soft);color:var(--purple)}
.option:nth-child(2) .opt-cta:hover i{background:var(--purple);color:var(--white)}
.option{overflow:hidden}
.option:has(.opt-cta){padding-bottom:32px}

/* ---------- Version A: subtle animations inside the option boxes */
.option .opt-num{display:block;overflow:hidden;height:1.05em}
.option .opt-num>span{display:block;transform:translateY(105%);transition:transform .8s var(--ease) .1s}
.option.in .opt-num>span{transform:none}
.option h3{position:relative;display:inline-block;align-self:flex-start;padding-bottom:6px}
.option h3::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--lilac);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .35s}
.option.in h3::after{transform:scaleX(1)}
.option .checks li{opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.35s + var(--i,0) * .08s)}
.option.in .checks li{opacity:1;transform:none}
.option .checks li::before{transform:scale(0) rotate(-140deg);transition:transform .6s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.45s + var(--i,0) * .08s)}
.option.in .checks li::before{transform:none}
.option .checks li:hover::before{transform:rotate(72deg) scale(1.15);transition-delay:0s}
.option .opt-cta{transform:translateY(12px);opacity:0;transition:transform .6s var(--ease) .7s,opacity .6s var(--ease) .7s,background .3s,color .3s}
.option.in .opt-cta{transform:none;opacity:1}
.option::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--lilac) 14%,transparent),transparent 45%);opacity:0;transition:opacity .3s}
.option:hover::before{opacity:1}

/* ---------- Version B: design test */
.v2-intro{padding:clamp(72px,9vw,128px) 0 clamp(48px,6vw,80px)}
.v2-intro .wrap{display:flex;flex-direction:column;gap:28px}
.v2-statement{margin:0;font-family:var(--font-head);font-weight:800;font-size:clamp(28px,3.6vw,52px);line-height:1.15;letter-spacing:-.01em;max-width:22em;color:var(--purple)}
.v2-statement .w{color:color-mix(in srgb,var(--purple) 16%,transparent);transition:color .25s}
.v2-statement .w.on{color:var(--purple)}
.v2-sub{margin:0;max-width:40em;font-size:18px}
.v2-ticker{background:var(--lilac-soft);display:flex;align-items:stretch;overflow:hidden}
.v2-ticker-label{flex:none;display:flex;align-items:center;padding:0 24px;background:var(--purple);color:var(--white);font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;z-index:1}
.v2-ticker-run{overflow:hidden;flex:1}
.v2-ticker-track{display:flex;width:max-content;animation:v2tick 40s linear infinite}
.v2-ticker-track>span{display:flex;align-items:center;gap:22px;padding:18px 11px;white-space:nowrap;font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(18px,2vw,26px);color:var(--purple)}
.v2-ticker-track svg{width:22px;height:22px;fill:var(--purple);flex:none}
.v2-ticker:hover .v2-ticker-track{animation-play-state:paused}
@keyframes v2tick{to{transform:translateX(-50%)}}
.v2-options{background:var(--white)}
.v2-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.v2-nav{position:sticky;top:120px;display:flex;flex-direction:column;gap:16px}
.v2-nav .h2{font-size:clamp(34px,3.4vw,52px)}
.v2-nav-note{margin:0;color:var(--text-2)}
.v2-nav ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--border)}
.v2-nav li a{position:relative;display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text-2);transition:color .3s,padding .3s}
.v2-nav li a b{font-family:var(--font-head);font-weight:900;font-size:15px;letter-spacing:.08em;color:var(--lilac)}
.v2-nav li a span{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:.02em}
.v2-nav li a i{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--purple);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.v2-nav li a:hover{color:var(--purple)}
.v2-nav li a.on{color:var(--purple);padding-left:12px}
.v2-nav li a.on b{color:var(--purple)}
.v2-nav li a.on i{transform:scaleX(1)}
.v2-pairs{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding:20px;background:var(--bg);border-radius:var(--radius-card)}
.v2-pairs>span{font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-2)}
.v2-panels{display:flex;flex-direction:column;gap:32px}
.v2-panel{position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--bg);padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:22px;scroll-margin-top:110px}
.v2-panel.dark{background:var(--purple);color:var(--white)}
.v2-panel-star{position:absolute;right:-70px;top:-70px;width:260px;fill:none;stroke:var(--lilac);stroke-width:.8;opacity:.5;transform:rotate(0deg);transition:transform 1.6s var(--ease)}
.v2-panel.in .v2-panel-star{transform:rotate(51deg)}
.v2-panel-head{display:flex;align-items:flex-end;gap:20px;position:relative}
.v2-big{font-family:var(--font-head);font-weight:900;font-size:clamp(72px,8vw,120px);line-height:.8;color:var(--bg);-webkit-text-stroke:3px var(--purple);paint-order:stroke fill;clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease)}
.v2-panel.dark .v2-big{color:var(--purple);-webkit-text-stroke-color:var(--lilac-soft)}
.v2-panel.in .v2-big{clip-path:inset(0 0 0 0)}
.v2-panel h3{margin:0 0 6px;font-family:var(--font-head);font-weight:900;text-transform:uppercase;font-size:clamp(24px,2.4vw,34px);line-height:1;color:var(--purple);opacity:0;transform:translateX(-16px);transition:opacity .6s var(--ease) .25s,transform .6s var(--ease) .25s}
.v2-panel.dark h3{color:var(--white)}
.v2-panel.in h3{opacity:1;transform:none}
.v2-lead{margin:0;font-size:18px;max-width:34em;position:relative}
.v2-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;position:relative}
.v2-items li{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:var(--white);border-radius:12px;font-size:15px;line-height:1.45;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .3s;transition-delay:calc(.35s + var(--i,0) * .07s)}
.v2-panel.dark .v2-items li{background:rgba(255,255,255,.08);color:var(--white)}
.v2-panel.in .v2-items li{opacity:1;transform:none}
.v2-items li:hover{box-shadow:0 10px 24px color-mix(in srgb,var(--purple) 14%,transparent);transform:translateY(-3px);transition-delay:0s}
.v2-ico{flex:none;width:20px;height:20px;margin-top:1px;fill:var(--purple);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.v2-panel.dark .v2-ico{fill:var(--lilac-soft)}
.v2-items li:hover .v2-ico{transform:rotate(72deg) scale(1.15)}
.v2-note{margin:0;padding:14px 18px;background:var(--white);border-left:4px solid var(--lilac);border-radius:0 10px 10px 0;font-size:14px;position:relative}
.v2-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:16px;padding:8px 8px 8px 24px;border-radius:999px;background:var(--purple);color:var(--white);text-decoration:none;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;position:relative;transition:background .3s,color .3s}
.v2-cta i{width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--purple);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease)}
.v2-cta svg{width:20px;height:20px}
.v2-cta:hover{background:var(--purple-2);color:var(--white)}
.v2-cta:hover i{transform:rotate(-45deg)}
.v2-panel.dark .v2-cta{background:var(--white);color:var(--purple)}
.v2-panel.dark .v2-cta i{background:var(--purple);color:var(--white)}
.v2-panel.dark .v2-cta:hover{background:var(--lilac-soft)}
@media (max-width:900px){.v2-grid{grid-template-columns:1fr}.v2-nav{position:static}.v2-nav ol{display:none}.v2-items{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.v2-ticker-track{animation:none}.v2-big{clip-path:none}}

/* ---------- A/B design-test switch (preview only) */
.ab-switch{position:fixed;left:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:4px;padding:6px 6px 6px 16px;background:var(--white);border:2px solid var(--purple);border-radius:999px;box-shadow:0 10px 30px color-mix(in srgb,var(--purple-dark) 25%,transparent)}
.ab-switch>span{font-family:var(--font-head);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin-right:8px}
.ab-switch a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:900;color:var(--purple);text-decoration:none}
.ab-switch a.on{background:var(--purple);color:var(--white)}

/* ---------- Version C: A-style intro + A-style boxes inside B layout */
.v3-intro{padding-bottom:0}
.v3-intro .prose>:last-child{margin-bottom:0}
.v3-intro .prose>:first-child{margin-top:0}
.v2-grid .options .option{scroll-margin-top:110px}

/* ---------- page header gradient (brand purples only) */
.page-hero{background:
  radial-gradient(900px 520px at 88% 12%, color-mix(in srgb,var(--lilac) 55%,transparent), transparent 60%),
  radial-gradient(700px 480px at 8% 110%, color-mix(in srgb,var(--purple-dark) 55%,transparent), transparent 65%),
  linear-gradient(125deg, var(--purple-dark) 0%, var(--purple) 45%, var(--purple-2) 100%)}

/* ---------- intro statement with highlights (option 4), animated */
.v4-intro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.v4-star{width:40px;height:40px;fill:var(--lilac);transform:scale(0) rotate(-180deg);transition:transform 1s cubic-bezier(.3,1.5,.5,1)}
.v4-big{margin:0;font-family:var(--font-head);font-weight:800;font-size:clamp(28px,3vw,44px);line-height:1.25;max-width:24em;color:var(--purple)}
.v4-big .sw{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.25s + var(--d) * .045s)}
.v4-big em.hl{font-style:normal;padding:0 .18em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--purple),var(--purple)) no-repeat left center/0% 100%;transition:background-size .7s cubic-bezier(.7,0,.2,1),color .3s;transition-delay:calc(var(--after,1s) + var(--h) * .35s)}
.v4-sub{margin:0;font-size:18px;max-width:36em;opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--after,1s) + .9s)}
.v4-intro.in .v4-star{transform:none}
.v4-intro.in .sw{opacity:1;transform:none}
.v4-intro.in em.hl{background-size:100% 100%;color:var(--white)}
.v4-intro.in .v4-sub{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v4-star,.v4-big .sw,.v4-big em.hl,.v4-sub{transition:none!important}}
.v4-big .nw{white-space:nowrap}

/* option boxes: heading + description reveal */
.option h3{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1) .2s}
.option.in h3{clip-path:inset(0 0 0 0)}
.option>p{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .7s var(--ease) .45s,transform .7s var(--ease) .45s,filter .7s var(--ease) .45s}
.option.in>p{opacity:1;transform:none;filter:none}
.option .opt-num>span{transition:transform .8s var(--ease) .1s,color .4s}
.option:hover .opt-num>span{color:var(--lilac-soft)}
.option:nth-child(2):hover .opt-num>span{color:var(--lilac)}
.option h3::after{transition-delay:.9s}
.option .checks li{transition-delay:calc(.7s + var(--i,0) * .08s)}
.option .checks li::before{transition-delay:calc(.8s + var(--i,0) * .08s)}
.option .opt-cta{transition:transform .6s var(--ease) 1.1s,opacity .6s var(--ease) 1.1s,background .3s,color .3s}
@media (prefers-reduced-motion:reduce){.option h3{clip-path:none;transition:none}.option>p{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- work highlights: drifting policy-icon pattern */
.hwork{isolation:isolate;overflow:hidden}
.hw-pattern{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.hw-pat-box{position:absolute;left:50%;top:50%;width:max(102%,1000px);transform:translate(-50%,-50%);background:url(../images/pattern-lines.png) center/100% 100% no-repeat}
.hw-pat-box::after{content:"";position:absolute;inset:0;background:inherit;opacity:0}
.hw-pat-box{opacity:1}
.hw-pat-box{--pat:.17}
.hw-pat-box{background-image:none}
.hw-pat-box::before{content:"";position:absolute;inset:0;background:url(../images/pattern-lines.png) center/100% 100% no-repeat;opacity:var(--pat)}
.hw-pat-box i{position:absolute;display:block;background-image:url(../images/pattern-hexes.png);background-repeat:no-repeat;opacity:var(--pat);transform-origin:center;will-change:transform}
.hw-pat-box i.pop{animation:hexPop 1.1s cubic-bezier(.3,1.6,.5,1)}
@keyframes hexPop{0%{transform:scale(1);opacity:var(--pat)}35%{transform:scale(1.22);opacity:.55}100%{transform:scale(1);opacity:var(--pat)}}
@media (prefers-reduced-motion:reduce){.hw-pat-box i.pop{animation:none}}
/* overline with a short rule in front (home page section labels) */
.overline.ruled{display:inline-flex;align-items:center;gap:14px}
.overline.ruled::before{content:"";width:40px;height:2px;background:var(--purple);flex:none}
.on-purple .overline.ruled::before,.fill .overline.ruled::before,.testimonials.dark .overline.ruled::before{background:currentColor}
/* "every website includes" panel under the option boxes */
.opt-includes{background:var(--lilac-soft);border-radius:var(--radius-card);padding:32px;color:var(--purple)}
.opt-includes h3{margin:0 0 18px;font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:20px;color:var(--purple)}
.opt-includes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.opt-includes li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.opt-includes svg{flex:none;width:18px;height:18px;margin-top:2px;fill:var(--purple)}
@media (max-width:700px){.opt-includes ul{grid-template-columns:1fr}}
/* equal space: top edge to number = last point to enquire strip */
.option .opt-cta{margin-top:20px}
/* inclusions: flowing list, no empty grid gaps */
.opt-includes ul{display:flex;flex-wrap:wrap;gap:12px 32px}
.opt-includes li{flex:0 1 auto}
.opt-includes ul{display:block;line-height:1.9}
.opt-includes li{display:inline;margin-right:18px}
.opt-includes li svg{display:inline-block;vertical-align:-3px;margin:0 8px 0 0}
.opt-includes li span{display:inline}
.opt-includes .nw{white-space:nowrap}
/* inclusions: one point per line, two columns */
.opt-includes ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;line-height:1.5}
.opt-includes li{display:flex;gap:10px;align-items:flex-start;margin:0}
.opt-includes li .nw{white-space:normal;display:contents}
.opt-includes li svg{margin:3px 0 0;vertical-align:0}
@media (max-width:700px){.opt-includes ul{grid-template-columns:1fr}}
.qs-slide blockquote{margin-top:calc(-.3em + 2px)}
/* testimonial: smaller quote icon, quote sits evenly between icon and name */
.qs-stage{--qm:48px}
@media (max-width:900px){.qs-stage{--qm:40px}}
.qs-slide{justify-content:flex-start;gap:0}
.qs-slide figcaption{margin-top:var(--qgap,15px)}
.qs-slide figcaption{margin-top:5px}
@media (max-width:900px){.qs-slide figcaption{margin-top:1px}}

/* testimonial: icon + quote + name centred between the top of the line and the progress bars, min 40px each side */
.qs-stage{padding-top:40px;padding-bottom:calc(18px + 40px);min-height:0}
.qs-slide{justify-content:center}
.qs-slide .qs-mark{position:static;display:block;flex:none;height:var(--qm);width:auto;margin:0 0 15px}
.qs-slide .qs-mark{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.qs-slide.on .qs-mark{opacity:1;transform:none}
.qs-slide.out .qs-mark{opacity:0}
@media (max-width:900px){.qs-stage{padding-top:40px}}
.qs-slide .qs-mark{align-self:flex-start;width:calc(var(--qm) * 92 / 66)}

/* testimonial: 40px min from icon to quote and from quote to name; shorter quotes sit centred between them */
.qs-slide{justify-content:flex-start}
.qs-slide .qs-mark{margin-bottom:40px}
.qs-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.qs-slide blockquote{margin:calc(-.3em + 2px) 0 calc(-.3em + 2px)}
.qs-slide figcaption{margin-top:40px}
@media (max-width:900px){.qs-slide figcaption{margin-top:37px}}
/* keep 40px either side of every quote; the whole block centres in the space instead */
.qs-body{flex:none}
.qs-slide{justify-content:center}
/* support service panel under the website options (e.g. Website care & hosting) */
.opt-support{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:var(--radius-card);background:var(--purple);color:var(--white);text-decoration:none;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.opt-support:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--purple) 25%,transparent);color:var(--white)}
.opt-support-tag{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac-soft)}
.opt-support-tag svg{width:16px;height:16px;fill:var(--lilac-soft)}
.opt-support h3{margin:0;font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:22px;color:var(--white)}
.opt-support p{margin:0;opacity:.92}
.opt-support-cta{margin-top:8px;display:flex;align-items:center;gap:14px;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.opt-support-cta i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--lilac-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease)}
.opt-support-cta svg{width:18px;height:18px}
.opt-support:hover .opt-support-cta i{transform:translateX(6px) rotate(-45deg)}

/* ---------- one enquiry for the whole service: boxes without strips + floating button */
.option.no-cta{padding-bottom:36px}
.float-cta{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:75;display:flex;align-items:center;gap:16px;padding:10px 10px 10px 24px;border-radius:999px;background:var(--purple);color:var(--white);text-decoration:none;box-shadow:0 14px 40px color-mix(in srgb,var(--purple-dark) 35%,transparent);opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;transition:opacity .4s var(--ease),transform .5s cubic-bezier(.3,1.4,.5,1),background .3s}
.float-cta.show{opacity:1;transform:none;pointer-events:auto}
.float-cta:hover{background:var(--purple-2);color:var(--white)}
.float-cta-text{display:flex;flex-direction:column;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.float-cta-text small{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--lilac-soft)}
.float-cta i{flex:none;width:48px;height:48px;border-radius:50%;background:var(--lilac-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease)}
.float-cta svg{width:22px;height:22px}
.float-cta:hover i{transform:rotate(-45deg)}
.float-cta.show i{animation:ctaNudge 3.2s ease-in-out 1.2s infinite}
@keyframes ctaNudge{0%,86%,100%{transform:none}90%{transform:translateX(4px)}94%{transform:translateX(-2px)}}
@media (max-width:600px){.float-cta{left:16px;right:16px;justify-content:space-between}}
@media (prefers-reduced-motion:reduce){.float-cta{transition:opacity .2s}.float-cta.show i{animation:none}}
/* floating button in lilac so it stands out on white and purple sections alike */
.float-cta{background:var(--lilac-soft);color:var(--purple);border:2px solid var(--purple)}
.float-cta:hover{background:var(--white);color:var(--purple)}
.float-cta-text small{color:var(--purple-2)}
.float-cta i{background:var(--purple);color:var(--white)}
/* enquiry box under "Pairs well with" in the sticky options menu */
.nav-enquire{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:20px 20px 20px 24px;border-radius:var(--radius-card);background:var(--purple);color:var(--white);text-decoration:none;transition:background .3s,transform .3s var(--ease)}
.nav-enquire span{display:flex;flex-direction:column;gap:2px;font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.nav-enquire small{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--lilac-soft)}
.nav-enquire i{flex:none;width:48px;height:48px;border-radius:50%;background:var(--lilac-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease)}
.nav-enquire svg{width:22px;height:22px}
.nav-enquire:hover{background:var(--purple-2);color:var(--white);transform:translateY(-2px)}
.nav-enquire:hover i{transform:rotate(-45deg)}
/* compact floating widget, bottom right */
.float-cta{padding:8px 8px 8px 22px;gap:12px}
.float-cta-text{font-size:13px;letter-spacing:.14em}
@media (max-width:600px){.float-cta{left:auto;right:16px;justify-content:flex-start}}
/* two-column star lists inside option boxes (single-enquiry service pages) */
.option.no-cta .checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media (max-width:700px){.option.no-cta .checks{grid-template-columns:1fr}}
/* flow the two columns top-to-bottom so a long point never leaves a gap beside it */
.option.no-cta .checks{display:block;columns:2;column-gap:28px}
.option.no-cta .checks li{break-inside:avoid;margin-bottom:14px}
.option.no-cta .checks li:last-child{margin-bottom:0}
@media (max-width:700px){.option.no-cta .checks{columns:1}}
/* tighter line spacing inside each point */
.option.no-cta .checks li{line-height:1.25}
.option.no-cta .checks li::before{top:0}
/* menu service names in title case */
.mega a,.mobile-nav details a{text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.mega .all a{text-transform:uppercase}
.mega a.child{font-size:12px}
.svc-aside .nav-enquire{margin-top:0}
/* two columns split evenly: first column gets the extra point, any space falls at the end of column two */
.checks-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-items:start;margin-top:4px}
.option.no-cta .checks-2col .checks{columns:1;margin:0}
@media (max-width:700px){.checks-2col{grid-template-columns:1fr}.checks-2col .checks:first-child{margin-bottom:14px!important}}
.option.no-cta > .checks{columns:1}

/* showcase: video + article items */
.sc-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--purple);color:var(--white);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .3s var(--ease),background .3s}
.sc-play svg{width:28px;height:28px;margin-left:4px}
.sc-item button:hover .sc-play{transform:scale(1.1);background:var(--purple-2)}
.sc-badge{position:absolute;left:14px;top:14px;z-index:2;background:var(--white);color:var(--purple);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:4px}
.sc-item button.is-video{cursor:pointer}
.sc-item button.is-video .sc-zoom{display:none}
.lb-stage .lb-video{display:block;width:min(100%,calc(72vh * 16 / 9));aspect-ratio:16/9;max-height:72vh;border:0;background:#000}
.lb-stage .ph span{display:block}
.sc-item button{aspect-ratio:4/3;width:100%}.sc-item button .ph{height:100%;width:100%;aspect-ratio:auto}

/* support panel + includes box: same entrance animation as the option boxes */
.opt-support h3,.opt-includes h3{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1) .2s}
.opt-support.in h3,.opt-includes.in h3{clip-path:inset(0 0 0 0)}
.opt-support>p{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .7s var(--ease) .45s,transform .7s var(--ease) .45s,filter .7s var(--ease) .45s}
.opt-support.in>p{opacity:.92;transform:none;filter:none}
.opt-support .opt-support-cta{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) .8s,transform .6s var(--ease) .8s}
.opt-support.in .opt-support-cta{opacity:1;transform:none}
.opt-includes li{opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.6s + var(--i,0) * .08s)}
.opt-includes.in li{opacity:1;transform:none}
.opt-includes li svg{transform:scale(0) rotate(-140deg);transition:transform .6s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.7s + var(--i,0) * .08s)}
.opt-includes.in li svg{transform:none}
.opt-includes li:hover svg{transform:rotate(72deg) scale(1.15);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.opt-support h3,.opt-includes h3{clip-path:none;transition:none}.opt-support>p,.opt-support .opt-support-cta,.opt-includes li,.opt-includes li svg{opacity:1;transform:none;filter:none;transition:none}}

/* ===== Work page design options (preview) ===== */
.design-switch{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--white);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.15);border-radius:999px;padding:6px 8px;font-size:13px;max-width:calc(100vw - 32px)}
.design-switch span{padding:0 8px;font-weight:700;color:var(--purple)}
.design-switch a{padding:7px 12px;border-radius:999px;color:var(--purple);text-decoration:none;font-weight:600}
.design-switch a[aria-current]{background:var(--purple);color:var(--white)}
.work-grid [hidden]{display:none!important}

/* A: The index */
.wx-index{border-top:2px solid var(--purple)}
.wx-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,300px) 56px;gap:24px;align-items:center;padding:30px 12px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--purple);isolation:isolate;overflow:visible}
.wx-row::before{content:"";position:absolute;inset:0;background:var(--purple);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}
.wx-row:hover::before,.wx-row:focus-visible::before{transform:scaleY(1)}
.wx-num{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--lilac);transition:color .3s}
.wx-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.wx-title{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.6vw,52px);line-height:1;letter-spacing:-.01em;transition:color .3s,transform .45s var(--ease)}
.wx-meta{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--text-2);transition:color .3s}
.wx-res{display:flex;gap:10px;font-weight:600;font-size:15px;line-height:1.35;transition:color .3s}
.wx-res svg{flex:none;width:16px;height:16px;fill:var(--lilac);margin-top:2px}
.wx-go{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--purple);display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease)}
.wx-go svg{width:18px;height:18px}
.wx-row:hover .wx-title{color:var(--white);transform:translateX(12px)}
.wx-row:hover .wx-num,.wx-row:hover .wx-meta{color:var(--lilac-soft)}
.wx-row:hover .wx-res{color:var(--white)}
.wx-row:hover .wx-go{background:var(--lilac-soft);border-color:var(--lilac-soft);transform:rotate(-45deg)}
.wx-peek{position:absolute;right:120px;top:50%;width:260px;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;pointer-events:none;opacity:0;transform:translate(var(--px,0),-50%) rotate(-4deg) scale(.85);transition:opacity .3s,transform .45s var(--ease);z-index:3;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.wx-peek .ph{height:100%;aspect-ratio:auto;border-radius:0}
.wx-row:hover .wx-peek{opacity:1;transform:translate(var(--px,0),-50%) rotate(3deg) scale(1)}
.wx-row:hover .wx-res{opacity:0}
@media (max-width:800px){.wx-row{grid-template-columns:40px minmax(0,1fr) 44px;gap:14px}.wx-res{grid-column:2;grid-row:2}.wx-go{width:44px;height:44px}.wx-peek{display:none}.wx-row:hover .wx-res{opacity:1}}

/* B: Bento */
.wb-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;grid-auto-flow:dense;gap:18px}
.wb-tile{position:relative;border-radius:var(--radius-card);overflow:hidden;text-decoration:none;display:block;background:var(--bg);color:var(--purple);transition:transform .4s var(--ease),box-shadow .4s}
.wb-tile:hover{transform:translateY(-6px);box-shadow:0 22px 44px color-mix(in srgb,var(--purple) 22%,transparent)}
.wb-img{position:absolute;inset:0}
.wb-img .ph{height:100%;aspect-ratio:auto;border-radius:0}
.wb-img .ph img{transition:transform .8s var(--ease)}
.wb-tile:hover .wb-img .ph img{transform:scale(1.06)}
.wb-body{position:absolute;inset:auto 0 0 0;padding:24px;display:flex;flex-direction:column;gap:8px;z-index:2}
.wb-level{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:var(--white);color:var(--purple);padding:5px 10px;border-radius:4px}
.wb-title{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1.05}
.wb-res{display:flex;gap:8px;font-weight:600;font-size:14px;line-height:1.35}
.wb-res svg{flex:none;width:15px;height:15px;margin-top:2px}
.wb-more{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s}
.wb-more svg{width:16px;height:16px;transition:transform .3s}
.wb-tile:hover .wb-more,.wb-tile:focus-visible .wb-more{max-height:30px;opacity:1}
/* image tiles: purple wash from bottom so text reads */
.wb-t1 .wb-body,.wb-t3 .wb-body,.wb-t4 .wb-body{color:var(--white);background:linear-gradient(to top,color-mix(in srgb,var(--purple-dark) 92%,transparent),color-mix(in srgb,var(--purple-dark) 0%,transparent))}
.wb-t1 .wb-res svg,.wb-t3 .wb-res svg,.wb-t4 .wb-res svg{fill:var(--lilac-soft)}
/* big feature: purple, text-led */
.wb-t0{grid-column:span 2;grid-row:span 2;background:var(--purple);color:var(--white)}
.wb-t0 .wb-img{inset:auto 24px 24px auto;width:44%;aspect-ratio:4/3;top:24px;height:auto;border-radius:10px;overflow:hidden;transform:rotate(3deg)}
.wb-t0 .wb-body{inset:0;justify-content:flex-end;padding:36px;max-width:60%}
.wb-t0 .wb-title{font-size:clamp(30px,3.4vw,48px)}
.wb-t0 .wb-res{font-size:17px}
.wb-t0 .wb-res svg{fill:var(--lilac-soft)}
.wb-t0 .wb-more{max-height:30px;opacity:1}
.wb-t1{grid-column:span 2}
.wb-t2{background:var(--lilac-soft)}
.wb-t2 .wb-img,.wb-t5 .wb-img{display:none}
.wb-t2 .wb-body,.wb-t5 .wb-body{inset:0;justify-content:space-between}
.wb-t2 .wb-title,.wb-t5 .wb-title{font-size:26px}
.wb-t2 .wb-res svg{fill:var(--purple)}
.wb-t3{grid-row:span 2}
.wb-t4{grid-column:span 2}
.wb-t5{background:var(--white);border:2px solid var(--purple)}
.wb-t5 .wb-res svg{fill:var(--lilac)}
@media (max-width:900px){.wb-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}.wb-t0 .wb-body{max-width:none}.wb-t0 .wb-img{display:none}}
@media (max-width:560px){.wb-bento{grid-template-columns:1fr}.wb-tile{grid-column:auto!important;grid-row:span 1!important}.wb-t0{grid-row:span 2!important}}

/* C: Case files */
.wc-files{display:flex;flex-direction:column;gap:clamp(56px,8vw,110px)}
.wc-file{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;text-decoration:none;color:var(--text)}
.wc-file.flip .wc-img{order:2}
.wc-img{position:relative;display:block}
.wc-img .ph{aspect-ratio:4/3;border-radius:var(--radius-card)}
.wc-img .ph img{transition:transform .9s var(--ease)}
.wc-file:hover .wc-img .ph img{transform:scale(1.05)}
.wc-img::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--lilac);border-radius:var(--radius-card);z-index:-1;transition:inset .5s var(--ease)}
.wc-file.flip .wc-img::after{inset:18px 18px -18px -18px}
.wc-file:hover .wc-img::after{inset:8px -8px -8px 8px}
.wc-file.flip:hover .wc-img::after{inset:8px 8px -8px -8px}
.wc-img{isolation:isolate}
.wc-num{position:absolute;left:-10px;top:-44px;font-family:var(--font-head);font-weight:800;font-size:clamp(70px,9vw,130px);line-height:1;color:transparent;-webkit-text-stroke:2px var(--purple);z-index:2;pointer-events:none}
.wc-file.flip .wc-num{left:auto;right:-10px}
.wc-body{display:flex;flex-direction:column;gap:16px}
.wc-body .overline{margin:0}
.wc-title{font-family:var(--font-head);font-weight:800;text-transform:uppercase;color:var(--purple);font-size:clamp(28px,3.4vw,46px);line-height:1.02}
.wc-sum{font-size:17px}
.wc-res{display:flex;flex-direction:column;gap:4px;background:var(--lilac-soft);color:var(--purple);border-left:5px solid var(--purple);padding:16px 20px;border-radius:0 10px 10px 0;font-family:var(--font-head);font-weight:800;font-size:18px;line-height:1.25}
.wc-res-lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.wc-tags{display:flex;flex-wrap:wrap;gap:8px}
.wc-tags span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--purple);color:var(--purple);border-radius:999px;padding:5px 12px}
.wc-body .wb-more{max-height:none;opacity:1;color:var(--purple)}
.wc-file:hover .wb-more svg{transform:translateX(6px)}
@media (max-width:800px){.wc-file{grid-template-columns:1fr}.wc-file.flip .wc-img{order:0}.wc-num{top:-34px}}
.wx-peek{right:80px;width:280px;transform:translate(var(--px,0),-50%) rotate(-4deg) scale(.85)}
.wx-row{grid-template-columns:64px minmax(0,1fr) 280px 56px}
.wb-tile .ph span{display:none}
.wc-file:hover .wc-sum{color:var(--text)}
.wc-img .ph span{display:none}
.wb-full{grid-column:1/-1}

/* ===== Bento v2: every tile is a colour block with a tilted image window ===== */
.wb-bento{grid-auto-rows:250px}
.wb-tile .wb-img,.wb-t0 .wb-img,.wb-t2 .wb-img,.wb-t5 .wb-img{display:block;position:absolute;inset:auto;top:20px;right:20px;width:46%;max-width:300px;aspect-ratio:4/3;height:auto;border-radius:10px;overflow:hidden;transform:rotate(3deg);box-shadow:0 12px 28px rgba(0,0,0,.18);transition:transform .5s var(--ease)}
.wb-tile:nth-child(even) .wb-img{transform:rotate(-3deg)}
.wb-tile:hover .wb-img{transform:rotate(0deg) scale(1.04)}
.wb-tile .wb-body,.wb-t0 .wb-body,.wb-t1 .wb-body,.wb-t2 .wb-body,.wb-t3 .wb-body,.wb-t4 .wb-body,.wb-t5 .wb-body{inset:auto 0 0 0;background:none;justify-content:flex-end;max-width:none;padding:22px}
.wb-tile .wb-title,.wb-t2 .wb-title,.wb-t5 .wb-title{font-size:20px}
.wb-t0 .wb-title{font-size:clamp(30px,3.4vw,48px)}
.wb-t0 .wb-body{padding:36px;max-width:60%}
.wb-t0 .wb-img{top:28px;right:28px;width:44%;max-width:none}
/* colour blocks */
.wb-t0,.wb-t3{background:var(--purple);color:var(--white);border:0}
.wb-t1,.wb-t4{background:var(--lilac-soft);color:var(--purple);border:0}
.wb-t2{background:var(--bg);color:var(--purple);border:0}
.wb-t5{background:var(--white);color:var(--purple);border:2px solid var(--purple)}
.wb-t0 .wb-res svg,.wb-t3 .wb-res svg{fill:var(--lilac-soft)}
.wb-t1 .wb-res svg,.wb-t4 .wb-res svg,.wb-t2 .wb-res svg{fill:var(--purple)}
.wb-t5 .wb-res svg{fill:var(--lilac)}
.wb-t2 .wb-level{background:var(--purple);color:var(--white)}
.wb-t5 .wb-level{background:var(--lilac-soft)}
/* wide tiles: window sits right, text left */
.wb-t1 .wb-img,.wb-t4 .wb-img,.wb-full .wb-img{width:38%;top:50%;transform:translateY(-50%) rotate(3deg)}
.wb-t1:hover .wb-img,.wb-t4:hover .wb-img,.wb-full:hover .wb-img{transform:translateY(-50%) scale(1.04)}
.wb-t1 .wb-body,.wb-t4 .wb-body{max-width:58%}
.wb-full .wb-img{width:24%}
.wb-full .wb-body{max-width:70%}
/* tall tile */
.wb-t3 .wb-img{width:calc(100% - 40px);max-width:none}
@media (max-width:900px){.wb-bento{grid-auto-rows:240px}.wb-t0 .wb-body{max-width:none}.wb-t0 .wb-img{display:block;width:40%}}
@media (max-width:560px){.wb-tile .wb-img{width:42%}.wb-t1 .wb-body,.wb-t4 .wb-body,.wb-full .wb-body{max-width:none}.wb-t1 .wb-img,.wb-t4 .wb-img,.wb-full .wb-img{top:20px;transform:rotate(3deg)}}
/* bento v2 fixes: one transform built from variables */
.wb-tile .wb-img{--ty:0;--rot:3deg;--sc:1;transform:translateY(var(--ty)) rotate(var(--rot)) scale(var(--sc))!important}
.wb-tile:nth-child(even) .wb-img{--rot:-3deg}
.wb-t1 .wb-img,.wb-t4 .wb-img,.wb-full .wb-img{--ty:-50%}
.wb-tile:hover .wb-img{--rot:0deg;--sc:1.04}
.wb-t1 .wb-body,.wb-t4 .wb-body,.wb-full .wb-body{color:var(--purple)}
.wb-t1 .wb-res svg,.wb-t4 .wb-res svg{fill:var(--purple)}
.wb-full .wb-img{width:20%}
@media (max-width:560px){.wb-t1 .wb-img,.wb-t4 .wb-img,.wb-full .wb-img{--ty:0;width:42%}}
.wb-t4{background:var(--purple)}
.wb-t4 .wb-body{color:var(--white)}
.wb-t4 .wb-res svg{fill:var(--lilac-soft)}
/* bento: 12-column grid so rows can split 2/3 + 1/3 */
.wb-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
.wb-tile{grid-column:span 3}
.wb-t0,.wb-t1,.wb-t4{grid-column:span 6}
.wb-full{grid-column:1/-1}
.wb-w8{grid-column:span 8}
.wb-w4{grid-column:span 4}
.wb-w4 .wb-img{--ty:0;top:20px;width:46%}
.wb-w4 .wb-body{max-width:none}
@media (max-width:900px){.wb-bento{grid-template-columns:repeat(6,minmax(0,1fr))}.wb-tile{grid-column:span 3}.wb-t0,.wb-t1,.wb-t4,.wb-w8,.wb-w4{grid-column:span 6}}
@media (max-width:560px){.wb-bento{grid-template-columns:1fr}.wb-tile,.wb-t0,.wb-t1,.wb-t4,.wb-w8,.wb-w4{grid-column:1/-1!important}}
.wb-tile.wb-grey{background:var(--bg);color:var(--purple);border:0}
.wb-tile.wb-grey .wb-body{color:var(--purple)}
.wb-tile.wb-grey .wb-level{background:var(--purple);color:var(--white)}
.wb-tile.wb-grey .wb-res svg{fill:var(--purple)}

/* Our Work filters: purple tag bar */
.row-between:has(.filters){flex-direction:column;align-items:flex-start}
.filters{background:var(--purple);padding:10px;border-radius:10px;gap:6px;align-self:stretch}
.filters button{min-height:0;padding:9px 14px;border-radius:4px;border:0;background:transparent;color:var(--lilac-soft);font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:background .25s,color .25s}
.filters button:hover{color:var(--white);background:rgba(255,255,255,.1)}
.filters button[aria-pressed=true]{background:var(--white);color:var(--purple)}
/* filters: individual purple tags, centred */
.row-between:has(.filters){align-items:center;text-align:center}
.filters{background:none;padding:0;border-radius:0;justify-content:center;gap:8px;align-self:center}
.filters button{background:var(--purple);color:var(--lilac-soft);border:2px solid var(--purple);padding:8px 14px}
.filters button:hover{background:var(--purple-2);border-color:var(--purple-2);color:var(--white)}
.filters button[aria-pressed=true]{background:var(--white);color:var(--purple);border-color:var(--purple)}
.row-between:has(.filters) > p{margin-left:auto!important;margin-right:auto!important}
.filters{gap:6px}.filters button{padding:8px 11px;letter-spacing:.1em}
/* project pages: round "All work" button between Previous and Next */
.pager{position:relative}
.pager a.pager-all{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;padding:0;border:0!important;border-radius:50%;background:var(--purple);color:var(--white);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;box-shadow:0 0 0 8px var(--white);transition:background .3s,color .3s,transform .4s var(--ease)}
.pager a.pager-all:hover{background:var(--lilac-soft);color:var(--purple);transform:translate(-50%,-50%) rotate(-8deg) scale(1.06)}
.pager a:not(.pager-all){padding-left:var(--gutter);padding-right:var(--gutter)}
.pager a:first-child{padding-right:90px}
.pager a:nth-child(2){padding-left:90px}
@media (max-width:700px){.pager a.pager-all{width:80px;height:80px;font-size:11px;box-shadow:0 0 0 6px var(--white)}.pager a:first-child{padding-right:52px}.pager a:nth-child(2){padding-left:52px}}
.pager a:not(.pager-all):first-child{padding-right:90px}
.pager a:not(.pager-all):nth-child(2){padding-left:90px}
@media (max-width:700px){.pager a:not(.pager-all):first-child{padding-right:52px}.pager a:not(.pager-all):nth-child(2){padding-left:52px}.pager b{font-size:15px}}
/* Our Work: random "pop" to hint the boxes are clickable */
@keyframes wbPop{0%{transform:none}35%{transform:translateY(-6px) scale(1.025)}70%{transform:translateY(1px) scale(.995)}100%{transform:none}}
@keyframes wbPopImg{0%,100%{--sc:1}40%{--sc:1.08}}
.wb-tile.pop{animation:wbPop .7s cubic-bezier(.3,1.4,.5,1);box-shadow:0 18px 36px color-mix(in srgb,var(--purple) 20%,transparent)}
.wb-tile.pop .wb-img{--rot:0deg;--sc:1.06}
@media (prefers-reduced-motion:reduce){.wb-tile.pop{animation:none}}
/* Our Work: image windows gently float (replaces the box pop) */
.wb-tile.pop{animation:none;box-shadow:none}
.wb-tile.pop .wb-img{--rot:3deg;--sc:1}
.wb-tile:nth-child(even).pop .wb-img{--rot:-3deg}
@keyframes wbFloat{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -7px;rotate:1.5deg}50%{translate:0 -2px;rotate:0deg}75%{translate:0 -6px;rotate:-1.5deg}}
.wb-tile .wb-img{animation:wbFloat 5s ease-in-out infinite}
.wb-tile:nth-child(3n+1) .wb-img{animation-duration:5.6s;animation-delay:-1.2s}
.wb-tile:nth-child(3n+2) .wb-img{animation-duration:4.6s;animation-delay:-2.7s}
.wb-tile:nth-child(3n) .wb-img{animation-duration:6.2s;animation-delay:-.4s}
.wb-tile:hover .wb-img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.wb-tile .wb-img{animation:none}}
/* Our Work: no floating; instead a random image window shows its hover state for a moment */
.wb-tile .wb-img,.wb-tile:nth-child(3n+1) .wb-img,.wb-tile:nth-child(3n+2) .wb-img,.wb-tile:nth-child(3n) .wb-img{animation:none}
.wb-tile.peek .wb-img{--rot:0deg;--sc:1.04}
.wb-tile.peek .wb-img .ph img{transform:scale(1.06)}
/* About: vertical milestones in the story aside; 3-across timeline in the founder section */
.aside-box .timeline{flex-direction:column;border-top:0;margin:0;gap:16px}
.aside-box .timeline div{flex:none;border-right:0;margin:0;padding:0 0 0 16px;border-left:3px solid var(--lilac)}
.aside-box .timeline b{font-size:24px}
.founder .timeline div{flex:1 1 28%}
html{scroll-behavior:smooth}#founder{scroll-margin-top:90px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* About quote band: civic icon pattern (white on purple) with popping hexagons */
.quote-band{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(90px,11vw,150px);padding-bottom:clamp(90px,11vw,150px)}
.quote-band .hw-pat-box{--pat:.14}
.quote-band .hw-pat-box::before,.quote-band .hw-pat-box i{filter:brightness(0) invert(1)}
.quote-band .hw-pat-box i.pop{animation-name:hexPopLight}
@keyframes hexPopLight{0%{transform:scale(1);opacity:var(--pat)}35%{transform:scale(1.22);opacity:.5}100%{transform:scale(1);opacity:var(--pat)}}

/* all bento titles match the feature tile */
.wb-bento .wb-tile .wb-title{font-size:clamp(24px,2.5vw,32px);line-height:1.02}
@media (max-width:900px){.wb-bento .wb-tile .wb-title{font-size:30px}}
@media (min-width:561px) and (max-width:900px){.wb-bento .wb-tile:not(.wb-t0):not(.wb-t1):not(.wb-t4):not(.wb-w8):not(.wb-w4):not(.wb-full){container-type:inline-size}.wb-bento .wb-tile:not(.wb-t0):not(.wb-t1):not(.wb-t4):not(.wb-w8):not(.wb-w4):not(.wb-full) .wb-title{font-size:min(30px,calc(9.6cqi - 4px))}}

/* ---------- video reel (work pages): slow auto-scrolling marquee */
.vreel-sec{overflow:hidden}
.vreel{overflow:hidden;padding:8px 0 24px;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.vreel-track{display:flex;gap:28px;width:max-content;padding-left:28px;will-change:transform}
@keyframes vreel{to{transform:translateX(-50%)}}
.vreel-item{flex:none;width:clamp(280px,34vw,460px);display:flex;flex-direction:column;gap:14px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--purple);font:inherit}
.vreel-media{position:relative;display:block;border-radius:var(--radius-card);overflow:hidden;box-shadow:0 14px 34px color-mix(in srgb,var(--purple) 18%,transparent);transition:transform .45s var(--ease),box-shadow .45s}
.vreel-media .ph{aspect-ratio:16/9;border-radius:0}
.vreel-media .ph span{display:none}
.vreel-item:hover .vreel-media,.vreel-item:focus-visible .vreel-media{transform:translateY(-6px);box-shadow:0 22px 44px color-mix(in srgb,var(--purple) 28%,transparent)}
.vreel-play{position:absolute;left:50%;top:50%;z-index:2;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.vreel-play svg{width:26px;height:26px;fill:var(--purple);margin-left:4px}
.vreel-item:hover .vreel-play{transform:scale(1.1)}
.vreel-cap{display:flex;flex-direction:column;gap:4px;padding:0 4px}
.vreel-outlet{font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-2)}
.vreel-title{font-family:var(--font-head);font-weight:800;font-size:18px;line-height:1.2;text-transform:uppercase}
@media (max-width:760px){.vreel-sec .gal-head .slider-nav{display:flex}}

/* ---------- work gallery carousel: 1 big + 2 small per slide */
.gal-head{align-items:flex-end}
.gal-viewport{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:var(--radius-card);outline-offset:6px}
.gal-viewport::-webkit-scrollbar{display:none}

.gal-slide{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,clamp(160px,20vw,270px));gap:16px}
.gal-viewport .gal-slide figure{margin:0;display:flex;min-height:0}
.gal-viewport .gal-slide figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal-viewport .gal-slide button{flex:1;display:flex;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-card);overflow:hidden;width:100%}
.gal-viewport .gal-slide .ph{flex:1;aspect-ratio:auto;min-height:0;border-radius:var(--radius-card)}
.gal-viewport .gal-slide .ph img{transition:transform .6s var(--ease);object-position:var(--pos,50% 50%)}
.gal-viewport .gal-slide button:hover .ph img{transform:scale(1.04)}
.gal-n1 figure:nth-child(1){grid-column:1/-1!important}
.gal-n2 figure:nth-child(2){grid-row:span 2}
.gal-dots{display:flex;justify-content:center;gap:10px}
.gal-dots button{width:34px;height:34px;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gal-dots i{display:block;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--purple) 25%,transparent);transition:width .3s var(--ease),background .3s}
.gal-dots button.on i{width:28px;border-radius:5px;background:var(--purple)}
.gal-dots button:hover i{background:var(--purple-2)}
@media (max-width:760px){
  .gal-slide{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:clamp(200px,52vw,300px) clamp(120px,32vw,180px)}
  .gal-viewport .gal-slide figure:nth-child(1){grid-column:1/-1;grid-row:auto}
  .gal-n2 figure:nth-child(2){grid-column:1/-1;grid-row:auto}
  .gal-head .slider-nav{display:none}
}
@media (prefers-reduced-motion:reduce){.gal-viewport{scroll-behavior:auto}}

/* ---------- extra slide carousel inside The Work (e.g. Tinder slides) */
.tslides{display:flex;flex-direction:column;gap:24px;margin-top:clamp(24px,4vw,48px);padding-top:clamp(32px,4vw,48px);border-top:2px solid color-mix(in srgb,var(--purple) 15%,transparent)}
.tslides-head{align-items:center}
.tslides-title{font-family:var(--font-head);font-weight:800;text-transform:uppercase;color:var(--purple);font-size:clamp(22px,2.2vw,28px);margin:0;line-height:1.1}
.tslides-viewport{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px 18px}
.tslides-viewport::-webkit-scrollbar{display:none}
.tslide{flex:0 0 calc((100% - 60px) / 4);scroll-snap-align:start;padding:0;border:0;background:var(--white);border-radius:18px;overflow:hidden;cursor:zoom-in;box-shadow:0 10px 26px color-mix(in srgb,var(--purple) 16%,transparent);transition:transform .4s var(--ease),box-shadow .4s}
.tslide img{display:block;width:100%;height:auto;aspect-ratio:749/1332;object-fit:cover}
.tslide:hover,.tslide:focus-visible{transform:translateY(-6px);box-shadow:0 20px 40px color-mix(in srgb,var(--purple) 26%,transparent)}
@media (max-width:1000px){.tslide{flex-basis:calc((100% - 40px) / 3)}}
@media (max-width:700px){.tslide{flex-basis:calc((100% - 20px) / 1.6)}.tslides-head .slider-nav{display:none}}
@media (prefers-reduced-motion:reduce){.tslides-viewport{scroll-behavior:auto}}

/* real photos in the work gallery: no purple placeholder wash */
.gal-viewport .ph:has(img)::after{display:none}
.gal-viewport .fit-contain .ph{background:var(--bg,#c1bdbe)}
.gal-viewport .fit-contain .ph img{object-fit:contain}

/* work pages: details box + separate enquire button, sticky together */
.work-aside{position:sticky;top:108px;align-self:start;display:flex;flex-direction:column;gap:16px}
.work-aside .facts{position:static}
.work-aside .nav-enquire{margin-top:0}
@media (max-width:900px){.work-aside{position:static}}

/* ---------- work details card (option D: result first) */
.wd{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border);background:var(--white)}
.wd-lbl{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.wd-band{background:var(--purple);color:var(--white);padding:26px 28px 24px;position:relative;overflow:hidden}
.wd-band::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%237D3C98' d='M50 0L59.64 29.98L89.09 18.83L71.67 45.06L98.75 61.13L67.37 63.86L71.69 95.05L50 72.22L28.31 95.05L32.63 63.86L1.25 61.13L28.33 45.06L10.91 18.83L40.36 29.98Z'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.8;pointer-events:none}
.wd-band>*{position:relative;z-index:1}
.wd-band .wd-lbl{color:var(--lilac-soft)}
.wd-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:10px 0 6px}
.wd-stat{font-family:var(--font-head);font-weight:900;font-size:80px;line-height:.85;letter-spacing:-.04em}
.wd-of{font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--lilac-soft)}
.wd-band p{margin:0;font-size:15px;color:#f3eaf6}
.wd-band .wd-res{margin-top:10px;font-family:var(--font-head);font-weight:800;font-size:20px;line-height:1.25;color:var(--white);max-width:16em}
.wd-main{padding:24px 28px 26px;display:flex;flex-direction:column;gap:20px}
.wd-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;margin:0}
.wd-meta .wd-wide{grid-column:1/-1}
.wd-meta dt{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-2)}
.wd-meta dd{margin:4px 0 0;font-weight:600;font-size:15px;line-height:1.35}
.wd-svc .wd-lbl{color:var(--purple-2)}
.wd-svc ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.wd-svc li{display:flex;gap:10px;align-items:baseline;font-weight:600;line-height:1.35}
.wd-svc svg{width:14px;height:14px;fill:var(--purple);flex:none;transform:translateY(1px)}
@media (max-width:420px){.wd-meta{grid-template-columns:1fr 1fr}}

.stats.stats-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 112px}
.stats.stats-6 .stat{container-type:inline-size}
.stats.stats-6 b{font-size:min(22cqi,120px);white-space:nowrap}
@media (max-width:760px){.stats.stats-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}}

/* growth arrow between paired stats (e.g. 2.3M > 7.6M) */
.stat.has-arrow{position:relative}
.stat > .stat-arrow{max-width:none;font-size:0;letter-spacing:0;color:var(--purple)}
.stat-arrow{position:absolute;top:calc(24px + .5 * min(22cqi,120px) - 26px);right:-82px;width:52px;height:52px;border-radius:50%;background:var(--lilac-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px color-mix(in srgb,var(--purple-darker) 28%,transparent);z-index:2}
.stat-arrow svg{width:24px;height:24px;margin-left:2px}
@media (max-width:760px){
  .stats.stats-6{grid-template-columns:minmax(0,1fr);gap:40px}
  .stats.stats-6 b{font-size:min(19cqi,96px)}
  .stat-arrow{top:auto;bottom:-82px;right:auto;left:0;width:44px;height:44px;transform:rotate(90deg)}
  .stat-arrow svg{width:20px;height:20px}
}

/* per-project tile colour overrides (front matter `tile: purple|lilac|grey|white`) */
.wb-bento .wb-tile.wb-purple{background:var(--purple);color:var(--white);border:0}
.wb-bento .wb-tile.wb-purple .wb-body{color:var(--white)}
.wb-bento .wb-tile.wb-lilac{background:var(--lilac-soft);color:var(--purple);border:0}
.wb-bento .wb-tile.wb-lilac .wb-body{color:var(--purple)}
.wb-bento .wb-tile.wb-grey{background:var(--bg);color:var(--purple);border:0}
.wb-bento .wb-tile.wb-grey .wb-body{color:var(--purple)}
.wb-bento .wb-tile.wb-white{background:var(--white);color:var(--purple);border:2px solid var(--purple)}
.wb-bento .wb-tile.wb-white .wb-body{color:var(--purple)}

/* 'When' years always on one line */
.wd-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content}
.wd-meta .wd-when dd{white-space:nowrap}
@media (max-width:420px){.wd-meta{grid-template-columns:minmax(0,1fr) max-content}}

/* single video: one wide card with its details alongside */
.vone{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:center}
.vone .vreel-item{width:100%}
.vone-text{display:flex;flex-direction:column;gap:12px;color:var(--purple)}
.vone-text .vreel-title{font-size:clamp(20px,2vw,26px);margin:0}
.vone-text p{margin:0;color:var(--text)}
@media (max-width:760px){.vone{grid-template-columns:minmax(0,1fr);gap:24px}}

/* gallery video tile: silent looping preview, plays with sound controls in the lightbox */
.gal-viewport .gal-vid{position:relative}
.gal-viewport .gal-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.gal-viewport .gal-vid .ph::after{display:none}
.gal-viewport .gal-vid .vreel-play{left:auto;top:auto;right:12px;bottom:12px;width:26px;height:26px;margin:0;opacity:.95;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.gal-viewport .gal-vid .vreel-play svg{width:10px;height:10px;margin-left:2px}
.gal-viewport .gal-vid-ext .vreel-play{left:50%;top:50%;right:auto;bottom:auto;width:68px;height:68px;margin:-34px 0 0 -34px}
.gal-viewport .gal-vid-ext .vreel-play svg{width:26px;height:26px}
.pager a.pager-all{letter-spacing:.1em}
@media (max-width:760px){.pager a.pager-all{font-size:10px;letter-spacing:.04em}}
.wb-t3.wb-w4 .wb-img{width:calc(100% - 40px);max-width:none}
@media (min-width:561px) and (max-width:900px){.wb-t3.wb-w4{grid-row:auto}.wb-t3.wb-w4 .wb-img{width:46%;max-width:300px}.wb-bento .wb-t2.wb-w4{grid-column:span 3}}
@media (max-width:560px){.wb-t3.wb-w4 .wb-img{width:46%;max-width:300px}}
.work-related{display:flex;flex-direction:column;gap:14px}
.work-related .work-related-tile{height:220px;width:100%}
.work-related .work-related-tile .wb-title{font-size:clamp(22px,2.2vw,28px)}
.work-related .work-related-tile .wb-img{width:40%;max-width:260px}
@media (max-width:560px){.work-related .work-related-tile{height:180px}.work-related .work-related-tile .wb-title{font-size:22px}.work-related .work-related-tile .wb-img{width:34%;top:16px;right:16px}}
.work-footnote{margin:0;font-size:14px;font-style:italic;color:var(--text-2);padding-top:16px;border-top:1px solid color-mix(in srgb,var(--purple) 15%,transparent)}
.fill .pin{padding:calc(var(--hdr,72px) + clamp(16px,6vh,60px)) max(var(--gutter),calc((100% - var(--max))/2)) clamp(16px,6vh,60px);box-sizing:border-box;gap:clamp(18px,3.5vh,40px)}
.fill-foot{gap:clamp(14px,2.6vh,28px)}
.fill-text{font-size:clamp(46px,min(8.2vw,9.6vh),136px)}
@media (max-width:560px){.fill-text{font-size:clamp(32px,min(11vw,5.4vh),46px)}.fill-foot p{font-size:16px}}

.choice-text{min-width:0;flex:1}
/* mobile fit fixes */
.pager{grid-template-columns:repeat(2,minmax(0,1fr))}
.pager b{overflow-wrap:break-word}
@media (max-width:560px){.v4-big .nw{white-space:normal}}
@media (max-width:420px){.pager a:not(.pager-all):first-child{padding-right:46px}.pager a:not(.pager-all):nth-child(2){padding-left:46px}.pager b{font-size:13px}}
@media (max-width:560px){
  .pager a:not(.pager-all):first-child,.pager a:not(.pager-all):nth-child(2){padding:28px var(--gutter)}
  .pager a.pager-all{position:static;transform:none;grid-column:1/-1;justify-self:center;width:92px;height:92px;margin:4px 0 32px;border-radius:50%;box-shadow:none;font-size:11px;letter-spacing:.08em}
  .pager a.pager-all:hover{transform:rotate(-8deg) scale(1.06)}
  .pager b{font-size:14px;overflow-wrap:normal}
}
/* footer newsletter: stacked */
.sub-form{flex-direction:column;align-items:flex-start;gap:10px}
.sub-form input{width:100%;flex:none;min-height:48px}
.sub-form button{align-self:flex-start}
/* Who we are: equal top/bottom space (min 60px), content sized to fit the screen height */
.fill .pin{padding-top:calc(var(--hdr,72px) + 60px);padding-bottom:60px}
.fill-text{font-size:clamp(34px,min(8.2vw,9.6vh,calc((100vh - 600px) / 3.3)),136px)}
@media (max-width:560px){.fill-text{font-size:clamp(28px,min(11vw,5.4vh,calc((100vh - 640px) / 3)),46px)}}
@media (max-width:560px) and (max-height:700px){.fill .pin{gap:14px}.fill-foot{gap:12px}.fill-foot p{font-size:15px}}
@media (max-width:760px){.hero-show .slide .ph img{object-position:var(--pos-m,var(--pos,50% 50%))}}

/* Portfolio boxes: text and feature image scale with the box (4 Oct 2026) */
.wb-bento .wb-tile.wb-t0,.wb-bento .wb-tile.wb-w8{container-type:size}
/* Pauline Hanson (big box): larger image and title, sized from the box's width and height */
.wb-bento .wb-tile.wb-t0 .wb-img{display:block;width:min(74cqi,calc(54cqb * 4 / 3));max-width:none;top:clamp(20px,5cqi,32px);right:clamp(20px,5cqi,32px)}
.wb-bento .wb-tile.wb-t0 .wb-body{max-width:none;padding:clamp(22px,6cqi,40px)}
.wb-bento .wb-tile.wb-t0 .wb-title{font-size:clamp(30px,min(9.6cqi,11cqb),72px);line-height:1}
/* wide 8-column box (Senator Gerard Rennick): bigger title, kept clear of the image */
.wb-bento .wb-tile.wb-w8 .wb-body{max-width:60%}
.wb-bento .wb-tile.wb-w8 .wb-title{font-size:clamp(30px,min(5.6cqi,18cqb),56px);line-height:1}
.wb-bento .wb-tile.wb-w8 .wb-img{width:min(38%,calc(84cqb * 4 / 3))}
@media (max-width:560px){.wb-bento .wb-tile.wb-w8 .wb-body{max-width:none}.wb-bento .wb-tile.wb-w8 .wb-title{font-size:clamp(28px,9cqi,34px)}}
/* tablet: Warnervale's one-line title stays clear of its image */
@media (min-width:561px) and (max-width:900px){.wb-bento .wb-tile.wb-t3.wb-w4 .wb-body{max-width:52%}}
@media (max-width:560px){.wb-bento .wb-tile.wb-t0 .wb-title{font-size:clamp(30px,11cqi,44px)}.wb-bento .wb-tile.wb-t0 .wb-img{width:min(86cqi,calc(54cqb * 4 / 3))}}
/* menu anchors to service option boxes land below the fixed header */
.option,.v2-panel{scroll-margin-top:110px}
/* Warnervale: one row high beside Rennick; full width on tablets so the row has no gap */
@media (min-width:561px) and (max-width:900px){.wb-bento .wb-tile.wb-solo{grid-column:span 6}}
/* The Tinder Pollie box: slightly bigger feature image (still clear of the box edges) */
.wb-bento .wb-tile.wb-w8.wb-p-media-strategy .wb-img{width:min(42%,calc(90cqb * 4 / 3))}
.wb-bento .wb-tile.wb-w8.wb-p-media-strategy .wb-body{max-width:56%}
/* Senator Rod Culleton and Council elections boxes: slightly bigger feature images (desktop) */
@media (min-width:901px){
/* (v1.3.20) these one-off sizes only apply in the box shape they were designed for */
.wb-bento .wb-tile.wb-t4.wb-w4.wb-p-senator-culleton .wb-img{width:49%;top:10px;right:12px}
.wb-bento .wb-tile.wb-t4.wb-w4.wb-p-senator-culleton .wb-body{padding-bottom:18px}
.wb-bento .wb-tile.wb-t2:not(.wb-w4).wb-p-council-elections .wb-img{width:56%;max-width:340px;top:16px;right:16px}
.wb-bento .wb-tile.wb-solo .wb-img{top:14px}
}
/* tablet: full-width Warnervale and Culleton boxes put the image at the right, centred, clear of the title */
@media (min-width:561px) and (max-width:900px){
.wb-bento .wb-tile.wb-solo .wb-img,.wb-bento .wb-tile.wb-t4.wb-w4.wb-p-senator-culleton .wb-img{--ty:-50%;top:50%;width:38%;max-width:300px}
.wb-bento .wb-tile.wb-solo .wb-body,.wb-bento .wb-tile.wb-t4.wb-w4.wb-p-senator-culleton .wb-body{max-width:58%}
}

/* home stats: 5 items = 3 on top, 2 wider below */
.stats.stats-5{grid-template-columns:repeat(6,minmax(0,1fr));gap:56px 48px}
.stats.stats-5 .stat{grid-column:span 2}
.stats.stats-5 .stat:nth-child(n+4){grid-column:span 3}
@media (max-width:1000px){.stats.stats-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}.stats.stats-5 .stat,.stats.stats-5 .stat:nth-child(n+4){grid-column:span 1}.stats.stats-5 .stat:first-child{grid-column:span 2}}
@media (max-width:560px){.stats.stats-5{grid-template-columns:minmax(0,1fr)}.stats.stats-5 .stat:first-child{grid-column:span 1}}
.stats.stats-5 b{font-size:clamp(64px,7vw,104px)}
/* founder career timeline: even grid (4 across, 2 on phones) */
.founder .timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;row-gap:8px}
.founder .timeline div{flex:none;margin:0;border-right:0;border-left:1px solid var(--border);padding:20px 0 0 16px}
@media (max-width:760px){.founder .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}

.site-footer .bar a{padding:6px 0}
.site-footer .bar a:hover{opacity:1;color:#fff}

/* header logo page-entry animation: "Star drop". The logo is already in place; the star drops onto the I, then a glint runs along the letters */
.logo.lg-anim path{transform-box:fill-box;transform-origin:center}
@keyframes lg-drop{0%{opacity:0;transform:translateY(-160%) rotate(-180deg)}60%{opacity:1;transform:translateY(8%) rotate(8deg)}80%{transform:translateY(-6%) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes lg-squash{0%,100%{transform:none}50%{transform:scaleY(.9) translateY(5%)}}
@keyframes lg-glint{0%,100%{filter:none}45%{filter:brightness(1.45) drop-shadow(0 0 3px rgba(255,255,255,.55))}}
.logo.lg-anim .lg-star{animation:lg-drop .75s cubic-bezier(.3,.6,.3,1) .2s both,lg-glint .45s ease-in-out 1.25s}
.logo.lg-anim .lg-i{animation:lg-squash .25s ease-out .64s,lg-glint .45s ease-in-out 1.21s}
.logo.lg-anim .lg-p{animation:lg-glint .45s ease-in-out 1s}
.logo.lg-anim .lg-o{animation:lg-glint .45s ease-in-out 1.07s}
.logo.lg-anim .lg-l{animation:lg-glint .45s ease-in-out 1.14s}
.logo.lg-anim .lg-prp{animation:lg-glint .45s ease-in-out 1.3s}
.logo.lg-anim .lg-frame{animation:lg-glint .45s ease-in-out 1.36s}
.logo.lg-anim svg{overflow:visible}
@media (prefers-reduced-motion:reduce){.logo.lg-anim path{animation:none!important}}

/* mobile menu: Social Media links under Get started */
.mobile-nav .m-social{margin-top:32px}
.mobile-nav .m-social-h{display:block;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--lilac-soft);padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.25)}
.mobile-nav .m-social .socials{margin-top:16px;flex-wrap:wrap}
.mobile-nav .m-social .socials a{width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:0;color:var(--white)}

/* placeholder for a Fluent Forms shortcode (the WordPress plugin renders the real form here) */
.ff-ph{border:2px dashed var(--lilac);border-radius:var(--radius-card);background:color-mix(in srgb,var(--lilac) 6%,transparent);padding:32px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ff-ph-label{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lilac)}
.ff-ph-name{margin:0;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--purple)}
.ff-ph-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;background:var(--white);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--text);max-width:100%;overflow-x:auto}
.ff-ph-note{margin:0;font-size:14px;color:var(--text-2);max-width:60ch}
/* all video play buttons: purple circle, centred (same as the service-page showcase) */
.vreel-play,.gal-viewport .gal-vid .vreel-play,.gal-viewport .gal-vid-ext .vreel-play{left:50%;top:50%;right:auto;bottom:auto;width:68px;height:68px;margin:-34px 0 0 -34px;background:var(--purple);opacity:1;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .3s var(--ease),background .3s}
.vreel-play svg,.gal-viewport .gal-vid .vreel-play svg,.gal-viewport .gal-vid-ext .vreel-play svg{width:28px;height:28px;fill:var(--white);margin-left:4px}
.vreel-item:hover .vreel-play,.gal-vid:hover .vreel-play{transform:scale(1.1);background:var(--purple-2)}
/* captions only show when an item is opened (lightbox), never under carousel tiles */
.sc-item figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.vreel-cap{display:none}

/* client logos (About: We've Worked With) */
.logos{grid-template-columns:repeat(4,minmax(0,1fr))}
.logos div.logo-img{padding:18px 26px}
.logos div.logo-img img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:900px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}.logos div.logo-img{padding:14px 18px}}

/* 9 logos: 5 across, last row centred */
.logos{display:flex;flex-wrap:wrap;justify-content:center}
.logos>div{flex:0 0 calc((100% - 64px)/5)}
@media (max-width:900px){.logos>div{flex-basis:calc((100% - 16px)/2)}}
.logos div.logo-img{padding:18px 14px}

/* About: client logos glide in one row (option F1: no boxes, smooth continuous scroll) */
.logo-glide{overflow:hidden;margin-top:28px;padding:6px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-glide-track{display:flex;align-items:center;gap:48px;width:max-content;will-change:transform}
.lg-item{flex:none;height:110px;display:flex;align-items:center}
.lg-item img{display:block;width:auto;height:110px}
@media (max-width:700px){.logo-glide-track{gap:30px}.lg-item,.lg-item img{height:78px}}
@media (prefers-reduced-motion:reduce){.logo-glide{overflow-x:auto}}

.about-clients{margin-top:clamp(56px,7vw,96px)}
.about-clients .logo-glide{margin-top:4px}

/* About Poli PR: text starts at the top and travels down with the page until it lines up with the bottom of the At a glance box */
.about-intro .svc-aside{position:static}
.about-intro>.stack-lg{position:sticky;top:120px;align-self:start}
@media (max-width:900px){.about-intro>.stack-lg{position:static}}
.home-clients{margin-top:clamp(24px,4vw,48px)}
.sc-badge{display:none!important}

/* footer newsletter: Fluent Forms placeholder on purple */
.ff-ph.ff-ph-foot{padding:16px 16px;gap:6px;border-color:color-mix(in srgb,var(--lilac-soft) 60%,transparent);background:rgba(255,255,255,.06)}
.ff-ph-foot .ff-ph-label{color:var(--lilac-soft)}
.ff-ph-foot .ff-ph-name{color:#fff;font-size:15px}
.ff-ph-foot .ff-ph-code{font-size:13px;padding:6px 10px}

/* mobile testimonials: every slide starts at the top, so the quote mark sits in the same place */
@media (max-width:900px){.qs-slide{justify-content:flex-start}}

/* keep the hidden carousel captions inside their tile, so phones don't see a page wider than the screen (which stopped lazy images loading) */
.sc-item{position:relative}
/* never let the page scroll sideways on phones */
html{overflow-x:clip}

/* pattern lines and hexagons are drawn in the theme colour (Site Settings > Colours), using the images as stencils */
.hw-pat-box::before{background:var(--pat-color,var(--purple));-webkit-mask:url(../images/pattern-lines.png) center/100% 100% no-repeat;mask:url(../images/pattern-lines.png) center/100% 100% no-repeat}
.hw-pat-box i{background-image:none;background-color:var(--pat-color,var(--purple));-webkit-mask-image:url(../images/pattern-hexes.png);mask-image:url(../images/pattern-hexes.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo.logo-img img{height:44px;width:auto;max-width:220px;display:block;object-fit:contain}
.site-footer .logo.logo-img img{height:52px}
/* About: on phones, the same space under the "About Saraya" button as above it */
.story-quote{margin:0}
@media (max-width:640px){.story-quote{margin-top:24px}}
.notsure-follow{padding-top:0}
/* Pairs well with: a long name that wraps keeps its arrow right after the last word */
.v2-pairs .arrow-link{display:block;line-height:1.5}
.v2-pairs .arrow-link span{display:inline-block;margin-left:4px}
/* Service pages: side column groups. On phones and tablets (one column) "Pairs well with" and
   the enquire box move below the option cards, just above the showcase. */
.v2-head,.v2-extra{display:flex;flex-direction:column;gap:16px}
.v2-extra:empty{display:none}
@media (max-width:900px){
  .v2-nav{display:contents}
  .v2-head{order:0}.v2-grid>.options{order:1}.v2-extra{order:2}
  .v2-extra .v2-pairs{margin-top:0}
  .v2-extra .nav-enquire{margin-top:0}
}
/* Portfolio "The work": video tiles show their image; the first tile's silent preview fades in only once it is playing */
.gal-viewport .gal-vid video.gal-preview{opacity:0;transition:opacity .4s}
.gal-viewport .gal-vid video.gal-preview.is-playing{opacity:1}

/* Testimonials (v1.3.18): on desktop the quote mark lines up with the top of the section heading,
   and the stage height follows the quote that is showing (set by site.js), easing between sizes */
@media (min-width:901px){.qs-stage{padding-top:41px}.qs-slide{justify-content:flex-start}.qs-body{flex:none}}
.qs-stage.qs-fit{transition:height .55s cubic-bezier(.2,.7,.2,1)}
.qs-stage.qs-fit .qs-slide{justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.qs-stage.qs-fit{transition:none}}

/* small dropdown for menu items with sub-items (Appearance > Menus), v1.3.22 */
.mega.mega-list{width:250px;display:flex;flex-direction:column;gap:0;padding:16px 22px}
.mega.mega-list a{padding:9px 0;border-bottom:1px solid var(--border)}
.mega.mega-list a:last-child{border-bottom:0}