/* ---------- BRAND FONTS -------------------------------------------------
   Alterglam (display) and Articulat CF (body) are licensed fonts. Drop the
   web files into assets/fonts/ and uncomment this block. See the README there.

@font-face{font-family:"Alterglam";src:url("fonts/alterglam.woff2") format("woff2");
  font-weight:400 900;font-display:swap}
@font-face{font-family:"Articulat CF";src:url("fonts/articulat-cf-regular.woff2") format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"Articulat CF";src:url("fonts/articulat-cf-medium.woff2") format("woff2");
  font-weight:500 600;font-display:swap}
@font-face{font-family:"Articulat CF";src:url("fonts/articulat-cf-bold.woff2") format("woff2");
  font-weight:700 900;font-display:swap}

/* Everything stays selectable */
h1, h2, h3, h4, h5, h6, p, li, .display, .copy { -webkit-user-select: text; user-select: text; }
/* Decorative counters and glyphs are noise when copied */
.eyebrow, .num, .plus, .scroll, .pnum { -webkit-user-select: none; user-select: none; }

/* ---------- 2. AMBIENT ATMOSPHERE --------------------------------------- */

/* Scroll progress — the brand gradient as a loading bar for the whole page */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--grad); z-index:200; pointer-events:none;
  will-change:transform;
}

/* Aurora — slow drifting colour fields behind dark sections */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 92%);
  mask-image:radial-gradient(ellipse at center,#000 55%,transparent 92%)}
.aurora b{
  position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5;
  animation:drift 46s ease-in-out infinite;
}
.aurora b:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:radial-gradient(circle,rgba(249,58,172,.55),transparent 68%)}
.aurora b:nth-child(2){width:38vw;height:38vw;right:-8vw;top:22vh;background:radial-gradient(circle,rgba(57,202,255,.45),transparent 68%);animation-delay:-15s}
.aurora b:nth-child(3){width:42vw;height:42vw;left:28vw;bottom:-18vw;background:radial-gradient(circle,rgba(139,79,216,.5),transparent 68%);animation-delay:-30s}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6vw,-4vh,0) scale(1.14)}
  66%{transform:translate3d(-5vw,5vh,0) scale(.9)}
}
.hero > .container, .dark > .container, .final .inner, .page-hero .container{position:relative;z-index:2}

/* Hairline gradient rule that draws itself in when a section arrives */
.rule{height:1px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 2.2s cubic-bezier(.16,.84,.24,1)}
.rule.visible{transform:scaleX(1)}

/* ---------- 3. SCROLL CHOREOGRAPHY -------------------------------------- */

/* Base reveal is already in the page; these are the extra variants */
.r-up,.r-left,.r-right,.r-clip,.r-scale,.r-blur{
  opacity:0; will-change:transform,opacity;
  transition:opacity 1.6s cubic-bezier(.16,.84,.24,1), transform 1.6s cubic-bezier(.16,.84,.24,1),
             clip-path 1.9s cubic-bezier(.16,.84,.24,1), filter 1.6s ease;
}
.r-up{transform:translateY(42px)}
.r-left{transform:translateX(-46px)}
.r-right{transform:translateX(46px)}
.r-scale{transform:scale(.93)}
.r-blur{filter:blur(14px);transform:translateY(20px)}
.r-clip{clip-path:inset(0 0 100% 0);opacity:1}
.r-up.visible,.r-left.visible,.r-right.visible,.r-scale.visible{opacity:1;transform:none}
.r-blur.visible{opacity:1;filter:blur(0);transform:none}
.r-clip.visible{clip-path:inset(0 0 0 0)}

/* Stagger — children arrive in sequence rather than all at once */
[data-stagger] > *{opacity:0;transform:translateY(38px);
  transition:opacity 1.5s cubic-bezier(.16,.84,.24,1),transform 1.5s cubic-bezier(.16,.84,.24,1)}
[data-stagger].visible > *{opacity:1;transform:none}
[data-stagger].visible > *:nth-child(1){transition-delay:0.10s}
[data-stagger].visible > *:nth-child(2){transition-delay:0.20s}
[data-stagger].visible > *:nth-child(3){transition-delay:0.30s}
[data-stagger].visible > *:nth-child(4){transition-delay:0.40s}
[data-stagger].visible > *:nth-child(5){transition-delay:0.50s}
[data-stagger].visible > *:nth-child(6){transition-delay:0.60s}
[data-stagger].visible > *:nth-child(7){transition-delay:0.70s}
[data-stagger].visible > *:nth-child(8){transition-delay:0.80s}
[data-stagger].visible > *:nth-child(n+9){transition-delay:.90s}

