@font-face{font-family:Modam;src:url("/assets/fonts/ModamFaNumWeb-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Modam;src:url("/assets/fonts/ModamFaNumWeb-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:BelfastGrotesk;src:url("/assets/fonts/BelfastGrotesk-Light.woff") format("woff");font-weight:300;font-display:swap}
:root{--bg:#050505;--line:rgba(255,255,255,.12);--muted:rgba(255,255,255,.48);--blue:83,113,255}
*{box-sizing:border-box}html{background:#000;scroll-behavior:smooth}body{margin:0;background:#000;color:#fff;font-family:Modam,system-ui,sans-serif;overflow-x:hidden}
.detail-page{background:var(--bg);overflow:hidden}.detail-shell{width:min(1180px,calc(100% - 48px));margin:auto}.detail-kicker{font:300 10px BelfastGrotesk,sans-serif;letter-spacing:.17em;color:rgba(255,255,255,.34);direction:ltr;text-align:right}

/* HERO */
.detail-hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:150px 0 90px;border-bottom:1px solid var(--line);isolation:isolate}
.detail-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:170px minmax(0,1fr) 110px;gap:55px;align-items:start}
.detail-hero__copy{max-width:760px}.detail-eyebrow{margin:0 0 18px;font:300 9px BelfastGrotesk,sans-serif;letter-spacing:.18em;color:rgba(255,255,255,.34);direction:ltr;text-align:right}
.detail-hero h1{margin:0;font-size:clamp(45px,6vw,82px);line-height:1.25;font-weight:900;letter-spacing:-.035em}.detail-lead{max-width:690px;margin:30px 0 0;font-size:13px;line-height:2.15;color:rgba(255,255,255,.52)}
.detail-hero__index{align-self:end;text-align:left;direction:ltr}.detail-hero__index b{display:block;font:300 46px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.12)}.detail-hero__index span{font:300 8px BelfastGrotesk,sans-serif;letter-spacing:.15em;color:rgba(255,255,255,.25)}
.detail-hero__fx{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}.web-orb{position:absolute;width:38vw;height:38vw;left:-10vw;top:26%;border-radius:50%;background:radial-gradient(circle,rgba(var(--blue),.18),rgba(56,69,190,.06) 38%,transparent 70%);filter:blur(25px)}
.web-beam{position:absolute;display:block;width:75vw;height:9vw;left:-28vw;filter:blur(28px)}.web-beam--a{top:42%;transform:rotate(-15deg);background:linear-gradient(90deg,transparent,rgba(50,94,255,.2),rgba(127,76,255,.07),transparent)}.web-beam--b{top:62%;transform:rotate(12deg);background:linear-gradient(90deg,transparent,rgba(35,126,255,.08),rgba(255,255,255,.035),transparent)}
.web-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent 68%)}.web-scan{position:absolute;left:0;top:-20%;width:1px;height:140%;background:linear-gradient(transparent,rgba(120,153,255,.65),transparent);box-shadow:0 0 38px rgba(83,113,255,.38)}

/* OVERVIEW */
.detail-overview{padding:120px 0;border-bottom:1px solid var(--line)}.overview-grid{display:grid;grid-template-columns:170px minmax(0,1fr) 260px;gap:55px;align-items:start}.detail-overview h2,.process-head h2,.connected h2,.detail-cta h2{margin:0 0 20px;font-size:clamp(29px,3.7vw,49px);line-height:1.45}.detail-overview p,.process-head p,.connected p,.detail-cta p{margin:0;max-width:650px;font-size:12px;line-height:2.1;color:var(--muted)}
.overview-stats{border-top:1px solid var(--line)}.overview-stats div{padding:22px 0;border-bottom:1px solid var(--line)}.overview-stats b{display:block;font:300 26px BelfastGrotesk,sans-serif;direction:ltr}.overview-stats span{display:block;margin-top:7px;font-size:9px;color:rgba(255,255,255,.32)}

/* PINNED CAPABILITIES */
.capabilities{padding:120px 0 150px}.capabilities__intro{display:flex;justify-content:space-between;align-items:center;padding-bottom:45px;border-bottom:1px solid var(--line)}.capabilities__intro p{margin:0;font-size:10px;color:rgba(255,255,255,.3)}
.cap-stage{display:grid;grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr);gap:70px;position:relative}.cap-stage__sticky{position:sticky;top:110px;height:calc(100vh - 140px);min-height:560px;display:flex;flex-direction:column;justify-content:space-between;padding:45px 0 30px}
.cap-visual{position:relative;width:min(34vw,400px);aspect-ratio:1;margin:auto;display:grid;place-items:center}.cap-visual__ring{position:absolute;border:1px solid rgba(114,143,255,.2);border-radius:50%}.cap-visual__ring--1{inset:7%}.cap-visual__ring--2{inset:23%;border-style:dashed}.cap-visual__core{width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.82),rgba(83,113,255,.35) 20%,rgba(83,113,255,.08) 48%,transparent 72%);box-shadow:0 0 80px rgba(83,113,255,.25)}.cap-visual__line{position:absolute;width:130%;height:1px;background:linear-gradient(90deg,transparent,rgba(113,143,255,.48),transparent);transform:rotate(-24deg)}.cap-visual__num{position:absolute;font:300 clamp(70px,10vw,140px) BelfastGrotesk,sans-serif;color:rgba(255,255,255,.055);direction:ltr}
.cap-nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-right:1px solid var(--line)}.cap-nav button{appearance:none;border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;color:rgba(255,255,255,.3);font-family:Modam;min-height:58px;padding:10px;text-align:right;font-size:9px;cursor:pointer;transition:background .4s,color .4s}.cap-nav button span{display:block;font:300 8px BelfastGrotesk,sans-serif;margin-bottom:4px}.cap-nav button.is-active{background:rgba(255,255,255,.055);color:#fff}
.cap-stage__content{position:relative}.cap-panel{min-height:92vh;padding:110px 0 100px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.cap-panel__meta{display:flex;align-items:center;gap:18px;margin-bottom:25px;direction:ltr}.cap-panel__meta span{font:300 11px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.32)}.cap-panel__meta small{font:300 8px BelfastGrotesk,sans-serif;letter-spacing:.15em;color:rgba(100,132,255,.6)}.cap-panel h3{margin:0 0 34px;font-size:clamp(27px,3.2vw,44px);line-height:1.5}.cap-panel ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-right:1px solid var(--line)}.cap-panel li{min-height:54px;display:flex;align-items:center;padding:13px 16px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;line-height:1.8;color:rgba(255,255,255,.52);transition:background .35s,color .35s}.cap-panel li:hover{background:rgba(255,255,255,.035);color:rgba(255,255,255,.86)}

/* PROCESS */
.detail-process{position:relative;padding:125px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.process-head{display:grid;grid-template-columns:170px minmax(0,1fr);gap:55px}.process-track{display:flex;align-items:stretch;margin-top:85px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-track>div{flex:1;padding:25px 18px;min-width:0}.process-track b{display:block;font:300 9px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.25)}.process-track span{display:block;margin:13px 0 7px;font:300 11px BelfastGrotesk,sans-serif;letter-spacing:.13em}.process-track small{font-family:Modam;font-size:9px;color:rgba(255,255,255,.35)}.process-track i{align-self:center;font-style:normal;color:rgba(255,255,255,.15)}.process-light{position:absolute;width:65vw;height:25vw;right:-25vw;bottom:-12vw;border-radius:50%;background:radial-gradient(circle,rgba(66,104,255,.12),transparent 68%);filter:blur(40px)}

/* CONNECTED + CTA */
.connected{padding:115px 0;border-bottom:1px solid var(--line)}.connected-grid,.detail-cta__grid{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:55px;align-items:center}.connected a,.detail-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:#fff;color:#050505;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap;transition:background-color .65s cubic-bezier(.22,.61,.36,1)}.connected a:hover,.detail-cta a:hover{background:#f7f7f7}.detail-cta{position:relative;padding:115px 0 125px;overflow:hidden}

@media(max-width:900px){
.detail-shell{width:min(1180px,calc(100% - 36px))}.detail-hero__grid{grid-template-columns:1fr;gap:22px}.detail-hero__index{display:none}.overview-grid,.process-head,.connected-grid,.detail-cta__grid{grid-template-columns:1fr;gap:28px}.overview-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:0}.overview-stats div{border-top:1px solid var(--line)}
.cap-stage{grid-template-columns:1fr;gap:0}.cap-stage__sticky{position:relative;top:auto;height:auto;min-height:0;padding:40px 0}.cap-visual{width:min(70vw,360px)}.cap-nav{position:sticky;top:88px;z-index:5;background:rgba(5,5,5,.88);backdrop-filter:blur(12px)}.cap-panel{min-height:auto;padding:80px 0}.process-track{overflow-x:auto;scrollbar-width:none}.process-track>div{min-width:180px}.connected a,.detail-cta a{width:max-content}
}
@media(max-width:600px){
.detail-shell{width:calc(100% - 24px)}.detail-hero{min-height:88svh;padding:125px 0 70px}.detail-hero h1{font-size:39px}.detail-lead{font-size:11px}.web-grid{background-size:44px 44px}.detail-overview{padding:82px 0}.capabilities{padding:82px 0 90px}.capabilities__intro{padding-bottom:28px}.capabilities__intro p{display:none}.cap-visual{width:78vw}.cap-nav{grid-template-columns:repeat(3,1fr);top:76px}.cap-nav button{font-size:0;min-height:44px;text-align:center}.cap-nav button span{font-size:8px;margin:0}.cap-panel{padding:70px 0}.cap-panel h3{font-size:27px}.cap-panel ul{grid-template-columns:1fr}.cap-panel li{min-height:48px}.detail-process,.connected,.detail-cta{padding:85px 0}.process-track{margin-top:55px}.connected a,.detail-cta a{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.web-scan{display:none}}


/* ==================================================
   PACKAGES FOOTER
================================================== */

.packages-footer {
  position: relative;
  background: #030303;
  color: #fff;
  padding: 0 0 26px;
}

.packages-footer__inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.packages-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  direction: rtl;
  padding: 52px 0 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.packages-footer__column {
  min-width: 0;
  padding: 0 48px;
  text-align: right;
}

.packages-footer__column:first-child {
  padding-right: 8px;
}

.packages-footer__column:last-child {
  padding-left: 8px;
}

.packages-footer__column + .packages-footer__column {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.packages-footer__title {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.packages-footer__column a,
.packages-footer__column span {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 13px;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
}

.packages-footer__column a {
  transition: color 180ms ease;
}

.packages-footer__column a:hover {
  color: #fff;
}

.packages-footer__contact-label {
  position: relative;
  padding-bottom: 11px;
  margin-bottom: 17px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.packages-footer__contact-label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 116px;
  max-width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.packages-footer__phone {
  direction: ltr;
  text-align: right;
  font-family: "BelfastGrotesk", sans-serif;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.76) !important;
}

.packages-footer__phone:last-child {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 0 !important;
}

.packages-footer__phone:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 116px;
  max-width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.packages-footer__bottom {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.packages-footer__brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 94px;
  text-decoration: none;
}

.packages-footer__brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
}

.packages-footer__copyright {
  font-family: "BelfastGrotesk", sans-serif;
  font-size: 9px;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Tablet */
@media (max-width: 900px) {
  .packages-footer__grid {
    padding: 44px 0 46px;
  }

  .packages-footer__column {
    padding: 0 30px;
  }

  .packages-footer__column:first-child {
    padding-right: 4px;
  }

  .packages-footer__column:last-child {
    padding-left: 4px;
  }

  .packages-footer__title {
    margin-bottom: 20px;
    font-size: 13px;
  }

  .packages-footer__column a,
  .packages-footer__column span {
    font-size: 11px;
  }
}

/* Mobile portrait */
@media (max-width: 600px) {
  .packages-footer {
    padding-bottom: 18px;
  }

  .packages-footer__inner {
    width: calc(100% - 28px);
  }

  .packages-footer__grid {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .packages-footer__column,
  .packages-footer__column:first-child,
  .packages-footer__column:last-child {
    padding: 28px 0;
    border-right: 0;
  }

  .packages-footer__column + .packages-footer__column {
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .packages-footer__title {
    margin-bottom: 16px;
    font-size: 12px;
  }

  .packages-footer__column a,
  .packages-footer__column span {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .packages-footer__phone {
    font-size: 10px !important;
  }

  .packages-footer__bottom {
    min-height: 62px;
    gap: 16px;
  }

  .packages-footer__brand {
    width: 74px;
  }

  .packages-footer__copyright {
    font-size: 7px;
    letter-spacing: 0.18em;
  }
}

/* Phone landscape / compact viewport */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 950px) {
  .packages-footer__inner {
    width: calc(100% - 36px);
  }

  .packages-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 28px 0 30px;
  }

  .packages-footer__column,
  .packages-footer__column:first-child,
  .packages-footer__column:last-child {
    padding: 0 22px;
    border-top: 0;
  }

  .packages-footer__column:first-child {
    padding-right: 2px;
  }

  .packages-footer__column:last-child {
    padding-left: 2px;
  }

  .packages-footer__column + .packages-footer__column {
    border-top: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .packages-footer__title {
    margin-bottom: 14px;
    font-size: 11px;
  }

  .packages-footer__column a,
  .packages-footer__column span {
    margin-bottom: 7px;
    font-size: 9px;
  }

  .packages-footer__phone {
    font-size: 9px !important;
  }

  .packages-footer__bottom {
    min-height: 56px;
  }

  .packages-footer__brand {
    width: 68px;
  }

  .packages-footer__copyright {
    font-size: 7px;
  }
}


/* ==================================================
   PACKAGES FOOTER — FINAL CONTENT + SERVICE BULLET HOVER
================================================== */

.packages-footer__column--services .packages-footer__service {
  position: relative;
  width: 100%;
  padding-right: 15px;
  cursor: default;
  transition: color 180ms ease;
}

.packages-footer__column--services .packages-footer__service::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.9em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  transform: translateY(-50%);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.packages-footer__column--services .packages-footer__service:hover {
  color: rgba(255, 255, 255, 0.94);
}

.packages-footer__column--services .packages-footer__service:hover::before {
  background: #fff;
  transform: translateY(-50%) scale(1.18);
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.7),
    0 0 11px rgba(255, 255, 255, 0.28);
}

.packages-footer__column--contact .packages-footer__email {
  direction: ltr;
  text-align: right;
  font-family: "BelfastGrotesk", sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.68);
}

.packages-footer__brand {
  width: 70px;
}

.packages-footer__brand img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.packages-footer__bottom {
  flex-direction: row-reverse;
}

@media (max-width: 600px) {
  .packages-footer__brand {
    width: 56px;
  }

  .packages-footer__column--services .packages-footer__service {
    padding-right: 13px;
  }

  .packages-footer__column--services .packages-footer__service::before {
    width: 3px;
    height: 3px;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 950px) {
  .packages-footer__brand {
    width: 52px;
  }
}




/* Footer QA matching Packages */
.packages-footer__column {
  overflow-wrap: anywhere;
}

.packages-footer a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.packages-footer {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .packages-footer {
    overflow-x: hidden;
  }
}

html.about-menu-open,
html.about-menu-open body {
  overflow: hidden;
}




/* =========================================================
   SERVICES V2 — SCROLL MOTION PASS
========================================================= */

.services-hero__inner,
.services-index__head,
.service-row,
.services-system__head,
.services-flow,
.services-cta__grid{
  will-change:transform,opacity;
}

.services-hero__visual,
.sv-light,
.services-backdrop i,
.services-system__light{
  will-change:transform,opacity;
}

.service-row{
  --row-progress:0;
}

.service-row::before{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.42);
  transform:scaleX(var(--row-progress));
  transform-origin:right center;
  opacity:.42;
  pointer-events:none;
}

.service-row__number,
.service-row__title,
.service-row p,
.service-row__mark{
  will-change:transform,opacity;
}

.services-system{
  isolation:isolate;
}

.services-system::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 22%,
      rgba(255,255,255,.018) 48%,
      transparent 72%);
  transform:translateX(38%);
  opacity:.75;
  will-change:transform;
}

.services-flow span,
.services-flow i{
  display:inline-block;
  will-change:transform,opacity;
}

.services-cta{
  position:relative;
  overflow:hidden;
}

.services-cta::before{
  content:"";
  position:absolute;
  width:55vw;
  height:18vw;
  left:-18vw;
  top:20%;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(49,84,255,.08),rgba(255,95,24,.08),transparent);
  filter:blur(38px);
  pointer-events:none;
  transform:rotate(-10deg);
  will-change:transform;
}

