/* Case-study pages. Same direction as the rest of the site: black ground, small quiet type,
   iridescent aqua / turquoise / violet used as the "stage" that every image sits on. */

html.case-html, body.case-page { height: auto; overflow: auto; overflow-x: hidden; }
.case-page > header { position: absolute; }              /* scrolls away with the page */
.case-page main { position: static; inset: auto; }

:root {
  --pad: var(--gutter, 16px);
  --text: #d9d9d9;
  --rule: #262626;
}
.c-article { padding: 0 var(--pad); }
.c-article > * { max-width: 1800px; margin-inline: auto; }

/* ---------- iridescent stages (aqua / turquoise / violet) ---------- */
.tone-0, .tone-1, .tone-2, .tone-3 { position: relative; isolation: isolate; }
.tone-0 { background:
  radial-gradient(circle at 12% 18%, hsl(180 100% 88% / .75), transparent 38%),
  radial-gradient(circle at 88% 82%, hsl(275 85% 40% / .5), transparent 50%),
  radial-gradient(circle at 72% 22%, hsl(176 95% 70% / .7), transparent 55%),
  linear-gradient(140deg, hsl(188 90% 62%), hsl(208 85% 60%)); }
.tone-1 { background:
  radial-gradient(circle at 80% 15%, hsl(290 100% 88% / .7), transparent 40%),
  radial-gradient(circle at 15% 85%, hsl(268 85% 38% / .55), transparent 50%),
  radial-gradient(circle at 30% 30%, hsl(184 95% 68% / .55), transparent 50%),
  linear-gradient(140deg, hsl(268 75% 58%), hsl(288 70% 60%)); }
.tone-2 { background:
  radial-gradient(circle at 20% 80%, hsl(180 100% 86% / .65), transparent 42%),
  radial-gradient(circle at 85% 20%, hsl(282 90% 78% / .6), transparent 48%),
  radial-gradient(circle at 55% 50%, hsl(272 85% 36% / .45), transparent 52%),
  linear-gradient(160deg, hsl(184 90% 62%), hsl(232 80% 62%) 55%, hsl(275 75% 62%)); }
.tone-3 { background:
  radial-gradient(circle at 90% 90%, hsl(290 95% 84% / .6), transparent 42%),
  radial-gradient(circle at 10% 10%, hsl(178 100% 90% / .7), transparent 40%),
  radial-gradient(circle at 45% 65%, hsl(262 85% 40% / .4), transparent 50%),
  linear-gradient(115deg, hsl(178 92% 58%) 0%, hsl(205 85% 62%) 38%, hsl(270 78% 60%) 70%, hsl(292 72% 66%) 100%); }
/* fine grain */
.tone-0::after, .tone-1::after, .tone-2::after, .tone-3::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* soft motion on every image stage: the colours drift slowly, and a faint light follows the cursor */
.tone-0, .tone-1, .tone-2, .tone-3 {
  background-size: 160% 160%; background-repeat: no-repeat;
  animation: stage-drift 28s ease-in-out infinite alternate;
}
.tone-1 { animation-duration: 34s; animation-direction: alternate-reverse; }
.tone-2 { animation-duration: 30s; animation-delay: -9s; }
.tone-3 { animation-duration: 38s; animation-direction: alternate-reverse; animation-delay: -14s; }
@keyframes stage-drift { from { background-position: 0% 20%; } to { background-position: 100% 80%; } }
.tone-0.off, .tone-1.off, .tone-2.off, .tone-3.off { animation-play-state: paused; }   /* stages off-screen stand still */
.tone-0::before, .tone-1::before, .tone-2::before, .tone-3::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  opacity: var(--glow, 0); transition: opacity .8s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), hsl(178 100% 96% / .62), hsl(190 100% 86% / .26) 24%, transparent 50%);
}
@media (prefers-reduced-motion: reduce) {
  .tone-0, .tone-1, .tone-2, .tone-3 { animation: none; background-size: 100% 100%; }
  .tone-0::before, .tone-1::before, .tone-2::before, .tone-3::before { display: none; }
}

/* ---------- hero ---------- */
.c-hero { padding-top: clamp(110px, 16vh, 170px); }
.c-top { display: flex; justify-content: space-between; gap: var(--pad); color: var(--dim); }
.c-top a { color: var(--fg); }
.c-top a:hover { color: var(--dim); }
.c-title {
  font: 500 clamp(52px, 11.5vw, 210px)/.9 var(--font); letter-spacing: -.055em; margin: clamp(28px, 6vh, 64px) 0 clamp(24px, 4vh, 44px);
  text-wrap: balance;
}
.c-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; justify-content: space-between; }
.c-tags { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--dim); }
.c-live { color: var(--fg); border-bottom: 1px solid currentColor; }
.c-live:hover { color: var(--dim); }
.c-summary { font-size: clamp(18px, 2vw, 30px); line-height: 1.22; letter-spacing: -.02em; max-width: 34em; margin: clamp(28px, 5vh, 56px) 0 clamp(36px, 7vh, 80px); }

