/* Inter variable fonts subset for the site locales and interface symbols. */
@font-face{font-family:Inter;src:url('/assets/fonts/InterVariable-site.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/InterVariable-Italic-site.woff2') format('woff2');font-style:italic;font-weight:100 900;font-display:swap}
/* Reuse the established ribbons, network, signals and brand palette across the whole page. */
.studio-page-canvas{position:relative;isolation:isolate}
main.studio-page-canvas{background:transparent!important}
body>.studio-page-background{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 0 15%,#bfa7de80,transparent 48%),radial-gradient(ellipse at 100% 45%,#7acbd15c,transparent 50%),radial-gradient(ellipse at 20% 85%,#df9fc752,transparent 45%),#d6cde4}
.studio-page-background .kinetic-material{position:absolute;inset:0;width:100%;height:100%;opacity:.34;filter:saturate(1.2)}
.studio-page-background .kinetic-ribbons{opacity:.5}
.studio-page-background .kinetic-edges{opacity:.9}
.studio-page-background .kinetic-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 79px,#65527e0b 79px 80px),repeating-linear-gradient(0deg,transparent 0 79px,#65527e0b 79px 80px)}
/* A single canvas avoids repeating the same large ribbon illustration in adjacent light sections. */
.studio-page-canvas .xp-section>.ambient-field{display:none}
@media(max-width:767px){.studio-page-background .kinetic-material{width:140%;left:-20%}.studio-page-background .kinetic-grid{background:repeating-linear-gradient(90deg,transparent 0 47px,#65527e0b 47px 48px),repeating-linear-gradient(0deg,transparent 0 47px,#65527e0b 47px 48px)}}
@media(prefers-reduced-motion:reduce){.studio-page-background :is(.kinetic-ribbons,.kinetic-edges,.kinetic-signal,.kinetic-nodes){animation:none!important}}

/* The homepage owns one canvas and one ink palette for every studio route. */
:root{--studio-ink:#25172f;--studio-copy:#3e2b4b;--studio-paper:#f8f5fc;--studio-night:#030405;--studio-on-night:#faf5ff;--studio-copy-on-night:#e7dfef}
.studio-page-canvas{--studio-text:var(--studio-ink);--studio-body:var(--studio-copy);color:var(--studio-text)}
.studio-page-canvas :is(h1,h2,h3,h4,h5,h6,strong,dt,summary){color:var(--studio-text)!important}
.studio-page-canvas :is(p,li,label,legend,dd,figcaption,small){color:var(--studio-body)!important;opacity:1}
/* Dark media, tool outputs and navigation cards declare their own readable ink. */
.studio-page-canvas :is(.route-hero,.match-hero,.route-final,.match-final,.image-studio,.glass-face,.glass-back,.workflow-preview,.xp-flow-panel,.xp-art,.learning-console,.om-site-card,.om-price-card,.om-order-window,.om-preview-window,.om-eyebrow-pill,.generated-hero-art,.generated-topic,.generated-tile,.showcase-film,.ardi-showcase-cover){--studio-text:var(--studio-on-night);--studio-body:var(--studio-copy-on-night)}
main.studio-page-canvas :is(.route-hero,.match-hero,.route-final,.match-final){background:var(--studio-night)!important;color:var(--studio-on-night)}
.studio-page-canvas .route-hero::before{background:none!important}
.studio-page-canvas :is(.route-hero,.match-hero)>.ambient-field{background:transparent}
.studio-page-canvas :is(.route-hero,.match-hero) :is(.breadcrumbs,.eyebrow,.route-lede){color:var(--studio-copy-on-night)!important;opacity:1}
.studio-page-canvas :is(.route-hero,.match-hero) .breadcrumbs a{color:var(--studio-on-night)!important}
/* Nested light panels reset inherited dark-surface text. */
.studio-page-canvas :is(.xp-node,.xp-panel-copy,.tool-panel,.process-card,.site-disclosure,.brief-workspace,.route-feature-grid article,.locale-card,.lesson-stages article){--studio-text:var(--studio-ink);--studio-body:var(--studio-copy)}
.studio-page-canvas :is(.eyebrow,.match-label,.route-number,.tool-kicker,.tool-description,.tools-local,.tool-badge,.om-section-sub,.om-section-header p,.showcase-section-heading>p){color:var(--studio-body)!important;opacity:1}
.studio-page-canvas :is(button,.button,.site-button,.xp-action,.om-btn-primary,.om-card-btn){--studio-text:currentColor;--studio-body:currentColor}
.studio-page-canvas .xp-flow-panel{--studio-text:var(--studio-ink);--studio-body:var(--studio-copy)}
.studio-page-canvas :is(.xp-node>span,.tool-example-row>span,.xp-donut>span){color:var(--studio-copy)!important}
.studio-page-canvas .xp-map>span{color:var(--studio-ink)!important;background:#faf7fff2;padding:5px 8px;border-radius:8px}
.studio-page-canvas .ardi-stack-detail .site-button{color:#faf5ff!important;background:#25182f!important;border-color:#bca1ee}
.studio-page-canvas .brief-services label:has(input:checked){--studio-text:var(--studio-on-night);--studio-body:var(--studio-copy-on-night)}
.studio-page-canvas .brief-services label:has(input:checked) span{color:var(--studio-on-night)!important}
/* Header artwork keeps its motion behind a common dark reading veil. */
.studio-page-canvas .route-hero>.ambient-field .kinetic-material{opacity:.5}
.studio-page-canvas .route-hero>.ambient-field .kinetic-grid{background:linear-gradient(90deg,#030405a6,#03040580),repeating-linear-gradient(90deg,transparent 0 79px,#c0aeef0c 79px 80px)}
.studio-page-canvas .route-hero h1 em{color:#e4d5ff!important;-webkit-text-fill-color:#e4d5ff!important}
.studio-page-canvas .xp-donut span{color:var(--studio-copy)!important}

/* Supporting instructions retain full contrast; completion never fades the wording. */
.studio-page-canvas :is(.workflow-field-grid i,.campaign-upload>span,.learning-step summary>span,.learning-back){color:var(--studio-copy)!important}
.studio-page-canvas .learning-topic{opacity:1!important}
.studio-page-canvas .learning-topic span{color:var(--studio-copy)!important;opacity:1!important}

.studio-page-canvas .learning-step fieldset:disabled{opacity:1}
/* Clear optical glass. The bevel catches light while the underlying canvas remains visible. */
.studio-lens-definition{position:absolute;overflow:hidden;pointer-events:none}
.studio-page-canvas :is(.studio-material,.studio-lens-control){
 position:relative;isolation:isolate;
 --glass-fill:linear-gradient(140deg,#ffffff65,#f6f1ff23 55%,#e6f6f44a);
 --glass-depth:inset 0 2px 2px #fff,inset 0 7px 12px #ffffff65,inset 0 -7px 13px #69578634,inset 2px 0 6px #fff9,inset -2px 0 6px #71618c31,0 8px 20px #24163423;
 background:var(--glass-fill)!important;border:1px solid #9e8db96b!important;
 backdrop-filter:blur(3px) saturate(132%);-webkit-backdrop-filter:blur(3px) saturate(132%);
 box-shadow:var(--glass-depth)!important;
}
.studio-page-canvas .studio-material{border-radius:25px}
.has-studio-lens .studio-page-canvas .studio-material::before{backdrop-filter:url(#omnelia-lens) saturate(132%)}
.studio-page-canvas :is(.studio-material,.studio-lens-control)::before{
 content:"";position:absolute;inset:1px;z-index:1;border-radius:inherit;pointer-events:none;
 padding:5px;background:linear-gradient(155deg,#fffdf8e5 1%,#f8f2ff69 18%,transparent 37%,#b5dce952 67%,#ffffffae 83%,#a890c386);
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
.studio-page-canvas .studio-material::after{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;
 background:radial-gradient(ellipse 240px 135px at var(--glass-x,30%) var(--glass-y,0%),#ffffff50,transparent 73%);transition:opacity .2s;
}
.studio-page-canvas .studio-material.is-lit::after{opacity:1}
.studio-page-canvas .studio-lens-control::before{padding:3px}
.studio-page-canvas .studio-lens-control:is([aria-selected=true],[aria-pressed=true]){
 --glass-fill:linear-gradient(150deg,#30213fd9,#233947bd);
 --glass-depth:inset 0 2px 3px #f1e4ff80,inset 0 -5px 10px #6fe0e646,0 4px 14px #30224536;
 color:#fff!important;
}
.studio-page-canvas .studio-material:focus-within{outline:2px solid #7a4f9f;outline-offset:3px}
@media(max-width:767px){.studio-page-canvas .studio-material{border-radius:19px}.studio-page-canvas .studio-material::before{padding:3px}}
@media(prefers-reduced-motion:reduce){.studio-page-canvas .studio-material::after{display:none}}

/* Accent ink for small brand words on light reading surfaces. */
.studio-page-canvas :is(.home-practice,.site-section,.creative-showcase,.system-example,.learning-hub,.creative-practice,.learning-course-detail,.service-tile,.xp-finder-card,.xp-check-card,.route-feature-grid,.tool-panel,.brief-workspace,.brief-companion,.match-about-copy,.xp-city,.route-section-heading,.route-split,.route-band,.explore-card,.button-bright) .brand-token--omnelia{--brand-word-color:#50276f}
.studio-page-canvas :is(.home-practice,.site-section,.creative-showcase,.system-example,.learning-hub,.creative-practice,.learning-course-detail,.service-tile,.xp-finder-card,.xp-check-card,.route-feature-grid,.tool-panel,.brief-workspace,.brief-companion,.match-about-copy,.xp-city,.route-section-heading,.route-split,.route-band,.explore-card,.button-bright) .brand-token--si{--brand-word-color:#073e46}
.studio-page-canvas :is(.home-practice,.site-section,.creative-showcase,.system-example,.learning-hub,.creative-practice,.learning-course-detail,.service-tile,.xp-finder-card,.xp-check-card,.route-feature-grid,.tool-panel,.brief-workspace,.brief-companion,.match-about-copy,.xp-city,.route-section-heading,.route-split,.route-band,.explore-card,.button-bright) .brand-token--creative{--brand-word-color:#70204e}
.studio-page-canvas .tools-tabs>.studio-lens-control{min-height:52px}
.studio-page-canvas .tools-tabs>.studio-lens-control>span>span{display:none}

/* Reading surfaces share the canvas. Only selectable media and controls catch the lens. */
main.studio-page-canvas :is(
 .about-inset,.study-deliverables,.scope-process,.locale-highlight,.lesson-practice,
 .service-scope,.showcase-transcript,.showcase-system-entry,.brief-companion,
 .catalogue-disclosure,.route-band,.xp-panel,.xp-panel-copy,
 .route-feature-grid article,.route-steps article,.lesson-stages>article,.lesson-stages>li,
 .match-features article,.match-values article,.ardi-stack-detail
){
 --studio-text:var(--studio-ink);
 --studio-body:var(--studio-copy);
 color:var(--studio-ink);
 background:none!important;
 border:0!important;
 border-radius:0;
 box-shadow:none!important;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
main.studio-page-canvas :is(.about-inset,.study-deliverables,.scope-process,.locale-highlight,.lesson-practice,.showcase-transcript,.showcase-system-entry,.catalogue-disclosure){
 padding-inline:0;
 margin-inline:0;
}
main.studio-page-canvas :is(.route-feature-grid article,.route-steps article,.lesson-stages>article,.lesson-stages>li,.match-features article,.match-values article){
 padding:clamp(12px,2vw,24px) 0!important;
 min-height:0;
 border-top:1px solid #5140664d!important;
}
main.studio-page-canvas :is(.route-feature-grid article,.route-steps article,.match-features article)::before,
main.studio-page-canvas :is(.route-feature-grid article,.route-steps article,.match-features article)::after{content:none}
main.studio-page-canvas :is(.route-feature-grid article,.route-steps article):hover{transform:none}
main.studio-page-canvas :is(.route-feature-grid,.route-steps,.lesson-stages){gap:clamp(10px,2vw,26px)}
main.studio-page-canvas :is(.route-band,.ardi-stack-detail){padding-inline:0}
main.studio-page-canvas .route-band{border-block:1px solid #5140664d!important;margin-bottom:clamp(24px,4vw,56px)}
main.studio-page-canvas .xp-panel{align-items:center;gap:clamp(12px,3vw,36px);overflow:visible;min-height:0}
main.studio-page-canvas .xp-panel-copy{padding:clamp(12px,2vw,22px) 0}
main.studio-page-canvas .xp-panel>.xp-art{border-radius:18px;overflow:hidden}
main.studio-page-canvas .xp-panel-copy>.xp-index{display:none}

/* The active tab has a shallow lens with a dark, readable label. */
main.studio-page-canvas .xp-tabs {
 display:flex;gap:6px 8px;flex-wrap:wrap;border-bottom:1px solid #51406652;padding-bottom:8px;
}
.no-js main.studio-page-canvas .xp-tabs{display:none}
main.studio-page-canvas .xp-tabs button {
 width:auto;min-height:44px;padding:8px 14px;position:relative;border:1px solid transparent!important;
 border-radius:999px;background:none!important;box-shadow:none;
 backdrop-filter:none;color:#3e2b4b!important;font-size:clamp(14px,1.2vw,16px);font-weight:650;
}
main.studio-page-canvas .xp-tabs button:hover{background:#ffffff45!important}
main.studio-page-canvas .xp-tabs button[aria-selected=true] {
 color:#39224d!important;font-weight:750;border-color:#9273a9!important;
 background:linear-gradient(155deg,#ffffffe6,#e6d9f3b3 58%,#d2eeefb3)!important;
 box-shadow:inset 0 2px 3px #fff,inset 0 -2px 5px #8dd6dd72,0 3px 9px #44285c26;
}

/* Primary actions use a shaded lens with a continuous specular highlight. */
.studio-page-canvas :is(.site-button,.xp-action,.service-tile>.text-link){
 min-height:44px;line-height:1.28;text-underline-offset:.18em;
}
.studio-page-canvas .site-button:not(.secondary){
 border-color:#59446d;background:linear-gradient(160deg,#524169,#271a38 68%,#253b45);
 box-shadow:inset 0 1px 1px #e3ccffad,inset 0 -2px 5px #61c4d344,0 4px 9px #2416342c;
}
.studio-page-canvas .site-button.secondary{
 border-color:#7d678e;background:linear-gradient(160deg,#ffffffbe,#e5e0f282);
 box-shadow:inset 0 1px 2px #fff,inset 0 -2px 6px #82769b3f;color:#30213f!important;
}
.studio-page-canvas .site-button:is(:hover,:focus-visible){filter:brightness(1.1)}
.studio-page-canvas :is(a,button,input,select,textarea,summary):focus-visible{
 outline:2px solid #503375;outline-offset:3px;
}
.studio-page-canvas :is(.route-hero,.match-hero,.image-studio,.learning-console) :is(a,button,input,select,textarea,summary):focus-visible{
 outline-color:#83e9ea;
}
.studio-page-canvas :is(.route-hero,.match-hero) .site-button.secondary{
 background:linear-gradient(160deg,#453555cc,#172834bc);color:#fff!important;border-color:#d7c8f78c;
 box-shadow:inset 0 1px 2px #e9d9ff91,inset 0 -2px 5px #5fbfce32;
}
.studio-page-canvas :is(.service-tile,.work-card,.xp-finder-card) h3{
 font-size:clamp(17px,1.65vw,24px);line-height:1.18;overflow-wrap:anywhere;
}
main.studio-page-canvas .service-tile p {
 font-size:clamp(14px,1.2vw,16px)!important;
 line-height:1.45!important;
 color:#42364a;
}
@media(max-width:767px){
 main.studio-page-canvas .xp-tabs{gap:4px 5px}
 main.studio-page-canvas .xp-tabs button{padding-inline:9px}
 main.studio-page-canvas .xp-panel-copy{padding-block:8px}
 main.studio-page-canvas :is(.route-feature-grid article,.route-steps article,.lesson-stages li) p{line-height:1.45}
}

/* Experience artwork keeps its native ratio. Sequence labels are a ruled list. */
main.studio-page-canvas .xp-panel>.visual-scene{
 width:100%;height:auto;min-height:0;aspect-ratio:3/2;border-radius:18px;
}
main.studio-page-canvas .xp-panel>.visual-scene .generated-tile{height:100%;min-height:0}
main.studio-page-canvas .xp-panel>.visual-scene img{object-fit:contain}
main.studio-page-canvas .xp-journey{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-block:16px 20px;
}
main.studio-page-canvas .xp-journey li{
 padding:7px 0 0;border-top:1px solid #51406652;border-radius:0;background:none;font-size:14px;line-height:1.35;
}
main.studio-page-canvas .xp-journey li::before{content:none}

/* The mascot's glass material: a clear centre, curved highlights and tinted depth at the rim. */
:root{
 --optical-cyan:#adf9f1;
}
.site-header::before{
 background:linear-gradient(125deg,#2d1d3a80,#172b3bb8 70%,#2f2546a3);
 box-shadow:inset 0 1px 1px #fff5,inset 0 -3px 8px #a8dbef24;
}
.has-studio-lens .site-header::before{
 backdrop-filter:url(#omnelia-lens) blur(13px) saturate(143%);
}
.site-nav.is-open{
 background:
  radial-gradient(ellipse at 2% 0,#b5a4f32b,transparent 54%),
  radial-gradient(ellipse at 100% 93%,#5fb9c42c,transparent 58%),
  linear-gradient(137deg,#21182bee,#101b27e8)!important;
 box-shadow:inset 0 1px 1px #f0e3ff8c,inset 0 -4px 14px #8af3ed1a;
 backdrop-filter:blur(22px) saturate(130%);
 -webkit-backdrop-filter:blur(22px) saturate(130%);
}
.site-header .menu-toggle,.xp-search-launch{
 border-radius:50%;
 background:radial-gradient(ellipse at 30% 8%,#ecd5ff42,transparent 65%),linear-gradient(150deg,#786eaa30,#1d31424c);
 border:1px solid #e4caff56;
 box-shadow:inset 0 1px 1px #fff7,inset 0 -2px 5px #8ae8e839;
}
.site-header .menu-toggle{width:44px;min-height:44px}
.site-header .menu-toggle>span{margin-inline:auto}
.match-footer{
 background:
  radial-gradient(ellipse at 5% 0,#b58aea36,transparent 55%),
  radial-gradient(ellipse at 100% 92%,#6adfd624,transparent 58%),
  linear-gradient(145deg,#21182ce8,#111922f0);
 box-shadow:inset 0 1px 2px #f0e3ff6b,inset 0 8px 19px #c7a0ff14;
 border-top:1px solid #e6d6ff52;
}
.match-footer .footer-directory{
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:clamp(12px,2.4vw,32px);
}
.match-footer .footer-directory nav{
 min-width:0;border-top:1px solid #eadbff45;padding-top:13px;
}
.match-footer .footer-directory h2{font-size:1.05rem;color:#f2e1ff;line-height:1.3}
.match-footer .footer-directory a{
 width:fit-content;max-width:100%;font-size:.94rem!important;color:#eee5f7;line-height:1.4;
 text-decoration-thickness:1px;text-underline-offset:.2em;
}
.match-footer .footer-directory a:is(:hover,[aria-current]){color:#b7fff4;text-decoration:underline}
.match-footer a:focus-visible,.site-header :is(a,button):focus-visible{outline:2px solid var(--optical-cyan);outline-offset:3px}
@media(max-width:1023px){.match-footer .footer-directory{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.match-footer .footer-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Optical accents sit on controls and image-bearing components. */
.studio-page-canvas .studio-material{
 --glass-fill:radial-gradient(ellipse at 12% 0,#fff9,transparent 58%),linear-gradient(144deg,#ffffff53,#f0e7fc2a 55%,#abf1ed31);
 --glass-depth:inset 0 2px 2px #fff,inset 0 8px 13px #ffffff58,inset 0 -9px 16px #5f4d7c35,inset 4px 0 7px #fff6,0 10px 22px #24163423;
}
.studio-page-canvas :is(.studio-material,.studio-lens-control)::before{
 background:linear-gradient(152deg,#fffefa 2%,#f8ecffa8 21%,transparent 45%,#8ce5e175 68%,#f2d3f8b0 83%,#a890c366);
}
.studio-page-canvas .studio-lens-control{
 --glass-fill:radial-gradient(ellipse at 23% 0,#ffffffbb,transparent 62%),linear-gradient(152deg,#f9f1ff74,#d8f5f463);
 color:#2e213f;
 transition:box-shadow .22s ease,transform .22s ease;
}
.studio-page-canvas .studio-lens-control:is([aria-selected=true],[aria-pressed=true]){
 --glass-fill:radial-gradient(ellipse at 15% 5%,#d9b1ff48,transparent 66%),linear-gradient(148deg,#38234ae8,#19323be5);
 --glass-depth:inset 0 2px 4px #f7e8ffa1,inset 0 -7px 13px #7affed47,0 6px 16px #30224540;
 color:#fff!important;
}
.studio-page-canvas .studio-lens-control:hover{box-shadow:var(--glass-depth),0 0 0 2px #fff6!important}
.studio-page-canvas .studio-lens-control:active{transform:scale(.98)}
.studio-page-canvas :is(.site-button,.xp-action,.studio-button,.button){
 text-underline-offset:.18em;
}
main.studio-page-canvas :is(.site-button:not(.secondary),.studio-button:not(.secondary),.xp-action){
 background-image:radial-gradient(ellipse at 18% 0,#f1d3ff33,transparent 68%),linear-gradient(153deg,#524168dd,#231b35ea 68%,#263f4adb);
 box-shadow:inset 0 1px 2px #efd8ffa6,inset 0 -4px 8px #95e7e747,0 4px 11px #1d15202e;
}
main.studio-page-canvas :is(.site-button.secondary,.studio-button.secondary){
 box-shadow:inset 0 1px 2px #fff,inset 0 -4px 8px #98b8c74f,0 4px 10px #291d3d22;
}
main.studio-page-canvas :is(.generated-tile,.work-card,.explore-card,.showcase-design,.home-catalogue-card) img{
 object-fit:contain!important;object-position:center;
}
main.studio-page-canvas :is(.route-section-heading,.site-section-heading,.xp-heading)>p:not(.eyebrow){
 max-width:64ch;line-height:1.58;
}
main.studio-page-canvas table{
 width:100%;border-collapse:separate;border-spacing:0;color:var(--studio-ink);font-size:1rem;
}
main.studio-page-canvas table :is(th,td){padding:.68rem .7rem;text-align:start;border-block-end:1px solid #59466e45}
main.studio-page-canvas table th{font-weight:700;background:#fff4}
@media(prefers-reduced-motion:reduce){
 .studio-page-canvas .studio-lens-control{transition:none}
 .studio-page-canvas .studio-lens-control:active{transform:none}
}

/* Paint control labels separately from any filtered backdrop to avoid disappearing on scroll. */
.studio-page-canvas :is(.studio-material,.studio-lens-control){
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
@media(max-width:767px){.xp-search-launch{right:64px}}

/* The active carousel card catches more light without changing the stage geometry. */
.home-catalogue[data-carousel-ready] .home-catalogue-card[data-position=active]{
 border-color:#e4d3f3;
 box-shadow:inset 0 2px 3px #fff,inset 0 -7px 16px #84e6e547,0 16px 35px #3520553a;
}
.ardi-stack.is-enhanced .ardi-stack-card.is-active button{
 border-color:color-mix(in srgb,var(--ardi-accent,#f0e2ff) 70%,transparent);
 box-shadow:inset 0 2px 3px #fff9,inset 0 -8px 14px color-mix(in srgb,var(--ardi-accent,#a3f2ec) 18%,transparent),0 14px 35px #2516393b;
}
.studio-page-canvas :is(.catalogue-select,.catalogue-open,.ardi-stack-card button):focus-visible{
 outline:2px solid #633e90;outline-offset:3px;
}

/* The fixed, pointer-transparent canvas must sit behind the footer on long pages. */
.match-footer{position:relative;z-index:1}
.match-footer .footer-directory nav{align-self:start;justify-content:flex-start;align-items:flex-start}

/* Responsive hierarchy for the shared route template, independent of language. */
main.route-main:not([data-division]):not(:has([data-brief-builder])) .route-hero-copy h1{
 font-size:clamp(2.1rem,6vw,5.4rem);
 font-weight:600;
 line-height:1.12;
 letter-spacing:-.045em;
 text-wrap:balance;
}
.studio-page-canvas .route-hero-copy h1 em{font-weight:300}
.studio-page-canvas :is(.route-section-heading,.site-section-heading,.xp-heading)>h2{
 line-height:1.12;
 text-wrap:balance;
}
@media(max-width:767px){
 main.route-main:not([data-division]):not(:has([data-brief-builder])) .route-hero-copy h1{
  font-size:clamp(2rem,8.6vw,3.1rem);
 }
}


/* Accessible type rhythm on the shared pages and their interactive surfaces. */
.studio-page-canvas :is(.route-hero-copy,.hp-heading,.site-section-heading,.route-section-heading,.xp-heading) :is(h1,h2){
 font-weight:650;
 letter-spacing:-.035em;
}
.studio-page-canvas :is(.route-lede,.site-disclosure>p,.route-feature-grid p,.route-steps p,.xp-panel-copy>p,.brief-workspace p){
 font-size:clamp(16px,1.2vw,18px);
 line-height:1.6;
}
:lang(mk) .studio-page-canvas :is(h1,h2,h3) em{
 font-family:Inter,system-ui,sans-serif;
 font-weight:500;
}
.studio-page-canvas :is(.studio-button,.tool-button,.xp-action,.site-button):disabled{
 opacity:1!important;
 color:#4e425c!important;
 background:#e5dced!important;
 border-color:#a99ab8!important;
 cursor:not-allowed;
}
.studio-page-canvas :is(.image-studio,.room-console,.workflow-preview,.learning-console) :is(.studio-button,.tool-button,.xp-action,.site-button):disabled{
 color:#ece3f6!important;
 background:#352d46!important;
 border-color:#9a8ba8!important;
}
main.studio-page-canvas .image-studio .studio-button:not(.secondary):not(:disabled){
 background:linear-gradient(145deg,#f6edff,var(--division-accent,#c7a0ff))!important;
 border-color:var(--division-accent,#d6c4ee);
 color:#211a32!important;
 font-weight:700;
}
main.studio-page-canvas .image-studio .studio-button.secondary:not(:disabled){
 background:#241d36!important;
 border-color:#a69bb8;
 color:#f9f6ff!important;
}

body.catalogue-hub{font-family:Inter,system-ui,sans-serif}
.catalogue-hub .match-hero-content>p{color:#fff!important}


.studio-page-canvas .ardi-stack-detail p,
.studio-page-canvas .ardi-stack-card button p{
 color:#f1ebfa!important;
}
.ardi-stack.is-enhanced .ardi-stack-card[aria-hidden=true] :is(h3,p){
 visibility:hidden;
}
main.studio-page-canvas .studio-brief .studio-button:not(.secondary):not(:disabled){
 background:linear-gradient(145deg,#f7edff,#cfe9ed)!important;
 color:#25172f!important;
 font-weight:700;
}
.studio-page-canvas .brief-companion :is(p,h3 em,.studio-text-button){
 color:#25172f!important;
}
.studio-page-canvas .brief-companion p{font-size:.875rem;line-height:1.5}

.studio-page-canvas .xp-city .xp-action{
 color:#f9f4ff!important;
 font-size:.875rem;
 font-weight:650;
}

/* Refract the hero artwork itself and keep the reading layer steady. */
@property --omnelia-lens-position{
 syntax:"<percentage>";inherits:false;initial-value:46%;
}
.reference-home .match-hero-image::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:inherit;transform:scale(1.035);
 filter:saturate(1.25) brightness(1.18);
 mask-image:radial-gradient(ellipse 15% 49% at var(--omnelia-lens-position) 52%,#000 5%,#000b 55%,transparent 100%);
 animation:omnelia-hero-refraction 11s ease-in-out infinite alternate;
}
@keyframes omnelia-hero-refraction{
 from{--omnelia-lens-position:38%}
 to{--omnelia-lens-position:79%}
}
@media(prefers-reduced-motion:reduce){
 .reference-home .match-hero-image::after{animation:none}
}
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
  .studio-page-canvas .hp-demo-image{
   animation:omnelia-art-reveal linear both;
   animation-timeline:view();
   animation-range:entry 0% entry 90%;
  }
 }
}
@keyframes omnelia-art-reveal{
 from{clip-path:inset(9% 0 5% 0 round 12px);filter:saturate(.75)}
 to{clip-path:inset(0 round 0);filter:saturate(1)}
}

@media(prefers-reduced-motion:no-preference){
 .studio-page-canvas :is(.site-disclosure,.learning-step)[open]::details-content{
  animation:omnelia-detail-in .24s ease-out;
 }
}
@keyframes omnelia-detail-in{
 from{opacity:.55;translate:0 4px}
 to{opacity:1;translate:0 0}
}

/* Keep touch scrolling on a stable backdrop surface as browser chrome resizes. */
@media(max-width:767px),(hover:none) and (pointer:coarse){
 body>.studio-page-background{
  bottom:auto;height:100vh;height:100lvh;backface-visibility:hidden;transform:translateZ(0);contain:paint;
 }
 .studio-page-background .kinetic-material{filter:none}
 .has-studio-lens .studio-page-canvas .studio-material::before{
  backdrop-filter:blur(3px) saturate(132%);
  -webkit-backdrop-filter:blur(3px) saturate(132%);
 }
 .has-studio-lens .site-header::before{
  backdrop-filter:blur(13px) saturate(143%);
  -webkit-backdrop-filter:blur(13px) saturate(143%);
 }
 .reference-home .match-hero-image::after{animation:none}
 .studio-page-canvas .hp-demo-image{animation:none;clip-path:none;filter:none}
 .route-mascot-frame.live-art img,.route-family-art.live-art img,
 .generated-hero-art--mascot.live-art img,
 .match-about-art.live-art img[src*="mascot-"]{animation:none;filter:none}
}

body.studio-backdrop-ready{isolation:isolate}

/* Keep service cards compact while the destination carries the full service detail. */
main.studio-page-canvas .service-tile{align-self:start}
main.studio-page-canvas .service-tile> :is(.tile-art,.generated-tile){height:180px}
main.studio-page-canvas .service-tile p{
 line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
main.studio-page-canvas .service-tile h3{line-height:1.2;margin-bottom:8px}
main.studio-page-canvas :is(h1,h2,h3,h4,h5,h6,p)>.brand-token{
 background:transparent!important;box-shadow:none!important;
}
@media(max-width:767px){
 main.studio-page-canvas .route-service-row.service-tile{gap:8px;padding-bottom:12px}
 main.studio-page-canvas .service-tile> :is(.tile-art,.generated-tile){height:100px}
 main.studio-page-canvas .service-tile h3{font-size:17px}
 main.studio-page-canvas .service-tile p{font-size:14px}
 .ardi-stack.is-enhanced .ardi-stack-stage{height:315px}
 .ardi-stack.is-enhanced .ardi-stack-card{height:280px;width:min(210px,65vw)}
 .ardi-stack-card>button{padding:10px 12px 14px}
 .ardi-stack.is-enhanced .ardi-stack-card img{max-height:190px}
 .ardi-stack-detail>p{min-height:0}
}

main.studio-page-canvas .page-access-note{
 background:none!important;border:0!important;box-shadow:none!important;padding:8px 0;
 color:var(--studio-copy)!important;
}
main.studio-page-canvas :is(.tool-tab-glyph,.tool-badge){
 background:transparent!important;box-shadow:none!important;
}
main.studio-page-canvas .xp-map>span{
 background:#20182ed9;color:#fff!important;border-radius:8px;
}

/* A document layer avoids the fixed-backdrop repaint path during touch scrolling. */
@media(max-width:767px),(hover:none) and (pointer:coarse){
 body>.studio-page-background{
  position:absolute;inset:0;height:auto;transform:none;contain:none;
  backface-visibility:visible;overflow:clip;
 }
 body>.studio-page-background .kinetic-material{
  position:sticky;top:0;bottom:auto;left:auto;right:auto;display:block;
  width:140%;height:100vh;height:100lvh;margin-left:-20%;
  filter:none;opacity:.3;will-change:transform;
  animation:studio-touch-drift 18s ease-in-out infinite alternate;
 }
 body>.studio-page-background :is(.kinetic-ribbons,.kinetic-edges,.kinetic-signal,.kinetic-nodes){
  animation:none;transform:none;
 }
 @keyframes studio-touch-drift{
  from{transform:translate3d(-5px,0,0)}
  to{transform:translate3d(5px,-8px,0)}
 }
}
@media(prefers-reduced-motion:reduce){
 body>.studio-page-background .kinetic-material{animation:none!important;will-change:auto}
}
body.studio-backdrop-ready{position:relative;min-height:100vh}