@media(max-width:600px){
  .service-row::before{opacity:.22}
  .services-cta::before{width:110vw;height:35vw;left:-55vw}
}

@media(prefers-reduced-motion:reduce){
  .service-row::before{display:none}
  .services-system::before,
  .services-cta::before{transform:none!important}
}


/* V2 — unique pinned visual for each capability */
.cap-visual{overflow:visible}
.cap-visual__scene{position:absolute;inset:-12%;z-index:-1;pointer-events:none}
.cap-scene{position:absolute;inset:0;display:block;opacity:0;transform:scale(.94);transition:opacity .55s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.cap-scene.is-active{opacity:1;transform:scale(1)}
.cap-scene b{position:absolute;display:block;box-sizing:border-box}

/* 01 Website */
.browser-frame{width:70%;height:54%;left:15%;top:23%;border:1px solid rgba(105,137,255,.22);border-radius:22px;transform:rotate(-7deg);box-shadow:0 0 70px rgba(66,102,255,.07)}
.browser-line{height:1px;width:43%;left:28%;background:linear-gradient(90deg,transparent,rgba(133,157,255,.65),transparent)}
.browser-line--1{top:43%;transform:rotate(-7deg)}.browser-line--2{top:57%;width:31%;left:34%;transform:rotate(-7deg)}
.browser-glow{width:48%;aspect-ratio:1;left:7%;top:19%;border-radius:50%;background:radial-gradient(circle,rgba(67,105,255,.18),transparent 68%);filter:blur(18px)}

/* 02 UI UX */
.ux-orbit{border:1px solid rgba(97,128,255,.22);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.ux-orbit--1{width:64%;height:64%;transform:translate(-50%,-50%) rotate(23deg) scaleY(.62)}
.ux-orbit--2{width:45%;height:45%;transform:translate(-50%,-50%) rotate(-34deg) scaleX(.58)}
.ux-node{width:9px;height:9px;border-radius:50%;background:#8da6ff;box-shadow:0 0 22px rgba(105,137,255,.9)}
.ux-node--1{left:29%;top:35%}.ux-node--2{right:25%;top:48%}.ux-node--3{left:46%;bottom:24%}

/* 03 Engineering */
.code-grid{inset:12%;background-image:linear-gradient(rgba(109,139,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(109,139,255,.08) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle,#000 22%,rgba(0,0,0,.8) 48%,transparent 72%)}
.code-beam{width:70%;height:1px;left:15%;top:50%;background:linear-gradient(90deg,transparent,rgba(123,150,255,.75),transparent)}
.code-beam--1{transform:rotate(38deg)}.code-beam--2{transform:rotate(-38deg)}
.code-core{width:20%;aspect-ratio:1;left:40%;top:40%;border-radius:18px;border:1px solid rgba(141,164,255,.38);transform:rotate(45deg);box-shadow:0 0 55px rgba(76,112,255,.17)}

/* 04 Performance */
.perf-arc{left:50%;top:52%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(112,145,255,.25);border-left-color:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.04)}
.perf-arc--1{width:66%;height:66%;transform:translate(-50%,-50%) rotate(42deg)}
.perf-arc--2{width:48%;height:48%;transform:translate(-50%,-50%) rotate(78deg)}
.perf-line{width:35%;height:1px;left:50%;top:51%;transform-origin:left center;transform:rotate(-28deg);background:linear-gradient(90deg,rgba(145,167,255,.8),transparent)}
.perf-dot{width:10px;height:10px;border-radius:50%;left:48.8%;top:49.8%;background:#b6c6ff;box-shadow:0 0 25px rgba(113,145,255,.9)}

/* 05 Presence */
.presence-halo{width:58%;aspect-ratio:1;left:21%;top:20%;border-radius:50%;background:radial-gradient(circle,rgba(92,124,255,.13),transparent 62%);filter:blur(8px)}
.presence-ring{left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(116,146,255,.18)}
.presence-ring--1{width:58%;height:58%}.presence-ring--2{width:36%;height:36%;border-style:dashed}
.presence-scan{width:1px;height:68%;left:50%;top:16%;background:linear-gradient(transparent,rgba(150,170,255,.8),transparent);box-shadow:0 0 22px rgba(90,125,255,.5)}

/* 06 AI */
.ai-core{width:18%;aspect-ratio:1;left:41%;top:41%;border-radius:50%;background:radial-gradient(circle,#fff 0 4%,rgba(132,155,255,.75) 12%,rgba(84,111,255,.22) 38%,transparent 72%);box-shadow:0 0 65px rgba(91,122,255,.28)}
.ai-ring{left:50%;top:50%;border-radius:50%;border:1px solid rgba(127,153,255,.22)}
.ai-ring--1{width:55%;height:55%;transform:translate(-50%,-50%) rotate(28deg) scaleY(.62)}
.ai-ring--2{width:68%;height:68%;transform:translate(-50%,-50%) rotate(-38deg) scaleX(.6)}
.ai-ray{width:63%;height:1px;left:18.5%;top:50%;background:linear-gradient(90deg,transparent,rgba(130,154,255,.5),transparent)}
.ai-ray--1{transform:rotate(33deg)}.ai-ray--2{transform:rotate(-33deg)}

@media(max-width:900px){.cap-visual__scene{inset:-7%}}
@media(prefers-reduced-motion:reduce){.cap-scene{transition:none}}


/* =========================================================
   WEB DETAIL V3 — VISUAL BELONGS TO EACH CAPABILITY
========================================================= */

.cap-stage{
  grid-template-columns: 220px minmax(0,1fr);
  gap:54px;
}

.cap-stage__sticky{
  position:sticky;
  top:110px;
  height:max-content;
  min-height:0;
  padding:46px 0 0;
  align-self:start;
}

.cap-stage__sticky > .cap-visual{
  display:none !important;
}

.cap-nav{
  grid-template-columns:1fr;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
}

.cap-nav button{
  min-height:64px;
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:right;
  padding:12px 13px;
  font-size:9px;
}

.cap-stage__content{
  min-width:0;
}

.cap-panel{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:54px;
  align-items:center;
  min-height:92vh;
  padding:95px 0;
}

.cap-panel__copy{
  min-width:0;
}

.cap-panel__visual{
  position:relative;
  min-height:520px;
  display:grid;
  place-items:center;
  overflow:visible;
}

.cap-panel__visual .cap-visual{
  position:relative;
  width:min(31vw,390px);
  aspect-ratio:1;
  margin:auto;
  display:grid;
  place-items:center;
  overflow:visible;
}

.cap-panel__visual .cap-scene{
  opacity:1;
  transform:scale(1);
}

.cap-panel__visual .cap-visual__num{
  color:rgba(255,255,255,.045);
}

.cap-panel__visual::before{
  content:"";
  position:absolute;
  width:85%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(77,111,255,.08),transparent 68%);
  filter:blur(24px);
  pointer-events:none;
}

@media(max-width:900px){
  .cap-stage{grid-template-columns:1fr;gap:0}
  .cap-stage__sticky{
    position:sticky;
    top:88px;
    z-index:8;
    padding:0;
    background:rgba(5,5,5,.88);
    backdrop-filter:blur(12px);
  }
  .cap-nav{
    grid-template-columns:repeat(6,1fr);
    border-right:0;
  }
  .cap-nav button{
    min-height:48px;
    text-align:center;
    font-size:0;
    padding:8px 4px;
  }
  .cap-nav button span{margin:0;font-size:8px}
  .cap-panel{
    grid-template-columns:1fr;
    gap:38px;
    min-height:auto;
    padding:78px 0 90px;
  }
  .cap-panel__visual{
    min-height:360px;
    order:2;
  }
  .cap-panel__visual .cap-visual{
    width:min(76vw,360px);
  }
}

@media(max-width:600px){
  .cap-stage__sticky{top:76px}
  .cap-panel{gap:24px;padding:65px 0 78px}
  .cap-panel__visual{min-height:300px}
  .cap-panel__visual .cap-visual{width:min(82vw,320px)}
}


/* =========================================================
   WEB DETAIL V4 — TABLET + MOBILE LANDSCAPE FIX (CAP 02—06)
========================================================= */

/* Tablet landscape / small laptop */
@media (min-width: 701px) and (max-width: 1180px) {
  .detail-shell{
    width:min(1180px,calc(100% - 32px));
  }

  .cap-stage{
    grid-template-columns:170px minmax(0,1fr);
    gap:30px;
  }

  .cap-stage__sticky{
    top:96px;
    padding-top:28px;
  }

  .cap-nav button{
    min-height:54px;
    padding:9px 10px;
    font-size:8px;
    line-height:1.55;
  }

  .cap-panel{
    grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr);
    gap:26px;
    min-height:82vh;
    padding:70px 0;
  }

  .cap-panel h3{
    font-size:clamp(24px,3vw,36px);
    margin-bottom:26px;
  }

  .cap-panel ul{
    grid-template-columns:1fr 1fr;
  }

  .cap-panel li{
    min-height:50px;
    padding:11px 12px;
    font-size:9px;
  }

  .cap-panel__visual{
    min-height:380px;
    overflow:hidden;
  }

  .cap-panel__visual .cap-visual{
    width:min(32vw,320px);
  }

  .cap-visual__scene{
    inset:-2%;
  }

  .cap-panel[data-cap="03"] .cap-panel__visual .cap-visual,
  .cap-panel[data-cap="04"] .cap-panel__visual .cap-visual,
  .cap-panel[data-cap="05"] .cap-panel__visual .cap-visual,
  .cap-panel[data-cap="06"] .cap-panel__visual .cap-visual{
    width:min(30vw,300px);
  }
}

/* Mobile landscape — keep text + visual side-by-side, compact and fully visible */
@media (max-width: 900px) and (orientation: landscape) {
  .detail-shell{
    width:calc(100% - 24px);
  }

  .cap-stage{
    grid-template-columns:1fr;
  }

  .cap-stage__sticky{
    position:sticky;
    top:68px;
    padding:0;
    z-index:9;
  }

  .cap-nav{
    grid-template-columns:repeat(6,1fr);
  }

  .cap-nav button{
    min-height:38px;
    padding:5px 3px;
  }

  .cap-panel{
    grid-template-columns:minmax(0,1.18fr) minmax(220px,.82fr);
    gap:20px;
    align-items:center;
    min-height:calc(100svh - 112px);
    padding:42px 0 50px;
  }

  .cap-panel__copy{
    min-width:0;
  }

  .cap-panel__meta{
    margin-bottom:14px;
  }

  .cap-panel h3{
    font-size:clamp(21px,3.1vw,30px);
    margin-bottom:18px;
    line-height:1.35;
  }

  .cap-panel ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cap-panel li{
    min-height:38px;
    padding:8px 10px;
    font-size:8px;
    line-height:1.55;
  }

  .cap-panel__visual{
    min-height:260px;
    overflow:hidden;
  }

  .cap-panel__visual .cap-visual{
    width:min(29vw,250px);
  }

  .cap-visual__scene{
    inset:0;
  }

  .cap-panel[data-cap="02"] .cap-panel__visual .cap-visual,
  .cap-panel[data-cap="03"] .cap-panel__visual .cap-visual,
  .cap-panel[data-cap="04"] .cap-panel__visual .cap-visual,
  .cap-panel[data-cap="05"] .cap-panel__visual .cap-visual,
  .cap-panel[data-cap="06"] .cap-panel__visual .cap-visual{
    width:min(27vw,235px);
  }

  .cap-panel[data-cap="03"] ul,
  .cap-panel[data-cap="04"] ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cap-panel[data-cap="03"] li,
  .cap-panel[data-cap="04"] li{
    min-height:34px;
    font-size:7.5px;
    padding:7px 8px;
  }
}

/* Very short landscape heights (common phones) */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .cap-stage__sticky{top:60px}

  .cap-panel{
    min-height:auto;
    padding:34px 0 40px;
    gap:16px;
  }

  .cap-panel__visual{
    min-height:210px;
  }

  .cap-panel__visual .cap-visual{
    width:min(25vw,205px);
  }

  .cap-panel h3{
    font-size:20px;
    margin-bottom:14px;
  }

  .cap-panel li{
    min-height:32px;
    padding:6px 8px;
    font-size:7px;
  }

  .cap-panel__meta{
    margin-bottom:10px;
  }
}

/* Portrait tablet — avoid oversized visuals and overflow */
@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
  .cap-panel{
    grid-template-columns:1fr;
    gap:24px;
    padding:64px 0 76px;
  }

  .cap-panel__visual{
    min-height:320px;
  }

  .cap-panel__visual .cap-visual{
    width:min(52vw,340px);
  }
}


/* =========================================================
   WEB DETAIL V5 — DESKTOP CENTERING FOR CAPABILITIES 02—06
========================================================= */
@media (min-width: 1181px) {
  .cap-panel[data-cap="02"],
  .cap-panel[data-cap="03"],
  .cap-panel[data-cap="04"],
  .cap-panel[data-cap="05"],
  .cap-panel[data-cap="06"]{
    transform:translateX(118px);
    width:calc(100% - 118px);
  }

  .cap-panel[data-cap="02"] .cap-panel__visual,
  .cap-panel[data-cap="03"] .cap-panel__visual,
  .cap-panel[data-cap="04"] .cap-panel__visual,
  .cap-panel[data-cap="05"] .cap-panel__visual,
  .cap-panel[data-cap="06"] .cap-panel__visual{
    justify-self:center;
  }

  .cap-panel[data-cap="02"] .cap-panel__copy,
  .cap-panel[data-cap="03"] .cap-panel__copy,
  .cap-panel[data-cap="04"] .cap-panel__copy,
  .cap-panel[data-cap="05"] .cap-panel__copy,
  .cap-panel[data-cap="06"] .cap-panel__copy{
    width:100%;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .cap-panel[data-cap="02"],
  .cap-panel[data-cap="03"],
  .cap-panel[data-cap="04"],
  .cap-panel[data-cap="05"],
  .cap-panel[data-cap="06"]{
    transform:translateX(58px);
    width:calc(100% - 58px);
  }
}


/* =========================================================
   SERVICE 02 — SECURITY & NETWORK THEME
========================================================= */
body[data-service-theme="security"]{--blue:61,96,170}

.detail-hero--security .security-field{
  position:absolute;width:42vw;height:42vw;left:-12vw;top:25%;border-radius:50%;
  background:radial-gradient(circle,rgba(42,75,145,.17),rgba(21,43,92,.07) 42%,transparent 70%);
  filter:blur(24px)
}
.security-beam{position:absolute;display:block;width:72vw;height:8vw;left:-26vw;filter:blur(30px)}
.security-beam--a{top:41%;transform:rotate(-16deg);background:linear-gradient(90deg,transparent,rgba(43,85,166,.18),rgba(99,128,182,.05),transparent)}
.security-beam--b{top:63%;transform:rotate(11deg);background:linear-gradient(90deg,transparent,rgba(23,58,125,.12),rgba(255,255,255,.025),transparent)}
.security-grid{position:absolute;inset:0;opacity:.15;background-image:linear-gradient(rgba(116,139,177,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(116,139,177,.038) 1px,transparent 1px);background-size:62px 62px;mask-image:linear-gradient(90deg,#000,transparent 72%)}
.security-scan{position:absolute;left:0;top:-15%;width:1px;height:130%;background:linear-gradient(transparent,rgba(107,144,210,.55),transparent);box-shadow:0 0 30px rgba(54,95,170,.35)}

/* Only two capability groups: make the stage breathe more. */
.cap-stage--security{
  grid-template-columns:220px minmax(0,1fr);
  gap:54px
}
.cap-stage--security .cap-panel{
  min-height:96vh;
}

/* Security visual */
.cap-scene--security,.cap-scene--network{opacity:1;transform:scale(1)}
.sec-shield{
  width:26%;height:32%;left:37%;top:34%;
  border:1px solid rgba(120,151,211,.32);
  clip-path:polygon(50% 0,93% 17%,85% 70%,50% 100%,15% 70%,7% 17%);
  background:linear-gradient(180deg,rgba(70,105,172,.08),rgba(70,105,172,.015));
  box-shadow:0 0 55px rgba(45,78,145,.14)
}
.sec-ring{left:50%;top:50%;border-radius:50%;border:1px solid rgba(91,124,190,.18)}
.sec-ring--1{width:58%;height:58%;transform:translate(-50%,-50%)}
.sec-ring--2{width:75%;height:75%;transform:translate(-50%,-50%);border-style:dashed}
.sec-scan{width:1px;height:68%;left:50%;top:16%;background:linear-gradient(transparent,rgba(138,165,221,.72),transparent);box-shadow:0 0 24px rgba(75,111,184,.42)}
.sec-node{width:8px;height:8px;border-radius:50%;background:#829ed6;box-shadow:0 0 18px rgba(92,126,195,.8)}
.sec-node--1{left:27%;top:39%}.sec-node--2{right:24%;bottom:34%}

/* Network visual */
.net-grid{inset:11%;background-image:linear-gradient(rgba(88,122,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(88,122,184,.08) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle,#000 24%,rgba(0,0,0,.82) 52%,transparent 76%)}
.net-path{height:1px;background:linear-gradient(90deg,transparent,rgba(109,143,203,.65),transparent);transform-origin:left center}
.net-path--1{width:54%;left:20%;top:37%;transform:rotate(24deg)}
.net-path--2{width:60%;left:21%;top:54%;transform:rotate(-18deg)}
.net-path--3{width:42%;left:34%;top:48%;transform:rotate(73deg)}
.net-node{width:10px;height:10px;border-radius:50%;background:#7896cf;box-shadow:0 0 20px rgba(83,119,190,.7)}
.net-node--1{left:25%;top:34%}.net-node--2{right:23%;top:46%}.net-node--3{left:43%;bottom:26%}.net-node--4{left:49%;top:45%;background:#dbe5ff;box-shadow:0 0 32px rgba(122,154,214,.9)}

.process-light--security{background:radial-gradient(circle,rgba(41,77,145,.11),transparent 68%)}

/* Desktop centering: compensate content while keeping nav visible */
@media(min-width:1181px){
  .cap-stage--security .cap-panel{
    transform:translateX(100px);
    width:calc(100% - 100px)
  }
}
@media(min-width:1025px) and (max-width:1180px){
  .cap-stage--security .cap-panel{
    transform:translateX(48px);
    width:calc(100% - 48px)
  }
}

/* Landscape/tablet refinements */
@media(min-width:701px) and (max-width:1180px){
  .cap-stage--security{grid-template-columns:165px minmax(0,1fr);gap:28px}
  .cap-stage--security .cap-panel{grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);gap:24px;min-height:82vh;padding:68px 0}
  .cap-stage--security .cap-panel__visual{min-height:360px}
  .cap-stage--security .cap-panel__visual .cap-visual{width:min(30vw,295px)}
}
@media(max-width:900px){
  .cap-stage--security{grid-template-columns:1fr}
  .cap-stage--security .cap-nav{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px) and (orientation:landscape){
  .cap-stage--security .cap-panel{grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:18px;min-height:calc(100svh - 110px)}
  .cap-stage--security .cap-panel__visual{min-height:245px}
  .cap-stage--security .cap-panel__visual .cap-visual{width:min(27vw,230px)}
}


/* =========================================================
   SERVICE 03 — GRAPHIC DESIGN
   Richer visual language + stronger motion
========================================================= */
body[data-service-theme="graphic"]{--blue:123,91,255}
.detail-hero--graphic{isolation:isolate}
.graphic-noise{position:absolute;inset:0;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.graphic-plane{position:absolute;display:block;filter:blur(20px);mix-blend-mode:screen}
.graphic-plane--pink{width:42vw;height:12vw;left:-8vw;top:38%;transform:rotate(-18deg);background:linear-gradient(90deg,transparent,rgba(255,44,141,.20),transparent)}
.graphic-plane--cyan{width:48vw;height:10vw;left:8vw;top:58%;transform:rotate(12deg);background:linear-gradient(90deg,transparent,rgba(31,191,255,.16),transparent)}
.graphic-plane--orange{width:29vw;height:13vw;left:24vw;top:30%;transform:rotate(35deg);background:linear-gradient(90deg,transparent,rgba(255,120,38,.16),transparent)}
.graphic-stroke{position:absolute;width:1px;height:68vh;top:17%;background:linear-gradient(transparent,rgba(255,255,255,.28),transparent)}
.graphic-stroke--1{left:19%;transform:rotate(28deg)}.graphic-stroke--2{left:34%;transform:rotate(-21deg)}
.graphic-type{position:absolute;left:6vw;bottom:4vh;font:300 min(34vw,520px) BelfastGrotesk,sans-serif;color:rgba(255,255,255,.025);line-height:.7;font-style:normal}

.graphic-showcase{overflow:hidden;border-bottom:1px solid var(--line);background:#080808;padding:22px 0}
.graphic-showcase__track{display:flex;width:max-content;align-items:center;gap:30px;font:300 12px BelfastGrotesk,sans-serif;letter-spacing:.18em;color:rgba(255,255,255,.30);white-space:nowrap;will-change:transform}
.graphic-showcase__track i{font-style:normal;color:rgba(255,255,255,.12)}

.cap-stage--graphic{grid-template-columns:210px minmax(0,1fr);gap:48px}
.cap-stage--graphic .cap-panel{min-height:100vh}
.cap-stage--graphic .cap-panel__visual{overflow:visible}
.graphic-visual{position:relative;isolation:isolate}
.g-layer{position:absolute;inset:-10%;display:block}
.g-layer b{position:absolute;display:block}

/* 01 Identity */
.identity-shape--a{width:54%;height:54%;left:7%;top:20%;border-radius:44% 56% 30% 70%/48% 35% 65% 52%;background:linear-gradient(135deg,rgba(255,57,143,.22),rgba(126,71,255,.08));filter:blur(1px)}
.identity-shape--b{width:37%;height:58%;right:7%;top:16%;border:1px solid rgba(65,191,255,.28);transform:rotate(17deg);border-radius:12px}
.identity-type{left:38%;top:31%;font:300 120px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.32);font-style:normal}
.identity-grid{inset:17%;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(circle,#000,transparent 72%)}
.identity-dot{width:12px;height:12px;border-radius:50%;right:24%;bottom:23%;background:#ff699f;box-shadow:0 0 28px rgba(255,80,150,.75)}

/* 02 Print */
.poster{width:35%;height:54%;top:23%;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.32)}
.poster--1{left:13%;transform:rotate(-13deg);background:linear-gradient(155deg,rgba(255,106,40,.18),rgba(255,255,255,.025))}
.poster--2{left:34%;top:17%;transform:rotate(3deg);background:linear-gradient(155deg,rgba(130,76,255,.14),rgba(255,255,255,.02))}
.poster--3{right:10%;transform:rotate(14deg);background:linear-gradient(155deg,rgba(44,180,255,.13),rgba(255,255,255,.02))}
.print-beam{width:88%;height:1px;left:6%;top:49%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:rotate(-18deg)}
.print-circle{width:29%;aspect-ratio:1;right:9%;bottom:8%;border-radius:50%;border:1px solid rgba(255,97,159,.30)}

/* 03 Digital */
.pixel-field{inset:7%;background-image:radial-gradient(circle,rgba(64,199,255,.25) 1px,transparent 1.5px);background-size:22px 22px;mask-image:radial-gradient(circle,#000 20%,transparent 70%)}
.digital-card{border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.025);backdrop-filter:blur(3px)}
.digital-card--1{width:48%;height:27%;left:8%;top:19%;transform:rotate(-9deg)}
.digital-card--2{width:44%;height:35%;right:8%;top:31%;transform:rotate(8deg)}
.digital-card--3{width:33%;height:22%;left:25%;bottom:13%;transform:rotate(4deg)}
.digital-scan{width:1px;height:78%;left:50%;top:11%;background:linear-gradient(transparent,rgba(51,195,255,.75),transparent);box-shadow:0 0 22px rgba(31,190,255,.5)}

/* 04 Creative */
.creative-orb{width:54%;aspect-ratio:1;left:23%;top:22%;border-radius:50%;background:conic-gradient(from 20deg,rgba(255,57,143,.18),rgba(118,70,255,.13),rgba(43,193,255,.14),rgba(255,120,38,.16),rgba(255,57,143,.18));filter:blur(4px)}
.creative-slice{width:64%;height:1px;left:18%;top:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.creative-slice--1{transform:rotate(31deg)}.creative-slice--2{transform:rotate(-36deg)}
.creative-ring{width:68%;height:68%;left:16%;top:16%;border-radius:50%;border:1px dashed rgba(255,255,255,.19)}
.creative-cross{width:18%;height:18%;left:41%;top:41%}
.creative-cross:before,.creative-cross:after{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(255,255,255,.45)}
.creative-cross:after{transform:rotate(90deg)}

.graphic-canvas{position:relative;min-height:92svh;display:flex;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.graphic-canvas__content{position:relative;z-index:2;display:grid;grid-template-columns:170px minmax(0,1fr);gap:55px}
.graphic-canvas__content h2{margin:0 0 22px;font-size:clamp(34px,4.5vw,60px);line-height:1.42}.graphic-canvas__content p{margin:0;max-width:650px;font-size:12px;line-height:2.1;color:var(--muted)}
.graphic-canvas__art{position:absolute;inset:0;pointer-events:none;z-index:-1}
.canvas-word{position:absolute;font:300 clamp(130px,20vw,300px) BelfastGrotesk,sans-serif;color:rgba(255,255,255,.028);font-style:normal;line-height:.8}
.canvas-word--one{left:-3vw;top:12%}.canvas-word--two{right:-3vw;bottom:7%}
.canvas-square{position:absolute;width:25vw;height:25vw;left:12vw;top:34%;border:1px solid rgba(51,194,255,.13);transform:rotate(19deg)}
.canvas-circle{position:absolute;width:28vw;height:28vw;right:10vw;top:22%;border-radius:50%;border:1px solid rgba(255,62,145,.14)}
.canvas-line{position:absolute;width:80vw;height:1px;left:10vw;top:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:rotate(-12deg)}

.process-light--graphic{background:radial-gradient(circle,rgba(126,70,255,.08),rgba(255,69,145,.055) 38%,transparent 70%)}

@media(min-width:1181px){
 .cap-stage--graphic .cap-panel{transform:translateX(92px);width:calc(100% - 92px)}
}
@media(min-width:701px) and (max-width:1180px){
 .cap-stage--graphic{grid-template-columns:165px minmax(0,1fr);gap:28px}
 .cap-stage--graphic .cap-panel{grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);gap:24px;min-height:86vh;padding:68px 0}
 .cap-stage--graphic .cap-panel__visual{min-height:360px}
 .cap-stage--graphic .cap-panel__visual .cap-visual{width:min(31vw,300px)}
}
@media(max-width:900px){
 .cap-stage--graphic{grid-template-columns:1fr}
 .cap-stage--graphic .cap-nav{grid-template-columns:repeat(4,1fr)}
 .graphic-canvas__content{grid-template-columns:1fr;gap:24px}
}
@media(max-width:900px) and (orientation:landscape){
 .cap-stage--graphic .cap-panel{grid-template-columns:minmax(0,1.12fr) minmax(210px,.88fr);gap:18px;min-height:calc(100svh - 108px)}
 .cap-stage--graphic .cap-panel__visual{min-height:235px}
 .cap-stage--graphic .cap-panel__visual .cap-visual{width:min(27vw,225px)}
 .graphic-canvas{min-height:100svh}
}
@media(max-width:600px){
 .graphic-showcase__track{gap:22px;font-size:10px}
 .graphic-canvas{min-height:78svh}
 .graphic-canvas__content h2{font-size:30px}
 .identity-type{font-size:88px}
}


/* =========================================================
   SERVICE 04 — FILM & PHOTOGRAPHY
   Cinematic / camera / edit timeline visual language
========================================================= */
body[data-service-theme="film"]{--blue:148,176,210}

.detail-hero--film{isolation:isolate}
.film-vignette{position:absolute;inset:-8%;background:radial-gradient(circle at 42% 45%,transparent 28%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.66) 100%)}
.film-grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-lens{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.hero-lens--1{width:38vw;height:38vw;left:-8vw;top:22%;box-shadow:0 0 90px rgba(70,108,160,.08),inset 0 0 70px rgba(255,255,255,.018)}
.hero-lens--2{width:22vw;height:22vw;left:9vw;top:37%;border-color:rgba(120,154,200,.12)}
.hero-beam{position:absolute;display:block;filter:blur(25px);mix-blend-mode:screen}
.hero-beam--1{width:55vw;height:8vw;left:-15vw;top:48%;transform:rotate(-13deg);background:linear-gradient(90deg,transparent,rgba(127,165,213,.18),rgba(255,255,255,.035),transparent)}
.hero-beam--2{width:45vw;height:10vw;left:10vw;top:31%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,194,121,.08),transparent)}

.hero-viewfinder{position:absolute;left:5vw;top:16vh;width:min(42vw,640px);height:min(58vh,520px);border:1px solid rgba(255,255,255,.06);opacity:.75}
.vf-corner{position:absolute;width:42px;height:42px;border-color:rgba(255,255,255,.35);border-style:solid}
.vf-corner--1{left:12px;top:12px;border-width:1px 0 0 1px}.vf-corner--2{right:12px;top:12px;border-width:1px 1px 0 0}
.vf-corner--3{left:12px;bottom:12px;border-width:0 0 1px 1px}.vf-corner--4{right:12px;bottom:12px;border-width:0 1px 1px 0}
.vf-focus{position:absolute;width:68px;height:50px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.34)}
.vf-cross:before,.vf-cross:after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.13);transform:translate(-50%,-50%)}
.vf-cross:before{width:180px;height:1px}.vf-cross:after{width:1px;height:180px}
.vf-rec,.vf-time{position:absolute;font:300 10px BelfastGrotesk,sans-serif;letter-spacing:.15em;font-style:normal}
.vf-rec{left:18px;top:18px;color:rgba(255,90,90,.72)}.vf-time{right:18px;bottom:18px;color:rgba(255,255,255,.45)}

.film-strip{overflow:hidden;background:#080808;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.film-strip__track{display:flex;width:max-content;align-items:center;gap:18px;white-space:nowrap;font:300 10px BelfastGrotesk,sans-serif;letter-spacing:.15em;color:rgba(255,255,255,.26)}
.film-strip__track i{display:block;width:62px;height:38px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(122,160,208,.05),rgba(255,255,255,.01))}

.cap-stage--film{grid-template-columns:210px minmax(0,1fr);gap:48px}
.cap-stage--film .cap-panel{min-height:100vh}
.film-visual{position:relative;overflow:visible}
.film-layer{position:absolute;inset:-8%;display:block}.film-layer b{position:absolute;display:block}

/* Photo / lens */
.lens-ring{left:50%;top:50%;border-radius:50%;border:1px solid rgba(142,178,222,.18);transform:translate(-50%,-50%)}
.lens-ring--1{width:70%;height:70%}.lens-ring--2{width:50%;height:50%;border-style:dashed}
.lens-glass{width:30%;height:30%;left:35%;top:35%;border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(170,205,245,.24),rgba(43,72,110,.09) 40%,rgba(0,0,0,.35) 72%);box-shadow:0 0 60px rgba(92,130,178,.15)}
.focus-box{border:1px solid rgba(255,255,255,.28)}
.focus-box--1{width:24%;height:18%;left:18%;top:25%}.focus-box--2{width:18%;height:14%;right:17%;bottom:22%}
.aperture{width:1px;height:42%;left:50%;top:29%;background:linear-gradient(transparent,rgba(255,255,255,.34),transparent)}
.aperture--1{transform:rotate(35deg)}.aperture--2{transform:rotate(-35deg)}

/* Film production */
.frame-card{width:48%;height:31%;border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,rgba(119,158,208,.07),rgba(255,255,255,.015));box-shadow:0 18px 45px rgba(0,0,0,.28)}
.frame-card--1{left:7%;top:18%;transform:rotate(-7deg)}.frame-card--2{right:7%;top:31%;transform:rotate(8deg)}.frame-card--3{left:24%;bottom:13%;transform:rotate(2deg)}
.play-line{width:72%;height:1px;left:14%;top:52%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)}
.timecode{right:12%;bottom:10%;font:300 9px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.42);letter-spacing:.12em}
.rec-dot{left:12%;top:12%;width:8px;height:8px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 20px rgba(255,70,70,.55)}

/* Editing */
.timeline{left:8%;width:84%;height:1px;background:rgba(255,255,255,.12)}
.timeline--1{top:35%}.timeline--2{top:50%}.timeline--3{top:65%}
.clip{height:10%;border:1px solid rgba(126,163,211,.20);background:rgba(88,126,180,.08)}
.clip--1{width:31%;left:14%;top:30%}.clip--2{width:26%;left:48%;top:45%}.clip--3{width:38%;left:26%;top:60%}
.playhead{width:1px;height:54%;left:50%;top:24%;background:linear-gradient(transparent,rgba(255,130,130,.66),transparent);box-shadow:0 0 18px rgba(255,80,80,.25)}

/* Pre-production */
.story-frame{width:28%;height:24%;border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(107,145,193,.04))}
.story-frame--1{left:10%;top:24%;transform:rotate(-6deg)}.story-frame--2{left:37%;top:35%;transform:rotate(4deg)}.story-frame--3{right:9%;top:20%;transform:rotate(8deg)}
.scene-line{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent)}
.scene-line--1{width:72%;left:14%;top:60%;transform:rotate(-12deg)}.scene-line--2{width:55%;left:23%;top:50%;transform:rotate(24deg)}
.scene-orb{width:22%;aspect-ratio:1;border-radius:50%;right:15%;bottom:12%;background:radial-gradient(circle,rgba(255,190,120,.12),rgba(80,109,150,.05),transparent 70%)}

.camera-sequence{position:relative;min-height:100svh;display:flex;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.camera-sequence__content{position:relative;z-index:2;display:grid;grid-template-columns:170px minmax(0,1fr);gap:55px}
.camera-sequence__content h2{margin:0 0 22px;font-size:clamp(34px,4.5vw,62px);line-height:1.42}
.camera-sequence__content p{margin:0;max-width:650px;font-size:12px;line-height:2.1;color:var(--muted)}
.camera-sequence__fx{position:absolute;inset:0;pointer-events:none}
.sequence-frame{position:absolute;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(116,151,198,.035),rgba(255,255,255,.008))}
.sequence-frame--1{width:34vw;height:24vw;left:-6vw;top:24%;transform:rotate(-7deg)}
.sequence-frame--2{width:28vw;height:20vw;left:30vw;top:14%;transform:rotate(8deg)}
.sequence-frame--3{width:31vw;height:23vw;right:-5vw;bottom:12%;transform:rotate(-5deg)}
.sequence-flare{position:absolute;width:38vw;height:38vw;border-radius:50%;left:28vw;top:25%;background:radial-gradient(circle,rgba(122,164,218,.13),rgba(255,192,118,.045) 30%,transparent 68%);filter:blur(15px)}
.sequence-scan{position:absolute;left:0;top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(255,255,255,.32),transparent)}

.process-light--film{background:radial-gradient(circle,rgba(105,145,195,.09),rgba(255,185,110,.035) 42%,transparent 70%)}

@media(min-width:1181px){
 .cap-stage--film .cap-panel{transform:translateX(92px);width:calc(100% - 92px)}
}
@media(min-width:701px) and (max-width:1180px){
 .cap-stage--film{grid-template-columns:165px minmax(0,1fr);gap:28px}
 .cap-stage--film .cap-panel{grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);gap:24px;min-height:86vh;padding:68px 0}
 .cap-stage--film .cap-panel__visual{min-height:360px}
 .cap-stage--film .cap-panel__visual .cap-visual{width:min(31vw,300px)}
 .hero-viewfinder{width:44vw;height:48vh}
}
@media(max-width:900px){
 .cap-stage--film{grid-template-columns:1fr}
 .cap-stage--film .cap-nav{grid-template-columns:repeat(3,1fr)}
 .camera-sequence__content{grid-template-columns:1fr;gap:24px}
 .hero-viewfinder{left:3vw;width:58vw;height:40vh;top:23vh}
}
@media(max-width:900px) and (orientation:landscape){
 .cap-stage--film .cap-panel{grid-template-columns:minmax(0,1.12fr) minmax(210px,.88fr);gap:18px;min-height:calc(100svh - 108px)}
 .cap-stage--film .cap-panel__visual{min-height:235px}
 .cap-stage--film .cap-panel__visual .cap-visual{width:min(27vw,225px)}
 .camera-sequence{min-height:100svh}
 .hero-viewfinder{width:42vw;height:58vh;top:17vh}
}
@media(max-width:600px){
 .film-strip__track{gap:12px}
 .film-strip__track i{width:48px;height:30px}
 .camera-sequence{min-height:82svh}
 .camera-sequence__content h2{font-size:30px}
 .hero-viewfinder{width:70vw;height:36vh;left:-5vw;top:29vh;opacity:.55}
}


/* =========================================================
   SERVICE 05 — MOTION GRAPHICS & VFX
   Dense scroll-driven motion system
========================================================= */
body[data-service-theme="motion-vfx"]{--blue:154,93,255}
.detail-hero--motion{isolation:isolate;overflow:hidden}
.mvfx-noise{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mvfx-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:54px 54px;transform:perspective(700px) rotateX(62deg) scale(1.25);transform-origin:center 70%;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 80%,transparent)}
.hero-blob{position:absolute;border-radius:48% 52% 45% 55%/55% 42% 58% 45%;filter:blur(5px);mix-blend-mode:screen}
.hero-blob--1{width:28vw;height:28vw;left:-6vw;top:22%;background:radial-gradient(circle at 35% 35%,rgba(255,57,148,.22),rgba(117,59,255,.08) 52%,transparent 72%)}
.hero-blob--2{width:24vw;height:24vw;left:21vw;top:40%;background:radial-gradient(circle at 50% 45%,rgba(49,184,255,.17),rgba(89,61,255,.07) 55%,transparent 73%)}
.hero-blob--3{width:20vw;height:20vw;left:7vw;top:8%;background:radial-gradient(circle,rgba(255,143,44,.12),transparent 70%)}
.hero-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.10)}
.hero-ring--1{width:33vw;height:33vw;left:-3vw;top:25%}.hero-ring--2{width:19vw;height:19vw;left:11vw;top:39%;border-style:dashed}.hero-ring--3{width:11vw;height:11vw;left:25vw;top:27%;border-color:rgba(169,95,255,.18)}
.hero-streak{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform-origin:center}
.hero-streak--1{width:48vw;left:-7vw;top:42%;transform:rotate(-22deg)}.hero-streak--2{width:39vw;left:4vw;top:59%;transform:rotate(16deg)}.hero-streak--3{width:26vw;left:15vw;top:31%;transform:rotate(46deg)}
.hero-glyph{position:absolute;font:300 min(27vw,430px) BelfastGrotesk,sans-serif;line-height:.7;font-style:normal;color:rgba(255,255,255,.025)}
.hero-glyph--m{left:2vw;bottom:3vh}.hero-glyph--v{left:22vw;top:9vh}

.motion-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#070707;padding:16px 0}
.motion-marquee__track{display:flex;width:max-content;align-items:center;gap:26px;white-space:nowrap;font:300 11px BelfastGrotesk,sans-serif;letter-spacing:.18em;color:rgba(255,255,255,.30)}
.motion-marquee__track i{font-style:normal;font-size:6px;color:rgba(171,106,255,.42)}

.motion-lab{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.motion-lab__pin{position:relative;height:100vh;overflow:hidden;isolation:isolate;background:#060606}
.motion-lab__stage{position:absolute;inset:0;overflow:hidden}
.lab-grid{position:absolute;inset:-15%;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at 32% 52%,#000,transparent 70%)}
.lab-core{position:absolute;width:min(24vw,340px);aspect-ratio:1;left:21vw;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 42% 36%,rgba(255,255,255,.18),rgba(149,76,255,.16) 18%,rgba(53,173,255,.08) 46%,transparent 70%);box-shadow:0 0 90px rgba(123,73,255,.12)}
.lab-orbit{position:absolute;left:21vw;top:50%;border-radius:50%;border:1px solid rgba(255,255,255,.12);transform:translate(-0%,-50%)}
.lab-orbit--1{width:min(31vw,440px);height:min(31vw,440px)}.lab-orbit--2{width:min(38vw,540px);height:min(22vw,320px);transform:translate(0,-50%) rotate(28deg)}.lab-orbit--3{width:min(25vw,360px);height:min(42vw,600px);transform:translate(0,-50%) rotate(-22deg)}
.lab-panel{position:absolute;width:15vw;height:10vw;min-width:150px;min-height:100px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(128,72,255,.03));backdrop-filter:blur(3px)}
.lab-panel--1{left:5vw;top:22%;transform:rotate(-9deg)}.lab-panel--2{left:35vw;top:17%;transform:rotate(8deg)}.lab-panel--3{left:42vw;bottom:13%;transform:rotate(-5deg)}
.lab-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.33),transparent)}
.lab-line--1{width:50vw;left:-5vw;top:37%;transform:rotate(-16deg)}.lab-line--2{width:43vw;left:10vw;top:62%;transform:rotate(14deg)}.lab-line--3{width:28vw;left:21vw;top:48%;transform:rotate(48deg)}
.lab-particle{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 24px rgba(180,110,255,.65)}
.lab-particle--1{left:11vw;top:30%}.lab-particle--2{left:30vw;top:18%}.lab-particle--3{left:43vw;top:49%}.lab-particle--4{left:16vw;bottom:18%}.lab-particle--5{left:38vw;bottom:26%}
.lab-flare{position:absolute;width:34vw;height:34vw;left:13vw;top:33%;border-radius:50%;background:radial-gradient(circle,rgba(158,76,255,.10),rgba(40,183,255,.04) 38%,transparent 70%);filter:blur(14px)}
.lab-code{position:absolute;left:5vw;bottom:5vh;font:300 10px BelfastGrotesk,sans-serif;letter-spacing:.16em;color:rgba(255,255,255,.28)}
.lab-word{position:absolute;font:300 clamp(120px,16vw,250px) BelfastGrotesk,sans-serif;color:rgba(255,255,255,.026);line-height:.8;letter-spacing:-.04em}
.lab-word--1{left:-2vw;top:8%}.lab-word--2{left:27vw;bottom:4%}

.motion-lab__copy{height:100%;position:relative;z-index:3;display:grid;grid-template-columns:170px minmax(0,1fr);gap:55px;align-items:center}
.motion-lab__copy>.detail-kicker{align-self:start;padding-top:9vh}
.lab-step{position:absolute;right:8vw;top:43%;transform:translateY(-50%);width:min(520px,42vw);opacity:0}
.lab-step b{display:block;font:300 11px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.28);margin-bottom:14px}
.lab-step h2{margin:0;font:300 clamp(62px,8vw,120px) BelfastGrotesk,sans-serif;letter-spacing:-.045em;color:#fff}
.lab-step p{margin:12px 0 0;font-size:12px;color:var(--muted)}

.cap-stage--motion{grid-template-columns:210px minmax(0,1fr);gap:48px}
.cap-stage--motion .cap-panel{min-height:100vh}
.motion-visual{position:relative;overflow:visible}.motion-layer{position:absolute;inset:-8%;display:block}.motion-layer b{position:absolute;display:block}

/* 01 Motion */
.motion-orb{border-radius:50%;filter:blur(1px)}
.motion-orb--a{width:46%;height:46%;left:14%;top:26%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.17),rgba(162,74,255,.16) 26%,rgba(74,191,255,.06) 58%,transparent 72%)}
.motion-orb--b{width:29%;height:29%;right:10%;top:18%;background:radial-gradient(circle,rgba(255,73,151,.14),transparent 72%)}
.motion-ring{border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.motion-ring--1{width:68%;height:68%;left:13%;top:16%}.motion-ring--2{width:46%;height:26%;left:26%;top:37%;transform:rotate(28deg);border-style:dashed}
.motion-type{left:38%;top:31%;font:300 112px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.24);font-style:normal}
.motion-path{width:70%;height:1px;left:15%;top:51%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.40),transparent)}
.motion-path--1{transform:rotate(21deg)}.motion-path--2{transform:rotate(-34deg)}

