/* ==========================================================================
   Visuolab — case study pages (work/*.html)
   ========================================================================== */
.work-hero{padding:calc(var(--nav-h) + clamp(24px,5vh,56px)) 0 clamp(32px,5vh,48px)}
.crumbs{display:flex;gap:10px;font-size:13px;color:var(--muted);letter-spacing:.02em}
.crumbs a:hover{color:#fff}
.work-hero .wrap{display:grid;justify-items:center;text-align:center}          /* centred case headline */
.work-hero .h1{margin-top:22px;max-width:20ch;font-size:clamp(36px,4.8vw,72px)}
.work-hero .meta{width:100%;text-align:left}
.meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 24px;margin:clamp(32px,5vh,56px) 0 0;padding-top:24px;border-top:1px solid var(--line)}
.meta dt{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:8px 0 0;font-weight:500;font-size:15px;line-height:1.45;color:var(--ink)}

.cover-wrap{padding:clamp(8px,2vh,24px) 0 0}
.cover{border-radius:24px;overflow:hidden;aspect-ratio:2/1;background:#0d0d10;box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}

.overview{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.55fr);grid-template-rows:auto 1fr;gap:0 clamp(32px,5vw,80px)}
/* the left column held only the eyebrow, leaving the row looking empty.
   Label and title stack in column one; the copy spans both rows in column two. */
.overview>.label{grid-column:1;grid-row:1;position:sticky;top:calc(var(--nav-h) + 24px)}
/* type comes from .h2 so it sits at the same size as the page's other headings */
.overview .overview-title{grid-column:1;grid-row:2;align-self:start;
  position:sticky;top:calc(var(--nav-h) + 48px);margin:18px 0 0;max-width:14ch}
