/* Logo Invention — long-form case study detail (premium)
   Layout: split hero + objective/meta (LI dark language, home navy) */
.csd-long{
  --ac:#EE3D25; /* LI brand red — do not substitute */
  --navy:#233058;
  --ink:#233058;
  --ink2:#2a3968;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.1);
  --glass:rgba(255,255,255,.04);
  /* Same content rail as Impact title — equal left/right inset through Outcome */
  --csd-rail:min(1120px,86vw);
  --csd-sec-pad:clamp(28px,3.2vw,48px);
  background:var(--ink);
  color:#fff;
  font-family:"Geometria",sans-serif;
  overflow:clip;
}
.csd-long *{box-sizing:border-box}
.csd-long a{color:inherit;text-decoration:none}
.csd-long .w{
  width:var(--csd-rail) !important;
  max-width:var(--csd-rail) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  position:relative;
  z-index:2;
  box-sizing:border-box;
}
.csd-long .tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Raleway",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#EE3D25!important;
  background:rgba(238,61,37,.12);
  border:1px solid rgba(238,61,37,.35);
  border-radius:999px;
  padding:8px 15px;
  margin:0 0 18px;
  box-shadow:none;
}
.csd-long h2{
  margin:0 0 18px;
  font-size:clamp(30px,4vw,52px);
  line-height:1.08;letter-spacing:-.035em;font-weight:700;
}
.csd-long h2 em,
.csd-long h3 em,
.csd-long h1 em,
.csd-long .csd-product em,
.csd-long em{
  font-style:normal;
  color:#EE3D25!important;
  -webkit-text-fill-color:#EE3D25!important;
  /* Match solid CTA fill — thin glyphs otherwise look coral vs button */
  text-shadow:0 0 0 #EE3D25;
}
.csd-long .lede,.csd-long p{
  font-family:"Raleway",sans-serif;
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.75;color:var(--muted);margin:0 0 16px;
}
.csd-long p:last-child{margin-bottom:0}
.csd-long .sec{
  padding:clamp(40px,5vw,72px) 0;
  border-top:1px solid var(--line);
  position:relative;
}
.csd-long .sec.narr-editorial,
.csd-long .sec.narr-problem,
.csd-long .sec.narr-outcome,
.csd-long .sec-built{
  padding:var(--csd-sec-pad) 0;
}
.csd-long .sec.alt{
  background:var(--ink2);
}

/* ===== Top: full-bleed video → navy fade → intro → Objective + meta card ===== */
.csd-long .csd-top{
  background:var(--ink);
  color:#fff;
  padding:0;
  border:0;
}
.csd-long .csd-media{
  position:relative;
  width:100%;
  height:min(78vh,860px);
  min-height:420px;
  overflow:hidden;
  background:#1a2340;
  margin-top:0;
  padding-top:0;
}
@supports (height: 100dvh){
  .csd-long .csd-media{height:min(78dvh,860px)}
}
.csd-long .csd-media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.csd-long .csd-media-fade{
  position:absolute;
  left:0;right:0;bottom:0;
  height:48%;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(35,48,88,0) 0%,
    rgba(35,48,88,.4) 35%,
    rgba(35,48,88,.88) 72%,
    var(--ink) 100%
  );
}
.csd-long .csd-intro{
  width:min(920px,90vw);
  margin:-2.5rem auto 0;
  padding:0 0 clamp(40px,5vw,72px);
  text-align:center;
  position:relative;
  z-index:2;
}
.csd-long .csd-intro .csd-lede{
  margin:0 auto 1.25rem;
  max-width:42rem;
  font-family:"Raleway",sans-serif;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.65;
  color:rgba(255,255,255,.62);
}
.csd-long .csd-intro h1{
  margin:0;
  font-family:"Geometria",sans-serif;
  font-weight:700;
  font-size:clamp(32px,4.6vw,64px);
  line-height:1.12;
  letter-spacing:-.035em;
  color:#fff;
}
.csd-long .csd-intro h1 em{
  font-style:normal;
  color:#EE3D25!important;
  -webkit-text-fill-color:#EE3D25!important;
  text-shadow:0 0 0 #EE3D25;
}