/* 02 Grade */
.grade-wheel{width:54%;aspect-ratio:1;left:23%;top:22%;border-radius:50%;background:conic-gradient(from 45deg,rgba(255,72,144,.18),rgba(161,75,255,.18),rgba(50,184,255,.17),rgba(71,220,172,.10),rgba(255,191,74,.13),rgba(255,72,144,.18));mask-image:radial-gradient(circle,transparent 0 36%,#000 37% 100%)}
.grade-wheel--2{width:34%;left:33%;top:32%;opacity:.55;transform:rotate(90deg)}
.grade-scope{width:68%;height:48%;left:16%;top:27%;border:1px solid rgba(255,255,255,.12);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:22px 22px}
.grade-line{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.grade-line--1{width:66%;left:17%;top:45%;transform:rotate(-18deg)}.grade-line--2{width:52%;left:25%;top:57%;transform:rotate(24deg)}
.grade-glow{width:35%;aspect-ratio:1;left:33%;top:32%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),rgba(138,75,255,.08),transparent 70%);filter:blur(5px)}

/* 03 VFX */
.vfx-plane{border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(125,79,255,.025))}
.vfx-plane--1{width:43%;height:38%;left:10%;top:24%;transform:rotate(-11deg)}.vfx-plane--2{width:41%;height:34%;right:8%;top:32%;transform:rotate(9deg)}.vfx-plane--3{width:35%;height:29%;left:29%;bottom:12%;transform:rotate(3deg)}
.vfx-grid{inset:13%;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(circle,#000,transparent 72%)}
.vfx-core{width:17%;aspect-ratio:1;left:41.5%;top:41%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),rgba(155,76,255,.16),transparent 70%);box-shadow:0 0 42px rgba(128,83,255,.20)}
.vfx-ray{width:72%;height:1px;left:14%;top:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)}.vfx-ray--1{transform:rotate(34deg)}.vfx-ray--2{transform:rotate(-39deg)}