/* Headline words rise from their own baseline, one after another */
/* Headline words.
   Three attempts to tune a clip window all ended with something cropped,
   because any mask tight enough to hide the parked word is also tight enough
   to shave a glyph somewhere. So there is no mask at all now: words fade and
   rise into place. Nothing is ever clipped, on any axis, at any size.
   Text stays fully selectable — only the pointer is held to an arrow. */
.word-wrap{display:inline-block}
.word{display:inline-block;opacity:0;transform:translateY(.34em);
  transition:opacity 1.15s cubic-bezier(.16,.84,.24,1),
             transform 1.15s cubic-bezier(.16,.84,.24,1)}
.visible .word,.word.in{opacity:1;transform:none}

/* Parallax targets get their transform from JS */
[data-parallax]{will-change:transform}
.tilt::after,.client-logo-card::after,.contact-tile::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:3;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left 1.4s cubic-bezier(.16,.84,.24,1);pointer-events:none;
}
.tilt:hover::after,.client-logo-card:hover::after,.contact-tile:hover::after{left:130%}

/* 3D tilt container */
.tilt-wrap{perspective:1000px}
.tilt{transition:transform .8s cubic-bezier(.16,.84,.24,1),box-shadow .8s ease;
  transform-style:preserve-3d;will-change:transform}

/* "Why" rows — a gradient bar grows in from the left instead of a colour swap */
.why{position:relative;overflow:hidden}
.why::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
  transform:scaleY(0);transition:transform .85s cubic-bezier(.16,.84,.24,1);
}
.why:hover::before{transform:scaleY(1)}   /* origin comes from --why-origin */
.why h3{transition:padding-left .8s cubic-bezier(.16,.84,.24,1),background .5s ease}

/* Service rows — number flips to gradient, arrow slides */
.service .num{transition:color .6s ease,transform .6s ease}
.service:hover .num{transform:translateX(4px)}
.service .plus{transition:transform .85s cubic-bezier(.16,.84,.24,1)}
.service:hover .plus{transform:rotate(90deg) scale(1.15)}

/* Buttons — brand-gradient fill wipes up from the bottom */
.btn,.nav-cta{position:relative;overflow:hidden;z-index:1}
.btn::before,.nav-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);
  transform:translateY(101%);transition:transform .8s cubic-bezier(.16,.84,.24,1);
}
.btn:hover::before,.nav-cta:hover::before{transform:translateY(0)}
.btn:hover,.nav-cta:hover{color:var(--ink)}
.btn.alt:hover{border-color:transparent}

/* Counter digits are tabular so the layout doesn't jitter while counting */
.stat b,.metric{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* Back to top */
.to-top{
  position:fixed;right:24px;bottom:24px;width:50px;height:50px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  display:grid;place-items:center;z-index:120;font-size:1.1rem;
  opacity:0;transform:translateY(18px) scale(.85);pointer-events:none;
  transition:.8s cubic-bezier(.16,.84,.24,1);box-shadow:0 14px 34px rgba(41,37,106,.16);
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}

/* ---------- CONTACT DETAILS (replaces the enquiry form) ------------------ */
.contact-details{display:grid;gap:16px}
.contact-tile{
  display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:20px;
  padding:26px 28px;background:var(--white);border:1px solid var(--line);border-radius:4px;
  transition:transform .8s cubic-bezier(.16,.84,.24,1),box-shadow .8s ease,border-color .8s ease;
}
.contact-tile:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:0 22px 50px rgba(41,37,106,.13)}
.contact-tile .ct-icon{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:1.2rem;
}
.contact-tile > span:nth-child(2){display:block;min-width:0}
.contact-tile .ct-label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.contact-tile .contact-value{display:block;font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.6rem);
  letter-spacing:-.03em;font-weight:800;word-break:break-word}
.contact-tile .ct-go{font-size:1.3rem;opacity:.3;transition:.7s}
.contact-tile:hover .ct-go{opacity:1;transform:translateX(5px)}
.contact-note{color:var(--muted);line-height:1.7;margin-top:26px;font-size:.95rem}
@media(max-width:560px){
  .contact-tile{grid-template-columns:44px 1fr;padding:20px;gap:14px}
  .contact-tile .ct-icon{width:44px;height:44px;font-size:1rem}
  .contact-tile .ct-go{display:none}
}