.overview .overview-title em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em}
.overview>div{grid-column:2;grid-row:1 / span 2}
.overview>div{justify-self:end;width:min(100%,68ch)}                 /* copy sits against the right edge, in line with the stats */
.overview h3{font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.overview .block p{margin-top:12px;font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.overview .block+.block{margin-top:clamp(32px,5vh,48px)}
.overview .tags{margin-top:20px}

.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gallery figure{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#0d0d10;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:10px;font-size:13px;
  background:rgba(4,8,30,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* process phases */
/* the phases read as a run of steps on a rail, not four loose boxes.
   --rail-y is the rail's distance from the top of the grid and --rail-gap the
   space reserved above the cards; the node is positioned off both, so the dot
   stays centred on the line whatever either is set to. */
.phases{--rail-y:16px;--rail-gap:38px;--node:10px;
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  margin-top:clamp(40px,6vh,64px);padding-top:var(--rail-gap)}
.phases::before{content:"";position:absolute;left:0;right:0;top:var(--rail-y);height:1px;background:rgba(255,255,255,.14)}
/* title and step chip share the top row; duration and description below */
.phase{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:14px;
  padding:28px 26px 30px;border-radius:20px;
  background:var(--light-panel);border:1px solid rgba(10,10,14,.08);color:var(--light-ink);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.phase:hover{transform:translateY(-5px);box-shadow:0 26px 54px -22px rgba(0,0,0,.85)}
/* the node that sits the card on the rail */
.phase::before{content:"";position:absolute;left:26px;
  top:calc(var(--rail-y) - var(--rail-gap) - (var(--node) / 2) + .5px);
  width:var(--node);height:var(--node);border-radius:50%;
  background:var(--brand-2);box-shadow:0 0 0 4px rgba(56,38,199,.32)}
.phase .n{grid-column:2;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-style:normal;
  font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;color:var(--brand);background:rgba(56,38,199,.09);border:1px solid rgba(56,38,199,.2)}
.phase .n::before{content:"Step"}
.phase h3{grid-column:1;grid-row:1;margin:0;font-size:20px;font-weight:500;letter-spacing:-.025em}
.phase .dur{grid-column:1/-1;grid-row:2;justify-self:start;margin-top:8px;font-size:12.5px;color:var(--brand)}
.phase p{grid-column:1/-1;grid-row:3;margin-top:14px;padding-top:16px;border-top:1px solid rgba(10,10,14,.09);
  font-size:14.5px;line-height:1.6;color:#54545f;text-wrap:pretty}

/* highlights: numbered cards, copy anchored to the bottom, a brand glow in the corner */
.highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(32px,5vh,48px)}
.hl{position:relative;overflow:hidden;min-height:clamp(240px,26vw,320px);display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  padding:28px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:#111114;
  transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s}
.hl::before{content:"";position:absolute;right:-22%;top:-38%;width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(56,38,199,.7),rgba(56,38,199,0) 65%);filter:blur(28px);opacity:.75;transition:opacity .5s,transform .8s var(--ease-out)}
.hl::after{content:"";position:absolute;left:28px;right:28px;top:72px;height:1px;background:rgba(255,255,255,.08)}
.hl .n{position:absolute;top:24px;left:28px;font-family:var(--serif);font-style:italic;font-size:30px;line-height:1;color:rgba(255,255,255,.6)}
.hl b{position:relative;display:block;font-size:clamp(22px,1.8vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.15;max-width:16ch;text-wrap:balance}
.hl p{position:relative;margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.hl:hover{transform:translateY(-4px);border-color:rgba(122,104,255,.45);box-shadow:0 30px 60px -40px rgba(56,38,199,.6)}
.hl:hover::before{opacity:1;transform:scale(1.15)}

/* wide image */
.wide-sec{padding:0}
.wide-img{margin:0;position:relative;border-radius:24px;overflow:hidden;aspect-ratio:21/9;background:#0d0d10}
.wide-img img{width:100%;height:100%;object-fit:cover;display:block}
.wide-img figcaption{position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:10px;font-size:13px;background:rgba(4,8,30,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* deliverables + team */
.dt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px clamp(32px,6vw,110px)}
.dt ul{list-style:none;margin:20px 0 0;padding:0}
.dt li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:15.5px}
.dt li:last-child{border-bottom:1px solid var(--line)}
.dt li .what{font-weight:500}
.dt li span:not(.what){color:var(--muted);font-size:14px;text-align:right}
.dt .note{margin-top:16px;font-size:14px;color:var(--muted)}

/* more work */
.more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vh,40px)}
.more a{display:block;color:inherit}
.more .img{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#0d0d10}
.more img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease-out)}
.more a:hover img{transform:scale(1.04)}
.more b{display:block;margin-top:14px;font-size:18px;font-weight:500;letter-spacing:-.015em;transition:color .3s}
.more a:hover b{color:var(--brand-2)}
.more span{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;border-radius:28px;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line-2);padding:clamp(24px,3vw,44px);color:inherit;transition:transform .5s var(--ease-out),border-color .4s}
.next:hover{transform:translateY(-4px);border-color:var(--line)}
.next h3{margin-top:14px;font-size:clamp(28px,3.4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1}
.next h3 em{font-family:var(--serif);font-style:italic;font-weight:400;display:block;font-size:.8em;margin-top:6px;color:var(--ink-2)}
.next .arrow-link{display:inline-flex}
.next .img{aspect-ratio:4/3;border-radius:18px;overflow:hidden}
.next img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease-out)}
.next:hover img{transform:scale(1.04)}

@media (max-width:1100px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .highlights,.dt,.more{grid-template-columns:1fr}
  .wide-img{aspect-ratio:4/3}
  .overview,.gallery,.next,.about-grid{grid-template-columns:1fr}
  .overview>.label,.overview .overview-title{position:static;grid-column:1}
  .overview>div{grid-column:1;grid-row:auto}
  .overview .overview-title{max-width:none;margin-bottom:24px}
  .overview>div{justify-self:start;width:auto}
  .cover{aspect-ratio:4/3}
}

/* ==========================================================================
   Works index (works.html)
   ========================================================================== */
.works-hero{padding:calc(var(--nav-h) + clamp(24px,5vh,56px)) 0 clamp(24px,4vh,40px)}
.works-hero .aurora .s1{--rot:-14deg;left:-24%;top:-20%;width:90%;height:110%;
  background:radial-gradient(ellipse at 50% 50%,rgba(56,38,199,.55) 0%,rgba(40,26,150,.32) 40%,transparent 68%)}
.works-hero .wrap{display:grid;justify-items:center;text-align:center}          /* centred, like the homepage cases head */
.works-hero .aurora .s1{left:5%;right:auto;width:90%}
.works-hero .h1{margin-top:18px;max-width:14ch;font-size:clamp(44px,6.4vw,96px)}
.works-hero .lead{margin-top:22px;max-width:52ch}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(28px,4vh,40px)}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);
  background:none;color:var(--ink-2);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}
