:root{
  color-scheme:light;
  --ink:#1C2933; --blue:#1484CA; --mid:#5A646D; --soft:#98A1A8;
  /* The page ground, taken straight from the illustration's own background
     (#F8F6F5). It was referenced by body and .hero but never declared — an
     undefined custom property invalidates the whole declaration, so body fell
     back to the browser's white and every warm asset sat on it as a visible
     rectangle. That was the artefact around the career illustration. */
  --ground:#F9F8F6;
  --line:#E4DFDA; --wash:#F2EFEC; --black:#111111;
  --shell:1350px;
  /* Vertical separation between major case-study chapters. Declared as a token
     so the three breakpoints stay in one place instead of being sprinkled. */
  --sec-gap:72px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}
body{margin:0;background:var(--ground);color:var(--mid);
  font:400 15px/1.6 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 40px;}
@media (max-width:640px){.wrap{padding:0 22px;}}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;color:var(--ink);margin:0;
  letter-spacing:-.022em;text-wrap:balance;}
.b{color:var(--blue);}
.soft{font-weight:400;color:var(--mid);}
a{color:var(--blue);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;}
img{max-width:100%;height:auto;}

.band{display:none;}
header{border-bottom:1px solid var(--line);background:#fff;}
nav{max-width:var(--shell);margin:0 auto;padding:22px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;}
nav .logo img{height:48px;width:auto;display:block;}
.navlinks{display:flex;gap:38px;}
.navlinks a{font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:none;}
.navlinks a:hover{color:var(--blue);}
@media (max-width:860px){.navlinks{display:none;}}

.hero{
  /* Near-white ground. The gradient sits above it at partial opacity, which is
     what gives the original its washed, pale look — the source image is far more
     saturated than the hero ever shows (#B0A47D / #974157 at the top corners). */
  position:relative;
  overflow:hidden;
  background:var(--ground);
  padding:130px 0 210px;
  min-height:82vh;
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:0;
  background:url('img/hero-gradient.webp') center / 100% 100% no-repeat;
  pointer-events:none;
}
.hero::before{
  opacity:.58;
  animation:drift-a 21s ease-in-out infinite alternate;
}
/* A second field on a different clock, drifting the other way. Two layers on
   coprime-ish durations never realign, so the motion reads as organic rather
   than as one thing sliding — and each layer still loops seamlessly on its own. */
.hero::after{
  opacity:.26;
  animation:drift-b 17s ease-in-out infinite alternate;
}
.hero > *{position:relative;z-index:1;}

/* Big enough to actually be seen. The first version moved 3.5% over 34s — about
   two pixels a second, which reads as nothing at all. This travels roughly four
   times as far in two thirds of the time, and still stays below the threshold
   where it competes with the copy. */
@keyframes drift-a{
  from{transform:translate3d(-2.5%,-1.2%,0) scale(1.00);}
  to  {transform:translate3d(2.5%,1.2%,0) scale(1.12);}
}
@keyframes drift-b{
  from{transform:translate3d(2%,1.5%,0) scale(1.10);}
  to  {transform:translate3d(-2%,-1.5%,0) scale(1.00);}
}

/* Entrance only — the logo turns into place from the bottom left and stops.
   transform-origin at the bottom-left corner is what makes it read as a turn
   rather than a slide. `both` holds the start frame so there is no flash of the
   final position before the animation begins, and because only transform and
   opacity animate, the header never shifts. */
@keyframes logo-in{
  from{opacity:0;transform:translate3d(-16px,18px,0) rotate(-20deg);}
  to  {opacity:1;transform:translate3d(0,0,0) rotate(0deg);}
}
nav .logo img{
  transform-origin:0 100%;
  animation:logo-in .86s cubic-bezier(.19,.76,.31,1) both;
}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none;transform:scale(1.04);}
  .hero::after{opacity:.2;}
  nav .logo img{animation:none;opacity:1;transform:none;}
}
.hero h1{font-size:clamp(34px,5.6vw,64px);line-height:1.1;font-weight:600;max-width:26ch;}
.hero .lede{font-size:19px;line-height:1.55;max-width:54ch;margin:26px 0 0;}
.hero .meta{font-size:15px;color:var(--mid);margin:16px 0 40px;}
.pill{display:inline-block;background:var(--ink);color:#fff!important;text-decoration:none;
  font-weight:500;font-size:15px;padding:15px 44px;border-radius:999px;transition:opacity .15s;}