/* ---------- CASE STUDY / LEGAL PAGE HELPERS ----------------------------- */
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.case-meta div{background:var(--paper);padding:24px}
.case-meta small{display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.case-meta b{font-family:var(--display);font-size:1.15rem;letter-spacing:-.03em}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.result{border-top:1px solid var(--line);padding-top:20px}
.result b{font-family:var(--display);font-size:clamp(2.6rem,5vw,4rem);letter-spacing:-.06em;display:block}
.result span{color:var(--muted)}
.prose{max-width:760px}
.prose h2{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.04em;
  margin:52px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted);line-height:1.8}
.prose ul{padding-left:20px}
.prose li{margin-bottom:10px}
@media(max-width:850px){
  .case-meta{grid-template-columns:1fr 1fr}
  .result-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .grain,.beam,.aurora{display:none}
  .r-up,.r-left,.r-right,.r-clip,.r-scale,.r-blur,[data-stagger] > *{
    opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}
  .word{opacity:1 !important;transform:none !important}
  }

/* ---------- NO-JS FAILSAFE ---------------------------------------------- */
/* The reveal classes start at opacity 0. If the motion script does not run,
   the page must still be fully readable. */
.no-js .reveal,.no-js .r-up,.no-js .r-left,.no-js .r-right,
.no-js .r-scale,.no-js .r-blur,.no-js [data-stagger] > *{
  opacity:1 !important;transform:none !important;filter:none !important}
.no-js .r-clip{clip-path:none !important}
.no-js .no-js .rule{transform:scaleX(1)}

/* ---------- BRAND LOGO --------------------------------------------------- */
/* Wordmark is part of the logo artwork, so the text label is hidden from
   sight but kept for screen readers and search engines. */

/* Client name on hover.
   The old version was a hard navy bar that slid up and covered the logo, in
   the body font at a size too small to read. Now the card lifts, a gradient
   hairline draws across the base, and the name settles in underneath in the
   display face — part of the card rather than a label stuck over it. */
.client-logo-card{flex-direction:column;gap:0;padding-bottom:6px}
.client-logo-card .client-name{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:4;
  font-family:var(--display);font-weight:700;
  font-size:clamp(.62rem,1.05vw,.78rem);letter-spacing:-.005em;line-height:1.2;
  text-align:center;color:var(--ink);
  opacity:0;transform:translateY(9px);
  transition:opacity .55s cubic-bezier(.16,.84,.24,1),transform .55s cubic-bezier(.16,.84,.24,1);
  white-space:normal;
}
.client-logo-card:hover .client-name{opacity:1;transform:none}
/* Gradient hairline drawing in along the base of the card */
.client-logo-card::before{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;z-index:4;
  background:var(--grad);border-radius:2px;
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .6s cubic-bezier(.16,.84,.24,1);
}
.client-logo-card:hover::before{transform:scaleX(1)}
/* Logo lifts to make room instead of being covered */
.client-logo-card img{transition:transform .6s cubic-bezier(.16,.84,.24,1)}
.client-logo-card:hover img{transform:translateY(-13px) scale(.94)}
@media(max-width:850px){
  .client-logo-card .client-name{font-size:.56rem;left:6px;right:6px;bottom:8px}
  .client-logo-card:hover img{transform:translateY(-10px) scale(.95)}
}

/* ==========================================================================
   PACING OVERRIDES for the original page animations
   These keyframes ship in each page's inline <style>. Nothing is removed —
   only slowed, so the ambient motion reads as drift rather than activity.
   ========================================================================== */
.reveal{transition:1.6s cubic-bezier(.16,.84,.24,1)}
.links a{animation-duration:1.1s}
.service{transition:.7s cubic-bezier(.16,.84,.24,1)}
.service p{transition:.65s cubic-bezier(.16,.84,.24,1)}
.client{transition:.55s ease}
.client-logo-card{transition:transform .8s cubic-bezier(.16,.84,.24,1),box-shadow .8s ease}
.faq-a{transition:grid-template-rows .8s cubic-bezier(.16,.84,.24,1)}
.faq-icon{transition:transform .7s cubic-bezier(.16,.84,.24,1)}
.btn,.nav-cta{transition:.55s cubic-bezier(.16,.84,.24,1)}
nav{transition:.75s cubic-bezier(.16,.84,.24,1)}