/* ---------- images on iridescent stages ---------- */
.c-fig { margin: 0; padding: clamp(14px, 4.5vw, 72px); display: block; overflow: hidden; }
.c-fig > img, .c-frame img, .c-card-media img, .c-slide img { display: block; width: 100%; height: auto; }
.c-fig > img, .c-frame, .c-card-media img, .c-slide img { box-shadow: 0 30px 70px rgba(10, 10, 60, .35), 0 6px 16px rgba(10, 10, 60, .2); }
.c-cover { padding: clamp(18px, 6vw, 110px); }
.c-cover > img { max-height: 78vh; width: auto; margin: 0 auto; max-width: 100%; }
.c-frame { max-height: min(78vh, 900px); overflow-y: auto; overflow-x: hidden; background: #fff; scrollbar-width: thin; scrollbar-color: #6a5cff #ffffff40; outline-offset: 4px; }
.c-frame:focus-visible { outline: 2px solid #fff; }
.c-frame::-webkit-scrollbar { width: 8px; }
.c-frame::-webkit-scrollbar-thumb { background: linear-gradient(#3ff5e0, #a56bff); border-radius: 8px; }
.c-media { display: grid; gap: var(--pad); margin-top: var(--pad); }
.c-mobile { max-width: 340px; padding: clamp(14px, 3vw, 36px); }
.c-mobile > img { border-radius: 18px; }

/* ---------- sections ---------- */
.c-stage, .c-showcase, .c-pages { padding-top: clamp(80px, 16vh, 200px); }
.c-stage, .c-showcase, .c-pages, .c-details { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--pad); }
.c-label { grid-column: 1; color: var(--dim); margin: 0 0 1.2em; }
.c-content { grid-column: 2 / span 3; max-width: 68em; }
.c-content h2 {
  font: 500 clamp(28px, 4.2vw, 68px)/1.02 var(--font); letter-spacing: -.04em; margin: 0 0 .6em; text-wrap: balance; max-width: 16em;
}
.c-content p, .c-conclusion p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--text); max-width: 46em; margin: 0 0 1.1em; }
.c-extra { color: var(--dim) !important; }
.c-k { color: var(--dim); font-size: 13px; margin: 0 0 .5em; }
.c-decision { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); margin-top: clamp(28px, 5vh, 56px); padding-top: 18px; border-top: 1px solid var(--rule); }
.c-decision p { margin: 0; }
.c-dec { font-size: clamp(18px, 1.7vw, 26px) !important; line-height: 1.2 !important; letter-spacing: -.02em; color: var(--fg) !important; }
.c-media, .c-gallery, .c-cards, .c-pagelist, .c-conclusion { grid-column: 1 / -1; }
.c-media, .c-gallery { margin-top: clamp(36px, 6vh, 72px); }
.c-stage--gallery { padding-top: clamp(40px, 8vh, 100px); }