.pill:hover{opacity:.88;}

/* Vertical rhythm for sections.
   NOT `section{padding:130px 0}`: these elements also carry .wrap, and a class
   (0-1-0) outranks an element (0-0-1), so .wrap's `padding:0 40px` silently won
   and the vertical padding never applied. Matching .wrap's specificity with
   `section.wrap` (0-1-1) is what makes it stick. This is why every spacing
   change before this one appeared to do nothing. */
section{padding:130px 0;}
section.wrap{padding-top:130px;padding-bottom:130px;}
.sectitle{font-size:clamp(32px,5.4vw,68px);font-weight:700;line-height:1.05;}
.subtitle{margin:20px 0 0;font-size:17px;max-width:none;}

/* One breakout, shared. Measured off the original: the grids leave the reading
   column and run almost to the viewport edge, while the headings above them stay
   in it. Written once so the three blocks that do it cannot drift apart. */
.bleed{
  max-width:1800px;
  margin-left:calc((var(--shell) - min(1800px, 100vw - 80px)) / 2);
  margin-right:calc((var(--shell) - min(1800px, 100vw - 80px)) / 2);
}
@media (max-width:1440px){.bleed{margin-left:0;margin-right:0;}}

.cases{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);margin-top:72px;}
.case{padding:44px 40px 44px 0;border-right:1px solid var(--line);text-decoration:none;display:block;}
.case:last-child{border-right:0;}
.case:not(:first-child){padding-left:40px;}
@media (max-width:860px){.cases{grid-template-columns:1fr;}
  .case{border-right:0;border-bottom:1px solid var(--line);padding:24px 0;}}
.sector{font-size:13px;font-weight:600;color:var(--blue);display:block;margin-bottom:10px;}
.case h3{font-size:clamp(24px,2.2vw,33px);font-weight:700;line-height:1.2;margin-bottom:20px;}
.case p{margin:0 0 26px;font-size:18px;line-height:1.55;}
.case .go{font-size:17px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  border-right:0;border-bottom:0;margin-top:72px;}
.cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:40px 40px;min-height:250px;}
.cell .n{font-size:16px;color:var(--blue);display:block;margin-bottom:14px;}
.cell h3{font-size:24px;font-weight:700;margin-bottom:12px;}
.cell p{margin:0;font-size:17px;line-height:1.55;}
.cell.tall{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;}
@media (max-width:860px){.grid{grid-template-columns:1fr;}.cell.tall{grid-row:auto;gap:60px;}}

.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;margin-top:72px;}
@media (max-width:980px){.caps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.caps{grid-template-columns:1fr;}}
.cap h3{font-size:21px;font-weight:700;margin-bottom:14px;}
.cap p{margin:0;font-size:17px;line-height:1.55;}

.about{display:grid;grid-template-columns:0.82fr 1fr;gap:86px;align-items:center;}
@media (max-width:980px){.about{grid-template-columns:1fr;gap:40px;}}
.about .art{width:100%;border-radius:4px;display:block;}
.about h2{font-size:clamp(30px,4.8vw,66px);font-weight:700;line-height:1.07;}
.about p{margin:48px 0 0;font-size:19px;line-height:1.6;}

.statement{background:var(--black);padding:130px 24px;text-align:center;}
.statement p{font-family:"Bricolage Grotesque",system-ui,sans-serif;color:#fff;margin:0 auto;max-width:17ch;
  font-size:clamp(30px,5.6vw,58px);font-weight:700;line-height:1.16;letter-spacing:-.022em;}