/* ==========================================================================
   SECTION BALANCE
   The two-column sections paired a very large display heading against a short
   right column, and bottom-aligned them, so the columns started at wildly
   different heights and read as unrelated. Now: both columns start on the
   same line, the heading is capped so it breaks over fewer lines, and the
   ratio is closer to even.
   ========================================================================== */
.intro{grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.intro h2{font-size:clamp(2.6rem,5vw,4.6rem);line-height:.94}
.intro .copy{font-size:1.02rem;max-width:none}
.intro .stats{margin-top:38px}
.intro .stat b{font-size:2.8rem}

.content-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.content-grid h2.display{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:.94}
.content-grid .copy{font-size:1.02rem}

/* Heading + supporting line share a baseline instead of hanging apart */
.section-head{align-items:start;gap:48px}
.section-head h2{font-size:clamp(2.6rem,5.2vw,5rem);line-height:.94;max-width:16ch}
.section-head p{max-width:34ch;padding-top:.5em}

/* The closing panel headline was large enough to clip on narrow viewports */
.final h2{font-size:clamp(3.2rem,8.5vw,8rem);line-height:.92}
.page-hero h1{font-size:clamp(3rem,7.5vw,7.5rem);line-height:.94}
.hero h1{font-size:clamp(3rem,7.5vw,8rem);line-height:.94}

@media(max-width:850px){
  .intro,.content-grid{grid-template-columns:1fr;gap:34px}
  .section-head{gap:20px}
  .section-head h2,.intro h2,.content-grid h2.display{max-width:none}
  .section-head p{padding-top:0}
}

/* ---------- CONTACT ICONS ------------------------------------------------ */
.contact-tile .ct-icon{overflow:visible}
.contact-tile .ct-icon svg{width:23px;height:23px;display:block}
.contact-tile .ct-icon{transition:transform .7s cubic-bezier(.16,.84,.24,1)}
.contact-tile:hover .ct-icon{transform:scale(1.08) rotate(-6deg)}

/* ==========================================================================
   FOOTER
   Was static. Now it assembles: a gradient rule draws across the top, the
   columns lift in sequence, and the links carry the same underline sweep as
   the header so both ends of the page behave the same way.
   ========================================================================== */
footer{position:relative;overflow:hidden}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.8s cubic-bezier(.16,.84,.24,1);
}
footer.visible::before{transform:scaleX(1)}
/* Slow drifting colour field, same family as the section auroras */
footer::after{
  content:"";position:absolute;right:-14%;bottom:-55%;width:58%;height:150%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(249,58,172,.16),transparent 66%);
  animation:drift 52s ease-in-out infinite;
}
footer .container{position:relative;z-index:2}

.foot > div{opacity:0;transform:translateY(34px);
  transition:opacity 1.3s cubic-bezier(.16,.84,.24,1),transform 1.3s cubic-bezier(.16,.84,.24,1)}
footer.visible .foot > div{opacity:1;transform:none}
footer.visible .foot > div:nth-child(1){transition-delay:.06s}
footer.visible .foot > div:nth-child(2){transition-delay:.18s}
footer.visible .foot > div:nth-child(3){transition-delay:.30s}
footer.visible .foot > div:nth-child(4){transition-delay:.42s}

.foot a{position:relative;display:block;width:-moz-fit-content;width:fit-content;
  transition:opacity .5s ease,transform .5s ease}
.foot a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:var(--grad);transform:scaleX(0);transform-origin:right;
  transition:transform .6s cubic-bezier(.16,.84,.24,1);
}
.foot a:hover{opacity:1;transform:translateX(4px)}
.foot a:hover::after{transform:scaleX(1);transform-origin:left}
.foot h4{position:relative;padding-bottom:10px}
.foot h4::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:1px;
  background:var(--grad);opacity:.7}

.copyright{opacity:0;transform:translateY(18px);
  transition:opacity 1.2s ease .55s,transform 1.2s cubic-bezier(.16,.84,.24,1) .55s}
footer.visible .copyright{opacity:.55;transform:none}

footer footer 
@media (prefers-reduced-motion: reduce){
  nav{animation:none}
  .foot > div,.copyright{opacity:1 !important;transform:none !important}
  footer::before{transform:scaleX(1)}
  footer::after{animation:none}
}

