/* ── The hero ─────────────────────────────────────────────────────────── */
.cs-hero{--cs-c:#DD6E3E}
/* One site's bar is fixed, out of the page's flow; the other site's bar sits
   in it, which is what the hero's own negative top margin answers. Under the
   fixed bar that margin pulled the hero up beneath it (measured: 72px). This
   sheet ships on both sites, so its comments name neither. */
.chx .oxh-hero.cs-hero{margin-top:0}
.cs-hero .oxh-hero-txt{min-width:0}
/* A long title is set a step smaller (views.tsx H1_LONG), so it holds to
   three lines on a laptop instead of four. */
.oxh-pghero .oxh-h1.cs-h1-long{font-size:clamp(34px,calc(3.6vw + 2px),66px)}
/* The kicker over the title wraps on a phone ("SOSYAL MEDYA BAŞARI HİKAYESİ"):
   its base line-height of 1 laid the two lines on top of each other. */
.cs-hero .oxh-pg-k{line-height:1.45}
@media (max-width:520px){.cs-hero .oxh-pg-k{font-size:12.6px;letter-spacing:.12em}}
/* On a phone the client, sector, market and period sit two to a row rather
   than four stacked rows under the summary. */
@media (max-width:640px){
  .oxh .oxh-hero.is-light.cs-hero .oxh-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .oxh .oxh-hero.is-light.cs-hero .oxh-marks li{min-width:0;padding:11px 0;border-top:1px solid rgba(11,11,12,.1)}
  .oxh .oxh-hero.is-light.cs-hero .oxh-marks li:nth-child(2){border-top:0}
}
/* The questions' heading sits in a narrow column beside them. */
.cs-faq .oxh-faq-head .oxh-h2{font-size:clamp(30px,calc(2vw + 6px),44px)}
/* On a phone a case title runs four or five lines at the page heroes' 38px:
   a step smaller, and the long ones a step smaller again. */
@media (max-width:520px){
  .oxh-pghero.cs-hero .oxh-h1{font-size:clamp(31px,8.6vw,36px)}
  .oxh-pghero.cs-hero .oxh-h1.cs-h1-long{font-size:clamp(29px,7.8vw,33px)}
}
/* The byline: the author's face, name and role, and the case's dates. */
.cs-byline{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(11,11,12,.1);max-width:560px}
.cs-byline-face{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(11,11,12,.1)}
.cs-byline-t{display:grid;gap:3px;margin:0;font-size:15.6px;line-height:1.45;color:#3a3b41}
.cs-byline-who b{font-weight:600;color:#0b0b0c}
.cs-byline-d{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:14.6px;color:#55565c}
/* The client's own mark, first among the hero's chips: their logo on the
   white chip, a symbol with the name beside it, or the name alone. */
.oxh-marks li.cs-mark-who{padding:7px 17px 7px 15px}
.cs-who{display:inline-flex;align-items:center;gap:10px;min-width:0}
.cs-who img{display:block;width:auto;height:22px;max-width:156px;object-fit:contain;object-position:left center}
.cs-who.is-symbol img{height:26px;max-width:40px}
.cs-who b{font-weight:600;color:#0b0b0c;letter-spacing:-.005em}
.cs-who.is-name b{font-size:16.4px}
.cs-draft{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:fit-content;max-width:100%;
  margin:0 0 22px;padding:9px 15px;border-radius:12px;
  border:1px dashed rgba(180,83,9,.5);background:rgba(255,247,235,.92);
  font-size:15px;line-height:1.45;color:#5b3812;
}
.cs-draft b{font-weight:600;color:#7c2d12}
/* The hero's moving field (HeroField): a fine dot grid, brightest behind the
   board and gone under the words, and a soft warm beam crossing it. Behind
   everything (the hero's background layer), so it never sits on a word. */
.cs-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cs-field-dots{
  position:absolute;inset:-56px;
  background-image:radial-gradient(circle,rgba(11,11,12,.2) 1.2px,transparent 1.8px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(56% 64% at 76% 46%,#000 0%,rgba(0,0,0,.55) 46%,transparent 80%);
  mask-image:radial-gradient(56% 64% at 76% 46%,#000 0%,rgba(0,0,0,.55) 46%,transparent 80%);
}
.cs-field-beam{
  display:none;position:absolute;top:-40%;bottom:-40%;left:0;width:26%;
  background:linear-gradient(90deg,transparent,rgba(255,138,80,.09) 38%,rgba(228,88,154,.08) 62%,transparent);
}
@media (max-width:900px){
  .cs-field-dots{-webkit-mask-image:radial-gradient(70% 34% at 50% 82%,#000 0%,transparent 80%);mask-image:radial-gradient(70% 34% at 50% 82%,#000 0%,transparent 80%)}
}
/* A band of light passing down a dark screen (the board, the wall, the
   route's drawing). Drawn only where motion is welcome. */
.cs-scan{
  display:none;position:absolute;left:0;right:0;top:0;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.035) 62%,rgba(255,190,160,.16) 96%,rgba(255,255,255,.42) 100%);
}

/* The board: the service's drawing on a dark panel where the photograph sits
   on a service page, the service's glyph on its chip, the figures on cards. */
.oxh .cs-board{aspect-ratio:1.02;max-width:720px}
.oxh .cs-board-main{
  position:absolute;inset:0 0 11% 9%;overflow:hidden;isolation:isolate;border-radius:14px;
  background:#09080d;box-shadow:0 0 0 1px rgba(11,11,12,.06),0 44px 80px -48px rgba(11,11,12,.7);
}
.cs-board-art{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:.55;filter:saturate(1.15)}
.cs-board-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 50% 46%,rgba(9,8,13,.15),rgba(9,8,13,.82) 100%),
    linear-gradient(180deg,rgba(9,8,13,.2),rgba(9,8,13,.7));
}
.cs-board-hud{position:absolute;inset:16px;pointer-events:none}
.cs-board-hud i{position:absolute;width:18px;height:18px;border:0 solid rgba(255,255,255,.45)}
.cs-board-hud i:nth-child(1){left:0;top:0;border-top-width:1.5px;border-left-width:1.5px}
.cs-board-hud i:nth-child(2){right:0;top:0;border-top-width:1.5px;border-right-width:1.5px}
.cs-board-hud i:nth-child(3){left:0;bottom:0;border-bottom-width:1.5px;border-left-width:1.5px}
.cs-board-hud i:nth-child(4){right:0;bottom:0;border-bottom-width:1.5px;border-right-width:1.5px}
.cs-board-tag{
  position:absolute;left:28px;top:26px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:999px;font-family:var(--oxh-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.cs-board-tag i{width:7px;height:7px;border-radius:50%;background:var(--cs-c);box-shadow:0 0 0 3px rgba(255,255,255,.12),0 0 14px 2px var(--cs-c)}
.cs-board-draw{position:absolute;left:12%;right:12%;top:20%;bottom:16%;z-index:1;display:grid;place-items:center}
.cs-board-draw .oxh-sd{width:100%;max-height:100%}
/* The read-out: one glass card, the results label, a row per figure. */
.cs-board-figs{
  position:absolute;left:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:6px;width:min(56%,330px);
  padding:8px 8px 8px;border-radius:22px;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(11,11,12,.08),0 40px 70px -34px rgba(11,11,12,.62);
}
.cs-board-figs-h{
  display:flex;align-items:center;gap:9px;padding:8px 12px 6px;
  font-family:var(--oxh-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#4a4c53;
}
.cs-board-figs-h i{width:8px;height:8px;border-radius:50%;background:var(--cs-c);box-shadow:0 0 0 4px rgba(221,110,62,.16)}
.cs-board-fig{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:15px;background:#f6f5f2;box-shadow:inset 0 0 0 1px rgba(11,11,12,.05)}
.cs-board-fig-dir{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(22,163,74,.11);color:#15803d}
.cs-board-fig.is-wait .cs-board-fig-dir{background:transparent;border:1.5px dashed rgba(21,128,61,.5)}
.cs-board-fig-dir .cs-dir{color:inherit}
.cs-board-fig-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-board-fig-t b{font-size:clamp(23px,2vw,31px);font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--oxh-ink)}
.cs-board-fig.is-wait .cs-board-fig-t b{font-size:clamp(17px,1.35vw,20px);letter-spacing:-.01em;color:#9a3412}
.cs-board-fig-t span{font-size:14px;line-height:1.35;color:#3b3c42}
.cs-dir{flex:none}
.cs-dir.is-up{color:#16a34a}
.cs-dir.is-down{color:#16a34a}

/* ── The results: a bento of figures on a living panel ─────────────────
   ⚑ 2026-10-29 (visual pass): the heading and its words run across the top,
   the figures sit under them as a bento — the first on a large white card
   with its drawing, the rest beside it — and the facts close it as one strip,
   so the figures are the middle of the room rather than a column beside it. */
.cs-results{padding-block:clamp(40px,4vw,72px)}
/* ⚠ CLIP, NEVER HIDDEN, on the panel and every card in it: "hidden" makes a
   box a scroll container, and a scroll-driven animation inside one follows
   THAT box (which never scrolls), not the page — measured: the cards' and the
   drawings' entrances sat frozen part-way, a figure held at 84% opacity for
   good. "clip" cuts the same corners and is no scroll container. */
.oxh .cs-respanel{padding:clamp(26px,3.2vw,56px);overflow:hidden;overflow:clip}
/* A faint grid over the panel's light, fading towards its edges. */
.cs-res-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(75% 70% at 62% 58%,#000 10%,transparent 78%);mask-image:radial-gradient(75% 70% at 62% 58%,#000 10%,transparent 78%);
}
.cs-res{position:relative;z-index:1;display:grid;gap:clamp(26px,2.6vw,40px)}
.cs-res-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.6vw,72px);align-items:start}
.cs-res-copy{padding-top:clamp(0px,2.9vw,44px)}
.cs-res-title{min-width:0}
.cs-res-head .oxh-h2{margin:0;color:#fff;font-size:clamp(34px,calc(3.2vw + 2px),58px);line-height:1.02}
.cs-res-head .oxh-em{color:#ffc9a6}
.cs-res-copy{min-width:0}
.cs-res-copy .oxh-p{margin:0;color:rgba(255,255,255,.88);max-width:620px}
/* Every figure in one sentence, above the room's paragraph. */
.cs-glance{
  position:relative;max-width:620px;margin:0 0 16px;padding:14px 18px 15px 20px;border-radius:16px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  font-size:17.4px;font-weight:540;line-height:1.5;color:#fff;
}
.cs-glance::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#ff8a50,#e4589a 55%,#7c3aed)}
/* The facts, one strip under the figures. */
.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.14)}
.cs-facts div{position:relative;padding:15px 18px 16px;background:rgba(10,8,22,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cs-facts dt{font-family:var(--oxh-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cs-facts dd{margin:5px 0 0;font-size:16px;line-height:1.4;color:#fff}

/* The figures. */
.cs-figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.cs-fig{
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;display:flex;flex-direction:column;gap:8px;min-height:300px;padding:24px 24px 30px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 46%),rgba(8,6,18,.58);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.12),0 34px 64px -42px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
/* A soft light in the corner the drawing rises towards. */
.cs-fig::after{
  content:'';position:absolute;z-index:-1;right:-18%;top:-22%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(228,88,154,.26),rgba(124,58,237,.12) 55%,transparent);opacity:.7;
}
.cs-fig:first-child{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 44px 90px -44px rgba(0,0,0,.9)}
.cs-fig:first-child::after{background:radial-gradient(closest-side,rgba(255,138,80,.16),rgba(228,88,154,.08) 55%,transparent);opacity:1}
.cs-fig-top{display:flex;align-items:center;justify-content:space-between}
.cs-fig-n{font-family:var(--oxh-mono);font-size:13.5px;letter-spacing:.08em;color:rgba(255,255,255,.8)}
.cs-fig:first-child .cs-fig-n{color:#4a4c53}
.cs-fig-dir{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(74,222,128,.14);color:#4ade80}
.cs-fig:first-child .cs-fig-dir{background:rgba(22,163,74,.1);color:#15803d}
.cs-fig-dir .cs-dir{color:inherit}
.cs-fig-v{display:block;margin-top:16px;font-size:clamp(44px,4.4vw,72px);font-weight:500;letter-spacing:-.045em;line-height:.95;color:#fff}
.cs-fig:first-child .cs-fig-v{color:var(--oxh-ink)}
.cs-fig.is-wait .cs-fig-v{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.015em;line-height:1.15;color:#ffd7a8}
.cs-fig.is-wait:first-child .cs-fig-v{color:#a8461f}
.cs-fig-l{font-size:18px;font-weight:500;line-height:1.3;color:#fff}
.cs-fig:first-child .cs-fig-l{color:var(--oxh-ink)}
.cs-fig-ft{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.9)}
.cs-fig-ft i{display:block;font-style:normal;font-family:var(--oxh-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cs-fig:first-child .cs-fig-ft{color:var(--oxh-ink)}
.cs-fig:first-child .cs-fig-ft i{color:#55575e}
.cs-fig-ft-arrow{display:inline-grid;opacity:.7}
.cs-fig-note{font-size:15px;line-height:1.5;color:rgba(255,255,255,.8)}
.cs-fig:first-child .cs-fig-note{color:#3b3c42}
.cs-fig-bar{position:absolute;left:24px;right:24px;bottom:15px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;overflow:clip}
.cs-fig:first-child .cs-fig-bar{background:rgba(11,11,12,.08)}
.cs-fig-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#ff8a50,#e4589a 55%,#7c3aed)}
.cs-fig.is-wait .cs-fig-bar i{width:34%;background:repeating-linear-gradient(90deg,rgba(255,215,168,.7) 0 8px,transparent 8px 14px)}
/* The first figure, the room's centre: the number set large, in ink that
   warms into the brand colours (the fill only — the colour a contrast check
   reads stays the ink; every stop reads over 7:1 on the white card). */
@supports (-webkit-text-fill-color:transparent) and ((-webkit-background-clip:text) or (background-clip:text)){
  .cs-fig:first-child:not(.is-wait) .cs-fig-v{
    align-self:flex-start;max-width:100%;
    background:linear-gradient(100deg,#0b0b0c 0%,#0b0b0c 22%,#9a3412 68%,#6d28d9 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    padding:0 .05em .06em 0;
  }
}
/* The bento: three figures as one large card and two beside it. */
@media (min-width:1101px){
  .cs-figs[data-n="3"]{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr)}
  .cs-figs[data-n="3"] .cs-fig:first-child{grid-row:span 2;padding:30px 32px 34px}
  .cs-figs[data-n="3"] .cs-fig:first-child .cs-fig-v{margin-top:20px;font-size:clamp(76px,6.6vw,118px);letter-spacing:-.05em}
  .cs-figs[data-n="3"] .cs-fig:first-child.is-wait .cs-fig-v{font-size:clamp(26px,2.2vw,34px)}
  .cs-figs[data-n="3"] .cs-fig:first-child .cs-fig-l{font-size:21px}
  .cs-figs[data-n="3"] .cs-fig:first-child .cs-fig-note{font-size:16px;max-width:520px}
  .cs-figs[data-n="3"] .cs-fig:first-child .cs-viz{margin-top:22px}
  .cs-figs[data-n="3"] .cs-fig:first-child .cs-fig-bar{left:32px;right:32px;bottom:18px}
  .cs-figs[data-n="3"] .cs-fig:not(:first-child){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.86fr);
    grid-template-areas:'top top' 'v viz' 'l viz' 'ft viz' 'note note';
    align-content:start;column-gap:24px;row-gap:8px;min-height:0;
  }
  .cs-figs[data-n="3"] .cs-fig:not(:first-child) .cs-fig-top{grid-area:top}
  .cs-figs[data-n="3"] .cs-fig:not(:first-child) .cs-viz{grid-area:viz;align-self:center;margin:6px 0 0}
  .cs-figs[data-n="3"] .cs-fig:not(:first-child) .cs-fig-v{grid-area:v;margin-top:8px}
  .cs-figs[data-n="3"] .cs-fig:not(:first-child) .cs-fig-l{grid-area:l}
  .cs-figs[data-n="3"] .cs-fig:not(:first-child) .cs-fig-ft{grid-area:ft}
  .cs-figs[data-n="3"] .cs-fig:not(:first-child) .cs-fig-note{grid-area:note;margin-top:6px}
}
/* The small drawing at the top of each card (FigViz). */
.cs-viz{display:block;width:100%;height:auto;margin:16px 0 auto;overflow:visible;view-timeline-name:--csviz}
.cs-viz-s1{stop-color:#ff8a50}
.cs-viz-s2{stop-color:#e4589a}
.cs-viz-s3{stop-color:#a78bfa}
.cs-fig:first-child .cs-viz-s1{stop-color:#ea580c}
.cs-fig:first-child .cs-viz-s2{stop-color:#db2777}
.cs-fig:first-child .cs-viz-s3{stop-color:#7c3aed}
.cs-viz-grid line{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:3 5}
.cs-fig:first-child .cs-viz-grid line{stroke:rgba(11,11,12,.12)}
.cs-viz-line{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.cs-viz-dot{fill:#fff;stroke:#e4589a;stroke-width:2.6}
.cs-fig:first-child .cs-viz-dot{stroke:#db2777}
.cs-viz-ring{fill:rgba(228,88,154,.28)}
.cs-viz-knot{fill:#fff;stroke:rgba(255,255,255,.55);stroke-width:1.5}
.cs-fig:first-child .cs-viz-knot{stroke:rgba(11,11,12,.35)}
/* The last bar keeps its gradient: a fill set here would beat the attribute. */
.cs-viz-bar:not(.is-last){fill:rgba(255,255,255,.2)}
.cs-fig:first-child .cs-viz-bar:not(.is-last){fill:rgba(11,11,12,.1)}
.cs-viz-bar.is-before{fill:rgba(255,255,255,.26)}
.cs-fig:first-child .cs-viz-bar.is-before{fill:rgba(11,11,12,.14)}
.cs-viz-arc{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.6;stroke-dasharray:4 5;stroke-linecap:round}
.cs-fig:first-child .cs-viz-arc{stroke:rgba(11,11,12,.45)}
.cs-viz-wipe{fill:#fff}
/* A figure still to come draws the same shape, in dashes. */
.cs-viz.is-wait .cs-viz-line{stroke-dasharray:7 7}
.cs-viz.is-wait .cs-viz-area{opacity:.55}
.cs-viz.is-wait .cs-viz-bar.is-last{opacity:.6}
@media (max-width:1100px){
  .cs-res-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px}
  .cs-res-copy{padding-top:0}
  .cs-figs[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-figs[data-n="3"] .cs-fig:first-child{grid-column:1 / -1}
  .cs-figs[data-n="3"] .cs-fig:first-child .cs-viz{max-width:560px}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cs-figs,.cs-figs[data-n="3"]{grid-template-columns:minmax(0,1fr)}
  .cs-fig{min-height:0}
  .cs-fig-v{margin-top:12px}
  .cs-viz{max-width:260px}
  .cs-figs[data-n="3"] .cs-fig:first-child .cs-viz{max-width:100%}
  .cs-figs[data-n="3"] .cs-fig:first-child .cs-fig-v{font-size:clamp(56px,16vw,76px)}
}

/* The light round an edge (Rim in views.tsx): an oversized conic layer
   inside a ring-shaped mask. Still and faint at rest; turned by a transform
   where motion is welcome. */
.cs-rim{
  position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.cs-rim i{
  position:absolute;left:50%;top:50%;width:250%;aspect-ratio:1;margin:-125% 0 0 -125%;opacity:.55;
  background:conic-gradient(from 0deg,transparent 0 58%,#ff8a50 74%,#e4589a 84%,#7c3aed 92%,transparent 100%);
}
.cs-fig:first-child .cs-rim{padding:2px}

/* ── The client: their card laid over the window ──────────────────────── */
/* ⚑ 2026-10-29: the window carries the client's own card — logo or name,
   sector, market and period — where the service's drawing was repeated from
   the hero: the layout of 21st.dev's "Card" (by ravikatiyar162), rebuilt
   here. The service rides on a chip at the window's top. */
.cs-client .oxh-head-split{align-items:center}
.cs-artwin .oxh-artwin-frame::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(180deg,rgba(9,8,13,.18),rgba(9,8,13,.06) 40%,rgba(9,8,13,.55))}
/* A photograph of the client's own work: a lighter shade. */
.cs-artwin.is-photo .oxh-artwin-frame::after{background:linear-gradient(180deg,rgba(9,8,13,.16),rgba(9,8,13,0) 34%,rgba(9,8,13,.4))}
.cs-artwin-tag{
  position:absolute;left:18px;top:18px;z-index:2;display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 36px);padding:7px 13px;border-radius:999px;
  font-family:var(--oxh-mono);font-size:12.5px;letter-spacing:.08em;line-height:1.3;color:#fff;
  background:rgba(12,10,20,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.cs-artwin-tag i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--cs-c);box-shadow:0 0 0 3px rgba(255,255,255,.14),0 0 12px 2px var(--cs-c)}
.cs-idcard{
  position:absolute;left:-2%;right:18%;bottom:5%;z-index:3;display:grid;gap:14px;padding:20px 20px 16px;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -28px rgba(11,11,12,.55),inset 0 1px 0 #fff,0 0 0 1px rgba(11,11,12,.06);
}
.cs-idcard::before{content:'';position:absolute;left:20px;right:20px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--cs-c),#e4589a 60%,#7c3aed)}
.cs-idcard-top{display:grid;gap:6px;min-width:0}
.cs-idcard .cs-who img{height:26px;max-width:190px}
.cs-idcard .cs-who.is-symbol img{height:30px;max-width:44px}
.cs-idcard .cs-who b{font-size:18px}
.cs-idcard-anon{display:inline-flex;align-items:center;gap:10px;min-width:0}
.cs-idcard-anon b{font-size:17px;font-weight:600;color:var(--oxh-ink)}
.cs-idcard-glyph{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#14121b;color:#fff}
.cs-idcard-glyph svg{width:18px;height:18px}
.cs-idcard-sector{font-size:15px;line-height:1.35;color:#4a4c53}
.cs-idcard-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border-radius:12px;overflow:hidden;background:rgba(11,11,12,.09)}
.cs-idcard-rows>span{display:grid;gap:3px;min-width:0;padding:10px 12px;background:#f6f4f0}
.cs-idcard-rows i{font-style:normal;font-family:var(--oxh-mono);font-size:12.5px;letter-spacing:.08em;color:#55575e}
.cs-idcard-rows b{font-size:14.6px;font-weight:500;line-height:1.35;color:var(--oxh-ink)}
/* The brief, on a card of its own under the first paragraph. */
.cs-brief{
  position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:16px;max-width:640px;margin-top:28px;padding:20px 24px 21px 22px;
  border-radius:22px;background:rgba(255,255,255,.8);border:1px solid rgba(11,11,12,.08);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff,0 32px 64px -42px rgba(11,11,12,.5);
}
.cs-brief::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#ff8a50,#e4589a 55%,#7c3aed)}
.cs-brief-ic{
  flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:#fff;
  background:linear-gradient(135deg,#c2410c,#be185d 60%,#6d28d9);box-shadow:0 0 0 5px rgba(221,110,62,.1),0 14px 28px -12px rgba(221,110,62,.75);
}
.cs-brief-t{display:grid;gap:10px;min-width:0}
.cs-brief-t p{margin:0;font-size:17.6px;line-height:1.62;color:var(--oxh-ink)}
@media (max-width:560px){.cs-brief{flex-direction:column;gap:12px;padding:18px 18px 19px 20px}}

/* ── The problem: three tiles, read as a chain of causes ──────────────── */
.cs-problem .oxh-head-split{align-items:end}
.cs-problem-lead .oxh-p{margin:0}
.cs-problem .oxh-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-issues .oxh-card{min-height:250px;padding-top:30px}
.cs-issue-mark{position:absolute;left:26px;right:26px;top:0;height:3px;overflow:hidden;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#f59e0b,#ef4444 55%,#be185d)}
/* A glint that runs along the warm line now and then (motion only). */
.cs-issue-mark::after{content:'';display:none;position:absolute;top:0;bottom:0;left:0;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.cs-issues .oxh-card:hover .cs-issue-num{-webkit-text-stroke-color:rgba(194,65,12,.42)}
.cs-issue-num{
  position:absolute;right:22px;top:18px;z-index:-1;pointer-events:none;
  font-size:76px;font-weight:600;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(194,65,12,.2);
}
.cs-issues .oxh-ic{background:#fff1e6;color:#c2410c;box-shadow:inset 0 0 0 1px rgba(194,65,12,.22)}
.cs-issues .oxh-card:hover .oxh-ic{color:#fff}
.cs-issues li:not(:last-child)::after{
  content:'';position:absolute;z-index:2;top:52px;right:-15px;width:16px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(194,65,12,.55) 0 4px,transparent 4px 7px);
}
@media (max-width:900px){
  .cs-problem .oxh-cards{grid-template-columns:minmax(0,1fr)}
  .cs-issues .oxh-card{min-height:0}
  .cs-issues li:not(:last-child)::after{top:auto;bottom:-15px;right:auto;left:46px;width:2px;height:16px;background:repeating-linear-gradient(180deg,rgba(194,65,12,.55) 0 4px,transparent 4px 7px)}
}

/* ── What we did: before and after, beside the aurora ─────────────────── */
/* ⚑ 2026-10-29: the layout of 21st.dev's "Comparison Section"
   (comparison-03, by mohammadshehadeh), rebuilt here on dark glass: what was
   wrong, struck through, beside what changed, ticked, with the period on a
   strip under both. It replaces the service's drawing, which this page drew
   three times. */
.cs-shift{
  position:relative;align-self:start;display:grid;border-radius:26px;overflow:hidden;overflow:clip;
  background:rgba(8,6,18,.64);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 60px 120px -60px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.cs-shift-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-shift-col{min-width:0;padding:clamp(22px,2.4vw,34px) clamp(20px,2.2vw,30px) clamp(24px,2.6vw,36px)}
.cs-shift-col.is-after{background:rgba(255,255,255,.07);box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
.cs-shift-h{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-family:var(--oxh-mono);font-size:13px;letter-spacing:.1em;line-height:1.3;color:rgba(255,255,255,.76)}
.cs-shift-col.is-after .cs-shift-h{color:#fff}
.cs-shift-ic{display:inline-grid;place-items:center;color:#ffb38f}
.cs-shift-col.is-after .cs-shift-ic{color:#4ade80}
.cs-shift-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.cs-shift-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.cs-shift-col.is-before .cs-shift-list{gap:22px}
.cs-shift-dash{position:relative;display:block;width:20px;height:20px;margin-top:1px;border-radius:50%;background:rgba(255,138,80,.16)}
.cs-shift-dash::before,.cs-shift-dash::after{content:'';position:absolute;left:6px;right:6px;top:9.25px;height:1.5px;border-radius:2px;background:#ffb38f;transform:rotate(45deg)}
.cs-shift-dash::after{transform:rotate(-45deg)}
.cs-shift-was{font-size:17px;line-height:1.45;color:rgba(255,255,255,.88)}
.cs-shift-tick{display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(74,222,128,.16);color:#4ade80}
.cs-shift-now{display:grid;gap:3px;min-width:0;font-size:16.4px;line-height:1.4;color:#fff}
.cs-shift-now b{font-size:clamp(24px,2vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.05;color:#ffc9a6}
.cs-shift-now em{font-style:normal;font-family:var(--oxh-mono);font-size:12.5px;letter-spacing:.06em;color:#ffd7a8}
.cs-shift-foot{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0;padding:16px clamp(20px,2.2vw,30px);
  border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.26);
}
.cs-shift-foot span{font-family:var(--oxh-mono);font-size:12.5px;letter-spacing:.1em;color:rgba(255,255,255,.74)}
.cs-shift-foot b{font-size:15.5px;font-weight:500;line-height:1.4;color:#fff}
/* What we did: the explanation in a wider column at reading size (no lead
   paragraph set larger than the rest), and the before-and-after card held
   level with the heading while the words beside it scroll. */
@media (min-width:1101px){.cs-approach .oxh-journey-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.cs-approach .oxh-h2{font-size:clamp(34px,calc(2.9vw + 6px),54px);line-height:1.04}
.cs-approach .oxh-journey-copy{max-width:700px;gap:18px;margin-top:26px}
.cs-approach .oxh-journey-copy .oxh-p{font-size:18.4px;line-height:1.68;color:rgba(255,255,255,.9)}
@media (min-width:1101px){.cs-shift{position:sticky;top:clamp(96px,9vh,128px);margin-top:46px}}
@media (max-width:1100px){.cs-shift{margin-top:34px}}
@media (max-width:640px){
  .cs-shift-cols{grid-template-columns:minmax(0,1fr)}
  .cs-shift-col.is-after{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
}

/* ── The hub's method cards, as a bento ────────────────────────────────── */
.cs-why .oxh-bento[data-n="4"]{grid-template-columns:minmax(0,1.32fr) repeat(2,minmax(0,1fr))}
.cs-why .oxh-bento[data-n="4"] .oxh-tile.is-lead{grid-row:span 2}
.cs-why .oxh-bento[data-n="4"] .oxh-tile.is-wide{grid-column:span 2}
@media (max-width:1100px){
  .cs-why .oxh-bento[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-why .oxh-bento[data-n="4"] .oxh-tile.is-lead{grid-row:auto;grid-column:1 / -1;min-height:400px}
}
@media (max-width:700px){
  .cs-why .oxh-bento[data-n="4"]{grid-template-columns:minmax(0,1fr)}
  .cs-why .oxh-bento[data-n="4"] .oxh-tile.is-wide{grid-column:auto;padding-right:26px}
  .cs-why .oxh-bento[data-n="4"] .oxh-tile-steps{display:none}
}
.cs-why .oxh-tile.is-wide .oxh-tile-top{justify-content:flex-start;gap:14px}
.cs-method .oxh-p-lead{max-width:760px}

/* ── Cases as folders ─────────────────────────────────────────────────── */
.cs-folders .oxh-folder-top{flex-wrap:wrap}
/* Long service names ("LinkedIn lead generation") stay on the icon's line. */
.cs-folders .oxh-folder-k{font-size:13.2px;letter-spacing:.06em}
.cs-folder-draft{
  margin-left:auto;padding:3px 9px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1.4;
  color:#7c2d12;background:rgba(255,237,213,.95);box-shadow:inset 0 0 0 1px rgba(180,83,9,.28);
}
/* A warm light that crosses a folder's front when it is pointed at or
   focused: under the words (the front is its own stacking context), off the
   card at rest. */
.cs-sheen{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.cs-sheen::before{
  content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:46%;
  background:linear-gradient(100deg,transparent,rgba(255,138,80,.16) 40%,rgba(228,88,154,.14) 62%,transparent);
  transform:translate3d(-140%,0,0) skewX(-14deg);
}
.cs-feat .oxh-folder-front > .cs-sheen{grid-column:auto;grid-row:auto}
.cs-folders .oxh-file.is-draw{background:#0e0b16}
.cs-folders .oxh-file.is-draw .oxh-sd{padding:12% 10%}
.cs-more .cs-more-all{display:flex;align-items:flex-end;justify-content:flex-end}
@media (min-width:1101px){.cs-more .oxh-folders[data-n="3"],.cs-more .oxh-folders[data-n="2"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-list-note{
  margin:14px 0 0;padding:10px 14px;border-radius:12px;border:1px dashed rgba(180,83,9,.45);
  background:rgba(255,247,235,.9);font-size:15px;line-height:1.5;color:#5b3812;width:fit-content;max-width:100%;
}
.cs-list{scroll-margin-top:90px}
.cs-feat-draw{display:none}
/* Four to a row, the first ones twice as wide so every row is full
   (featuredCount in views.tsx). */
@media (min-width:1101px){
  .cs-folders.is-featured{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cs-folders.is-featured .cs-feat{grid-column:span 2}
  .cs-folders.is-featured .oxh-folder h3{font-size:21px}
  .cs-folders.is-featured .cs-feat .oxh-folder h3{font-size:clamp(24px,1.9vw,30px);letter-spacing:-.022em;max-width:560px}
  .cs-feat .oxh-folder-front{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);grid-template-rows:auto auto auto 1fr auto;
    column-gap:30px;padding:28px 28px 28px 32px;
  }
  .cs-feat .oxh-folder-front > *{grid-column:1}
  .cs-feat .oxh-folder-go{grid-row:5}
  .cs-feat .cs-feat-draw{
    position:relative;overflow:hidden;isolation:isolate;grid-column:2;grid-row:1 / -1;display:grid;place-items:center;min-height:220px;
    padding:22px 20px;border-radius:18px;background:#15111c;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 44px -26px rgba(11,11,12,.7);
  }
  .cs-feat .cs-feat-draw::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 50% 50%,rgba(9,8,13,.25),rgba(9,8,13,.8))}
  .cs-feat-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform .9s var(--oxh-ease)}
  .cs-feat .oxh-folder:hover .cs-feat-art{transform:scale(1.06)}
  .cs-feat-sd{width:100%;max-width:320px}
  .cs-feat-sd .oxh-sd{width:100%;height:auto}
  .cs-feat .oxh-folder p{max-width:540px}
  .cs-feat .oxh-file{width:38%}
  .cs-feat .oxh-file.is-draw{left:9%}
  .cs-feat .oxh-file.is-photo{left:31%}
  .cs-feat .oxh-file.is-paper{right:9%}
}

/* ── The questions and the close keep the site's own look. ────────────── */
.cs-faq .oxh-qa dd p{margin:0}
.cs-close .oxh-close-t{text-wrap:balance}

/* ── The hub's plate: a tilted wall of the cases, drifting ─────────────── */
.cs-hubhero{--cs-c:#DD6E3E}
.oxh .cs-wall{aspect-ratio:1.02;max-width:720px}
.cs-wall-view{
  position:absolute;inset:0 0 11% 9%;overflow:hidden;border-radius:14px;background:#09080d;
  box-shadow:0 0 0 1px rgba(11,11,12,.06),0 44px 80px -48px rgba(11,11,12,.7);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.cs-wall-tilt{
  position:absolute;left:-14%;right:-14%;top:-18%;bottom:-18%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  transform:perspective(1400px) rotateX(16deg) rotateZ(-8deg) scale(1.02);
}
.cs-wall-col{display:flex;flex-direction:column;gap:14px}
.cs-wall-card{
  position:relative;flex:none;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;
  background:linear-gradient(160deg,#1b1526,#0f0c18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 24px 40px -24px rgba(0,0,0,.9);
}
.cs-wall-card::before{content:'';position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--cs-c);opacity:.9}
.cs-wall-draw{display:block;padding:8px 4px 2px}
.cs-wall-draw .oxh-sd{width:100%}
.cs-wall-name{display:inline-flex;align-items:center;gap:7px;font-family:var(--oxh-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.cs-wall-name i{width:7px;height:7px;border-radius:50%;background:var(--cs-c);box-shadow:0 0 10px 1px var(--cs-c)}
.cs-wall-rec{
  position:absolute;left:0;bottom:5%;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  font-family:var(--oxh-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--oxh-ink);background:#fff;
  box-shadow:0 0 0 1px rgba(11,11,12,.08),0 26px 50px -26px rgba(11,11,12,.55);
}
.cs-wall-dot{width:9px;height:9px;border-radius:50%;background:#e11d48;box-shadow:0 0 0 4px rgba(225,29,72,.16)}

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width:560px){
  .cs-board-figs{width:min(76%,290px)}
  .cs-board-fig{padding:10px 12px}
  .cs-board-fig + .cs-board-fig{display:none}
  .cs-board-fig-dir{width:34px;height:34px}
  .cs-board-tag{left:18px;top:16px}
  .cs-facts{grid-template-columns:minmax(0,1fr)}
}

/* ── Motion: only for readers who have not asked for less ───────────────
   ⚑ 2026-10-29 (visual pass): every piece of it transform and opacity, each
   loop slow, and only one loop per room — the hero's field and scan, the
   route's light, the lead figure's light. With motion off every picture is
   finished and still, and the bands nobody can see are paused by the frame
   (PauseOffscreen and the other site's own pause). */
.cs-fig:hover::after{opacity:1}
@media (min-width:761px){.cs-fig{--cs-st:calc(var(--i,0) * 70px)}}
@media (min-width:901px){.cs-issues > li{--cs-st:calc(var(--i,0) * 60px)}}
@media (min-width:1101px){.cs-folders > li{--cs-st:calc(var(--i,0) * 60px)}}
@media (prefers-reduced-motion:no-preference){
  .cs-board-art{animation:csDrift 26s ease-in-out infinite alternate}
  .cs-board-figs{animation:csFloat 8s ease-in-out infinite}
  .cs-viz-rise{animation:csRise 1.4s cubic-bezier(.16,1,.3,1) both}
  .cs-viz-bar{transform-box:fill-box;transform-origin:50% 100%;animation:csBarUp 1.3s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--j,0) * .07s)}
  .cs-viz-ring{transform-box:fill-box;transform-origin:center;animation:csRing 2.6s ease-out infinite}
  .cs-viz-wipe{transform-box:fill-box;transform-origin:0 50%;animation:csWipe 1.8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * .18s)}
  .cs-issue-mark{transform-origin:left center;animation:csGrow 1.6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * .15s)}
  .cs-issue-mark::after{display:block;animation:csGlint 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * .7s + 1.6s)}
  .cs-wall-col.is-down{animation:csColDown linear infinite}
  .cs-wall-col.is-up{animation:csColUp linear infinite}
  .cs-wall-dot{animation:csBlink 1.6s ease-in-out infinite}
  .cs-fig-bar i{transform-origin:left center;animation:csGrow 2.4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * .18s)}
  .cs-shift-list li{animation:csRise .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.1s + var(--i,0) * .12s)}
  .cs-shift-col.is-after .cs-shift-list li{animation-delay:calc(.45s + var(--i,0) * .14s)}
  .cs-shift-tick{animation:csPop .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.6s + var(--i,0) * .14s)}
  .cs-idcard{animation:csFloat 7s ease-in-out infinite;animation-delay:-2.5s}
  .cs-field-dots{animation:csDots 18s linear infinite}
  .cs-field-beam{display:block;animation:csBeam 13s cubic-bezier(.45,0,.25,1) infinite}
  .cs-scan{display:block;animation:csScan 8s cubic-bezier(.55,0,.35,1) infinite}
  .cs-wall-view .cs-scan{animation-duration:10s;animation-delay:-3s}
  .cs-feat-draw .cs-scan{animation-duration:9.5s;animation-delay:calc(var(--i,0) * -3.5s)}
  .cs-rim i{animation:csSpin 9s linear infinite}
  .cs-fig::after{transition:opacity .45s ease}
  .cs-sheen::before{transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .oxh-folder:hover .cs-sheen::before,.oxh-folder:focus-visible .cs-sheen::before{transform:translate3d(330%,0,0) skewX(-14deg)}
  .cs-issue-num{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .cs-issues .oxh-card:hover .cs-issue-num{transform:translate3d(-4px,2px,0)}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cs-fig-bar i{animation-timeline:view();animation-range:entry 10% cover 40%;animation-delay:0s}
    .cs-viz-rise,.cs-viz-bar{animation-timeline:view();animation-range:entry 5% cover 35%;animation-delay:0s}
    /* The rect lives in a clipPath and has no box of its own, so it follows
       its drawing's timeline (view-timeline-name on .cs-viz). */
    .cs-viz-wipe{animation-timeline:--csviz;animation-range:entry 10% cover 42%;animation-delay:0s}
    .cs-issue-mark{animation-timeline:view();animation-range:entry 10% cover 30%;animation-delay:0s}
    .cs-shift-list li{animation-timeline:view();animation-range:entry calc(6% + var(--i,0) * 6%) cover calc(26% + var(--i,0) * 6%);animation-delay:0s}
    .cs-shift-col.is-after .cs-shift-list li,.cs-shift-tick{animation-timeline:view();animation-range:entry calc(18% + var(--i,0) * 6%) cover calc(38% + var(--i,0) * 6%);animation-delay:0s}
    .cs-fig{animation:csCardIn linear both;animation-timeline:view();animation-range:entry var(--cs-st,0px) entry calc(260px + var(--cs-st,0px))}
    .cs-fig-v{animation:csValue linear both;animation-timeline:view();animation-range:entry 30% cover 34%}
    .cs-issues > li.oxh-rv,.cs-folders > li.oxh-rv{animation-range:entry var(--cs-st,0px) entry calc(240px + var(--cs-st,0px))}
  }
}
@keyframes csDrift{to{transform:scale(1.08) translate3d(-2%,-2%,0)}}
@keyframes csFloat{50%{transform:translate3d(0,-6px,0)}}
@keyframes csColDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@keyframes csColUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes csBlink{50%{opacity:.35}}
@keyframes csGrow{from{transform:scaleX(.08)}}
@keyframes csRise{from{opacity:0;transform:translate3d(0,12px,0)}}
@keyframes csBarUp{from{transform:scaleY(.1)}}
@keyframes csRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes csPop{from{opacity:0;transform:scale(.4)}}
@keyframes csWipe{from{transform:scaleX(0)}}
@keyframes csGlint{0%{transform:translate3d(-110%,0,0)}38%,100%{transform:translate3d(460%,0,0)}}
@keyframes csDots{to{transform:translate3d(28px,28px,0)}}
@keyframes csBeam{0%{transform:translate3d(-120%,0,0) rotate(16deg)}62%,100%{transform:translate3d(520%,0,0) rotate(16deg)}}
@keyframes csScan{0%{transform:translate3d(0,-105%,0)}58%,100%{transform:translate3d(0,300%,0)}}
@keyframes csSpin{to{transform:rotate(360deg)}}
@keyframes csCardIn{from{opacity:0;transform:translate3d(0,34px,0) scale(.97)}}
@keyframes csValue{from{opacity:0;transform:translate3d(0,.34em,0)}}

/* ── A service page's case card: the proof under the page's claims ──── */
.cs-svccase-card{
  position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.86fr);
  gap:clamp(24px,3vw,52px);align-items:center;padding:clamp(28px,3.6vw,56px);border-radius:28px;background:#0d0b14;color:#fff;
  box-shadow:0 60px 120px -64px rgba(40,10,70,.75),0 0 0 1px rgba(11,11,12,.06);
}
.cs-svccase-art{position:absolute;inset:0;z-index:-1}
.cs-svccase-art img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(1.1)}
.cs-svccase-art::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,11,20,.97) 32%,rgba(13,11,20,.78) 68%,rgba(13,11,20,.6))}
.cs-svccase-t{min-width:0}
.cs-svccase-t .oxh-h2{margin:14px 0 16px;max-width:760px;color:#fff;font-size:clamp(30px,calc(2.4vw + 4px),46px);line-height:1.06}
.cs-svccase-glance{margin:0 0 26px;max-width:660px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.88)}
.cs-svccase-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
/* The site's black button, white on this dark card: its colour is set with
   !important in the home sheet, so it is answered the same way here. */
.cs-svccase-go .oxh-btn-k{background:#fff;color:#0b0b0c !important;border-color:#fff}
.cs-svccase-go .oxh-btn-k:hover{background:#f1ede6}
.cs-svccase-go .cs-who{padding:9px 16px;border-radius:999px;background:#fff}
.cs-svccase-figs{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.cs-svccase-figs li{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'d v' 'd l';column-gap:16px;row-gap:2px;align-items:center;
  padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.cs-svccase-figs .cs-fig-dir{grid-area:d}
.cs-svccase-figs b{grid-area:v;font-size:clamp(26px,2.1vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:#fff}
.cs-svccase-figs li>span:last-child{grid-area:l;font-size:15px;line-height:1.4;color:rgba(255,255,255,.8)}
.cs-svccase-figs b small{margin-left:10px;font-size:15px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .cs-svccase-card{grid-template-columns:minmax(0,1fr)}
  /* One column puts the words over the whole picture: a flat shade keeps them readable. */
  .cs-svccase-art::after{background:rgba(13,11,20,.9)}
}
/* ── Links inside a case's words (inline.ts) ────────────────────────────
   ⚑ 2026-10-29 (founder: "with internal links"): a link reads as part of the
   sentence: the words keep their colour, an underline in the brand's orange
   says it can be pressed. On the two dark panels the underline is a light
   peach so it still stands out. */
.cs-inlink{color:inherit;font-weight:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:rgba(221,110,62,.62);transition:text-decoration-color .2s ease,color .2s ease}
.cs-inlink:hover,.cs-inlink:focus-visible{text-decoration-color:#dd6e3e;color:var(--oxh-ink)}
.cs-res-copy .cs-inlink,.oxh-journey .cs-inlink{text-decoration-color:rgba(255,201,166,.7)}
.cs-res-copy .cs-inlink:hover,.cs-res-copy .cs-inlink:focus-visible,.oxh-journey .cs-inlink:hover,.oxh-journey .cs-inlink:focus-visible{color:#fff;text-decoration-color:#ffc9a6}
.cs-faq .cs-inlink:hover,.cs-faq .cs-inlink:focus-visible{color:var(--oxh-ink)}

/* ── The tools the work was done in, under the brief ─────────────────── */
.cs-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin:20px 0 0;max-width:620px}
.cs-tools-k{margin-right:6px;font-family:var(--oxh-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#55575e}
.cs-tool{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 11px;border-radius:999px;background:#fff;font-size:14.6px;font-weight:500;line-height:1.3;color:var(--oxh-ink);box-shadow:inset 0 0 0 1px rgba(11,11,12,.12),0 6px 14px -10px rgba(11,11,12,.35)}
.cs-tool::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#ff8a50,#e4589a 60%,#7c3aed)}

/* ── What the wider data says: other people's numbers, with sources ────
   ⚑ 2026-10-29 (founder: "relevant data too"): two or three figures a study
   or a platform published, each with its publisher and a link (facts.ts),
   under the problem's cards. The case's own results stay in the results room. */
.cs-data{margin-top:clamp(30px,3.2vw,48px);padding-top:clamp(24px,2.4vw,34px);border-top:1px solid rgba(11,11,12,.1)}
.cs-data-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 18px}
.cs-data-h b{font-size:clamp(20px,1.5vw,24px);font-weight:600;letter-spacing:-.015em;color:var(--oxh-ink)}
.cs-data-h span{font-size:16px;line-height:1.5;color:#4a4c53}
.cs-data-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.cs-datum{
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 22px 20px;border-radius:22px;
  background:#fff;box-shadow:0 0 0 1px rgba(11,11,12,.08),0 26px 50px -36px rgba(11,11,12,.45);
}
.cs-datum::before{content:'';position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#ff8a50,#e4589a 55%,#7c3aed)}
.cs-datum::after{content:'';position:absolute;z-index:-1;right:-30%;top:-40%;width:72%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,138,80,.12),rgba(228,88,154,.06) 55%,transparent)}
.cs-datum-stat{font-size:clamp(32px,2.8vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.02;color:var(--oxh-ink);overflow-wrap:anywhere}
/* A fact whose headline is a name or a phrase, not a number (Google's three
   local factors, OpenAI's crawler): set as a term, not as a giant figure. */
.cs-datum.is-term .cs-datum-stat{font-size:clamp(22px,1.7vw,27px);letter-spacing:-.02em;line-height:1.2}
.cs-datum-t{margin:0;font-size:16px;line-height:1.55;color:#3a3b41}
.cs-datum-src{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;width:fit-content;max-width:100%;margin-top:auto;padding-top:6px;
  font-size:14.6px;line-height:1.35;font-weight:500;color:#3f4047;text-decoration:none;
}
.cs-datum-src i{font-style:normal;font-family:var(--oxh-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5d5f66}
.cs-datum-src svg{flex:none;width:13px;height:13px;transform:rotate(-45deg)}
.cs-datum-src:hover,.cs-datum-src:focus-visible{color:var(--oxh-ink);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(221,110,62,.62)}

/* ── The weekly report, drawn in the client's window ───────────────────
   ⚑ 2026-10-29 (founder: "animated images … look good and professional"):
   a report card laid over the studio art when there is no photograph of the
   client's work. Its tiles are the case's own figures, and it says on its face
   that it is a drawing. Finished at rest; with motion welcome the line draws,
   the tiles rise and the end point pulses. */
.cs-rep{
  position:absolute;left:7%;right:7%;top:58px;bottom:39%;z-index:2;display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:'bar' 'kpis' 'chart' 'note';
  row-gap:9px;padding:12px 14px 10px;border-radius:16px;overflow:hidden;overflow:clip;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 28px 54px -26px rgba(9,8,13,.7),inset 0 1px 0 #fff,0 0 0 1px rgba(11,11,12,.06);
}
.cs-rep-bar{grid-area:bar;display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;min-width:0}
.cs-rep-dots{display:flex;gap:5px;flex:none}
.cs-rep-dots i{width:8px;height:8px;border-radius:50%;background:#e8e5df}
.cs-rep-dots i:first-child{background:var(--cs-c)}
.cs-rep-bar b{flex:1 0 auto;min-width:0;white-space:nowrap;font-size:13px;font-weight:600;color:var(--oxh-ink)}
.cs-rep-bar em{flex:none;max-width:100%;margin-left:auto;white-space:nowrap;font-style:normal;font-family:var(--oxh-mono);font-size:11.5px;letter-spacing:.04em;color:#5d5f66}
.cs-rep-kpis{grid-area:kpis;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.cs-rep-kpi{position:relative;display:grid;gap:3px;min-width:0;padding:8px 9px 8px;border-radius:11px;background:#f7f5f1;box-shadow:inset 0 0 0 1px rgba(11,11,12,.05)}
.cs-rep-kpi b{padding-right:15px;font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--oxh-ink);overflow-wrap:anywhere}
.cs-rep-kpi i{font-style:normal;font-size:11px;line-height:1.3;color:#55575e;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-rep-dir{position:absolute;right:7px;top:8px;display:grid;place-items:center;color:#15803d}
.cs-rep-dir svg{width:12px;height:12px}
.cs-rep-chart{grid-area:chart;display:block;width:100%;height:100%;min-height:0;overflow:visible}
.cs-rep-area{stroke:none}
.cs-rep-grid{stroke:rgba(11,11,12,.08);stroke-width:1;vector-effect:non-scaling-stroke}
.cs-rep-line{fill:none;stroke:var(--cs-c);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cs-rep-end{fill:#fff;stroke:var(--cs-c);stroke-width:2.5;vector-effect:non-scaling-stroke}
.cs-rep-note{grid-area:note;font-size:11px;line-height:1.3;color:#5d5f66}
/* The cover that wipes off the chart as it draws: only where motion is welcome. */
.cs-rep-sweep{grid-area:chart;display:none;z-index:1;pointer-events:none;background:linear-gradient(90deg,#fff 86%,rgba(255,255,255,0))}
@media (prefers-reduced-motion:no-preference){
  .cs-rep-sweep{display:block;transform-origin:100% 50%;animation:csRepWipe 1.6s cubic-bezier(.65,0,.35,1) .5s both}
  .cs-rep-kpi{animation:csRise .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.2s + var(--i,0) * .12s)}
  .cs-rep-end{transform-box:fill-box;transform-origin:center;animation:csRepPulse 2.8s ease-in-out 2.2s infinite}
  .cs-datum{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease}
  .cs-datum:hover{transform:translate3d(0,-3px,0);box-shadow:0 0 0 1px rgba(11,11,12,.1),0 34px 60px -36px rgba(11,11,12,.5)}
  .cs-datum-src svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .cs-datum-src:hover svg{transform:rotate(-45deg) translate3d(3px,0,0)}
  .cs-tool{transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .cs-tool:hover{transform:translate3d(0,-2px,0)}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cs-rep-sweep{animation-timeline:view();animation-range:entry 20% cover 50%;animation-delay:0s}
    .cs-rep-kpi{animation-timeline:view();animation-range:entry calc(10% + var(--i,0) * 5%) cover calc(30% + var(--i,0) * 5%);animation-delay:0s}
    .cs-data-list .cs-datum{animation:csRise linear both;animation-timeline:view();animation-range:entry calc(var(--i,0) * 40px) entry calc(220px + var(--i,0) * 40px)}
  }
}
@keyframes csRepWipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes csRepPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}