footer{background:var(--wash);padding:76px 0 30px;}
.foot{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
@media (max-width:860px){.foot{grid-template-columns:1fr;gap:44px;}}
.foot img.logo{height:44px;width:auto;margin-bottom:26px;display:block;}
.foot h2{font-size:26px;font-weight:700;line-height:1.25;margin-bottom:18px;}
.foot a{color:var(--mid);text-decoration:none;display:block;font-size:15px;}
.foot a:hover{color:var(--blue);}
/* `.foot a` (0-1-1) outranks a bare `.li` (0-1-0), so the white was losing to the
   footer's grey and the glyph sat almost invisible on its own dark disc. Written
   as `.foot a.li` to match, not with !important. */
.foot a.li{
  display:inline-grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--ink);color:#fff;
  font:700 15px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.02em;
  margin-top:24px;text-decoration:none;
  transition:background .15s;
}
.foot a.li:hover{background:var(--blue);color:#fff;}
.foot a.li:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.formhead{font-size:15px;font-weight:600;color:var(--ink);margin:0;}
.formsub{margin:4px 0 22px;font-size:14px;}
form{display:grid;gap:22px;}
label{display:block;font-size:12px;color:var(--mid);margin-bottom:4px;}
input,textarea{width:100%;border:0;border-bottom:1px solid var(--soft);background:transparent;
  font:400 15px/1.5 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);padding:5px 0;}
input:focus,textarea:focus{border-bottom-color:var(--blue);outline:0;}
textarea{min-height:64px;resize:vertical;}
button{background:var(--ink);color:#fff;border:0;border-radius:2px;padding:13px;
  font:500 14px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer;width:100%;transition:opacity .15s;}
button:hover{opacity:.88;}

/* Honeypot: off-screen rather than display:none — some bots skip hidden fields. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.note{border-radius:3px;padding:16px 18px;font-size:14.5px;margin-bottom:20px;}
.note.ok{background:#E7F3EC;border:1px solid #B4D9C4;color:#1F5B39;}
.note.bad{background:#FBECEC;border:1px solid #E8BFBF;color:#8C2F2F;}
.note strong{display:block;margin-bottom:3px;color:inherit;}
.copy{border-top:1px solid var(--line);margin-top:58px;padding-top:22px;font-size:13px;color:var(--soft);}

/* ---------------------------------------------------------------------------
   Scroll reveals
   ---------------------------------------------------------------------------
   The hidden state is scoped to .js, a class the inline head script adds. With
   scripting off or a bundle that fails to load, none of this applies and the
   page renders plainly — the alternative is a blank site whenever JS breaks,
   which is the usual way this effect goes wrong.

   Everything animates opacity and transform only: both are compositor
   properties, so a reveal never reflows the page or moves what is already read.
--------------------------------------------------------------------------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  will-change:opacity, transform;
}
.js [data-reveal].is-in{
  opacity:1;
  transform:none;
  /* Slightly long and heavily eased-out: the movement should finish before the
     eye arrives, not arrive with it. */
  /* Deliberately slow, matching the original: the movement should be felt as
     atmosphere, not as a widget arriving. */
  transition:opacity 1.6s cubic-bezier(.16,.72,.3,1),
             transform 1.6s cubic-bezier(.16,.72,.3,1);
  transition-delay:calc(var(--i, 0) * 130ms);
  will-change:auto;
}

/* The hero is above the fold: it plays on load, not on scroll. */
.js .hero [data-reveal]{transform:translateY(24px);}
.js .hero [data-reveal].is-in{transition-duration:2.6s;}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;}
  .js [data-reveal].is-in{transition:none;}
}

/* ---------------------------------------------------------------------------
   Case studies
   ---------------------------------------------------------------------------
   The page is a two-column reading grid: a narrow left rail carrying the stage
   label (THE PROBLEM, DISCOVERY, REFLECTION) and a wide right column with the
   prose and the images. The rail collapses above the content on narrow screens
   rather than squeezing, because a 90px column of uppercase type is unreadable.
--------------------------------------------------------------------------- */
.navlinks a.on{color:var(--blue);}

.cs-hero{background:var(--wash);padding:84px 0 72px;text-align:center;}
.cs-hero .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:22px;}
.cs-hero h1{font-size:clamp(31px,5vw,56px);line-height:1.1;font-weight:700;
  max-width:19ch;margin:0 auto;}
