/* Premium layer: textures, dark sections, scroll motion, pointer effects.
   Light theme only. Dark sections remap the colour tokens locally so every
   component inside them adapts without extra rules. */
:root { --grid: rgb(var(--c-ink) / .04); --grid-size: 72px; }
html.lenis { scroll-behavior: auto; }

/* Film grain: fixed and non-interactive so it never repaints on scroll */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: var(--z-progress); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), var(--orange-300)); pointer-events: none; }

/* Header hides while reading down, returns on scroll up */
.header { transition: transform .5s var(--ease), border-color .3s, background-color .3s; }
.header.hide { transform: translateY(-100%); }

/* Textures */
.tex { position: relative; isolation: isolate; }
.tex::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tex-grid::before {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size); background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, var(--black) 35%, transparent 78%); mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, var(--black) 35%, transparent 78%);
}
.tex-dots::before {
  background-image: radial-gradient(circle, rgb(var(--c-ink) / .14) 1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--black) 20%, var(--black) 70%, transparent); mask-image: linear-gradient(180deg, transparent, var(--black) 20%, var(--black) 70%, transparent);
}
.tex-lines::before {
  background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / 6) 100%; background-position: center 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--black) 25%, var(--black) 75%, transparent); mask-image: linear-gradient(180deg, transparent, var(--black) 25%, var(--black) 75%, transparent);
}
.tex-warm { background: linear-gradient(180deg, var(--bg), var(--orange-50) 40%, var(--bg)); }
.glow { position: absolute; z-index: -1; pointer-events: none; border-radius: var(--radius-round); filter: blur(60px); }
.glow-a { width: 560px; height: 560px; right: -140px; top: -200px; background: radial-gradient(circle, rgb(var(--c-accent) / .35), transparent 65%); }
.glow-b { width: 520px; height: 520px; left: -220px; bottom: -260px; background: radial-gradient(circle, rgb(var(--c-accent) / .07), transparent 65%); }

/* Hero: orange grid cells light up around the cursor */
.hero { isolation: isolate; }
.hero-spot {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background-image: linear-gradient(rgb(var(--c-accent) / .45) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-accent) / .45) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size); background-position: center -1px;
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--black), transparent 75%); mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--black), transparent 75%);
}
.hero.lit .hero-spot { opacity: 1; }

/* Dark sections */
.sec-dark {
  --ink: var(--mist-100); --ink-2: var(--mist-300); --muted: var(--mist-500); --line: rgb(var(--c-white) / .1); --surface: rgb(var(--c-white) / .04); --surface-2: rgb(var(--c-white) / .07);
  --accent-strong: var(--orange-400); --on-accent: var(--navy-950); --grid: rgb(var(--c-white) / .04); --shadow: 0 20px 50px -20px rgb(var(--c-black) / .55);
  background: var(--navy); color: var(--ink); position: relative; isolation: isolate; overflow: hidden;
}
.sec-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size); background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, var(--black) 40%, transparent 85%); mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, var(--black) 40%, transparent 85%);
}
.sec-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(700px circle at var(--gx, 85%) var(--gy, 0%), rgb(var(--c-accent) / .14), transparent 60%),
              radial-gradient(900px circle at 0% 100%, rgb(var(--c-blue) / .35), transparent 60%);
}
.sec-dark .btn-ghost { background: transparent; border-color: rgb(var(--c-white) / .2); color: var(--white); }
.sec-dark .btn-ghost:hover { border-color: var(--white); }
.sec-dark .icon-btn { background: transparent; border-color: rgb(var(--c-white) / .2); color: var(--white); }
.sec-dark .icon-btn:hover { border-color: var(--white); }
.sec-dark .ind-tab[aria-selected="true"] { box-shadow: none; background: rgb(var(--c-white) / .07); }
.sec-dark .ind-panel { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sec-dark .hcard .hc-img { border-color: transparent; }
.sec-dark .spec.hl { background: rgb(var(--c-orange-400) / .14); }
.sec-dark .crumbs, .sec-dark .crumbs a { color: var(--muted); }
.sec-dark .crumbs a:hover { color: var(--white); }
.sec-dark .q-add { background: transparent; color: var(--ink); }
.sec-dark .q-add.added { background: var(--white); color: var(--navy); border-color: var(--white); }
.sec-dark .chip { background: rgb(var(--c-white) / .07); }
.sec-dark .num b sup { color: var(--accent); }
.page-hero.sec-dark { padding-block: clamp(56px, 7vw, 104px); }

/* Huge outline word drifting behind a dark section */
.ghost-word {
  position: absolute; z-index: -1; left: 0; bottom: -.16em; white-space: nowrap; pointer-events: none; user-select: none;
  font: 700 clamp(7rem, 19vw, 18rem)/1 var(--font-sans); letter-spacing: var(--tracking-tightest);
  color: transparent; -webkit-text-stroke: 1px rgb(var(--c-white) / .1);
}

/* CTA and footer pick up the grid */
.cta-panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(var(--c-white) / .1) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-white) / .1) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: linear-gradient(110deg, transparent 30%, var(--black) 90%); mask-image: linear-gradient(110deg, transparent 30%, var(--black) 90%);
}
.footer { position: relative; isolation: isolate; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(var(--c-white) / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-white) / .04) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: linear-gradient(180deg, var(--black), transparent 85%); mask-image: linear-gradient(180deg, var(--black), transparent 85%);
}
.footer-word { display: block; margin: var(--sp-56) 0 -.14em; font: 700 clamp(5rem, 24vw, 22rem)/.9 var(--font-sans); letter-spacing: var(--tracking-tightest); color: transparent; -webkit-text-stroke: 1px rgb(var(--c-white) / .1); white-space: nowrap; user-select: none; text-align: center; }

