/* Avenue Research: shared styles. Structure, type and colours follow avenueresearch.co.uk (Poppins; white header with
   Panel Book / ESOMAR buttons; photo heroes with a blue overlay; heading + short rule; footer columns). The particle story
   on the home page keeps its dark space look. */
:root{
  --ink:#020611; --navy:#0A1B4D; --blue:#0B5CB5; --blue-2:#084A93; --azure:#2E9BFF; --teal:#1A7399; --link:#1a5ea8;
  --text:#1b2433; --body:#4a5565; --mute:#6b7685; --line:#e2e7ee; --tint:#f4f7fb; --card:#ffffff;
  --story:#EEF4FF; --story-mute:rgba(238,244,255,.7);
  --f:"Poppins", "Segoe UI", system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --gutter:clamp(18px, 3vw, 44px); --wrap:1180px; --head-h:84px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:#fff;color:var(--text);-webkit-font-smoothing:antialiased;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-tap-highlight-color:rgba(11,92,181,.15)}
body{font-family:var(--f);font-weight:400;line-height:1.65;background:#fff;min-height:100vh;overflow-x:hidden}
body.home{background:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button,label,input,textarea{touch-action:manipulation}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--blue);color:#fff;border-radius:4px}
.skip:focus{top:12px}

/* ---------- header (live site: logo · Home · Market Research · Services ▾ · Contact Us · Panel Book · ESOMAR) ---------- */
.top{position:fixed;inset:0 0 auto;z-index:40;height:var(--head-h);display:flex;align-items:center;gap:clamp(18px, 3vw, 48px);padding:0 clamp(18px, 5vw, 96px);
  background:#fff;box-shadow:0 1px 0 var(--line), 0 6px 24px rgba(10,27,77,.06)}
.brand img{height:46px;width:auto}
.links{display:flex;align-items:center;gap:clamp(18px, 2.4vw, 38px);margin-left:clamp(10px, 4vw, 70px);font:400 15px var(--f);color:var(--link)}
.links > a,.dd-btn{padding:8px 0;position:relative;transition:color .25s}
.links > a::after,.dd-btn::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .3s var(--ease)}
.links > a:hover::after,.links > a[aria-current=page]::after,.dd:hover .dd-btn::after,.dd-btn[aria-expanded=true]::after{transform:scaleX(1)}
.links a:hover,.links a[aria-current=page]{color:var(--blue-2)}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:8px;color:var(--link)}
.dd-btn i{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid currentColor;margin-top:2px}
.dd-menu{position:absolute;left:-18px;top:100%;min-width:230px;padding:10px 0;background:#fff;border-radius:6px;box-shadow:0 18px 40px rgba(10,27,77,.16), 0 0 0 1px var(--line);
  opacity:0;visibility:hidden;translate:0 8px;transition:opacity .2s, translate .2s, visibility .2s}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{opacity:1;visibility:visible;translate:0 0}
.dd-menu a{display:block;padding:9px 20px;font-size:14.5px;color:var(--text);white-space:nowrap}   /* the menu grows to its longest item ("Quantitative Market Research") */
.dd-menu a:hover,.dd-menu a[aria-current=page]{background:var(--tint);color:var(--blue)}
.doc-btns{display:flex;gap:14px;margin-left:auto}
.doc-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:3px;background:linear-gradient(180deg, #1673d1, var(--blue-2));color:#fff;
  font:500 13px/1.1 var(--f);box-shadow:0 4px 12px rgba(8,74,147,.25);transition:filter .25s, translate .25s}
.doc-btn:hover{filter:brightness(1.1);translate:0 -1px}
.doc-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:4px}
.menu-btn span,.menu-btn span::before{display:block;width:18px;height:2px;background:var(--navy);margin:auto;position:relative}
.menu-btn span::before{content:"";position:absolute;top:6px}
.sheet{position:fixed;inset:var(--head-h) 0 0;z-index:39;display:grid;align-content:start;gap:4px;padding:24px var(--gutter);background:#fff;overflow:auto;overscroll-behavior:contain;
  font:500 18px var(--f);color:var(--navy);opacity:0;pointer-events:none;transition:opacity .3s}
.sheet.open{opacity:1;pointer-events:auto}
.sheet > a{padding:10px 0;border-bottom:1px solid var(--line)}
.sheet-docs{display:flex;gap:10px;margin-top:18px}
.sheet small{display:block;margin-top:16px;font:400 14px var(--f);color:var(--mute)}

/* ---------- buttons ---------- */
.cta{display:inline-flex;align-items:stretch;border-radius:3px;font:500 14px var(--f);overflow:hidden;border:1px solid var(--line);background:#fff;color:var(--text);transition:filter .25s}
.cta span{padding:11px 20px}
.cta i{display:grid;place-items:center;width:40px;background:var(--blue);color:#fff;font-style:normal}
.cta.solid{background:linear-gradient(180deg, #1673d1, var(--blue-2));border-color:transparent;color:#fff}
.cta.solid i{background:rgba(255,255,255,.14)}
.cta:hover{filter:brightness(1.08)}
.btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* ---------- home: particle story (dark) ---------- */
.haze{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60vw 50vh at 18% 8%, rgba(4,107,210,calc(.42 * var(--haze, 1))), transparent 70%),
    radial-gradient(50vw 60vh at 70% 60%, rgba(10,27,77,calc(.55 * var(--haze, 1))), transparent 72%),
    radial-gradient(120vw 80vh at 50% 120%, rgba(26,115,153,calc(.18 * var(--haze, 1))), transparent 70%)}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#stage{position:fixed;inset:0;width:100vw;height:100vh;z-index:2;display:block}
.inner .haze,.inner .grain,.inner #stage{display:none}
/* fast first paint: a still dandelion (same frame as the canvas, sized by the viewport height like the 3D camera)
   shows until Three.js has loaded; home.js then cross-fades to the live particles (an empty canvas starts hidden) */
.home #stage{opacity:0}
.poster{position:fixed;top:0;left:50%;height:100vh;transform:translateX(-50%);z-index:2;pointer-events:none;mix-blend-mode:screen}
.poster img{position:absolute;height:auto;max-width:none}
.inner .poster{display:none}
/* poster:auto (tools/make-poster.mjs) */
.poster{aspect-ratio:1440/900}.poster img{left:43.819%;top:8.111%;width:39.167%}
@media (max-width:760px){.poster{aspect-ratio:390/844}.poster img{left:0.256%;top:12.915%;width:99.744%}}
/* /poster:auto */
#story{position:relative;z-index:3;color:var(--story)}
.track{height:250vh}
.layer{position:fixed;inset:0;z-index:5;pointer-events:none}
.blk{position:absolute;opacity:0}
.blk.live{pointer-events:auto}
.small{font:400 16px/1.6 var(--f);color:var(--story);max-width:36ch}
.big{font:600 clamp(26px, 2.6vw, 40px)/1.15 var(--f);letter-spacing:-.01em;color:var(--story)}
.huge{font:700 clamp(42px, 5.8vw, 92px)/1.02 var(--f);letter-spacing:-.02em;color:var(--story)}
.huge .l1{color:var(--story)}
.w{display:inline-block;will-change:opacity,filter,transform}
.ln{display:block}
.right{text-align:right}
.hero-copy{left:var(--gutter);top:calc(var(--head-h) + 22vh)}
.hero-title{left:var(--gutter);bottom:8vh}
.s3-note{left:var(--gutter);top:calc(var(--head-h) + 7vh);font-weight:600;font-size:18px;color:var(--story-mute)}
.s3-line{right:var(--gutter);bottom:9vh;max-width:min(54vw, 780px)}
.s6-title{left:var(--gutter);top:calc(var(--head-h) + 6vh)}
.s6-copy{right:var(--gutter);top:calc(var(--head-h) + 8vh);display:grid;justify-items:end}
.intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--ink);transition:opacity 1.1s var(--ease), visibility 1.1s}
.intro p{font:500 15px var(--f);letter-spacing:.08em;color:var(--story-mute)}
.intro.done{opacity:0;visibility:hidden}
.scroll-hint{position:fixed;left:50%;bottom:22px;z-index:6;translate:-50% 0;font:500 11px var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--story-mute);transition:opacity .5s}

