/* =========================================================
   OUC Case Study — Chatter Buzz Media
   Design tokens
   ========================================================= */
body.single-case-studies .site-main{
  /* Palette */
  --navy-900:#04111F;   /* deepest background */
  --navy-800:#071B33;   /* primary dark surface */
  --slate:#1E293B;      /* body text */
  --blue:#0072CE;       /* action blue */
  --blue-pale:#EAF5FF;  /* tinted background */
  --orange:#F7901E;     /* accent */
  --orange-dark:#e07f15;
  --green:#84BD00;
  --canvas:#F7F9FC;     /* light page background */
  --border:#E5EAF0;
  --white:#fff;

  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter:24px;
  --maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
}

body.single-case-studies .site-main h1,
body.single-case-studies .site-main h2,
body.single-case-studies .site-main h3,
body.single-case-studies .site-main h4,
body.single-case-studies .site-main h5,
body.single-case-studies .site-main h6 {
  text-transform: none;
}

body.single-case-studies .site-main .btn:after {
  content: none;
}

@media (min-width:768px){ body.single-case-studies .site-main{ --gutter:48px; } }
@media (min-width:1024px){ body.single-case-studies .site-main{ --gutter:96px; } }

/* =========================================================
   Base
   ========================================================= */
body.single-case-studies .site-main *,body.single-case-studies .site-main *::before,body.single-case-studies .site-main *::after{ box-sizing:border-box; }

html:has(body.single-case-studies){ scroll-behavior:smooth; }

body.single-case-studies .site-main:after,
body.single-case-studies .site-main:before {
  content: none;
}

body.single-case-studies .site-main {
  margin:-123px 0 0;
  font-family:var(--font);
  background:var(--canvas);
  color:var(--slate);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.single-case-studies footer {
  background: #000;
}

body.single-case-studies .site-main ::selection{ background:var(--orange); color:#fff; }

body.single-case-studies .site-main img{ display:block; max-width:100%; }
body.single-case-studies .site-main button{ font:inherit; cursor:pointer; }
body.single-case-studies .site-main a{ text-decoration:none; }
body.single-case-studies .site-main ul{ list-style:none; margin:0; padding:0; }

body.single-case-studies .site-main :focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

body.single-case-studies .site-main .icon{
  width:1em; height:1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* =========================================================
   Shared type
   ========================================================= */
body.single-case-studies .site-main .h2{
  font-size:32px;
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.1;
  margin:0;
}
body.single-case-studies .site-main .h2--dark{ color:var(--navy-800); }
body.single-case-studies .site-main .h2--light{ color:#fff; }

body.single-case-studies .site-main .lede{
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  color:var(--slate);
  margin:0;
}
body.single-case-studies .site-main .lede--light{ color:rgba(255,255,255,.7); }

body.single-case-studies .site-main .eyebrow{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  margin:0 0 24px;
}
body.single-case-studies .site-main .eyebrow--blue{ color:var(--blue); }
body.single-case-studies .site-main .eyebrow--orange{ color:var(--orange); }

body.single-case-studies .site-main .micro-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:rgba(255,255,255,.4);
  margin:0 0 24px;
}
body.single-case-studies .site-main .micro-label--dark{ color:rgba(30,41,59,.4); }
body.single-case-studies .site-main .micro-label--blue{ color:rgba(0,114,206,.5); }
body.single-case-studies .site-main .micro-label--onblue{ color:rgba(255,255,255,.5); }

/* Translucent "placeholder" plate over comp images */
body.single-case-studies .site-main .overlay-label{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  padding:0 10%;
  text-align:center;
  background:rgba(7,27,51,.4);
  backdrop-filter:blur(2px);
  transition:background .5s;
  font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#fff;
  pointer-events:none;
}
@media (min-width:768px){ body.single-case-studies .site-main .overlay-label{ font-size:12px; } }
body.single-case-studies .site-main .shot:hover .overlay-label,
body.single-case-studies .site-main .path-card:hover .overlay-label,
body.single-case-studies .site-main .micro-card:hover .overlay-label{ background:rgba(7,27,51,.6); }

body.single-case-studies .site-main .section-head{ max-width:var(--maxw); margin:0 auto 80px; }
body.single-case-studies .site-main .section-head--center{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative; z-index:10;
}
body.single-case-studies .site-main .section-head--center .lede{ max-width:768px; }

body.single-case-studies .site-main .br-md,body.single-case-studies .site-main .br-lg{ display:none; }

@media (min-width:768px){
  body.single-case-studies .site-main .h2{ font-size:56px; }
  body.single-case-studies .site-main .lede{ font-size:20px; }
  body.single-case-studies .site-main .eyebrow{ font-size:14px; }
  body.single-case-studies .site-main .br-md{ display:inline; }
}
@media (min-width:1024px){
  body.single-case-studies .site-main .h2{ font-size:72px; }
  body.single-case-studies .site-main .lede{ font-size:22px; }
  body.single-case-studies .site-main .br-lg{ display:inline; }
}

/* Ambient blur blobs -------------------------------------------------- */
body.single-case-studies .site-main .blob{
  position:absolute;
  border-radius:9999px;
  filter:blur(150px);
  pointer-events:none;
  z-index:0;
}
body.single-case-studies .site-main .blob--blue{ background:rgba(0,114,206,.1); }
body.single-case-studies .site-main .blob--amber{ background:rgba(247,144,30,.1); }
body.single-case-studies .site-main .blob--pale{ background:var(--blue-pale); }
body.single-case-studies .site-main .blob--faint{ background:rgba(0,114,206,.05); }
body.single-case-studies .site-main .blob--tr{ top:0; right:0; width:50vw; height:50vw; }
body.single-case-studies .site-main .blob--tl{ top:0; left:0; width:50vw; height:50vw; }
body.single-case-studies .site-main .blob--br{ bottom:0; right:0; width:40vw; height:40vw; }
body.single-case-studies .site-main .blob--bl{ bottom:0; left:25%; width:30vw; height:30vw; }
body.single-case-studies .site-main .blob--left{ top:25%; left:0; width:40vw; height:40vw; }
body.single-case-studies .site-main .blob--right{ bottom:25%; right:0; width:30vw; height:30vw; }
body.single-case-studies .site-main .blob--fill{ inset:0; background:rgba(0,114,206,.2); filter:blur(100px); }
body.single-case-studies .site-main .blob--center{
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:80vw; height:80vw; background:rgba(247,144,30,.15);
}
@media (min-width:768px){ body.single-case-studies .site-main .blob--center{ width:60vw; height:60vw; } }

/* =========================================================
   Scroll progress + nav
   ========================================================= */
body.single-case-studies .site-main .progress{
  position:fixed; inset:0 0 auto 0; height:4px;
  background:var(--orange);
  transform-origin:left; transform:scaleX(0);
  z-index:50;
}

body.single-case-studies .site-main .nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
@media (min-width:768px){ body.single-case-studies .site-main .nav{ padding:24px 48px; } }

body.single-case-studies .site-main .nav__logo{
  width:150px; height:40px;
  display:flex; align-items:center;
  padding:0; border:0; background:none;
  transition:opacity .2s;
}
body.single-case-studies .site-main .nav__logo:hover{ opacity:.8; }
body.single-case-studies .site-main .nav__logo img{ width:100%; height:100%; object-fit:contain; }
@media (min-width:768px){ body.single-case-studies .site-main .nav__logo{ width:180px; height:50px; } }

body.single-case-studies .site-main .nav__close{
  display:none;
  align-items:center; gap:12px;
  border:0; background:none;
  font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--slate);
  transition:color .2s;
}
body.single-case-studies .site-main .nav__close span{ font-size:24px; line-height:1; font-weight:300; margin-bottom:4px; }
body.single-case-studies .site-main .nav__close:hover{ color:var(--orange); }
@media (min-width:768px){ body.single-case-studies .site-main .nav__close{ display:flex; } }

/* =========================================================
   Browser chrome (shared component)
   ========================================================= */
body.single-case-studies .site-main .browser{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--border);
  background:#fff;
}
body.single-case-studies .site-main .browser--flush{ border-radius:24px 24px 0 0; border-bottom:0; }
body.single-case-studies .site-main .browser--dark{ background:var(--navy-800); border-color:rgba(255,255,255,.1); }
body.single-case-studies .site-main .browser--mini{ border-radius:32px; }

body.single-case-studies .site-main .browser__bar{
  display:flex; align-items:center; gap:12px;
  height:48px; padding:0 24px;
  background:#fff;
  border-bottom:1px solid var(--border);
}
body.single-case-studies .site-main .browser--dark .browser__bar{ background:var(--navy-900); border-bottom-color:rgba(255,255,255,.1); height:40px; padding:0 16px; }
body.single-case-studies .site-main .browser--mini .browser__bar{ height:40px; padding:0 20px; gap:10px; background:var(--canvas); }

body.single-case-studies .site-main .browser__dots{ display:flex; gap:8px; }
body.single-case-studies .site-main .browser__dots i{ width:12px; height:12px; border-radius:50%; background:var(--border); }
body.single-case-studies .site-main .browser--dark .browser__dots i{ background:rgba(255,255,255,.2); }
body.single-case-studies .site-main .browser__dots--sm i{ width:10px; height:10px; }
body.single-case-studies .site-main .browser--mini .browser__dots i{ width:10px; height:10px; }

body.single-case-studies .site-main .browser__url{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:12px;
  max-width:200px; margin:0 auto;
  padding:6px 24px;
  border-radius:8px;
  background:var(--canvas);
  border:1px solid var(--border);
  box-shadow:inset 0 2px 4px rgba(7,27,51,.05);
  font-size:12px; font-weight:500; color:rgba(30,41,59,.6);
}
body.single-case-studies .site-main .browser--dark .browser__url{
  background:var(--navy-900); border-color:transparent; box-shadow:none;
  color:rgba(255,255,255,.4); font-size:10px; padding:4px 16px; max-width:150px;
}
body.single-case-studies .site-main .browser__url .icon{ width:14px; height:14px; }

body.single-case-studies .site-main .browser__viewport{
  position:relative;
  aspect-ratio:16/9;
  background:var(--navy-900);
  overflow:hidden;
}
body.single-case-studies .site-main .browser__viewport iframe{ width:100%; height:100%; border:0; display:block; }
body.single-case-studies .site-main .browser__viewport--zoom iframe{ transform:scale(1.35); transform-origin:center; }

body.single-case-studies .site-main .browser__shot{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--canvas);
}
body.single-case-studies .site-main .browser__shot img{ width:100%; height:100%; object-fit:cover; object-position:top; }
body.single-case-studies .site-main .browser__shot img.is-centered{ object-position:center; }
body.single-case-studies .site-main .browser__shot--dim img{ opacity:.3; }