/* 04 Custom */
.custom-blob{border-radius:46% 54% 42% 58%/55% 43% 57% 45%;filter:blur(2px)}
.custom-blob--1{width:46%;height:46%;left:13%;top:24%;background:radial-gradient(circle,rgba(255,61,145,.16),rgba(128,68,255,.07),transparent 70%)}
.custom-blob--2{width:32%;height:32%;right:12%;top:19%;background:radial-gradient(circle,rgba(54,193,255,.13),transparent 70%)}
.custom-blob--3{width:25%;height:25%;left:36%;bottom:13%;background:radial-gradient(circle,rgba(255,160,65,.10),transparent 70%)}
.custom-loop{border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.custom-loop--1{width:72%;height:38%;left:14%;top:32%;transform:rotate(28deg)}.custom-loop--2{width:40%;height:70%;left:30%;top:15%;transform:rotate(-26deg);border-style:dashed}
.custom-cross{width:18%;height:18%;left:41%;top:41%}.custom-cross:before,.custom-cross:after{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(255,255,255,.42)}.custom-cross:after{transform:rotate(90deg)}

.composite-scene{position:relative;min-height:115svh;display:flex;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.composite-scene__content{position:relative;z-index:2;display:grid;grid-template-columns:170px minmax(0,1fr);gap:55px}
.composite-scene__content h2{margin:0 0 22px;font-size:clamp(34px,4.5vw,62px);line-height:1.42}.composite-scene__content p{margin:0;max-width:650px;font-size:12px;line-height:2.1;color:var(--muted)}
.composite-scene__fx{position:absolute;inset:0;pointer-events:none}
.comp-plane{position:absolute;border:1px solid rgba(255,255,255,.10);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(122,74,255,.025));backdrop-filter:blur(2px)}
.comp-plane--1{width:32vw;height:24vw;left:-4vw;top:18%;transform:rotate(-9deg)}.comp-plane--2{width:28vw;height:21vw;left:31vw;top:27%;transform:rotate(7deg)}.comp-plane--3{width:31vw;height:23vw;right:-5vw;bottom:12%;transform:rotate(-5deg)}
.comp-orb{position:absolute;width:30vw;height:30vw;left:26vw;top:26%;border-radius:50%;background:radial-gradient(circle,rgba(155,78,255,.11),rgba(50,186,255,.04) 40%,transparent 70%);filter:blur(10px)}
.comp-ring{position:absolute;width:42vw;height:42vw;left:20vw;top:12%;border-radius:50%;border:1px dashed rgba(255,255,255,.11)}
.comp-scan{position:absolute;left:0;top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(255,255,255,.34),transparent)}
.comp-glow{position:absolute;width:9px;height:9px;border-radius:50%;left:44vw;top:44%;background:#fff;box-shadow:0 0 38px rgba(161,89,255,.75)}
.comp-word{position:absolute;font:300 clamp(120px,17vw,260px) BelfastGrotesk,sans-serif;line-height:.8;color:rgba(255,255,255,.025)}
.comp-word--a{left:-2vw;top:8%}.comp-word--b{right:-3vw;bottom:5%}

.process-light--motion{background:radial-gradient(circle,rgba(153,76,255,.09),rgba(49,177,255,.04) 40%,transparent 70%)}

@media(min-width:1181px){.cap-stage--motion .cap-panel{transform:translateX(92px);width:calc(100% - 92px)}}
@media(min-width:701px) and (max-width:1180px){
 .cap-stage--motion{grid-template-columns:165px minmax(0,1fr);gap:28px}
 .cap-stage--motion .cap-panel{grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);gap:24px;min-height:86vh;padding:68px 0}
 .cap-stage--motion .cap-panel__visual{min-height:360px}
 .cap-stage--motion .cap-panel__visual .cap-visual{width:min(31vw,300px)}
 .lab-step{right:6vw;width:44vw}
}
@media(max-width:900px){
 .cap-stage--motion{grid-template-columns:1fr}.cap-stage--motion .cap-nav{grid-template-columns:repeat(4,1fr)}
 .motion-lab{min-height:100vh}.motion-lab__copy{grid-template-columns:1fr}.motion-lab__copy>.detail-kicker{padding-top:8vh}
 .lab-step{right:7vw;width:70vw;top:58%}.lab-core{left:7vw;top:39%;width:36vw}.lab-orbit{left:7vw;top:39%}
 .lab-panel--1{left:2vw;top:15%}.lab-panel--2{left:38vw;top:14%}.lab-panel--3{left:48vw;bottom:28%}
 .composite-scene__content{grid-template-columns:1fr;gap:24px}
}
@media(max-width:900px) and (orientation:landscape){
 .cap-stage--motion .cap-panel{grid-template-columns:minmax(0,1.12fr) minmax(210px,.88fr);gap:18px;min-height:calc(100svh - 108px)}
 .cap-stage--motion .cap-panel__visual{min-height:235px}.cap-stage--motion .cap-panel__visual .cap-visual{width:min(27vw,225px)}
 .motion-lab{min-height:100vh}.lab-step{right:4vw;top:47%;width:40vw}.lab-core{left:12vw;top:50%;width:28vw}.lab-orbit{left:12vw;top:50%}
 .composite-scene{min-height:100svh}
}
@media(max-width:600px){
 .motion-marquee__track{gap:20px;font-size:9px}
 .motion-lab{min-height:100vh}.lab-step{width:82vw;right:9vw;top:61%}.lab-step h2{font-size:58px}.lab-step p{font-size:11px}
 .lab-core{width:44vw;left:4vw;top:37%}.lab-orbit{left:4vw;top:37%}.lab-panel{min-width:100px;min-height:70px}
 .composite-scene{min-height:92svh}.composite-scene__content h2{font-size:30px}
}