/* Pointer spotlight on cards */
.spot { position: relative; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--c-accent) / .1), transparent 55%);
}
.spot:hover::after { opacity: 1; }
.sec-dark .spot::after { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--c-white) / .07), transparent 55%); }

/* Rail drag */
.rail { cursor: grab; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.dragging * { pointer-events: none; user-select: none; }

/* Hero intro (runs once on load) */
.hero-copy > * { animation: none !important; }
.js .hero-copy > :not(.display) { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .hero-copy.in > :not(.display) { opacity: 1; transform: none; }
.js .hero-copy.in > .lead { transition-delay: .45s; }
.js .hero-copy.in > .hero-ctas { transition-delay: .6s; }

@media (prefers-reduced-motion: no-preference) {
  /* Reveal: rise and unblur */
  .js .reveal { filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); }
  .js .reveal.in { filter: none; }

  /* Word-by-word headline reveal */
  .js .words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
  .js .words .w > span { display: inline-block; transform: translateY(110%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--wi) * 55ms + var(--d, 0s)); }
  .js .words.in .w > span { transform: none; }
  .js .reveal.words { opacity: 1; transform: none; filter: none; }

  /* Image wipe */
  .js .wipe { clip-path: inset(100% 0 0 0 round 24px); transition: clip-path 1.3s var(--ease); }
  .js .wipe > img { transform: scale(1.15); transition: transform 1.8s var(--ease); }
  .js .wipe.in { clip-path: inset(0 0 0 0 round 24px); }
  .js .wipe.in > img { transform: scale(1); }

  /* Staggered children */
  .js .stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .45s var(--ease), border-color .3s; transition-delay: calc(var(--i, 0) * 70ms); }
  .js .stagger.in > * { opacity: 1; transform: none; }
  .js .stagger.in > *:hover { transition-delay: 0s; }
  .js .stagger.in > .tile:hover, .js .stagger.in > .hcard:hover { transform: translateY(-4px); }

  /* Parallax layers: JS writes --py / --px */
  [data-parallax] { will-change: transform; transform: translate3d(var(--px, 0), var(--py, 0), 0); }
  .hero-media .hm-main img { animation: none; transform: scale(1.1) translate3d(0, var(--py, 0), 0); will-change: transform; }
  .band-bg img { transform: translate3d(0, var(--py, 0), 0) scale(1.12); will-change: transform; }

  .glow-a { animation: drift 16s ease-in-out infinite alternate; }
  @keyframes drift { to { transform: translate(-80px, 60px) scale(1.12); } }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-copy > :not(.display) { opacity: 1; transform: none; }
}