.cs-hero .sub{max-width:62ch;margin:24px auto 0;font-size:16px;}

.cs-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
  max-width:var(--shell);margin:52px auto 0;padding:0 40px;text-align:left;}
@media (max-width:760px){.cs-meta{grid-template-columns:1fr;gap:24px;}}
.cs-meta dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin-bottom:8px;}
.cs-meta dd{margin:0;font-size:15px;color:var(--ink);}

.cs-figure{margin:0;}
.cs-figure img{width:100%;display:block;border-radius:3px;}
.cs-full{max-width:1700px;margin:0 auto;padding:0 40px;}
@media (max-width:640px){.cs-full{padding:0 22px;}}

/* rail + content */
.cs-row{display:grid;grid-template-columns:200px 1fr;gap:40px;
  max-width:var(--shell);margin:0 auto;padding:0 40px;align-items:start;}
@media (max-width:860px){.cs-row{grid-template-columns:1fr;gap:10px;}}
@media (max-width:640px){.cs-row{padding:0 22px;}}
.rail{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);padding-top:8px;}
.cs-body h2{font-size:clamp(23px,3.4vw,36px);font-weight:700;margin:0 0 16px;}
.cs-body p{margin:0;font-size:15.5px;max-width:72ch;}
.cs-block{padding:44px 0;}
.cs-rule{border:0;border-top:1px solid var(--line);max-width:var(--shell);
  margin:16px auto;}

/* key insight */
.insight{background:var(--ink);padding:66px 44px;border-radius:3px;text-align:center;
  max-width:1700px;margin:0 auto;}
.insight .tag{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;opacity:.85;margin-bottom:26px;}
.insight p{font-family:"Bricolage Grotesque",system-ui,sans-serif;color:#fff;margin:0 auto;max-width:24ch;
  font-size:clamp(25px,4.2vw,45px);font-weight:700;line-height:1.2;letter-spacing:-.02em;}
.insight p .b{color:#4EA6DE;}

/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:34px;
  max-width:var(--shell);margin:0 auto;padding:0 40px;}
@media (max-width:760px){.ba{grid-template-columns:1fr;gap:24px;}}
@media (max-width:640px){.ba{padding:0 22px;}}
.ba h3{font-size:15px;font-weight:700;color:var(--blue);margin:0 0 14px;}
.ba ul{margin:0;padding:26px 26px 26px 44px;border-radius:3px;font-size:15px;}
.ba .before ul{background:var(--ink);color:#DCE3E9;}
.ba .after  ul{border:1px solid var(--line);color:var(--mid);}
.ba li+li{margin-top:8px;}

/* --- Financial Intelligence: its own treatment ----------------------------
   This case leads with a split hero and uses large uppercase section titles as
   the structural device, rather than the left rail Healthcare uses. Same
   palette, different rhythm — two case studies that looked identical would say
   the work was identical.
-------------------------------------------------------------------------- */
.fin-hero{background:var(--wash);padding:76px 0 68px;}
.fin-split{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;}
@media (max-width:900px){.fin-split{grid-template-columns:1fr;gap:34px;}}
.fin-kicker{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);display:block;margin-bottom:20px;}
.fin-hero h1{font-size:clamp(34px,5.4vw,62px);line-height:1.02;font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;}
.fin-hero h1 .b{display:block;}
.fin-hero .sub{margin:26px 0 0;font-size:16px;max-width:46ch;}
.fin-hero img{width:100%;display:block;border-radius:3px;}

.big{font-size:clamp(30px,5vw,52px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.015em;margin:0;}
.big+.rulewide{border:0;border-top:1px solid var(--ink);margin:22px 0 0;}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:46px;}
@media (max-width:900px){.trio{grid-template-columns:1fr;gap:36px;}}
.trio .lab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:10px;}
.trio h3{font-size:21px;font-weight:700;margin:0 0 12px;}
.trio p{margin:0;font-size:15px;}
.trio img{width:100%;display:block;margin-top:24px;border-radius:3px;}