/* =========================================================
   V4 — MOTION LAB SAFE PIN OFFSET
   Keeps pinned scene below the floating header on all devices.
========================================================= */
.motion-lab{
  --motion-pin-offset: 108px;
  scroll-margin-top: var(--motion-pin-offset);
}
.motion-lab__pin{
  height: calc(100svh - var(--motion-pin-offset));
  min-height: 420px;
}
.motion-lab__copy{
  height: 100%;
}
.motion-lab__copy>.detail-kicker{
  padding-top: clamp(24px, 4vh, 44px);
}

@media (max-width:900px){
  .motion-lab{--motion-pin-offset: 118px}
  .motion-lab__pin{
    height: calc(100svh - var(--motion-pin-offset));
    min-height: 360px;
  }
  .motion-lab__copy>.detail-kicker{
    padding-top: 22px;
  }
}

@media (max-width:900px) and (orientation:landscape){
  .motion-lab{--motion-pin-offset: 96px}
  .motion-lab__pin{
    height: calc(100svh - var(--motion-pin-offset));
    min-height: 285px;
  }
  .motion-lab__copy>.detail-kicker{
    padding-top: 14px;
  }
  .lab-step{
    top: 48%;
  }
}

@media (min-width:901px) and (max-width:1180px){
  .motion-lab{--motion-pin-offset: 104px}
}

