/* ========================================================================
   AI LAB · CASE STUDIES  (overview + detail pages)
   Loaded after /css/style.css and before /css/a11y-focus.css, only on the case pages.
   Material = the AI Concierge's midnight optical glass (same numbers as the nav, the
   footer card and the contact panels): deep blue ground, violet refraction, electric-blue
   signal. Headlines = Plus Jakarta Sans (the site's h1 voice), UI = Inter (the concierge).
   Every motion here is behind prefers-reduced-motion; hover-only detail is never the only
   route to information.
   ======================================================================== */
body.page-cases{
  --cs-bg:#070B1B;--cs-bg2:#0A1024;
  --cs-ink:#F7F9FF;--cs-mute:rgba(214,224,255,.64);--cs-dim:rgba(214,224,255,.42);--cs-hair:rgba(190,208,255,.14);
  --cs-blue:#5FA8FF;--cs-blue-ink:#8CC0FF;--cs-vio:#8B7CFF;
  --cs-glass:rgba(13,20,56,.58);--cs-glass-h:rgba(16,25,66,.66);
  --cs-rim:0 0 0 1px rgba(130,170,255,.30),0 0 0 2px rgba(110,77,255,.10),0 18px 44px rgba(2,6,24,.5),inset 0 1px 0 rgba(170,205,255,.30),inset 0 0 0 1px rgba(255,255,255,.05);
  --cs-rim-h:0 0 0 1px rgba(150,190,255,.55),0 0 0 2px rgba(110,77,255,.20),0 0 40px rgba(36,107,255,.26),0 26px 60px rgba(2,6,24,.6),inset 0 1px 0 rgba(170,205,255,.5),inset 0 0 0 1px rgba(255,255,255,.07);
  --cs-spec:radial-gradient(60% 50% at 0% 0%,rgba(70,140,255,.26),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.12),rgba(150,190,255,0) 30%),radial-gradient(55% 45% at 100% 100%,rgba(110,77,255,.22),transparent 62%);
  --cs-ui:Inter,"Plus Jakarta Sans",sans-serif;
  --cs-out:cubic-bezier(.2,.7,.2,1);
  background:var(--cs-bg);color:var(--cs-ink)}
body.page-cases main{background:linear-gradient(180deg,var(--cs-bg) 0%,var(--cs-bg2) 100%)}
body.page-cases ::selection{background:rgba(95,168,255,.35);color:#fff}
/* the light footer band under the glass card is the site's own; keep the seam invisible */
body.page-cases .ft.ft-glass{background:linear-gradient(180deg,var(--cs-bg2) 0%,#0A1024 100%)}

/* ---------- shared bits ---------- */
.cs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cs-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--cs-ui);font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cs-mute)}
.cs-eyebrow::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--cs-blue);box-shadow:0 0 10px rgba(95,168,255,.6)}
.cs-kicker{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;font-family:var(--cs-ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#DCE7FF;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(160,190,255,.26),inset 0 1px 0 rgba(255,255,255,.08)}
.cs-kicker i{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7)}
.cs-kicker[data-kind="internal"] i{background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);box-shadow:inset 0 -1px 1px rgba(120,30,0,.35),0 0 8px rgba(255,106,43,.6)}
.cs-kicker[data-kind="lab"] i{background:radial-gradient(circle at 34% 30%,#efe8ff 0,#c2b3ff 30%,#8B7CFF 58%,#5a45d6 100%);box-shadow:inset 0 -1px 1px rgba(40,20,120,.35),0 0 8px rgba(139,124,255,.7)}
.cs-kicker[data-kind="demo"] i{background:radial-gradient(circle at 34% 30%,#ffffff 0,#dfe6f5 30%,#a9b6d3 58%,#7d8aa8 100%);box-shadow:0 0 6px rgba(200,215,255,.5)}

/* glass buttons: the AI LAB capsule language (same numbers as the contact page's book button) */
.cs-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 24px;border-radius:999px;font-family:var(--cs-ui);font-size:15.5px;font-weight:500;letter-spacing:-.02em;color:#fff;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,rgba(60,110,230,.55),rgba(63,42,143,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 20px rgba(36,107,255,.22);
  transition:transform .3s var(--cs-out),box-shadow .3s var(--cs-out),background .3s var(--cs-out)}
.cs-btn i{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7)}
.cs-btn svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--cs-out)}
.cs-btn-solid{background:linear-gradient(135deg,#3B86FF,#246BFF);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(36,107,255,.32),0 0 0 1px rgba(160,195,255,.25)}
.cs-btn-ghost{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(160,190,255,.28),inset 0 1px 0 rgba(255,255,255,.08)}
@media (hover:hover) and (pointer:fine){
  .cs-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(160,195,255,.6),0 0 28px rgba(36,107,255,.36)}
  .cs-btn-solid:hover{background:linear-gradient(135deg,#4A93FF,#2C74FF);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px rgba(36,107,255,.4),0 0 0 1px rgba(160,195,255,.4)}
  .cs-btn:hover svg{transform:translateX(3px)}
}
/* ========================================================================
   THE INDEX, rebuilt on noveq.framer.website/case-studies and measured at the
   width they actually design for. Their page is light (#F0F0F0) with white
   cards and a dark contact block + footer under it, so this page turns light
   too and our own dark closing panel and footer land where theirs do.

   Measured at 1440 (their desktop): container max 1600 with 40px sides, TWO
   columns with a 6px gutter, cards 677 wide and 450 tall. The single column
   only appears below 1200; at 1024 the card drops to 423 and the name to 28px.
   The thumbnail is absolutely placed 6px in from the top-right corner. Rhythm
   from the card's top edge: mark 24, name 63, sub 110, year 139, story 284,
   chips 372, with 30px of air left under the chips.

   HOVER, sampled frame by frame off the live site: the card fills #FFFFFF ->
   #E3E3E3 while the thumbnail grows 215x160 -> 245x182.5 (x1.14) anchored on
   its top-right corner. A least-squares fit over 26 frames gives 280ms
   cubic-bezier(.35,0,.6,1), rms 0.18px; both properties ride that curve.

   The band under the lede is their ticker: 46 tall, 60px between items,
   drifting left at ~20px/s behind a mask that fades the outer 5%.
   ======================================================================== */
body.page-cases{background:var(--nq-page);color:var(--nq-ink);
  --nq-page:#F0F0F0;--nq-card:#FFFFFF;--nq-card-h:#E3E3E3;
  --nq-ink:#0A0A0A;--nq-mute:#6D6D6D;--nq-lede:#4F4F4F;--nq-chip:#F0F0F0;--nq-band:#B5B5B5;
  /* the mute grey is one step darker than the reference #6E6E6E on purpose: on the #F0F0F0
     page that value lands on 4.47:1, a hair under AA, and #6D6D6D clears it at 4.54:1 */
  --nq-accent:#246BFF;                       /* our own blue, not the reference's */
  --nq-hover:280ms cubic-bezier(.35,0,.6,1); /* the fitted card curve */
  --nq-head:"Plus Jakarta Sans",Inter,sans-serif}
body.page-cases main{background:var(--nq-page)}
body.page-cases ::selection{background:rgba(36,107,255,.22);color:#0A0A0A}
/* the closing panel and the footer stay dark, exactly as the reference does under its light index */
body.page-cases .ft.ft-glass{background:#0A1024}

/* ---------- hero: eyebrow, one big line, a short lede ---------- */
.nq-hero{padding:140px 0 0}
.nq-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font-family:var(--cs-ui);font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--nq-mute)}
.nq-eyebrow i{width:2px;height:14px;border-radius:1px;background:var(--nq-accent)}
.nq-h1{margin:0;max-width:1300px;font-family:var(--nq-head);font-size:clamp(40px,7.4vw,106px);font-weight:600;
  line-height:1;letter-spacing:-.04em;color:var(--nq-ink)}
.nq-h1 span{color:var(--nq-accent)}
.nq-lede{margin:32px 0 0;max-width:600px;font-family:var(--nq-head);font-size:16px;font-weight:500;
  line-height:1.4;letter-spacing:-.03em;color:var(--nq-lede)}
.nq-lede b{font-weight:600;color:var(--nq-ink)}
.nq-lede + .nq-lede{margin-top:10px}

/* ---------- the band: their ticker, our six system names ---------- */
.nq-band{margin-top:60px;height:46px;overflow:clip;
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(270deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.nq-band ul{display:flex;align-items:center;gap:60px;height:100%;width:max-content;margin:0;padding:0;list-style:none;
  animation:nqDrift 40s linear infinite;will-change:transform}
.nq-band li{font-family:var(--nq-head);font-size:19px;font-weight:600;line-height:1;letter-spacing:-.03em;
  color:var(--nq-band);white-space:nowrap}
@keyframes nqDrift{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 30px))}}

/* ---------- the grid: two columns from 1200 up, a 6px gutter both ways ---------- */
.nq-cases{padding:60px 0 120px}
.nq-stack{display:grid;grid-template-columns:1fr;gap:6px}

.nq-case{position:relative;display:flex;flex-direction:column;min-height:423px;padding:24px;border-radius:20px;
  background:var(--nq-card);color:var(--nq-ink);text-decoration:none;overflow:hidden;
  transition:background-color var(--nq-hover)}
.nq-case:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(36,107,255,.5)}

/* the thumbnail: 6px in from the top-right corner, growing on hover from that same corner */
.nq-media{position:absolute;top:6px;right:6px;z-index:1;width:215px;height:160px;border-radius:12px;overflow:hidden;
  background:#E8E8E8;transition:width var(--nq-hover),height var(--nq-hover)}
.nq-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover) and (pointer:fine){
  .nq-case:hover{background:var(--nq-card-h)}
  .nq-case:hover .nq-media{width:245px;height:182.5px}
}

/* the mark: the reference carries a client logo here; ours says what kind of thing this is */
.nq-kind{display:inline-flex;align-items:center;gap:7px;height:23px;align-self:flex-start;
  font-family:var(--cs-ui);font-size:12px;font-weight:600;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--nq-mute)}