@media (min-width:768px){
  body.single-case-studies .site-main .browser{ border-radius:32px; }
  body.single-case-studies .site-main .browser--flush{ border-radius:32px 32px 0 0; }
  body.single-case-studies .site-main .browser__bar{ height:64px; padding:0 32px; gap:16px; }
  body.single-case-studies .site-main .browser--dark .browser__bar{ height:64px; padding:0 32px; }
  body.single-case-studies .site-main .browser__dots i{ width:16px; height:16px; }
  body.single-case-studies .site-main .browser__dots--sm i{ width:12px; height:12px; }
  body.single-case-studies .site-main .browser__url{ font-size:14px; padding:10px 24px; max-width:320px; }
  body.single-case-studies .site-main .browser--dark .browser__url{ font-size:14px; padding:10px 24px; max-width:320px; }
  body.single-case-studies .site-main .browser__url .icon{ width:16px; height:16px; }
  body.single-case-studies .site-main .browser__shot{ aspect-ratio:16/10; }
  body.single-case-studies .site-main .browser__viewport--zoom iframe{ transform:scale(1.15); }
}

body.single-case-studies .site-main .browser--slim .browser__bar{ height:40px; padding:0 16px; }
body.single-case-studies .site-main .browser--xslim .browser__bar{ height:32px; padding:0 16px; }
@media (min-width:768px){
  body.single-case-studies .site-main .browser--slim .browser__bar{ height:48px; padding:0 24px; }
  body.single-case-studies .site-main .browser--xslim .browser__bar{ height:48px; padding:0 24px; }
}

/* Mute button --------------------------------------------------------- */
body.single-case-studies .site-main .mute-btn{
  position:absolute; right:16px; bottom:16px; z-index:30;
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border:0; border-radius:9999px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em;
  transition:background .2s, opacity .3s;
}
body.single-case-studies .site-main .mute-btn:hover{ background:rgba(0,0,0,.7); }
body.single-case-studies .site-main .mute-btn .icon{ width:16px; height:16px; }
body.single-case-studies .site-main .mute-btn--hover{ opacity:0; right:24px; bottom:24px; }
body.single-case-studies .site-main .browser:hover .mute-btn--hover,
body.single-case-studies .site-main .mute-btn--hover:focus-visible{ opacity:1; }

/* =========================================================
   Hero
   ========================================================= */
body.single-case-studies .site-main .hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:72px var(--gutter) 0;
  overflow:hidden;
  background:linear-gradient(to bottom,#3e3e3e,#030303);
}
@media (min-width:768px){ body.single-case-studies .site-main .hero{ padding-top:100px; } }

body.single-case-studies .site-main .hero__glow{
  position:absolute; left:50%; transform:translateX(-50%);
  top:30%; bottom:27%;
  width:min(1318px,90vw);
  background:rgba(0,114,206,.5);
  filter:blur(75px);
  border-radius:9999px;
  mix-blend-mode:color;
  pointer-events:none;
}

body.single-case-studies .site-main .hero__inner{
  position:relative; z-index:10;
  max-width:1024px; margin-bottom:80px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

body.single-case-studies .site-main .eyebrow-dots{
  display:flex; align-items:center; gap:16px;
  margin:0 0 32px;
}
body.single-case-studies .site-main .eyebrow-dots__text{
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--green);
}
body.single-case-studies .site-main .eyebrow-dots .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); }
@media (min-width:768px){ body.single-case-studies .site-main .eyebrow-dots__text{ font-size:14px; } }

body.single-case-studies .site-main .hero__mark{ height:64px; object-fit:contain; margin-bottom:32px; }
@media (min-width:768px){ body.single-case-studies .site-main .hero__mark{ height:80px; } }

body.single-case-studies .site-main .hero__title{
  font-size:36px; font-weight:500;
  letter-spacing:-.04em; line-height:1.05;
  color:#fafafa; margin:0 0 32px;
}
@media (min-width:768px){ body.single-case-studies .site-main .hero__title{ font-size:64px; white-space:nowrap; } }
@media (min-width:1024px){ body.single-case-studies .site-main .hero__title{ font-size:80px; } }

body.single-case-studies .site-main .hero__lede{
  font-size:16px; font-weight:300; line-height:1.8;
  color:#eceef2; max-width:768px; margin:0 0 48px;
}
@media (min-width:768px){ body.single-case-studies .site-main .hero__lede{ font-size:20px; } }
@media (min-width:1024px){ body.single-case-studies .site-main .hero__lede{ font-size:22px; } }

body.single-case-studies .site-main .pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
body.single-case-studies .site-main .pill{
  padding:10px 20px;
  border-radius:9999px;
  border:1px solid rgba(229,234,240,1);
  background:#89949b;
  backdrop-filter:blur(4px);
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em;
  color:#071B33;
  box-shadow: 0px 1px 2px -1px #0000001A;

}
@media (min-width:768px){ body.single-case-studies .site-main .pills{ gap:16px; } }

body.single-case-studies .site-main .hero__frame{
  position:relative; z-index:20;
  width:100%; max-width:1152px; margin:0 auto;
  transform-origin:top;
}

/* =========================================================
   Project overview
   ========================================================= */
body.single-case-studies .site-main .overview{
  position:relative; z-index:20;
  padding:96px var(--gutter);
  background:#fff;
}
@media (min-width:768px){ body.single-case-studies .site-main .overview{ padding:128px var(--gutter); } }

body.single-case-studies .site-main .overview__grid{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; gap:64px;
  align-items:flex-start;
}
@media (min-width:1024px){
  body.single-case-studies .site-main .overview__grid{ flex-direction:row; gap:96px; }
  body.single-case-studies .site-main .overview__intro{ width:33.333%; }
  body.single-case-studies .site-main .overview__cards{ width:66.667%; }
}

body.single-case-studies .site-main .overview__intro .h2{ font-size:32px; margin-bottom:24px; }
@media (min-width:768px){ body.single-case-studies .site-main .overview__intro .h2{ font-size:40px; } }

body.single-case-studies .site-main .overview__cards{
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:768px){ body.single-case-studies .site-main .overview__cards{ grid-template-columns:1fr 1fr; gap:32px; } }

body.single-case-studies .site-main .meta-card{
  position:relative; overflow:hidden;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:32px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 8px 30px rgba(7,27,51,.06);
  transition:transform .3s;
}
body.single-case-studies .site-main .meta-card:hover{ transform:translateY(-4px); }
body.single-case-studies .site-main .meta-card::before{
  content:""; position:absolute; top:0; left:0;
  width:100%; height:6px; background:var(--orange);
}
body.single-case-studies .site-main .meta-card h3{
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em;
  color:rgba(30,41,59,.5);
  margin:0 0 12px;
}
body.single-case-studies .site-main .meta-card p{
  font-size:16px; font-weight:500; line-height:1.4;
  color:var(--navy-800); margin:0;
}
@media (min-width:768px){ body.single-case-studies .site-main .meta-card p{ font-size:20px; } }
@media (min-width:1024px){ body.single-case-studies .site-main .meta-card p{ font-size:22px; } }

/* =========================================================
   Walkthrough (sticky, 100vh scroll track)
   ========================================================= */
body.single-case-studies .site-main .walkthrough{
  position:relative;
  height:100vh;
  background:var(--navy-900);
  color:#fff;
}
body.single-case-studies .site-main .walkthrough__sticky{
  position:sticky; top:0;
  height:100vh; width:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  overflow:clip;
  padding:96px var(--gutter) 24px;
}
body.single-case-studies .site-main .walkthrough__head{
  position:relative; z-index:10;
  max-width:var(--maxw); margin:96px auto 32px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
body.single-case-studies .site-main .walkthrough__head .h2{ margin-bottom:16px; }
body.single-case-studies .site-main .walkthrough__head .lede{ max-width:768px; }
@media (min-width:768px){
  body.single-case-studies .site-main .walkthrough__head{ margin-top:0; margin-bottom:64px; }
  body.single-case-studies .site-main .walkthrough__head .h2{ margin-bottom:24px; }
}

body.single-case-studies .site-main .walkthrough__frame{
  position:relative; z-index:10;
  width:100%; max-width:1400px; margin:0 auto;
  transform-origin:center;
}
@media (min-width:768px){
  /* keep the 16:9 frame + chrome inside the sticky viewport */
  body.single-case-studies .site-main .walkthrough__frame{ width:min(100%, calc((100vh - 540px) * 1.6)); }
}
body.single-case-studies .site-main .walkthrough__frame .browser{
  border-radius:24px 24px 12px 12px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
}
@media (min-width:768px){
  body.single-case-studies .site-main .walkthrough__frame .browser{ border-radius:32px 32px 12px 12px; }
}

/* =========================================================
   Homepage deconstructed
   ========================================================= */
body.single-case-studies .site-main .deconstructed{
  position:relative; overflow:hidden;
  padding:80px var(--gutter);
  background:#fff;
}
body.single-case-studies .site-main .deconstructed .section-head{ margin-bottom:128px; }
@media (min-width:768px){ body.single-case-studies .site-main .deconstructed{ padding:128px var(--gutter); } }
@media (min-width:1024px){ body.single-case-studies .site-main .deconstructed{ padding:192px var(--gutter); } }

body.single-case-studies .site-main .steps{
  position:relative; z-index:10;
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; gap:96px;
}
@media (min-width:768px){ body.single-case-studies .site-main .steps{ gap:192px; } }

body.single-case-studies .site-main .step{
  display:flex; flex-direction:column;
  align-items:center; gap:32px;
}
@media (min-width:1024px){
  body.single-case-studies .site-main .step{ flex-direction:row; gap:96px; }
  body.single-case-studies .site-main .step__media{ width:60%; order:1; }
  body.single-case-studies .site-main .step__copy{ width:40%; order:2; }
  body.single-case-studies .site-main .step--flip .step__media{ order:2; }
  body.single-case-studies .site-main .step--flip .step__copy{ order:1; }
}
body.single-case-studies .site-main .step__media{ width:100%; order:2; }
body.single-case-studies .site-main .step__copy{ width:100%; order:1; }

body.single-case-studies .site-main .step__media .browser{
  border-radius:32px;
}

body.single-case-studies .site-main .step__num{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--orange); color:#fff;
  font-size:18px; font-weight:500;
  margin-bottom:16px;
  box-shadow:0 10px 15px -3px rgba(247,144,30,.2);
}
body.single-case-studies .site-main .step__copy h3{
  font-size:28px; font-weight:500;
  color:var(--navy-800);
  line-height:1.2; letter-spacing:-.02em;
  margin:0 0 16px;
}
body.single-case-studies .site-main .step__copy p{
  font-size:16px; font-weight:300; line-height:1.6;
  color:var(--slate); margin:0;
}
@media (min-width:768px){
  body.single-case-studies .site-main .step__num{ width:56px; height:56px; font-size:22px; margin-bottom:32px; }
  body.single-case-studies .site-main .step__copy h3{ font-size:36px; margin-bottom:24px; }
  body.single-case-studies .site-main .step__copy p{ font-size:20px; line-height:1.8; }
}
@media (min-width:1024px){ body.single-case-studies .site-main .step__copy p{ font-size:22px; } }