/* Objective band — navy + original glass meta card */
.csd-long .csd-objective{
  background:var(--ink);
  color:#fff;
  border-top:0;
  padding:clamp(8px,1.5vw,24px) 0 clamp(56px,7vw,100px);
}
.csd-long .csd-objective .obj-copy > p,
.csd-long .csd-objective .obj-copy p{
  color:rgba(255,255,255,.72);
}
.csd-long .csd-objective .obj-copy > p:first-of-type{
  color:rgba(255,255,255,.84);
  font-size:clamp(16px,1.2vw,19px);
}
@media (max-width:900px){
  .csd-long .csd-media{
    height:min(56vh,520px);
    min-height:280px;
  }
  .csd-long .csd-media-fade{height:55%}
  .csd-long .csd-intro{
    margin-top:-1.5rem;
    padding-bottom:2.5rem;
  }
  .csd-long .csd-intro h1{
    font-size:clamp(26px,7.5vw,40px);
  }
  .csd-long .csd-objective .obj-grid{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .csd-long .csd-objective .meta-panel{
    position:static;
  }
}

/* Legacy hero — split: copy + phone (kept for older markup) */
.csd-long .csd-hero{
  position:relative;
  min-height:min(100vh,980px);
  display:flex;align-items:center;
  padding:clamp(120px,11vw,170px) 0 clamp(48px,5vw,80px);
  overflow:hidden;background:var(--ink);
}
.csd-long .csd-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 60% at 78% 42%,rgba(238,61,37,.28),transparent 58%),
    radial-gradient(42% 50% at 10% 75%,rgba(238,61,37,.1),transparent 52%),
    radial-gradient(80% 50% at 50% -8%,rgba(238,61,37,.12),transparent 48%),
    var(--ink);
}
.csd-long .csd-hero-bg:before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 70% 50%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 50%,#000 20%,transparent 75%);
  opacity:.85;
}
.csd-long .csd-hero-bg:after{
  content:"";position:absolute;
  width:min(480px,42vw);height:min(480px,42vw);
  right:8%;top:50%;transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(238,61,37,.28);
  box-shadow:0 0 0 48px rgba(238,61,37,.05),0 0 0 96px rgba(238,61,37,.03);
  animation:csd-long-ring 8s ease-in-out infinite;
}
@keyframes csd-long-ring{
  0%,100%{opacity:.55;transform:translateY(-50%) scale(1)}
  50%{opacity:1;transform:translateY(-50%) scale(1.04)}
}
.csd-long .csd-hero .csd-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,300px);
  gap:clamp(36px,5vw,72px);
  align-items:center;
  width:min(1140px,88vw);
  margin:0 auto;
  justify-content:space-between;
  position:relative;z-index:2;
}
.csd-long .csd-copy-col{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(64vh,580px);
  padding:22px 8px 18px 28px;
  max-width:34em;
}
/* Glowing red L-frame (top + left) */
.csd-long .csd-copy-col:before{
  content:"";
  position:absolute;left:0;top:0;bottom:10%;
  width:3px;border-radius:3px;
  background:linear-gradient(180deg,#EE3D25 0%,rgba(238,61,37,.65) 42%,rgba(238,61,37,0) 100%);
  box-shadow:0 0 22px rgba(238,61,37,.55);
}
.csd-long .csd-copy-col:after{
  content:"";
  position:absolute;left:0;top:0;
  width:min(220px,55%);height:3px;border-radius:3px;
  background:linear-gradient(90deg,#EE3D25 0%,rgba(238,61,37,.65) 45%,rgba(238,61,37,0) 100%);
  box-shadow:0 0 22px rgba(238,61,37,.5);
}
.csd-long .csd-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 18px;
  font-family:"Raleway",sans-serif;
  font-size:clamp(11px,.78vw,13px);
  letter-spacing:.22em;text-transform:uppercase;
  color:#EE3D25!important;font-weight:600;
}
.csd-long .csd-eyebrow:before{
  content:"";width:28px;height:2px;background:#EE3D25;flex:none;
}
.csd-long .csd-copy-col h1{
  margin:0 0 10px;
  font-size:clamp(52px,7.2vw,104px);
  line-height:.88;letter-spacing:-.05em;font-weight:700;color:#fff;
  animation:csd-long-rise .9s cubic-bezier(.22,1,.36,1) both;
}
.csd-long .csd-product{
  margin:0 0 18px;
  font-family:"Geometria",sans-serif;
  font-size:clamp(20px,2.1vw,28px);
  line-height:1.2;letter-spacing:-.02em;font-weight:600;color:#fff;
  animation:csd-long-rise .9s .06s cubic-bezier(.22,1,.36,1) both;
}
.csd-long .csd-product em{
  font-style:normal;color:#EE3D25!important;
  text-shadow:0 0 40px rgba(238,61,37,.35);
}
.csd-long .csd-lede{
  margin:0 0 32px;max-width:28em;
  font-family:"Raleway",sans-serif;
  font-size:clamp(16px,1.15vw,20px);
  line-height:1.55;color:rgba(255,255,255,.7);
  animation:csd-long-rise .9s .12s cubic-bezier(.22,1,.36,1) both;
}
.csd-long .csd-meta-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 28px;padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  animation:csd-long-rise .9s .16s cubic-bezier(.22,1,.36,1) both;
}
.csd-long .csd-meta-line span{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  font-family:"Raleway",sans-serif;
  font-size:clamp(12px,.85vw,14px);font-weight:500;letter-spacing:.03em;
  color:rgba(255,255,255,.82);
  transition:border-color .25s,background .25s,color .25s;
}
.csd-long .csd-meta-line span:hover{
  border-color:rgba(238,61,37,.45);
  background:rgba(238,61,37,.08);color:#fff;
}
.csd-long .csd-cta{
  display:inline-flex;align-items:center;gap:18px;
  width:fit-content;padding:8px 8px 8px 22px;border-radius:999px;
  background:#EE3D25!important;color:#fff!important;text-decoration:none;
  font-family:"Geometria",sans-serif;font-weight:600;
  font-size:clamp(13px,.92vw,15px);border:1px solid transparent;
  box-shadow:0 12px 28px rgba(238,61,37,.35);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.1),background .4s ease,box-shadow .4s ease;
  animation:csd-long-rise .9s .22s cubic-bezier(.22,1,.36,1) both;
}
.csd-long .csd-cta-ico{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#fff!important;
  transition:background .4s ease,box-shadow .4s ease,transform .35s ease;
}
.csd-long .csd-cta-ico svg{width:15px;height:15px;display:block}
.csd-long .csd-cta-ico svg path{stroke:#EE3D25!important;transition:stroke .4s ease}
.csd-long .csd-cta:hover{
  transform:translateY(-2px);background:var(--navy)!important;
  box-shadow:0 14px 34px rgba(35,48,88,.45);
}
.csd-long .csd-cta:hover .csd-cta-ico{
  background:#EE3D25!important;box-shadow:0 0 16px rgba(238,61,37,.5);transform:translateX(2px);
}
.csd-long .csd-cta:hover .csd-cta-ico svg path{stroke:#fff!important}
.csd-long .csd-device-col{
  position:relative;z-index:2;display:flex;justify-content:center;
  animation:csd-long-float 5.5s ease-in-out infinite;
}
@keyframes csd-long-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes csd-long-rise{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
.csd-long .csd-phone{
  position:relative;width:100%;max-width:280px;aspect-ratio:9/19.2;
  border-radius:42px;padding:10px;
  background:linear-gradient(160deg,#2a2a2a 0%,#111 40%,#1a1a1a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 40px 80px rgba(0,0,0,.55),
    0 0 60px rgba(238,61,37,.18);
}
.csd-long .csd-phone:before{
  content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:28%;height:10px;border-radius:10px;background:#0a0803;z-index:3;
}
.csd-long .csd-phone-screen{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#0a0803;
}
.csd-long .csd-phone-screen video{
  width:100%;height:100%;object-fit:cover;object-position:center center;display:block;
}
.csd-long .csd-phone-glow{
  position:absolute;inset:-20% -30%;z-index:-1;
  background:radial-gradient(circle,rgba(238,61,37,.35),transparent 60%);
  filter:blur(20px);animation:csd-long-glow 4s ease-in-out infinite;
}
@keyframes csd-long-glow{
  0%,100%{opacity:.45}
  50%{opacity:.85}
}

@property --csd-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

/* Objective + meta panel */
.csd-long .obj-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.95fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.csd-long .obj-copy{max-width:38em}
.csd-long .obj-copy .tag{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;
}
.csd-long .obj-kicker{
  display:flex;align-items:center;gap:14px;margin:0 0 18px;width:100%;
}
.csd-long .obj-kicker .tag{margin:0}
.csd-long .obj-kicker:after{
  content:"";flex:1 1 auto;height:2px;min-width:40px;border-radius:2px;
  background:linear-gradient(90deg,#EE3D25 0%,rgba(238,61,37,.45) 40%,rgba(238,61,37,0) 100%);
}
.csd-long .obj-copy > p:first-of-type{
  font-size:clamp(17px,1.25vw,20px);
  color:rgba(255,255,255,.84);
  line-height:1.65;
}
.csd-long .meta-panel{
  --c:#EE3D25;
  --c-rgb:238,61,37;
  position:sticky;top:100px;
  isolation:isolate;
  overflow:visible;
  border-radius:22px;
  padding:clamp(22px,2.4vw,30px);
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(90% 70% at 0% 0%,rgba(238,61,37,.14),transparent 58%),
    radial-gradient(80% 60% at 100% 100%,rgba(238,61,37,.06),transparent 55%),
    linear-gradient(165deg,rgba(255,255,255,.08) 0%,rgba(20,28,52,.72) 48%,rgba(15,22,42,.9) 100%);
  box-shadow:
    0 22px 48px rgba(8,14,32,.45),
    0 0 28px rgba(238,61,37,.1),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  transition:
    transform .45s cubic-bezier(.2,.9,.3,1.15),
    border-color .35s ease,
    box-shadow .45s ease,
    background .4s ease;
}
/* No running border beam on Service Tags card */
.csd-long .meta-panel:after{
  display:none !important;
  content:none !important;
  animation:none !important;
}
.csd-long .meta-panel.is-in:after{
  display:none !important;
  animation:none !important;
}
.csd-long .meta-panel:hover,
.csd-long .meta-panel:focus-within{
  transform:translateY(-3px);
  border-color:rgba(var(--c-rgb),.38);
  background:
    radial-gradient(90% 70% at 0% 0%,rgba(238,61,37,.11),transparent 58%),
    radial-gradient(80% 60% at 100% 100%,rgba(35,48,88,.28),transparent 55%),
    linear-gradient(165deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 100%);
  box-shadow:
    0 22px 48px rgba(0,0,0,.42),
    0 0 18px rgba(var(--c-rgb),.16),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.csd-long .meta-panel:hover:after,
.csd-long .meta-panel:focus-within:after{
  display:none !important;
}
.csd-long .meta-block{position:relative;z-index:1;margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid rgba(255,255,255,.1)}
.csd-long .meta-block:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.csd-long .meta-label{
  font-family:"Raleway",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin:0 0 12px;
}
.csd-long .pills{display:flex;flex-wrap:wrap;gap:8px}
.csd-long .pills a,.csd-long .pills span{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
  font-family:"Raleway",sans-serif;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.9);
  transition:border-color .25s,background .25s,color .25s,transform .25s,box-shadow .25s;
}
.csd-long .pills a:hover{
  border-color:rgba(238,61,37,.55);
  background:rgba(238,61,37,.16);
  color:#fff;transform:translateY(-1px);
}
/* Service Tags — purple buttons, red on hover */
.csd-long .meta-block:first-child .pills a{
  padding:9px 16px;
  border-radius:999px;
  border:1px solid #8b78de;
  background:linear-gradient(135deg,#6e5cbf 0%,#544199 50%,#3e2b7a 100%) !important;
  color:#fff !important;
  font-weight:600;
  box-shadow:0 8px 20px rgba(110,92,191,.35);
  cursor:pointer;
  text-decoration:none;
}
.csd-long .meta-block:first-child .pills a:hover,
.csd-long .meta-block:first-child .pills a:focus-visible{
  border-color:#EE3D25 !important;
  background:#EE3D25 !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(238,61,37,.35);
  outline:none;
}
.csd-long .stack{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0;padding:0;
  font-family:"Raleway",sans-serif;font-size:13px;color:rgba(255,255,255,.85);
}
.csd-long .stack li{
  list-style:none;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
}

@property --csd-imp-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

/* Impact — same light band as The Client; no kicker divider */
.csd-long .sec-impact,
.csd-long .sec:has(> .w .impact-grid){
  background:#f7f7f8 !important;
  color:#0a0803;
  border-top:0;
  padding:var(--csd-sec-pad) 0 !important;
}
.csd-long .sec-impact .obj-kicker:after,
.csd-long .sec:has(> .w .impact-grid) .obj-kicker:after{
  display:none !important;
  content:none !important;
}
.csd-long .sec-impact .tag,
.csd-long .sec:has(> .w .impact-grid) .tag{
  color:#EE3D25!important;
  background:rgba(238,61,37,.1);
  border:1px solid rgba(238,61,37,.22);
  box-shadow:none;
  margin:0;
  letter-spacing:.14em;
}
.csd-long .sec-impact h2,
.csd-long .sec:has(> .w .impact-grid) h2{
  color:#0a0803;
  font-size:clamp(28px,3.2vw,42px);
  margin:0 0 8px;
}
.csd-long .sec-impact h2 em,
.csd-long .sec:has(> .w .impact-grid) h2 em{
  color:#EE3D25!important;
}
.csd-long .impact-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;margin-top:28px;
}
.csd-long .impact{
  --c:#EE3D25;
  --c-rgb:238,61,37;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:20px;
  border:1px solid rgba(10,8,3,.1);
  background:#fff;
  box-shadow:0 10px 28px rgba(35,48,88,.06);
  padding:clamp(22px,2.4vw,30px);
  min-height:100%;
  transition:
    transform .35s ease,
    border-color .3s ease,
    box-shadow .35s ease;
}
.csd-long .impact .imp-beam{
  display:none !important;
  animation:none !important;
}
.csd-long .impact b{
  position:relative;z-index:1;display:block;margin:0 0 12px;
  font-size:clamp(36px,3.6vw,52px);line-height:.95;letter-spacing:-.045em;
  color:#EE3D25!important;font-weight:700;
  text-shadow:none;filter:none;
  background:none;-webkit-text-fill-color:#EE3D25!important;
}
.csd-long .impact b:after{
  content:"";display:block;height:3px;width:42%;margin-top:12px;border-radius:3px;
  background:linear-gradient(90deg,#EE3D25,transparent);
  opacity:.55;transform:none;
  animation:none !important;
}
.csd-long .impact strong{
  position:relative;z-index:1;display:block;margin:0 0 10px;
  font-family:"Raleway",sans-serif;font-size:15px;font-weight:650;
  color:#0a0803;line-height:1.35;
}
.csd-long .impact span{
  position:relative;z-index:1;display:block;
  font-family:"Raleway",sans-serif;font-size:13px;line-height:1.55;
  color:rgba(10,8,3,.62);
}
.csd-long .impact-grid.imp-anim .impact,
.csd-long .impact-grid.imp-anim.is-in .impact{
  opacity:1;
  animation:none !important;
}
.csd-long .impact:hover,
.csd-long .impact:focus-within{
  z-index:3;
  transform:translateY(-4px);
  border-color:rgba(238,61,37,.35);
  box-shadow:0 16px 36px rgba(35,48,88,.1);
}
.csd-long .impact:hover .imp-beam,
.csd-long .impact:focus-within .imp-beam{
  display:none !important;
}

/* Narrative — light editorial (Client → Outcome), same rail as Impact */
.csd-long .narr h3{
  margin:0 0 16px;
  font-size:clamp(26px,3.1vw,40px);
  line-height:1.15;letter-spacing:-.03em;font-weight:700;color:#0a0803;
}
.csd-long .narr-editorial,
.csd-long .narr-problem,
.csd-long .narr-outcome:not(.quote),
.csd-long .sec-built{
  background:#f7f7f8 !important;
  color:#0a0803;
  border-top:0;
  padding:var(--csd-sec-pad) 0 !important;
}
.csd-long .narr-editorial .obj-kicker:after,
.csd-long .narr-problem .obj-kicker:after,
.csd-long .narr-outcome .obj-kicker:after,
.csd-long .sec-built .obj-kicker:after{
  display:none;
}
.csd-long .narr-editorial .tag,
.csd-long .narr-problem .tag,
.csd-long .narr-outcome .tag,
.csd-long .sec-built .tag{
  color:#EE3D25!important;
  background:rgba(238,61,37,.1);
  border:1px solid rgba(238,61,37,.22);
  box-shadow:none;
  margin:0 0 18px;
  letter-spacing:.14em;
}
/* Keep .w rail — do NOT stretch to full viewport */
.csd-long .w.narr-split,
.csd-long .narr-editorial .w.narr-split,
.csd-long .w.narr-problem-grid,
.csd-long .narr-problem .w.narr-problem-grid{
  display:block;
  width:var(--csd-rail) !important;
  max-width:var(--csd-rail) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.csd-long .narr-main{
  max-width:none;
}
.csd-long .narr-editorial h3,
.csd-long .narr-problem h3,
.csd-long .narr-outcome h3{
  margin:0 0 18px;
  max-width:34ch;
  font-size:clamp(26px,3.1vw,40px);
  line-height:1.15;letter-spacing:-.03em;
  color:#0a0803;
}
.csd-long .narr-editorial h3 em,
.csd-long .narr-problem h3 em,
.csd-long .narr-outcome h3 em{
  font-style:normal;color:#EE3D25!important;
}
.csd-long .narr-editorial p,
.csd-long .narr-problem p,
.csd-long .narr-outcome p,
.csd-long .narr-lead{
  font-family:"Raleway",sans-serif !important;
  font-size:clamp(15px,1.1vw,17px) !important;
  line-height:1.7 !important;
  color:rgba(10,8,3,.68) !important;
  margin:0 0 14px !important;
  max-width:54em;
}
.csd-long .narr-lead{
  font-size:clamp(16px,1.15vw,18px) !important;
  color:rgba(10,8,3,.78) !important;
}
.csd-long .narr-editorial .narr-aside{
  display:none !important;
}

/* Problem: same rail as Impact, media under copy (left-aligned to rail) */
.csd-long .narr-problem .narr-problem-grid{
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.2vw,28px);
  align-items:stretch;
}
.csd-long .narr-problem-copy{
  max-width:none;
  padding-top:0;
}
.csd-long .narr-problem-copy h3{
  max-width:34ch;
  margin-bottom:16px;
}
.csd-long .narr-problem-visual{
  display:block;
  width:min(920px,100%);
  max-width:100%;
  margin:0; /* left-align with content rail (same start as copy) */
  position:relative;
  min-height:0;
}
.csd-long .narr-media-card{
  border-radius:24px;
  overflow:hidden;
  min-height:0;
  box-shadow:0 18px 40px rgba(35,48,88,.14);
}
/* Video fills the card — no nested phone chrome (video already is the UI) */
.csd-long .narr-media-card--stage{
  background:var(--navy);
  display:block;
  padding:0;
  aspect-ratio:16 / 10;
  width:100%;
  position:relative;
}
.csd-long .narr-media-card--shot{
  display:none !important;
}
.csd-long .narr-phone,
.csd-long .narr-phone-frame,
.csd-long .narr-phone-screen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:block;
  animation:none;
  aspect-ratio:auto;
  max-width:none;
}
.csd-long .narr-phone-glow,
.csd-long .narr-phone-frame:before{
  display:none !important;
  content:none !important;
}
.csd-long .narr-phone-screen video,
.csd-long .narr-media-card--stage video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
@media(max-width:900px){
  .csd-long{
    --csd-sec-pad:clamp(24px,6vw,40px);
  }
  .csd-long .narr-media-card--stage{aspect-ratio:4 / 3;border-radius:18px}
  .csd-long .narr h3,
  .csd-long .narr-editorial h3,
  .csd-long .narr-problem h3,
  .csd-long .narr-outcome h3{
    max-width:none;
    font-size:clamp(24px,6.5vw,34px);
  }
}
/* keep legacy wide media if reused elsewhere */
.csd-long .narr-media{
  margin:clamp(36px,5vw,56px) 0 0;
  border-radius:28px;overflow:hidden;
  border:1px solid rgba(35,48,88,.1);
  background:var(--navy);
  aspect-ratio:16/9;
  box-shadow:0 24px 50px rgba(35,48,88,.16);
  position:relative;
}
.csd-long .narr-media video{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Built — light checklist card (reference: 3×2, checks, same rail) */
.csd-long .sec-built{
  background:#f7f7f8 !important;
}
.csd-long .sec-built.alt{background:#f7f7f8 !important}
.csd-long .sec-built h2{
  color:#0a0803;
  font-size:clamp(28px,3.2vw,42px);
  margin:0 0 12px;
}
.csd-long .sec-built .built-lede{
  max-width:46em;margin:0 0 28px !important;
  color:rgba(10,8,3,.68) !important;
  font-size:clamp(15px,1.1vw,17px) !important;
}
.csd-long .built-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:0;
  background:#fff;
  border:1px solid rgba(10,8,3,.1);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(35,48,88,.06);
}
.csd-long .built-card{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:12px;
  min-height:0;
  padding:clamp(22px,2.2vw,28px) clamp(18px,2vw,26px);
  border-radius:0;
  border:0;
  border-bottom:1px solid rgba(10,8,3,.08);
  background:transparent;
  box-shadow:none;
  isolation:auto;
  overflow:visible;
  transition:background .2s ease;
}
.csd-long .built-card:nth-child(n+4){border-bottom:0}
.csd-long .built-card:nth-child(3n+1),
.csd-long .built-card:nth-child(3n+2){
  box-shadow:inset -1px 0 0 rgba(10,8,3,.06);
}
.csd-long .built-card .built-beam{display:none !important}
.csd-long .built-num{display:none !important}
.csd-long .built-card h3{
  position:relative;
  z-index:1;
  margin:0;
  padding-left:0;
  font-size:clamp(15px,1.15vw,17px);
  letter-spacing:-.01em;
  font-weight:600;
  color:#0a0803;
  line-height:1.35;
  display:flex;
  align-items:center;
  gap:12px;
}
.csd-long .built-card h3:before{
  content:"";
  flex:none;
  width:22px;height:22px;
  border-radius:50%;
  background:#EE3D25;
  box-shadow:0 0 0 3px rgba(238,61,37,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2l3 3 6-6.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px 12px;
  background-repeat:no-repeat;
  background-position:center;
}
.csd-long .built-card h3:after{display:none !important}
.csd-long .built-card p{display:none !important}
.csd-long .built-grid.built-anim .built-card,
.csd-long .built-grid.built-anim.is-in .built-card{
  opacity:1;
  animation:none !important;
}
.csd-long .built-card:hover,
.csd-long .built-card:focus-within{
  transform:none;
  background:rgba(238,61,37,.04);
  border-color:transparent;
  box-shadow:inset -1px 0 0 rgba(10,8,3,.06);
}
.csd-long .built-card:nth-child(3n):hover{box-shadow:none}

/* Outcome — light editorial, same rail as Impact */
.csd-long .narr-outcome .w{
  width:var(--csd-rail) !important;
  max-width:var(--csd-rail) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:left;
}
.csd-long .narr-outcome:not(.quote){
  background:#f7f7f8 !important;
  color:#0a0803;
}
.csd-long .narr-outcome h3{
  margin:0 0 16px;
  max-width:28ch;
  font-size:clamp(26px,3.1vw,40px);
  line-height:1.15;letter-spacing:-.03em;
  color:#0a0803;
}
.csd-long .narr-outcome h3 em{font-style:normal;color:#EE3D25!important}
.csd-long .narr-outcome .narr-lead,
.csd-long .narr-outcome p{
  max-width:46em;
}

/* Quote / Testimonials — dark navy editorial (LI) */
.csd-long .quote.narr-outcome{
  border-top:1px solid var(--line);
  border-bottom:0;
  background:
    radial-gradient(ellipse 70% 55% at 88% 18%,rgba(238,61,37,.22),transparent 58%),
    radial-gradient(ellipse 50% 40% at 8% 90%,rgba(238,61,37,.1),transparent 55%),
    var(--navy);
  overflow:hidden;
}
.csd-long .quote.narr-outcome .w{
  text-align:center;
  max-width:min(760px,90vw)!important;
}
.csd-long .quote-heading{
  margin:0 0 clamp(22px,3vw,36px);
  font-family:"Geometria",sans-serif;
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.1;letter-spacing:-.03em;font-weight:700;color:#fff;
}
.csd-long .quote-text{
  margin:0 auto 28px;
  max-width:36em;
  font-family:"Geometria",sans-serif;
  font-size:clamp(18px,1.65vw,24px);
  line-height:1.55;letter-spacing:-.015em;font-weight:500;color:rgba(255,255,255,.92);
  font-style:normal;
}
.csd-long .quote-cite{
  display:flex;flex-direction:column;align-items:flex-end;
  margin:0 auto;padding-top:18px;max-width:36em;
  border-top:1px solid rgba(255,255,255,.18);
  font-family:"Raleway",sans-serif;font-style:normal;text-align:right;
}
.csd-long .quote-cite strong{
  display:block;color:#fff;font-size:15px;font-weight:700;margin-bottom:2px;
}
.csd-long .quote-cite span{color:rgba(255,255,255,.7);font-size:13px;font-weight:500}

/* Mid CTA — navy card on light band, opens lead form */
.csd-long .mid-cta-sec{display:none!important;
} /* removed from case detail pages */
.csd-long .mid-cta-sec-legacy{
  background:#f7f7f8;
  border-top:0;
  padding:clamp(36px,5vw,64px) 0;
  color:var(--ink);
}
.csd-long .mid-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:24px;
  padding:clamp(32px,4vw,52px) clamp(28px,4vw,48px);
  border:0;
  background:
    radial-gradient(circle at 92% 12%,rgba(238,61,37,.35),transparent 42%),
    linear-gradient(145deg,#2a3968 0%,var(--navy) 55%,#1a2444 100%);
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  box-shadow:0 22px 50px rgba(35,48,88,.28);
}
.csd-long .mid-cta-deco{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 78% 70%,rgba(255,255,255,.07) 0 42px,transparent 43px),
    radial-gradient(circle at 88% 58%,rgba(255,255,255,.05) 0 28px,transparent 29px),
    linear-gradient(135deg,transparent 62%,rgba(255,255,255,.06) 62% 63%,transparent 63%),
    linear-gradient(135deg,transparent 72%,rgba(255,255,255,.04) 72% 73%,transparent 73%);
  opacity:.9;
}
.csd-long .mid-cta-title,
.csd-long .mid-cta-sub,
.csd-long .mid-cta-btn{
  position:relative;z-index:1;
}
.csd-long .mid-cta-title{
  margin:0 0 14px;max-width:34em;color:#fff;
  font-family:"Geometria",sans-serif;
  font-size:clamp(22px,2.2vw,32px);line-height:1.28;font-weight:700;letter-spacing:-.02em;
}
.csd-long .mid-cta-sub{
  margin:0 0 28px;max-width:38em;
  font-family:"Raleway",sans-serif;
  font-size:clamp(14px,1.05vw,16px);line-height:1.6;font-weight:500;
  color:rgba(255,255,255,.78);
}
.csd-long .mid-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin:0;padding:14px 26px;border-radius:10px;
  background:#fff;color:var(--navy)!important;
  font-family:"Geometria",sans-serif;font-size:15px;font-weight:700;
  letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}
.csd-long .mid-cta-btn:hover{
  background:#EE3D25;color:#fff!important;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(238,61,37,.35);
}
.csd-long .mid-cta-beam{display:none!important}

/* Recent cases — original navy band; More Work Live Apps size + L/R lines; title+lede centered */
.csd-long .recent,
.csd-long .recent.dark-block{
  background:
    radial-gradient(70% 55% at 8% 0%,rgba(238,61,37,.18),transparent 55%),
    radial-gradient(55% 45% at 100% 20%,rgba(238,61,37,.1),transparent 50%),
    #233058 !important;
  color:#fff !important;
  padding:clamp(48px,5.5vw,88px) 0 clamp(56px,7vw,96px);
  overflow:hidden;
  border-top:0;
  border-bottom:0;
}
.csd-long .recent-head{
  display:block;
  margin-bottom:clamp(18px,2.4vw,32px);
  text-align:center;
}
.csd-long .recent-head .obj-kicker{
  justify-content:center;
  width:100%;
  margin:0;
}
.csd-long .recent-head .obj-kicker:after{display:none !important;content:none !important}
.csd-long .recent-head .tag{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1.2vw;
  width:100%;
  margin:0 0 1.1vw !important;
  padding:0 !important;
  font-family:"Geometria",sans-serif !important;
  font-size:1.35vw !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.72) !important; /* Live Apps size; light tone on navy */
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.csd-long .recent-head .tag:before,
.csd-long .recent-head .tag:after{
  content:"";
  display:block;
  flex:1 1 0;
  height:1px;
  min-width:2vw;
}
.csd-long .recent-head .tag:before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28));
}
.csd-long .recent-head .tag:after{
  background:linear-gradient(90deg,rgba(255,255,255,.28),transparent);
}
.csd-long .recent-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4vw;
  margin:1.2vw 0 1.2vw;
  flex-wrap:nowrap;
}
.csd-long .recent-head h2{
  margin:0 !important;
  font-family:"Geometria",sans-serif !important;
  font-size:2.85vw !important;
  line-height:112% !important;
  letter-spacing:-.01em !important;
  font-weight:700 !important;
  color:#fff !important;
  text-align:center;
  white-space:nowrap;
  flex:1 1 auto;
  min-width:0;
}
.csd-long .recent-head h2:before{display:none !important;content:none !important}
.csd-long .recent-head h2 em{
  font-style:normal;
  font-weight:700 !important;
  color:#EE3D25 !important;
}
.csd-long .recent-head p,
.csd-long .recent-lede{
  margin:0 auto 2.8vw !important;
  max-width:52rem;
  font-family:"Raleway",sans-serif !important;
  font-weight:400 !important;
  font-size:.98vw !important;
  line-height:160% !important;
  color:rgba(255,255,255,.72) !important;
  text-align:center;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}
/* All Case Studies removed */
.csd-long .recent-head .csd-cta{
  display:none !important;
}
.csd-long .recent-scroller{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  padding:22px 0 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.csd-long .recent-track{
  display:flex;
  align-items:stretch;
  width:max-content;
  padding:4px 0;
  will-change:transform;
  animation:csd-recent-marquee 48s linear infinite;
}
.csd-long .recent-scroller:hover .recent-track{
  animation-play-state:paused;
}
@keyframes csd-recent-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.csd-long .recent .cs-card{
  flex:0 0 min(380px,82vw);
  width:min(380px,82vw);
  min-height:clamp(420px,48vw,520px);
  margin-right:22px;
  --cs-ac:#EE3D25;
}
.csd-long .recent-track:hover .cs-card:not(:hover){
  opacity:.55;
  filter:brightness(.92) saturate(.92);
}
.csd-long .recent .cs-body{
  padding:clamp(18px,2vw,28px);
  padding-top:clamp(64px,7vw,110px);
}
.csd-long .recent .cs-title{
  font-size:clamp(24px,2.2vw,34px)!important;
  color:#fff!important;
}
.csd-long .recent .cs-desc{
  color:rgba(255,255,255,.72)!important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.csd-long .recent .cs-btn{
  background:#EE3D25!important;
  border-color:#EE3D25!important;
}
.csd-long .recent .cs-card:hover .cs-btn{
  background:linear-gradient(135deg,#6e5cbf 0%,#544199 50%,#3e2b7a 100%)!important;
  border-color:#8b78de!important;
  box-shadow:0 16px 36px rgba(110,92,191,.45)!important;
}

/* Reveal */
.csd-long .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s ease;
}
.csd-long .reveal.in{opacity:1;transform:none}

@media(max-width:980px){
  .csd-long .obj-grid{grid-template-columns:1fr}
  .csd-long .meta-panel{position:static}
  .csd-long .impact-grid{grid-template-columns:1fr 1fr}
  .csd-long .built-grid{grid-template-columns:1fr 1fr}
  .csd-long .built-card{box-shadow:none;border-bottom:1px solid rgba(10,8,3,.08)}
  .csd-long .built-card:nth-child(odd){box-shadow:inset -1px 0 0 rgba(10,8,3,.06)}
  .csd-long .built-card:nth-child(n+5){border-bottom:0}
  .csd-long .csd-hero{min-height:auto;padding:28vw 0 14vw}
  .csd-long .csd-hero .csd-wrap{grid-template-columns:1fr;gap:12vw;text-align:center}
  .csd-long .csd-copy-col{min-height:0;padding:0;max-width:none;align-items:center;text-align:center}
  .csd-long .csd-copy-col:before{display:none}
  .csd-long .csd-eyebrow{justify-content:center}
  .csd-long .csd-eyebrow:before{display:none}
  .csd-long .csd-copy-col h1{font-size:15vw}
  .csd-long .csd-lede{margin-left:auto;margin-right:auto}
  .csd-long .csd-cta{margin:0 auto}
  .csd-long .csd-device-col{order:-1}
  .csd-long .csd-phone{width:min(58vw,240px)}
  .csd-long .csd-hero-bg:after{right:50%;transform:translate(50%,-40%);width:70vw;height:70vw}
}
@media(max-width:600px){
  .csd-long .impact-grid,.csd-long .built-grid{grid-template-columns:1fr}
  .csd-long .narr-media{border-radius:18px}
  .csd-long .narr-phone{width:min(240px,62vw)}
  .csd-long .recent-title-row{flex-wrap:wrap;justify-content:center;gap:4vw;margin:4vw 0}
  .csd-long .recent-head .tag{font-size:3.4vw!important;gap:3vw}
  .csd-long .recent-head h2{white-space:normal !important;font-size:8.2vw !important;text-align:center}
  .csd-long .recent-lede,
  .csd-long .recent-head p{white-space:normal !important;font-size:3.6vw !important;margin:0 auto 8vw !important;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .csd-long .impact,.csd-long .built-card,.csd-long .reveal,.csd-long .recent .cs-card{transition:none}
  .csd-long .recent-track{animation:none}
  .csd-long .reveal{opacity:1;transform:none}
  .csd-long .csd-device-col,
  .csd-long .narr-phone,
  .csd-long .narr-phone-glow,
  .csd-long .csd-phone-glow,
  .csd-long .csd-hero-bg:after,
  .csd-long .csd-copy-col h1,
  .csd-long .csd-product,
  .csd-long .csd-lede,
  .csd-long .csd-meta-line,
  .csd-long .csd-cta{animation:none}
  .csd-long .meta-panel:after{animation:none!important;opacity:.55;--csd-angle:200deg}
  .csd-long .impact-grid.imp-anim .impact{opacity:1;animation:none}
  .csd-long .impact .imp-beam,
  .csd-long .impact b:after{animation:none!important}
  .csd-long .built-grid.built-anim .built-card{opacity:1;animation:none}
  .csd-long .built-card .built-beam,
  .csd-long .built-card h3:after{animation:none!important}
}