/* CODUS MONO V3 — service landing pages and interactive editorial illustrations. */
:root{--mono-header:86px}
/* One menu; proper chevrons; close state is expressed by aria-expanded. */
.mono-header__inner{grid-template-columns:minmax(135px,.7fr) minmax(180px,.85fr) minmax(340px,2.65fr) minmax(220px,1.2fr)}
.mono-menu-trigger{gap:15px}
.mono-menu-trigger .mono-chevron{margin-left:auto}
.mono-chevron{width:16px;height:16px;flex:0 0 16px;display:inline-block;transition:transform .25s ease,stroke .25s ease;color:#d2d2d2}
.mono-menu-trigger[aria-expanded="true"] .mono-chevron,.mono-nav [aria-expanded="true"] .mono-chevron,.mono-mobile__toggle[aria-expanded="true"] .mono-chevron{transform:rotate(180deg)}
.mono-nav a{gap:11px}
.mono-nav a .mono-chevron{color:#9f9f9f}
.mono-nav a:hover .mono-chevron{color:#f8f8f8}
.mono-nav a .mono-chevron,.mono-nav a:hover .mono-chevron,.mono-nav a[aria-expanded="true"] .mono-chevron{vertical-align:middle}
.mono-nav a:hover .mono-chevron{transform:none}
.mono-nav a[aria-expanded="true"] .mono-chevron{transform:rotate(180deg)}
.mono-menu-trigger:hover .mono-chevron{color:#fff}
.mono-menu-trigger__state{display:none!important}
.mono-product-grid{grid-auto-flow:row}
.mono-product h3{max-width:340px}
.mono-product__body p{max-width:350px}
.mono-product:focus-visible,.mono-service:focus-visible,.mono-solo-more__link:focus-visible{outline:2px solid white;outline-offset:-3px}
.mono-product__icon{filter:grayscale(1)}
.mono-product:is(:hover,:focus-visible) .mono-product__icon{filter:drop-shadow(0 0 14px var(--product-color))}
.mono-mobile__toggle .mono-chevron{margin-left:auto}

/* Homepage: meaningful colour only on interaction, with visible motion and editorial pattern. */
.mono-service{--active-accent:#e0e0e0;isolation:isolate;background:#080808!important;transition:border-color .3s,background .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.mono-service::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 88% 12%,var(--visual-accent),transparent 67%);opacity:0;transition:opacity .55s ease;pointer-events:none}
.mono-service:is(:hover,:focus-visible){--active-accent:var(--visual-accent);background:#111!important}
.mono-service:is(:hover,:focus-visible)::before{opacity:.19}
.mono-service::after{background:var(--active-accent);height:3px}
.mono-service__icon{display:inline-grid;place-items:center;color:#636363;transition:transform .55s cubic-bezier(.2,.8,.2,1),color .35s,filter .4s}
.mono-service__icon svg{width:36px;height:36px}
.mono-service:hover .mono-service__icon,.mono-service:focus-visible .mono-service__icon{color:var(--active-accent);transform:translate(6px,-5px) rotate(-7deg);filter:drop-shadow(0 0 13px var(--active-accent))}
.mono-service h3{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mono-service:is(:hover,:focus-visible) h3{transform:translateY(-4px)}
.mono-service .mono-service__arrow{transition:transform .35s,background .35s,color .35s,border-color .35s}
.mono-service:is(:hover,:focus-visible) .mono-service__arrow{background:#efefef;color:#090909;transform:translate(3px,-3px) rotate(45deg);border-color:#efefef}

/* Overview: illustrative art in the formerly empty left rail. */
.mono-service-overview-head{padding-bottom:80px}
.mono-service-overview .mono-service-detail{grid-template-columns:minmax(270px,.85fr) minmax(0,1.35fr);gap:clamp(35px,5vw,100px);align-items:center;padding-block:clamp(55px,6vw,100px)}
.mono-service-overview .mono-service-detail h2{font-size:clamp(38px,4.2vw,78px);line-height:1.04;max-width:980px;overflow-wrap:anywhere}
.mono-service-overview .mono-service-detail__body>p{font-size:clamp(16px,1.3vw,20px);color:#b0b0b0;max-width:730px}
.mono-service-overview .mono-service-detail__steps{margin:34px 0}
.mono-service-overview .mono-service-detail .mono-btn{margin-top:0}
.mono-service-visual{--ink:#d5d5d5;--soft-ink:#666;--svg-line:#a6a6a6;--svg-fill:#d4d4d410;position:relative;min-width:0;width:100%;height:clamp(310px,31vw,490px);border:1px solid #333;background:linear-gradient(150deg,#181818,#0b0b0b 65%);overflow:hidden;isolation:isolate;display:grid;place-items:center}
.mono-service-visual::before{content:"";position:absolute;inset:-30%;pointer-events:none;background:radial-gradient(circle at 52% 55%,var(--visual-accent),transparent 45%);filter:blur(60px);opacity:0;transition:opacity .6s;z-index:-1}
.mono-service-visual:is(:hover,:focus-within),.mono-service-overview__row:hover .mono-service-visual,.mono-solo-hero__grid:hover .mono-service-visual{--ink:var(--visual-accent);--svg-line:var(--visual-accent);--svg-fill:color-mix(in srgb,var(--visual-accent) 16%,transparent);}
.mono-service-visual:hover::before,.mono-service-overview__row:hover .mono-service-visual::before,.mono-solo-hero__grid:hover .mono-service-visual::before{opacity:.18}
.mono-service-visual__grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(#ffffff13 1px,transparent 1px),linear-gradient(90deg,#ffffff13 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(150deg,#000,transparent 80%)}
.mono-service-visual__content{width:83%;max-width:480px;position:relative;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.mono-service-overview__row:hover .mono-service-visual__content,.mono-solo-hero__grid:hover .mono-service-visual__content{transform:translateY(-6px)}
.sv-browser,.sv-design-window,.sv-chart,.sv-ads,.sv-brand,.sv-support{width:100%;color:#d7d7d7}
.sv-browser,.sv-design-window{border:1px solid #555;background:#121212;box-shadow:25px 25px 70px #0009}
.sv-dots{height:42px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #333;padding-inline:13px}
.sv-dots i{width:6px;height:6px;border:1px solid #777;border-radius:50%}
.sv-dots span{margin-left:12px;color:#777;font-size:11px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.sv-browser pre{line-height:2.25;padding:20px 12px;font-size:clamp(12px,1vw,17px);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;margin:0}
.sv-grey{color:#676767}.sv-blue{color:var(--ink);transition:color .5s}.sv-green{color:#ababab}
.sv-code-caret{height:12px;width:2px;display:block;background:var(--ink);margin:-14px 0 18px 42%;animation:sv-blink 1.1s steps(1,end) infinite;transition:background .5s}
@keyframes sv-blink{50%{opacity:0}}
.sv-design-layout{position:relative;height:255px;padding:30px}
.sv-design-nav{height:8px;width:43%;background:#6a6a6a;margin-bottom:45px}
.sv-design-title{width:56%;height:27px;background:var(--ink);opacity:.75;transition:background .5s}
.sv-design-text{height:7px;margin-top:16px;width:60%;background:#555}
.sv-design-text.short{width:40%;margin-top:9px}
.sv-design-action{width:115px;height:27px;border:1px solid #bbb;margin-top:25px}
.sv-design-shape{position:absolute;width:32%;height:58%;top:17%;right:8%;border:1px solid #555;background:linear-gradient(135deg,#3a3a3a,#111);transform:rotate(-8deg);box-shadow:16px 16px 0 #1c1c1c}
.sv-cursor{position:absolute;right:5%;bottom:7%;font-size:28px;transform:rotate(-5deg);color:var(--ink);transition:color .45s}
.sv-chart{border:1px solid #444;padding:23px 23px 7px;background:linear-gradient(125deg,#1d1d1d,#111)}
.sv-chart-head,.sv-chart-caption{font-size:11px;letter-spacing:.08em;color:#999;display:flex;align-items:center;justify-content:space-between}
.sv-chart-head i{width:9px;height:9px;border-radius:50%;background:#ccc}
.sv-chart svg{width:100%;height:auto;overflow:visible;margin-block:14px 0}
.sv-gridlines{stroke:#ffffff19;stroke-width:1}
.sv-chart-fill{fill:var(--svg-fill);transition:fill .5s}
.sv-chart-line{stroke:var(--svg-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s;stroke-dasharray:650;stroke-dashoffset:0}
.sv-chart-dot{fill:var(--svg-line);transition:fill .5s}
.sv-chart-caption{padding-bottom:15px;color:#777;justify-content:flex-start}
.sv-ads{padding:20px;border:1px solid #444;background:#121212}
.sv-ads-heading{font-size:clamp(17px,2vw,25px);font-weight:800;letter-spacing:-.02em;display:flex;justify-content:space-between;gap:20px}
.sv-ads-heading span{color:var(--ink);transition:color .5s}
.sv-ads-bars{height:188px;display:flex;gap:12px;align-items:flex-end;border-bottom:1px solid #777;padding:15px 10px 0;margin-top:22px;background:linear-gradient(#ffffff0e 1px,transparent 1px);background-size:100% 25%}
.sv-ads-bars span{display:block;flex:1;height:var(--h);background:linear-gradient(180deg,var(--ink),#343434);transition:height .7s,background .4s}
.sv-ads-pipeline{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:20px;font-size:10px;font-weight:800;letter-spacing:.04em}
.sv-ads-pipeline i{font-size:19px;font-style:normal;color:#888}
.sv-brand{min-height:280px;position:relative;display:flex;justify-content:center;align-items:center}
.sv-brand-outline{position:absolute;width:230px;height:230px;border:1px solid #414141;transform:rotate(45deg);border-radius:30%}
.sv-brand-mark{width:172px;height:172px;border-radius:100%;border:2px solid var(--ink);box-shadow:0 0 50px #ffffff13;display:flex;align-items:center;justify-content:center;transform:rotate(-12deg);gap:4px;transition:border-color .5s,transform .8s}
.sv-brand-mark span{font-size:75px;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.13em;transition:color .5s}
.sv-brand-palette{position:absolute;display:flex;gap:6px;right:0;bottom:1%;background:#101010;padding:9px;border:1px solid #343434}
.sv-brand-palette i{width:28px;height:28px;background:#eee}.sv-brand-palette i:nth-child(2){background:#888}.sv-brand-palette i:nth-child(3){background:#444}.sv-brand-palette i:nth-child(4){background:#111;border:1px solid #555}
.sv-brand-caption{position:absolute;left:0;bottom:2%;font-family:monospace;font-size:11px;letter-spacing:.2em;color:#999}
.sv-support{padding:25px;background:#151515;border:1px solid #444}
.sv-support-top{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;letter-spacing:.05em;color:#999}
.sv-live{display:flex;gap:8px;align-items:center}.sv-live i{width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 16px #fff6;transition:background .4s}
.sv-support-ring{width:145px;height:145px;border-radius:50%;margin:18px auto;background:conic-gradient(var(--ink) 0 290deg,#333 290deg 360deg);padding:10px;transition:background .4s}
.sv-support-ring::before{content:"";position:absolute}
.sv-support-check{display:grid;place-items:center;width:100%;height:100%;background:#161616;border-radius:50%;font-size:64px;font-weight:400;color:var(--ink);transition:color .4s}
.sv-support-rows>div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #383838;padding:10px 0;color:#aaa;font-size:11px}
.sv-support-rows i{display:inline-block;width:32%;height:6px;background:var(--ink);opacity:.4;transition:background .4s}

/* Six stand-alone indexable service pages. */
.mono-service-landing .mono-section{position:relative}
.mono-solo-hero{padding-top:32px;padding-bottom:80px;background:radial-gradient(ellipse at 84% 14%,#2424245b,transparent 45%)}
.mono-solo-hero .mono-breadcrumb{margin-bottom:60px}
.mono-solo-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(45px,4vw,80px);align-items:center}
.mono-solo-hero__text .mono-display{font-size:clamp(46px,5.6vw,105px);line-height:.98;margin:0 0 36px;overflow-wrap:anywhere}
.mono-solo-hero__lead{font-size:clamp(17px,1.35vw,22px);line-height:1.65;color:#bfbfbf;max-width:690px;margin:0 0 40px}
.mono-solo-hero .mono-service-visual{height:clamp(350px,40vw,565px)}
.mono-solo-problems,.mono-solo-process,.mono-solo-faq{background:#101010;border-block:1px solid #333}
.mono-solo-problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid #333;border-top:1px solid #333}
.mono-solo-problem-grid article{border-right:1px solid #333;border-bottom:1px solid #333;padding:clamp(22px,2.3vw,44px);min-height:320px;display:flex;flex-direction:column}
.mono-solo-problem__icon{font-size:35px;color:#777;align-self:flex-end}
.mono-solo-problem-grid h3{font-size:clamp(21px,1.8vw,31px);line-height:1.1;margin:35px 0 22px;letter-spacing:-.04em}
.mono-solo-problem-grid p{color:#aaa;font-size:15px;line-height:1.65;max-width:410px;margin:0}
.mono-solo-offer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid #333;border-top:1px solid #333}
.mono-solo-offer__item{display:grid;grid-template-columns:40px 1fr 20px;align-items:center;min-height:108px;gap:15px;padding:23px;border-right:1px solid #333;border-bottom:1px solid #333;transition:background .3s}
.mono-solo-offer__item:hover{background:#1b1b1b}
.mono-solo-offer__item>span:first-child{color:#777;font-size:11px}
.mono-solo-offer__item h3{font-size:clamp(17px,1.3vw,23px);font-weight:600;line-height:1.25;margin:0}
.mono-solo-offer__item>span:last-child{color:#777;font-size:20px}
.mono-solo-process__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #333;border-left:1px solid #333}
.mono-solo-process__item{min-height:340px;padding:27px;border-right:1px solid #333;border-bottom:1px solid #333;display:flex;flex-direction:column}
.mono-solo-process__num{font-size:60px;letter-spacing:-.09em;font-weight:800;color:#4a4a4a}
.mono-solo-process__item h3{margin:65px 0 18px;font-size:clamp(21px,1.75vw,31px);line-height:1.2;letter-spacing:-.04em}
.mono-solo-process__item p{margin:0;color:#aaa;font-size:14px;line-height:1.65}
.mono-solo-about__grid{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);gap:7vw}
.mono-solo-about__grid .mono-display{font-size:clamp(41px,4.6vw,77px);line-height:1.06}
.mono-solo-about__aside{font-size:15px;line-height:1.5;color:#999;max-width:360px;margin-top:25px}
.mono-solo-about__content{font-size:18px;line-height:1.7;color:#c8c8c8}
.mono-solo-about__content h2,.mono-solo-about__content h3{color:#fff;font-size:clamp(26px,2.2vw,39px);margin:0 0 27px;line-height:1.14}
.mono-solo-about__content p{margin:0 0 26px}
.mono-solo-about__content ul{list-style:none;padding:0;margin:25px 0}
.mono-solo-about__content li{padding:16px 0 16px 27px;position:relative;border-top:1px solid #343434;font-size:16px}
.mono-solo-about__content li::before{content:'↗';position:absolute;left:0;top:16px}
.mono-solo-faq__items{border-top:1px solid #404040}
.mono-solo-faq__item{border-bottom:1px solid #404040}
.mono-solo-faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:22px;font-size:clamp(18px,1.6vw,27px);font-weight:700;line-height:1.3;letter-spacing:-.03em;padding:25px 0}
.mono-solo-faq__item summary::-webkit-details-marker{display:none}
.mono-faq-chevron{display:grid;place-items:center;font-size:29px;font-weight:400;line-height:1;transition:transform .3s}
.mono-solo-faq__item[open] .mono-faq-chevron{transform:rotate(180deg)}
.mono-solo-faq__item>div{color:#aeaeae;font-size:16px;line-height:1.6;max-width:580px;padding:0 0 22px}
.mono-solo-faq__item p{margin:0}
.mono-solo-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid #333;border-top:1px solid #333}
.mono-solo-more__link{min-height:190px;display:flex;flex-direction:column;justify-content:space-between;position:relative;padding:24px;border-bottom:1px solid #333;border-right:1px solid #333;transition:background .35s}
.mono-solo-more__link:hover{background:color-mix(in srgb,var(--visual-accent) 10%,#111)}
.mono-solo-more__icon{color:#666;transition:color .35s,transform .35s}.mono-solo-more__icon svg{width:35px;height:35px}
.mono-solo-more__link:hover .mono-solo-more__icon{color:var(--visual-accent);transform:translateY(-5px)}
.mono-solo-more__link strong{font-size:clamp(20px,1.6vw,27px);line-height:1.15;letter-spacing:-.025em}
.mono-solo-more__arrow{position:absolute;right:24px;top:22px;font-size:24px}

@media(max-width:1270px){
 .mono-header__inner{grid-template-columns:minmax(116px,.65fr) minmax(160px,.85fr) minmax(270px,2fr) minmax(190px,1.1fr)}
 .mono-product h3{font-size:clamp(18px,1.55vw,26px)}
 .mono-service-overview .mono-service-detail{gap:32px}
}
@media(max-width:950px){
 .mono-header__inner{grid-template-columns:1fr 165px 56px}
 .mono-mobile__toggle .mono-chevron{color:#fff}
 .mono-solo-hero__grid{grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);gap:24px}
 .mono-solo-hero__text .mono-display{font-size:clamp(40px,5.1vw,70px)}
 .mono-service-overview .mono-service-detail{grid-template-columns:minmax(240px,.85fr) minmax(0,1.1fr)}
 .mono-service-overview .mono-service-detail h2{font-size:clamp(35px,4vw,62px)}
 .mono-solo-process__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mono-solo-process__item{min-height:275px}
 .mono-solo-process__item h3{margin-top:35px}
}
@media(max-width:700px){
 .mono-service-overview .mono-service-detail{grid-template-columns:1fr;gap:26px}
 .mono-service-overview .mono-service-detail .mono-service-visual{height:300px}
 .mono-service-overview .mono-service-detail__num{max-width:100%;width:100%}
 .mono-service-overview .mono-service-detail h2{font-size:clamp(36px,7vw,58px)}
 .mono-solo-hero__grid{grid-template-columns:1fr}
 .mono-solo-hero__text .mono-display{font-size:clamp(42px,8vw,78px)}
 .mono-solo-hero .mono-service-visual{height:330px}
 .mono-solo-problem-grid{grid-template-columns:1fr}
 .mono-solo-problem-grid article{min-height:230px}
 .mono-solo-problem-grid h3{margin-top:15px}
 .mono-solo-offer__grid{grid-template-columns:1fr}
 .mono-solo-about__grid{grid-template-columns:1fr;gap:35px}
 .mono-solo-more__grid{grid-template-columns:1fr}
 .mono-solo-more__link{min-height:140px}
}
@media(max-width:620px){
 .mono-header__inner{grid-template-columns:1fr 139px 46px}
 .mono-solo-hero{padding-top:16px;padding-bottom:55px}
 .mono-solo-hero .mono-breadcrumb{margin-bottom:45px}
 .mono-solo-hero__text .mono-display{font-size:clamp(41px,10vw,62px)}
 .mono-solo-hero__lead{font-size:16px}
 .mono-solo-process__grid{grid-template-columns:1fr}
 .mono-solo-process__item{min-height:220px}
 .mono-solo-process__item h3{margin-top:12px}
 .mono-service-visual__content{width:88%}
 .sv-browser pre{font-size:12px}
 .sv-design-layout{height:225px}
 .mono-service-overview .mono-service-detail .mono-btn{width:100%}
}
@media(max-width:390px){
 .mono-header__inner{grid-template-columns:1fr 112px 43px}
 .mono-menu-trigger{display:flex}
 .mono-menu-trigger .mono-chevron{width:12px;height:12px;flex-basis:12px}
 .mono-menu-trigger__icon{display:none}
 .mono-solo-hero__text .mono-display{font-size:39px}
 .sv-browser pre{font-size:10px}
 .sv-ads-pipeline{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.mono-service-visual,.mono-service,.mono-service__icon,.sv-chart-line,.sv-code-caret{animation:none!important;transition:none!important}}
/* Text transformations are handled by CSS, not an optional PHP mbstring extension. */
.mono-service-detail h2,.mono-solo-hero__text h1,.mono-solo-more__link strong,.mono-product h3{text-transform:uppercase}
.mono-menu-trigger__short{display:none}
@media(max-width:420px){.mono-menu-trigger__short{display:inline}.mono-menu-trigger__long{display:none}.mono-menu-trigger{white-space:nowrap;padding-inline:7px!important;gap:5px!important}}
.mono-service__top{justify-content:space-between}
.mono-service::before{background:radial-gradient(ellipse at var(--hover-x,88%) var(--hover-y,12%),var(--visual-accent),transparent 67%)}

/* CODUS MONO V4 — stronger hover states, richer case storytelling and footer overhaul. */
.mono-product{transition:border-color .35s,background .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.mono-product::before{background:radial-gradient(circle at var(--hover-x,74%) var(--hover-y,22%),var(--product-color),transparent 54%)}
.mono-product:is(:hover,:focus-visible){transform:translateY(-4px);border-color:color-mix(in srgb,var(--product-color) 45%,#565656);background:#111}
.mono-product h3,.mono-product p{transition:transform .4s ease,color .35s ease}
.mono-product:is(:hover,:focus-visible) h3{transform:translateY(-3px);color:#fff}
.mono-product:is(:hover,:focus-visible) p{color:#cbcbcb}
.mono-product__arrow{transition:background .25s,color .25s,transform .35s,border-color .35s}
.mono-product:is(:hover,:focus-visible) .mono-product__arrow{border-color:var(--product-color)}

.mono-service-overview__row{position:relative;isolation:isolate;transition:background .4s,border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.mono-service-overview__row::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 14% 50%,color-mix(in srgb,var(--visual-accent) 22%,transparent),transparent 34%),linear-gradient(90deg,color-mix(in srgb,var(--visual-accent) 7%,transparent),transparent 38%);opacity:0;transition:opacity .45s ease;z-index:-1}
.mono-service-overview__row:hover{background:#0f0f0f;transform:translateY(-2px)}
.mono-service-overview__row:hover::before{opacity:1}
.mono-service-overview__row:hover .mono-service-detail__steps span{border-top-color:color-mix(in srgb,var(--visual-accent) 38%,#2e2e2e);color:#d5d5d5}
.mono-service-overview__row:hover .mono-service-detail__body>p{color:#c8c8c8}

.mono-solo-related .mono-case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.mono-story-block{align-items:start}
.mono-story-block__panel{position:relative;border:1px solid #2f2f2f;background:linear-gradient(180deg,#111,#0b0b0b);padding:clamp(28px,3.2vw,52px);overflow:hidden;isolation:isolate}
.mono-story-block__panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 100% 0,var(--story-accent,rgba(255,255,255,.08)),transparent 45%);opacity:.9}
.mono-story-block__panel::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--story-line,#f2f2f2);opacity:.85}
.mono-story-block__panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}
.mono-story-block__kicker{font-size:11px;letter-spacing:.12em;color:#9e9e9e}
.mono-story-block--task{--story-line:#40b9ff;--story-accent:rgba(64,185,255,.15)}
.mono-story-block--solution{--story-line:#ae8eff;--story-accent:rgba(174,142,255,.15)}
.mono-story-block--process{--story-line:#ffad53;--story-accent:rgba(255,173,83,.14)}
.mono-story-block--result{--story-line:#71d9c2;--story-accent:rgba(113,217,194,.16)}
.mono-story-block__label{position:sticky;top:110px}
.mono-story-block h2{margin-bottom:28px}
.mono-story-block .mono-richtext{max-width:none}
.mono-story-block .mono-richtext h3:first-child{margin-top:1.35em}

.mono-footer{padding:0 0 30px;background:radial-gradient(circle at 15% 12%,#1c1c1c,transparent 26%),radial-gradient(circle at 100% 0,#202020,transparent 30%),#080808}
.mono-footer__hero{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(280px,1.1fr);gap:clamp(26px,4vw,68px);padding:72px 0 54px;border-bottom:1px solid var(--mono-line);align-items:end}
.mono-footer__brand p{font-size:11px;letter-spacing:.08em;color:#888;margin:18px 0 0}
.mono-footer__lead{position:relative;padding:30px;border:1px solid #2f2f2f;background:linear-gradient(180deg,#111,#0b0b0b)}
.mono-footer__lead::before{content:"";position:absolute;inset:auto -10% -25% auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#ffffff1f,transparent 62%);filter:blur(20px);pointer-events:none}
.mono-footer__eyebrow{display:inline-block;font-size:11px;letter-spacing:.12em;color:#8f8f8f;margin-bottom:16px}
.mono-footer__lead h2{font-size:clamp(40px,4.7vw,82px);line-height:.98;margin:0 0 22px}
.mono-footer__lead p{max-width:560px;color:#b3b3b3;font-size:16px;line-height:1.65;margin:0 0 30px}
.mono-footer__top{grid-template-columns:.8fr 1.2fr .8fr;gap:32px;padding:46px 0 70px}
.mono-footer__nav,.mono-footer__services,.mono-footer__social{border:1px solid #242424;background:#0b0b0b;padding:24px;min-height:100%}
.mono-footer__nav strong,.mono-footer__services strong,.mono-footer__social strong{display:block;font-size:11px;letter-spacing:.12em;color:#8d8d8d;margin-bottom:18px}
.mono-footer__nav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;font-size:12px;font-weight:800}
.mono-footer__service-chips{display:flex;flex-wrap:wrap;gap:12px}
.mono-footer__service-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border:1px solid #313131;background:#101010;font-size:12px;font-weight:700;letter-spacing:.02em;transition:transform .35s,background .35s,border-color .35s,color .35s}
.mono-footer__service-chips a:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--visual-accent) 12%,#111);border-color:color-mix(in srgb,var(--visual-accent) 48%,#474747);color:#fff}
.mono-footer__social{display:flex;flex-direction:column;gap:16px;font-size:14px}
.mono-footer__social a{color:#efefef;overflow-wrap:anywhere}
.mono-footer__social a:hover,.mono-footer__nav a:hover{color:#fff}
.mono-footer__bottom{padding-top:24px}

@media(max-width:1100px){
 .mono-solo-related .mono-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mono-footer__top{grid-template-columns:1fr 1fr}
 .mono-footer__services{grid-column:1/-1}
}
@media(max-width:780px){
 .mono-story-block__label{position:static}
 .mono-footer__hero{grid-template-columns:1fr;padding-top:56px}
 .mono-footer__lead{padding:24px}
 .mono-footer__top{grid-template-columns:1fr;padding:34px 0 56px}
 .mono-footer__nav-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .mono-solo-related .mono-case-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
 .mono-story-block__panel{padding:22px 18px}
 .mono-footer__nav-grid{grid-template-columns:1fr}
 .mono-footer__service-chips a{width:100%;justify-content:space-between}
}


/* CODUS MONO V5 — interactive hero/cards and denser case storytelling */
@keyframes monoBorderSpin{to{transform:rotate(1turn)}}
@keyframes monoFloatBlob{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14px,-12px,0) scale(1.06)}}
@keyframes monoDriftGrid{0%{background-position:0 0,0 0}100%{background-position:40px 26px,-30px 20px}}

.mono-hero{--hero-x:72%;--hero-y:32%;position:relative;overflow:hidden}
.mono-hero::before{content:"";position:absolute;inset:-22% -10% -10% -10%;pointer-events:none;background:radial-gradient(circle at var(--hero-x) var(--hero-y),rgba(255,255,255,.11),transparent 19%),radial-gradient(circle at calc(var(--hero-x) - 18%) calc(var(--hero-y) + 22%),rgba(255,255,255,.055),transparent 24%);filter:blur(20px);opacity:.95;transition:opacity .25s ease}
.mono-hero__ambient{background:radial-gradient(circle at var(--hero-x) var(--hero-y),color-mix(in srgb,var(--mono-accent,#d6d6d6) 10%,transparent),transparent 18%),radial-gradient(ellipse at 40% 55%,#77777718,transparent 59%),linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent)}
.mono-hero__copy,.mono-hero__art{position:relative;z-index:2}
.mono-hero__copy{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mono-hero__art{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .3s}
.mono-hero__art::before{box-shadow:0 0 0 70px #ffffff03,0 0 0 145px #ffffff02,0 0 90px #ffffff0b,0 0 65px color-mix(in srgb,#ffffff 12%,transparent)}

.mono-product,.mono-service,.mono-service-overview__row{position:relative;overflow:hidden;isolation:isolate}
.mono-product::before,.mono-service::before,.mono-service-overview__row::before{opacity:.0;transition:opacity .35s ease,filter .35s ease}
.mono-product:hover::before,.mono-product:focus-visible::before,.mono-service:hover::before,.mono-service:focus-visible::before,.mono-service-overview__row:hover::before,.mono-service-overview__row:focus-within::before{opacity:1}

.mono-product::after,.mono-service::after{content:"";position:absolute;inset:-1px;padding:1px;pointer-events:none;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,color-mix(in srgb,var(--product-color,var(--visual-accent)) 75%,white) 50deg,transparent 120deg,transparent 210deg,color-mix(in srgb,var(--product-color,var(--visual-accent)) 75%,white) 275deg,transparent 330deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:rotate(0turn);transition:opacity .35s ease}
.mono-product:hover::after,.mono-product:focus-visible::after,.mono-service:hover::after,.mono-service:focus-visible::after{opacity:1;animation:monoBorderSpin 4.5s linear infinite}
.mono-product{transition:border-color .35s,background .35s,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.mono-product::before{content:"";position:absolute;inset:-16%;z-index:-1;background:radial-gradient(circle 160px at var(--hover-x,82%) var(--hover-y,18%),color-mix(in srgb,var(--product-color) 42%,transparent),transparent 60%),radial-gradient(circle at 20% 100%,rgba(255,255,255,.06),transparent 28%);filter:blur(14px)}
.mono-product:hover{background:#121212;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.mono-product:hover .mono-product__arrow{border-color:var(--product-color);transform:translate(3px,-3px)}

.mono-service{transition:border-color .3s,background .3s,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mono-service::before{content:"";position:absolute;inset:-18%;z-index:-1;background:radial-gradient(circle 160px at var(--hover-x,88%) var(--hover-y,12%),color-mix(in srgb,var(--visual-accent) 45%,transparent),transparent 58%),radial-gradient(circle at 18% 100%,rgba(255,255,255,.05),transparent 22%);filter:blur(10px)}
.mono-service:hover{background:#101010!important;transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.mono-service:hover .mono-service__arrow{border-color:var(--visual-accent);box-shadow:0 0 24px color-mix(in srgb,var(--visual-accent) 30%,transparent)}
.mono-service h3,.mono-service p{position:relative;z-index:2}
.mono-service__icon,.mono-service__arrow{position:relative;z-index:2}

.mono-service-overview__row{--overview-glow:var(--visual-accent);transition:background .4s,border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mono-service-overview__row::before{content:"";position:absolute;inset:-12%;pointer-events:none;background:radial-gradient(circle 190px at var(--hover-x,14%) var(--hover-y,40%),color-mix(in srgb,var(--overview-glow) 18%,transparent),transparent 55%),linear-gradient(90deg,color-mix(in srgb,var(--overview-glow) 8%,transparent),transparent 38%);filter:blur(6px);z-index:-1}
.mono-service-overview__row:hover{background:#0f0f0f;transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--visual-accent) 18%,transparent)}

.mono-case-detail__story{padding:20px 0 90px}
.mono-story-block{grid-template-columns:1fr!important;gap:16px!important;padding:clamp(34px,4vw,56px) 0!important;border-top:1px solid #1f1f1f;position:relative}
.mono-story-block__label{position:static!important;padding-top:0;font-size:11px;letter-spacing:.14em;color:#909090;text-transform:uppercase}
.mono-story-block__panel{position:relative;border:1px solid #2a2a2a;background:linear-gradient(180deg,#111,#0b0b0b);padding:clamp(28px,3vw,48px);overflow:hidden;isolation:isolate;min-height:320px}
.mono-story-block__panel>*{position:relative;z-index:2}
.mono-story-block__panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at calc(var(--hover-x,82%)) calc(var(--hover-y,18%)),var(--story-accent,rgba(255,255,255,.08)),transparent 26%),linear-gradient(135deg,rgba(255,255,255,.02),transparent 36%);opacity:1}
.mono-story-block__panel::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:36px 36px,36px 36px;mask-image:linear-gradient(120deg,#000 30%,transparent 92%);opacity:.22;animation:monoDriftGrid 18s linear infinite}
.mono-story-block__panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.mono-story-block__panel-head::after{content:"";width:88px;height:88px;flex:0 0 88px;border-radius:50%;background:radial-gradient(circle,var(--story-line,#fff) 0%,transparent 68%);opacity:.22;filter:blur(10px);animation:monoFloatBlob 6.5s ease-in-out infinite}
.mono-story-block__kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;color:#a4a4a4;padding:8px 12px;border:1px solid #2e2e2e;background:rgba(255,255,255,.02)}
.mono-story-block h2{margin-bottom:18px;font-size:clamp(42px,4.6vw,82px);max-width:860px}
.mono-story-block .mono-richtext{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:980px}
.mono-story-block .mono-richtext p,.mono-story-block .mono-richtext li{font-size:clamp(18px,1.45vw,22px);line-height:1.8;color:#d0d0d0}
.mono-story-block .mono-richtext ul,.mono-story-block .mono-richtext ol{padding-left:1.2em;margin:0}
.mono-story-block .mono-richtext h3{font-size:22px;margin:10px 0 4px}
.mono-story-block--task{--story-line:#40b9ff;--story-accent:rgba(64,185,255,.16)}
.mono-story-block--solution{--story-line:#ae8eff;--story-accent:rgba(174,142,255,.16)}
.mono-story-block--process{--story-line:#ffad53;--story-accent:rgba(255,173,83,.14)}
.mono-story-block--result{--story-line:#71d9c2;--story-accent:rgba(113,217,194,.18)}

@media (max-width: 780px){
  .mono-story-block{padding:28px 0!important}
  .mono-story-block__panel{min-height:0;padding:22px 18px}
  .mono-story-block__panel-head{margin-bottom:12px}
  .mono-story-block__panel-head::after{width:58px;height:58px;flex-basis:58px}
  .mono-story-block h2{font-size:clamp(36px,10vw,54px)}
  .mono-story-block .mono-richtext p,.mono-story-block .mono-richtext li{font-size:16px;line-height:1.7}
}
@media (prefers-reduced-motion: reduce){
  .mono-product::after,.mono-service::after{animation:none!important}
  .mono-story-block__panel::after,.mono-story-block__panel-head::after{animation:none!important}
}