/* gallery: swipeable strip with counter */
.c-gallery { position: relative; }
.c-track { display: flex; gap: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.c-track::-webkit-scrollbar { display: none; }
.c-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.c-slide { flex: 0 0 min(100%, 1100px); margin: 0; scroll-snap-align: start; padding: clamp(14px, 4vw, 64px); display: grid; place-items: center; }
.c-slide img { max-height: 76vh; width: auto; max-width: 100%; margin: 0 auto; pointer-events: none; }
.c-gnav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.c-gnav button { font: inherit; color: var(--fg); background: none; border: 1px solid #3a3a3a; border-radius: 99px; padding: 7px 18px; cursor: pointer; transition: border-color .2s, color .2s; }
.c-gnav button:hover { border-color: #fff; }
.c-count { color: var(--dim); } .c-count b { color: var(--fg); font-weight: 500; }

/* showcase cards */
.c-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pad); margin-top: clamp(36px, 6vh, 72px); align-items: start; }
.c-card { margin: 0; }
.c-card-media { padding: clamp(14px, 3vw, 44px); display: grid; place-items: center; }
.c-card figcaption { padding: 14px 0 0; display: grid; gap: 4px; }
.c-card figcaption strong { font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.c-card figcaption p { margin: 0; color: var(--text); max-width: 34em; }
.c-url { color: var(--dim); }

/* page-by-page */
.c-pagelist { list-style: none; padding: 0; margin: clamp(36px, 6vh, 72px) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 5vw, 64px) var(--pad); }
.c-page .c-fig { padding: clamp(12px, 2.6vw, 40px); }
.c-page .c-frame { max-height: min(62vh, 640px); }
.c-page-cap { padding-top: 14px; display: grid; grid-template-columns: 2.2em 1fr; column-gap: 6px; }
.c-num { color: var(--dim); }
.c-page-cap h3 { font: 500 17px/1.2 var(--font); letter-spacing: -.01em; margin: 0 0 4px; }
.c-page-cap p { grid-column: 2; margin: 0; color: var(--text); max-width: 34em; }
.c-conclusion { margin-top: clamp(60px, 12vh, 150px); max-width: 1000px; }
.c-conclusion h3 { font: 500 clamp(26px, 3.6vw, 56px)/1.03 var(--font); letter-spacing: -.04em; margin: 0 0 .5em; text-wrap: balance; }

/* details + next */
.c-details { padding-top: clamp(80px, 16vh, 200px); row-gap: 40px; align-items: start; }
.c-details > div:first-child { grid-column: 1 / span 2; }
.c-details > div:nth-child(2) { grid-column: 3 / span 2; }
.c-list { list-style: none; padding: 0; margin: 0; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.25; letter-spacing: -.02em; }
.c-next { padding: clamp(80px, 16vh, 200px) 0 clamp(48px, 8vh, 96px); }
.c-next a { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 20px; transition: color .3s; }
.c-next strong { font: 500 clamp(40px, 9vw, 160px)/.95 var(--font); letter-spacing: -.05em; }
.c-next a:hover { color: var(--dim); }
.c-arrow { font-size: clamp(24px, 3vw, 44px); }

/* reveal on scroll (only when JS is running, so the content is always readable without it) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .c-stage, .c-showcase, .c-pages, .c-details { grid-template-columns: 1fr; }
  .c-label, .c-content, .c-details > div:first-child, .c-details > div:nth-child(2) { grid-column: 1; }
  .c-cards, .c-pagelist, .c-decision { grid-template-columns: 1fr; }
  .c-top { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* the cover is the landing point for the tile that was clicked */
.c-cover { view-transition-name: case-cover; }
/* hero text rises in after the cover has landed */
@keyframes c-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.c-top, .c-title, .c-facts, .c-summary { animation: c-rise 1s cubic-bezier(.2,.7,.2,1) both; }
.c-title { animation-delay: .25s; } .c-facts { animation-delay: .4s; } .c-summary { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .c-top, .c-title, .c-facts, .c-summary { animation: none; } }

/* landing page (Website design in Kent): project links, offer list, FAQ */
.c-list a { border-bottom: 1px solid currentColor; transition: color .3s; } .c-list a:hover { color: var(--dim); }
.k-list, .k-offer { grid-column: 1 / -1; list-style: none; padding: 0; margin: clamp(28px, 5vh, 56px) 0 0; }
.k-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--pad); }
.k-list li, .k-offer li { border-top: 1px solid var(--rule); }
.k-list a { display: grid; gap: 6px; padding: 20px 0 26px; }
.k-list strong { font: 500 clamp(22px, 2.6vw, 38px)/1.08 var(--font); letter-spacing: -.035em; transition: color .3s; }
.k-list span, .k-offer span { color: var(--text); max-width: 34em; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; }
.k-list a:hover strong { color: var(--dim); }
.k-offer li { display: grid; grid-template-columns: minmax(9em, 1fr) 3fr; gap: var(--pad); padding: 16px 0 18px; }
.k-offer strong { font-weight: 500; }
.k-faq { margin: 0; }
.k-faq dt { font: 500 clamp(18px, 1.7vw, 26px)/1.2 var(--font); letter-spacing: -.02em; margin: 1.8em 0 .5em; }
.k-faq dt:first-child { margin-top: .4em; }
.k-faq dd { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--text); max-width: 46em; }
@media (max-width: 900px) { .k-list { grid-template-columns: 1fr; } .k-offer li { grid-template-columns: 1fr; gap: 4px; } }

/* Kent page hero: the home page's cut-out letters over the live animation, inside one section */
.k-hero { position: relative; isolation: isolate; height: min(50vh, 500px); min-height: 300px; margin: clamp(14px, 2.5vh, 26px) 0 clamp(16px, 3vh, 28px); overflow: hidden; background: #000; }
.k-hero .cutout { padding: 0; }
body[data-fluid] .k-hero #trail { opacity: 1; mix-blend-mode: screen; }
html.no-fluid .k-hero .fluid-base { opacity: .85; }
.c-hero--k { padding-top: clamp(84px, 11vh, 112px); }
.c-hero--k .c-facts { margin-top: 0; }
.c-hero--k .c-summary { margin: clamp(14px, 2.5vh, 24px) 0 clamp(36px, 7vh, 80px); }
@media (max-width: 720px) { .k-hero { height: min(58vh, 500px); } }

.c-mocknote { color: var(--dim); font-size: .8em; margin: clamp(40px, 8vh, 80px) 0 0; max-width: 60ch; }
.c-mocknote + .c-next { padding-top: clamp(28px, 5vh, 56px); }