/* Responsive motion and layout polish. Heavy WebGL remains desktop-only. */
:root {
  --experience-accent: #2f7465;
  --experience-accent-soft: #dce9df;
  --experience-rule: #b9cbc1;
  --experience-ink: #17352f;
  --experience-ease: cubic-bezier(.2,.72,.2,1);
}

/* The underline belongs to the words, never to an empty grid column. */
body.editorial-v23 .approach-v16-intro h2 .reading-accent-v21 {
  display: inline !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.editorial-v23 .approach-v16-intro h2 .reading-accent-v21 > span {
  display: inline !important;
  white-space: nowrap;
  padding-bottom: .08em;
  background: linear-gradient(transparent 76%, var(--experience-accent-soft) 76%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.editorial-v23 .approach-v16-intro h2 .reading-accent-v21 > span + span { margin-inline-start: .2em; }

/* A clearer hierarchy on the home page without scaling every line of copy. */
body.editorial-v23 .approach-v16-intro h2 {
  max-width: 15em;
  color: var(--experience-ink);
  font-size: clamp(36px, 3.5vw, 52px);
  line-height: 1.38;
  letter-spacing: -.035em;
  text-wrap: balance;
}
body.editorial-v23 .approach-v16-intro > p {
  max-width: 32em;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.9;
}
body.editorial-v23 .approach-v16-steps {
  gap: clamp(28px, 4vw, 64px);
}
body.editorial-v23 .approach-v16-steps h3 { font-size: clamp(22px, 1.75vw, 28px); }
body.editorial-v23 .approach-v16-steps p { max-width: 27em; }
body.editorial-v23 .works-aibo-feature .aibo-work-logo {
  width: min(100%, 480px) !important;
  height: auto !important;
  margin-inline: 0 !important;
}
body.editorial-v23 .works-aibo-feature .aibo-work-brand {
  display: block;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
}
body.editorial-v23 .approach-v16-mark img {
  animation: experience-mark-float 6.4s ease-in-out infinite;
  transform-origin: 50% 65%;
}
body.editorial-v23 .approach-v16-steps li:nth-child(2) .approach-v16-mark img { animation-delay: -2.1s; }
body.editorial-v23 .approach-v16-steps li:nth-child(3) .approach-v16-mark img { animation-delay: -4.2s; }

/* Desktop service story: move the message upward and give the illustration room. */
@media (min-width: 1025px) {
  body.editorial-v23 .approach-v16-intro {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
    gap: clamp(42px, 5vw, 80px);
    align-items: start;
  }
  body.editorial-v23 .approach-v16-intro h2 { max-width: none; }
  body.editorial-v23 #services .service-world-heading { top: 34px; }
  body.editorial-v23 #services .service-world-intro {
    top: 205px;
    width: min(43vw, 650px);
  }
  body.editorial-v23.editorial-layout-v13 #services .service-world-intro h2 {
    font-size: clamp(40px, 3.25vw, 50px) !important;
    line-height: 1.34;
    letter-spacing: -.04em;
  }
  body.editorial-v23 #services .service-world-intro p {
    max-width: 34em;
    font-size: clamp(18px, 1.35vw, 20px);
    line-height: 1.85;
  }
  body.editorial-v23 #services .service-story-panel {
    justify-content: flex-start !important;
    padding-top: clamp(150px, 18vh, 190px);
  }
  body.editorial-v23 #services .service-story-panel h3 {
    position: relative !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-bottom: 30px !important;
    font-size: clamp(38px, 3vw, 47px) !important;
    line-height: 1.36 !important;
  }
  body.editorial-v23 #services .service-story-description {
    max-width: 35em;
    font-size: clamp(18px, 1.3vw, 20px) !important;
    line-height: 1.86 !important;
  }
  body.editorial-v23 #services .service-world-sticky { left: 40%; width: 60%; }
  body.editorial-v23 #services .service-world-canvas { transform: scale(1.035); transform-origin: 50% 48%; }
}