.motion{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start;}
@media (max-width:900px){.motion{grid-template-columns:1fr;gap:32px;}}
.motion img{width:100%;display:block;border-radius:3px;}
.motion dt{font-size:15px;font-weight:700;color:var(--ink);text-transform:uppercase;
  letter-spacing:.04em;margin-top:26px;}
.motion dl > div:first-child dt{margin-top:0;}
.motion dd{margin:7px 0 0;font-size:15px;}

.achieve{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:34px;}
@media (max-width:900px){.achieve{grid-template-columns:1fr;gap:28px;}}
.achieve h3{font-size:22px;font-weight:700;margin:0 0 10px;}
.achieve p{margin:0;font-size:15px;}
.cs-lede{margin:30px 0 0;max-width:72ch;font-size:15.5px;}

/* --- Automotive: boxed callouts, a step flow, and a dark close -------------- */
.box{background:#EFEDE7;border:1px solid #DDD9D0;padding:30px 32px;border-radius:2px;}
.box h3{font-size:20px;font-weight:700;text-transform:uppercase;margin:0 0 12px;letter-spacing:-.01em;}
.box p{margin:0;font-size:15px;}
.box .lab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);display:block;margin-bottom:10px;}
.boxstack{display:flex;flex-direction:column;gap:22px;}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:34px;}}
.split img{width:100%;display:block;border-radius:3px;}

.stack-defs > div{padding:22px 0;border-top:1px solid var(--line);}
.stack-defs > div:first-child{border-top:0;padding-top:0;}
.stack-defs h3{font-size:20px;font-weight:700;text-transform:uppercase;margin:0 0 8px;}
.stack-defs p{margin:0;font-size:15px;}

.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:40px;
  padding-top:28px;border-top:1px solid var(--line);}
.flow span{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.flow i{width:22px;height:1px;background:var(--soft);display:inline-block;font-style:normal;}

.twocol-list{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;}
@media (max-width:760px){.twocol-list{grid-template-columns:1fr;}}
.twocol-list > div{padding:0 34px;}
.twocol-list > div:last-child{border-left:1px solid var(--blue);}
@media (max-width:760px){.twocol-list > div{padding:0;}
  .twocol-list > div:last-child{border-left:0;border-top:1px solid var(--blue);padding-top:26px;margin-top:26px;}}
.twocol-list h3{font-size:26px;font-weight:700;color:var(--blue);text-transform:uppercase;margin:0 0 20px;}
.twocol-list li{list-style:none;font-size:15px;padding:9px 0;}
.twocol-list ul{margin:0;padding:0;}

.closing{background:#161616;padding:118px 24px;text-align:center;}
.closing .tag{display:block;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:26px;}
.closing h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;color:#F7F5F0;margin:0 auto;max-width:20ch;
  font-size:clamp(29px,5.2vw,56px);font-weight:700;line-height:1.14;letter-spacing:-.02em;}
.closing p{color:#C9C7C2;max-width:60ch;margin:34px auto 0;font-size:15.5px;}
.closing .takeaway{margin-top:56px;}
.closing .takeaway strong{display:block;color:#fff;font-size:14px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;}
.closing .takeaway p{margin-top:0;max-width:48ch;}

/* The original leaves a deliberate gulf between the hero and the first section —
   the gradient ends and nothing happens for a while. That pause is the effect. */
section.wrap#work{padding-top:200px;}


/* --- 4. Automotive: more air between chapters --------------------------------
   Scoped to the page that asked for it rather than applied to .cs-block globally,
   which would also move the other two case studies. Only the gap between blocks
   changes — card padding, heading-to-paragraph spacing, image ratios and grids
   are untouched. */
@media (max-width:1024px){ :root{ --sec-gap:56px; } }
@media (max-width:640px){  :root{ --sec-gap:44px; } }

.page-automotive .cs-block{padding:var(--sec-gap) 0;}


/* --- 5. Financial: the two visuals stacked in the left column ----------------
   A flex column rather than extra margins on the images, so both keep the same
   width, the gap between them is declared once, and the existing .motion grid
   keeps its own responsive behaviour untouched. */
.motion-visuals{display:flex;flex-direction:column;gap:34px;}
.motion-visuals img{width:100%;height:auto;display:block;border-radius:3px;}