@media (min-width:1181px){
  .motion-lab{--motion-pin-offset: 96px}
}


/* SERVICE 06 — SOCIAL MEDIA & CONTENT */
body[data-service-theme="social-content"]{--blue:74,158,255}
.detail-hero--social{isolation:isolate;overflow:hidden}
.social-noise{position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.social-grid{position:absolute;inset:-12%;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:52px 52px;transform:rotate(-5deg)}
.feed-card{position:absolute;width:15vw;height:20vw;min-width:130px;min-height:170px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(65,146,255,.025));box-shadow:0 28px 60px rgba(0,0,0,.22)}
.feed-card b{position:absolute;inset:10%;background:linear-gradient(145deg,rgba(77,162,255,.08),rgba(255,255,255,.015))}
.feed-card span{position:absolute;left:10%;right:32%;bottom:7%;height:1px;background:rgba(255,255,255,.15)}
.feed-card--1{left:4vw;top:17%;transform:rotate(-9deg)}.feed-card--2{left:22vw;top:34%;transform:rotate(7deg)}.feed-card--3{left:10vw;bottom:8%;transform:rotate(3deg)}
.story-pill{position:absolute;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.17);box-shadow:0 0 24px rgba(66,155,255,.08)}
.story-pill--1{left:8vw;top:11%}.story-pill--2{left:15vw;top:8%}.story-pill--3{left:22vw;top:12%}
.social-beam{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.social-beam--1{width:45vw;left:-6vw;top:47%;transform:rotate(-18deg)}.social-beam--2{width:36vw;left:9vw;top:61%;transform:rotate(21deg)}

.content-ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;background:#070707}
.content-ticker__track{display:flex;width:max-content;gap:24px;align-items:center;white-space:nowrap;font:300 10px BelfastGrotesk,sans-serif;letter-spacing:.17em;color:rgba(255,255,255,.28)}
.content-ticker__track i{font-style:normal;color:rgba(92,168,255,.48)}

.feed-sequence{position:relative;--feed-pin-offset:96px;scroll-margin-top:var(--feed-pin-offset)}
.feed-sequence__pin{position:relative;height:calc(100svh - var(--feed-pin-offset));min-height:420px;overflow:hidden;isolation:isolate;background:#060606;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feed-stage{position:absolute;inset:0;overflow:hidden}
.phone-frame{position:absolute;width:min(26vw,330px);height:min(57vh,610px);left:13vw;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.12);border-radius:36px;box-shadow:inset 0 0 0 8px rgba(255,255,255,.012)}
.phone-glow{position:absolute;width:34vw;height:34vw;left:8vw;top:25%;border-radius:50%;background:radial-gradient(circle,rgba(58,150,255,.10),rgba(116,75,255,.035) 38%,transparent 70%);filter:blur(10px)}
.post{position:absolute;width:min(19vw,245px);height:min(35vh,330px);left:16.5vw;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.10);background:#0b0b0b;opacity:0}
.post b{position:absolute;inset:7% 7% 28%;background:linear-gradient(145deg,rgba(66,154,255,.09),rgba(255,255,255,.02))}
.post span{position:absolute;left:8%;right:35%;bottom:14%;height:1px;background:rgba(255,255,255,.18)}
.post--1{opacity:1}
.story-ring{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.16);top:14%}
.ring-a{left:11vw}.ring-b{left:18vw}.ring-c{left:25vw}
.engagement{position:absolute;font-style:normal;color:rgba(255,255,255,.32);font:300 18px BelfastGrotesk,sans-serif}.e-heart{left:8vw;bottom:20%}.e-comment{left:12vw;bottom:14%}.e-save{left:29vw;bottom:18%}
.feed-line{position:absolute;width:1px;height:60%;left:42vw;top:20%;background:linear-gradient(transparent,rgba(255,255,255,.17),transparent)}
.feed-counter{position:absolute;left:6vw;bottom:6vh;font:300 10px BelfastGrotesk,sans-serif;letter-spacing:.16em;color:rgba(255,255,255,.30)}

.feed-sequence__copy{height:100%;position:relative;z-index:3}
.feed-sequence__copy>.detail-kicker{position:absolute;right:0;top:clamp(24px,4vh,42px)}
.feed-step{position:absolute;right:8vw;top:48%;transform:translateY(-50%);width:min(520px,42vw);opacity:0}
.feed-step--1{opacity:1}.feed-step b{display:block;font:300 11px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.28);margin-bottom:13px}
.feed-step h2{margin:0;font:300 clamp(62px,8vw,118px) BelfastGrotesk,sans-serif;letter-spacing:-.045em}.feed-step p{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:2}

.cap-stage--social{grid-template-columns:210px minmax(0,1fr);gap:48px}.cap-stage--social .cap-panel{min-height:100vh}
.social-visual{position:relative;overflow:visible}.social-layer{position:absolute;inset:-8%;display:block}.social-layer b{position:absolute;display:block}
.calendar-grid{inset:14%;border:1px solid rgba(255,255,255,.12);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:25% 25%}
.calendar-day{width:18%;height:18%;border:1px solid rgba(88,166,255,.20);background:rgba(66,151,255,.055)}.day-a{left:21%;top:22%}.day-b{left:46%;top:47%}.day-c{right:18%;bottom:18%}
.strategy-path{width:65%;height:1px;left:17%;top:52%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);transform:rotate(-25deg)}
.strategy-node{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 18px rgba(75,160,255,.45)}.node-a{left:22%;top:60%}.node-b{left:48%;top:42%}.node-c{right:20%;top:28%}

.content-card{width:35%;height:42%;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(70,151,255,.035))}
.card-a{left:10%;top:18%;transform:rotate(-8deg)}.card-b{right:10%;top:22%;transform:rotate(8deg)}.card-c{left:27%;bottom:10%;transform:rotate(3deg)}.card-d{right:24%;bottom:17%;transform:rotate(-5deg)}
.content-focus{width:22%;height:18%;left:39%;top:41%;border:1px solid rgba(255,255,255,.30)}
.content-scan{width:1px;height:72%;left:50%;top:14%;background:linear-gradient(transparent,rgba(255,255,255,.34),transparent)}

.chart-grid{inset:14%;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:25px 25px;border-left:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.chart-line{width:67%;height:1px;left:17%;top:53%;background:linear-gradient(90deg,rgba(76,157,255,.15),rgba(255,255,255,.55));transform:rotate(-24deg);transform-origin:left}
.chart-dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(73,158,255,.48)}.dot-a{left:24%;top:60%}.dot-b{left:49%;top:48%}.dot-c{right:20%;top:31%}
.metric{font:300 12px BelfastGrotesk,sans-serif;color:rgba(255,255,255,.45);font-style:normal}.metric-a{right:14%;top:18%}.metric-b{left:15%;bottom:16%}

.analytics-scene{position:relative;min-height:110svh;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);isolation:isolate}
.analytics-scene__content{position:relative;z-index:2;display:grid;grid-template-columns:170px minmax(0,1fr);gap:55px}
.analytics-scene__content h2{margin:0 0 22px;font-size:clamp(34px,4.5vw,62px);line-height:1.42}.analytics-scene__content p{max-width:650px;margin:0;font-size:12px;line-height:2.1;color:var(--muted)}
.analytics-scene__fx{position:absolute;inset:0}.analytics-grid{position:absolute;inset:10%;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:42px 42px}
.growth-line{position:absolute;width:68vw;height:1px;left:8vw;top:58%;background:linear-gradient(90deg,transparent,rgba(82,163,255,.24),rgba(255,255,255,.40));transform:rotate(-17deg);transform-origin:left}
.growth-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(76,160,255,.5)}.gd1{left:17%;top:64%}.gd2{left:37%;top:53%}.gd3{left:57%;top:42%}.gd4{left:76%;top:31%}
.analytics-scan{position:absolute;left:0;top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(255,255,255,.3),transparent)}
.analytics-number{position:absolute;font:300 clamp(48px,8vw,120px) BelfastGrotesk,sans-serif;color:rgba(255,255,255,.035)}.an1{left:8vw;top:15%}.an2{right:8vw;bottom:10%}
.analytics-word{position:absolute;left:-2vw;bottom:3%;font:300 clamp(120px,18vw,270px) BelfastGrotesk,sans-serif;color:rgba(255,255,255,.022)}
.process-light--social{background:radial-gradient(circle,rgba(66,155,255,.09),rgba(116,76,255,.035) 42%,transparent 70%)}