/* Phones keep motion, but use three light image layers rather than WebGL. */
@media (max-width: 1024px) {
  html[data-render-mode="static"] .native-blender-hero .hero-visual {
    perspective: 900px;
    overflow: visible;
  }
  html[data-render-mode="static"] .native-blender-hero .native-poster {
    animation: experience-hero-float 9s ease-in-out infinite;
    transform-origin: 52% 65%;
    will-change: transform;
  }
  html[data-render-mode="static"] body #services .service-world-layout {
    display: flex !important;
    flex-direction: column;
    width: min(100% - 32px, 760px);
    padding-block: 54px 24px;
    gap: 0;
  }
  html[data-render-mode="static"] #services .service-world-heading { order: 0; margin-bottom: 42px; }
  html[data-render-mode="static"] #services .service-world-intro { order: 1; margin-bottom: 32px; }
  html[data-render-mode="static"] #services .service-world-intro h2 {
    width: fit-content;
    font-size: clamp(31px, 8.8vw, 42px) !important;
    line-height: 1.4 !important;
  }
  html[data-render-mode="static"] #services .service-world-intro p {
    font-size: clamp(16px, 4.35vw, 18px) !important;
    line-height: 1.85 !important;
  }
  html[data-render-mode="static"] #services .service-world-sticky.mobile-service-stage {
    display: grid !important;
    order: 2;
    position: sticky !important;
    top: 72px !important;
    z-index: 4;
    width: 100%;
    height: min(46svh, 410px) !important;
    min-height: 300px !important;
    margin: 0 0 20px;
    border-block: 1px solid color-mix(in srgb, var(--experience-rule), transparent 20%);
    background: color-mix(in srgb, #f6f7f1 92%, transparent);
    backdrop-filter: blur(12px);
    overflow: hidden;
  }
  html[data-render-mode="static"] #services .mobile-service-visual {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
  }
  html[data-render-mode="static"] #services .mobile-service-layer {
    position: absolute;
    inset: 50% auto auto 50%;
    display: block;
    width: min(112%, 620px);
    height: auto;
    opacity: 0;
    filter: saturate(.92) drop-shadow(0 24px 32px rgb(34 70 61 / .08));
    transform: translate(-50%, -48%) scale(.82) rotateX(2deg);
    transform-origin: 50% 58%;
    transition: opacity .75s var(--experience-ease), transform 1s var(--experience-ease), filter .75s ease;
    will-change: opacity, transform;
  }
  html[data-render-mode="static"] #services[data-mobile-phase="1"] .mobile-service-layer-1,
  html[data-render-mode="static"] #services[data-mobile-phase="2"] .mobile-service-layer-2,
  html[data-render-mode="static"] #services[data-mobile-phase="3"] .mobile-service-layer-3 {
    opacity: 1;
    filter: saturate(1) drop-shadow(0 24px 32px rgb(34 70 61 / .12));
    transform: translate(-50%, -51%) scale(1) rotateX(0deg);
    animation: experience-service-float 7s ease-in-out infinite;
  }
  html[data-render-mode="static"] #services .service-story-copy {
    order: 3;
    width: 100%;
    position: relative !important;
  }
  html[data-render-mode="static"] body #services .service-story-panel {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 64svh !important;
    padding: 44px 2px 72px !important;
    border-top: 0;
    opacity: .48 !important;
    transition: opacity .55s ease !important;
  }
  html[data-render-mode="static"] body #services .service-story-panel.is-mobile-current { opacity: 1 !important; }
  html[data-render-mode="static"] body #services .service-story-panel::before {
    content: "0" attr(data-world-copy);
    display: block;
    margin-bottom: 18px;
    color: var(--experience-accent);
    font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .12em;
  }
  html[data-render-mode="static"] body #services .service-story-panel h3 {
    width: fit-content;
    margin-bottom: 24px;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.42 !important;
  }
  html[data-render-mode="static"] body #services .service-story-description {
    max-width: 34em;
    font-size: clamp(16px, 4.25vw, 18px) !important;
    line-height: 1.88 !important;
  }
  html[data-render-mode="static"] body #services .mobile-service-still { display: none !important; }

  /* Always show the lightweight DX narrative rather than an empty iframe. */
  body.editorial-v23 .dx-layered-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(260px, 74vw, 390px);
    background: #edf3ef;
  }
  body.editorial-v23 .dx-layered-visual iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-height: inherit;
    background: #edf3ef;
  }
  body.editorial-v23 .dx-layered-caption p {
    font-size: clamp(23px, 6.6vw, 31px);
    line-height: 1.45;
    text-wrap: balance;
  }

  body.editorial-v23 .approach-v16-intro h2 {
    font-size: clamp(31px, 8.4vw, 40px);
    line-height: 1.45;
  }
  body.editorial-v23 .approach-v16-intro h2 .reading-accent-v21 > span + span { margin-inline-start: 0; }
  body.editorial-v23 .approach-v16-intro > p br { display: none; }

  /* Keep the Works lead card inside the phone viewport and remove its dead space. */
  body.editorial-v23 .works-aibo-feature .dx-layered-link { display: block; }
  body.editorial-v23 .works-aibo-feature .dx-layered-heading {
    display: block;
    min-height: 0;
    margin-bottom: 20px;
  }
  body.editorial-v23 .works-aibo-feature .aibo-work-logo {
    width: min(100%, 420px) !important;
    height: auto !important;
    margin: 8px 0 0 !important;
  }
  body.editorial-v23 .works-aibo-feature .aibo-work-brand {
    display: block;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
  }
  body.editorial-v23 .works-aibo-feature .dx-layered-visual {
    min-height: clamp(280px, 86vw, 380px);
  }
  body.editorial-v23 .works-aibo-feature .dx-layered-caption { margin-top: 20px; }
  body.editorial-v23 .works-aibo-feature { overflow: clip; }
}