/* ---------- content (white, live-site sections) ---------- */
.content{position:relative;z-index:6;background:#fff}
.home .content{background:linear-gradient(rgba(255,255,255,0) 4vh, #fff 14vh);padding-top:18vh}
.ms-sec{position:relative;padding:var(--sec) var(--gutter)}
.ms-sec-tight{padding-top:var(--sec);padding-bottom:var(--sec)}
.ms-tint{background:var(--tint)}
.ms-wrap{max-width:var(--wrap);margin:auto}
.ms-narrow{max-width:900px}
.ms-centered{text-align:center}
.ms-centered .ms-rule{margin-left:auto;margin-right:auto}
.ms-center-head{text-align:center;margin-bottom:40px}
.ms-center-head .ms-rule{margin:14px auto 0}
.ms-split{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--block);align-items:center}
.ms-top{align-items:start}
.ms-h2{font:600 clamp(26px, 2.6vw, 38px)/1.2 var(--f);color:var(--text);letter-spacing:-.01em}
.ms-h3{font:500 clamp(20px, 1.7vw, 24px)/1.35 var(--f);color:var(--link)}
.ms-h2-gap{margin-top:var(--block)}
.ms-blue{color:var(--link);font-weight:500}
.ms-center{text-align:center}
.ms-rule{display:block;width:60px;height:2px;background:var(--text);margin:16px 0 24px}
.ms-rule.ms-center{margin:16px auto 30px}
.ms-sec p{font-size:var(--fs);line-height:1.75;color:var(--body);max-width:65ch}
.ms-sec p + p{margin-top:14px}
.ms-centered p{margin-left:auto;margin-right:auto}
.ms-lead{margin-bottom:30px}
.ms-big{font-size:clamp(17px, 1.5vw, 21px) !important;color:var(--text) !important;font-weight:500}

/* Who Are We? */
.ms-who{background:#fff url(/assets/img/site/pattern.webp) center / cover no-repeat}
.ms-features{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.ms-features li{display:grid;gap:12px;justify-items:start}
.ms-features img{height:56px;width:auto;opacity:.85}
.ms-features span{font:500 17px var(--f);color:var(--link)}

/* What Do We Offer? (photo with blue overlay, like the live site) */
.ms-offer{color:#fff;background:linear-gradient(rgba(9,52,104,.86), rgba(9,52,104,.86)), url(/assets/img/site/offer-bg.webp) center / cover no-repeat}
.ms-offer .ms-h2{color:#fff}
.ms-offer .ms-rule{background:rgba(255,255,255,.7)}
.ms-offer p{color:rgba(255,255,255,.9)}
.ms-offer-grid{align-items:center}
.ms-photos{position:relative;min-height:420px}
.ms-photos img{height:auto}
.ms-photos .p1{position:absolute;right:0;top:0;width:78%;aspect-ratio:3 / 2;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.ms-photos .p2{position:absolute;left:0;bottom:0;width:44%;aspect-ratio:5 / 7;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.35)}

/* Easy Process */
.ms-steps{list-style:none;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--gap)}
.ms-steps li{padding:26px 24px;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:6px;background:#fff}
.ms-step{display:block;font:600 12px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ms-steps b{display:block;margin-top:8px;font:600 18px/1.3 var(--f);color:var(--text)}
.ms-steps p{margin-top:10px;font-size:var(--fs) !important;line-height:1.7 !important}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.tbl{width:100%;min-width:640px;border-collapse:collapse;font-size:15px;line-height:1.6}
.tbl th,.tbl td{padding:15px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.tbl thead th{border-top:0;font:600 12px var(--f);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blue-2)}
.tbl tbody th{font:600 15px/1.35 var(--f);color:var(--text);width:22%}
.tbl td{color:var(--body)}

/* profiles + lists */
.ms-profiles{list-style:none;counter-reset:pr;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ms-profiles li{counter-increment:pr;display:flex;gap:12px;align-items:baseline;padding:12px 16px;border:1px solid var(--line);border-radius:6px;font-size:15px;color:var(--text);background:#fff}
.ms-profiles li::before{content:counter(pr) ".";font-weight:600;color:var(--blue);min-width:22px}
.ms-list{list-style:none;display:grid;gap:10px}
.ms-list li{position:relative;padding:12px 16px 12px 40px;border:1px solid var(--line);border-radius:6px;font-size:15px;color:var(--text);background:#fff}
.ms-list li::before{content:"";position:absolute;left:16px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:2px solid var(--blue)}

/* panel highlight cards */
.ms-cards{list-style:none;display:grid;gap:var(--gap)}
.ms-cards-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.ms-cards li{padding:22px 22px 24px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:6px;background:#fff}
.ms-cards b{display:block;font:600 17px/1.35 var(--f);color:var(--text)}
.ms-cards span{display:block;margin-top:8px;font-size:var(--fs);line-height:1.65;color:var(--body)}
.ms-cards-plain span{margin-top:0;color:var(--text)}

/* quality groups */
.ms-groups{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.ms-groups article{padding:26px 26px 28px;border:1px solid var(--line);border-radius:6px;background:#fff}
.ms-groups h3{font:600 17px/1.4 var(--f);color:var(--link)}
.ms-groups ul{list-style:none;display:grid;gap:10px;margin-top:14px}
.ms-groups li,.ms-acc li{position:relative;padding-left:18px;font-size:var(--fs);line-height:1.75;color:var(--body);max-width:70ch}
.ms-groups li::before,.ms-acc li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.ms-groups b,.ms-acc b{color:var(--text);font-weight:600}

/* contact band */
.ms-cta{background:linear-gradient(120deg, var(--blue-2), #1673d1);color:#fff}
.ms-cta .ms-h2{color:#fff}
.ms-cta p{color:rgba(255,255,255,.9);margin-top:10px}
.ms-cta-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ms-cta .cta.solid{background:#fff;color:var(--blue-2)}
.ms-cta .cta.solid i{background:var(--blue);color:#fff}

/* ---------- inner pages: photo hero + service strip (live site) ---------- */
.inner main{padding-top:var(--head-h)}
.ph{position:relative;display:grid;place-items:center;min-height:clamp(340px, 62vh, 620px);padding:60px var(--gutter) 110px;text-align:center;color:#fff;
  background:linear-gradient(rgba(15,72,128,.62), rgba(15,72,128,.62)), var(--ph) center / cover no-repeat}
.ph h1{font:500 clamp(34px, 4.4vw, 60px)/1.15 var(--f);letter-spacing:.01em;max-width:20ch}
.ph-plain{min-height:clamp(220px, 34vh, 340px);padding-bottom:60px;background:linear-gradient(120deg, #5f6f7c, #788893)}
.ph-404{min-height:60vh}
.ph-404 p{margin-top:14px;color:rgba(255,255,255,.9)}
.ph-404 .btns{justify-content:center}
.ph-strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));margin:-104px auto 0;max-width:100%;
  background:rgba(14,46,82,.82);clip-path:polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);padding-bottom:28px}
.ph-strip a{display:grid;place-items:center;min-height:76px;padding:12px 10px;text-align:center;font:500 13.5px/1.35 var(--f);text-transform:uppercase;letter-spacing:.04em;color:#fff;
  border-left:1px solid rgba(255,255,255,.18);transition:background .25s}
.ph-strip a:first-child{border-left:0}
.ph-strip a:hover{background:rgba(255,255,255,.1)}

.ms-copy p:first-child{margin-top:0}
.ms-collage{position:relative;min-height:400px}
.ms-collage .c1{position:absolute;left:0;bottom:0;width:72%;aspect-ratio:3 / 2;object-fit:cover;box-shadow:0 18px 44px rgba(10,27,77,.18)}
.ms-collage .c2{position:absolute;right:0;top:0;width:52%;aspect-ratio:4 / 3;object-fit:cover;box-shadow:0 18px 44px rgba(10,27,77,.22)}
.ms-photo img{width:100%;border-radius:4px;box-shadow:0 18px 44px rgba(10,27,77,.16)}
.ms-photo img[src$=".svg"]{box-shadow:none;max-width:460px;margin:auto}
.ms-flip > .ms-copy{order:2}

/* market research cards (live site: bordered cards, the first one filled blue) */
.ms-svc-cards{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--gap)}
.ms-svc-cards > li{padding:24px 24px 26px;border:2px solid var(--text);border-radius:12px;background:#fff;transition:background .3s, color .3s, border-color .3s}
.ms-svc-cards > li svg{width:28px;height:28px;color:var(--blue)}
.ms-svc-cards h3{margin-top:12px;font:500 21px/1.3 var(--f);color:var(--text)}
.ms-svc-cards p{margin-top:8px;font-size:var(--fs) !important;line-height:1.7 !important}
.ms-svc-cards ul{margin:14px 0 0 18px;display:grid;gap:4px;font-size:15px;color:var(--body)}

.ms-band{color:#fff;background:linear-gradient(rgba(9,52,104,.85), rgba(9,52,104,.85)), var(--bg) center / cover no-repeat}
.ms-band .ms-h2{color:#fff}
.ms-band .ms-rule{background:rgba(255,255,255,.7)}
.ms-band p{color:rgba(255,255,255,.9)}
.ms-have{padding:30px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.ms-have h3{font:600 20px var(--f)}
.ms-have ul{list-style:none;display:grid;gap:12px;margin-top:16px}
.ms-have li{display:flex;gap:12px;align-items:center;font:500 16px var(--f)}
.ms-have li::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff}

/* contact */
.ms-contact{align-items:start}
.ms-contact .ms-h2{margin-bottom:16px}
.ms-contact-list{display:grid;gap:18px;margin-top:30px}
.ms-contact-list dt{display:flex;align-items:center;gap:10px;font:500 18px var(--f);color:var(--link)}
.ms-contact-list dt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ms-contact-list dd{margin:2px 0 0 30px;font-size:var(--fs);color:var(--body)}
.ms-contact-list a{color:var(--body)}
.ms-form{padding:30px;border-radius:14px;background:#fff;box-shadow:0 20px 50px rgba(10,27,77,.14), 0 0 0 1px var(--line)}
.form{display:grid;gap:14px}
.form label{display:block}
.form input,.form textarea{width:100%;font:400 16px var(--f);color:var(--text);background:#fff;border:1px solid #c9d2dd;border-radius:4px;padding:12px 14px}
.form input::placeholder,.form textarea::placeholder{color:#8a94a3}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue)}
.form input:focus-visible,.form textarea:focus-visible{box-shadow:0 0 0 3px rgba(11,92,181,.2)}
.form textarea{min-height:110px;resize:vertical}
.ms-check{border:0}
.form .check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--body)}
.form .check input{width:18px;height:18px;padding:0;margin-top:2px;accent-color:var(--blue);flex:none}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .cta{justify-self:start}
.form button[disabled]{opacity:.6;cursor:wait}
.form-msg{font-size:14px;color:var(--blue);min-height:1.4em}

/* legal */
.legal-doc{max-width:860px;margin:auto;padding:clamp(48px, 7vw, 90px) var(--gutter) clamp(64px, 9vw, 110px);color:var(--body);font-size:var(--fs);line-height:1.8}
.legal-doc h2{margin:40px 0 10px;font:600 clamp(19px, 1.6vw, 23px)/1.35 var(--f);color:var(--text)}
.legal-doc > h2:first-child{margin-top:0}
.legal-doc p{margin-top:12px}
.legal-doc ol,.legal-doc ul{margin:14px 0 0 22px;display:grid;gap:10px}
.legal-doc b,.legal-doc strong{color:var(--text);font-weight:600}
.legal-doc a{color:var(--link);text-decoration:underline}
.legal-doc .table-wrap{margin-top:18px}
.legal-doc .tbl{font-size:14.5px}

/* ---------- footer (live site: big logo · Services · Quick Links · Support · copyright) ---------- */
.site-foot{position:relative;z-index:6;padding:70px clamp(18px, 6vw, 110px) 26px;
  background:linear-gradient(rgba(255,255,255,.93), rgba(255,255,255,.93)), url(/assets/img/site/footer-bg.webp) center / cover no-repeat}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(3, 1fr);gap:32px;max-width:var(--wrap);margin:auto;align-items:start}
.foot-logo img{width:200px;height:auto}
.foot-grid .fh{font:500 16px var(--f);text-transform:uppercase;color:var(--link);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #cfd8e3;max-width:160px}
.foot-grid ul{list-style:none;display:grid;gap:10px;font-size:15px;color:var(--link)}
.foot-grid a:hover{color:var(--blue-2);text-decoration:underline}
.legal{max-width:var(--wrap);margin:44px auto 0;text-align:center;font-size:12px;color:var(--link)}

/* ==========================================================================================================
   MINIMAL GLASS THEME (2026-10-29). User: the services section's off-white stage behind every page, no gradient fills on
   the info boxes, smooth slide-in / pop-up reveals, hover effects on every page, glassmorphism with a rich-minimal look,
   one even header.
   - Background: the services stage (warm off-white #ecebe8 with a soft light) on every page.
   - Surfaces: plain frosted white glass, a hairline edge and a soft shadow. No colour gradients.
   - Ink #121212, body #4c4b48, one accent (the services deck's blue) for small marks only.
   - Hover: surfaces lift and pop on a spring; photos zoom; links nudge.
   ========================================================================================================== */
:root{
  --text:#121212; --mute:#6d6c69; --line:rgba(18,18,18,.1); --link:#1d1d1f; --blue:#046BD2; --blue-2:#121212; --accent:#046BD2; --body:#3a3936; --fs:16px; --sec:60px; --block:64px; --gap:24px;
  --stage:radial-gradient(60vw 60vh at 62% 45%, #f7f6f4, transparent 70%), radial-gradient(40vw 40vh at 10% 90%, rgba(120,140,255,.10), transparent 70%), #ecebe8;
  --glass:rgba(255,255,255,.55); --glass-hi:rgba(255,255,255,.8); --glass-edge:rgba(255,255,255,.9);
  --glass-dark:rgba(16,16,20,.34); --glass-dark-edge:rgba(255,255,255,.18);
  --glass-blur:blur(18px) saturate(140%);
  --pop:cubic-bezier(.16,1,.3,1);
  --shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(18,18,18,.05), 0 12px 30px -24px rgba(20,20,40,.24);
  --shadow-pop:inset 0 1px 0 #fff, 0 0 0 1px rgba(18,18,18,.08), 0 24px 46px -28px rgba(20,20,40,.32);
  --veil:rgba(14,14,18,.58);
}
html,body.inner{background:#ecebe8}
body.inner{background:var(--stage);background-attachment:fixed}
.content,.home .content{background:var(--stage);background-attachment:fixed}
.home .content{background:none;padding-top:28vh}
.ms-sec,.ms-tint,.ms-who,.ms-cta{background:transparent}

/* glass surfaces */
.ms-who .ms-wrap,.ms-features li,.ms-steps li,.ms-cards li,.ms-groups article,.ms-profiles li,.ms-list li,.table-wrap,.ms-svc-cards > li,
.ms-form,.legal-doc,.inner .ms-copy,.inner .ms-narrow,.foot-grid,.dd-menu,.sheet,.top{
  border:1px solid var(--glass-edge);background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow)}
.ms-features li,.ms-steps li,.ms-cards li,.ms-groups article,.ms-profiles li,.ms-list li,.ms-svc-cards > li{border-top-width:1px;border-left-width:1px;border-radius:20px}
.inner .ms-band .ms-copy,.inner .ms-contact > div:first-child{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.ms-h2{color:var(--text);letter-spacing:-.02em}
.ms-h3,.ms-features span,.ms-groups h3{color:var(--text)}
.ms-blue{color:var(--text)}
.ms-rule{width:44px;background:var(--text)}

/* ---------- header: one even glass bar (logo · nav · documents), every item the same height ---------- */
.top{top:12px;left:max(12px, calc((100% - 1280px) / 2));right:max(12px, calc((100% - 1280px) / 2));height:64px;padding:0 10px 0 20px;gap:16px;border-radius:20px;
  transition:translate .26s cubic-bezier(.4,0,.2,1), opacity .2s, background .3s, box-shadow .3s}
.top{background:rgba(255,255,255,.8)}
.top.scrolled{background:rgba(255,255,255,.9)}
.top.hide{translate:0 calc(-100% - 22px);opacity:0}
.brand,.links,.doc-btns{height:44px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.brand{display:flex;align-items:center;padding:0;border-radius:12px}
.brand img{height:42px;transition:scale .5s var(--pop)}
.brand:hover img{scale:1.07}
.links{position:relative;display:flex;align-items:center;margin:0 auto;padding:0;gap:2px;font:500 14.5px var(--f)}
.links > a,.dd-btn{position:relative;z-index:1;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:12px;color:#3a3936;transition:color .3s}
.links > a::after,.dd-btn::after{display:none}
.links a:hover,.links a[aria-current=page],.dd:hover .dd-btn,.dd-btn[aria-expanded=true]{color:var(--text)}
.dd{height:44px}
.nav-ind{position:absolute;z-index:0;top:0;bottom:0;left:0;width:0;border-radius:12px;opacity:0;pointer-events:none;background:#fff;
  box-shadow:0 0 0 1px rgba(18,18,18,.06), 0 8px 18px -8px rgba(20,20,40,.25);transition:left .45s var(--pop), width .45s var(--pop), opacity .25s}
.nav-ind.show{opacity:1}
.doc-btns{display:flex;align-items:center;gap:8px;margin-left:0;padding:0}
.doc-btn{position:relative;overflow:hidden;height:44px;padding:0 18px;border-radius:12px;background:#141414;color:#fff;font:500 13px/1 var(--f);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.45);transition:scale .4s var(--pop), box-shadow .3s, background .3s}
.doc-btn:hover{background:#000;scale:1.03;translate:none;filter:none;box-shadow:0 16px 28px -12px rgba(0,0,0,.55)}
.doc-btn::after{display:none}
.dd-menu{top:calc(100% + 16px);border-radius:16px;overflow:hidden;padding:8px;background:var(--glass-hi)}
.dd-menu a{border-radius:10px;color:var(--text);transition:background .25s, padding .35s var(--pop)}
.dd-menu a:hover,.dd-menu a[aria-current=page]{background:rgba(18,18,18,.06);color:var(--text);padding-left:26px}
.top-prog{position:fixed;left:0;top:0;z-index:41;height:2px;width:0;background:var(--text);pointer-events:none}
.menu-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.6)}
.menu-btn span,.menu-btn span::before{background:var(--text)}
.sheet{inset:88px 12px auto;max-height:calc(100vh - 100px);border-radius:20px;background:var(--glass-hi);color:var(--text)}
.sheet > a{border-bottom-color:var(--line)}

/* ---------- buttons: dark pills like the services deck ---------- */
.cta{position:relative;overflow:hidden;align-items:center;gap:12px;padding:6px 6px 6px 20px;border-radius:999px;border:1px solid var(--glass-edge);background:var(--glass);color:var(--text);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:scale .4s var(--pop), box-shadow .3s, background .3s}
.cta span{padding:6px 0}
.cta i{width:32px;height:32px;border-radius:50%;background:#141414;color:#fff;transition:translate .35s var(--pop)}
.cta.solid{background:#141414;border-color:#141414;color:#fff;box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}
.cta.solid i{background:rgba(255,255,255,.16)}
.cta:hover{scale:1.03;filter:none;box-shadow:0 18px 32px -14px rgba(0,0,0,.4)}
.cta:hover i{translate:3px 0}
.cta::after{display:none}
#story .cta.solid,.ms-cta .cta.solid,.ph .cta.solid{background:#fff;border-color:#fff;color:#121212}
#story .cta.solid i,.ms-cta .cta.solid i,.ph .cta.solid i{background:#141414;color:#fff}

/* ---------- hover: every surface pops up on a spring ---------- */
.ms-features li,.ms-steps li,.ms-cards li,.ms-groups article,.ms-profiles li,.ms-list li,.ms-svc-cards > li,.ph-strip a,.ms-photo,.inner .ms-copy,.inner .ms-narrow,.ms-form,.legal-doc,.table-wrap,.ms-have{
  position:relative;transition:transform .55s var(--pop), box-shadow .45s, background .35s, border-color .35s}
.ms-features li:hover,.ms-steps li:hover,.ms-cards li:hover,.ms-profiles li:hover,.ms-list li:hover,.ms-svc-cards > li:hover,.ms-photo:hover{
  transform:translateY(-4px);background:var(--glass-hi);box-shadow:var(--shadow-pop);z-index:2}
.ms-groups article:hover,.inner .ms-copy:hover,.inner .ms-narrow:hover,.ms-form:hover,.table-wrap:hover{transform:translateY(-3px);background:var(--glass-hi);box-shadow:var(--shadow-pop)}
.legal-doc:hover{box-shadow:var(--shadow-pop)}
.ms-svc-cards > li.is-first *{color:inherit !important}
.ms-svc-cards > li svg,.ms-features img{transition:transform .6s var(--pop)}
.ms-svc-cards > li svg{color:var(--text)}
.ms-svc-cards > li:hover svg{transform:scale(1.2) rotate(-6deg);color:var(--accent)}
.ms-features li{padding:20px}
.ms-features img{opacity:.8}
.ms-features li:hover img{transform:scale(1.12) translateY(-3px);opacity:1}
.ms-steps li{border-top:1px solid var(--glass-edge)}
.ms-step{color:var(--accent)}
.ms-steps li::after{content:"";position:absolute;left:24px;top:0;height:2px;width:28px;background:var(--text);transition:width .6s var(--pop), background .3s}
.ms-steps li:hover::after{width:calc(100% - 48px);background:var(--accent)}
.ms-cards li{border-left:1px solid var(--glass-edge)}
.ms-groups h3,.ms-svc-cards h3,.ms-cards b,.ms-steps b{transition:color .3s}
.ms-groups article:hover h3,.ms-svc-cards > li:hover h3,.ms-cards li:hover b,.ms-steps li:hover b{color:var(--accent)}
.ms-groups li::before,.ms-list li::before{background:var(--text);border-color:var(--text);transition:background .3s, scale .4s var(--pop)}
.ms-list li::before{background:none}
.ms-list li:hover::before,.ms-groups li:hover::before{scale:1.35;border-color:var(--accent);background:var(--accent)}
.ms-profiles li::before{color:var(--mute)}
.ms-profiles li:hover::before{color:var(--accent)}

/* ---------- inner hero: client photo under a neutral veil, glass title, glass link strip ---------- */
.ph{isolation:isolate;overflow:hidden;background:none;padding-top:130px}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--veil), var(--veil)), var(--ph) center / cover no-repeat;animation:kb 16s var(--ease) both}
.ph-plain::before{background:linear-gradient(rgba(14,14,18,.72), rgba(14,14,18,.72)), url(/assets/img/site/footer-bg.webp) center / cover no-repeat}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.ph-404 p,.ph-404 .btns{animation:popIn 1s var(--ease) .35s both}
.ph-strip{clip-path:none;background:none;max-width:var(--wrap);margin:-76px auto 0;padding:0 var(--gutter);gap:12px}
.ph-strip a{min-height:62px;border-radius:16px;border:1px solid var(--glass-dark-edge);background:var(--glass-dark);color:#fff;
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.ph-strip a:first-child{border-left:1px solid var(--glass-dark-edge)}
.ph-strip a:hover{transform:translateY(-3px);background:rgba(255,255,255,.16)}
.ph-strip a[aria-current=page]{background:#fff;border-color:#fff;color:#121212}
.inner main{padding-top:0}

/* ---------- inner blocks ---------- */
.inner .ms-copy,.inner .ms-narrow{padding:clamp(24px, 3vw, 40px);border-radius:24px}
.ms-photo{overflow:hidden;border-radius:22px;border:1px solid var(--glass-edge);background:#fff;box-shadow:var(--shadow)}
.ms-photo img{border-radius:0;box-shadow:none;transition:scale .9s var(--ease)}
.ms-photo:hover img{scale:1.07}
.ms-photo:has(img[src$=".svg"]){background:var(--glass)}
.ms-collage img,.ms-photos img{border-radius:22px;transition:transform .7s var(--pop), box-shadow .7s}
.ms-collage:hover .c1,.ms-photos:hover .p2{transform:translate(-10px, 8px) rotate(-2deg)}
.ms-collage:hover .c2,.ms-photos:hover .p1{transform:translate(10px, -8px) rotate(2deg)}

/* ---------- photo bands (What Do We Offer?, service bands): client photo under the same neutral veil, dark glass ---------- */
.ms-who .ms-wrap{padding:clamp(28px, 4vw, 54px);border-radius:30px}
.ms-offer{background:linear-gradient(var(--veil), var(--veil)), url(/assets/img/site/offer-bg.webp) center / cover fixed no-repeat}
.ms-sec.ms-band{background:linear-gradient(var(--veil), var(--veil)), var(--bg) center / cover fixed no-repeat}
/* their photos load only when the band comes near (common.js adds .bg-in; no class-guard, or the first style pass fetches them) */
.ms-offer:not(.bg-in),.ms-sec.ms-band:not(.bg-in){background-image:linear-gradient(var(--veil), var(--veil))}
.ms-offer .ms-copy,.ms-band .ms-split > div:first-child,.ms-have{padding:clamp(24px, 3vw, 40px);border-radius:24px;border:1px solid var(--glass-dark-edge);background:var(--glass-dark);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
.ms-offer .ms-copy,.ms-band .ms-split > div:first-child{transition:transform .55s var(--pop), background .35s}
.ms-offer .ms-copy:hover,.ms-band .ms-split > div:first-child:hover,.ms-have:hover{transform:translateY(-3px);background:rgba(16,16,20,.48)}
.ms-offer .ms-copy p{color:#fff}
.ms-offer,.ms-sec.ms-band{padding-top:calc(var(--sec) * 1.6);padding-bottom:calc(var(--sec) * 1.6)}
.ms-offer .ms-rule,.ms-band .ms-rule{background:rgba(255,255,255,.75)}

/* ---------- tables ---------- */
.table-wrap{border-radius:20px;overflow:hidden}
.tbl{background:transparent}
.tbl thead th{background:#141414;color:#fff}
.tbl th,.tbl td{border-top-color:var(--line)}
.tbl tbody tr{transition:background .3s}
.tbl tbody tr:hover{background:rgba(255,255,255,.7)}

/* ---------- contact band: one dark glass card ---------- */
.ms-cta .ms-cta-in{padding:clamp(28px, 4vw, 48px);border-radius:30px;background:#141414;border:1px solid #141414;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  transition:transform .55s var(--pop), box-shadow .45s}
.ms-cta .ms-cta-in:hover{transform:translateY(-3px);box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}

/* ---------- forms and legal ---------- */
.ms-form{border-radius:26px}
.form input,.form textarea{background:rgba(255,255,255,.75);border-color:var(--line);border-radius:12px;transition:border-color .25s, box-shadow .25s, background .25s}
.form input:hover,.form textarea:hover{border-color:rgba(18,18,18,.25);background:#fff}
.form input:focus,.form textarea:focus{border-color:var(--text);background:#fff}
.form input:focus-visible,.form textarea:focus-visible{box-shadow:0 0 0 3px rgba(18,18,18,.1)}
.form .check input{accent-color:#141414}
.form-msg{color:var(--text)}
.ms-contact-list dt{color:var(--text)}
.ms-contact-list dt svg{transition:transform .4s var(--pop)}
.ms-contact-list div:hover dt svg,.ms-contact-list dt:hover svg{transform:scale(1.2);color:var(--accent)}
.ms-contact-list a{transition:color .25s}
.ms-contact-list a:hover{color:var(--accent)}
.legal-doc{margin:-60px auto 80px;border-radius:26px;position:relative;z-index:2}
.legal-doc a{color:var(--text)}
.legal-note{display:inline-block;margin:0 0 6px !important;padding:8px 14px;border-radius:10px;background:#141414;color:#fff;font:500 13px var(--f)}
.legal-meta{color:var(--mute);font-size:14px}
.legal-doc h3{margin:26px 0 6px;font:600 17px/1.4 var(--f);color:var(--text)}
.legal-doc a:hover{color:var(--accent)}

/* ---------- footer: the same stage, one glass card ---------- */
.site-foot{background:var(--stage);padding:44px clamp(12px, 3vw, 40px) 22px}
.site-foot::before{content:none}
.foot-grid,.site-foot .legal{position:relative}
.foot-grid{padding:clamp(26px, 3.4vw, 48px);border-radius:28px}
.foot-grid .fh{color:var(--text);border-bottom-color:var(--line);font-weight:600;font-size:13px;letter-spacing:.08em}
.foot-grid ul{color:#3a3936}
.foot-grid ul a{display:inline-block;background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;transition:background-size .45s var(--ease), color .25s}
.foot-grid ul a:hover{background-size:100% 1px;color:var(--accent);text-decoration:none}
.legal{color:var(--mute)}
.foot-logo img{transition:scale .6s var(--pop)}
.foot-logo:hover img{scale:1.06}

/* ---------- services: freefall deck (reference recording 2026-10-26 165201: off-white stage, glossy card deck) ---------- */
.ff{position:relative;height:calc(var(--ff-n, 7) * 72vh + 100vh);background:#ecebe8}
.ff-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(0, 40%) minmax(0, 1fr) 96px;gap:clamp(16px, 3vw, 48px);align-items:center;
  padding:calc(var(--head-h) + 20px) clamp(20px, 5vw, 80px) 24px;--cw:clamp(260px, 24vw, 370px);
  background:radial-gradient(60vw 60vh at 62% 45%, #f7f6f4, transparent 70%), radial-gradient(40vw 40vh at 10% 90%, rgba(120,140,255,.10), transparent 70%), #ecebe8}
.ff-eyebrow{display:flex;align-items:center;gap:14px;font:500 11px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;letter-spacing:.22em;text-transform:uppercase;color:#6d6c69}
.ff-eyebrow span{width:44px;height:1px;background:#9a9893}
.ff-title{margin-top:22px;font:700 clamp(40px, 5vw, 86px)/.98 var(--f);letter-spacing:-.035em;color:#121212}
.ff-title span{display:block;white-space:nowrap}
.ff-title em{display:inline-block;font-style:italic;padding-right:.08em;color:#121212}
.ff-details{display:grid;margin-top:28px}
.ff-detail{grid-area:1 / 1;opacity:0;translate:0 14px;filter:blur(4px);pointer-events:none;transition:opacity .45s, translate .6s var(--ease), filter .45s}
.ff-detail.on{opacity:1;translate:0 0;filter:none;pointer-events:auto}
.ff-detail h3{display:inline-block;font:600 19px/1.3 var(--f);color:#121212;padding-bottom:6px;background:linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat}
.ff-detail p{margin-top:12px;font-size:16px;line-height:1.7;color:var(--body);max-width:50ch}
.ff-detail ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:14px;max-width:46ch}
.ff-detail li{position:relative;padding-left:16px;font-size:15px;color:#1d1d1d}
.ff-detail li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.ff-btn{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:8px 8px 8px 22px;border-radius:999px;background:#141414;color:#fff;font:500 14px var(--f);
  box-shadow:0 12px 26px rgba(0,0,0,.22);transition:scale .4s var(--pop), box-shadow .3s}
.ff-btn i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);font-style:normal;transition:translate .35s var(--pop), background .3s}
.ff-btn:hover{scale:1.03;box-shadow:0 16px 34px rgba(0,0,0,.3)}
.ff-btn:hover i{translate:3px 0;background:var(--accent)}
.ff-detail.on > *{animation:ffIn .6s var(--ease) both}
.ff-detail.on > :nth-child(2){animation-delay:.06s}
.ff-detail.on > :nth-child(3){animation-delay:.12s}
.ff-detail.on > :nth-child(4){animation-delay:.18s}
@keyframes ffIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

.ff-deck{position:relative;height:100%;min-height:0}
.ff-card{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:1;margin:calc(var(--cw) / -2) 0 0 calc(var(--cw) / -2);border-radius:20px;overflow:hidden;cursor:pointer;
  background:#1a1a2e;transform-origin:50% 50%;will-change:transform, opacity, filter;
  box-shadow:0 34px 60px -18px rgba(20,20,40,.42), 0 2px 6px rgba(0,0,0,.12)}
.ff-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
/* glossy shine: a specular sweep from the top-left, a fine inner edge, and a slow glint on the active card */
.ff-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 22%, transparent 42%), linear-gradient(315deg, rgba(255,255,255,.12) 0%, transparent 30%)}
.ff-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.5);
  background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,.38) 48%, rgba(220,230,255,.18) 52%, transparent 62%) -160% 0 / 250% 100% no-repeat}
.ff-card.on::after{animation:ffGlint 3.6s var(--ease) .4s infinite}
@keyframes ffGlint{0%{background-position:-160% 0}55%,100%{background-position:160% 0}}
.ff-card figcaption{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:18px;color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 26%, transparent 46%, rgba(6,8,20,.8) 100%)}
.ff-chip{position:absolute;left:14px;top:14px;padding:4px 10px;border-radius:7px;font:600 10.5px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;letter-spacing:.14em;
  background:rgba(10,12,24,.42);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ff-kicker{font:500 9.5px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.ff-name{font:700 clamp(20px, 1.8vw, 28px)/1.12 var(--f);letter-spacing:-.01em}
.ff-desc{font-size:12px;line-height:1.45;opacity:.82;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.ff-meta{display:grid;justify-items:center;align-content:center;gap:16px;height:100%}
.ff-count{display:flex;align-items:flex-start;font:800 clamp(38px, 3.6vw, 58px)/1 var(--f);letter-spacing:-.03em;color:#111;transform:scaleX(1.12)}
.ff-count span{margin-top:.3em;font-size:12px;font-weight:500;letter-spacing:0;color:#8a8984}
.ff-rail{position:relative;width:2px;height:min(38vh, 320px);background:linear-gradient(#cfcdc8, #cfcdc8) center / 2px 100% no-repeat;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.ff-rail i{width:4px;height:4px;border-radius:50%;background:#b9b7b1}
.ff-fill{position:absolute;left:0;top:0;width:2px;height:0;background:var(--accent)}
.ff-dot{position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);z-index:2;
  box-shadow:0 0 0 5px rgba(4,107,210,.18), 0 0 18px rgba(4,107,210,.7)}
.ff-vname{writing-mode:vertical-rl;font:600 11px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;letter-spacing:.22em;text-transform:uppercase;color:#3a3936}

/* ---------- accordion (quality check groups): title opens its list; first one open (common.js toggles .open + aria-expanded) ---------- */
.ms-acc{display:grid;gap:12px;max-width:980px}
.acc-item{border-radius:20px;border:1px solid var(--glass-edge);background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);
  transition:background .35s, box-shadow .45s, transform .55s var(--pop)}
.acc-item:hover,.acc-item.open{background:var(--glass-hi);box-shadow:var(--shadow-pop)}
.acc-item:hover{transform:translateY(-3px)}
.acc-item h3{margin:0}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;text-align:left;font:600 17px/1.4 var(--f);color:var(--text);border-radius:20px;transition:color .3s}
.acc-btn:hover{color:var(--accent)}
.acc-btn i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);color:var(--text);transition:background .3s, color .3s, border-color .3s, scale .4s var(--pop)}
.acc-btn i::before,.acc-btn i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:rotate .4s var(--ease)}
.acc-btn i::after{rotate:90deg}
.acc-btn:hover i{scale:1.1;border-color:var(--accent);color:var(--accent)}
.acc-item.open .acc-btn i{background:#141414;border-color:#141414;color:#fff}
.acc-item.open .acc-btn i::after{rotate:0deg}
.acc-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease), visibility 0s .55s}
.acc-item.open .acc-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease)}
.acc-in{min-height:0;overflow:hidden}
.ms-acc ul{list-style:none;display:grid;gap:12px;padding:0 26px 26px}
.acc-in ul{opacity:0;translate:0 -8px;transition:opacity .35s, translate .5s var(--ease)}
.acc-item.open .acc-in ul{opacity:1;translate:0 0;transition:opacity .45s .12s, translate .55s var(--ease) .08s}

/* ---------- chips (Digital Fingerprinting characteristics) ---------- */
.ms-chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;align-content:start}
.ms-chips li{padding:12px 20px;border-radius:999px;border:1px solid var(--glass-edge);background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow);font:500 15.5px var(--f);color:var(--text);transition:transform .5s var(--pop), background .3s, box-shadow .4s, color .3s}
.ms-chips li:hover{transform:translateY(-2px);background:#141414;border-color:#141414;box-shadow:var(--shadow-pop);color:#fff}

/* ---------- contact form intro ---------- */
.form-intro{max-width:none !important;margin:0 0 6px;padding-bottom:18px;border-bottom:1px solid var(--line);font:500 17px/1.6 var(--f) !important;color:var(--text) !important}

@media (max-width: 760px){
  :root{--fs:15px; --sec:36px; --block:40px; --gap:16px}
  .acc-btn{padding:18px 18px;font-size:15.5px;gap:14px}
  .ms-acc ul{padding:0 18px 20px}
  .ms-chips li{padding:10px 16px;font-size:14.5px}
  .form-intro{font-size:16px !important}
}
@media (prefers-reduced-motion: reduce){
  .acc-panel,.acc-item.open .acc-panel,.acc-in ul,.acc-item.open .acc-in ul{transition:none}
}

/* ---------- editorial headings (like the services deck): bold, tight, the last word in bold italic ---------- */
.ms-h2{font:700 clamp(34px, 4.2vw, 62px)/1.04 var(--f);letter-spacing:-.035em;max-width:18ch}
.ms-h2.is-long{font-size:clamp(28px, 3vw, 44px);line-height:1.1;max-width:24ch}
.ms-h2 em,.ph h1 em{font-style:italic;font-weight:700;padding-right:.06em}
.ms-center .ms-h2,.ms-h2.ms-center,.ms-centered .ms-h2,.ms-center-head .ms-h2{margin-left:auto;margin-right:auto}
.ms-h3{font:600 clamp(22px, 2vw, 30px)/1.25 var(--f);letter-spacing:-.02em;color:var(--text)}
.ms-rule{margin:22px 0 26px}
.ms-cta .ms-h2{max-width:none}

/* ---------- inner hero: client photo, breadcrumb, big left-aligned title, scroll cue ---------- */
.ph{display:grid;place-items:end start;text-align:left;min-height:clamp(460px, 76vh, 780px);padding:150px var(--gutter) 70px}
.ph:has(+ .ph-strip){padding-bottom:150px}
.ph::before{background:linear-gradient(to top, rgba(14,14,18,.8), rgba(14,14,18,.38) 70%), var(--ph) center / cover no-repeat}
.ph-plain::before{background:linear-gradient(to top, rgba(14,14,18,.85), rgba(14,14,18,.62)), url(/assets/img/site/footer-bg.webp) center / cover no-repeat}
.ph-in{width:100%;max-width:var(--wrap);margin:0 auto}
.ph h1{font:700 clamp(46px, 7.6vw, 120px)/.98 var(--f);letter-spacing:-.045em;max-width:13ch}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px;font:500 11.5px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);animation:revUp .9s var(--ease) .5s both}
.crumbs::before{content:"";width:44px;height:1px;background:rgba(255,255,255,.55)}
.crumbs i{font-style:normal;opacity:.5}
.crumbs a{transition:color .25s}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}
.ph-cue{position:absolute;right:var(--gutter);bottom:70px;display:grid;justify-items:center;gap:12px;writing-mode:vertical-rl;font:500 10.5px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ph:has(+ .ph-strip) .ph-cue{bottom:150px}
.ph-cue::after{content:"";width:1px;height:46px;background:linear-gradient(#fff, #fff) 0 0 / 1px 40% no-repeat, rgba(255,255,255,.25);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{from{background-position:0 -100%}to{background-position:0 260%}}
.ph-plain{min-height:clamp(340px, 52vh, 520px);padding-bottom:110px}
.ph-404{min-height:72vh}
.ph-404 h1{max-width:16ch;font-size:clamp(40px, 6vw, 92px)}
.ph-404 .btns{justify-content:flex-start}

/* ---------- home: the final iris opens into the off-white page (home.js drives --wipe, 0..1) ---------- */
.iris-wipe{position:fixed;inset:0;z-index:5;pointer-events:none;background:var(--stage);background-attachment:fixed;
  clip-path:circle(calc(var(--wipe, 0) * 75vmax) at 50% 50%);visibility:hidden}
.iris-wipe.on{visibility:visible}

/* ---------- photo reveals: the photo uncovers from its outer edge while it settles from 1.18× to 1× ---------- */
.reveal.r-photo{opacity:1}
.reveal.r-photo:not(.in){clip-path:inset(0 100% 0 0)}
.reveal.r-photo.p-right:not(.in){clip-path:inset(0 0 0 100%)}
.reveal.in.r-photo{animation:photoL 1.25s cubic-bezier(.77,0,.18,1) var(--d, 0ms) backwards}
.reveal.in.r-photo.p-right{animation-name:photoR}
.reveal.in.r-photo img{animation:photoSettle 1.7s var(--ease) var(--d, 0ms) backwards}
@keyframes photoL{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes photoR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes photoSettle{from{scale:1.18}to{scale:1}}

/* ---------- page transitions: leaving = an off-white panel with the logo rises (common.js adds .go); arriving = it lifts away ---------- */
.pt{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:#ecebe8;pointer-events:none;transform:translateY(100%);visibility:hidden}
.pt.go{visibility:visible;animation:ptIn .55s cubic-bezier(.7,0,.3,1) both}
.pt img{width:120px;height:auto;opacity:0}
.pt.go img{animation:ptLogo .4s var(--ease) .22s both}
@keyframes ptIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes ptLogo{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
body.inner::after{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;background:url(/assets/img/logo-original-240.png) center / 120px auto no-repeat, #ecebe8;
  animation:ptOut .75s cubic-bezier(.7,0,.3,1) .12s both}
@keyframes ptOut{from{transform:translateY(0)}to{transform:translateY(-100%);visibility:hidden}}
@media (prefers-reduced-motion: reduce){
  body.inner::after{display:none}
  .reveal.r-photo,.reveal.r-photo:not(.in){clip-path:none}
  .reveal.in.r-photo img{animation:none}
}

/* ---------- smart, elegant motion (after the Quantifie site): word masks, drawn hairlines, editorial rows ---------- */
/* headings: each word rises out of its own mask (common.js wraps words in .wm > .wi and adds .seen) */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em;margin:0 -.08em -.16em}
.wi{display:inline-block;translate:0 118%;transition:translate 1s var(--ease) calc(var(--i, 0) * 45ms)}
[data-split].seen .wi{translate:0 0}
.ph h1 .wi{transition-duration:1.1s;transition-delay:calc(.55s + var(--i, 0) * 80ms)}
/* hairline rules draw in from the left (centred ones from the middle) */
.js-motion .ms-rule{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) .3s}
.js-motion .ms-rule.ms-center,.js-motion .ms-centered .ms-rule,.js-motion .ms-center-head .ms-rule{transform-origin:50% 50%}
.js-motion .ms-rule.seen{transform:none}
/* Easy Process: each step's top line draws across its card as the card arrives */
.ms-steps li.in::after{width:calc(100% - 48px);transition:width 1.2s var(--ease) calc(var(--d, 0ms) + .35s), background .3s}
.ms-steps li:hover::after{background:var(--accent)}
/* profiling topics: an editorial list with hairlines; a row fills dark from the bottom on hover */
.ms-sec .ms-profiles{gap:0 36px}
.ms-sec .ms-profiles li{isolation:isolate;overflow:hidden;padding:15px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;font:500 16px/1.4 var(--f);transition:color .35s, padding .45s var(--ease)}
.ms-sec .ms-profiles li::before{font:500 12px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;color:var(--mute);transition:color .35s}
.ms-sec .ms-profiles li::after{content:"";position:absolute;inset:0;z-index:-1;background:#141414;clip-path:inset(100% 0 0 0);transition:clip-path .5s var(--ease)}
.ms-sec .ms-profiles li:hover{transform:none;background:none;box-shadow:none;color:#fff;padding-left:20px}
.ms-sec .ms-profiles li:hover::after{clip-path:inset(0 0 0 0)}
.ms-sec .ms-profiles li:hover::before{color:#8fc1ff}

/* ---------- editorial, rich-minimal layer (2026-10-29): text on the page, not in boxes; lead paragraphs; sticky headings ---------- */
/* text columns sit on the page: boxes are kept for real grid items only */
.ms-who .ms-wrap,.inner .ms-copy,.inner .ms-narrow{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.inner .ms-copy,.inner .ms-narrow{padding:0}
.ms-who .ms-wrap{padding:0}
.inner .ms-copy:hover,.inner .ms-narrow:hover{transform:none;background:none;box-shadow:none}
/* section head on its own line, left aligned */
.ms-head{margin-bottom:48px}
/* text blocks: heading on the left (sticky while the text scrolls), reading column on the right */
.ms-ed{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:var(--block);align-items:start}
.ms-ed-h{position:sticky;top:110px}
.ms-ed-h .ms-h2,.ms-ed-h .ms-h3{max-width:16ch}
/* the first paragraph after a heading reads as a lead */
.ms-ed-p > p:first-child,.ms-copy > .ms-rule + p,.ms-intro .ms-copy > p:first-child,.ms-who .ms-split > div:first-child > p{font-size:clamp(17px, 1.3vw, 19px) !important;line-height:1.65 !important;color:var(--text) !important;font-weight:500}
.ms-ed-p > p + p,.ms-copy > p + p{margin-top:18px}
/* photos: one frame, no white border, a calm 4:3 crop */
.ms-photo{border:0;background:none;box-shadow:0 30px 60px -36px rgba(20,20,40,.45);border-radius:20px}
.ms-photo img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
/* Who Are We? line icons */
.ms-ico{width:46px;height:46px;fill:none;stroke:var(--text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s, transform .5s var(--pop)}
.ms-features li:hover .ms-ico{stroke:var(--accent);transform:translateY(-3px)}
/* breadcrumb: quiet sans, no rule */
.crumbs{font:500 13.5px var(--f);letter-spacing:0;text-transform:none;gap:8px}
.crumbs::before{content:none}

/* ---------- reveals: side boxes slide in, grid boxes pop up, headings rise; one by one (common.js sets --d and the direction class).
   Keyframes on translate / scale, not transform, so they never fight a box's hover transform. ---------- */
.reveal{opacity:0}
.reveal.in{animation:popIn .9s cubic-bezier(.34,1.22,.64,1) var(--d, 0ms) both}
.reveal.in.r-left{animation:revL .95s var(--ease) var(--d, 0ms) both}
.reveal.in.r-right{animation:revR .95s var(--ease) var(--d, 0ms) both}
.reveal.in.r-up{animation:revUp .9s var(--ease) var(--d, 0ms) both}
@keyframes popIn{from{opacity:0;translate:0 36px;scale:.95}to{opacity:1;translate:0 0;scale:1}}
@keyframes revL{from{opacity:0;translate:calc(-1 * var(--rx, 48px)) 0}to{opacity:1;translate:0 0}}
@keyframes revR{from{opacity:0;translate:var(--rx, 48px) 0}to{opacity:1;translate:0 0}}
@keyframes revUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  .links{margin-left:0;gap:18px}
  .doc-btn{padding:9px 12px}
}
@media (max-width: 980px){
  :root{--head-h:72px}
  .links,.doc-btns{display:none}
  .menu-btn{display:block}
  .brand img{height:40px}
  .ms-split{grid-template-columns:1fr}
  .ms-flip > .ms-copy{order:0}
  .ms-steps{grid-template-columns:1fr 1fr}
  .ms-cards-3,.ms-svc-cards{grid-template-columns:1fr 1fr}
  .ms-groups{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .ph-strip{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width: 760px){
  .track{height:220vh}
  .small{max-width:30ch;font-size:14.5px}
  .s3-note{font-size:16px}
  .hero-title{top:52vh;bottom:auto;font-size:clamp(34px, 10vw, 46px)}
  .hero-copy{top:calc(52vh + 2.2 * clamp(34px, 10vw, 46px) + 14px)}
  .s3-line{max-width:none;left:var(--gutter);bottom:7vh}
  .s6-copy{top:auto;bottom:8vh;left:var(--gutter);justify-items:start}
  .s6-copy .small{text-align:left}
  .ms-features{grid-template-columns:1fr 1fr}
  .ms-photos{min-height:300px}
  .ms-collage{min-height:290px}
  .ms-steps,.ms-cards-3,.ms-svc-cards,.ms-profiles{grid-template-columns:1fr}
  .ms-cta-in{flex-direction:column;align-items:flex-start}
  .ph{min-height:300px;padding-bottom:90px}
  .ph-strip{grid-template-columns:1fr 1fr;margin-top:-80px;clip-path:none;padding-bottom:0}
  .ph-strip a{min-height:54px;font-size:12px;border-top:1px solid rgba(255,255,255,.15)}
  .foot-grid{grid-template-columns:1fr}
  .table-wrap{overflow:visible;border:0;background:none}
  .tbl{min-width:0}
  .tbl thead{display:none}
  .tbl tr{display:block;margin-bottom:12px;padding:16px 18px;border:1px solid var(--glass-edge);border-radius:16px;background:var(--glass);box-shadow:var(--shadow)}
  .tbl th,.tbl td{display:block;padding:0;border:0;width:auto}
  .tbl tbody th{margin-bottom:10px;width:auto}
  .tbl td{margin-top:8px}
  .tbl td::before{content:attr(data-label);display:block;font:600 11px var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in{opacity:1;animation:none}
  .ph::before,.ph h1,.ph-404 p,.ph-404 .btns{animation:none}
}


/* glass theme on smaller screens */
@media (max-width: 1100px) and (min-width: 761px){
  .ff-pin{grid-template-columns:minmax(0, 44%) minmax(0, 1fr) 70px;--cw:clamp(220px, 26vw, 280px)}
  .ff-title{font-size:clamp(40px, 6vw, 64px)}
}
@media (max-width: 980px){
  .top{height:60px;top:8px;left:8px;right:8px;padding:0 8px 0 16px}
  .brand img{height:32px}
  .sheet{inset:76px 8px auto}
  .ph{padding-top:110px}
}
@media (max-width: 760px){
  :root{--rx:36px}
  .ph:has(+ .ph-strip){padding-bottom:210px}
  .ph-strip{grid-template-columns:1fr 1fr;margin-top:-196px;gap:8px}
  .ph-strip a:last-child{grid-column:span 2}
  .ph-strip a{min-height:50px;border-radius:14px}
  .ph-strip a:hover{transform:none}
  .ms-who .ms-wrap{border-radius:24px}
  .legal-doc{margin:-40px 10px 60px;border-radius:22px}
  .ms-offer,.ms-sec.ms-band{background-attachment:scroll}
  .ff{height:calc(var(--ff-n, 7) * 64vh + 100vh)}
  .ff-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:8px;padding:calc(var(--head-h) + 12px) var(--gutter) 12px;--cw:min(54vw, 230px)}
  .ff-eyebrow{font-size:9.5px}
  .ff-title{margin-top:10px;font-size:clamp(34px, 10vw, 44px)}
  .ff-details{margin-top:12px}
  .ff-detail h3{font-size:16px}
  .ff-detail p{font-size:14px;line-height:1.55;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ff-detail p + p,.ff-detail ul{display:none}
  .ff-btn{margin-top:10px;font-size:13px;padding:6px 6px 6px 16px}
  .ff-btn i{width:26px;height:26px}
  .ff-deck{height:auto;min-height:44vh}
  .ff-meta{position:absolute;right:var(--gutter);top:calc(var(--head-h) + 12px);height:auto;gap:6px}
  .ff-rail,.ff-vname{display:none}
  .ff-count{font-size:30px}
}
@media (hover: none){
  .ms-collage:hover img,.ms-photos:hover img{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .top{transition:none}
  .ms-photo:hover img{scale:1}
  .ff-card.on::after,.ff-detail.on > *{animation:none}
}

/* editorial headings + inner hero on phones (after the responsive blocks so these win) */
@media (max-width: 760px){
  .ms-h2{font-size:clamp(30px, 8.6vw, 40px);max-width:none}
  .ms-h2.is-long{font-size:clamp(25px, 7vw, 32px)}
  .ph{min-height:78vh;padding:120px var(--gutter) 56px}
  .ph h1{font-size:clamp(40px, 12vw, 58px)}
  .crumbs{margin-bottom:16px;font-size:10px;letter-spacing:.16em}
  .crumbs::before{width:24px}
  .ph-cue{display:none}
}
@media (prefers-reduced-motion: reduce){
  .ph-cue::after,.crumbs{animation:none}
}
@media (prefers-reduced-motion: reduce){
  .wi{translate:none;transition:none}
  .js-motion .ms-rule{transform:none;transition:none}
}
@media (max-width: 980px){
  .ms-ed{grid-template-columns:1fr;gap:20px}
  .ms-ed-h{position:static}
  .ms-ed-h .ms-h2,.ms-ed-h .ms-h3{max-width:none}
}
@media (max-width: 760px){
  .ms-head{margin-bottom:28px}
  .ms-ed-p > p:first-child,.ms-copy > .ms-rule + p,.ms-intro .ms-copy > p:first-child,.ms-who .ms-split > div:first-child > p{font-size:17px !important}
  .crumbs{font-size:12.5px}
}

/* ---------- PDF modal (Panel Book / ESOMAR, common.js): frosted card over the dimmed, blurred page ---------- */
.pdf-modal{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(14px, 3vw, 40px);border:0;
  display:grid;place-items:center;overflow:hidden;color:var(--text);background:rgba(14,14,18,.42);
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .38s ease}
.pdf-modal:not([open]){display:none}
.pdf-modal::backdrop{background:transparent}
.pdf-modal.show{opacity:1}
.pdf-card{display:grid;grid-template-rows:auto 1fr;gap:10px;width:min(1120px, 100%);height:100%;padding:10px;border-radius:26px;
  border:1px solid var(--glass-edge);background:var(--glass-hi);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(18,18,18,.06), 0 40px 90px -40px rgba(0,0,0,.6);
  translate:0 28px;scale:.97;transition:translate .6s var(--pop), scale .6s var(--pop)}
.pdf-modal.show .pdf-card{translate:none;scale:1}
.pdf-bar{display:flex;align-items:center;gap:8px;padding:2px 2px 0 14px}
.pdf-title{flex:1;min-width:0;margin:0;font:600 16px/1.2 var(--f);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pdf-new,.pdf-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-edge);background:var(--glass);color:var(--text);
  cursor:pointer;box-shadow:var(--shadow);transition:scale .4s var(--pop), background .3s, box-shadow .3s}
.pdf-new:hover,.pdf-x:hover{scale:1.07;background:#fff;box-shadow:var(--shadow-pop)}
.pdf-dl{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 6px 0 20px;border-radius:999px;background:#141414;color:#fff;
  font:500 14px/1 var(--f);text-decoration:none;box-shadow:0 12px 26px -12px rgba(0,0,0,.45);transition:scale .4s var(--pop), background .3s}
.pdf-dl i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);transition:translate .35s var(--pop)}
.pdf-dl:hover{background:#000;scale:1.03}
.pdf-dl:hover i{translate:0 2px}
.pdf-bar a:focus-visible,.pdf-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pdf-frame{position:relative;min-height:0;border-radius:18px;overflow:hidden;background:#e4e3e0;box-shadow:inset 0 0 0 1px rgba(18,18,18,.06)}
.pdf-frame iframe{position:relative;display:block;width:100%;height:100%;border:0}
/* a quiet ring until the browser's viewer paints over it */
.pdf-wait{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid rgba(18,18,18,.12);border-top-color:#141414;
  animation:pdf-spin .8s linear infinite}
.pdf-modal.loaded .pdf-wait{animation:none;opacity:0}
@keyframes pdf-spin{to{rotate:360deg}}
@media (prefers-reduced-motion: reduce){ .pdf-modal,.pdf-card{transition:none} .pdf-wait{animation:none} }

/* ---------- section index (home, home.js; from 1340px, where the content starts ~80px in and the ticks clear it): hairline ticks on the left edge, the current one long and dark;
   hovering or tabbing in opens a frosted panel with the section names ---------- */
.sx{display:none}
@media (min-width: 1340px) and (hover: hover){
  .sx{position:fixed;left:12px;top:50%;z-index:30;display:flex;flex-direction:column;padding:10px 16px 10px 10px;border-radius:18px;border:1px solid transparent;
    translate:-12px -50%;opacity:0;visibility:hidden;
    transition:opacity .4s ease, translate .6s var(--pop), visibility 0s .4s, background .35s, border-color .35s, box-shadow .35s, backdrop-filter .35s}
  .sx.on{translate:0 -50%;opacity:1;visibility:visible;transition:opacity .4s ease, translate .6s var(--pop), visibility 0s, background .35s, border-color .35s, box-shadow .35s, backdrop-filter .35s}
  .sx a{display:flex;align-items:center;gap:12px;height:28px;color:var(--text);text-decoration:none}
  .sx a{--tick:rgba(18,18,18,.24);--tw:14px}
  .sx a::before{content:"";flex:none;width:30px;height:2px;background:linear-gradient(var(--tick), var(--tick)) left center / var(--tw) 2px no-repeat;border-radius:2px;transition:background-size .5s var(--pop)}
  .sx a:hover{--tick:rgba(18,18,18,.6);--tw:22px}
  .sx a[aria-current="true"]{--tick:#141414;--tw:30px}
  .sx span{font:500 13px/1 var(--f);white-space:nowrap;opacity:0;translate:-8px 0;transition:opacity .25s, translate .45s var(--pop)}
  .sx a[aria-current="true"] span{font-weight:600}
  .sx:hover,.sx:has(a:focus-visible){background:var(--glass-hi);border-color:var(--glass-edge);box-shadow:var(--shadow-pop);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  .sx:hover span,.sx:has(a:focus-visible) span{opacity:1;translate:none}
  .sx:hover a:nth-child(2) span,.sx:has(a:focus-visible) a:nth-child(2) span{transition-delay:.03s}
  .sx:hover a:nth-child(3) span,.sx:has(a:focus-visible) a:nth-child(3) span{transition-delay:.06s}
  .sx:hover a:nth-child(4) span,.sx:has(a:focus-visible) a:nth-child(4) span{transition-delay:.09s}
  .sx:hover a:nth-child(5) span,.sx:has(a:focus-visible) a:nth-child(5) span{transition-delay:.12s}
  .sx:hover a:nth-child(6) span,.sx:has(a:focus-visible) a:nth-child(6) span{transition-delay:.15s}
  .sx:hover a:nth-child(7) span,.sx:has(a:focus-visible) a:nth-child(7) span{transition-delay:.18s}
  .sx a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
  /* over a dark photo band the ticks turn white (until the panel opens, which is light) */
  .sx.is-dark:not(:hover):not(:has(a:focus-visible)) a{--tick:rgba(255,255,255,.45)}
  .sx.is-dark:not(:hover):not(:has(a:focus-visible)) a[aria-current="true"]{--tick:#fff}
}
@media (min-width: 1340px) and (hover: hover) and (prefers-reduced-motion: reduce){ .sx,.sx.on,.sx a::before,.sx span{transition:none} }

/* ---------- quality words (home, quality-words.js): a dark panel pins while particles spell each check group's
   name (after Quantifie's "What sets us apart"); the group's title decodes under it; the accordion follows ---------- */
.ms-quality{padding-top:0}
.qw{position:relative;height:calc(100vh + (var(--qw-n, 6) - 1) * 70vh);margin:0 calc(-1 * var(--gutter)) var(--block)}
.qw-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#fff;
  background:radial-gradient(70% 60% at 50% 42%, #18202e 0%, #0c0e13 72%)}
.qw-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.qw-h,.qw-slides,.qw-bars{position:absolute;z-index:2;--x:max(var(--gutter), calc((100% - var(--wrap)) / 2))}
.qw-h.ms-h2{left:var(--x);right:var(--x);top:clamp(92px, 14vh, 140px);max-width:22ch;color:#fff}
.qw-slides{left:var(--x);bottom:clamp(36px, 8vh, 80px);display:grid;width:min(620px, calc(100% - 2 * var(--x) - 70px))}
.qw-pin .qw-slide{grid-area:1 / 1;margin:0;max-width:none;font:600 clamp(19px, 1.7vw, 26px)/1.3 var(--f);letter-spacing:-.01em;color:rgba(255,255,255,.92);
  opacity:0;visibility:hidden;translate:0 16px;transition:opacity .45s, translate .7s var(--pop), visibility .45s}
.qw-pin .qw-slide.on{opacity:1;visibility:visible;translate:none;transition-delay:.12s}
.qw-bars{right:var(--x);bottom:clamp(36px, 8vh, 80px);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qw-bars i{display:block;width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);transition:width .4s var(--pop), background .35s}
.qw-bars i.on{width:38px;background:#fff}
@media (max-width: 760px){
  .qw{height:calc(100svh + (var(--qw-n, 6) - 1) * 60svh)}
  .qw-h.ms-h2{top:96px;font-size:24px}
  .qw-slides{width:calc(100% - 2 * var(--x) - 48px)}
  .qw-pin .qw-slide{font-size:17px}
}
@media (prefers-reduced-motion: reduce){ .qw-slide{transition:none;translate:none} }

/* ---------- process line (home.js, after Quantifie's process): a faint track through the step dots, an accent line
   that draws along it with scroll (--p), dots that fill when it reaches them. Across the top of the four cards on
   desktop; down the left of a single column from 980px ---------- */
.ms-flow{position:relative}
.ms-flow .ms-steps{padding-top:34px}
.ms-flow .ms-steps li::after{display:none}
.flow-line{position:absolute;left:0;top:0;width:0;height:2px;border-radius:2px;background:rgba(18,18,18,.12);pointer-events:none}
.flow-line i{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p, 0))}
.ms-flow.is-v .flow-line i{transform-origin:50% 0;transform:scaleY(var(--p, 0))}
.flow-dot{position:absolute;left:24px;top:-22px;width:12px;height:12px;border-radius:50%;background:#ecebe8;border:2px solid rgba(18,18,18,.28);
  transition:background .4s, border-color .4s, box-shadow .4s, scale .45s var(--pop)}
.ms-steps li.lit .flow-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(4,107,210,.14);scale:1.15}
@media (max-width: 980px){
  .ms-flow .ms-steps{grid-template-columns:1fr;padding:0 0 0 40px}
  .ms-flow .flow-dot{left:-34px;top:30px}
}

/* ---------- letter decode (common.js): section headings resolve from random glyphs into their words, left to right.
   The real word keeps its place (hidden while decoding) and the glyphs sit on top, so lines never re-wrap ---------- */
.dw{position:relative;display:inline-block}
.dw-s{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none}
.dc-run .dw-t{visibility:hidden}
.js-motion .dc{transition:opacity .2s}
.js-motion .dc:not(.seen){opacity:0}

/* ---------- chess hero (SPEC-hero-chess.md, hero-video.js + chess-scene.js) ----------
   Layers in the sticky scene, back to front: .vh-pix pixel-blue field (a tiny canvas scaled up with pixelated
   sampling), .vh-col navy column, .vh-3d transparent WebGL canvas (the queen + orbiting pieces), .vh-mask light
   stage with the word AVENUE cut out (first screen + zoom), .vh-open first-screen words, .vh-ui the post-zoom layout.
   hero-video.js drives everything from the scroll: zoom (1.4 screens), build (0.8), hold (0.9), card outro (0.9).
   Column edges: 35.75% / 64.25% (the reference's proportions). */
.vh{--top:84px;--c1:35.75%;--c2:64.25%;--line:rgba(255,255,255,.2);position:relative;z-index:3;overflow-x:clip;background:#ecebe8;color:#fff}
.vh-track{position:relative;height:500vh}
.vh-scene{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#1247C6}
.vh-pix{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.vh-col{position:absolute;top:0;bottom:0;left:var(--c1);right:var(--c1);background:#0F2260;opacity:0}
.vh-3d,.vh-mask{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.home .content{background:var(--stage);background-attachment:fixed;padding-top:0}

/* first screen: a light stage with the board only inside AVENUE (canvas); the intro line sits top left, the
   lockup "Welcome to  AVENUE  Research" runs along the bottom. Positions from hero-video.js: --m page margin,
   --wt/--wl/--ww word top/left/width, --rs size of "Research" (cap height = 17% of AVENUE's) */
.vh-open{position:absolute;inset:0;color:#0A1B4D}
.vh-lead{position:absolute;left:var(--m, 40px);top:calc(var(--m, 40px) + 96px);width:min(600px, 46vw)}
.vh-lede{margin:0;font:500 clamp(20px, 2vw, 31px)/1.3 'Public Sans', var(--f);letter-spacing:-.015em;color:#0A1B4D;text-wrap:balance}
.vh-cta{margin-top:28px;background:#0A1B4D;color:#fff}
.vh-cta i{background:#046BD2;color:#fff}
.vh-scroll{position:absolute;right:var(--m, 40px);top:calc(var(--m, 40px) + 104px);display:flex;flex-direction:column;align-items:center;gap:12px;
  font:600 11px/1 'Public Sans', var(--f);letter-spacing:.26em;text-transform:uppercase;color:#0A1B4D}
.vh-scroll::after{content:"";width:1px;height:48px;background:linear-gradient(#0A1B4D, rgba(10,27,77,0));transform-origin:top;animation:vhScroll 2.2s ease-in-out infinite}
@keyframes vhScroll{0%{scale:1 0;opacity:1}55%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
.vh-welcome,.vh-research{position:absolute;bottom:calc(100% - var(--wt, 60vh) + var(--m, 40px) * .55);transform-origin:0 0}
.vh-welcome{left:var(--wl, 40px);display:flex;align-items:center;gap:16px;font:600 13px/1 'Public Sans', var(--f);letter-spacing:.26em;text-transform:uppercase}
.vh-welcome::after{content:"";width:64px;height:1px;background:currentColor;opacity:.45}
.vh-research{right:calc(100% - var(--wl, 40px) - var(--ww, 90vw));font:800 var(--rs, 60px)/.74 'Exo 2', var(--f);letter-spacing:-.01em;text-transform:uppercase}
/* entrance: each piece rises in after the letters (.vh-open.in + per-item delays from hero-video.js) */
.vh-open [data-in]{opacity:0;translate:0 22px;transition:opacity .9s ease, translate 1.2s var(--pop), color .3s, scale .3s, box-shadow .3s}
.vh-open.in [data-in]{opacity:1;translate:0 0}

/* after the zoom: hairline grid + three panels (headline/intro/CTA · queen column · six services) */
.vh-ui{position:absolute;inset:0;pointer-events:none}
.vh-ui.live a{pointer-events:auto}
.vh-ui [data-o]{opacity:0}
.vh-rule{position:absolute;background:var(--line);transform-origin:0 0}
.vh-rule.is-top{left:0;right:0;top:var(--top);height:1px;transform:scaleX(0)}
.vh-rule.is-c1,.vh-rule.is-c2{top:0;bottom:0;width:1px;transform:scaleY(0)}
.vh-rule.is-c1{left:var(--c1)}
.vh-rule.is-c2{left:var(--c2)}
.vh-rule.is-mid{left:0;width:var(--c1);top:70%;height:1px;transform:scaleX(0)}
.vh-left{position:absolute;left:0;width:var(--c1);top:var(--top);bottom:0;padding:36px clamp(24px, 2.8vw, 44px) 0}
.vh-h1{margin:0;max-width:11ch;font:800 clamp(34px, 3.6vw, 58px)/1.02 'Exo 2', var(--f);letter-spacing:-.01em;color:#fff}
.vh-foot{position:absolute;left:clamp(24px, 2.8vw, 44px);right:clamp(24px, 2.8vw, 44px);bottom:clamp(24px, 4vh, 44px)}
.vh-desc{margin:0 0 24px;max-width:42ch;font:400 15px/1.5 'Public Sans', var(--f);color:rgba(255,255,255,.88)}
.vh-bar{display:flex;align-items:stretch;justify-content:space-between;height:50px;max-width:440px;border:2px solid #fff;background:#fff;color:#0A1B4D;text-decoration:none;
  font:600 15px/1 'Public Sans', var(--f)}
.vh-bar span{display:flex;align-items:center;gap:12px;padding:0 18px;transition:translate .4s var(--pop)}
.vh-bar span::before{content:"";width:4px;height:4px;background:currentColor}
.vh-bar i{display:grid;place-items:center;width:46px;background:#1247C6;color:#fff;transition:background .3s}
.vh-bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vh-bar:hover span{translate:6px 0}
.vh-bar:hover i{background:#0A1B4D}
.vh-cells{position:absolute;left:var(--c2);right:0;top:calc(var(--top) + 17%);bottom:0;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3, 1fr)}
.vh-cell{display:flex;flex-direction:column;padding:22px clamp(18px, 1.8vw, 26px);border-top:1px solid var(--line)}
.vh-cell:nth-child(odd){border-right:1px solid var(--line)}
.vh-cell .vh-ico{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vh-cell h2{margin:auto 0 6px;font:700 15px/1.2 'Public Sans', var(--f);color:#fff}
.vh-cell p{margin:0;font:400 12.5px/1.45 'Public Sans', var(--f);color:rgba(255,255,255,.78)}
@media (max-height: 780px), (max-width: 1180px){ .vh-cell p{display:none} .vh-cell h2{font-size:14px;margin-bottom:0} }

/* portrait: headline + CTA on top, the queen in a full-width band, the six services as a 3 × 2 strip */
@media (max-width: 609px), (orientation: portrait){
  .vh{--top:76px}
  .vh-col{left:0;right:0;top:38%;bottom:26%}
  .vh-rule.is-c1,.vh-rule.is-c2{display:none}
  .vh-rule.is-mid{width:100%;top:38%}
  .vh-left{width:auto;right:0;bottom:62%;padding:22px 18px 0}
  .vh-h1{max-width:none;font-size:clamp(28px, 8vw, 40px)}
  .vh-foot{position:static;margin-top:18px}
  .vh-desc{display:none}
  .vh-bar{height:46px}
  .vh-cells{left:0;top:74%;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr)}
  .vh-cell{padding:10px 10px 12px}
  .vh-cell:nth-child(odd){border-right:0}
  .vh-cell:not(:nth-child(3n)){border-right:1px solid var(--line)}
  .vh-cell .vh-ico{width:22px;height:22px}
  .vh-cell h2{font-size:11.5px;line-height:1.2;margin-bottom:0}
  .vh-lead{left:var(--m, 18px);right:var(--m, 18px);width:auto;top:112px}
  .vh-lede{font-size:clamp(20px, 5.6vw, 24px)}
  .vh-cta{margin-top:22px}
  .vh-scroll{display:none}
  .vh-welcome{font-size:11px;gap:12px}
  .vh-welcome::after{width:36px}
}

/* =====================================================================================================================
   Brand pass (2026-10-30, user): navy-glass header that only drops down while the mouse moves; sections alternate the
   two brand colours (light, then the logo's deep navy #0A1B4D) on every page; "Who Are We?" in one white box;
   "What Do We Offer?" as a bento of boxes on navy.
   ===================================================================================================================== */
:root{--navy-deep:#0A1B4D}

/* ---------- header: navy-tinted glass, white type (reads over the video, the navy and the light sections) ---------- */
.top{background:rgba(10,27,77,.42);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04), 0 22px 44px -26px rgba(4,12,40,.7)}
.top.scrolled{background:rgba(10,27,77,.5)}
.links > a,.dd-btn{color:rgba(255,255,255,.8)}
.links a:hover,.links a[aria-current=page],.dd:hover .dd-btn,.dd-btn[aria-expanded=true]{color:#fff}
.nav-ind{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(255,255,255,.1)}
.doc-btn{background:#fff;color:var(--navy-deep);box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.doc-btn:hover{background:#e9f1ff;color:var(--navy-deep)}
.menu-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.menu-btn span,.menu-btn span::before{background:#fff}
.top-prog{background:var(--blue)}
/* mouse: tucked away until the mouse moves (common.js .peek) */
html.mouse-nav .top:not(.peek){translate:0 calc(-100% - 22px);opacity:0;pointer-events:none}
html.mouse-nav .top{transition:translate .45s cubic-bezier(.22,1,.36,1), opacity .3s, background .3s, box-shadow .3s}

/* ---------- alternating sections ---------- */
.content > section.sec-white:not(.ms-band){background:var(--stage);background-attachment:fixed}
.content > section.sec-navy{--text:#fff;--body:rgba(255,255,255,.8);--mute:rgba(255,255,255,.6);--line:rgba(255,255,255,.16);--link:#fff;--accent:#6CB2FF;
  --glass:rgba(255,255,255,.06);--glass-hi:rgba(255,255,255,.1);--glass-edge:rgba(255,255,255,.14);
  --shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 22px 44px -30px rgba(0,0,0,.7);
  --shadow-pop:inset 0 1px 0 rgba(255,255,255,.16), 0 30px 60px -30px rgba(0,0,0,.85);
  background:radial-gradient(80% 60% at 70% 0%, #13286a 0%, transparent 70%), var(--navy-deep);color:var(--body)}
.sec-navy .ms-rule{background:#fff}
.sec-navy .cta.solid{background:#fff;border-color:#fff;color:var(--navy-deep)}
.sec-navy .cta.solid i{background:var(--navy-deep);color:#fff}
.sec-navy .tbl thead th{background:#fff;color:var(--navy-deep)}
.sec-navy .acc-item.open .acc-btn i{background:#fff;border-color:#fff;color:var(--navy-deep)}
.sec-navy .ms-chips li:hover{background:#fff;border-color:#fff;color:var(--navy-deep)}
.sec-navy .ms-profiles li::after{background:#fff}
.sec-navy .ms-profiles li:hover{color:var(--navy-deep)}
.sec-navy .flow-line{background:rgba(255,255,255,.18)}
.sec-navy .flow-dot{background:var(--navy-deep);border-color:rgba(255,255,255,.5)}
.sec-navy .ms-steps li.lit .flow-dot{box-shadow:0 0 0 6px rgba(108,178,255,.18)}
.sec-navy .ms-photo{background:transparent}
.sec-navy .form input,.sec-navy .form textarea{background:rgba(255,255,255,.06);color:#fff}
/* contact band on navy: the dark card turns white */
.sec-navy.ms-cta .ms-cta-in{background:#fff;border-color:#fff;color:var(--navy-deep);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.sec-navy.ms-cta .ms-cta-in .ms-h2{color:var(--navy-deep)}
.sec-navy.ms-cta .ms-cta-in p{color:rgba(10,27,77,.72)}
.sec-navy.ms-cta .cta.solid{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.sec-navy.ms-cta .cta.solid i{background:#fff;color:var(--navy-deep)}
/* photo bands keep their photo under a navy veil */
.ms-sec.ms-band{--veil:rgba(10,27,77,.8)}

/* ---------- Who Are We?: the whole block in one white box; icons on navy tiles ---------- */
.content .ms-who .ms-wrap{background:#fff;border:1px solid rgba(10,27,77,.08);border-radius:32px;padding:clamp(28px, 4.2vw, 60px);
  box-shadow:0 1px 0 #fff inset, 0 50px 90px -60px rgba(10,27,77,.45), 0 2px 6px rgba(10,27,77,.04);align-items:center}
.ms-who .ms-features li{background:#f4f6fb;border:1px solid rgba(10,27,77,.06);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:22px}
.ms-who .ms-features li:hover{background:var(--navy-deep);border-color:var(--navy-deep);box-shadow:0 24px 44px -26px rgba(10,27,77,.7)}
.ms-who .ms-features li:hover span{color:#fff}
.ms-who .ms-features span{transition:color .3s}
.ms-who .ms-ico{width:52px;height:52px;padding:12px;border-radius:14px;background:var(--navy-deep);stroke:#fff;box-sizing:border-box}
.ms-who .ms-features li:hover .ms-ico{background:#fff;stroke:var(--navy-deep)}

/* ---------- What Do We Offer?: navy bento (three text boxes around two photos) ---------- */
.content .ms-offer{background:radial-gradient(80% 60% at 70% 0%, #13286a 0%, transparent 70%), var(--navy-deep)}
.ob{display:grid;grid-template-columns:1fr 1.1fr 1fr;grid-template-areas:"a b c" "d b e";gap:var(--gap);margin-top:var(--block)}
.ob-a{grid-area:a}.ob-b{grid-area:b}.ob-c{grid-area:c}.ob-d{grid-area:d}.ob-e{grid-area:e}
.ob-box{position:relative;padding:clamp(24px, 2.6vw, 36px);border-radius:24px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -40px rgba(0,0,0,.8);transition:transform .55s var(--pop), border-color .35s, box-shadow .45s}
.ob-box::before{content:"";position:absolute;left:clamp(24px, 2.6vw, 36px);top:0;width:36px;height:2px;background:var(--accent);transition:width .6s var(--pop)}
.ob-box:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.ob-box:hover::before{width:calc(100% - 2 * clamp(24px, 2.6vw, 36px))}
.ob-box p{margin:0;color:rgba(255,255,255,.86);max-width:none}
.ob-a p,.ob-c p{font-size:clamp(17px, 1.35vw, 20px) !important;line-height:1.55 !important;color:#fff}
.ob-photo{margin:0;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.14);min-height:240px}
.ob-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:scale .9s var(--pop)}
.ob-photo:hover img{scale:1.05}
@media (max-width: 980px){
  .ob{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "c b" "d d" "e e"}
  .ob-e{aspect-ratio:16 / 10}
}
@media (max-width: 760px){
  .ob{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e"}
  .ob-b{aspect-ratio:4 / 5}
}
/* a photo band that lands on a light slot keeps its photo under a light veil, with dark type and light glass */
.ms-sec.ms-band.sec-white{--veil:rgba(236,235,232,.88);color:var(--text)}
.sec-white.ms-band .ms-h2{color:var(--text)}
.sec-white.ms-band .ms-rule{background:var(--text)}
.sec-white.ms-band p{color:var(--body)}
.sec-white.ms-band .ms-split > div:first-child,.sec-white.ms-band .ms-have{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.9);color:var(--text);
  box-shadow:0 30px 60px -40px rgba(10,27,77,.35)}
.sec-white.ms-band .ms-split > div:first-child:hover,.sec-white.ms-band .ms-have:hover{background:#fff}
.sec-white.ms-band .ms-have h3,.sec-white.ms-band .ms-have li{color:var(--text)}
.sec-white.ms-band .ms-have li::before{background:var(--blue)}

/* =====================================================================================================================
   Who Are We? (home, 2026-10-30, who.js): carries the chess hero's language onto the light stage. A big statement that
   lights up word by word with the scroll (service names turn electric blue and link to their pages), then the four
   values on a hairline grid; each cell floods with the hero's pixel-blue blocks on hover, spreading from where the
   pointer came in (touch: while the cell crosses the middle of the screen). Words: avenueresearch.co.uk home page.
   ===================================================================================================================== */
.content .ms-who.wa{padding:clamp(96px, 13vh, 150px) var(--gutter) clamp(88px, 11vh, 130px)}
.wa-wrap{max-width:1360px;margin:0 auto}
.wa-top{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:clamp(24px, 4vw, 72px);align-items:start}
.wa .wa-h{display:block;margin:0;padding-top:.85em;font:600 clamp(15px, 1.15vw, 18px)/1.2 var(--f);letter-spacing:.01em;color:#0A1B4D}
.wa .wa-h::before{content:"";display:inline-block;width:10px;height:10px;margin:0 14px .12em 0;vertical-align:middle;background:#1247C6}
.wa .wa-say{max-width:none;margin:0;font:600 clamp(28px, 3.25vw, 52px)/1.16 var(--f);letter-spacing:-.028em;color:#0A1B4D;text-wrap:pretty}
.wa-say a,.wa-say b{font-weight:inherit;color:inherit;text-decoration:none;position:relative}
.js-motion .wa-say .w{color:rgba(10,27,77,.15);transition:color .45s ease}
.js-motion .wa-say .w.on{color:#0A1B4D}
.js-motion .wa-say a .w.on,.js-motion .wa-say b .w.on,.wa-say a,.wa-say b{color:#1247C6}
/* service links: a pixel underline (6px blocks) that runs solid on hover */
.wa-say a::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.07em;background:repeating-linear-gradient(90deg, #1247C6 0 6px, transparent 6px 10px);
  transform-origin:left;transition:background .3s}
.wa-say a:hover::after{background:#1247C6}
.wa-vals{list-style:none;margin:clamp(64px, 10vh, 120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
  border-top:1px solid rgba(10,27,77,.14);border-bottom:1px solid rgba(10,27,77,.14)}
.wa-vals li{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(250px, 33vh, 340px);
  padding:24px clamp(18px, 1.8vw, 28px) 26px;color:#0A1B4D;transition:color .35s ease}
.wa-vals li + li{border-left:1px solid rgba(10,27,77,.14)}
.wa-px{position:absolute;inset:0;z-index:-1;width:100%;height:100%;display:block;image-rendering:pixelated;pointer-events:none}
.wa-n{font:600 13px/1 var(--f);letter-spacing:.1em;opacity:.5;transition:opacity .35s}
.wa-ico{position:absolute;top:20px;right:clamp(18px, 1.8vw, 26px);width:50px;height:50px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:translate .55s var(--pop), scale .55s var(--pop)}
.wa-t{margin-top:auto;max-width:12ch;font:600 clamp(20px, 1.75vw, 27px)/1.14 var(--f);letter-spacing:-.018em}
.wa-vals li.lit{color:#fff}
.wa-vals li.lit .wa-n{opacity:.85}
.wa-vals li.lit .wa-ico{translate:0 -4px;scale:1.08}
/* cells rise in one by one */
.js-motion .wa-vals li{opacity:0;translate:0 34px;transition:color .35s ease, opacity .8s ease, translate 1s var(--pop)}
.js-motion .wa-vals.in li{opacity:1;translate:0 0}
.js-motion .wa-vals.in li:nth-child(2){transition-delay:0s, .08s, .08s}
.js-motion .wa-vals.in li:nth-child(3){transition-delay:0s, .16s, .16s}
.js-motion .wa-vals.in li:nth-child(4){transition-delay:0s, .24s, .24s}
@media (max-width: 900px){
  .wa-top{grid-template-columns:1fr;gap:18px}
  .wa .wa-h{padding-top:0}
  .wa-vals{grid-template-columns:1fr 1fr}
  .wa-vals li{min-height:200px}
  .wa-vals li:nth-child(3){border-left:0}
  .wa-vals li:nth-child(n+3){border-top:1px solid rgba(10,27,77,.14)}
  .wa-ico{width:40px;height:40px}
}
@media (max-width: 600px){
  .wa .wa-say{font-size:clamp(26px, 7.4vw, 32px);line-height:1.2}
  .wa-vals li{min-height:176px;padding:18px 16px 18px}
  .wa-t{font-size:18px}
  .wa-ico{top:16px;right:14px;width:34px;height:34px}
}

/* =====================================================================================================================
   Lists and quotes on service pages (qualitative / quantitative market research), and the blog (2026-10-30 audit:
   pages the live site publishes that this site was missing). Same language as the hero: navy, electric blue, a small
   pixel square as the marker.
   ===================================================================================================================== */
.ms-sec .ms-quote{margin-top:18px;font:500 italic clamp(17px, 1.3vw, 19px)/1.6 var(--f);color:var(--text)}
.ms-ol,.ms-ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;max-width:62ch}
.ms-ol{counter-reset:msol}
.ms-ol li,.ms-ul li{position:relative;padding:12px 16px 12px 52px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.55);font:500 var(--fs)/1.5 var(--f);color:var(--text)}
.sec-navy .ms-ol li,.sec-navy .ms-ul li{background:rgba(255,255,255,.06)}
.ms-ol li::before{counter-increment:msol;content:counter(msol, decimal-leading-zero);position:absolute;left:16px;top:12px;font:700 13px/1.9 var(--f);color:#1247C6}
.sec-navy .ms-ol li::before{color:#8fb4ff}
.ms-ul li::before{content:"";position:absolute;left:20px;top:21px;width:9px;height:9px;background:#1247C6}
.sec-navy .ms-ul li::before{background:#8fb4ff}

/* blog listing: type-only cards on a navy field with the electric-blue accent */
.bl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:18px}
.bl-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;height:100%;min-height:230px;padding:26px 26px 22px;border-radius:20px;
  background:linear-gradient(150deg, #1247C6, #0A1B4D 70%);color:#fff;text-decoration:none;overflow:hidden;transition:translate .5s var(--pop), box-shadow .4s}
.bl-card::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;background:
  linear-gradient(#1550D8 0 0) 0 0 / 40px 40px no-repeat, linear-gradient(#0E3EB4 0 0) 40px 40px / 40px 40px no-repeat, linear-gradient(#1550D8 0 0) 80px 0 / 40px 40px no-repeat;opacity:.55}
.bl-card h2{position:relative;margin:0;font:600 clamp(18px, 1.35vw, 21px)/1.32 var(--f);letter-spacing:-.01em;color:#fff}
.bl-more{position:relative;font:600 14px var(--f);color:#bcd0ff;transition:color .3s}
.bl-card:hover{translate:0 -4px;box-shadow:0 22px 44px rgba(10,27,77,.28)}
.bl-card:hover .bl-more{color:#fff}
.bl-have{margin-top:clamp(40px, 6vw, 70px);padding:26px 28px;border-radius:20px;background:#0A1B4D;color:#fff}
.bl-have h3{margin:0;font:600 20px var(--f);color:#fff}
.bl-have ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.bl-have li{display:flex;align-items:center;gap:10px;font:500 16px var(--f)}
.bl-have li::before{content:"";width:9px;height:9px;background:#3f6dff}
/* post */
.bl-h1{max-width:24ch;font-size:clamp(28px, 3.4vw, 50px) !important;line-height:1.12 !important}
.bl-post h2{margin-top:38px}
.bl-post h3,.bl-post h4{margin:26px 0 8px;font:600 clamp(17px, 1.3vw, 19px)/1.4 var(--f);color:var(--text)}
.bl-post strong{color:var(--text)}
.bl-post a{color:#1247C6}
.bl-post .bl-have{margin-top:48px}