@media(max-width:850px){
  }
/* The heading sits in the same measure as every other section head */
.showcase .section-head{margin-bottom:48px}

@media(max-width:850px){
  .creative{min-height:300px;padding:20px}
  .showcase .strip{-webkit-mask-image:none;mask-image:none}
}

/* Intrinsic width/height attributes are there to reserve space and avoid
   layout shift; CSS still drives the rendered size. */
.brand .logo,footer @media(max-width:520px){}
.client-logo-card img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

/* ---------- WHY ROWS ------------------------------------------------------
   The bar grows from whichever edge the pointer entered by, and collapses
   toward the edge it leaves by, so it always travels with the mouse instead
   of always running downward. JS sets --why-origin.                        */
.why::before{transform-origin:50% var(--why-origin,100%)}
.why:hover::before{transform:scaleY(1)}

/* ---------- HEADER LOGO ---------------------------------------------------
   The white and colour lockups were swapped with display, which restarted
   the entrance keyframe and made the logo appear to slide in from the side.
   They are stacked and cross-faded instead, so only the colour changes as
   the hero scrolls past.                                                   */
.scrolled /* The entrance animation belongs to the wrapper, not the swapping images,
   so it runs once on load and never again */

/* ---------- FOOTER BRAND ------------------------------------------------
   The horizontal lockup left a tall gap under it in the first column. The
   vertical lockup fills that space and gives the column a proper anchor. */
footer .brand{display:block}
footer footer .foot > div:first-child p{margin-top:20px}
@media(max-width:850px){footer }

/* ==========================================================================
   WORK GALLERY
   ========================================================================== */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:12px}
.roster-card{
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:22px 18px 18px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  transition:transform .7s cubic-bezier(.16,.84,.24,1),box-shadow .7s ease,border-color .7s ease;
}
.roster-card:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 26px 56px rgba(41,37,106,.14)}
.roster-card img{width:100%;max-width:150px;height:78px;object-fit:contain}
.roster-word{font-family:var(--display);font-size:1.15rem;letter-spacing:-.03em;
  height:78px;display:grid;place-items:center;color:var(--ink)}
.roster-info{display:block;line-height:1.35}
.roster-info b{display:block;font-family:var(--display);font-size:.98rem;letter-spacing:-.02em}
.roster-info i{display:block;font-style:normal;font-size:.72rem;color:var(--muted);margin-top:3px}
.roster-info em{display:inline-block;font-style:normal;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;margin-top:9px;padding:4px 10px;border-radius:99px;
  background:var(--grad);color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.chip{
  font:inherit;font-size:.8rem;padding:9px 17px;border-radius:99px;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  transition:.5s cubic-bezier(.16,.84,.24,1);position:relative;overflow:hidden;
}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip.is-on{color:#fff;border-color:transparent;background:var(--grad)}

.work-gallery{columns:4;column-gap:16px}
@media(max-width:1100px){.work-gallery{columns:3}}
@media(max-width:760px){.work-gallery{columns:2;column-gap:12px}}
@media(max-width:420px){.work-gallery{columns:1}}
.tile{
  display:block;width:100%;padding:0;border:0;background:none;position:relative;
  break-inside:avoid;margin:0 0 16px;border-radius:12px;overflow:hidden;
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,.84,.24,1),transform .9s cubic-bezier(.16,.84,.24,1),
             box-shadow .6s ease;
}
.tile.in{opacity:1;transform:none}
.tile.hide{display:none}
.tile img{width:100%;height:auto;display:block;border-radius:12px;
  transition:transform 1.1s cubic-bezier(.16,.84,.24,1),filter .6s ease}
.tile:hover{box-shadow:0 24px 54px rgba(41,37,106,.22)}
.tile:hover img{transform:scale(1.05)}
.tile-meta{
  position:absolute;left:0;right:0;bottom:0;padding:34px 15px 13px;text-align:left;
  background:linear-gradient(to top,rgba(12,10,45,.9),transparent);
  color:#fff;opacity:0;transform:translateY(10px);transition:.6s cubic-bezier(.16,.84,.24,1);
}
.tile:hover .tile-meta{opacity:1;transform:none}
.tile-meta b{display:block;font-family:var(--display);font-size:.92rem;letter-spacing:-.02em}
.tile-meta i{font-style:normal;font-size:.68rem;opacity:.75}
.tile-video .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:1.2rem;padding-left:4px;
  box-shadow:0 12px 34px rgba(12,10,45,.45);transition:transform .6s cubic-bezier(.16,.84,.24,1);
}
.tile-video:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.gallery-empty{text-align:center;color:var(--muted);padding:60px 0}