/* Premium one-time entrances. Content stays visible when JS is unavailable. */
.motion-capable .experience-reveal {
  transition: opacity .8s var(--experience-ease), transform .8s var(--experience-ease);
  transition-delay: var(--experience-delay, 0ms);
}
.motion-capable .experience-reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(var(--experience-x, 0), var(--experience-y, 20px), 0);
}
.motion-capable .experience-from-left { --experience-x: -24px; --experience-y: 0; }
.motion-capable .experience-from-right { --experience-x: 24px; --experience-y: 0; }
.motion-capable .experience-from-bottom { --experience-x: 0; --experience-y: 20px; }

/* Keep the illustration anchored: write the source lines, then softly confirm. */
body.philosophy-v15 .ph17-diagram .ph-system-motion {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ph-system-motion .ph-source-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: ph-line-write 6.8s ease-in-out infinite both;
  animation-delay: var(--line-delay, 0s);
}
.ph-system-motion .ph-gear { animation: ph-gear-spin 12s linear infinite; transform-origin: 430px 138px; }
.ph-system-motion .ph-window-glow { opacity: .55; }
.ph-system-motion .ph-check {
  animation: ph-check-fade 6.8s ease-in-out infinite both;
  animation-delay: 1.5s;
}
.ph-system-motion .ph-person .ph-check { animation-delay: 2s; }

@media (max-width: 780px) {
  .motion-capable .experience-from-left,
  .motion-capable .experience-from-right { --experience-x: 0; --experience-y: 14px; }
  body.philosophy-v15 .ph17-diagram { padding: 18px 0 8px; }
}

@keyframes experience-hero-float {
  0%, 100% { transform: rotateX(0deg) rotateY(-1deg) translate3d(0, 0, 0) scale(1.01); }
  50% { transform: rotateX(1deg) rotateY(1.2deg) translate3d(0, -9px, 0) scale(1.025); }
}
@keyframes experience-service-float {
  0%, 100% { transform: translate(-50%, -51%) scale(1); }
  50% { transform: translate(-50%, -53%) scale(1.015); }
}
@keyframes experience-mark-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ph-line-write {
  0% { stroke-dashoffset: 1; opacity: 0; }
  2% { stroke-dashoffset: 1; opacity: 1; }
  10%, 80% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ph-gear-spin { to { transform: rotate(360deg); } }
@keyframes ph-check-fade {
  0%, 4% { opacity: 0; }
  15%, 65% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  body.editorial-v23 .approach-v16-mark img,
  html[data-render-mode="static"] .native-blender-hero .native-poster,
  html[data-render-mode="static"] #services .mobile-service-layer,
  body.philosophy-v15 .ph19-product,
  .ph-system-motion * { animation: none !important; transition-duration: .01ms !important; }
  .motion-capable .experience-reveal { opacity: 1 !important; filter: none !important; transform: none !important; }
}