.nq-kind::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%)}
.nq-kind[data-kind="lab"]::before{background:radial-gradient(circle at 34% 30%,#e8ffe9 0,#8ee6a1 30%,#33bd63 58%,#128a45 100%)}
.nq-kind[data-kind="internal"]::before{background:radial-gradient(circle at 34% 30%,#fff0dd 0,#ffc98c 30%,#f79a35 58%,#c96f10 100%)}

.nq-name{margin-top:16px;font-family:var(--nq-head);font-size:28px;font-weight:600;line-height:1.3;letter-spacing:-.03em;color:var(--nq-ink)}
.nq-sub{margin-top:6px;font-family:var(--nq-head);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--nq-ink)}
.nq-year{margin-top:7px;font-family:var(--nq-head);font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--nq-mute)}
/* the story sits low in the card: the space above it is the one that flexes */
.nq-story{margin-top:auto;max-width:500px;font-family:var(--nq-head);font-size:20px;font-weight:500;
  line-height:1.4;letter-spacing:-.03em;color:var(--nq-mute)}
.nq-chips{display:flex;flex-wrap:wrap;gap:6px;margin:32px 0 0}
.nq-chip{display:inline-flex;align-items:center;gap:8px;height:24px;padding:5px 10px;border-radius:25px;
  background:var(--nq-chip);font-family:var(--cs-ui);font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--nq-mute);white-space:nowrap}
.nq-chip b{font-weight:500;color:var(--nq-ink)}

/* the reference's own desktop card: taller, a bigger name, 30px of air under the chips */
@media (min-width:1200px){
  .nq-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nq-case{min-height:450px}
  .nq-name{font-size:32px}
  .nq-chips{margin-bottom:30px}
}

/* ---------- entrance: the site's own [data-nv-reveal] observer ---------- */
.nq-case[data-nv-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--spring),transform .7s var(--spring),background-color var(--nq-hover)}
.nq-case[data-nv-reveal].in{opacity:1;transform:none}
.nq-hero [data-nv-reveal]{transform:translateY(18px)}
.nq-hero [data-nv-reveal].in{transform:none}

/* ---------- narrow: the thumbnail leaves the corner and leads the card ---------- */
@media (max-width:900px){
  .nq-hero{padding:120px 0 0}
  .nq-band{margin-top:44px}
  .nq-cases{padding:44px 0 90px}
  .nq-case{min-height:0;padding:16px}
  .nq-media{position:relative;top:auto;right:auto;width:100%;height:auto;aspect-ratio:4/3;margin-bottom:18px}
  .nq-story{margin-top:24px;font-size:17px;max-width:none}
  .nq-name{font-size:24px}
  .nq-chips{margin-top:20px}
  .nq-chip{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .nq-case,.nq-media{transition:none}
  .nq-band ul{animation:none}
  .nq-case[data-nv-reveal]{opacity:1;transform:none;transition:none}
}

.cs-close{padding:96px 0 120px}
.cs-close-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:60px 64px;border-radius:28px;
  background:var(--cs-glass);box-shadow:var(--cs-rim);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4)}