@media(min-width:1181px){.cap-stage--social .cap-panel{transform:translateX(92px);width:calc(100% - 92px)}.feed-sequence{--feed-pin-offset:96px}}
@media(min-width:701px) and (max-width:1180px){
 .cap-stage--social{grid-template-columns:165px minmax(0,1fr);gap:28px}.cap-stage--social .cap-panel{grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);gap:24px;min-height:86vh;padding:68px 0}
 .cap-stage--social .cap-panel__visual{min-height:360px}.cap-stage--social .cap-panel__visual .cap-visual{width:min(31vw,300px)}
 .feed-sequence{--feed-pin-offset:104px}.feed-step{right:6vw;width:44vw}.phone-frame{left:8vw}
}
@media(max-width:900px){
 .cap-stage--social{grid-template-columns:1fr}.cap-stage--social .cap-nav{grid-template-columns:repeat(3,1fr)}
 .feed-sequence{--feed-pin-offset:118px}.feed-sequence__pin{min-height:360px}
 .feed-step{right:7vw;width:72vw;top:64%}.phone-frame{width:32vw;height:38vh;left:8vw;top:35%}.post{width:24vw;height:27vh;left:12vw;top:35%}
 .feed-line{left:48vw}.analytics-scene__content{grid-template-columns:1fr;gap:24px}
}
@media(max-width:900px) and (orientation:landscape){
 .feed-sequence{--feed-pin-offset:96px}.feed-sequence__pin{min-height:285px}
 .feed-step{right:5vw;width:42vw;top:50%}.phone-frame{width:22vw;height:55vh;left:10vw;top:50%}.post{width:16vw;height:39vh;left:13vw;top:50%}
 .cap-stage--social .cap-panel{grid-template-columns:minmax(0,1.12fr) minmax(210px,.88fr);gap:18px;min-height:calc(100svh - 108px)}
 .cap-stage--social .cap-panel__visual{min-height:235px}.cap-stage--social .cap-panel__visual .cap-visual{width:min(27vw,225px)}
}
@media(max-width:600px){
 .feed-step{width:82vw;right:9vw;top:66%}.feed-step h2{font-size:56px}.feed-step p{font-size:11px}
 .phone-frame{width:42vw;left:4vw}.post{width:31vw;left:9.5vw}.story-ring{width:36px;height:36px}
 .analytics-scene{min-height:92svh}.analytics-scene__content h2{font-size:30px}
}


/* === GLOBAL CHROME — SERVICES HUB V21 REFERENCE === */
/* ==================================================
   PACKAGES FOOTER
================================================== */

.packages-footer {
  position: relative;
  background: #030303;
  color: #fff;
  padding: 0 0 26px;
}

.packages-footer__inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.packages-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  direction: rtl;
  padding: 52px 0 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.packages-footer__column {
  min-width: 0;
  padding: 0 48px;
  text-align: right;
}

.packages-footer__column:first-child {
  padding-right: 8px;
}

.packages-footer__column:last-child {
  padding-left: 8px;
}

.packages-footer__column + .packages-footer__column {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.packages-footer__title {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.packages-footer__column a,
.packages-footer__column span {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 13px;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
}

.packages-footer__column a {
  transition: color 180ms ease;
}

.packages-footer__column a:hover {
  color: #fff;
}

.packages-footer__contact-label {
  position: relative;
  padding-bottom: 11px;
  margin-bottom: 17px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.packages-footer__contact-label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 116px;
  max-width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.packages-footer__phone {
  direction: ltr;
  text-align: right;
  font-family: "BelfastGrotesk", sans-serif;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.76) !important;
}

.packages-footer__phone:last-child {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 0 !important;
}

.packages-footer__phone:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 116px;
  max-width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.packages-footer__bottom {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.packages-footer__brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 94px;
  text-decoration: none;
}

.packages-footer__brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
}

.packages-footer__copyright {
  font-family: "BelfastGrotesk", sans-serif;
  font-size: 9px;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Tablet */
@media (max-width: 900px) {
  .packages-footer__grid {
    padding: 44px 0 46px;
  }

  .packages-footer__column {
    padding: 0 30px;
  }

  .packages-footer__column:first-child {
    padding-right: 4px;
  }

  .packages-footer__column:last-child {
    padding-left: 4px;
  }

  .packages-footer__title {
    margin-bottom: 20px;
    font-size: 13px;
  }

  .packages-footer__column a,
  .packages-footer__column span {
    font-size: 11px;
  }
}

/* Mobile portrait */
@media (max-width: 600px) {
  .packages-footer {
    padding-bottom: 18px;
  }

  .packages-footer__inner {
    width: calc(100% - 28px);
  }

  .packages-footer__grid {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .packages-footer__column,
  .packages-footer__column:first-child,
  .packages-footer__column:last-child {
    padding: 28px 0;
    border-right: 0;
  }

  .packages-footer__column + .packages-footer__column {
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .packages-footer__title {
    margin-bottom: 16px;
    font-size: 12px;
  }

  .packages-footer__column a,
  .packages-footer__column span {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .packages-footer__phone {
    font-size: 10px !important;
  }

  .packages-footer__bottom {
    min-height: 62px;
    gap: 16px;
  }

  .packages-footer__brand {
    width: 74px;
  }

  .packages-footer__copyright {
    font-size: 7px;
    letter-spacing: 0.18em;
  }
}

/* Phone landscape / compact viewport */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 950px) {
  .packages-footer__inner {
    width: calc(100% - 36px);
  }

  .packages-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 28px 0 30px;
  }

  .packages-footer__column,
  .packages-footer__column:first-child,
  .packages-footer__column:last-child {
    padding: 0 22px;
    border-top: 0;
  }

  .packages-footer__column:first-child {
    padding-right: 2px;
  }

  .packages-footer__column:last-child {
    padding-left: 2px;
  }

  .packages-footer__column + .packages-footer__column {
    border-top: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .packages-footer__title {
    margin-bottom: 14px;
    font-size: 11px;
  }

  .packages-footer__column a,
  .packages-footer__column span {
    margin-bottom: 7px;
    font-size: 9px;
  }

  .packages-footer__phone {
    font-size: 9px !important;
  }

  .packages-footer__bottom {
    min-height: 56px;
  }

  .packages-footer__brand {
    width: 68px;
  }

  .packages-footer__copyright {
    font-size: 7px;
  }
}


/* ==================================================
   PACKAGES FOOTER — FINAL CONTENT + SERVICE BULLET HOVER
================================================== */

.packages-footer__column--services .packages-footer__service {
  position: relative;
  width: 100%;
  padding-right: 15px;
  cursor: default;
  transition: color 180ms ease;
}

.packages-footer__column--services .packages-footer__service::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.9em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  transform: translateY(-50%);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.packages-footer__column--services .packages-footer__service:hover {
  color: rgba(255, 255, 255, 0.94);
}

.packages-footer__column--services .packages-footer__service:hover::before {
  background: #fff;
  transform: translateY(-50%) scale(1.18);
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.7),
    0 0 11px rgba(255, 255, 255, 0.28);
}

.packages-footer__column--contact .packages-footer__email {
  direction: ltr;
  text-align: right;
  font-family: "BelfastGrotesk", sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.68);
}

.packages-footer__brand {
  width: 70px;
}

.packages-footer__brand img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.packages-footer__bottom {
  flex-direction: row-reverse;
}

@media (max-width: 600px) {
  .packages-footer__brand {
    width: 56px;
  }

  .packages-footer__column--services .packages-footer__service {
    padding-right: 13px;
  }

  .packages-footer__column--services .packages-footer__service::before {
    width: 3px;
    height: 3px;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 950px) {
  .packages-footer__brand {
    width: 52px;
  }
}




/* Footer QA matching Packages */
.packages-footer__column {
  overflow-wrap: anywhere;
}

.packages-footer a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.packages-footer {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .packages-footer {
    overflow-x: hidden;
  }
}

html.about-menu-open,
html.about-menu-open body {
  overflow: hidden;
}




/* =========================================================
   SERVICES V2 — SCROLL MOTION PASS
========================================================= */

.services-hero__inner,
.services-index__head,
.service-row,
.services-system__head,
.services-flow,
.services-cta__grid{
  will-change:transform,opacity;
}

.services-hero__visual,
.sv-light,
.services-backdrop i,
.services-system__light{
  will-change:transform,opacity;
}

.service-row{
  --row-progress:0;
}

.service-row::before{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.42);
  transform:scaleX(var(--row-progress));
  transform-origin:right center;
  opacity:.42;
  pointer-events:none;
}

.service-row__number,
.service-row__title,
.service-row p,
.service-row__mark{
  will-change:transform,opacity;
}

.services-system{
  isolation:isolate;
}

.services-system::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 22%,
      rgba(255,255,255,.018) 48%,
      transparent 72%);
  transform:translateX(38%);
  opacity:.75;
  will-change:transform;
}

.services-flow span,
.services-flow i{
  display:inline-block;
  will-change:transform,opacity;
}

.services-cta{
  position:relative;
  overflow:hidden;
}

.services-cta::before{
  content:"";
  position:absolute;
  width:55vw;
  height:18vw;
  left:-18vw;
  top:20%;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(49,84,255,.08),rgba(255,95,24,.08),transparent);
  filter:blur(38px);
  pointer-events:none;
  transform:rotate(-10deg);
  will-change:transform;
}

@media(max-width:600px){
  .service-row::before{opacity:.22}
  .services-cta::before{width:110vw;height:35vw;left:-55vw}
}

@media(prefers-reduced-motion:reduce){
  .service-row::before{display:none}
  .services-system::before,
  .services-cta::before{transform:none!important}
}

/* =========================================================
   V5 — APPLE-LIKE GLOBAL NAVIGATION
   - Original header DOM preserved
   - Portrait mobile = Apple-like full-screen drill-down
   - Landscape phone/tablet = desktop navigation, no hamburger
========================================================= */

.packages-footer__service{
  text-decoration:none;
  color:rgba(255,255,255,.58);
  transition:color .18s ease;
}
.packages-footer__service:hover,
.packages-footer__service:focus-visible{
  color:#fff;
  outline:none;
}

/* Desktop navigation mode also applies to phone/tablet landscape. */
@media (min-width:901px), (orientation:landscape) and (min-width:568px){
  .armiran-nav{
    z-index:1002 !important;
  }

  .armiran-nav-toggle{
    display:none !important;
  }

  .armiran-nav-links{
    display:flex !important;
  }

  .apple-mobile-menu{
    display:none !important;
  }

  .apple-services-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,.34);
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
      opacity .32s cubic-bezier(.4,0,.6,1),
      visibility .32s step-end;
  }

  .apple-services-menu{
    --apple-nav-bottom:74px;
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1001;
    padding-top:var(--apple-nav-bottom);
    background:#161617;
    color:#f5f5f7;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    clip-path:inset(0 0 100% 0);
    transition:
      clip-path .42s cubic-bezier(.4,0,.2,1),
      transform .42s cubic-bezier(.4,0,.2,1),
      opacity .24s ease,
      visibility .42s step-end;
    box-shadow:0 24px 50px rgba(0,0,0,.18);
  }

  .apple-services-menu.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    clip-path:inset(0 0 0 0);
    transition:
      clip-path .42s cubic-bezier(.4,0,.2,1),
      transform .42s cubic-bezier(.4,0,.2,1),
      opacity .2s ease,
      visibility 0s step-start;
  }

  .apple-services-backdrop.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:
      opacity .32s cubic-bezier(.4,0,.6,1),
      visibility 0s step-start;
  }

  .apple-services-menu__inner{
    width:min(980px,calc(100vw - 64px));
    margin:0 auto;
    padding:36px 0 48px;
    direction:rtl;
  }

  .apple-services-menu__eyebrow{
    margin:0 0 18px;
    color:#86868b;
    font:500 11px/1.4 Modam,system-ui,sans-serif;
  }

  .apple-services-menu__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:48px;
    row-gap:0;
  }

  .apple-services-menu__grid a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:4px 0;
    color:#f5f5f7;
    text-decoration:none;
    font:700 17px/1.55 Modam,system-ui,sans-serif;
    letter-spacing:-.015em;
    transition:color .18s ease;
  }

  .apple-services-menu__grid a:hover,
  .apple-services-menu__grid a:focus-visible{
    color:#fff;
    outline:none;
  }

  .apple-services-menu__grid:has(a:hover) a:not(:hover){
    color:#8d8d92;
  }

  .apple-services-menu__all{
    display:inline-flex;
    gap:8px;
    align-items:center;
    margin-top:24px;
    color:#a1a1a6;
    text-decoration:none;
    font:500 11px/1.5 Modam,system-ui,sans-serif;
    transition:color .18s ease;
  }

  .apple-services-menu__all:hover,
  .apple-services-menu__all:focus-visible{
    color:#fff;
    outline:none;
  }

  .apple-services-menu__all span{
    display:inline-block;
    transition:transform .2s ease;
  }

  .apple-services-menu__all:hover span{
    transform:translateX(-3px);
  }
}