.chip i{font-style:normal;font-size:12px;color:var(--muted);transition:color .3s}
.chip:hover{border-color:var(--brand-2);color:#fff}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.is-on i{color:rgba(255,255,255,.7)}

.works-grid-sec{padding:clamp(16px,3vh,32px) 0 0}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,40px) clamp(16px,2vw,32px)}
.wcard{display:block;color:inherit;transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.wcard:nth-child(even){transform:translateY(clamp(24px,5vh,72px))}   /* Halo Lab-style staggered columns */
.wcard.is-hidden{display:none}
.wcard-media{position:relative;aspect-ratio:16/11;border-radius:22px;overflow:hidden;background:#0d0d10;box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.wcard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-out)}
.wcard:hover .wcard-media img{transform:scale(1.04)}
.wcard .case-open{opacity:0;transform:translate(6px,-6px);transition:opacity .3s,transform .4s var(--ease-out)}
.wcard:hover .case-open{opacity:1;transform:none}
.wcard-body{padding:20px 4px 0}
.wcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.wcard-top h2{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.wcard-top .year{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted)}
.wcard .type{margin-top:6px;font-size:14px;color:var(--muted)}
.wcard .tags{margin-top:14px}
.works-empty{padding:48px 0;text-align:center;color:var(--muted)}
/* dark variant of the homepage review carousel */
.works-reviews{background:none;padding-top:clamp(88px,12vh,160px);margin-top:clamp(120px,16vh,200px)}
.works-reviews .reviews-head .h2{max-width:16ch}
.works-reviews .rating{color:var(--muted)}
.works-reviews .rating b{color:#fff}
.works-reviews .round-btn{background:#fff;color:#0b0b0e}
/* white cards on the dark section, same as the service pages */
.works-reviews .review-card{background:#fff;border:0;box-shadow:0 24px 50px -30px rgba(0,0,0,.6);color:var(--light-ink)}
.works-reviews .review-card .logo{border-color:var(--light-line);color:var(--light-ink)}
.works-reviews .review-card .mark{color:var(--brand)}
.works-reviews .review-card .who{border-left-color:var(--light-line)}
.works-reviews .review-card .who span{color:var(--light-muted)}

@media (max-width:900px){
  .works-grid{grid-template-columns:1fr}
  .wcard:nth-child(even){transform:none}
}

/* ---- case body (Halo Lab's project pages): an "about" opener, then the work
   told as numbered chapters that expand, each carrying its deliverables ----- */
/* the opener reads as one held statement: a quiet label on the left, the whole
   story set large on the right, the client's name in the serif italic ------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);
  gap:22px clamp(32px,5vw,72px);align-items:start}
.about-grid>.label{margin:0;padding-top:.6em}
.about-lead{margin:0;font-size:clamp(22px,2.35vw,34px);line-height:1.34;
  letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
.about-lead em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em}
.about-project .stats{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
/* same as the service hero: first stat on the left edge, second on the centre line, last on the right edge */
@media (min-width:761px){.about-project .stat:nth-child(2){justify-self:center}.about-project .stat:last-child{justify-self:end}}
@media (max-width:760px){.about-project .stats{grid-template-columns:1fr}}
.chapter{border:1px solid var(--line);border-radius:20px;background:var(--bg-2);
  transition:border-color .4s,background-color .4s}
.chapter[open]{border-color:rgba(122,104,255,.34);background:#141417}
.chapter summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:18px clamp(16px,2vw,28px);padding:22px clamp(20px,2.2vw,30px);cursor:pointer;list-style:none}
.chapter summary::-webkit-details-marker{display:none}
.chapter summary:hover b{color:var(--brand-2)}
.chapter .n{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--brand-2);line-height:1}
.chapter summary b{font-size:clamp(19px,1.7vw,23px);font-weight:500;letter-spacing:-.025em;transition:color .3s}
.chapter .dur{font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;color:#c9c0ff;background:rgba(56,38,199,.18);border:1px solid rgba(122,104,255,.28);white-space:nowrap}
/* the open/close mark, drawn rather than shipped as an icon */
.chapter .mark{position:relative;width:20px;height:20px}
.chapter .mark::before,.chapter .mark::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1.6px;background:var(--ink-2);transform:translate(-50%,-50%);transition:transform .35s var(--ease-out),opacity .3s}
.chapter .mark::after{transform:translate(-50%,-50%) rotate(90deg)}
.chapter[open] .mark::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
.deliverables .label{margin-bottom:12px}
.deliverables ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.deliverables li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-top:1px solid var(--line-2);font-size:14px;color:var(--muted)}
.deliverables li:last-child{border-bottom:1px solid var(--line-2)}
.deliverables .what{color:var(--ink);font-weight:500}

/* chips shared by the Team and Technologies panels */
@media (max-width:900px){
  .chapter summary{grid-template-columns:auto minmax(0,1fr) auto;gap:12px 16px}
  .chapter .dur{grid-column:2;justify-self:start}
}

/* ---- workstream layout: title on the left, the substance on the right ----- */
.ws{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.9fr);
  grid-template-rows:auto auto 1fr;gap:0 clamp(32px,5vw,96px);align-items:start}
/* label and title stick together as one block while the body scrolls past */
.ws-head{grid-column:1;grid-row:1 / span 3;align-self:start;position:sticky;top:calc(var(--nav-h) + 48px)}
.ws-title{margin:16px 0 0;max-width:11ch;
  font-size:clamp(30px,3.2vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.ws-title em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em}
.ws-body{grid-column:2;grid-row:1 / span 3;min-width:0}

/* a plain row for the Team / Technologies panels — no number, no duration */

/* ---- results: outcomes as a checked list, the way the reference states them */
.results{list-style:none;margin:0;padding:0;display:grid;gap:20px;max-width:62ch}
.results li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.results svg{width:21px;height:21px;margin-top:3px;stroke:var(--brand-2);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.results span{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.results b{font-weight:500;color:var(--ink)}
@media (max-width:900px){
  .ws{grid-template-columns:1fr}
  .ws-head{grid-row:1;position:static}
  .ws-title{max-width:none;margin-bottom:22px}
  .ws-body{grid-column:1;grid-row:2}
}

/* case hero facts: first item on the left edge, last on the right edge, the
   middle three spaced evenly between (like the stats rows) */
@media (min-width:901px){.work-hero .meta{grid-template-columns:repeat(5,auto);justify-content:space-between}}
.work-hero .meta dt{color:rgba(255,255,255,.62)}   /* the labels sit on the bright part of the beam */   /* no intro paragraph above: the first chapter lines up with the label */

/* ---- case "How it went" cards on white, like the service pages' white cards ---- */
.chapter{background:#fff;border-color:rgba(10,10,14,.08);color:var(--light-ink)}
.chapter[open]{background:#fff;border-color:rgba(56,38,199,.32);box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.chapter summary:hover b{color:var(--brand)}
.chapter .n{color:var(--brand)}
.chapter .dur{color:var(--brand);background:rgba(56,38,199,.08);border-color:rgba(56,38,199,.2)}
.chapter .mark::before,.chapter .mark::after{background:var(--light-ink)}
.chapter .deliverables .label{color:var(--light-muted)}
.chapter .deliverables li{border-top-color:rgba(10,10,14,.08);color:var(--light-muted)}
.chapter .deliverables li:last-child{border-bottom-color:rgba(10,10,14,.08)}
.chapter .deliverables .what{color:var(--light-ink)}
.chapter summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:20px}

/* ---- "What changed": results as a card grid that fills the column, in the
   same white cards as the phases above. Numbers on the top row, the three
   highlights (with their check marks) below. ---- */
.results-sec .results{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.results-sec .results li{display:flex;flex-direction:column;gap:14px;padding:26px 26px 28px;border-radius:20px;
  background:#fff;border:1px solid rgba(10,10,14,.08);color:var(--light-ink)}
.results-sec .results svg{margin:0;stroke:var(--brand)}
.results-sec .results span{font-size:16px;line-height:1.55;color:#54545f}
.results-sec .results b{color:var(--light-ink)}
.results-sec .results li.is-num svg{display:none}
.results-sec .results li.is-num b{display:block;margin-bottom:10px;font-size:clamp(36px,3.2vw,52px);font-weight:500;
  letter-spacing:-.04em;line-height:1;color:var(--brand)}
@media (max-width:1100px){.results-sec .results{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.results-sec .results{grid-template-columns:1fr}}

/* ---- "Challenges": same white card grid as "Results" — number, the problem, what made it hard ---- */
.challenges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.challenges li{display:flex;flex-direction:column;gap:10px;padding:26px 26px 28px;border-radius:20px;
  background:#fff;border:1px solid rgba(10,10,14,.08);color:var(--light-ink)}
.challenges .n{margin-bottom:8px;font-family:var(--serif);font-style:italic;font-size:32px;line-height:1;color:var(--brand)}
.challenges h3{margin:0;font-size:clamp(18px,1.4vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--light-ink);text-wrap:balance}
.challenges p{margin:0;font-size:16px;line-height:1.55;color:#54545f;text-wrap:pretty}
@media (max-width:1100px){.challenges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.challenges{grid-template-columns:1fr}}
.rhythm .works-hero{padding-bottom:80px}   /* filters sit closer to the projects they filter, as on the blog */
/* testimonial glow held in the upper part of the section so it fades before the CTA */
.works-reviews.glow-right .aurora .s1{top:-14%;height:96%}
.works-reviews.glow-right .aurora .s2{top:10%;height:46%}