.cs-close-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(55% 45% at 0% 0%,rgba(70,140,255,.32),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.12),rgba(150,190,255,0) 24%),radial-gradient(45% 40% at 100% 0%,rgba(110,77,255,.18),transparent 62%)}
.cs-close-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;background:linear-gradient(200deg,rgba(150,195,255,.85),rgba(150,195,255,0) 28%,rgba(110,77,255,0) 70%,rgba(110,77,255,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.cs-close-card h2{margin-top:20px;font-size:clamp(34px,4vw,54px);font-weight:600;line-height:1.06;letter-spacing:-.035em;color:#fff}
.cs-close-card h2 .blue{color:var(--cs-blue)}
.cs-close-card p{margin-top:18px;font-size:18px;line-height:1.5;letter-spacing:-.01em;color:var(--cs-mute);max-width:520px}
.cs-close-actions{display:flex;flex-wrap:wrap;gap:12px;justify-self:end}
.cs-close-note{grid-column:1/-1;margin-top:-10px;font-family:var(--cs-ui);font-size:13px;color:var(--cs-dim)}

/* ========================================================================
   DETAIL
   ======================================================================== */
.cd-head{position:relative;padding:168px 0 0;overflow:clip}
.cd-head .cs-hero-bg img{right:-22%;top:-40%;opacity:.42}
.cd-head .wrap{position:relative}
.cd-crumb{display:inline-flex;align-items:center;gap:8px;font-family:var(--cs-ui);font-size:13.5px;letter-spacing:-.01em;color:var(--cs-dim);margin-bottom:26px;transition:color .25s}
.cd-crumb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cd-crumb:hover{color:#fff}
.cd-type{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.cd-type .cs-eyebrow{margin-left:4px}
.cd-h1{margin-top:22px;font-size:clamp(50px,7.4vw,108px);font-weight:600;line-height:1;letter-spacing:-.045em;color:#fff}
.cd-h1 small{display:block;margin-top:14px;font-family:var(--cs-ui);font-size:clamp(16px,1.4vw,20px);font-weight:500;letter-spacing:-.02em;color:var(--cs-mute)}
.cd-outcome{margin-top:28px;font-size:clamp(20px,1.7vw,24px);line-height:1.4;letter-spacing:-.015em;color:#DCE7FF;max-width:760px}
.cd-metarow{display:flex;align-items:flex-start;gap:24px;margin-top:46px;padding-top:26px;border-top:1px solid var(--cs-hair)}
.cd-metarow dl{flex:1;min-width:0}
.cd-metarow dt{font-family:var(--cs-ui);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-dim);margin-bottom:8px}
.cd-metarow dd{font-size:16px;letter-spacing:-.01em;color:#fff}
.cd-metarow dd small{display:block;margin-top:2px;font-family:var(--cs-ui);font-size:13px;color:var(--cs-dim)}
.cd-live{display:inline-flex;align-items:center;gap:8px}
.cd-live i{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 8px rgba(95,168,255,.8)}
.cd-live[data-live="paper"] i,.cd-live[data-live="internal"] i{background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);box-shadow:0 0 8px rgba(255,106,43,.7)}
.cd-live[data-live="demo"] i,.cd-live[data-live="local"] i{background:radial-gradient(circle at 34% 30%,#fff 0,#dfe6f5 30%,#a9b6d3 58%,#7d8aa8 100%);box-shadow:0 0 6px rgba(200,215,255,.5)}
.cd-visit{white-space:nowrap;align-self:center;font-family:var(--cs-ui);font-size:14.5px;font-weight:500;letter-spacing:-.02em;color:var(--cs-blue-ink);display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.cd-visit svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--cs-out)}
.cd-visit:hover{color:#fff}
.cd-visit:hover svg{transform:translate(2px,-2px)}
/* hero media in a glass frame */
.cd-hero{position:relative;margin-top:34px;padding:10px;border-radius:28px;background:var(--cs-glass);box-shadow:var(--cs-rim);isolation:isolate}
.cd-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec)}
.cd-hero-win{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1360/760;background:#0B1230;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cd-hero-win img,.cd-hero-win video{width:100%;height:100%;object-fit:cover;display:block}
.cd-hero-win.is-shot img{object-fit:cover;object-position:top}
.cd-hero-cap{position:absolute;left:24px;bottom:24px;z-index:1;display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 12px;border-radius:999px;font-family:var(--cs-ui);font-size:12.5px;letter-spacing:-.01em;color:#fff;
  background:rgba(7,11,27,.55);box-shadow:inset 0 0 0 1px rgba(190,215,255,.28),inset 0 1px 0 rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cd-hero-cap i{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 8px rgba(95,168,255,.8)}
/* verified facts block */
.cd-facts{margin-top:22px}
.cd-facts-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:14px}
.cd-facts-head p{font-family:var(--cs-ui);font-size:13px;color:var(--cs-dim)}
.cd-facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cd-facts-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cd-fact{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:150px;padding:26px 26px 24px;border-radius:22px;
  background:var(--cs-glass);box-shadow:var(--cs-rim)}
.cd-fact::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec);opacity:.8}
.cd-fact strong{font-size:clamp(34px,3.2vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cd-fact strong small{font-size:.5em;font-weight:500;letter-spacing:-.01em;color:var(--cs-blue-ink);margin-left:6px}
.cd-fact span{font-size:15px;line-height:1.45;letter-spacing:-.01em;color:var(--cs-mute)}
.cd-fact span b{color:#fff;font-weight:500}
.cd-fact.wide strong{font-size:clamp(22px,1.9vw,26px);letter-spacing:-.02em;line-height:1.15}
.cd-note{margin-top:18px;font-family:var(--cs-ui);font-size:13.5px;line-height:1.5;color:var(--cs-dim);max-width:720px}
.cd-note a{color:var(--cs-blue-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(140,192,255,.4)}
/* narrative blocks */
.cd-block{padding-top:120px}
.cd-block-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px 64px;align-items:start}
.cd-block .cs-eyebrow{position:sticky;top:120px}
.cd-h2{font-size:clamp(32px,3.9vw,56px);font-weight:600;line-height:1.1;letter-spacing:-.035em;color:#fff;max-width:900px}
.cd-h2 .h2-dim{color:var(--cs-dim)}
.cd-par{margin-top:26px;font-size:18px;line-height:1.6;letter-spacing:-.01em;color:var(--cs-mute);max-width:640px}
.cd-par b{color:#fff;font-weight:500}
.cd-bullets{margin-top:28px;display:flex;flex-direction:column;gap:12px;max-width:680px}
.cd-bullets li{position:relative;padding-left:26px;font-size:17px;line-height:1.5;letter-spacing:-.01em;color:var(--cs-mute)}
.cd-bullets li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 8px rgba(95,168,255,.6)}
.cd-bullets li b{color:#fff;font-weight:500}
/* the system map: how the pieces connect and where a person steps in */
.cd-map{margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:step}
.cd-map li{position:relative;isolation:isolate;overflow:hidden;padding:22px 20px 20px;border-radius:20px;background:var(--cs-glass);box-shadow:var(--cs-rim);min-height:170px;display:flex;flex-direction:column}
.cd-map li::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec);opacity:.7}
.cd-map li>i{display:inline-flex;align-items:center;font-family:var(--cs-ui);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--cs-blue);font-style:normal}
.cd-map li>i::before{counter-increment:step;content:"0" counter(step)}
.cd-map li b{display:block;margin-top:auto;padding-top:22px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:#fff}
.cd-map li span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--cs-mute)}
.cd-map li.human{box-shadow:var(--cs-rim),0 0 0 1px rgba(255,150,80,.28)}
.cd-map li.human>i{color:#FFB48C}
.cd-map li.human>i::before{content:"\2192\00a0" attr(data-n)}
.cd-map-human{display:inline-block;margin-top:14px;font-family:var(--cs-ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#FFB48C;font-style:normal}
/* visual moments */
.cd-visual{margin-top:64px;padding:10px;border-radius:26px;background:var(--cs-glass);box-shadow:var(--cs-rim);position:relative;isolation:isolate}
.cd-visual::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec)}
.cd-visual-win{position:relative;border-radius:18px;overflow:hidden;background:#0B1230;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* height:auto is load-bearing. The markup carries width/height attributes for CLS, and that
   presentational height wins over the r-* aspect-ratio rules below unless an author rule
   releases it, so without this the frames take each image's intrinsic pixel height, the
   declared shapes never happen, side-by-side frames end up different heights and wide
   screenshots get cropped to their middle third. */
.cd-visual-win img,.cd-visual-win video{width:100%;height:auto;display:block;object-fit:cover}
.cd-visual-win.r-wide img,.cd-visual-win.r-wide video{aspect-ratio:1360/720}
.cd-visual-win.r-tall img{aspect-ratio:676/820}
.cd-visual-win.r-mid img{aspect-ratio:676/560}
.cd-visual-win.r-short img{aspect-ratio:676/440}
.cd-visual-win.is-shot img{object-position:top}
.cd-visual figcaption{padding:16px 14px 6px;font-family:var(--cs-ui);font-size:13.5px;letter-spacing:-.01em;color:var(--cs-dim)}
.cd-gal{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.cd-gal-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.cd-gal .cd-visual{margin-top:0}
/* the "from the Lab" note (never a testimonial unless a real one exists) */
.cd-note-card{position:relative;isolation:isolate;overflow:hidden;margin-top:110px;padding:56px 60px;border-radius:28px;background:var(--cs-glass);box-shadow:var(--cs-rim)}
.cd-note-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--cs-spec)}
.cd-note-card blockquote{margin-top:18px;font-size:clamp(22px,2.3vw,30px);font-weight:500;line-height:1.32;letter-spacing:-.02em;color:#fff;max-width:900px}
.cd-person{display:flex;align-items:center;gap:14px;margin-top:32px}
.cd-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(7,11,27,.9),0 0 0 3px rgba(130,170,255,.5),0 0 20px rgba(36,107,255,.35)}
.cd-person strong{display:block;font-size:16px;color:#fff}
.cd-person span{font-family:var(--cs-ui);font-size:13.5px;color:var(--cs-mute)}
/* more cases */
.cd-more{padding-top:120px}
.cd-more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:28px}
.cd-more-head h2{margin-top:18px;font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.08;color:#fff}
.cd-more-all{white-space:nowrap;font-family:var(--cs-ui);font-size:14.5px;font-weight:500;letter-spacing:-.02em;color:var(--cs-blue-ink);display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.cd-more-all svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--cs-out)}
.cd-more-all:hover{color:#fff}
.cd-more-all:hover svg{transform:translateX(3px)}
.cd-more .cs-grid{margin-top:0}
.cd-more .cs-card h3{font-size:clamp(24px,2vw,30px)}
.cd-more .cs-story{font-size:16px}
.cd-more .cs-media{aspect-ratio:16/8.5}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width:1180px){
  .cs-ledger div{padding:0 20px}
  .cd-block-grid{grid-template-columns:1fr;gap:20px}
  .cd-block .cs-eyebrow{position:static}
  .cd-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-facts-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .cs-hero-row{flex-direction:column;align-items:flex-start;gap:30px}
  .cs-close-card{grid-template-columns:1fr;padding:44px 36px}
  .cs-close-actions{justify-self:start}
  .cd-metarow{flex-wrap:wrap;gap:22px 24px}
  .cd-metarow dl{flex:1 1 40%}
  .cd-visit{flex-basis:100%;align-self:flex-start}
}
@media (max-width:820px){
  .cs-hero{padding:136px 0 20px}
  .cs-h1{font-size:clamp(42px,11.5vw,64px)}
  .cs-hero-sub{font-size:17px}
  .cs-ledger b{font-size:24px}
  .cs-legend p{flex-basis:100%;margin-right:0}
  .cs-bar{flex-direction:column;align-items:stretch;gap:12px}
  .cs-tabs{width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:26px}
  .cs-tabs::-webkit-scrollbar{display:none}
  .cs-tab{height:38px;padding:0 14px;font-size:14px}
  .cs-search{flex:0 0 auto;width:100%}
  .cs-grid{grid-template-columns:1fr;gap:16px}
  .cs-media{margin:8px 8px 0;border-radius:16px}
  .cs-body{padding:22px 20px 22px}
  .cs-card h2,.cs-card h3{font-size:28px}
  .cs-story{font-size:16px}
  .cs-close{padding:72px 0 96px}
  .cs-close-card{padding:36px 24px;border-radius:24px}
  .cs-close-card h2{font-size:32px}
  .cs-close-actions{flex-direction:column;align-items:stretch}
  .cs-close-actions .cs-btn{justify-content:center}
  .cd-head{padding-top:136px}
  .cd-h1{font-size:clamp(42px,11.5vw,66px)}
  .cd-outcome{font-size:19px}
  .cd-metarow dl{flex:1 1 100%}
  .cd-hero{padding:6px;border-radius:20px}
  .cd-hero-win{border-radius:15px;aspect-ratio:4/3}
  .cd-hero-cap{left:14px;bottom:14px}
  .cd-facts-grid,.cd-facts-grid.four{grid-template-columns:1fr}
  .cd-fact{min-height:0;gap:16px;padding:22px}
  .cd-block{padding-top:84px}
  .cd-map{grid-template-columns:1fr}
  .cd-map li{min-height:0}
  .cd-map li b{padding-top:14px}
  .cd-gal{grid-template-columns:1fr}
  .cd-visual{padding:6px;border-radius:20px}
  .cd-visual-win{border-radius:15px}
  .cd-note-card{margin-top:80px;padding:32px 24px}
  .cd-more{padding-top:84px}
  .cd-more-head{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ========================================================================
   REDUCED MOTION: nothing moves, everything is simply there
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  .cs-card,.cs-card::after,.cs-media img,.cs-media video,.cs-btn,.cs-btn svg,.cs-tab,.cs-search,.cs-go svg,.cd-visit svg,.cd-more-all svg,.cs-cursor{transition:none!important;animation:none!important}
  .cs-card:hover{transform:none}
  .cs-card:hover .cs-media img,.cs-card:hover .cs-media video{transform:none}
  .cs-card[data-nv-reveal],.cs-card[data-nv-reveal] .cs-media,.cs-resolve[data-nv-reveal],.cs-hero [data-nv-reveal]{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  .cs-card[data-nv-reveal] .cs-media img,.cs-card[data-nv-reveal] .cs-media video{transform:none;transition:none}
  .cs-sheen{display:none}
  .cs-cursor{display:none}
  .cs-card.is-out{transition:none}
}

/* ========================================================================
   CASE DETAIL, rebuilt on noveq.framer.website/case-studies/<case> and
   measured at 1440. Their detail page is the same light ground as the index
   (#F0F0F0) with a dark contact block and footer beneath, so these pages
   follow the index rather than the old dark treatment.

   Measured: container 1360 with 40px sides. Eyebrow 14/500 Inter #6E6E6E.
   Title 106/600, lh 116.6, ls -4.24. Lede 20/500, lh 28, ls -.6, #4F4F4F,
   600 wide. Meta row 14/500, label #0A0A0A over value #4F4F4F, with the
   outbound link right-aligned on the same line. The hero screen sits in a
   #0A0A0A bezel, 1360x800 at radius 20, holding a 1280x720 screen. Stat
   cards 449x151, white, radius 20: value 24/500, label 18/500 #4F4F4F.
   Each section is eyebrow + a 48/500 statement (lh 52.8, ls -1.92) + 16/500
   body, and the galleries run full width at radius 20.

   MOTION, sampled off the live page: a block enters from opacity 0 and
   translateY(100px) and settles in about 800ms on a strong ease-out. That is
   a much longer travel than our own 28px reveal, so the detail pages get
   their own reveal distance.
   ======================================================================== */
body.page-cases .cd-head,
body.page-cases .cd-block,
body.page-cases .cd-more{--cd-ink:#0A0A0A;--cd-body:#4F4F4F;--cd-mute:#6D6D6D;--cd-card:#FFFFFF}

/* the old dark hero art has no place on a light page */
body.page-cases .cd-head .cs-hero-bg{display:none}
body.page-cases .cd-head{padding:140px 0 0;color:var(--cd-ink)}
body.page-cases .cd-crumb{display:none}   /* the reference opens on the eyebrow; the nav carries Cases */
body.page-cases .cd-crumb:hover{color:var(--nq-ink)}
body.page-cases .cd-type .cs-kicker{display:none}   /* the client line in the meta row already says it */
body.page-cases .cd-type .cs-eyebrow,
body.page-cases .cd-note-card .cs-eyebrow,
body.page-cases .cd-block .cs-eyebrow{position:static;display:flex;align-items:center;gap:4px;margin:0;
  font-family:var(--cs-ui);font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;
  text-transform:none;color:var(--cd-mute)}
body.page-cases .cd-type .cs-eyebrow::before,
body.page-cases .cd-note-card .cs-eyebrow::before,
body.page-cases .cd-block .cs-eyebrow::before{content:"";width:2px;height:14px;border-radius:1px;background:var(--nq-accent);box-shadow:none;width:2px;height:12px;border-radius:1px}
body.page-cases .cd-h1{margin-top:16px;font-family:var(--nq-head);font-size:clamp(44px,7.4vw,106px);font-weight:600;
  line-height:1;max-width:1300px;letter-spacing:-.04em;color:var(--cd-ink)}
body.page-cases .cd-h1 small{display:none;margin-top:16px;font-family:var(--nq-head);font-size:20px;font-weight:500;
  line-height:1.4;letter-spacing:-.03em;color:var(--cd-body)}
body.page-cases .cd-outcome{margin-top:32px;max-width:600px;font-family:var(--nq-head);font-size:20px;font-weight:500;
  line-height:1.4;letter-spacing:-.03em;color:var(--cd-body)}

/* the meta row: four labelled columns, the outbound link right-aligned beside them */
body.page-cases .cd-metarow{margin-top:60px;padding-top:0;border-top:0;gap:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:start}
body.page-cases .cd-metarow dt{font-family:var(--nq-head);font-size:14px;font-weight:500;line-height:1.4;
  letter-spacing:-.03em;text-transform:none;color:var(--cd-ink);margin-bottom:2px}
body.page-cases .cd-metarow dd{font-family:var(--nq-head);font-size:14px;font-weight:500;line-height:1.4;
  letter-spacing:-.03em;color:var(--cd-body)}
body.page-cases .cd-metarow dd small{margin-top:2px;font-size:13px;color:var(--cd-mute)}
body.page-cases .cd-visit{align-self:start;font-family:var(--cs-ui);font-size:14px;font-weight:500;color:var(--cd-ink)}
body.page-cases .cd-visit:hover{color:var(--nq-accent)}

/* the hero screen in its bezel: 1360x800 outer, a 1280x720 screen inside */
body.page-cases .cd-hero{margin-top:32px;padding:40px;border-radius:20px;background:#0A0A0A;box-shadow:none;overflow:hidden}
body.page-cases .cd-hero::before{display:none}
body.page-cases .cd-hero-win{position:relative;z-index:1;padding:5px;border-radius:20px;overflow:visible;
  background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);aspect-ratio:16/9}
body.page-cases .cd-hero-win>img,body.page-cases .cd-hero-win>video{border-radius:16px}
/* the ambient bleed: the same frame, blurred, filling the card behind the glass gutter */
.cd-hero-bleed{display:none}
body.page-cases .cd-hero-bleed{display:block;position:absolute;top:-17px;bottom:-17px;left:-29px;right:-29px;
  width:auto;height:auto;object-fit:cover;border-radius:16px;opacity:.8;pointer-events:none;
  /* our frames hold interfaces, not photography: the bleed has to read as light, never as a
     second legible copy of the screen behind the glass, so it blurs harder and sits off-register */
  filter:blur(26px) saturate(1.1);transform:scale(1.08)}
/* the outbound link sits on the baseline of the metadata values */
body.page-cases .cd-visit{align-self:end}
/* the caption pill sits on the hero photograph, and the photography changes under it: at the
   dark theme's .55 the .62 ink held on the darker frames but fell to 4.13:1 on the GhostID
   hero, which is warm and light exactly where the pill sits. .78 clears 4.5:1 even against a
   pure white backdrop, so the caption stays readable whatever frame lands here next. */
body.page-cases .cd-hero-cap{color:rgba(255,255,255,.62);background:rgba(7,11,27,.78)}

/* stats: three white cards under the screen */
body.page-cases .cd-facts{margin-top:6px}
body.page-cases .cd-fact::before{display:none}   /* the dark theme's glass specular: no blue glow on the white card */
body.page-cases .cd-live i{background:var(--nq-accent);box-shadow:none}
body.page-cases .cd-facts-head{display:none}
body.page-cases .cd-facts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
body.page-cases .cd-facts-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}   /* one row of cards, like the reference stats row */
body.page-cases .cd-fact{min-height:151px;display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:24px;border-radius:20px;background:var(--cd-card);box-shadow:none;border:0}
body.page-cases .cd-fact.wide{grid-column:auto}
body.page-cases .cd-fact{justify-content:space-between}
body.page-cases .cd-fact b,
body.page-cases .cd-fact strong{padding:0 0 8px;font-family:var(--nq-head);font-size:24px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--cd-ink)}
body.page-cases .cd-fact strong small{font-size:.7em;font-weight:500;color:var(--cd-mute);margin-left:6px}
body.page-cases .cd-fact span{padding:8px 0 0;font-family:var(--nq-head);font-size:18px;font-weight:500;
  line-height:1.4;letter-spacing:-.03em;color:var(--cd-body)}
body.page-cases .cd-fact span b{font-size:inherit;padding:0;color:var(--cd-ink)}

/* the three sections: eyebrow, one statement, one body */
body.page-cases .cd-block{padding:80px 0 0;color:var(--cd-ink)}
body.page-cases .cd-block-grid{display:block}
body.page-cases .cd-h2{margin-top:16px;max-width:1300px;font-family:var(--nq-head);font-size:clamp(30px,3.4vw,48px);
  font-weight:500;line-height:1.1;letter-spacing:-.04em;color:var(--cd-ink)}
body.page-cases .cd-par{margin-top:32px;max-width:600px;font-family:var(--nq-head);font-size:16px;font-weight:500;
  line-height:1.4;letter-spacing:-.03em;color:var(--cd-body)}
body.page-cases .cd-bullets{display:block;gap:0;margin-top:32px;max-width:600px;list-style:none;padding:0}
body.page-cases .cd-bullets li{position:relative;padding-left:2ch;font-family:var(--nq-head);font-size:16px;
  font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--cd-body)}
body.page-cases .cd-bullets li + li{margin-top:0}
body.page-cases .cd-bullets li::before{content:"\2022";position:absolute;left:0;top:0;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--cd-body);font-size:16px;line-height:1.4}

/* galleries: full width, radius 20, no glass frame */
/* two rules the light theme had not reached: both still carried --cs-dim, the dark theme's
   rgba(214,224,255,.42), which renders at 1.06:1 on this page. The dimmed half of every
   section statement and every gallery caption were invisible. */
body.page-cases .cd-h2 .h2-dim{color:var(--cd-mute,#6D6D6D)}
body.page-cases .cd-visual figcaption{color:var(--cd-mute,#6D6D6D)}
body.page-cases .cd-visual{margin-top:80px;padding:0;border-radius:20px;background:none;box-shadow:none}
body.page-cases .cd-visual::before{display:none}
body.page-cases .cd-visual-win{border-radius:20px;background:#E8E8E8;box-shadow:none}
body.page-cases .cd-gal{gap:6px;margin-top:80px}
body.page-cases .cd-gal .cd-visual{margin-top:6px}
body.page-cases .cd-gal .cd-visual:first-child{margin-top:0}

/* ---- two panels the light theme had never reached ----
   Both were built for the dark page and still leaned on --cs-glass, rgba(13,20,56,.58).
   Over #F0F0F0 that composites to rgb(110,114,134), a washed slate rather than a dark
   surface, so their dark-theme text landed at 2.4:1 (body), 2.8:1 (the human tag) and
   1.9:1 (the blue in the closing headline). Sampled from the rendered pixels, not guessed.

   The closing panel is meant to stay dark, as the note above says and as the footer under
   it already does, so it gets the footer's own #0A1024 and its text works as designed.
   The process map is a surface in the middle of a light section, so it follows the stat
   cards instead and turns white, with the light theme's ink, accent and a deep burnt
   orange for the human hand-off. */
body.page-cases .cs-close-card{background:#0A1024}
body.page-cases .cs-close-note{color:var(--cs-mute)}   /* --cs-dim is 3.4:1 even on the fixed base */

body.page-cases .cd-map li{background:var(--cd-card,#FFFFFF);box-shadow:none;border:0}
body.page-cases .cd-map li::before{display:none}
body.page-cases .cd-map li>i{color:var(--nq-accent)}
body.page-cases .cd-map li b{color:var(--cd-ink,#0A0A0A)}
body.page-cases .cd-map li span{color:var(--cd-body,#4F4F4F)}
body.page-cases .cd-map li.human{box-shadow:inset 0 0 0 1px rgba(168,72,10,.35)}
body.page-cases .cd-map li.human>i,
body.page-cases .cd-map-human{color:#A8480A}

/* the reference's own reveal: a long 100px rise on a strong ease-out */
body.page-cases .cd-head [data-nv-reveal],
body.page-cases .cd-block [data-nv-reveal],
body.page-cases .cd-visual[data-nv-reveal],
body.page-cases .cd-hero[data-nv-reveal],
body.page-cases .cd-facts[data-nv-reveal]{opacity:0;transform:translateY(100px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
body.page-cases .cd-head [data-nv-reveal].in,
body.page-cases .cd-block [data-nv-reveal].in,
body.page-cases .cd-visual[data-nv-reveal].in,
body.page-cases .cd-hero[data-nv-reveal].in,
body.page-cases .cd-facts[data-nv-reveal].in{opacity:1;transform:none;filter:none}

@media (max-width:900px){
  body.page-cases .cd-head{padding:120px 0 0}
  body.page-cases .cd-metarow{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  body.page-cases .cd-visit{grid-column:1/-1}
  body.page-cases .cd-hero{padding:14px;margin-top:36px}
  body.page-cases .cd-facts-grid,body.page-cases .cd-facts-grid.four{grid-template-columns:1fr}
  body.page-cases .cd-block{padding:64px 0 0}
}
@media (prefers-reduced-motion:reduce){
  body.page-cases .cd-head [data-nv-reveal],
  body.page-cases .cd-block [data-nv-reveal],
  body.page-cases .cd-visual[data-nv-reveal],
  body.page-cases .cd-hero[data-nv-reveal],
  body.page-cases .cd-facts[data-nv-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- the three sections the light theme had not reached yet, measured the
   same way: the quote card, the note line, and "view more case studies" with
   the reference card (215px corner thumbnail, two-line overview, stat pills) ---- */
body.page-cases .cd-note{margin-top:20px;font-family:var(--cs-ui);font-size:14px;line-height:1.4;letter-spacing:-.03em;color:var(--cd-mute,#6E6E6E)}
body.page-cases .cd-note a{color:var(--nq-accent);text-decoration-color:rgba(2,116,222,.4)}

body.page-cases .cd-note-card{--cd-ink:#0A0A0A;--cd-body:#4F4F4F;--cd-mute:#6D6D6D;
  margin-top:80px;padding:32px;border-radius:20px;background:#fff;box-shadow:none}
body.page-cases .cd-note-card::before{display:none}
body.page-cases .cd-note-card .cs-eyebrow{display:flex;align-items:center;gap:4px;margin:0;
  font-family:var(--cs-ui);font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--cd-mute)}
body.page-cases .cd-note-card .cs-eyebrow::before{content:"";width:2px;height:12px;border-radius:1px;background:var(--nq-accent);box-shadow:none}
body.page-cases .cd-note-card .cs-eyebrow i{display:none}
body.page-cases .cd-note-card blockquote{margin-top:16px;max-width:1300px;font-family:var(--nq-head);
  font-size:clamp(22px,2.2vw,28px);font-weight:500;line-height:1.3;letter-spacing:-.03em;color:var(--cd-ink)}
body.page-cases .cd-person{align-items:flex-end;gap:12px;margin-top:32px}
body.page-cases .cd-person img{width:43px;height:43px;box-shadow:0 0 0 1px #A6A6A6}
body.page-cases .cd-person strong{font-family:var(--nq-head);font-size:16px;font-weight:500;letter-spacing:-.03em;color:var(--cd-ink)}
body.page-cases .cd-person span{font-family:var(--cs-ui);font-size:14px;letter-spacing:-.03em;color:var(--cd-body)}

/* the action beside the profile, the way the reference closes its quote card */
body.page-cases .cd-note-cta{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:200px;height:46px;padding:0 22px;border-radius:50px;background:var(--nq-accent);color:#fff;
  font-family:var(--cs-ui);font-size:15px;font-weight:600;letter-spacing:-.02em;text-decoration:none;
  transition:background-color .3s var(--cs-out),transform .3s var(--cs-out)}
body.page-cases .cd-note-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.page-cases .cd-note-cta:hover{background:#1a5fd0;transform:translateY(-1px)}

body.page-cases .cd-more{padding:120px 0 0;color:var(--cd-ink)}
body.page-cases .cd-more-head{align-items:flex-end;gap:24px;margin-bottom:60px}
body.page-cases .cd-more-head .cs-eyebrow{display:none}
body.page-cases .cd-more-head h2{margin-top:0;font-family:var(--nq-head);font-size:clamp(32px,4.2vw,60px);
  font-weight:600;line-height:1.1;letter-spacing:-.04em;color:var(--cd-ink)}
body.page-cases .cd-more-all{font-family:var(--cs-ui);font-size:14px;font-weight:500;letter-spacing:-.03em;color:var(--cd-ink)}
body.page-cases .cd-more-all:hover{color:var(--nq-accent)}
body.page-cases .cd-more .cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:0}
body.page-cases .cd-more .cs-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:450px;padding:24px;border-radius:20px;background:#fff;box-shadow:none;overflow:visible}
body.page-cases .cd-more .cs-card::before,body.page-cases .cd-more .cs-card::after{display:none}
body.page-cases .cd-more .cs-media{position:absolute;top:6px;right:6px;width:215px;height:auto;margin:0;
  aspect-ratio:1.34259;border-radius:12px;overflow:hidden;transition:width .5s cubic-bezier(.22,.9,.3,1)}
body.page-cases .cd-more .cs-media img{width:100%;height:100%;object-fit:cover}
/* the growth is a hover detail: a touch has no hover, and a tap is on its way to the case */
@media (hover:hover) and (pointer:fine){body.page-cases .cd-more .cs-card:hover .cs-media{width:245px}}
/* the body is a small grid: the kind mark, the name with its subtitle, then the category and the
   year on ONE line the way the index card writes them ("Automatisering · 2026"), the story pushed
   to the bottom of the room that is left, and the chips under it. Explicit rows, so the markup
   order stays what it is. Rhythm from the card's top edge matches the index: mark 24, name 63. */
body.page-cases .cd-more .cs-body{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;
  align-content:start;row-gap:6px;column-gap:0;flex:1;min-width:0;padding:0}
body.page-cases .cd-more .cs-meta{display:contents}
body.page-cases .cd-more .cs-meta .cs-kicker{grid-row:1;grid-column:1/-1;justify-self:start;align-self:start;margin-bottom:10px}
body.page-cases .cd-more .cs-card h3{grid-row:2;grid-column:1/-1;margin:0;padding-right:236px;font-family:var(--nq-head);
  font-size:clamp(24px,2.2vw,32px);font-weight:600;line-height:1.3;letter-spacing:-.03em;color:var(--cd-ink)}
body.page-cases .cd-more .cs-card h3 small{display:block;margin-top:6px;font-size:16px;font-weight:500;
  line-height:1.4;letter-spacing:-.03em;color:var(--cd-ink)}
body.page-cases .cd-more .cs-meta>span:not(.cs-kicker){grid-row:3;font-family:var(--nq-head);font-size:14px;
  font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--cd-mute)}
body.page-cases .cd-more .cs-meta>span:nth-of-type(2){grid-column:1}
body.page-cases .cd-more .cs-meta>span:nth-of-type(3){grid-column:2}
body.page-cases .cd-more .cs-meta>span:nth-of-type(3)::before{content:"\00a0\00b7\00a0"}
body.page-cases .cd-more .cs-story{grid-row:4;grid-column:1/-1;align-self:end;margin-top:0;max-width:500px;font-family:var(--nq-head);font-size:20px;
  font-weight:500;line-height:1.4;letter-spacing:-.03em;color:var(--cd-body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 26 + the 6px row gap = the 32px the index puts between story and chips */
body.page-cases .cd-more .cs-chips{grid-row:5;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
/* the index chip's 24px row (line-height 1 inside 5px of padding); min-height, so a chip that has
   to wrap on a phone grows instead of overflowing */
body.page-cases .cd-more .cs-chip{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:5px 10px;border-radius:25px;
  background:#F0F0F0;font-family:var(--cs-ui);font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--cd-mute)}
body.page-cases .cd-more .cs-chip b{font-weight:500;white-space:nowrap;color:var(--cd-ink)}

@media (max-width:1199px){   /* the reference drops to one column below 1200, like the index */
  body.page-cases .cd-more .cs-grid{grid-template-columns:1fr}
  body.page-cases .cd-more .cs-card h3{padding-right:200px}
}
@media (max-width:820px){
  /* the head stacks below 820, but the light theme's own align-items:flex-end above outranks
     the rule that stacks it, so both the heading and "all cases" were pushed to the right edge
     while the cards below them start at the wrap's left edge: 97px out at 390, 433px at 768 */
  body.page-cases .cd-more-head{align-items:flex-start}
}
@media (max-width:900px){
  body.page-cases .cd-person{flex-wrap:wrap;gap:24px}
  body.page-cases .cd-note-cta{margin-left:0;width:100%}
  body.page-cases .cd-note-card{margin-top:60px;padding:24px}
  body.page-cases .cd-more{padding-top:80px}
  body.page-cases .cd-more-head{margin-bottom:32px}
  /* the phone card IS the index's phone card: the thumbnail on top inside the same 16px, then
     the mark, the name, the category line, the story 24px under it and the chips 20px under
     that (the 6px row gap is part of both distances) */
  body.page-cases .cd-more .cs-card{min-height:0;padding:16px}
  body.page-cases .cd-more .cs-media{position:relative;top:auto;right:auto;width:100%;margin-bottom:18px}
  body.page-cases .cd-more .cs-card:hover .cs-media{width:100%}
  body.page-cases .cd-more .cs-body{padding:0}
  body.page-cases .cd-more .cs-card h3{padding-right:0;font-size:24px}
  /* the desktop card clamps the story to two lines so a row stays level; the phone card is a
     single column with nothing to line up against, so it shows the sentence whole, exactly
     like the index card does, instead of cutting it mid-word */
  body.page-cases .cd-more .cs-story{margin-top:18px;font-size:17px;max-width:none;
    display:block;-webkit-line-clamp:none;overflow:visible}
  body.page-cases .cd-more .cs-chips{margin-top:14px}
  body.page-cases .cd-more .cs-chip{font-size:14px;white-space:normal}
}

/* the kind chip was built for the dark world: on the light page it needs its own ink */
body.page-cases .cs-kicker{height:23px;padding:0;gap:7px;color:var(--cd-mute,#6E6E6E);background:none;box-shadow:none;
  font-size:12px;letter-spacing:.1em}
body.page-cases .cs-kicker i{width:6px;height:6px;box-shadow:none}

/* the hover clip sits over the still, which stays as its poster and its
   reduced-motion fallback. It fades rather than cuts, so leaving the card
   never snaps back to the first frame. */
.nq-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .28s var(--ease,cubic-bezier(.2,.7,.2,1));pointer-events:none}
.nq-case.clip-on .nq-clip{opacity:1}
@media (prefers-reduced-motion:reduce){.nq-clip{display:none}}

/* The clip was playing inside a 245x183 corner thumbnail: under 15% of a 677x450
   card, holding motion that was deliberately restrained. At that size one block
   sliding one cell is a few pixels, so there was nothing to see. On a card that
   is actually playing, the visual comes forward and takes the room it needs,
   and the description eases back rather than fighting it. Cards without a clip
   keep the quiet corner thumbnail exactly as it was. */
@media (hover:hover) and (pointer:fine){
  .nq-case[data-nq-clip] .nq-media{z-index:3;
    transition:width .5s var(--ease),height .5s var(--ease),box-shadow .5s var(--ease)}
  /* it must sit level with its neighbours: a playing card grows exactly as far as
     a still one does, so the row keeps one rhythm. The clip is a quiet detail in
     the frame, not a card that swells past the others. */
  .nq-case[data-nq-clip].clip-on .nq-media{width:245px;height:183px;
    box-shadow:0 12px 28px -16px rgba(10,20,45,.35)}
  /* the sub-line runs under the enlarged frame and would be cut mid-word, so it
     eases back with the description; the name stays, and the card still reads */
  .nq-case[data-nq-clip] .nq-story,.nq-case[data-nq-clip] .nq-sub{transition:opacity .45s var(--ease)}
  .nq-case[data-nq-clip].clip-on .nq-story{opacity:1}
  .nq-case[data-nq-clip].clip-on .nq-sub{opacity:1}
}
@media (max-width:1180px){
  .nq-case[data-nq-clip].clip-on .nq-media{width:auto;height:auto}
  .nq-case[data-nq-clip].clip-on .nq-story,.nq-case[data-nq-clip].clip-on .nq-sub{opacity:1}
}

/* ========================================================================
   FINISH: anchors under the fixed nav, the phone footer, the outbound link's thumb size
   ======================================================================== */
/* the nav bar is 96px tall on desktop and up to 98 on a phone; anything reached through an
   anchor keeps the bar clear with a breath of air. The case header itself starts at the
   page top, so it needs nothing. */
body.page-cases #case{scroll-margin-top:0}
body.page-cases .cd-block,body.page-cases .cd-more,body.page-cases .cd-metarow,body.page-cases .cd-facts,
body.page-cases .cd-note-card,body.page-cases .cs-close,body.page-cases h2[id],body.page-cases h3[id]{scroll-margin-top:120px}
@media (max-width:900px){
  body.page-cases .cd-block,body.page-cases .cd-more,body.page-cases .cd-metarow,body.page-cases .cd-facts,
  body.page-cases .cd-note-card,body.page-cases .cs-close,body.page-cases h2[id],body.page-cases h3[id]{scroll-margin-top:112px}
  /* the outbound link is a 21px line of text: on a phone it gets a thumb-sized hit area
     without moving anything around it */
  body.page-cases .cd-visit{padding:12px 0;margin:-12px 0}
}
@media (prefers-reduced-motion:reduce){
  body.page-cases .cd-more .cs-media{transition:none}
}

/* ========================================================================
   WEBSITE PREVIEW: the "view website" window opened from the metadata row.
   Built by the last module in js/cases.js, only when somebody opens it. A calm
   white window over a plain scrim; a compact bar with the product name and the
   real host, the primary "back to the case", a real new-tab link and a close
   button; under it the live site in a frame that scrolls on its own, or the
   labelled screenshot when the site refuses framing or does not answer.
   On a phone the window is the screen: identity at the top, the three actions
   in a bar at the bottom where a thumb is, both padded by the safe areas.
   ======================================================================== */
.cs-pv{position:fixed;inset:0;z-index:9700;font-family:var(--cs-ui);
  --pv-ink:#0A0A0A;--pv-body:#4F4F4F;--pv-mute:#6E6E6E;--pv-hair:#E3E3E3;--pv-soft:#F0F0F0;--pv-soft-h:#E3E3E3;
  --pv-accent:var(--nq-accent,#246BFF);--pv-accent-h:#1a5fd0;--pv-ease:cubic-bezier(.2,.7,.2,1)}
.cs-pv[hidden]{display:none!important}
html.cs-pv-lock{overscroll-behavior:none}
.cs-pv-scrim{position:absolute;inset:0;background:rgba(10,10,10,.58);opacity:0;transition:opacity .25s var(--pv-ease)}
.cs-pv.is-open .cs-pv-scrim{opacity:1}
.cs-pv.is-closing .cs-pv-scrim{opacity:0;transition-duration:.16s}
.cs-pv-win{position:absolute;inset:24px;display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(10,10,10,.45),0 0 0 1px rgba(10,10,10,.06);opacity:0;transform:translateY(12px) scale(.985)}
.cs-pv.is-open .cs-pv-win{animation:csPvIn .25s var(--pv-ease) forwards}
.cs-pv.is-closing .cs-pv-win{animation:csPvOut .16s ease-in forwards}
@keyframes csPvIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes csPvOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.99)}}
/* focus guards: real tab stops, invisible, never display:none */
.cs-pv-guard{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}

/* the bar */
.cs-pv-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 12px 0 20px;
  border-bottom:1px solid var(--pv-hair);background:#fff}
.cs-pv-id{display:flex;align-items:baseline;gap:10px;min-width:0}
.cs-pv-id b{font-family:var(--nq-head);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--pv-ink);white-space:nowrap}
.cs-pv-host{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--pv-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-pv-acts{display:flex;align-items:center;gap:8px;flex:none}
.cs-pv-back,.cs-pv-tab,.cs-pv-x{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:0;
  border:0;border-radius:999px;font-family:var(--cs-ui);font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none;
  transition:background-color .2s var(--pv-ease),color .2s var(--pv-ease)}
.cs-pv-back{padding:0 18px 0 14px;background:var(--pv-accent);color:#fff}
.cs-pv-back:hover{background:var(--pv-accent-h)}
.cs-pv-tab{padding:0 16px;background:var(--pv-soft);color:var(--pv-ink)}
.cs-pv-tab:hover{background:var(--pv-soft-h)}
.cs-pv-x{width:40px;padding:0;background:var(--pv-soft);color:var(--pv-ink)}
.cs-pv-x:hover{background:var(--pv-soft-h)}
.cs-pv-bar svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the site's focus layer paints a light-blue outline and an 8px radius on every button; these
   controls sit on white, so the ring is the accent with a white gap and keeps the capsule */
.cs-pv .cs-pv-back:focus-visible,.cs-pv .cs-pv-tab:focus-visible,.cs-pv .cs-pv-x:focus-visible,.cs-pv .cs-pv-go:focus-visible{
  outline:none;border-radius:999px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pv-accent)}
.cs-pv .cs-pv-frame:focus,.cs-pv .cs-pv-frame:focus-visible{outline:3px solid var(--pv-accent);outline-offset:-3px}

/* the stage: the frame scrolls its own document; the stage only scrolls for the fallback */
.cs-pv-stage{position:relative;flex:1;min-height:0;background:var(--pv-soft);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cs-pv-frame{position:relative;z-index:1;display:block;width:100%;height:100%;border:0;background:transparent}
/* the loader sits UNDER the frame: a document paints over it the moment it renders, so the
   visitor sees the site as soon as there is one and the label only while there is not */
.cs-pv-load{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--pv-body)}
.cs-pv-load i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(36,107,255,.18);border-top-color:var(--pv-accent);animation:csPvSpin .9s linear infinite}
@keyframes csPvSpin{to{transform:rotate(360deg)}}

/* the fallback: the message with its action first, the labelled screenshot under it */
.cs-pv-fb{min-height:100%;padding:24px;display:flex;flex-direction:column;gap:16px}
.cs-pv-fb-msg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px 22px;border-radius:16px;background:#fff}
.cs-pv-fb-msg p{margin:0;font-family:var(--nq-head);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.02em;color:var(--pv-ink);max-width:640px}
.cs-pv-go{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:var(--pv-accent);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--pv-ease)}
.cs-pv-go svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-pv-go:hover{background:var(--pv-accent-h)}
.cs-pv-shot{margin:0;padding:6px;border-radius:16px;background:#fff}
.cs-pv-shot img{display:block;width:100%;height:auto;border-radius:11px;background:var(--pv-soft)}
.cs-pv-shot figcaption{padding:12px 10px 6px;font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--pv-mute)}

/* the phone: the whole screen, identity at the top, actions at the bottom, safe areas kept */
@media (max-width:768px){
  .cs-pv-win{inset:0;border-radius:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;box-shadow:none}
  .cs-pv-bar{display:contents}
  .cs-pv-id{grid-row:1;display:flex;align-items:baseline;gap:8px;min-height:52px;background:#fff;border-bottom:1px solid var(--pv-hair);
    padding:calc(12px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 12px calc(16px + env(safe-area-inset-left,0px))}
  .cs-pv-stage{grid-row:2}
  .cs-pv-acts{grid-row:3;display:flex;align-items:center;gap:8px;background:#fff;border-top:1px solid var(--pv-hair);
    padding:10px calc(12px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}
  .cs-pv-back{flex:1;min-width:0;height:48px;justify-content:center;padding:0 14px}
  .cs-pv-tab{flex:none;width:48px;height:48px;padding:0}
  .cs-pv-tab span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .cs-pv-x{flex:none;width:48px;height:48px}
  .cs-pv-acts svg{width:16px;height:16px}
  .cs-pv-fb{padding:12px;gap:12px}
  .cs-pv-fb-msg{padding:16px;border-radius:14px}
  .cs-pv-fb-msg p{font-size:15px}
  .cs-pv-go{width:100%;justify-content:center}
  .cs-pv-shot{border-radius:14px}
}

@media (prefers-reduced-motion:reduce){
  .cs-pv-scrim{transition:none}
  .cs-pv.is-open .cs-pv-scrim{opacity:1}
  .cs-pv-win{opacity:1;transform:none}
  .cs-pv.is-open .cs-pv-win,.cs-pv.is-closing .cs-pv-win{animation:none}
  .cs-pv-load i{animation:none}
  .cs-pv-back,.cs-pv-tab,.cs-pv-x,.cs-pv-go{transition:none}
}

/* ======================================================================
   Case pages, second pass against noveq.framer.website/case-studies/harbor-house (measured
   10 Sep 2026): the hero is a plain #0A0A0A panel with the frame inset 40px, nothing bleeding
   behind it and no caption pill; the stats sit 32px under it as three short white cards
   (24/500 figure, 18/500 grey line); every text block is eyebrow, 48/500 headline on the
   full width, 600px of 16/500 grey, then 80px to the full-width r20 picture; the process
   cards lose their mono index; the closing card and the "more cases" head keep the
   reference rhythm (80 and 120). Later in the sheet, so it wins on equal specificity.
   ====================================================================== */
body.page-cases .cd-hero{margin-top:32px;padding:40px;border-radius:20px;background:#0A0A0A}
body.page-cases .cd-hero-win{padding:0;background:none;box-shadow:none;border-radius:16px;overflow:hidden;aspect-ratio:16/9}
body.page-cases .cd-hero-win>img,body.page-cases .cd-hero-win>video{border-radius:16px}
body.page-cases .cd-hero-bleed{display:none}
body.page-cases .cd-hero-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;margin:-1px;border:0}   /* keeps the alt caption for readers, off the picture */
body.page-cases .cd-facts{margin-top:32px}
body.page-cases .cd-facts-grid,body.page-cases .cd-facts-grid.four{gap:20px}
body.page-cases .cd-fact{min-height:151px;justify-content:space-between;gap:16px;padding:24px;border-radius:20px}
body.page-cases .cd-fact strong{padding:0;font-size:24px;line-height:1.4}
body.page-cases .cd-fact strong small{font-size:16px;margin-left:8px}
body.page-cases .cd-fact span{padding:0;font-size:16px;line-height:1.4;color:var(--cd-body)}
body.page-cases .cd-fact span b{font-weight:500}
body.page-cases .cd-facts .cd-note{margin-top:20px;max-width:600px}
body.page-cases .cd-head+.cd-block{padding-top:120px}
body.page-cases .cd-block{padding-top:80px}
body.page-cases .cd-block+.cd-block{padding-top:80px}
body.page-cases .cd-h2{margin-top:30px;max-width:1300px;font-size:48px;line-height:1.1;letter-spacing:-.03em}
body.page-cases .cd-par,body.page-cases .cd-bullets{margin-top:32px;max-width:600px}
body.page-cases .cd-bullets li{font-size:16px;line-height:1.4;color:var(--cd-body)}
body.page-cases .cd-bullets li+li{margin-top:2px}
body.page-cases .cd-block .cd-note{margin-top:24px;max-width:600px}
body.page-cases .cd-map{margin-top:48px;gap:20px}
body.page-cases .cd-map li{min-height:0;padding:24px;border-radius:20px;justify-content:flex-start}
body.page-cases .cd-map li>i{display:none}
body.page-cases .cd-map li b{margin-top:0;padding-top:0;font-family:var(--nq-head);font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.03em}
body.page-cases .cd-map li span{margin-top:8px;font-family:var(--nq-head);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.03em}
body.page-cases .cd-map li.human{box-shadow:inset 0 0 0 1px rgba(2,116,222,.35)}
body.page-cases .cd-map-human{margin-top:14px;color:var(--nq-accent)}
body.page-cases .cd-visual{margin-top:80px}
body.page-cases .cd-visual-win{background:none}
body.page-cases .cd-visual-win.r-wide img,body.page-cases .cd-visual-win.r-wide video{aspect-ratio:1360/765;width:100%;height:auto;object-fit:cover}
body.page-cases .cd-visual figcaption{padding:16px 0 0;font-family:var(--nq-head);font-size:14px;font-weight:500;letter-spacing:-.03em}
body.page-cases .cd-note-card{margin-top:80px;padding:32px;border-radius:20px}
body.page-cases .cd-more{padding-top:120px}
body.page-cases .cd-more-head{margin-bottom:60px}
@media (max-width:1180px){
  body.page-cases .cd-h2{font-size:clamp(30px,4.2vw,48px)}
  body.page-cases .cd-map{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  body.page-cases .cd-hero{padding:14px;margin-top:28px}
  body.page-cases .cd-hero-win{aspect-ratio:4/3}
  body.page-cases .cd-facts{margin-top:20px}
  body.page-cases .cd-facts-grid,body.page-cases .cd-facts-grid.four{gap:12px}
  body.page-cases .cd-head+.cd-block,body.page-cases .cd-block,body.page-cases .cd-block+.cd-block{padding-top:64px}
  body.page-cases .cd-h2{margin-top:20px}
  body.page-cases .cd-map{grid-template-columns:1fr;gap:12px;margin-top:32px}
  body.page-cases .cd-visual{margin-top:48px}
  body.page-cases .cd-note-card{margin-top:56px;padding:24px}
  body.page-cases .cd-more{padding-top:80px}
  body.page-cases .cd-more-head{margin-bottom:32px}
}