/* Tighter desktop treatment for phone landscape: same nav, no hamburger. */
@media (orientation:landscape) and (min-width:568px) and (max-width:900px){
  .armiran-nav{
    width:calc(100% - 26px) !important;
    max-width:860px !important;
  }

  .armiran-nav-logo img{
    max-height:20px !important;
  }

  .armiran-nav-links{
    gap:clamp(14px,2.6vw,30px) !important;
  }

  .armiran-nav-link{
    font-size:11px !important;
    white-space:nowrap;
  }

  .apple-services-menu__inner{
    width:min(760px,calc(100vw - 40px));
    padding:22px 0 30px;
  }

  .apple-services-menu__grid{
    column-gap:28px;
  }

  .apple-services-menu__grid a{
    min-height:38px;
    font-size:13px;
  }
}

/* Portrait mobile only. */
@media (max-width:900px) and (orientation:portrait){
  html.services-menu-open,
  html.services-menu-open body{
    overflow:hidden !important;
  }

  .apple-services-menu,
  .apple-services-backdrop{
    display:none !important;
  }

  .armiran-nav{
    z-index:1202 !important;
    transition:
      background-color .3s cubic-bezier(.4,0,.2,1),
      border-color .3s ease,
      box-shadow .3s ease,
      backdrop-filter .3s ease !important;
  }

  html.services-menu-open .armiran-nav{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Logo disappears while menu is open, exactly as requested. */
  .armiran-nav-logo{
    transition:opacity .22s ease, visibility .22s ease;
  }

  html.services-menu-open .armiran-nav-logo{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Apple-like compact two-line menu glyph.
     Keep original three spans, hide the middle one. */
  .armiran-nav-toggle{
    display:flex !important;
    position:relative;
    z-index:3;
    width:30px !important;
    height:30px !important;
    align-items:center;
    justify-content:center;
    padding:0 !important;
  }

  .armiran-nav-toggle span{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    width:14px !important;
    height:1px !important;
    margin:0 !important;
    border-radius:1px;
    background:#f5f5f7 !important;
    transform-origin:50% 50%;
    will-change:transform;
    transition:
      transform .34s cubic-bezier(.4,0,.2,1),
      opacity .18s ease,
      background-color .24s ease !important;
  }

  .armiran-nav-toggle span:nth-child(1){
    transform:translate(-50%,-4px) rotate(0deg);
  }

  .armiran-nav-toggle span:nth-child(2){
    opacity:0 !important;
    transform:translate(-50%,0) scaleX(.4);
  }

  .armiran-nav-toggle span:nth-child(3){
    transform:translate(-50%,4px) rotate(0deg);
  }

  html.services-menu-open .armiran-nav-toggle span{
    background:#f5f5f7 !important;
  }

  .armiran-nav-toggle.active span:nth-child(1){
    transform:translate(-50%,0) rotate(45deg) !important;
  }

  .armiran-nav-toggle.active span:nth-child(3){
    transform:translate(-50%,0) rotate(-45deg) !important;
  }

  .apple-mobile-menu.menu-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:1201 !important;
    display:block !important;
    width:100% !important;
    height:100dvh !important;
    background:#161617 !important;
    color:#f5f5f7 !important;
    opacity:1;
    visibility:hidden;
    pointer-events:none;
    overflow:hidden !important;
    transform:none !important;
    clip-path:inset(0 0 100% 0);
    will-change:clip-path;
  }

  .apple-mobile-menu__viewport{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#161617;
  }

  .apple-mobile-panel{
    position:absolute;
    inset:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:
      max(105px,calc(env(safe-area-inset-top) + 78px))
      38px
      44px;
    background:#161617;
  }

  .apple-mobile-panel--main{
    transform:translateX(0);
    opacity:1;
  }

  .apple-mobile-panel--services{
    transform:translateX(-100%);
    opacity:1;
    padding-top:max(116px,calc(env(safe-area-inset-top) + 88px));
    transition:transform .46s cubic-bezier(.32,.72,0,1);
  }

  .apple-mobile-menu.is-services .apple-mobile-panel--main{
    transform:translateX(26%);
    opacity:0;
    pointer-events:none;
    transition:
      transform .46s cubic-bezier(.32,.72,0,1),
      opacity .28s ease;
  }

  .apple-mobile-menu.is-services .apple-mobile-panel--services{
    transform:translateX(0);
  }

  .apple-mobile-main-links{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .apple-mobile-main-links > a,
  .apple-mobile-services-trigger{
    position:relative;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:44px;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent;
    color:#f5f5f7 !important;
    text-decoration:none;
    text-align:right;
    font:700 clamp(20px,6vw,24px)/1.22 Modam,system-ui,sans-serif !important;
    letter-spacing:-.025em;
    opacity:1 !important;
    transform:none !important;
    cursor:pointer;
  }

  .apple-mobile-services-trigger i{
    position:relative;
    flex:0 0 11px;
    width:11px;
    height:16px;
    margin-right:12px;
    opacity:.84;
  }

  .apple-mobile-services-trigger i::before,
  .apple-mobile-services-trigger i::after{
    content:"";
    position:absolute;
    left:4px;
    width:7px;
    height:1px;
    border-radius:2px;
    background:#f5f5f7;
    transform-origin:left center;
  }

  .apple-mobile-services-trigger i::before{
    top:5px;
    transform:rotate(45deg);
  }

  .apple-mobile-services-trigger i::after{
    top:10px;
    transform:rotate(-45deg);
  }

  /* Separate back button, like Apple's submenu top bar. */
  .apple-mobile-back{
    position:fixed;
    top:max(58px,calc(env(safe-area-inset-top) + 18px));
    left:28px;
    z-index:1204;
    width:32px;
    height:32px;
    border:0;
    padding:0;
    background:transparent;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform:translateX(-8px);
    transition:
      opacity .22s ease,
      transform .32s cubic-bezier(.32,.72,0,1);
  }

  .apple-mobile-menu.is-services .apple-mobile-back{
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
  }

  .apple-mobile-back i::before,
  .apple-mobile-back i::after{
    content:"";
    position:absolute;
    left:8px;
    width:12px;
    height:1px;
    border-radius:2px;
    background:#f5f5f7;
    transform-origin:left center;
  }

  .apple-mobile-back i::before{
    top:12px;
    transform:rotate(-45deg);
  }

  .apple-mobile-back i::after{
    top:20px;
    transform:rotate(45deg);
  }

  /* Apple submenu structure: no mini heading / no "all services" label.
     The first row is "همه خدمات", followed by the full large list. */
  .apple-mobile-service-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:0;
  }

  .apple-mobile-service-links a{
    display:block;
    padding:8px 0;
    color:#f5f5f7;
    text-decoration:none;
    font:700 clamp(20px,5.8vw,25px)/1.3 Modam,system-ui,sans-serif;
    letter-spacing:-.027em;
  }

  .apple-mobile-service-links a:first-child{
    margin-bottom:2px;
  }

  @media (max-width:390px){
    .apple-mobile-panel{
      padding-left:28px;
      padding-right:28px;
    }

    .apple-mobile-main-links > a,
    .apple-mobile-services-trigger{
      font-size:20px !important;
    }

    .apple-mobile-service-links a{
      font-size:19px;
      padding:7px 0;
    }

    .apple-mobile-back{
      left:20px;
    }
  }
}

@media (prefers-reduced-motion:reduce){
  .apple-services-menu,
  .apple-services-backdrop,
  .apple-mobile-menu,
  .apple-mobile-panel,
  .armiran-nav,
  .armiran-nav-logo,
  .armiran-nav-toggle span{
    transition:none !important;
  }
}


/* =========================================================
   V18 — APPLE MOBILE FLYOUT MOTION
   Whole menu level only:
   forward: old 0 -> -8px / new +8px -> 0
   back:    old 0 -> +8px / new -8px -> 0
========================================================= */

@keyframes armiran-flyout-forward-next{
  0%{
    opacity:0;
    transform:translate3d(8px,0,0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes armiran-flyout-forward-previous{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100%{
    opacity:0;
    transform:translate3d(-8px,0,0);
  }
}

@keyframes armiran-flyout-back-previous{
  0%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100%{
    opacity:0;
    transform:translate3d(8px,0,0);
  }
}

@keyframes armiran-flyout-back-next{
  0%{
    opacity:0;
    transform:translate3d(-8px,0,0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@media (max-width:900px) and (orientation:portrait){

  /* Never animate individual typography in the submenu transition. */
  .apple-mobile-main-links > *,
  .apple-mobile-service-links a{
    filter:none !important;
    -webkit-filter:none !important;
    text-shadow:none !important;
    -webkit-mask:none !important;
    mask:none !important;
  }

  /* Normal hamburger level is always the default. */
  .apple-mobile-panel--main,
  .apple-mobile-menu.is-services .apple-mobile-panel--main{
    transform:translate3d(0,0,0);
    opacity:1;
  }

  .apple-mobile-panel--services,
  .apple-mobile-menu.is-services .apple-mobile-panel--services{
    transform:translate3d(0,0,0);
    opacity:1;
  }

  .apple-mobile-panel--services{
    visibility:hidden;
    pointer-events:none;
  }

  /* Authoritative whole-level animations. */
  .apple-mobile-panel.anim-forward-out{
    animation:armiran-flyout-forward-previous .36s cubic-bezier(.4,0,.6,1) both !important;
  }

  .apple-mobile-panel.anim-forward-in{
    animation:armiran-flyout-forward-next .36s cubic-bezier(.4,0,.6,1) both !important;
  }

  .apple-mobile-panel.anim-back-out{
    animation:armiran-flyout-back-previous .36s cubic-bezier(.4,0,.6,1) both !important;
  }

  .apple-mobile-panel.anim-back-in{
    animation:armiran-flyout-back-next .36s cubic-bezier(.4,0,.6,1) both !important;
  }

  /* No extra transition can fight the keyframes. */
  .apple-mobile-panel--main,
  .apple-mobile-panel--services,
  .apple-mobile-menu.is-services .apple-mobile-panel--main,
  .apple-mobile-menu.is-services .apple-mobile-panel--services{
    transition:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }

  /* The transparent header must not steal taps from Back.
     X/hamburger remains interactive. */
  html.services-menu-open .armiran-nav{
    pointer-events:none !important;
  }

  html.services-menu-open .armiran-nav-toggle{
    pointer-events:auto !important;
  }

  /* Back control: mirror the real X box through JS. */
  .apple-mobile-back{
    position:fixed !important;
    top:var(--apple-back-top,48px) !important;
    left:var(--apple-back-left,28px) !important;
    width:var(--apple-back-size,30px) !important;
    height:var(--apple-back-size,30px) !important;
    z-index:1210 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
    transition:none !important;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  .apple-mobile-menu.is-services .apple-mobile-back{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .apple-mobile-back i{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
  }

  /* Compact Apple-like chevron, optically matched to the X. */
  .apple-mobile-back i::before,
  .apple-mobile-back i::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:10px !important;
    height:1.15px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:2px !important;
    background:#f5f5f7 !important;
    transform-origin:0 50% !important;
  }

  .apple-mobile-back i::before{
    transform:translate(-4px,-.6px) rotate(-45deg) !important;
  }

  .apple-mobile-back i::after{
    transform:translate(-4px,-.6px) rotate(45deg) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .apple-mobile-panel.anim-forward-out,
  .apple-mobile-panel.anim-forward-in,
  .apple-mobile-panel.anim-back-out,
  .apple-mobile-panel.anim-back-in{
    animation-duration:.01ms !important;
  }
}


/* =========================================================
   V19 — MOBILE MENU CONTENT ALIGNMENT ONLY
   Matches the user-marked top and right guides.
   No navigation or animation changes.
========================================================= */
@media (max-width:900px) and (orientation:portrait){

  /* Apply the same content origin to BOTH menu levels. */
  .apple-mobile-panel,
  .apple-mobile-panel--main,
  .apple-mobile-panel--services{
    padding-top:70px !important;
    padding-right:44px !important;
    padding-left:38px !important;
  }

  /* Neutralize the older submenu-specific top offset. */
  .apple-mobile-panel--services{
    padding-top:70px !important;
  }
}


/* =========================================================
   V21 — DEBUGGED BACK EXIT
   Only the chevron glyph animates; button geometry stays untouched.
========================================================= */
@keyframes armiran-back-glyph-exit{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  55%{
    opacity:.42;
    transform:translate3d(-1px,0,0) scale(.985);
  }
  100%{
    opacity:0;
    transform:translate3d(-2px,0,0) scale(.96);
  }
}

@media (max-width:900px) and (orientation:portrait){
  .apple-mobile-back.is-leaving i{
    animation:armiran-back-glyph-exit .20s cubic-bezier(.4,0,.6,1) both !important;
    transform-origin:50% 50% !important;
    will-change:opacity,transform;
  }

  /* Guarantee the glyph starts clean whenever the submenu opens again. */
  .apple-mobile-back:not(.is-leaving) i{
    opacity:1;
    transform:none;
    animation:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .apple-mobile-back.is-leaving i{
    animation-duration:.01ms !important;
  }
}