/* =========================================================
   Navigation architecture
   ========================================================= */
body.single-case-studies .site-main .architecture{
  position:relative; overflow:hidden;
  padding:80px var(--gutter);
  background:var(--navy-800); color:#fff;
}
body.single-case-studies .site-main .architecture .section-head{ margin-bottom:96px; }
body.single-case-studies .site-main .architecture .section-head .h2{ margin-bottom:32px; }
@media (min-width:768px){ body.single-case-studies .site-main .architecture{ padding:128px var(--gutter); } }
@media (min-width:1024px){ body.single-case-studies .site-main .architecture{ padding:192px var(--gutter); } }

body.single-case-studies .site-main .architecture__grid{
  position:relative; z-index:10;
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr;
  gap:64px; align-items:center;
}
@media (min-width:1024px){
  body.single-case-studies .site-main .architecture__grid{ grid-template-columns:repeat(12,1fr); gap:32px; }
  body.single-case-studies .site-main .architecture__desktop{ grid-column:span 8; }
  body.single-case-studies .site-main .architecture__mobile{ grid-column:span 4; }
}

body.single-case-studies .site-main .architecture__desktop{ position:relative; }
body.single-case-studies .site-main .architecture__desktop .browser{
  border-radius:16px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
  background:var(--navy-900);
}
body.single-case-studies .site-main .architecture__desktop .browser__shot{ aspect-ratio:16/10; background:var(--navy-800); }

body.single-case-studies .site-main .architecture__mobile{
  position:relative;
  display:flex; justify-content:center;
  margin-top:48px;
}
@media (min-width:1024px){
  body.single-case-studies .site-main .architecture__mobile{ justify-content:flex-end; margin-top:0; }
}

body.single-case-studies .site-main .phone{
  width:100%; max-width:300px;
  border-radius:48px;
  border:8px solid var(--navy-900);
  background:var(--navy-900);
  overflow:hidden;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
}
body.single-case-studies .site-main .phone__screen{
  position:relative;
  aspect-ratio:9/19;
  border-radius:36px;
  overflow:hidden;
  background:var(--navy-800);
}
body.single-case-studies .site-main .phone__screen img{ width:100%; height:100%; object-fit:cover; object-position:top; }

/* Floating callout chips */
body.single-case-studies .site-main .chip{
  position:absolute; z-index:20;
  display:flex; align-items:center; gap:16px;
  max-width:280px;
  padding:16px;
  border-radius:16px;
  background:rgba(4,17,31,.9);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.4);
  font-size:13px; font-weight:500; line-height:1.25; color:#fff;
}
body.single-case-studies .site-main .chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); flex:none; }
body.single-case-studies .site-main .chip--tl{ left:-8px; top:15%; }
body.single-case-studies .site-main .chip--br{ right:-8px; bottom:15%; }
body.single-case-studies .site-main .chip--ml{ left:-24px; top:25%; }
body.single-case-studies .site-main .chip--mr{ right:-16px; bottom:25%; }
@media (min-width:768px){
  body.single-case-studies .site-main .chip{ padding:20px; font-size:15px; }
  body.single-case-studies .site-main .chip--tl{ left:-32px; }
  body.single-case-studies .site-main .chip--br{ right:-32px; }
  body.single-case-studies .site-main .chip--ml{ left:-64px; }
  body.single-case-studies .site-main .chip--mr{ right:-32px; }
}

/* =========================================================
   Priority pathways
   ========================================================= */
body.single-case-studies .site-main .pathways{
  position:relative;
  padding:80px var(--gutter);
  background:#fff;
}
body.single-case-studies .site-main .pathways .section-head{ margin-bottom:80px; }
@media (min-width:768px){ body.single-case-studies .site-main .pathways{ padding:128px var(--gutter); } }
@media (min-width:1024px){ body.single-case-studies .site-main .pathways{ padding:192px var(--gutter); } }

body.single-case-studies .site-main .pathways__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:32px;
}
@media (min-width:768px){
  body.single-case-studies .site-main .pathways__grid{ grid-template-columns:1fr 1fr; gap:48px; }
  body.single-case-studies .site-main .path-card--up{ margin-bottom:128px; }
  body.single-case-studies .site-main .path-card--down{ margin-top:128px; }
}

body.single-case-studies .site-main .path-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  height:auto;
  padding:40px;
  border-radius:40px;
  border:1px solid var(--border);
  background:var(--canvas);
  color:var(--navy-800);
  box-shadow:0 20px 40px rgba(7,27,51,.05);
  transition:transform .5s;
}
body.single-case-studies .site-main .path-card:hover{ transform:translateY(-8px); }
body.single-case-studies .site-main .path-card--dark{
  background:var(--navy-800); color:#fff;
  border-color:rgba(255,255,255,.1);
  box-shadow:0 20px 40px rgba(7,27,51,.2);
}
body.single-case-studies .site-main .path-card::after{
  content:""; position:absolute; top:0; right:0; z-index:0;
  width:80%; height:80%;
  border-radius:9999px;
  filter:blur(150px);
  background:rgba(247,144,30,.1);
  pointer-events:none;
}
body.single-case-studies .site-main .path-card--dark::after{ background:rgba(0,114,206,.2); }
@media (min-width:768px){ body.single-case-studies .site-main .path-card{ padding:56px; } }

body.single-case-studies .site-main .path-card__top{
  position:relative; z-index:10;
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:48px;
}
body.single-case-studies .site-main .path-card__icon{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  border-radius:16px;
  background:#fff; color:var(--orange);
  box-shadow:0 10px 15px -3px rgba(7,27,51,.1);
}
body.single-case-studies .site-main .path-card--dark .path-card__icon{ background:var(--navy-900); }
body.single-case-studies .site-main .path-card__icon .icon{ width:32px; height:32px; }

body.single-case-studies .site-main .path-card__cta{ display:flex; align-items:center; gap:16px; cursor:pointer; }
body.single-case-studies .site-main .path-card__cta em{
  font-style:normal;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em;
  color:var(--blue);
  opacity:0; transition:opacity .3s;
}
body.single-case-studies .site-main .path-card--dark .path-card__cta em{ color:var(--orange); }
body.single-case-studies .site-main .path-card:hover .path-card__cta em{ opacity:1; }
body.single-case-studies .site-main .path-card__cta .arrow{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(7,27,51,.05); color:var(--navy-800);
  transition:transform .3s;
}
body.single-case-studies .site-main .path-card--dark .path-card__cta .arrow{ background:rgba(255,255,255,.1); color:#fff; }
body.single-case-studies .site-main .path-card:hover .path-card__cta .arrow{ transform:rotate(45deg); }
body.single-case-studies .site-main .path-card__cta .icon{ width:20px; height:20px; }

body.single-case-studies .site-main .path-card__body{ position:relative; z-index:10; margin-bottom:64px; }
body.single-case-studies .site-main .path-card__body h3{
  font-size:32px; font-weight:500; letter-spacing:-.02em;
  margin:0 0 16px;
}
body.single-case-studies .site-main .path-card:not(.path-card--dark) h3 {
  color: #071b33;
}
body.single-case-studies .site-main .path-card__body p{
  font-size:18px; font-weight:300; line-height:1.6;
  max-width:24rem; margin:0;
  color:var(--slate);
}
body.single-case-studies .site-main .path-card--dark .path-card__body p{ color:rgba(255,255,255,.7); }
@media (min-width:768px){
  body.single-case-studies .site-main .path-card__body h3{ font-size:40px; }
  body.single-case-studies .site-main .path-card__body p{ font-size:20px; }
}

body.single-case-studies .site-main .path-card__shot{
  position:relative; z-index:10;
  margin-top: 0;
  width:100%; aspect-ratio:4/3;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
  max-height: 300px;
}
body.single-case-studies .site-main .path-card__shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s;
}
body.single-case-studies .site-main .path-card:hover .path-card__shot img{ transform:scale(1.05); }

/* =========================================================
   Visual language
   ========================================================= */
body.single-case-studies .site-main .visual{
  padding:80px var(--gutter);
  background:var(--navy-800); color:#fff;
}
@media (min-width:768px){ body.single-case-studies .site-main .visual{ padding:128px var(--gutter); } }
@media (min-width:1024px){ body.single-case-studies .site-main .visual{ padding:192px var(--gutter); } }

body.single-case-studies .site-main .visual__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:96px;
}
@media (min-width:1024px){ body.single-case-studies .site-main .visual__grid{ grid-template-columns:1fr 1fr; } }

body.single-case-studies .site-main .visual .h2{ margin-bottom:40px; }
body.single-case-studies .site-main .visual__lede{ margin-bottom:64px; }
body.single-case-studies .site-main .visual__stack{ display:flex; flex-direction:column; gap:48px; }

body.single-case-studies .site-main .type-specimen{ display:flex; align-items:baseline; gap:24px; margin:0; }
body.single-case-studies .site-main .type-specimen__aa{
  font-size:80px; line-height:1; font-weight:500;
  letter-spacing:-.04em; color:#fff;
}
body.single-case-studies .site-main .type-specimen__rest{ font-size:32px; font-weight:300; color:rgba(255,255,255,.5); }

body.single-case-studies .site-main .rule{ height:1px; width:100%; border:0; background:rgba(255,255,255,.1); margin:0; }

body.single-case-studies .site-main .swatches{ display:flex; gap:24px; flex-wrap:wrap; }
body.single-case-studies .site-main .swatches li{ display:flex; flex-direction:column; gap:16px; }
body.single-case-studies .site-main .swatch{ display:block; width:64px; height:64px; border-radius:50%; }
body.single-case-studies .site-main .swatch__name{ font-size:14px; font-weight:500; margin:0; }
body.single-case-studies .site-main .swatch__hex{ font-size:12px; color:rgba(255,255,255,.5); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin:4px 0 0; }
@media (min-width:768px){ body.single-case-studies .site-main .swatch{ width:80px; height:80px; } }

body.single-case-studies .site-main .visual__art{ position:relative; }
body.single-case-studies .site-main .visual__frame{
  position:relative; overflow:hidden;
  aspect-ratio:3/4;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.1);
  background:var(--navy-900);
}
body.single-case-studies .site-main .visual__frame img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

/* =========================================================
   Built on WordPress
   ========================================================= */
