/* Catalogue only: principles -> brand -> pulse -> existing services. */
.brand-story { position: relative; isolation: isolate; margin-top: 0; margin-bottom: 44px; }
.brand-story-panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.95fr) minmax(0,1fr); grid-template-rows: repeat(4,1fr); gap: 16px 56px; align-items: center; padding: 30px 38px 44px; }
/* Independent section backdrop, outside the pinned composition. */
.brand-story-space { position: absolute; inset: -24px 0 -260px; z-index: -1; overflow: hidden; pointer-events: none; mask-image: linear-gradient(transparent,black 10%,black 72%,transparent); }
.brand-story-space > span { position: absolute; inset: -90px -28px; }
.brand-space-grid { background-image: linear-gradient(rgba(105,180,212,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(105,180,212,.11) 1px,transparent 1px); background-size: 112px 112px; mask-image: radial-gradient(ellipse at 50% 40%,black 12%,transparent 76%); }
.brand-space-fields { background: radial-gradient(ellipse at 28% 35%,rgba(18,142,196,.21),transparent 47%),radial-gradient(ellipse at 78% 46%,rgba(190,42,64,.13),transparent 45%),radial-gradient(ellipse at 50% 78%,rgba(12,102,149,.1),transparent 40%); filter: blur(28px); }
.brand-space-texture { background-image: radial-gradient(circle at 13% 24%,rgba(173,222,237,.4) 0 1px,transparent 1.8px),radial-gradient(circle at 29% 61%,rgba(123,195,220,.28) 0 1px,transparent 1.8px),radial-gradient(circle at 46% 17%,rgba(165,221,244,.32) 0 1px,transparent 1.8px),radial-gradient(circle at 68% 74%,rgba(134,211,233,.3) 0 1px,transparent 1.8px),radial-gradient(circle at 87% 33%,rgba(225,144,158,.28) 0 1px,transparent 1.8px),radial-gradient(circle at 76% 12%,rgba(134,211,233,.26) 0 1px,transparent 1.8px),radial-gradient(circle at 19% 82%,rgba(134,211,233,.24) 0 1px,transparent 1.8px); }
.brand-space-texture::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent 0 178px,rgba(99,180,212,.055) 179px,transparent 181px 230px); mask-image: linear-gradient(90deg,transparent,black,transparent); }
.brand-space-texture::after { content: ""; position: absolute; inset: 0; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.brand-story-core { grid-column: 2; grid-row: 1 / 5; position: relative; z-index: 2; text-align: center; padding: 26px 16px; border: 1px solid rgba(64,164,225,.22); border-radius: 32px; background: linear-gradient(150deg,#092439,#061321); box-shadow: 0 22px 50px rgba(0,0,0,.2); }
.brand-story-core img { display: block; width: 160px; height: 133px; object-fit: contain; margin: 0 auto 12px; }
.brand-story-core #brand-story-title { margin: 0; color: #138fff; font-size: clamp(32px,3vw,44px); letter-spacing: -1.8px; }
.brand-story-core h2 span { color: #ff373d; }
.brand-story-principles { display: contents; padding: 0; margin: 0; list-style: none; }
.brand-principle { position: relative; z-index: 2; display: flex; align-items: center; min-height: 74px; padding: 18px 20px; border: 1px solid transparent; border-bottom-color: rgba(75,157,211,.14); border-radius: 8px; background: linear-gradient(110deg,rgba(10,34,50,.46),rgba(6,20,33,.06)); }
.brand-principle h3 { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; text-wrap: balance; }
.brand-principle:nth-child(odd) { grid-column: 1; }
.brand-principle:nth-child(even) { grid-column: 3; }
.brand-principle:nth-child(-n+2) { grid-row: 1; }
.brand-principle:nth-child(n+3):nth-child(-n+4) { grid-row: 2; }
.brand-principle:nth-child(n+5):nth-child(-n+6) { grid-row: 3; }
.brand-principle:nth-child(n+7) { grid-row: 4; }
.brand-principle:nth-child(1), .brand-principle:nth-child(7) { margin-left: 18px; }
.brand-principle:nth-child(2), .brand-principle:nth-child(8) { margin-right: 18px; }
.brand-story-wires, .brand-story-signal { display: none; pointer-events: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .brand-story.is-running { height: calc(var(--brand-height) + var(--brand-travel)); }
  .is-running .brand-story-panel { position: sticky; top: var(--brand-top); }
  /* The section scrolls naturally. Compensating only part of that travel leaves
     visible upward drift: grid 14%, light 30%, particles 44% of pinned scroll. */
  .is-running .brand-space-grid { transform: translate3d(calc(var(--brand-space-scroll,0px) * .012),calc(var(--brand-space-scroll,0px) * .86),0); }
  .is-running .brand-space-fields { transform: translate3d(calc(var(--brand-space-scroll,0px) * -.035),calc(var(--brand-space-scroll,0px) * .7),0); }
  .is-running .brand-space-texture { transform: translate3d(calc(var(--brand-space-scroll,0px) * .018),calc(var(--brand-space-scroll,0px) * .56),0); }
  .is-running .brand-story-wires { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
  .brand-story-wire { fill: none; stroke: #41b6ed; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(56,175,235,.7)); }
  .brand-story-wire.is-red { stroke: #ed718b; }
  .is-running .brand-principle[data-side="left"] { transform: translateY(calc(var(--brand-progress,0) * -8px)); }
  .is-running .brand-principle[data-side="right"] { transform: translateY(calc(var(--brand-progress,0) * 8px)); }
  .is-running .brand-principle { border-bottom-color: rgba(87,171,224,calc(.14 + var(--brand-linked,0) * .22)); background: linear-gradient(110deg,rgba(20,97,138,calc(.06 + var(--brand-linked,0) * .09 + var(--brand-flash,0) * .08)),transparent); text-shadow: 0 0 18px rgba(79,191,239,calc(var(--brand-linked,0) * .16 + var(--brand-flash,0) * .24)); }
  .is-running .brand-story-core {
    border-color: rgba(86,180,223,calc(.1 + var(--brand-energy,0) * .48));
    background: linear-gradient(150deg,rgba(15,50,72,.18),transparent),rgb(calc(4 + var(--brand-energy,0) * 5),calc(15 + var(--brand-energy,0) * 21),calc(24 + var(--brand-energy,0) * 33));
    box-shadow: 0 22px 50px rgba(0,0,0,.2),-14px 2px calc(16px + var(--brand-energy,0) * 48px) rgba(22,137,248,calc(var(--brand-energy,0) * .34 + var(--brand-flash,0) * .22)),14px 8px calc(12px + var(--brand-energy,0) * 40px) rgba(248,53,83,calc(var(--brand-energy,0) * .2 + var(--brand-flash,0) * .16));
    transition: box-shadow 180ms ease-out,border-color 180ms ease-out,background-color 180ms ease-out;
  }
  .is-running .brand-story-core img, .is-running .brand-story-core h2 {
    opacity: calc(.36 + var(--brand-energy,0) * .64);
    transform: translateY(calc(8px - var(--brand-assembly,0) * 8px)) scale(calc(.95 + var(--brand-assembly,0) * .05));
    filter: brightness(calc(.72 + var(--brand-energy,0) * .28)) drop-shadow(0 0 calc(var(--brand-energy,0) * 8px + var(--brand-flash,0) * 12px) rgba(149,208,255,calc(var(--brand-energy,0) * .22 + var(--brand-flash,0) * .43)));
    transition: opacity 180ms ease-out,filter 180ms ease-out;
  }
  .is-running .brand-story-signal { display: block; position: absolute; top: 0; left: 0; width: 100%; z-index: 3; overflow: visible; }
  .brand-signal-core, .brand-signal-glow { fill: url(#p27-discharge-light); }
  .brand-signal-core { filter: drop-shadow(0 0 3px #ddfaff) drop-shadow(0 0 9px #68d5f6); }
  .brand-signal-glow { opacity: .85; filter: blur(6px) drop-shadow(0 0 10px #31bce7); }
  .brand-signal-bloom, .brand-signal-spread { fill: url(#p27-discharge-bloom); }
  .brand-signal-bloom { filter: blur(3px) drop-shadow(0 0 14px #65d8ed); }
  .brand-signal-spread { filter: blur(8px); }
  #catalog-services-heading.brand-receiver { position: relative; isolation: isolate; }
  #catalog-services-heading.brand-receiver::before { content: ""; position: absolute; top: -70px; left: 0; right: 0; height: 240px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 30%,rgba(84,206,242,.48),rgba(18,128,191,.18) 34%,transparent 70%); opacity: var(--brand-spread,0); transform: scaleX(calc(.15 + (1 - var(--brand-spread,0)) * .85)); }
  #catalog-services-heading.brand-receiver .catalog-detail h3 { text-shadow: 0 0 10px rgba(221,250,255,calc(var(--brand-activation,0) * .9)),0 0 32px rgba(81,194,245,calc(var(--brand-awake,0) * .2 + var(--brand-activation,0) * .8)); }
  #catalog-services-heading.brand-receiver .catalog-detail {
    position: relative;
    scale: calc(1 + var(--brand-awake,0) * .006 + var(--brand-activation,0) * .034);
    border-color: rgba(191,240,255,calc(.18 + var(--brand-awake,0) * .42 + var(--brand-activation,0) * .4));
    background: radial-gradient(ellipse at 50% 0%,rgba(226,250,255,calc(var(--brand-activation,0) * .76)),transparent 78%),linear-gradient(120deg,rgba(35,149,213,calc(var(--brand-awake,0) * .12 + var(--brand-activation,0) * .38)),rgba(24,123,171,calc(var(--brand-awake,0) * .05))),var(--panel);
    box-shadow: 0 0 0 2px rgba(215,248,255,calc(var(--brand-activation,0) * .95)),0 0 calc(24px + var(--brand-activation,0) * 66px) rgba(52,175,224,calc(var(--brand-awake,0) * .26 + var(--brand-activation,0) * .64)),inset 0 0 56px rgba(134,224,247,calc(var(--brand-activation,0) * .52));
  }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .brand-story-panel { gap: 16px 28px; padding: 26px 24px 36px; grid-template-columns: minmax(0,1fr) 260px minmax(0,1fr); }
  .brand-principle { padding: 16px; gap: 10px; }
  .brand-principle:nth-child(n) { margin-inline: 0; }
}
@media (max-width: 900px) {
  .brand-story { margin-top: 28px; margin-bottom: 20px; }
  .brand-story-panel { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; gap: 12px; padding: 20px 0; }
  .brand-story-core { grid-column: 1 / -1; grid-row: auto; padding: 22px; margin: 0 12px 8px; }
  .brand-story-core img { width: 96px; height: 80px; }
  .brand-story-core #brand-story-title { font-size: 34px; }
  .brand-principle:nth-child(n) { grid-column: auto; grid-row: auto; margin: 0; padding: 15px 12px; min-height: 88px; gap: 8px; }
  .brand-principle h3 { font-size: 14px; }
  .brand-story-space { inset: 0 0 -40px; opacity: .65; }
}