/* ==========================================================
   Maline Services v2 / 2026-08-09
   Nine focused service pages. Shared visual system, service-specific content.
   ========================================================== */
.svc-page{--svc-accent:#f15a24;--svc-soft:#eadbcb;background:var(--paper);color:var(--ink)}
.svc-page[data-accent="teal"]{--svc-accent:#315f5c;--svc-soft:#d7e1dd}
.svc-page[data-accent="sand"]{--svc-accent:#b9a486;--svc-soft:#e8d7bf}
.svc-hero{position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
.svc-hero-grid{min-height:clamp(38rem,76svh,52rem);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(22rem,.92fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-top:clamp(4rem,7vw,7rem);padding-bottom:clamp(3rem,6vw,5.5rem)}
.svc-hero-copy{position:relative;z-index:2}.svc-hero .crumbs{margin-bottom:clamp(2.4rem,5vw,4rem)}
.svc-hero-index{position:absolute;right:0;top:0;font-size:.62rem;letter-spacing:.12em;color:var(--muted)}
.svc-hero h1{margin-top:1rem;max-width:10.8ch;font-size:clamp(4rem,7.4vw,7.7rem);line-height:.82;letter-spacing:-.068em}
.svc-hero-lede{margin-top:clamp(1.6rem,3vw,2.5rem);max-width:40rem;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.42;color:var(--muted)}
.svc-scope{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.7rem}.svc-scope span{padding:.5rem .68rem;border:1px solid var(--line);border-radius:999px;font-size:.6rem;line-height:1;text-transform:uppercase;letter-spacing:.08em}
.svc-hero-visual{min-height:clamp(27rem,37vw,34rem);display:grid;place-items:center;perspective:1100px}.svc-viz{--px:0;--py:0;position:relative;width:min(100%,34rem);aspect-ratio:1/1;transform:translate3d(calc(var(--px)*8px),calc(var(--py)*8px),0);transition:transform .18s ease-out}

/* Branding visual */
.svc-viz-brand{transform-style:preserve-3d}.brand-tile{position:absolute;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--ink);box-shadow:0 1.4rem 2.7rem rgba(17,17,15,.08);transition:transform .35s var(--ease)}.brand-tile small{font-size:.58rem;letter-spacing:.12em}.brand-tile strong{font-size:clamp(1.5rem,3vw,3rem);line-height:.86;letter-spacing:-.05em}.brand-tile--a{left:4%;top:13%;width:42%;height:38%;background:#f15a24;transform:rotate(-7deg) translateZ(30px)}.brand-tile--b{right:5%;top:5%;width:38%;height:45%;background:#f3f0e9;transform:rotate(7deg) translateZ(56px)}.brand-tile--c{left:19%;bottom:7%;width:37%;height:39%;background:#11110f;color:#f3f0e9;transform:rotate(5deg) translateZ(78px)}.brand-tile--d{right:5%;bottom:12%;width:36%;height:34%;background:#315f5c;color:#f3f0e9;transform:rotate(-5deg) translateZ(20px)}.svc-viz-brand:hover .brand-tile--a{transform:rotate(-11deg) translate(-8px,-6px) translateZ(50px)}.svc-viz-brand:hover .brand-tile--b{transform:rotate(11deg) translate(8px,-8px) translateZ(74px)}.svc-viz-brand:hover .brand-tile--c{transform:rotate(8deg) translate(-7px,8px) translateZ(92px)}.svc-viz-brand:hover .brand-tile--d{transform:rotate(-9deg) translate(8px,8px) translateZ(38px)}

/* AI visual */
.svc-viz-ai{border:1px solid var(--line);background:linear-gradient(rgba(49,95,92,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(49,95,92,.08) 1px,transparent 1px);background-size:2.4rem 2.4rem}.ai-node{position:absolute;min-width:5.5rem;padding:.7rem;border:1px solid rgba(17,17,15,.25);background:var(--paper);font:600 .6rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:center;z-index:2}.ai-node--1{left:7%;top:12%}.ai-node--2{right:8%;top:15%}.ai-node--3{left:8%;bottom:14%}.ai-node--4{right:7%;bottom:12%}.ai-node--core{left:50%;top:50%;width:8.5rem;height:8.5rem;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:#11110f;color:#f3f0e9;border-color:#11110f}.ai-line{position:absolute;left:50%;top:50%;width:34%;height:1px;transform-origin:left;background:linear-gradient(90deg,#315f5c,rgba(49,95,92,.08));animation:svcFlow 2.8s ease-in-out infinite}.ai-line--1{transform:rotate(-138deg)}.ai-line--2{transform:rotate(-42deg);animation-delay:-.7s}.ai-line--3{transform:rotate(138deg);animation-delay:-1.4s}.ai-line--4{transform:rotate(42deg);animation-delay:-2.1s}@keyframes svcFlow{50%{filter:brightness(2);box-shadow:0 0 1rem rgba(49,95,92,.45)}}

/* Content visual */
.svc-viz-content{border-bottom:1px solid var(--ink)}.content-frame{position:absolute;display:flex;flex-direction:column;justify-content:space-between;padding:.75rem;border:1px solid var(--ink);background:var(--paper);box-shadow:0 1rem 2rem rgba(17,17,15,.08);transition:transform .3s var(--ease)}.content-frame span{font-size:.58rem;letter-spacing:.1em}.content-frame b{font-size:clamp(1.8rem,4vw,3.6rem);letter-spacing:-.055em}.content-frame--1{left:6%;top:6%;width:31%;height:62%;background:#11110f;color:#f3f0e9;transform:rotate(-4deg)}.content-frame--2{left:31%;top:18%;width:55%;height:37%;background:#f15a24;transform:rotate(3deg)}.content-frame--3{right:5%;bottom:9%;width:34%;height:42%;background:#e8d7bf;transform:rotate(-5deg)}.content-timeline{position:absolute;left:5%;right:5%;bottom:0;height:3rem;display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;align-items:end}.content-timeline i{display:block;height:35%;background:#11110f}.content-timeline i:nth-child(2){height:75%}.content-timeline i:nth-child(3){height:52%;background:#f15a24}.content-timeline i:nth-child(4){height:92%;background:#315f5c}.content-timeline i:nth-child(5){height:60%}.svc-viz-content:hover .content-frame--1{transform:rotate(-7deg) translate(-5px,-6px)}.svc-viz-content:hover .content-frame--2{transform:rotate(5deg) translate(4px,-8px)}.svc-viz-content:hover .content-frame--3{transform:rotate(-8deg) translate(5px,6px)}

/* Social visual */
.svc-viz-social{display:grid;align-content:center}.social-card{position:absolute;width:76%;min-height:28%;padding:1rem 1.1rem;display:grid;grid-template-columns:1fr auto;align-content:space-between;border:1px solid var(--ink);background:var(--paper);box-shadow:0 1.2rem 2.5rem rgba(17,17,15,.08);transition:transform .3s var(--ease),background .3s,color .3s}.social-card small{font-size:.56rem;letter-spacing:.12em}.social-card b{grid-column:1/-1;margin-top:2rem;font-size:clamp(1.5rem,3vw,2.8rem);line-height:.92;letter-spacing:-.045em}.social-card span{font-size:.62rem;justify-self:end}.social-card--1{left:4%;top:9%;transform:rotate(-3deg)}.social-card--2{right:3%;top:34%;transform:rotate(2deg);background:#315f5c;color:#f3f0e9}.social-card--3{left:9%;bottom:5%;transform:rotate(-1deg);background:#f15a24}.svc-viz-social:hover .social-card--1{transform:translate(-7px,-6px) rotate(-5deg)}.svc-viz-social:hover .social-card--2{transform:translate(8px,-2px) rotate(4deg)}.svc-viz-social:hover .social-card--3{transform:translate(-4px,8px) rotate(-3deg)}

/* Ads visual */
.svc-viz-ads{border:1px solid var(--ink);display:grid;grid-template-rows:auto 1fr auto;background:#11110f;color:#f3f0e9}.ads-top,.ads-bottom{display:flex;justify-content:space-between;gap:.5rem;padding:.8rem;border-bottom:1px solid rgba(243,240,233,.17);font:600 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.ads-top b{color:#f15a24}.ads-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;align-items:end;padding:2rem 1rem 1rem}.ads-grid i{position:relative;height:var(--h);min-height:4rem;background:#5b5f5e;transition:height .3s,background .3s}.ads-grid i::after{content:"";position:absolute;left:0;right:0;top:0;height:.3rem;background:#f3f0e9}.ads-grid i b{position:absolute;left:.55rem;bottom:.55rem;font-size:1rem}.ads-grid .is-win{background:#f15a24;animation:adsWin 1.8s ease-in-out infinite alternate}@keyframes adsWin{to{filter:brightness(1.2)}}.ads-bottom{border-top:1px solid rgba(243,240,233,.17);border-bottom:0;color:rgba(243,240,233,.5)}

/* SEO visual */
.svc-viz-seo{border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,rgba(49,95,92,.12),transparent 48%)}.seo-query{position:absolute;left:8%;right:8%;top:12%;padding:1rem;border:1px solid var(--ink);background:var(--paper);font-size:clamp(.95rem,1.7vw,1.3rem)}.seo-query b{color:#315f5c}.seo-node{position:absolute;padding:.7rem .85rem;border:1px solid rgba(17,17,15,.26);background:var(--paper);font:600 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;z-index:2}.seo-node--1{left:7%;bottom:18%}.seo-node--2{left:37%;bottom:7%}.seo-node--3{right:8%;bottom:18%}.seo-node--4{right:12%;top:43%;background:#315f5c;color:#f3f0e9}.seo-ray{position:absolute;left:50%;top:48%;width:34%;height:1px;transform-origin:left;background:linear-gradient(90deg,rgba(49,95,92,.8),rgba(49,95,92,.04));animation:seoPulse 2.6s ease-in-out infinite}.seo-ray--1{transform:rotate(158deg)}.seo-ray--2{transform:rotate(111deg);animation-delay:-.5s}.seo-ray--3{transform:rotate(23deg);animation-delay:-1s}.seo-ray--4{transform:rotate(-14deg);animation-delay:-1.5s}@keyframes seoPulse{50%{opacity:.25}}

/* Web visual */
.svc-viz-web{display:grid;place-items:center}.web-browser{position:absolute;left:4%;right:12%;top:11%;bottom:18%;border:1px solid var(--ink);background:var(--paper);box-shadow:0 1.5rem 3rem rgba(17,17,15,.08)}.web-bar{height:2.4rem;display:flex;align-items:center;gap:.4rem;padding:0 .75rem;border-bottom:1px solid var(--line)}.web-bar i{width:.45rem;height:.45rem;border-radius:50%;background:#11110f}.web-bar span{margin-left:auto;font:500 .5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}.web-screen{height:calc(100% - 2.4rem);padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#e8d7bf 0 52%,#f3f0e9 52%)}.web-screen b{font-size:clamp(2.8rem,6vw,5rem);line-height:.82;letter-spacing:-.06em}.web-screen>div{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.45rem}.web-screen i{height:4rem;background:#315f5c}.web-screen i:nth-child(2){background:#11110f}.web-screen i:nth-child(3){background:#f15a24}.web-screen small{font-size:.54rem;letter-spacing:.1em}.web-device{position:absolute;right:2%;bottom:5%;width:27%;height:47%;padding:.7rem;display:flex;flex-direction:column;border:1px solid var(--ink);border-radius:1.2rem;background:#11110f;color:#f3f0e9;box-shadow:0 1rem 2rem rgba(17,17,15,.18);transition:transform .3s var(--ease)}.web-device b{font-size:1.5rem}.web-device i{display:block;height:1px;background:rgba(243,240,233,.2);margin-top:auto}.svc-viz-web:hover .web-device{transform:translate(5px,-7px) rotate(2deg)}

/* App visual */
.svc-viz-app{display:flex;align-items:center;justify-content:center;gap:4%;transform-style:preserve-3d}.app-phone{width:28%;height:64%;padding:.75rem;display:flex;flex-direction:column;border:1px solid #11110f;border-radius:1.5rem;background:#f3f0e9;box-shadow:0 1.4rem 2.5rem rgba(17,17,15,.08);transition:transform .32s var(--ease)}.app-phone small{font-size:.56rem;letter-spacing:.1em}.app-phone b{margin:auto 0;font-size:clamp(1.5rem,3vw,2.7rem);letter-spacing:-.05em}.app-phone i{height:24%;background:#e8d7bf;border-radius:.6rem}.app-phone--1{transform:translateY(7%) rotate(-5deg)}.app-phone--2{height:76%;background:#315f5c;color:#f3f0e9;transform:translateY(-4%)}.app-phone--2 i{background:#f15a24}.app-phone--3{transform:translateY(7%) rotate(5deg)}.svc-viz-app:hover .app-phone--1{transform:translate(-8px,4%) rotate(-7deg)}.svc-viz-app:hover .app-phone--2{transform:translateY(-8%)}.svc-viz-app:hover .app-phone--3{transform:translate(8px,4%) rotate(7deg)}

/* VAPT visual */
.svc-viz-vapt{display:grid;grid-template-rows:1fr auto;border:1px solid #11110f;background:#11110f;color:#f3f0e9}.vapt-radar{position:relative;margin:8%;border:1px solid rgba(243,240,233,.22);border-radius:50%;aspect-ratio:1;background:repeating-radial-gradient(circle,transparent 0 18%,rgba(243,240,233,.08) 18% 18.5%)}.vapt-radar::before,.vapt-radar::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(243,240,233,.1)}.vapt-radar::after{left:0;right:0;top:50%;height:1px;width:auto}.vapt-radar>i{position:absolute;left:50%;top:50%;width:45%;height:1px;transform-origin:left;background:linear-gradient(90deg,#f15a24,transparent);animation:radar 3.2s linear infinite}@keyframes radar{to{transform:rotate(360deg)}}.vapt-radar b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 .65rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.vapt-dot{position:absolute;width:.55rem;height:.55rem;border-radius:50%;background:#f15a24;box-shadow:0 0 0 .35rem rgba(241,90,36,.12)}.vapt-dot--1{left:27%;top:31%}.vapt-dot--2{right:20%;top:45%}.vapt-dot--3{left:45%;bottom:18%}.vapt-status{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(243,240,233,.17)}.vapt-status span{padding:.75rem .4rem;text-align:center;border-right:1px solid rgba(243,240,233,.12);font-size:.5rem;letter-spacing:.08em;color:rgba(243,240,233,.45)}

/* Shared sections */
.svc-section-head{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:clamp(2.5rem,5vw,4.5rem)}.svc-section-head .h2{margin-top:.9rem;max-width:13ch}.svc-section-head--split{grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr);gap:clamp(2rem,8vw,8rem);align-items:end}.svc-section-head--split>p{max-width:32rem;color:rgba(243,240,233,.55);line-height:1.45}
.svc-problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.svc-problem-card{min-height:clamp(17rem,24vw,23rem);padding:1.2rem;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s,transform .25s var(--ease)}.svc-problem-card:hover{background:var(--svc-soft);transform:translateY(-3px)}.svc-problem-card>span{font-size:.62rem;letter-spacing:.1em;color:var(--muted)}.svc-problem-card h3{margin-top:auto;max-width:9ch;font-size:clamp(2rem,3vw,3.5rem);line-height:.9;letter-spacing:-.055em}.svc-problem-card p{margin-top:.8rem;max-width:26rem;color:var(--muted);line-height:1.45;font-size:.87rem}
.svc-capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(243,240,233,.16);border-left:1px solid rgba(243,240,233,.16)}.svc-capability{position:relative;min-height:15rem;padding:1.3rem;display:flex;flex-direction:column;border-right:1px solid rgba(243,240,233,.16);border-bottom:1px solid rgba(243,240,233,.16);overflow:hidden;isolation:isolate;transition:color .3s}.svc-capability::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--svc-accent);transform:scaleY(0);transform-origin:bottom;transition:transform .32s var(--ease)}.svc-capability:hover::before{transform:scaleY(1)}.svc-capability h3{max-width:16ch;font-size:clamp(1.8rem,2.6vw,3rem);line-height:.92;letter-spacing:-.045em}.svc-capability p{margin-top:auto;max-width:34rem;color:rgba(243,240,233,.52);line-height:1.45;font-size:.85rem;transition:color .3s}.svc-capability:hover p{color:rgba(17,17,15,.68)}.svc-capability>span{position:absolute;right:1rem;top:1rem;font-size:1.25rem;opacity:.45;transition:transform .3s}.svc-capability:hover>span{transform:translate(.2rem,-.2rem) rotate(8deg);opacity:1}.svc-capability:hover{color:#11110f}
.svc-method-grid{display:grid;grid-template-columns:minmax(17rem,.72fr) minmax(0,1.28fr);gap:clamp(3rem,8vw,8rem);align-items:start}.svc-method-grid>aside{position:sticky;top:calc(var(--nav-h) + 2rem)}.svc-method-grid .h3{margin-top:.8rem;max-width:10ch}.svc-method-note{margin-top:1.4rem;max-width:27rem;color:var(--muted);line-height:1.5}.svc-inline-link{display:inline-flex;margin-top:1.35rem;padding-bottom:.18rem;border-bottom:1px solid var(--ink);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.svc-steps{border-top:1px solid var(--line)}.svc-step{display:grid;grid-template-columns:3.4rem 1fr;gap:1.25rem;padding:clamp(1.5rem,3vw,2.3rem) 0;border-bottom:1px solid var(--line)}.svc-step>span{padding-top:.15rem;font-size:.62rem;letter-spacing:.1em;color:var(--muted)}.svc-step h3{font-size:clamp(1.8rem,2.7vw,3.2rem);line-height:.92;letter-spacing:-.05em}.svc-step p{margin-top:.65rem;max-width:38rem;color:var(--muted);line-height:1.45}
.svc-cta{background:var(--svc-accent);color:#11110f;border-top:1px solid rgba(17,17,15,.24)}.svc-cta>a{display:block;padding:clamp(4rem,8vw,7rem) 0}.svc-cta .container{position:relative}.svc-cta h2{margin-top:1rem;max-width:11ch;font-size:clamp(4rem,8vw,8.5rem);line-height:.78;letter-spacing:-.07em}.svc-cta .container>span{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:clamp(3rem,7vw,7rem);transition:transform .28s var(--ease)}.svc-cta a:hover .container>span{transform:translate(.4rem,-60%) rotate(8deg)}

@media(max-width:1000px){.svc-hero-grid{grid-template-columns:1fr;min-height:auto}.svc-hero-visual{min-height:25rem}.svc-viz{width:min(100%,29rem)}.svc-problem-grid{grid-template-columns:1fr}.svc-problem-card{min-height:14rem}.svc-section-head--split{grid-template-columns:1fr}.svc-method-grid{grid-template-columns:1fr}.svc-method-grid>aside{position:static}.svc-cta .container>span{right:var(--gutter)}}
@media(max-width:700px){.svc-hero-grid{padding-top:3rem}.svc-hero h1{font-size:clamp(3.7rem,16vw,6.3rem)}.svc-hero-visual{min-height:21rem}.svc-viz{width:min(88vw,24rem)}.svc-capability-grid{grid-template-columns:1fr}.svc-capability{min-height:13rem}.svc-section-head .h2{font-size:clamp(3rem,12vw,5.2rem)}.svc-cta h2{font-size:clamp(3.6rem,15vw,6.2rem)}.svc-cta .container>span{position:static;display:block;margin-top:1.2rem;transform:none}.svc-cta a:hover .container>span{transform:translate(.25rem,-.15rem)}}
@media(prefers-reduced-motion:reduce){.ai-line,.vapt-radar>i,.ads-grid .is-win,.seo-ray{animation:none!important}.svc-viz,.brand-tile,.content-frame,.social-card,.web-device,.app-phone{transition:none!important}}
/* ==========================================================
   Maline Services v3 / visual polish + header stability
   ========================================================== */

/* ---------- Header stability ----------
   The previous service pages mixed white logos with light heroes while the
   global header is transparent until scroll. All service pages now start on
   a solid dark hero and use one predictable header state. */
.services-v3 .site-header:not(.is-scrolled){
  background:rgba(13,15,15,.88);
  color:var(--paper);
  border-color:rgba(243,240,233,.1);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.services-v3 .site-header.is-scrolled{
  background:rgba(243,240,233,.94);
  color:var(--ink);
  border-color:var(--line);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.services-v3 .site-header:not(.is-scrolled) .button--ghost{
  border-color:rgba(243,240,233,.52);
  color:var(--paper);
}
.services-v3 .site-header:not(.is-scrolled) .button--ghost:hover{
  background:var(--paper);
  color:var(--ink);
}
.services-v3 .site-header:not(.is-scrolled) .menu-toggle{
  border-color:rgba(243,240,233,.52);
}
.services-v3 .site-header:not(.is-scrolled) .brand img{
  filter:none!important;
}

/* ---------- Hero: more designed, still recognisably Maline ---------- */
.svc-hero{
  isolation:isolate;
  background:#0d0f0f;
  color:var(--paper);
  border-bottom:1px solid rgba(243,240,233,.14);
}
.svc-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 76% 42%,color-mix(in srgb,var(--svc-accent) 24%,transparent),transparent 30%),
    linear-gradient(rgba(243,240,233,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,240,233,.026) 1px,transparent 1px);
  background-size:auto,4.8rem 4.8rem,4.8rem 4.8rem;
}
.svc-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  z-index:4;
  background:linear-gradient(90deg,transparent,var(--svc-accent) 18% 36%,transparent 58%);
  background-size:220% 100%;
  animation:svcHeroSweep 7s linear infinite;
}
@keyframes svcHeroSweep{
  to{background-position:-220% 0}
}
.svc-hero-grid{
  min-height:clamp(42rem,82svh,57rem);
  position:relative;
}
.svc-hero-grid::after{
  content:"";
  position:absolute;
  right:0;
  top:11%;
  bottom:11%;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(243,240,233,.18),transparent);
}
.svc-hero-copy{
  padding-right:clamp(0rem,2vw,2rem);
}
.svc-hero .crumbs{
  color:rgba(243,240,233,.45);
}
.svc-hero .crumbs a{
  color:inherit;
}
.svc-hero .crumbs a:hover{
  color:var(--paper);
}
.svc-hero-index{
  position:relative;
  right:auto;
  top:auto;
  display:inline-flex;
  align-items:center;
  min-height:2rem;
  margin-bottom:1.05rem;
  padding:0 .68rem;
  border:1px solid rgba(243,240,233,.2);
  border-radius:999px;
  color:rgba(243,240,233,.48);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.svc-hero .eyebrow{
  color:var(--svc-accent);
}
.svc-hero h1{
  max-width:11.5ch;
  text-wrap:balance;
}
.svc-hero-lede{
  color:rgba(243,240,233,.58);
}
.svc-scope{
  gap:.5rem;
}
.svc-scope span{
  border-color:rgba(243,240,233,.18);
  background:rgba(243,240,233,.025);
  color:rgba(243,240,233,.64);
  backdrop-filter:blur(7px);
  transition:background .22s,color .22s,border-color .22s,transform .22s var(--ease);
}
.svc-scope span:hover{
  background:var(--svc-accent);
  border-color:var(--svc-accent);
  color:#11110f;
  transform:translateY(-2px);
}

/* Giant service identifier becomes texture, not another content block. */
.svc-hero-visual::before{
  position:absolute;
  z-index:-1;
  right:-2%;
  bottom:2%;
  font-size:clamp(6rem,13vw,12rem);
  line-height:.72;
  font-weight:900;
  letter-spacing:-.08em;
  color:transparent;
  -webkit-text-stroke:1px rgba(243,240,233,.08);
  text-transform:uppercase;
  pointer-events:none;
}
.svc-branding .svc-hero-visual::before{content:"BRAND"}
.svc-ai .svc-hero-visual::before{content:"AI"}
.svc-content .svc-hero-visual::before{content:"MAKE"}
.svc-social .svc-hero-visual::before{content:"SOCIAL"}
.svc-ads .svc-hero-visual::before{content:"GROW"}
.svc-seo .svc-hero-visual::before{content:"FIND"}
.svc-web .svc-hero-visual::before{content:"WEB"}
.svc-app .svc-hero-visual::before{content:"APP"}
.svc-vapt .svc-hero-visual::before{content:"SECURE"}

.svc-hero-visual{
  position:relative;
}
.svc-hero-visual::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  right:0;
  top:16%;
  border-radius:50%;
  background:var(--svc-accent);
  box-shadow:0 0 0 .55rem color-mix(in srgb,var(--svc-accent) 15%,transparent);
  animation:svcSignalDot 2.8s ease-in-out infinite;
}
@keyframes svcSignalDot{
  50%{transform:translateY(9rem);opacity:.45}
}
.svc-viz{
  width:min(100%,35.5rem);
  border-color:rgba(243,240,233,.18);
  filter:drop-shadow(0 2rem 3rem rgba(0,0,0,.22));
}
.svc-viz::before{
  content:"LIVE / MALINE";
  position:absolute;
  z-index:12;
  left:.65rem;
  top:.65rem;
  padding:.35rem .45rem;
  background:rgba(13,15,15,.72);
  border:1px solid rgba(243,240,233,.17);
  color:rgba(243,240,233,.55);
  font:600 .48rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  pointer-events:none;
}

/* Adapt light visuals so they read cleanly on the dark hero. */
.svc-viz-ai,
.svc-viz-seo{
  border-color:rgba(243,240,233,.17);
  background-color:rgba(243,240,233,.02);
}
.ai-node:not(.ai-node--core),
.seo-query,
.seo-node:not(.seo-node--4){
  box-shadow:0 1rem 2rem rgba(0,0,0,.16);
}
.svc-viz-content{
  border-bottom-color:rgba(243,240,233,.32);
}
.svc-viz-web .web-browser,
.svc-viz-app .app-phone{
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.22);
}

/* ---------- Section rhythm ----------
   More visual hierarchy without adding extra content sections. */
.svc-problem,
.svc-method{
  position:relative;
  overflow:hidden;
}
.svc-problem::before,
.svc-method::before{
  content:"";
  position:absolute;
  left:var(--gutter);
  top:0;
  width:clamp(3rem,7vw,6rem);
  height:.28rem;
  background:var(--svc-accent);
}
.svc-problem::after{
  content:"";
  position:absolute;
  width:24rem;
  height:24rem;
  right:-12rem;
  top:12%;
  border:1px solid color-mix(in srgb,var(--svc-accent) 22%,transparent);
  border-radius:50%;
  pointer-events:none;
}
.svc-section-head{
  position:relative;
}
.svc-section-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:calc(clamp(2.5rem,5vw,4.5rem) * -.48);
  width:2.25rem;
  height:1px;
  background:var(--svc-accent);
}
.svc-problem-grid{
  border-color:rgba(17,17,15,.16);
}
.svc-problem-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:rgba(255,255,255,.12);
}
.svc-problem-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--svc-soft),rgba(255,255,255,.2));
  transform:translateY(102%);
  transition:transform .36s var(--ease);
}
.svc-problem-card::after{
  position:absolute;
  right:.8rem;
  top:.55rem;
  font-size:clamp(4.7rem,8vw,8rem);
  line-height:1;
  font-weight:800;
  letter-spacing:-.08em;
  color:rgba(17,17,15,.035);
  pointer-events:none;
}
.svc-problem-card:nth-child(1)::after{content:"01"}
.svc-problem-card:nth-child(2)::after{content:"02"}
.svc-problem-card:nth-child(3)::after{content:"03"}
.svc-problem-card:hover{
  background:transparent;
  transform:translateY(-4px);
}
.svc-problem-card:hover::before{
  transform:translateY(0);
}
.svc-problem-card h3{
  position:relative;
  z-index:2;
}
.svc-problem-card h3::after{
  content:"";
  display:block;
  width:1.5rem;
  height:.2rem;
  margin-top:.8rem;
  background:var(--svc-accent);
  transition:width .3s var(--ease);
}
.svc-problem-card:hover h3::after{
  width:4rem;
}

/* ---------- Dark capability section ---------- */
.svc-build{
  position:relative;
  overflow:hidden;
  background:#101212!important;
}
.svc-build::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(243,240,233,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,240,233,.025) 1px,transparent 1px),
    radial-gradient(circle at 90% 15%,color-mix(in srgb,var(--svc-accent) 18%,transparent),transparent 24%);
  background-size:5rem 5rem,5rem 5rem,auto;
}
.svc-build .container{
  position:relative;
  z-index:1;
}
.svc-capability-grid{
  border-color:rgba(243,240,233,.15);
}
.svc-capability{
  min-height:17rem;
  padding:1.45rem;
}
.svc-capability::before{
  background:var(--svc-accent);
  transform:scaleY(.018);
  transform-origin:bottom;
}
.svc-capability::after{
  position:absolute;
  right:1rem;
  bottom:.55rem;
  font:700 clamp(3.6rem,7vw,7rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:rgba(243,240,233,.035);
  letter-spacing:-.08em;
  transition:color .3s,transform .3s var(--ease);
}
.svc-capability:nth-child(1)::after{content:"01"}
.svc-capability:nth-child(2)::after{content:"02"}
.svc-capability:nth-child(3)::after{content:"03"}
.svc-capability:nth-child(4)::after{content:"04"}

.svc-capability:hover::after{
  color:rgba(17,17,15,.08);
  transform:translateY(-.35rem);
}
.svc-capability h3{
  max-width:13ch;
}
.svc-capability p{
  position:relative;
  z-index:2;
}

/* ---------- Method / operating model ---------- */
.svc-method-grid{
  position:relative;
}
.svc-method-grid::after{
  content:"";
  position:absolute;
  left:calc(.72 / 2 * 100%);
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--line) 10% 90%,transparent);
  opacity:.45;
  pointer-events:none;
}
.svc-steps{
  position:relative;
}
.svc-step{
  position:relative;
  min-height:9rem;
  padding-left:.2rem;
  transition:padding-left .28s var(--ease),background .28s;
}
.svc-step::before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  bottom:0;
  width:.22rem;
  background:var(--svc-accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .28s var(--ease);
}
.svc-step:hover{
  padding-left:1rem;
  background:linear-gradient(90deg,var(--svc-soft),transparent 70%);
}
.svc-step:hover::before{
  transform:scaleY(1);
}
.svc-step>span{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  transition:background .25s,color .25s,border-color .25s;
}
.svc-step:hover>span{
  background:var(--svc-accent);
  border-color:var(--svc-accent);
  color:#11110f;
}

/* ---------- CTA ---------- */
.svc-cta{
  position:relative;
  overflow:hidden;
}
.svc-cta::before{
  content:"MALINE / NEXT MOVE";
  position:absolute;
  right:-1vw;
  bottom:-.14em;
  font-size:clamp(5rem,13vw,12rem);
  line-height:.72;
  font-weight:900;
  letter-spacing:-.08em;
  color:rgba(17,17,15,.06);
  white-space:nowrap;
  pointer-events:none;
}
.svc-cta>a{
  position:relative;
  z-index:2;
}

/* ---------- Service-specific micro-character ---------- */
.svc-branding .svc-problem-card:nth-child(2){transform:translateY(1rem)}
.svc-branding .svc-problem-card:nth-child(2):hover{transform:translateY(.6rem)}
.svc-content .svc-problem-grid,
.svc-social .svc-problem-grid{transform:rotate(-.15deg)}
.svc-ads .svc-capability:nth-child(1),
.svc-seo .svc-capability:nth-child(1),
.svc-vapt .svc-capability:nth-child(1){grid-column:span 2}
.svc-ai .svc-capability:nth-child(4),
.svc-web .svc-capability:nth-child(4),
.svc-app .svc-capability:nth-child(4){background:rgba(243,240,233,.03)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .svc-hero-grid::after{display:none}
  .svc-hero-grid{min-height:auto;padding-top:5rem}
  .svc-hero-visual::after{right:3%}
  .svc-method-grid::after{display:none}
  .svc-ads .svc-capability:nth-child(1),
  .svc-seo .svc-capability:nth-child(1),
  .svc-vapt .svc-capability:nth-child(1){grid-column:auto}
  .svc-branding .svc-problem-card:nth-child(2){transform:none}
}
@media(max-width:700px){
  .services-v3 .site-header:not(.is-scrolled){
    background:rgba(13,15,15,.94);
  }
  .svc-hero-grid{
    padding-top:4.25rem;
  }
  .svc-hero-copy{
    padding-right:0;
  }
  .svc-hero h1{
    font-size:clamp(3.65rem,16vw,6.1rem);
  }
  .svc-hero-index{
    margin-bottom:.75rem;
  }
  .svc-hero-visual::before{
    right:0;
    font-size:clamp(4.5rem,23vw,8rem);
  }
  .svc-hero-visual::after{
    display:none;
  }
  .svc-problem::after{
    display:none;
  }
  .svc-capability{
    min-height:14rem;
  }
}
@media(prefers-reduced-motion:reduce){
  .svc-hero::after,
  .svc-hero-visual::after{
    animation:none!important;
  }
}