/* ---- Lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(8,6,34,.94);
  display:grid;place-items:center;padding:34px;
  opacity:0;transition:opacity .45s ease}
.lightbox.open{opacity:1}
.lightbox[hidden]{display:none}
.lb-stage{margin:0;max-width:min(1100px,92vw);max-height:86vh;display:flex;
  flex-direction:column;align-items:center;gap:14px}
.lb-stage img,.lb-stage video{max-width:100%;max-height:76vh;width:auto;height:auto;
  border-radius:10px;display:block;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-stage figcaption{color:#fff;text-align:center}
.lb-stage figcaption b{display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em}
.lb-stage figcaption span{font-size:.78rem;opacity:.6}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.3rem;
  display:grid;place-items:center;transition:.4s;backdrop-filter:blur(8px)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--grad);border-color:transparent}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}
@media(max-width:700px){
  .lb-prev{left:10px}.lb-next{right:10px}
  .lb-close{top:12px;right:12px}
  .lightbox{padding:14px}
}

/* ==========================================================================
   ABOUT PAGE
   The page was five near-identical stacked text blocks. These give it some
   rhythm: a stat band, an image collage, and card grids that break up the
   run of paragraphs.
   ========================================================================== */
.about-band{padding:0}
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-cell{background:var(--paper);padding:40px 26px;text-align:center}
.band-cell b{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:-.05em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.band-cell span{display:block;margin-top:10px;font-size:.8rem;color:var(--muted);line-height:1.4}

.collage-sec{background:var(--paper)}
.collage{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cg-item{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 16px 40px rgba(41,37,106,.10)}
.cg-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.16,.84,.24,1)}
.cg-item:hover img{transform:scale(1.06)}
/* First two run taller so the grid is not a flat row of equal boxes */
.cg-item:nth-child(1),.cg-item:nth-child(2){grid-column:span 2;aspect-ratio:1/1}
.cg-item:nth-child(3){grid-column:span 2;aspect-ratio:1/1}
.cg-item:nth-child(n+4){grid-column:span 2}
.collage-cta{margin-top:34px;display:inline-block}

.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pcard{position:relative;padding:34px 30px 30px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  transition:transform .7s cubic-bezier(.16,.84,.24,1),background .7s ease,border-color .7s ease;
  overflow:hidden}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .7s cubic-bezier(.16,.84,.24,1)}
.pcard:hover{transform:translateY(-5px);background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.2)}
.pcard:hover::before{transform:scaleY(1)}
.pnum{display:block;font-family:var(--display);font-size:.82rem;letter-spacing:.14em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px}
.pcard h3{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.03em;
  margin:0 0 10px;color:#fff}
.pcard p{color:rgba(255,255,255,.66);line-height:1.7;margin:0;font-size:.95rem}

.svc-pills{display:flex;flex-wrap:wrap;gap:12px}
.svc-pill{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;
  border:1px solid var(--line);font-family:var(--display);font-weight:600;
  font-size:clamp(.86rem,1.4vw,1rem);letter-spacing:-.01em;color:var(--ink);
  transition:.55s cubic-bezier(.16,.84,.24,1);position:relative;overflow:hidden;z-index:1}
.svc-pill span{opacity:.35;transition:.55s cubic-bezier(.16,.84,.24,1)}
.svc-pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);
  transform:translateY(101%);transition:transform .55s cubic-bezier(.16,.84,.24,1)}
.svc-pill:hover{border-color:transparent;color:#fff}
.svc-pill:hover::before{transform:translateY(0)}
.svc-pill:hover span{opacity:1;transform:translateX(4px)}

@media(max-width:900px){
  .band{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr}
  .collage{grid-template-columns:repeat(4,1fr)}
  .cg-item:nth-child(1),.cg-item:nth-child(2),.cg-item:nth-child(3){grid-column:span 2}
}
@media(max-width:560px){
  .collage{grid-template-columns:repeat(2,1fr);gap:10px}
  .cg-item,.cg-item:nth-child(n){grid-column:span 1;aspect-ratio:4/5}
  .band-cell{padding:28px 14px}
}