/* Photo band: heavier dark overlay so the capability text reads cleanly */
.band::after {
  background:
    linear-gradient(0deg, rgb(var(--c-scrim) / .95) 0%, rgb(var(--c-scrim) / .55) 45%, rgb(var(--c-scrim) / .28) 100%),
    linear-gradient(100deg, rgb(var(--c-scrim) / .86) 0%, rgb(var(--c-scrim) / .65) 50%, rgb(var(--c-scrim) / .45) 100%);
}
.band-grid p { color: var(--mist-300); }
.band-grid h3 { color: var(--white); }

/* Client review card */
.review {
  position: relative; margin: 0; display: grid; grid-template-columns: minmax(240px, 340px) 1fr; overflow: hidden; isolation: isolate;
  background: var(--surface); border: var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow);
}
.review-photo { position: relative; min-height: 360px; background: var(--surface-2); }
.review-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.review-body { padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-24); }
.review-tag { display: inline-flex; align-items: center; gap: var(--sp-8); align-self: flex-start; padding: var(--sp-6) var(--sp-14); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.review-tag i { font-size: var(--fs-base); }
.review blockquote { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: var(--fw-medium); max-width: 26ch; }
.review-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-16); padding-top: var(--sp-24); border-top: var(--border); }
.review-meta b { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.review-meta span { color: var(--muted); font-size: var(--fs-sm); }
.review-mark { position: absolute; right: clamp(20px, 4vw, 56px); top: -.12em; z-index: -1; font: 700 clamp(10rem, 18vw, 16rem)/1 var(--font-sans); color: var(--accent-soft); pointer-events: none; }
@media (max-width: 760px) {
  .review { grid-template-columns: 1fr; }
  .review-photo { min-height: 0; aspect-ratio: 4/3; }
}

/* CTA: three moves from enquiry to production */
.cta-panel { row-gap: var(--sp-40); }
.cta-steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--sp-32) 0 0; border-top: 1px solid rgb(var(--c-white) / .2); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-28); }
.cta-steps li { display: flex; gap: var(--sp-14); align-items: flex-start; }
.cta-steps .cs-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center; background: rgb(var(--c-white) / .14); border: 1px solid rgb(var(--c-white) / .2); font-size: var(--fs-xl); }
.cta-steps b { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.cta-steps span { color: rgb(var(--c-white) / .86); font-size: var(--fs-sm); }
@media (max-width: 860px) { .cta-steps { grid-template-columns: 1fr; gap: var(--sp-16); } }

/* Spacing system
   Section rhythm: 104px max between blocks. Two light blocks in a row share one
   gap instead of stacking both paddings. Dark and photo sections keep their own. */
.page-hero.sec-dark { padding-block: clamp(48px, 6vw, 88px); }
:is(.section, .section-tight, .page-hero):not(.sec-dark):not(.band) + :is(.section, .section-tight):not(.sec-dark):not(.band) { padding-top: 0; }
.page-hero + section:not([class]) { padding-top: 0; }
.ind-tab { transition: background-color .35s var(--ease), color .3s, border-color .3s, box-shadow .35s var(--ease); }

/* Hero layers move with parallax instead of keyframes */
.hero-media .hm-card, .hero-media .hm-stat { animation: none !important; }

/* Four-up stats row */
.num-grid.num-4 { grid-template-columns: repeat(4, 1fr); }
.num-grid.num-4 .num { padding: var(--sp-28) var(--sp-24) var(--sp-8); border-right: 0; border-top: 0; }
.num-grid.num-4 .num + .num { border-left: var(--border); }
.num-grid.num-4 .num:first-child { padding-left: 0; }
@media (max-width: 760px) {
  .num-grid.num-4 { grid-template-columns: 1fr 1fr; }
  .num-grid.num-4 .num { padding-left: 0 !important; border-left: 0 !important; }
  .num-grid.num-4 .num:nth-child(even) { padding-left: var(--sp-24) !important; border-left: var(--border) !important; }
  .num-grid.num-4 .num:nth-child(n+3) { border-top: var(--border); }
  .ghost-word { font-size: 6rem; }
}