.discipline-switcher{
  --flippd-blue:#155bd7;
  --flippd-orange:#f45a1d;
  --flippd-yellow:#ffc32e;
  --flippd-black:#171717;
  padding:clamp(5.5rem,9vw,8.5rem) clamp(1.25rem,5vw,4rem);
  background:#f8f5f0;color:#160b06
}
.discipline-intro{width:min(1180px,100%);margin:0 auto 2.5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:2rem;align-items:end}
.discipline-intro h2{font-family:'Syne',sans-serif;font-size:clamp(42px,6vw,82px);line-height:.88;letter-spacing:-.06em}
.discipline-intro p{max-width:490px;color:#76594b;font-size:15px;line-height:1.7}
.discipline-panels{--panel-gap:12px;--panel-radius:24px;width:min(1180px,100%);height:min(68vw,680px);min-height:540px;margin:0 auto;display:flex;gap:var(--panel-gap);overflow:visible;background:transparent;container-type:inline-size}
.discipline-panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--panel-radius);color:#fffaf4;text-decoration:none;isolation:isolate;box-shadow:0 16px 36px rgba(3,5,12,.18)}
/* A fine, static rim follows each rounded screen, above the artwork/shade.
   It does not resize the panels or introduce an animated blur layer. */
.discipline-panel::after{content:"";position:absolute;inset:0;z-index:10;border:1px solid rgba(234,240,255,.18);border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.13);pointer-events:none}
.discipline-panels.is-ready .discipline-panel{transition:flex-grow .7s cubic-bezier(.22,1,.36,1)}
.discipline-panel.is-active{flex:4.35 1 0}
.discipline-web{background:radial-gradient(circle at 82% 15%,rgba(255,195,46,.42),transparent 28%),linear-gradient(145deg,#155bd7 0%,#0b2f78 82%)}
.discipline-logos{background:radial-gradient(circle at 78% 12%,rgba(21,91,215,.54),transparent 32%),linear-gradient(145deg,#252525 0%,#090909 88%)}
.discipline-campaigns{background:radial-gradient(circle at 82% 13%,rgba(255,195,46,.66),transparent 29%),linear-gradient(145deg,#f45a1d 0%,#a52e12 86%)}
.discipline-mashup{position:absolute;left:50%;top:2%;width:calc((100cqw - var(--panel-gap) * 3) * .59183673);height:80%;z-index:2;isolation:isolate;transform:translateX(-50%);pointer-events:none}
.discipline-panels.is-ready .discipline-mashup{transition:opacity .45s ease}
.discipline-preview{position:absolute;inset:16% 12% 23%;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}
.discipline-preview img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;box-shadow:0 16px 32px rgba(0,0,0,.2)}
.discipline-panels.is-ready .discipline-preview{transition:opacity .25s ease}
.discipline-panel.is-active .discipline-preview{opacity:0}
/* Fixed scene dimensions keep every flat card in place while a panel expands. */
.mash-card{position:absolute;display:block;overflow:hidden;background:#fff;box-shadow:0 25px 52px rgba(0,0,0,.32);translate:0 0;rotate:0deg}
/* Motion is owned by the animation controller; no CSS/WAAPI hand-off. */
.mash-card img{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
/* Restore the original shared perspective. Flat compositing keeps the five
   slab faces in their declared layer order, including while they move. */
.mashup-web{top:1%;height:80%;perspective:1050px;perspective-origin:50% 50%;transform-style:flat}
.mashup-web .mash-card{width:64%;aspect-ratio:16/9;box-sizing:border-box;padding:3px;border:1px solid rgba(230,237,250,.45);border-radius:14px;background:linear-gradient(135deg,#767d89 0%,#20242e 25%,#090b11 70%,#4c525f 100%);transform:perspective(1050px) rotateX(54deg) rotateZ(-24deg)}
.mashup-web .mash-card img{border-radius:10px;box-shadow:none}
.discipline-web .discipline-preview img{padding:3px;border:1px solid rgba(230,237,250,.4);border-radius:12px;background:#171b25}
.mashup-web .mash-card:nth-child(1){left:31%;top:3%;z-index:1}
.mashup-web .mash-card:nth-child(2){left:25%;top:13%;z-index:2}
.mashup-web .mash-card:nth-child(3){left:19%;top:23%;z-index:3}
.mashup-web .mash-card:nth-child(4){left:13%;top:33%;z-index:4}
.mashup-web .mash-card:nth-child(5){left:7%;top:43%;z-index:5}
.mashup-logos .mash-card{width:35%;aspect-ratio:1;border:7px solid rgba(255,255,255,.92)}
.mashup-logos .mash-card:nth-child(1){left:8%;top:12%;z-index:1;transform:rotate(-12deg)}
.mashup-logos .mash-card:nth-child(2){left:34%;top:7%;z-index:2;transform:rotate(7deg)}
.mashup-logos .mash-card:nth-child(3){left:56%;top:18%;z-index:3;transform:rotate(13deg)}
.mashup-logos .mash-card:nth-child(4){left:14%;top:43%;z-index:4;transform:rotate(8deg)}
.mashup-logos .mash-card:nth-child(5){left:43%;top:42%;z-index:5;transform:rotate(-8deg)}
.mashup-campaigns{top:3%;height:79%}
.mashup-campaigns .mash-card{width:29%;aspect-ratio:4/5;border:6px solid rgba(255,255,255,.92)}
.mashup-campaigns .mash-card:nth-child(1){left:3%;top:24%;z-index:1;transform:rotate(-13deg)}
.mashup-campaigns .mash-card:nth-child(2){left:20%;top:10%;z-index:2;transform:rotate(-7deg)}
.mashup-campaigns .mash-card:nth-child(3){left:37%;top:5%;z-index:3;transform:rotate(1deg)}
.mashup-campaigns .mash-card:nth-child(4){left:54%;top:12%;z-index:4;transform:rotate(8deg)}
.mashup-campaigns .mash-card:nth-child(5){left:70%;top:27%;z-index:5;transform:rotate(14deg)}
/* Two photographic prints and one taller motion frame, all genuinely visible. */
.campaign-pairing{top:9%;height:65%}
.campaign-pairing .mash-card{border:5px solid #fffaf4;border-radius:5px}
.campaign-pairing .mash-card:nth-child(1){width:35%;left:3%;top:16%;z-index:1;aspect-ratio:3/4;transform:rotate(-10deg)}
.campaign-pairing .mash-card:nth-child(2){width:35%;left:65%;top:12%;z-index:2;aspect-ratio:3/4;transform:rotate(10deg)}
.campaign-pairing .mash-card:nth-child(3){width:34%;left:33%;top:0;z-index:3;aspect-ratio:9/16;transform:rotate(-2deg)}
.campaign-pairing .mash-card img{object-fit:cover}
.media-caption{position:absolute;z-index:4;bottom:0;left:0;right:0;padding:7px 5px;background:#fffaf4;color:#171920;font:600 8px/1.2 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.discipline-video-surface{position:relative;display:block;overflow:hidden;width:100%;height:100%;background:#fff}
.discipline-video-surface video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;pointer-events:none}
.discipline-video-surface video.is-playing{opacity:1}
.discipline-playback{width:min(1180px,100%);margin:16px auto 0;display:flex;justify-content:flex-end;min-height:36px}
.discipline-playback button{font:500 11px/1.4 'Inter',sans-serif;min-height:36px;padding:8px 12px;background:#151925;color:#e8edf6;border:1px solid #ffffff38;border-radius:6px;cursor:pointer}
.discipline-playback button:hover{background:#242b3b}
.discipline-playback button:disabled{opacity:.65;cursor:default}
.discipline-playback button:focus-visible{outline:2px solid #ff752b;outline-offset:4px}
.discipline-playback button[hidden]{display:none}
/* One real interface preview, held in a quiet instrument-like screen. */
.discipline-tools .discipline-preview img{padding:3px;border:1px solid #c9ffeb55;border-radius:10px;background:#05251f}
.mashup-tools{top:12%;height:59%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.mashup-tools .tool-display{position:relative;flex:none;width:86%;aspect-ratio:16/10;max-height:calc(100% - 42px);border:1px solid #c9ffeb66;border-radius:18px;background:#082b24;box-shadow:0 32px 70px #001e2666;display:flex;flex-direction:column}
.tool-display-bar{flex:0 0 34px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid #e8fff314;color:#c8eade}
.tool-display-bar i{width:4px;height:4px;border:1px solid #c8eade99;border-radius:50%}
.tool-display-bar b{margin-left:auto;font:500 8px/1.2 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.mashup-tools .tool-display img{flex:1;min-height:0;object-fit:cover;object-position:top;background:#071f1c;box-shadow:none}
.mashup-tools .tool-display .discipline-video-surface{flex:1;min-height:0}
.mashup-tools .tool-display .discipline-video-surface :is(img,video){object-fit:contain;background:#fff}
.tool-display-index{width:86%;display:flex;justify-content:center;flex-wrap:wrap;gap:7px;color:#e3fff1}
.tool-display-index span{padding:6px 9px;border:1px solid #d8fff030;border-radius:20px;background:#001f2038;font:500 8px/1.3 'Inter',sans-serif;letter-spacing:.025em}
.discipline-panel:not(.is-active) .discipline-mashup{opacity:0}
.discipline-shade{position:absolute;inset:0;z-index:7;background:linear-gradient(180deg,rgba(8,5,3,.02) 35%,rgba(8,5,3,.86) 100%);transition:background .55s ease}
.discipline-panel:not(.is-active) .discipline-shade{background:linear-gradient(180deg,rgba(8,5,3,.2),rgba(8,5,3,.82))}
.discipline-panel:is(.discipline-tools,.discipline-campaigns).is-active .discipline-shade{background:linear-gradient(180deg,transparent 48%,rgba(8,5,3,.32) 76%,rgba(8,5,3,.88))}
.discipline-number{position:absolute;z-index:9;left:1.2rem;top:1.2rem;font-size:10px;font-weight:850;letter-spacing:.14em;color:rgba(255,250,244,.78)}
.discipline-copy{position:absolute;z-index:9;left:clamp(1.2rem,3vw,2.4rem);right:clamp(1.2rem,3vw,2.4rem);bottom:clamp(1.2rem,3vw,2.4rem);min-width:270px;display:block}
.discipline-copy strong{display:block;font-family:'Syne',sans-serif;font-size:clamp(32px,5vw,70px);line-height:.9;letter-spacing:-.06em;text-wrap:balance}
.discipline-short-label{display:none}
.discipline-copy small{display:block;margin-top:.8rem;color:rgba(255,250,244,.76);font-size:13px;line-height:1.5}
.discipline-copy b{display:inline-block;margin-top:1.2rem;padding:.5rem .8rem;border:1px solid rgba(255,250,244,.58);border-radius:8px;font-size:10px;font-weight:750;background:rgba(16,10,7,.22);backdrop-filter:blur(8px)}
.discipline-panel:not(.is-active) .discipline-copy{left:50%;right:auto;bottom:1.3rem;transform:translateX(-50%);min-width:0;width:max-content;max-width:calc(100% - 1rem)}
.discipline-panel:not(.is-active) .discipline-copy strong{font-size:clamp(15px,1.7vw,22px);letter-spacing:-.03em;white-space:nowrap}
.discipline-panel:not(.is-active) .discipline-full-label{display:none}.discipline-panel:not(.is-active) .discipline-short-label{display:inline}
.discipline-panel:not(.is-active) .discipline-copy small,.discipline-panel:not(.is-active) .discipline-copy b{display:none}
.discipline-panel:focus-visible{outline:4px solid var(--flippd-yellow);outline-offset:-4px}
@media(max-width:800px){
  .discipline-intro{grid-template-columns:1fr}
  .discipline-panels{--panel-gap:12px;--panel-radius:20px;height:auto;min-height:0;display:grid;background:transparent}
  .discipline-panel,.discipline-panel.is-active{height:160px;flex:none}
  .discipline-panels.is-ready .discipline-panel{transition:height .65s cubic-bezier(.22,1,.36,1)}
  .discipline-panel.is-active{height:min(130vw,520px)}
  .discipline-mashup{width:100cqw;height:min(101.4vw,405.6px);top:10px}
  .discipline-preview{inset:12px 12% 12px 58%}
  .discipline-panel:not(.is-active) .discipline-copy{left:1.25rem;bottom:1.15rem;transform:none}
  .discipline-panel:not(.is-active) .discipline-copy strong{font-size:24px}
  .discipline-number{left:auto;right:1.1rem}
  .discipline-copy strong{font-size:clamp(35px,11vw,54px)}
  .mashup-web .mash-card{width:76%;border-radius:12px}
  .mashup-web .mash-card img{border-radius:8px}
  .mashup-web .mash-card:nth-child(1){left:25%}.mashup-web .mash-card:nth-child(2){left:20%}.mashup-web .mash-card:nth-child(3){left:15%}.mashup-web .mash-card:nth-child(4){left:10%}.mashup-web .mash-card:nth-child(5){left:5%}
  .mashup-logos .mash-card{width:40%}.mashup-campaigns .mash-card{width:34%}
  .mashup-tools{top:42px;height:58%}
  .mashup-tools .tool-display{border-radius:14px}
  .campaign-pairing{top:42px;height:61%}
  .campaign-pairing .mash-card{border-width:3px}
  .media-caption{font-size:7px;padding:5px 2px}
}
@media(prefers-reduced-motion:reduce){.discipline-panel,.discipline-mashup,.discipline-preview,.mash-card{transition:none!important}.discipline-panel .mash-card{translate:0 0!important;rotate:0deg!important}}