body.single-case-studies .site-main .wordpress-build{
  background:var(--navy-800);
  color:#fff;
  padding:0 var(--gutter) 120px;
}
body.single-case-studies .site-main .wordpress-build__inner{
  max-width:1280px;
  margin:0 auto;
  padding-top:150px;
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;
  grid-template-columns:1fr;
  gap:72px;
}
body.single-case-studies .site-main .wordpress-build__copy{ max-width:592px; }
body.single-case-studies .site-main .wordpress-build .h2{ margin:24px 0 32px; font-size:clamp(48px,5vw,64px); line-height:1.1; }
body.single-case-studies .site-main .wordpress-build .lede{ font-size:22px; line-height:1.8; margin:0; }
body.single-case-studies .site-main .wordpress-build__subcopy{ margin-top:24px !important; }
body.single-case-studies .site-main .wordpress-build__tags{ display:flex; flex-wrap:wrap; gap:16px 20px; margin-top:48px; }
body.single-case-studies .site-main .wordpress-build__tags span{
  display:inline-flex; align-items:center; min-height:36px; padding:8px 16px;
  border:1px solid rgba(255,255,255,.1); border-radius:999px;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.6);
  font-size:11px; line-height:1.2; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
}
body.single-case-studies .site-main .wordpress-build__media{ display:grid; gap:24px; }
body.single-case-studies .site-main .wp-shot{ margin:0; overflow:hidden; background:var(--navy-900); border:1px solid rgba(255,255,255,.1); border-radius:24px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
body.single-case-studies .site-main .wp-shot figcaption{ height:36px; display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.3); font-size:11px; }
body.single-case-studies .site-main .wp-shot__dots{ display:flex; gap:6px; }
body.single-case-studies .site-main .wp-shot__dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.15); }
body.single-case-studies .site-main .wp-shot__viewport{ height:332px; overflow:hidden; background:#04111f; position:relative; }
body.single-case-studies .site-main .wp-shot__viewport::after{ content:""; position:absolute; inset:auto 0 0; height:80px; background:linear-gradient(to top,rgba(4,17,31,.3),transparent); pointer-events:none; }
body.single-case-studies .site-main .wp-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
@media (min-width:1024px){
  body.single-case-studies .site-main .wordpress-build{ padding-bottom:150px; }
  body.single-case-studies .site-main .wordpress-build__inner{ grid-template-columns:592px 592px; gap:96px; align-items:center; }
}

/* =========================================================
   Component library (bento)
   ========================================================= */
body.single-case-studies .site-main .library{
  position:relative; overflow:hidden;
  padding:80px var(--gutter);
  background:var(--blue-pale);
}
body.single-case-studies .site-main .library .section-head{ margin-bottom:96px; }
body.single-case-studies .site-main .library .section-head .h2{ margin-bottom:24px; }
body.single-case-studies .site-main .library .section-head .lede{ max-width:672px; }
@media (min-width:768px){ body.single-case-studies .site-main .library{ padding:128px var(--gutter); } }
@media (min-width:1024px){ body.single-case-studies .site-main .library{ padding:192px var(--gutter); } }

body.single-case-studies .site-main .bento{
  position:relative; z-index:10;
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:24px;
}
@media (min-width:768px){ body.single-case-studies .site-main .bento{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){
  body.single-case-studies .site-main .bento{ grid-template-columns:repeat(12,1fr); gap:32px; }
  body.single-case-studies .site-main .bento__cell--3{ grid-column:span 3; }
  body.single-case-studies .site-main .bento__cell--4{ grid-column:span 4; }
  body.single-case-studies .site-main .bento__cell--5{ grid-column:span 5; }
}

body.single-case-studies .site-main .ui-card{
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:32px;
  border-radius:32px;
  border:1px solid var(--border);
}
@media (min-width:768px){ body.single-case-studies .site-main .ui-card{ padding:40px; } }
body.single-case-studies .site-main .ui-card--stack{ gap:24px; }
body.single-case-studies .site-main .ui-card--gap{ gap:32px; }
body.single-case-studies .site-main .ui-card--white{ background:#fff; box-shadow:0 8px 30px rgba(7,27,51,.04); }
body.single-case-studies .site-main .ui-card--navy{ background:var(--navy-800); border-color:rgba(255,255,255,.1); box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
body.single-case-studies .site-main .ui-card--pale{ background:var(--blue-pale); border-color:rgba(0,114,206,.1); }
body.single-case-studies .site-main .ui-card--tint{ background:var(--canvas); box-shadow:inset 0 2px 4px rgba(7,27,51,.06); }
body.single-case-studies .site-main .ui-card--blue{ background:var(--blue); border-color:transparent; position:relative; overflow:hidden; }
body.single-case-studies .site-main .ui-card--blue::before{
  content:""; position:absolute; top:-40px; right:-40px;
  width:160px; height:160px; border-radius:50%;
  background:rgba(247,144,30,.2); filter:blur(40px);
}
body.single-case-studies .site-main .ui-card--glow{ position:relative; overflow:hidden; }
body.single-case-studies .site-main .ui-card--glow::before{
  content:""; position:absolute; bottom:-40px; right:-40px;
  width:160px; height:160px; border-radius:50%;
  background:rgba(0,114,206,.2); filter:blur(40px);
}
body.single-case-studies .site-main .ui-card--hover{ cursor:pointer; transition:transform .3s; }
body.single-case-studies .site-main .ui-card--hover:hover{ transform:translateY(-4px); }
body.single-case-studies .site-main .ui-card--stack .micro-label,
body.single-case-studies .site-main .ui-card--gap .micro-label{ margin-bottom:8px; }

/* Buttons */
body.single-case-studies .site-main .btn{
  border:0; border-radius:12px;
  padding:14px 20px;
  font-size:15px; font-weight:500;
  transition:background .2s, color .2s, border-color .2s;
}
body.single-case-studies .site-main .btn--primary{ background:var(--blue); color:#fff; box-shadow:0 10px 15px -3px rgba(0,114,206,.2); width:100%; }
body.single-case-studies .site-main .btn--primary:hover{ background:var(--navy-800); }
body.single-case-studies .site-main .btn--secondary{ background:transparent; border:2px solid var(--border); color:var(--navy-800); width:100%; }
body.single-case-studies .site-main .btn--secondary:hover{ border-color:var(--navy-800); }
body.single-case-studies .site-main .btn--orange{ background:var(--orange); color:#fff; width:100%; padding:12px 20px; font-size:14px; box-shadow:0 10px 15px -3px rgba(247,144,30,.2); }
body.single-case-studies .site-main .btn--orange:hover{ background:var(--orange-dark); }
body.single-case-studies .site-main .btn--white{ background:#fff; color:var(--blue); padding:12px 24px; align-self:flex-start; box-shadow:0 10px 15px -3px rgba(0,0,0,.1); }
body.single-case-studies .site-main .btn--white:hover{ background:var(--canvas); }
body.single-case-studies .site-main .btn--pill{
  background:var(--orange); color:#fff;
  padding:20px 40px; border-radius:9999px; font-size:16px;
  box-shadow:0 0 40px rgba(247,144,30,.4);
}
body.single-case-studies .site-main .btn--pill:hover{ background:#fff; color:var(--navy-800); }

body.single-case-studies .site-main .text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:500; color:var(--blue);
  transition:color .2s;
}
body.single-case-studies .site-main .text-link:hover{ color:var(--orange); }
body.single-case-studies .site-main .text-link .icon{ width:16px; height:16px; }

/* Form elements */
body.single-case-studies .site-main .field{ display:flex; flex-direction:column; gap:8px; }
body.single-case-studies .site-main .field label{ font-size:13px; font-weight:500; color:rgba(255,255,255,.8); }
body.single-case-studies .site-main .field input{
  width:100%;
  padding:16px 20px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:var(--navy-900);
  color:#fff; font:inherit;
  transition:border-color .2s;
}
body.single-case-studies .site-main .field input::placeholder{ color:rgba(255,255,255,.3); }
body.single-case-studies .site-main .field input:focus{ outline:none; border-color:var(--orange); }
body.single-case-studies .site-main .select{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:var(--navy-900);
  color:#fff; cursor:pointer;
  transition:border-color .2s;
}
body.single-case-studies .site-main .select:hover{ border-color:rgba(255,255,255,.4); }
body.single-case-studies .site-main .select .icon{ width:20px; height:20px; color:rgba(255,255,255,.5); }

/* Alert */
body.single-case-studies .site-main .alert{
  display:flex; gap:16px;
  padding:20px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 15px -3px rgba(0,114,206,.05);
}
body.single-case-studies .site-main .alert__icon{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none;
  border-radius:50%;
  background:rgba(247,144,30,.1); color:var(--orange);
}
body.single-case-studies .site-main .alert__icon .icon{ width:20px; height:20px; }
body.single-case-studies .site-main .alert h4{ font-size:15px; font-weight:600; color:var(--navy-800); margin:0 0 4px; }
body.single-case-studies .site-main .alert p{ font-size:13px; line-height:1.6; color:rgba(30,41,59,.7); margin:0; }
@media (min-width:768px){ body.single-case-studies .site-main .alert{ padding:24px; } }

/* Service card */
body.single-case-studies .site-main .service-icon{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:16px;
  background:var(--blue-pale); color:var(--blue);
  margin-bottom:24px;
  transition:transform .3s;
}
body.single-case-studies .site-main .ui-card--hover:hover .service-icon{ transform:scale(1.1); }
body.single-case-studies .site-main .service-icon .icon{ width:28px; height:28px; }
body.single-case-studies .site-main .ui-card__title{ font-size:22px; font-weight:500; color:var(--navy-800); margin:0 0 12px; }
body.single-case-studies .site-main .ui-card__text{ font-size:15px; line-height:1.6; color:rgba(30,41,59,.7); margin:0 0 32px; }
body.single-case-studies .site-main .round-arrow{
  display:flex; align-items:center; justify-content:center;
  margin-top:auto;
  width:40px; height:40px; border-radius:50%;
  background:var(--canvas); color:var(--navy-800);
  transition:background .2s, color .2s;
}
body.single-case-studies .site-main .ui-card--hover:hover .round-arrow{ background:var(--orange); color:#fff; }
body.single-case-studies .site-main .round-arrow .icon{ width:20px; height:20px; }

/* Outage card */
body.single-case-studies .site-main .outage{
  padding:24px; border-radius:16px;
  background:#fff; border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
body.single-case-studies .site-main .outage__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
body.single-case-studies .site-main .outage__head span{
  font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:rgba(30,41,59,.5);
}
body.single-case-studies .site-main .pulse{
  width:10px; height:10px; border-radius:50%;
  background:var(--orange);
  animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
body.single-case-studies .site-main .outage h4{ font-size:28px; font-weight:500; color:var(--navy-800); margin:0 0 4px; }
body.single-case-studies .site-main .outage > p{ font-size:14px; color:rgba(30,41,59,.6); margin:0 0 24px; }
body.single-case-studies .site-main .bar{ width:100%; height:8px; border-radius:9999px; background:var(--canvas); margin-bottom:12px; }
body.single-case-studies .site-main .bar span{ display:block; height:100%; border-radius:9999px; background:var(--orange); }
body.single-case-studies .site-main .outage__eta{
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:rgba(30,41,59,.4); text-align:right; margin:0;
}

/* Account card */
body.single-case-studies .site-main .account{
  position:relative; z-index:10;
  padding:24px; border-radius:16px;
  background:rgba(4,17,31,.5);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
}
body.single-case-studies .site-main .account__due{ font-size:13px; font-weight:500; color:rgba(255,255,255,.6); margin:0 0 8px; }
body.single-case-studies .site-main .account__amount{ font-size:36px; font-weight:500; color:#fff; margin:0 0 24px; }

/* Nav item + mobile menu */
body.single-case-studies .site-main .nav-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(0,114,206,.1);
  cursor:pointer;
}
body.single-case-studies .site-main .nav-item span{ font-size:16px; font-weight:500; color:var(--navy-800); transition:color .2s; }
body.single-case-studies .site-main .nav-item .icon{ width:20px; height:20px; color:rgba(7,27,51,.5); transition:color .2s; }
body.single-case-studies .site-main .nav-item:hover span,body.single-case-studies .site-main .nav-item:hover .icon{ color:var(--blue); }

body.single-case-studies .site-main .mobile-menu{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px; border-radius:12px;
  background:#fff; border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  cursor:pointer; transition:border-color .2s;
}
body.single-case-studies .site-main .mobile-menu:hover{ border-color:var(--blue); }
body.single-case-studies .site-main .mobile-menu__left{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:500; color:var(--navy-800); }
body.single-case-studies .site-main .mobile-menu .icon{ width:20px; height:20px; }

/* News card */
body.single-case-studies .site-main .news{ display:flex; flex-direction:column; gap:24px; align-items:center; }
@media (min-width:640px){ body.single-case-studies .site-main .news{ flex-direction:row; } }
body.single-case-studies .site-main .news__thumb{
  width:100%; aspect-ratio:4/3;
  border-radius:12px; overflow:hidden; background:var(--canvas); flex:none;
}
@media (min-width:640px){ body.single-case-studies .site-main .news__thumb{ width:33.333%; } }
body.single-case-studies .site-main .news__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.single-case-studies .site-main .ui-card--hover:hover .news__thumb img{ transform:scale(1.05); }
body.single-case-studies .site-main .news__tag{
  display:block; margin-bottom:12px;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em;
  color:var(--orange);
}
body.single-case-studies .site-main .news__title{
  font-size:18px; font-weight:500; line-height:1.35;
  color:var(--navy-800); margin:0 0 12px;
  transition:color .2s;
}
body.single-case-studies .site-main .ui-card--hover:hover .news__title{ color:var(--blue); }
body.single-case-studies .site-main .news__date{ font-size:14px; font-weight:500; color:rgba(30,41,59,.6); margin:0; }
@media (min-width:768px){ body.single-case-studies .site-main .news__title{ font-size:20px; } }

/* CTA block */
body.single-case-studies .site-main .cta__title{ position:relative; z-index:10; font-size:28px; font-weight:500; line-height:1.2; color:#fff; margin:0 0 16px; }
body.single-case-studies .site-main .cta__text{ position:relative; z-index:10; font-size:15px; line-height:1.6; color:rgba(255,255,255,.8); margin:0 0 32px; }
body.single-case-studies .site-main .ui-card--blue .btn--white{ position:relative; z-index:10; }

/* =========================================================
   Omnichannel
   ========================================================= */
body.single-case-studies .site-main .omnichannel{
  position:relative; overflow:hidden;
  padding:80px var(--gutter);
  background:var(--navy-800); color:#fff;
}
body.single-case-studies .site-main .omnichannel .section-head{ margin-bottom:128px; }
body.single-case-studies .site-main .omnichannel .section-head .h2{ margin-bottom:32px; }
@media (min-width:768px){ body.single-case-studies .site-main .omnichannel{ padding:128px var(--gutter); } }
@media (min-width:1024px){ body.single-case-studies .site-main .omnichannel{ padding:192px var(--gutter); } }

body.single-case-studies .site-main .devices{
  position:relative; z-index:10;
  width:100%; max-width:1400px; margin:0 auto;
  height:60vh;
  display:flex; align-items:center; justify-content:center;
  perspective:1000px;
}
@media (min-width:768px){ body.single-case-studies .site-main .devices{ height:80vh; } }

body.single-case-studies .site-main .devices__desktop{
  position:absolute; top:0; z-index:10;
  width:90%;
}
@media (min-width:768px){ body.single-case-studies .site-main .devices__desktop{ width:75%; } }
body.single-case-studies .site-main .devices__desktop .browser{
  border-radius:16px 16px 0 0;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.8);
  background:var(--navy-900);
}
body.single-case-studies .site-main .devices__desktop .browser__shot{ aspect-ratio:16/9; background:var(--navy-800); }
@media (min-width:768px){ body.single-case-studies .site-main .devices__desktop .browser{ border-radius:24px 24px 0 0; } }

body.single-case-studies .site-main .devices__tablet{
  position:absolute; z-index:20;
  bottom:10%; left:2%;
  width:45%;
  border-radius:16px;
  border:4px solid var(--navy-900);
  background:var(--navy-900);
  overflow:hidden;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.9);
}
@media (min-width:768px){
  body.single-case-studies .site-main .devices__tablet{ bottom:5%; left:15%; width:35%; border-width:6px; border-radius:24px; }
}
body.single-case-studies .site-main .tablet__screen{
  position:relative;
  aspect-ratio:3/4;
  border-radius:12px; overflow:hidden;
  background:var(--navy-800);
}
@media (min-width:768px){ body.single-case-studies .site-main .tablet__screen{ aspect-ratio:1/1; border-radius:16px; } }
body.single-case-studies .site-main .tablet__screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

body.single-case-studies .site-main .devices__phone{
  position:absolute; z-index:30;
  bottom:5%; right:5%;
  width:32%;
  border-radius:32px;
  border:4px solid var(--navy-900);
  background:var(--navy-900);
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.8);
  animation:float 6s ease-in-out infinite alternate;
}
@media (min-width:768px){
  body.single-case-studies .site-main .devices__phone{ bottom:-5%; right:20%; width:20%; border-width:8px; border-radius:48px; }
}
body.single-case-studies .site-main .devices__phone .phone__screen{ border-radius:24px; }
body.single-case-studies .site-main .devices__phone img{ object-position:top center; }
@media (min-width:768px){ body.single-case-studies .site-main .devices__phone .phone__screen{ border-radius:36px; } }

@keyframes float{ from{ transform:translateY(0) } to{ transform:translateY(-10px) } }

/* =========================================================
   Footer — final Figma alignment
   ========================================================= */
body.single-case-studies .site-main .footer{
  position:relative;
  overflow:hidden;
  min-height:767px;
  display:flex;
  flex-direction:column;
  padding:240px var(--gutter) 42px;
  background:var(--navy-800);
  color:#fff;
}

body.single-case-studies .site-main .footer__collage{
  display:none;
}

/* Background glow */
body.single-case-studies .site-main .footer .blob--center{
  top:49%;
  left:50%;
  width:650px;
  height:550px;
  transform:translate(-50%,-35%);
  background:rgba(247,144,30,.15);
  filter:blur(100px);
  pointer-events:none;
}

/* Main CTA */
body.single-case-studies .site-main .footer__cta{
  position:relative;
  z-index:10;
  width:100%;
  max-width:864px;
  margin:0 auto 110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Heading */
body.single-case-studies .site-main .footer__title{
  width:100%;
  max-width:780px;
  margin:0 auto 30px;
  color:#fff;
  font-size:56px;
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.045em;
  text-wrap:balance;
}

/* Supporting copy */
body.single-case-studies .site-main .footer__lede{
  width:100%;
  max-width:620px;
  margin:0 auto 38px;
  font-size:15px;
  font-weight:300;
  line-height:1.75;
  color:rgba(255,255,255,.52);
}

/* CTA button */
body.single-case-studies .site-main .footer .btn--pill{
  min-width:154px;
  padding:15px 28px;
  border-radius:999px;
  background:var(--orange);
  text-transform: none;
  color:#fff;
  font-size:16px;
  font-weight:500;
  box-shadow:0 0 32px rgba(247,144,30,.4);
  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}

body.single-case-studies .site-main .footer .btn--pill:after {
  content: none;
}

body.single-case-studies .site-main .footer .btn--pill:hover{
  background:#fff;
  color:var(--navy-800);
  transform:translateY(-2px);
}

/* Bottom footer bar */
body.single-case-studies .site-main .footer__bar{
  position:relative;
  z-index:10;
  width:100%;
  max-width:1240px;
  margin:auto auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:rgba(255,255,255,.42);
}

body.single-case-studies .site-main .footer__bar p{
  margin:0;
}

body.single-case-studies .site-main .footer__links{
  display:flex;
  align-items:center;
  gap:34px;
}

body.single-case-studies .site-main .footer__links a{
  color:inherit;
  transition:color .2s ease;
}

body.single-case-studies .site-main .footer__links a:hover{
  color:var(--orange);
}

/* =========================================================
   Scroll reveal animations
   ========================================================= */
body.single-case-studies .site-main .reveal,
body.single-case-studies .site-main .reveal-x,
body.single-case-studies .site-main .reveal-clip {
  opacity: 1;
  transform: none;
  clip-path: none;
}

html.ouc-motion-ready body.single-case-studies .site-main .reveal,
html.ouc-motion-ready body.single-case-studies .site-main .reveal-x,
html.ouc-motion-ready body.single-case-studies .site-main .reveal-clip {
  opacity: 0;
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease),
    clip-path 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}

html.ouc-motion-ready body.single-case-studies .site-main .reveal {
  transform: translateY(40px);
}

html.ouc-motion-ready body.single-case-studies .site-main .reveal-x--right {
  transform: translateX(40px);
}

html.ouc-motion-ready body.single-case-studies .site-main .reveal-x--left {
  transform: translateX(-40px);
}

html.ouc-motion-ready body.single-case-studies .site-main .reveal-clip {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
}

html.ouc-motion-ready body.single-case-studies .site-main .reveal.is-visible,
html.ouc-motion-ready body.single-case-studies .site-main .reveal-x.is-visible {
  opacity: 1;
  transform: none;
}

html.ouc-motion-ready body.single-case-studies .site-main .reveal-clip.is-visible {
  opacity: 1;
  clip-path: inset(-2px);
}

/* Deconstructed screenshots */
body.single-case-studies .site-main .step__media.reveal-clip {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {

  html:has(body.single-case-studies) {
    scroll-behavior: auto;
  }

  body.single-case-studies .site-main *,
  body.single-case-studies .site-main *::before,
  body.single-case-studies .site-main *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  body.single-case-studies .site-main .reveal,
  body.single-case-studies .site-main .reveal-x,
  body.single-case-studies .site-main .reveal-clip {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* =========================================================
   Figma final alignment + motion pass (2026-08-25)
   Based on the approved 1440px Figma composition.
   ========================================================= */

/* --- Standalone page isolation --- */
body.single-case-studies .site-main html:has(body.ouc-case-study-page){
  margin-top:0 !important;
  background:#fff;
}
body.single-case-studies .site-main body.ouc-case-study-page{
  margin:0 !important;
  padding:0 !important;
  min-width:320px;
  max-width:none !important;
  overflow-x:clip;
  background:#fff;
}
body.single-case-studies .site-main body.ouc-case-study-page.admin-bar{ margin-top:0 !important; }

/* Keep the case-study typography predictable even when the parent theme
   ships aggressive heading / paragraph rules. */
body.single-case-studies .site-main .ouc-case-study-page :where(h1,h2,h3,h4,p,ul,figure){
  margin-top:0;
}
body.single-case-studies .site-main .ouc-case-study-page :where(button,input,a){
  font-family:var(--font);
}

/* --- Header / project controls --- */
body.single-case-studies .site-main .nav{
  min-height:88px;
  padding:18px clamp(24px,4vw,56px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(7,27,51,.08);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  transition:transform .45s var(--ease), background .3s ease, box-shadow .3s ease;
}
body.single-case-studies .site-main .nav.is-scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 30px rgba(7,27,51,.06);
}
body.single-case-studies .site-main .nav__logo{ width:168px; height:46px; }
body.single-case-studies .site-main .nav__close{
  display:flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--slate);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
body.single-case-studies .site-main .nav__close span{ font-size:23px; line-height:1; font-weight:300; }

/* --- Hero: align its top spacing with the Hillstax case study --- */
body.single-case-studies .site-main .hero{
  min-height:980px;
  padding-top:270px;
  background:
    radial-gradient(70% 55% at 50% 58%, rgba(0,114,206,.32) 0%, rgba(0,114,206,.08) 46%, transparent 76%),
    linear-gradient(180deg,#3b3b3b 0%,#111 26%,#030303 100%);
}
body.single-case-studies .site-main .hero__inner{ max-width:980px; margin-bottom:76px; }
body.single-case-studies .site-main .hero__title{ text-wrap:balance; }
body.single-case-studies .site-main .hero__lede{ max-width:760px; }
body.single-case-studies .site-main .hero__frame{
  max-width:1152px;
  filter:drop-shadow(0 28px 64px rgba(0,0,0,.28));
}

/* --- Project overview --- */
body.single-case-studies .site-main .overview{ padding-block:132px; }
body.single-case-studies .site-main .overview__grid{ gap:88px; }
body.single-case-studies .site-main .meta-card{ min-height:164px; }

/* --- Sticky website walkthrough, inspired by the prototype's immersive
   zoom but kept lightweight and accessible. --- */
body.single-case-studies .site-main .walkthrough{ height:100vh; }
body.single-case-studies .site-main .walkthrough__sticky{
  padding-top:104px;
  padding-bottom:32px;
}
body.single-case-studies .site-main .walkthrough__head{ margin-bottom:54px; }
body.single-case-studies .site-main .walkthrough__frame{
  width:min(100%,1160px);
  will-change:transform,opacity;
}
body.single-case-studies .site-main .walkthrough__frame .browser{
  box-shadow:0 40px 90px rgba(0,0,0,.42);
}

/* --- Homepage deconstructed / Clarity at first glance --- */
body.single-case-studies .site-main .deconstructed{
  padding:152px var(--gutter) 178px;
  background:#fff;
}
body.single-case-studies .site-main .deconstructed .section-head{
  margin-bottom:126px;
}
body.single-case-studies .site-main .deconstructed .section-head .h2{
  font-size:clamp(48px,4.65vw,67px);
  line-height:1.18;
  letter-spacing:-.055em;
}

body.single-case-studies .site-main .steps{
  width:min(100%,1240px);
  margin:0 auto;
  gap:176px;
}

/*
 * Desktop alternating layout
 *
 * Odd steps:
 * 2/3 IMAGE | 1/3 COPY
 *
 * Even steps:
 * 1/3 COPY | 2/3 IMAGE
 */
body.single-case-studies .site-main .step,
body.single-case-studies .site-main .step.step--flip{
  display:grid;
  align-items:center;
}

/* Odd rows: IMAGE | COPY */
body.single-case-studies .site-main .step:not(.step--flip){
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
}

body.single-case-studies .site-main .step:not(.step--flip) .step__media{
  grid-column:1;
  grid-row:1;
  width:100%;
  max-width:695px;
  min-width:0;
  justify-self:start;
}

body.single-case-studies .site-main .step:not(.step--flip) .step__copy{
  grid-column:2;
  grid-row:1;
  width:100%;
  max-width:none;
  justify-self:stretch;
}

/* Even rows: COPY | IMAGE */
body.single-case-studies .site-main .step.step--flip{
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
}

body.single-case-studies .site-main .step.step--flip .step__copy{
  grid-column:1;
  grid-row:1;
  width:100%;
  max-width:none;
  justify-self:stretch;
}

body.single-case-studies .site-main .step.step--flip .step__media{
  grid-column:2;
  grid-row:1;
  width:100%;
  max-width:695px;
  min-width:0;
  justify-self:end;
}

body.single-case-studies .site-main .step__num{
  width:54px;
  height:54px;
  margin-bottom:28px;
  font-size:20px;
  box-shadow:0 12px 30px rgba(247,144,30,.2);
}

body.single-case-studies .site-main .step__copy h3{
  margin-bottom:22px;
  font-size:clamp(30px,2.65vw,34px);
  line-height:1.2;
  letter-spacing:-.035em;
}

body.single-case-studies .site-main .step__copy p{
  font-size:20px;
  line-height:1.9;
  color:#334155;
}

body.single-case-studies .site-main .step__media .browser{
  width:100%;
  max-width:695px;
  overflow:hidden;
  border-radius:28px;
  border-color:#edf1f5;
  will-change:transform;
}

body.single-case-studies .site-main .step__media .browser__shot{
  width:100%;
  aspect-ratio:16/10;
}

body.single-case-studies .site-main .step__media .browser__shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

/* --- Navigation architecture --- */
body.single-case-studies .site-main .architecture{ padding-block:166px; }
body.single-case-studies .site-main .architecture .section-head{ margin-bottom:104px; }
body.single-case-studies .site-main .architecture__grid{ max-width:1240px; }
body.single-case-studies .site-main .architecture__desktop .browser,
body.single-case-studies .site-main .architecture__mobile .phone{ will-change:transform; }

/* --- Priority pathways: more image-forward, as requested in the brief --- */
body.single-case-studies .site-main .pathways{ padding-block:166px 188px; }
body.single-case-studies .site-main .pathways .section-head{ margin-bottom:84px; }
body.single-case-studies .site-main .pathways__grid{ max-width:1180px; gap:42px; }
body.single-case-studies .site-main .path-card{
  padding:44px;
  border-radius:32px;
  box-shadow:0 22px 55px rgba(7,27,51,.07);
}
body.single-case-studies .site-main .path-card--dark{ box-shadow:0 26px 60px rgba(7,27,51,.22); }
body.single-case-studies .site-main .path-card__top{ margin-bottom:38px; }
body.single-case-studies .site-main .path-card__body{ margin-bottom:64px; }
body.single-case-studies .site-main .path-card__shot{
  aspect-ratio:1.16/1;
  border-radius:14px;
}
body.single-case-studies .site-main .path-card__shot img{ object-position:top center; }

/* --- Visual language --- */
body.single-case-studies .site-main .visual{ padding-block:166px; }
body.single-case-studies .site-main .visual__grid{ gap:86px; align-items:center; }
body.single-case-studies .site-main .visual__frame{
  aspect-ratio:592/760;
  border-radius:28px;
  box-shadow:0 28px 70px rgba(0,0,0,.24);
  will-change:transform;
}

/* --- WordPress build section (exact two-column desktop rhythm) --- */
body.single-case-studies .site-main .wordpress-build{ padding-bottom:150px; }
body.single-case-studies .site-main .wordpress-build__inner{
  max-width:1280px;
  padding-top:150px;
  gap:96px;
}
body.single-case-studies .site-main .wordpress-build__copy{ max-width:592px; }
body.single-case-studies .site-main .wordpress-build .h2{
  margin:22px 0 30px;
  font-size:clamp(48px,4.45vw,64px);
  line-height:1.08;
}
body.single-case-studies .site-main .wordpress-build .lede{ font-size:20px; line-height:1.78; }
body.single-case-studies .site-main .wp-shot{ border-radius:20px; }
body.single-case-studies .site-main .wp-shot__viewport{ height:332px; }

/* --- Component library --- */
body.single-case-studies .site-main .library{ padding-block:164px; }
body.single-case-studies .site-main .library .section-head{ margin-bottom:88px; }
body.single-case-studies .site-main .bento{ max-width:1240px; gap:28px; }
body.single-case-studies .site-main .ui-card{ border-radius:26px; }

/* --- Omnichannel: match Figma composition and keep the source artwork
   crisp. The old dimming is deliberately cancelled. --- */
body.single-case-studies .site-main .omnichannel{
  padding:150px var(--gutter) 120px;
  background:#071b33;
}
body.single-case-studies .site-main .omnichannel .section-head{ margin-bottom:116px; }
body.single-case-studies .site-main .omnichannel .section-head .h2{
  margin-bottom:28px;
  font-size:clamp(48px,4.62vw,66.5px);
  line-height:1.19;
  letter-spacing:-.055em;
}
body.single-case-studies .site-main .omnichannel .section-head .lede{
  max-width:770px;
  font-size:20px;
  line-height:1.9;
}
body.single-case-studies .site-main .omnichannel .browser__shot--dim img,
body.single-case-studies .site-main .omnichannel .browser__shot img{
  opacity:1 !important;
  filter:none !important;
}
body.single-case-studies .site-main .devices{
  position:relative;
  display:block;
  width:min(100%,1240px);
  height:720px;
  min-height:0;
  margin:0 auto;
  perspective:none;
}
body.single-case-studies .site-main .devices__desktop{
  position:absolute;
  top:34px;
  left:12.5%;
  width:75%;
  z-index:10;
}
body.single-case-studies .site-main .devices__desktop .browser{
  height:523px;
  border-radius:22px 22px 0 0;
  box-shadow:0 34px 80px rgba(0,0,0,.36);
}
body.single-case-studies .site-main .devices__desktop .browser__bar{ height:46px; padding-inline:22px; }
body.single-case-studies .site-main .devices__desktop .browser__shot{
  height:477px;
  aspect-ratio:auto;
  overflow:hidden;
}
body.single-case-studies .site-main .devices__desktop .browser__shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
body.single-case-studies .site-main .devices__tablet{
  position:absolute;
  top:266px;
  bottom:auto;
  left:19.25%;
  width:36.5%;
  height:453px;
  z-index:20;
  border:6px solid var(--navy-900);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 28px 64px rgba(0,0,0,.45);
}
body.single-case-studies .site-main .tablet__screen{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:15px;
}
body.single-case-studies .site-main .tablet__screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
body.single-case-studies .site-main .devices__phone{
  position:absolute;
  top:255px;
  right:20%;
  bottom:auto;
  width:20%;
  height:527px;
  z-index:30;
  border:8px solid var(--navy-900);
  border-radius:46px;
  overflow:hidden;
  animation:none;
  box-shadow:0 34px 25px rgba(0,0,0,.48);
}
body.single-case-studies .site-main .devices__phone .phone__screen{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:34px;
}
body.single-case-studies .site-main .devices__phone img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

/* --- Motion scene entrances. These only activate after JS adds
   .ouc-motion-ready, so content remains visible if JS is unavailable. --- */
html.ouc-motion-ready body.single-case-studies .site-main .devices__desktop,
html.ouc-motion-ready body.single-case-studies .site-main .devices__tablet,
html.ouc-motion-ready body.single-case-studies .site-main .devices__phone{
  opacity:0;
  transition:opacity .9s var(--ease), transform 1.05s var(--ease);
}
html.ouc-motion-ready body.single-case-studies .site-main .devices__desktop{ transform:translate3d(0,44px,0) scale(.975); }
html.ouc-motion-ready body.single-case-studies .site-main .devices__tablet{ transform:translate3d(-34px,70px,0) scale(.96); }
html.ouc-motion-ready body.single-case-studies .site-main .devices__phone{ transform:translate3d(34px,80px,0) scale(.96); }
html.ouc-motion-ready body.single-case-studies .site-main .devices.is-scene-visible .devices__desktop,
html.ouc-motion-ready body.single-case-studies .site-main .devices.is-scene-visible .devices__tablet,
html.ouc-motion-ready body.single-case-studies .site-main .devices.is-scene-visible .devices__phone{
  opacity:1;
  transform:none;
}
html.ouc-motion-ready body.single-case-studies .site-main .devices.is-scene-visible .devices__tablet{ transition-delay:.12s; }
html.ouc-motion-ready body.single-case-studies .site-main .devices.is-scene-visible .devices__phone{ transition-delay:.22s; }

/* Scroll-linked parallax is applied to inner presentation surfaces so it
   never fights the existing reveal transforms. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  body.single-case-studies .site-main .step__media .browser,
  body.single-case-studies .site-main .architecture__desktop .browser,
  body.single-case-studies .site-main .architecture__mobile .phone,
  body.single-case-studies .site-main .visual__frame{
    transform:translate3d(0,var(--ouc-parallax-y,0px),0);
  }
}

/* =========================================================
   Tablet
   ========================================================= */
@media (min-width:768px) and (max-width:1023.98px){
  body.single-case-studies .site-main .nav{ min-height:80px; padding-inline:34px; }
  body.single-case-studies .site-main .nav__logo{ width:152px; height:42px; }

  body.single-case-studies .site-main .hero{ min-height:0; padding:270px 48px 0; }
  body.single-case-studies .site-main .hero__title{ font-size:58px; white-space:normal; }
  body.single-case-studies .site-main .hero__frame{ max-width:900px; }

  body.single-case-studies .site-main .overview{ padding:108px 48px; }

  body.single-case-studies .site-main .walkthrough{
    height:100vh;
  }
  body.single-case-studies .site-main .walkthrough__sticky{ padding:98px 48px 28px; }
  body.single-case-studies .site-main .walkthrough__head{ margin-bottom:44px; }
  body.single-case-studies .site-main .walkthrough__frame{ width:min(100%,900px); }

  body.single-case-studies .site-main .deconstructed{
    padding:116px 48px 132px;
  }

  body.single-case-studies .site-main .deconstructed .section-head{
    margin-bottom:88px;
  }

  body.single-case-studies .site-main .steps{
    gap:116px;
  }

  /*
   * Tablet keeps the alternating layout,
   * but uses a gentler ratio so copy remains readable.
   */
  body.single-case-studies .site-main .step,
  body.single-case-studies .site-main .step.step--flip{
    display:grid;
    align-items:center;
    gap:44px;
  }

  /* Odd rows: IMAGE | COPY */
  body.single-case-studies .site-main .step:not(.step--flip){
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  }

  body.single-case-studies .site-main .step:not(.step--flip) .step__media{
    grid-column:1;
    grid-row:1;
    width:100%;
  }

  body.single-case-studies .site-main .step:not(.step--flip) .step__copy{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none;
  }

  /* Even rows: COPY | IMAGE */
  body.single-case-studies .site-main .step.step--flip{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  }

  body.single-case-studies .site-main .step.step--flip .step__copy{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:none;
  }

  body.single-case-studies .site-main .step.step--flip .step__media{
    grid-column:2;
    grid-row:1;
    width:100%;
  }

  body.single-case-studies .site-main .step__copy h3{
    font-size:30px;
  }

  body.single-case-studies .site-main .step__copy p{
    font-size:17px;
    line-height:1.72;
  }

  body.single-case-studies .site-main .step__num{
    width:48px;
    height:48px;
    margin-bottom:22px;
  }

  body.single-case-studies .site-main .architecture{ padding:120px 48px; }
  body.single-case-studies .site-main .architecture__grid{ gap:72px; }

  body.single-case-studies .site-main .pathways{ padding:120px 48px 140px; }
  body.single-case-studies .site-main .pathways__grid{ gap:32px; }
  body.single-case-studies .site-main .path-card{ padding:34px; }

  body.single-case-studies .site-main .visual{ padding:120px 48px; }
  body.single-case-studies .site-main .visual__grid{ gap:72px; }

  body.single-case-studies .site-main .wordpress-build{ padding:0 48px 120px; }
  body.single-case-studies .site-main .wordpress-build__inner{ padding-top:120px; gap:64px; }
  body.single-case-studies .site-main .wordpress-build .lede{ font-size:18px; }

  body.single-case-studies .site-main .library{ padding:120px 48px; }

  body.single-case-studies .site-main .omnichannel{ padding:120px 48px 0; }
  body.single-case-studies .site-main .omnichannel .section-head{ margin-bottom:82px; }
  body.single-case-studies .site-main .devices{ height:610px; max-width:900px; }
  body.single-case-studies .site-main .devices__desktop{ top:28px; left:7.5%; width:85%; }
  body.single-case-studies .site-main .devices__desktop .browser{ height:auto; }
  body.single-case-studies .site-main .devices__desktop .browser__shot{ height:auto; aspect-ratio:16/9; }
  body.single-case-studies .site-main .devices__tablet{
    top:auto;
    bottom:0;
    left:12.5%;
    width:43%;
    height:auto;
  }
  body.single-case-studies .site-main .tablet__screen{ aspect-ratio:1/1; height:auto; }
  body.single-case-studies .site-main .devices__phone{
    top:auto;
    bottom:-16px;
    right:13%;
    width:25%;
    height:auto;
  }
  body.single-case-studies .site-main .devices__phone .phone__screen{ aspect-ratio:9/19; height:auto; }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width:767.98px){
  body.single-case-studies .site-main{ --gutter:22px; }

  body.single-case-studies .site-main .h2{ font-size:38px; line-height:1.12; }
  body.single-case-studies .site-main .lede{ font-size:16px; line-height:1.72; }
  body.single-case-studies .site-main .eyebrow{ margin-bottom:18px; font-size:11px; }
  body.single-case-studies .site-main .section-head{ margin-bottom:58px; }

  body.single-case-studies .site-main .nav{
    min-height:70px;
    padding:12px 18px;
  }
  body.single-case-studies .site-main .nav__logo{ width:132px; height:38px; }
  body.single-case-studies .site-main .nav__close{
    min-width:44px;
    padding:0 8px;
    font-size:0;
    letter-spacing:0;
  }
  body.single-case-studies .site-main .nav__close span{ margin:0; font-size:29px; }

  body.single-case-studies .site-main .hero{
    min-height:0;
    padding:270px 22px 0;
  }
  body.single-case-studies .site-main .hero__inner{ margin-bottom:54px; }
  body.single-case-studies .site-main .eyebrow-dots{ gap:11px; margin-bottom:24px; }
  body.single-case-studies .site-main .eyebrow-dots__text{ font-size:10px; letter-spacing:.16em; }
  body.single-case-studies .site-main .hero__mark{ height:54px; margin-bottom:24px; }
  body.single-case-studies .site-main .hero__title{
    max-width:340px;
    margin-bottom:22px;
    font-size:42px;
    line-height:1.02;
    white-space:normal;
  }
  body.single-case-studies .site-main .hero__lede{ margin-bottom:32px; font-size:16px; line-height:1.65; }
  body.single-case-studies .site-main .pills{ gap:8px; }
  body.single-case-studies .site-main .pill{ padding:8px 12px; font-size:9px; letter-spacing:.11em; }
  body.single-case-studies .site-main .hero__frame{ width:calc(100% + 10px); }
  body.single-case-studies .site-main .hero__frame .browser__bar{ height:36px; padding-inline:14px; }
  body.single-case-studies .site-main .hero__frame .browser__dots i{ width:8px; height:8px; }
  body.single-case-studies .site-main .hero__frame .browser__url{ display:none; }
  body.single-case-studies .site-main .mute-btn{ right:10px; bottom:10px; padding:7px 10px; font-size:9px; }

  body.single-case-studies .site-main .overview{ padding:86px 22px; }
  body.single-case-studies .site-main .overview__grid{ gap:48px; }
  body.single-case-studies .site-main .overview__intro .h2{ font-size:34px; }
  body.single-case-studies .site-main .overview__cards{ gap:16px; }
  body.single-case-studies .site-main .meta-card{ min-height:132px; padding:26px; border-radius:20px; }

  /* On phones the sticky 200vh presentation creates an unnecessarily long
     empty scroll track. Convert it to a normal editorial section. */
  body.single-case-studies .site-main .walkthrough{
    height:auto;
    min-height:0;
    padding:88px 22px 94px;
  }
  body.single-case-studies .site-main .walkthrough__sticky{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    padding:0;
    overflow:visible;
  }
  body.single-case-studies .site-main .walkthrough__head{ margin:0 auto 44px; }
  body.single-case-studies .site-main .walkthrough__head .h2{ margin-bottom:18px; }
  body.single-case-studies .site-main .walkthrough__frame{ width:100%; transform:none !important; opacity:1 !important; }
  body.single-case-studies .site-main .walkthrough__frame .browser{ border-radius:18px 18px 10px 10px; }
  body.single-case-studies .site-main .walkthrough__frame .browser__bar{ height:34px; padding-inline:14px; }
  body.single-case-studies .site-main .walkthrough__frame .browser__url{ display:none; }
  body.single-case-studies .site-main .browser__viewport--zoom iframe{ transform:scale(1.08); }

  body.single-case-studies .site-main .deconstructed{ padding:88px 22px 104px; }
  body.single-case-studies .site-main .deconstructed .section-head{ margin-bottom:66px; }
  body.single-case-studies .site-main .deconstructed .section-head .h2{ font-size:40px; letter-spacing:-.045em; }
  body.single-case-studies .site-main .steps{ gap:84px; }
  body.single-case-studies .site-main .step,
  body.single-case-studies .site-main .step.step--flip{
    display:flex;
    flex-direction:column;
    gap:28px;
  }
  body.single-case-studies .site-main .step__copy,
  body.single-case-studies .site-main .step.step--flip .step__copy{
    order:1;
    width:100%;
    max-width:none;
    grid-column:auto;
    grid-row:auto;
  }

  body.single-case-studies .site-main .step__media,
  body.single-case-studies .site-main .step.step--flip .step__media{
    order:2;
    width:100%;
    grid-column:auto;
    grid-row:auto;
  }
  body.single-case-studies .site-main .step__num{ width:46px; height:46px; margin-bottom:20px; font-size:17px; }
  body.single-case-studies .site-main .step__copy h3{ margin-bottom:14px; font-size:28px; }
  body.single-case-studies .site-main .step__copy p{ font-size:16px; line-height:1.72; }
  body.single-case-studies .site-main .step__media .browser{ border-radius:18px; }
  body.single-case-studies .site-main .browser--mini .browser__bar{ height:28px; padding-inline:12px; }
  body.single-case-studies .site-main .browser--mini .browser__dots{ gap:5px; }
  body.single-case-studies .site-main .browser--mini .browser__dots i{ width:7px; height:7px; }

  body.single-case-studies .site-main .architecture{ padding:92px 22px 104px; }
  body.single-case-studies .site-main .architecture .section-head{ margin-bottom:60px; }
  body.single-case-studies .site-main .architecture__grid{ gap:58px; }
  body.single-case-studies .site-main .architecture__mobile{ margin-top:0; }
  body.single-case-studies .site-main .architecture__desktop .browser{ border-radius:14px; }
  body.single-case-studies .site-main .architecture__mobile .phone{ max-width:235px; border-width:6px; border-radius:38px; }
  body.single-case-studies .site-main .architecture__mobile .phone__screen{ border-radius:28px; }
  body.single-case-studies .site-main .chip{
    position:static;
    max-width:none;
    width:100%;
    margin-top:12px;
    padding:14px;
    border-radius:13px;
    font-size:12px;
  }

  body.single-case-studies .site-main .pathways{ padding:92px 22px 106px; }
  body.single-case-studies .site-main .pathways .section-head{ margin-bottom:58px; }
  body.single-case-studies .site-main .pathways__grid{ gap:24px; }
  body.single-case-studies .site-main .path-card,
  body.single-case-studies .site-main .path-card--up,
  body.single-case-studies .site-main .path-card--down{
    margin:0;
    padding:26px;
    border-radius:26px;
  }
  body.single-case-studies .site-main .path-card__top{ margin-bottom:28px; }
  body.single-case-studies .site-main .path-card__icon{ width:52px; height:52px; border-radius:14px; }
  body.single-case-studies .site-main .path-card__icon .icon{ width:25px; height:25px; }
  body.single-case-studies .site-main .path-card__cta em{ display:none; }
  body.single-case-studies .site-main .path-card__cta .arrow{ width:42px; height:42px; }
  body.single-case-studies .site-main .path-card__body{ margin-bottom:32px; }
  body.single-case-studies .site-main .path-card__body h3{ font-size:30px; }
  body.single-case-studies .site-main .path-card__body p{ font-size:16px; }
  body.single-case-studies .site-main .path-card__shot{ aspect-ratio:1.12/1; }

  body.single-case-studies .site-main .visual{ padding:92px 22px 104px; }
  body.single-case-studies .site-main .visual__grid{ gap:62px; }
  body.single-case-studies .site-main .visual .h2{ margin-bottom:26px; }
  body.single-case-studies .site-main .visual__lede{ margin-bottom:46px; }
  body.single-case-studies .site-main .visual__stack{ gap:38px; }
  body.single-case-studies .site-main .type-specimen__aa{ font-size:60px; }
  body.single-case-studies .site-main .type-specimen__rest{ font-size:24px; }
  body.single-case-studies .site-main .swatches{ gap:18px; }
  body.single-case-studies .site-main .swatch{ width:60px; height:60px; }
  body.single-case-studies .site-main .visual__frame{ border-radius:22px; }

  body.single-case-studies .site-main .wordpress-build{ padding:0 22px 96px; }
  body.single-case-studies .site-main .wordpress-build__inner{ padding-top:96px; gap:54px; }
  body.single-case-studies .site-main .wordpress-build .h2{ margin:18px 0 24px; font-size:44px; }
  body.single-case-studies .site-main .wordpress-build .lede{ font-size:16px; line-height:1.72; }
  body.single-case-studies .site-main .wordpress-build__subcopy{ margin-top:18px !important; }
  body.single-case-studies .site-main .wordpress-build__tags{ gap:10px; margin-top:34px; }
  body.single-case-studies .site-main .wordpress-build__tags span{ min-height:32px; padding:7px 11px; font-size:9px; }
  body.single-case-studies .site-main .wordpress-build__media{ gap:18px; }
  body.single-case-studies .site-main .wp-shot{ border-radius:17px; }
  body.single-case-studies .site-main .wp-shot__viewport{ height:auto; aspect-ratio:592/332; }

  body.single-case-studies .site-main .library{ padding:92px 22px 106px; }
  body.single-case-studies .site-main .library .section-head{ margin-bottom:60px; }
  body.single-case-studies .site-main .bento{ gap:18px; }
  body.single-case-studies .site-main .ui-card{ padding:28px; border-radius:22px; }

  body.single-case-studies .site-main .omnichannel{ padding:92px 22px 0; }
  body.single-case-studies .site-main .omnichannel .section-head{ margin-bottom:64px; }
  body.single-case-studies .site-main .omnichannel .section-head .h2{ font-size:40px; line-height:1.12; letter-spacing:-.045em; }
  body.single-case-studies .site-main .omnichannel .section-head .lede{ font-size:16px; line-height:1.72; }
  body.single-case-studies .site-main .devices{
    display:block;
    height:430px;
    width:100%;
  }
  body.single-case-studies .site-main .devices__desktop{
    top:0;
    left:0;
    width:100%;
  }
  body.single-case-studies .site-main .devices__desktop .browser{
    height:auto;
    border-radius:15px 15px 0 0;
  }
  body.single-case-studies .site-main .devices__desktop .browser__bar{ height:30px; padding-inline:12px; }
  body.single-case-studies .site-main .devices__desktop .browser__dots i{ width:7px; height:7px; }
  body.single-case-studies .site-main .devices__desktop .browser__shot{ height:auto; aspect-ratio:16/9; }
  body.single-case-studies .site-main .devices__tablet{
    top:154px;
    left:7%;
    bottom:auto;
    width:56%;
    height:auto;
    border-width:4px;
    border-radius:16px;
  }
  body.single-case-studies .site-main .tablet__screen{ height:auto; aspect-ratio:1/1; border-radius:11px; }
  body.single-case-studies .site-main .devices__phone{
    top:145px;
    right:7%;
    bottom:auto;
    width:31%;
    height:auto;
    border-width:5px;
    border-radius:30px;
  }
  body.single-case-studies .site-main .devices__phone .phone__screen{ height:auto; aspect-ratio:9/19; border-radius:22px; }

  html.ouc-motion-ready body.single-case-studies .site-main .devices__desktop,
  html.ouc-motion-ready body.single-case-studies .site-main .devices__tablet,
  html.ouc-motion-ready body.single-case-studies .site-main .devices__phone{
    opacity:1;
    transform:none;
  }

  body.single-case-studies .site-main .footer{ padding:50px 22px 42px; min-height: 570px; }
  body.single-case-studies .site-main .footer__cta{ margin-bottom:82px; }
  body.single-case-studies .site-main .footer__title{ font-size:42px; line-height:1.04; }
  body.single-case-studies .site-main .footer__links{ gap:22px; flex-wrap:wrap; justify-content:center; }
}

/* Small phones */
@media (max-width:420px){
  body.single-case-studies .site-main .hero__title{ font-size:38px; }
  body.single-case-studies .site-main .deconstructed .section-head .h2,
  body.single-case-studies .site-main .omnichannel .section-head .h2{ font-size:36px; }
  body.single-case-studies .site-main .devices{ height:390px; }
  body.single-case-studies .site-main .devices__tablet{ top:136px; }
  body.single-case-studies .site-main .devices__phone{ top:130px; }
}

/* Motion/accessibility */
@media (prefers-reduced-motion:reduce){
  html.ouc-motion-ready body.single-case-studies .site-main .devices__desktop,
  html.ouc-motion-ready body.single-case-studies .site-main .devices__tablet,
  html.ouc-motion-ready body.single-case-studies .site-main .devices__phone{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


@media (max-width:767.98px){

  body.single-case-studies .site-main .step__media,
  body.single-case-studies .site-main .step.step--flip .step__media{
    max-width:100%;
  }

  body.single-case-studies .site-main .step__media .browser{
    max-width:100%;
  }

}

@media (min-width:1024px){

  body.single-case-studies .site-main .step,
  body.single-case-studies .site-main .step.step--flip{
    display:grid;
    align-items:center;
    column-gap:64px;
  }

  /* Step 1, 3, 5:
     695px image | remaining copy
  */
  body.single-case-studies .site-main .step:not(.step--flip){
    grid-template-columns:
      minmax(0,695px)
      minmax(0,1fr);
  }

  body.single-case-studies .site-main .step:not(.step--flip) .step__media{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:695px;
    justify-self:start;
  }

  body.single-case-studies .site-main .step:not(.step--flip) .step__copy{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:420px;
    justify-self:start;
  }


  /* Step 2, 4, 6:
     remaining copy | 695px image
  */
  body.single-case-studies .site-main .step.step--flip{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,695px);
  }

  body.single-case-studies .site-main .step.step--flip .step__copy{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:420px;
    justify-self:start;
  }

  body.single-case-studies .site-main .step.step--flip .step__media{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:695px;
    justify-self:end;
  }

}