:root {
  --black: #000000;
  --bg-a: #0a0a0a;
  --bg-b: #111111;
  --surface-1: #0b0b0b;
  --surface-2: #161616;
  --border: #272727;
  --silver: #C0C0C0;
  --silver-bright: #E6E6E6;
  /* Soft "live" green, used only for the small status dots */
  --signal: #8FE3B0;
  --white: #FFFFFF;
  --text-muted: #9b9b9b;
  --error: #ff6b6b;
  --radius: 4px;
  --nav-height: 76px;
  /* Fluid rhythm between major sections: 88px on small screens up to 140px on large ones */
  --space-section: clamp(5.5rem, 4.5rem + 6vw, 8.75rem);
  /* Fixed, smaller lead-in used right after a divider, where less top space is needed */
  --space-section-tight: 5.5rem;
  /* Elegant serif used ONLY for hero headlines (the big H1 on each page's
     hero/page-hero section): everything else on the site (section titles,
     nav, buttons, card text, body copy) is Montserrat. Cormorant Garamond
     was tested against the suggested alternative, Playfair Display, and
     kept: Playfair's thicker, higher-contrast strokes read as heavier and
     more geometric, competing with the chrome gradient fill for attention.
     Cormorant Garamond's finer, more classical letterforms let the
     metallic gradient itself carry the "premium" feeling instead, and
     pair more calmly with the bold Montserrat used everywhere else. */
  --font-hero: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  /* Faint SVG noise texture, reused as a background layer on every hero-style
     section (homepage hero, interior page heroes, 404) so they all share the
     same subtle atmosphere without repeating this long data URI each time. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

/* Anchor targets scrolled to via the "Let's Talk" / nav links and
   scrollIntoView() in script.js. Both #contact and #projects already carry
   140px of their own top padding from --space-section (the shared rhythm
   used between every major section), which comfortably clears the 77px
   sticky header on its own — scroll-padding-top above already handles the
   header for everything else. An earlier version of this rule added an
   extra 100px of scroll-margin-top on top of that, which double-counted
   the clearance: the section's outer edge landed correctly below the
   header, but its own 140px padding then pushed the actual heading down to
   roughly the middle of the viewport instead of near the top. Setting it
   to 0 explicitly (rather than just deleting the rule) documents that this
   was a deliberate fix, not an oversight. #top isn't included since it's
   the very first element on the page — there's nothing above it to clear. */
#contact,
#projects {
  scroll-margin-top: 0px;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Skip link: hidden by sliding it up by its OWN height (translateY(-100%))
   instead of a fixed "top: -40px". The old fixed offset only worked if the
   link was shorter than 40px — at ~42px tall, a 2px sliver of its silver
   background poked into the top-left corner of the navbar on every page.
   A percentage transform is always exactly the element's height, so it
   clears the viewport no matter the font size, padding or line-height.
   On keyboard focus it slides back down to y:0. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--silver);
  color: var(--black);
  padding: 8px 14px;
  font-weight: 600;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 24px rgba(192, 192, 192, 0.12);
}

/* h2 (section titles) and h3 (card/feature subheadings) stay on Montserrat,
   the same body face as everything else — only the hero H1 on each page
   gets the serif treatment below, so that's the one deliberate accent
   rather than every heading competing for attention. */
h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Serif headline accent, now only on 404/thank-you (.error-content).
   The homepage hero and interior page titles switched to wide uppercase
   Montserrat in the Oct 2026 redesign. See --font-hero above for which
   serif this resolves to. */
.error-content h1 {
  font-family: var(--font-hero);
  font-weight: 700;
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }

/* Keyboard focus ring: consistent silver ring for accessibility.
   :focus-visible only shows for keyboard/tab navigation, not mouse clicks,
   so it doesn't change how buttons and links look when clicked with a mouse. */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.45);
}

img { max-width: 100%; display: block; }

/* Standard "visually hidden" pattern: keeps an element readable by screen
   readers (for correct heading hierarchy, form labels, etc.) while removing
   it from the visual layout entirely. display:none would hide it from
   screen readers too, which is why this uses clipping instead. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#scroll-sentinel {
  position: absolute;
  top: 0;
  width: 1px;
  height: 40px;
  pointer-events: none;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Chrome gradient text: white-to-silver, used on every headline across the
   site (homepage hero, section titles, interior page heroes, 404 numeral,
   thank-you checkmark) so the metallic accent stays consistent wherever
   it appears. */
.hero-headline,
.section-title,
.page-hero h1,
.error-number,
.confirm-icon {
  background: linear-gradient(90deg, #FFFFFF 0%, #C0C0C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.section-copy {
  color: var(--text-muted);
  max-width: 620px;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 18px 42px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Shared by both the hero "Let's Talk" link and the contact form Submit button,
   so their hover/active animation is always identical by definition.
   position:relative + overflow:hidden lets the ::after "chrome sweep" below
   clip neatly to the button's own rounded shape. */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--silver);
  color: var(--black);
  border-radius: 6px;
  border: none;
  padding: 14px 32px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary:hover {
  transform: scale(1.02);
  background: var(--silver-bright);
  box-shadow: 0 0 28px rgba(192, 192, 192, 0.45), 0 16px 40px rgba(192, 192, 192, 0.25);
}

.btn-primary:active { transform: scale(0.99); }

.full-width { width: 100%; text-align: center; border: none; }

.btn-outline-project {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-top: 22px;
  padding: 11px 24px;
  border: none;
  background: var(--silver);
  color: var(--black);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-outline-project:hover {
  background: var(--silver-bright);
  transform: scale(1.02);
}

/* Chrome sweep: a soft diagonal gleam that slides across on hover, like light
   catching a brushed metal surface. Runs on transform only (compositor-cheap)
   and only while hovered, so it costs nothing at rest. */
.btn-primary::after,
.btn-outline-project::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
  transform: skewX(-20deg) translateX(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-outline-project:hover::after {
  transform: skewX(-20deg) translateX(260%);
}

.btn-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: background 0.35s ease, border-color 0.35s ease;
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.65);
  border-bottom: 1px solid rgba(192, 192, 192, 0.2);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

/* Logo + tagline stack vertically: both are images now, cropped from the
   same source mark (logo.PNG) with a transparent background, so they sit
   together as one lockup without either one carrying a background box. */
.logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Navbar logo: a cropped, transparent version of the full mark with the
   mountain icon and tagline removed (name only) so the glass blur behind
   the navbar isn't blocked by a solid background box. Same image and size
   on mobile and desktop now — only a small bump at the desktop breakpoint
   below, since there's more room to work with. */
.logo-img {
  height: 30px;
  width: auto;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.logo-link:hover .logo-img {
  filter: brightness(1.2);
  transform: scale(1.03);
}

/* Tagline image: intentionally has no transition/hover rule at all, so it
   stays completely still even when the wordmark above it brightens and
   scales up on hover — the hover effect is a wordmark-only accent, not a
   whole-lockup animation. */
.logo-tagline-img {
  height: 9px;
  width: auto;
}

.nav-links { display: flex; align-items: center; gap: 36px; }

.nav-link {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  padding-bottom: 4px;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--silver);
  transition: width 0.25s ease;
}

.nav-link:hover::after { width: 100%; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 210;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile/tablet menu (redesigned Oct 2026): a full-screen frosted
   overlay. The header (logo + close button) stays on top of it because
   the header's z-index (200) is higher than the overlay's (190). Links
   are big, numbered (01, 02...) and cascade in one after another. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-height) + 32px) 32px 36px;
  counter-reset: menu;
  background:
    var(--grain) repeat left top/120px 120px,
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(192, 192, 192, 0.12), rgba(192, 192, 192, 0) 70%),
    rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

body.menu-open { overflow: hidden; }

.mobile-nav-link {
  counter-increment: menu;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(192, 192, 192, 0.14);
  color: var(--silver-bright);
  font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

/* Running number in front of each link */
.mobile-nav-link::before {
  content: counter(menu, decimal-leading-zero);
  flex: 0 0 2.4em;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.mobile-nav-link:hover,
.mobile-nav-link[aria-current="page"] { color: var(--white); }

/* Current page gets a glowing dot after its name */
.mobile-nav-link[aria-current="page"]::after {
  content: "";
  align-self: center;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
}

/* Status dots (page labels, demo box, current page in the phone menu):
   a soft green that glows in and out like a "live" light */
.hero-eyebrow::before,
.page-hero-eyebrow::before,
.demo-title::before,
.mobile-nav-link[aria-current="page"]::after {
  background: var(--signal);
  box-shadow: 0 0 8px rgba(143, 227, 176, 0.6);
  animation: signal-glow 2.6s ease-in-out infinite;
}

@keyframes signal-glow {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(143, 227, 176, 0.45); opacity: 0.85; }
  50% { box-shadow: 0 0 14px 3px rgba(143, 227, 176, 0.75); opacity: 1; }
}

.mobile-menu.open .mobile-nav-link,
.mobile-menu.open .mobile-menu-footer {
  opacity: 1;
  transform: none;
}

/* Cascade: each link arrives a little after the one above */
.mobile-menu.open .mobile-nav-link:nth-of-type(2) { transition-delay: 0.06s; }
.mobile-menu.open .mobile-nav-link:nth-of-type(3) { transition-delay: 0.12s; }
.mobile-menu.open .mobile-nav-link:nth-of-type(4) { transition-delay: 0.18s; }

/* Contact details pinned to the bottom of the overlay */
.mobile-menu-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 28px;
  color: var(--text-muted);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease 0.25s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.mobile-menu-footer a { color: var(--silver-bright); }
.mobile-menu-footer a:hover { color: var(--white); }

.mobile-menu-footer span {
  margin-top: 6px;
  color: var(--silver);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ============================================================
   HOMEPAGE HERO — "Ridge + Stats" (redesigned Oct 2026)
   Pure black with a silver mountain range (inline SVG in
   index.html) rising left to right to a glowing "Progress
   Matters" summit. On load the ridgelines draw themselves in,
   back to front, then the dotted route climbs to the summit.
   With a mouse, the layers drift at different speeds (parallax,
   script.js). A glass strip of key facts sits along the bottom.
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    var(--grain) repeat left top/120px 120px,
    radial-gradient(ellipse 50% 60% at 74% 40%, rgba(192, 192, 192, 0.10) 0%, rgba(192, 192, 192, 0) 70%),
    var(--black);
}

/* The SVG fills the hero and is anchored bottom-right ("xMaxYMax slice"
   in the HTML), so the summit stays on the right on any desktop size. */
.hero-ridges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Layers fade up in sequence, back to front (--i set per layer in the
   HTML). "translate" is used for the rise so it doesn't clash with the
   mouse parallax, which uses "transform". */
.ridge-layer {
  opacity: 0;
  animation: ridge-rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 0.18s);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mist bands between the mountain layers drift slowly side to side (in
   opposite directions, at different speeds) so the range feels alive */
.ridge-mist {
  opacity: 0.9;
  animation: mist-drift 26s ease-in-out infinite alternate;
}

.ridge-mist--low { animation-duration: 34s; animation-direction: alternate-reverse; }

@media (max-width: 860px), (hover: none) {
  .ridge-mist { animation: none; }
}

@keyframes mist-drift {
  from { transform: translateX(-120px); }
  to { transform: translateX(120px); }
}

/* Silver rim light along each ridge top, drawn in left to right */
.ridge-line {
  fill: none;
  stroke: url(#mt-rim);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ridge-draw 2.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(0.3s + var(--i) * 0.2s);
}

.ridge-route {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
  filter: url(#ridge-glow);
  opacity: 0.85;
}

/* The dotted route can't use the dash trick itself (it's already dashed),
   so a solid copy inside an SVG mask draws in and reveals it instead. */
.ridge-route-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 14;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ridge-draw 3.4s cubic-bezier(0.45, 0, 0.25, 1) 1.6s forwards;
}

.ridge-summit {
  opacity: 0;
  animation: ridge-fade 0.8s ease 4.6s forwards;
}

.summit-dot { fill: #fff; }

/* Location-pin pulse: two rings expand and fade from the summit on a
   loop, offset so there's always one travelling outwards. */
.summit-pulse {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: summit-pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.summit-pulse--late { animation-delay: 1.3s; }

.ridge-summit text {
  fill: var(--silver);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
}

@keyframes ridge-draw { to { stroke-dashoffset: 0; } }
@keyframes ridge-fade { to { opacity: 1; } }
@keyframes ridge-rise {
  from { opacity: 0; translate: 0 40px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes summit-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(5); opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-top: 64px;
  padding-bottom: 40px;
}

.hero-eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  color: var(--silver);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* The homepage H1 holds two lines: the small "Web Design in Redhill &
   Reigate" eyebrow and the big headline below it. */
.hero-title { margin: 0; }

/* Same wide uppercase Montserrat as the interior page titles */
.hero-headline {
  display: block;
  max-width: 13ch;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-sub {
  max-width: 470px;
  margin-top: 26px;
  color: #E6E6E6;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

/* Matching button heights (the outline button has a 1px border) */
.hero-actions .btn-primary { padding: 17px 34px; }
.hero-actions .btn-secondary { padding: 16px 34px; }

/* Glass facts strip */
.hero-stats-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 44px;
}

.hero-stats {
  position: relative;
  overflow: hidden;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 60%);
  backdrop-filter: blur(7px) saturate(1.3);
  -webkit-backdrop-filter: blur(7px) saturate(1.3);
  border: 1px solid rgba(192, 192, 192, 0.16);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 48px rgba(0, 0, 0, 0.4);
}

/* Chrome glint (v2): a bright point of light, like a comet, runs along the
   strip's top edge every few seconds. As it passes over each fact, that
   cell lights up from the top (see .hero-stats li::after below); the cell
   delays are timed to match where the light is. Transform/opacity only. */
.hero-stats::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.45);
  transform: translateX(-100%);
  animation: stats-comet 6s linear 2.4s infinite;
  pointer-events: none;
}

/* Travels from just off the left edge to just off the right edge in the
   first 2.4s of each 6s loop (22% wide, so 0% to 555% of its own width) */
@keyframes stats-comet {
  0% { transform: translateX(-100%); opacity: 1; }
  40% { transform: translateX(555%); opacity: 1; }
  41%, 100% { transform: translateX(555%); opacity: 0; }
}

/* Each cell's light-up as the comet passes overhead */
.hero-stats li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  animation: stat-flash 6s ease-out infinite;
  pointer-events: none;
}

@keyframes stat-flash {
  0% { opacity: 0; }
  5% { opacity: 1; }
  22%, 100% { opacity: 0; }
}

/* Timed so each flash peaks as the comet's bright head passes the middle
   of that cell (worked out from the comet's width, distance and speed) */
.hero-stats li:nth-child(1)::after { animation-delay: 2.36s; }
.hero-stats li:nth-child(2)::after { animation-delay: 2.78s; }
.hero-stats li:nth-child(3)::after { animation-delay: 3.2s; }
.hero-stats li:nth-child(4)::after { animation-delay: 3.61s; }

.hero-stats li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border-left: 1px solid rgba(192, 192, 192, 0.12);
  /* Cells rise in one after another, after the headline */
  animation: stat-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background 0.35s ease;
}

.hero-stats li:nth-child(1) { animation-delay: 0.5s; }
.hero-stats li:nth-child(2) { animation-delay: 0.62s; }
.hero-stats li:nth-child(3) { animation-delay: 0.74s; }
.hero-stats li:nth-child(4) { animation-delay: 0.86s; }

@keyframes stat-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero-stats li:first-child { border-left: none; }

.hero-stats li.stat-dup { display: none; }

/* Hover: the cell brightens and its icon reacts */
.hero-stats li:hover { background: rgba(255, 255, 255, 0.04); }

.stat-icon {
  flex-shrink: 0;
  font-size: 1.6rem;
  color: var(--silver);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, filter 0.3s ease;
}

.hero-stats li:hover .stat-icon {
  color: var(--white);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* Each icon has its own small reaction: the £ lifts, the clock hand turns,
   the pin bounces, the lock tilts open */
/* Price tag swings from its hole like a real hanging tag, then settles */
.hero-stats .ph-tag { transform-origin: 22% 22%; }
.hero-stats li:hover .ph-tag { animation: tag-swing 1.1s cubic-bezier(0.36, 0, 0.3, 1); }
.hero-stats li:hover .ph-clock { transform: rotate(360deg); }
.hero-stats li:hover .ph-map-pin { animation: pin-bounce 0.7s ease; }
/* Padlock: a closed lock and an open one stacked in the same spot. On
   hover the closed one fades out and the open one pops in with a tilt,
   so the lock visibly unlocks. */
.lock-icon { display: inline-grid; }
.lock-icon i { grid-area: 1 / 1; transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lock-icon .lock-open { opacity: 0; transform: translateY(3px) rotate(0deg); }
.hero-stats li:hover .lock-closed { opacity: 0; transform: translateY(-2px); }
.hero-stats li:hover .lock-open { opacity: 1; transform: translateY(-2px) rotate(-14deg); }

@keyframes tag-swing {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-22deg); }
  45% { transform: rotate(14deg); }
  65% { transform: rotate(-8deg); }
  82% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

@keyframes pin-bounce {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-3px); }
}

.hero-stats strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #FFFFFF 0%, #C0C0C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums; /* digits keep the same width while counting */
}

/* The small label under each fact (not the counting numbers) */
.hero-stats li > div > span {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Divider: a "chrome strip" gradient line instead of a flat grey rule, with
   a slim brighter glint that slowly travels across it — like light moving
   over a brushed metal edge. overflow:hidden clips the glint to the strip;
   the animation runs off-screen to off-screen so the loop restart is
   invisible (no visible jump). Runs on transform only (compositor-cheap). */
.divider {
  position: relative;
  height: 1px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(192, 192, 192, 0.35) 20%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(192, 192, 192, 0.35) 80%,
    transparent 100%);
}

.divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
  animation: divider-glint 7s ease-in-out infinite;
}

/* Stagger the three dividers so their glints don't all pulse in sync */
.divider:nth-of-type(2)::after { animation-delay: -2.3s; }
.divider:nth-of-type(3)::after { animation-delay: -4.6s; }

@keyframes divider-glint {
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(320%); }
  100% { transform: translateX(320%); }
}

/* Ambient glow blobs: the same soft radial glow used behind the hero,
   echoed faintly behind each section for a bit of "dynamic colouring"
   without introducing any new hues. Slow float on transform only. */
.what-we-do,
.projects,
.contact,
.values-section,
.how-it-works,
.faq-content {
  position: relative;
  overflow: hidden;
}

.what-we-do::before,
.projects::before,
.contact::before,
.values-section::before,
.how-it-works::before,
.faq-content::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 192, 192, 0.07) 0%, rgba(192, 192, 192, 0) 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambient-float 18s ease-in-out infinite;
}

.what-we-do::before { top: -220px; right: -160px; }
.projects::before { bottom: -260px; left: -180px; animation-delay: -6s; }
.contact::before { top: -200px; right: 5%; animation-delay: -12s; }
.values-section::before { bottom: -260px; left: -180px; animation-delay: -6s; }
.how-it-works::before { top: -220px; left: -160px; animation-delay: -3s; }
.faq-content::before { bottom: -240px; right: -160px; animation-delay: -9s; }

@keyframes ambient-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-40px, 30px); }
}

.what-we-do > .container,
.projects > .container,
.contact > .container,
.values-section > .container,
.how-it-works > .container,
.faq-content > .container {
  position: relative;
  z-index: 1;
}

/* What We Do */
.what-we-do {
  background: #0d0d0d;
  padding: var(--space-section-tight) 0 var(--space-section);
}

.section-head {
  max-width: 640px;
  margin-bottom: 64px;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-item {
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(192, 192, 192, 0.14);
  border-radius: 16px;
  /* Inset top highlight mimics light catching the top edge of real glass */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.feature-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 40px rgba(192, 192, 192, 0.08);
  border-color: rgba(192, 192, 192, 0.25);
}

.feature-icon {
  font-size: 2rem;
  color: #C0C0C0;
  margin-bottom: 24px;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-item:hover .feature-icon {
  transform: scale(1.12) rotate(-4deg);
}

.feature-item h3 { font-size: 1.15rem; margin-bottom: 12px; }
.feature-item p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }

/* Projects */
.projects {
  background: #111111;
  padding: var(--space-section) 0;
}

.projects .section-title { margin-bottom: 72px; }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--silver);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 30px rgba(192, 192, 192, 0.1);
}

/* Project media: sized to the screenshot's own aspect ratio (no fixed-height
   letterboxing) on every screen size now, so mobile and desktop match. */
.project-media {
  position: relative;
  overflow: hidden;
}

.project-image {
  width: 100%;
  height: auto;
  display: block;
}

.project-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.project-card:hover .project-hover-overlay {
  opacity: 1;
}

.project-hover-overlay .btn-outline-project {
  margin-top: 0;
}

.project-caption { padding: 24px 26px 28px; }

.project-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 600;
}

.project-card h3 {
  font-size: 1.35rem;
  margin-top: 10px;
}

/* "Live demo" badge on the screenshot: makes it obvious the card opens a
   working site. The dot is the same glowing green as the page labels. */
.demo-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(192, 192, 192, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  animation: signal-glow 2.6s ease-in-out infinite;
}

/* "Try it live ->" prompt under each demo card; the arrow nudges right */
.project-try {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-try i { animation: arrow-nudge 1.8s ease-in-out infinite; }

.project-card:hover .project-try i { animation-duration: 0.9s; }

@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* One-line list of what the concept demonstrates */
.project-features {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Our Work intro: tighter gap between title and copy than the old
   title-only layout */
.projects .section-head .section-title { margin-bottom: 20px; }

/* Third "Your business next" card: same card, but the image area is a
   glowing mountain mark instead of a screenshot */
.project-card--cta { color: inherit; }

.project-media--cta {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(192, 192, 192, 0.14), rgba(192, 192, 192, 0) 65%),
    #0b0b0b;
}

.cta-peak {
  width: 42%;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(192, 192, 192, 0.3));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card--cta:hover .cta-peak { transform: translateY(-6px); }

.cta-media-label {
  color: var(--silver);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Project lightbox: fixed full-viewport overlay, faded in/out with opacity.
   visibility (rather than display) is toggled alongside opacity so the
   panel is unreachable by keyboard/screen reader while closed, without
   losing the opacity transition the way display:none would. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

/* Demo box inside the lightbox: a frosted glass panel (matching the
   site's other glass cards) holding the live concept site. The close
   button sits inside the panel's header, so everything stays in the box. */
.demo-window {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(1200px, 94vw);
  height: min(840px, calc(100vh - 48px));
  padding: 10px;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(192, 192, 192, 0.18);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(192, 192, 192, 0.06);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.open .demo-window { transform: none; }

.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 0 10px;
}

/* "Concept · Name" label with a glowing silver dot, like the page eyebrows */
.demo-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  color: var(--silver);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.demo-title::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* The site itself, inset in the glass with rounded corners */
.demo-frame {
  flex: 1;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: #111;
}

.lightbox-close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(192, 192, 192, 0.3);
  border-radius: 50%;
  color: var(--silver);
  font-size: 1.4rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
  color: var(--silver-bright);
  border-color: var(--silver-bright);
  transform: scale(1.08);
}

body.lightbox-open { overflow: hidden; }

/* Contact */
.contact {
  padding: var(--space-section) 0;
  background: var(--bg-a);
}

.contact-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: start;
}

/* Trust signals under the contact intro copy — shown on every screen size */
.contact-trust {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 36px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--silver);
  font-size: 0.85rem;
  font-weight: 600;
}

.trust-icon {
  font-size: 1.1rem;
  color: var(--silver-bright);
  flex-shrink: 0;
}

.contact-form {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  /* Inset top highlight + soft outer shadow give the panel real depth, not just a tint */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 48px rgba(0, 0, 0, 0.35);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.required-asterisk {
  color: var(--silver-bright);
}

.required-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: -8px 0 0;
}

.form-error {
  font-size: 0.85rem;
  color: var(--error);
  margin: -8px 0 0;
}

.contact-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form input,
.contact-form textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  resize: vertical;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #6e6e6e;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--silver);
  box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.12);
}

/* Contact modal — used on about.html, services.html, faq.html and 404.html
   only. index.html keeps its own inline #contact section instead, so this
   never applies there. Reuses .contact-form/.form-field/.contact-trust etc.
   so the form looks identical to the homepage's; the one override below
   strips .contact-form's own glass panel since the modal card already
   provides that same glass treatment one level up — nesting both looked
   like two stacked panels instead of one. */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.contact-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

.contact-modal-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid rgba(192, 192, 192, 0.15);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  transform: translateY(12px);
  transition: transform 0.35s ease;
}

.contact-modal.open .contact-modal-content {
  transform: translateY(0);
}

.contact-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(192, 192, 192, 0.3);
  border-radius: 50%;
  color: var(--silver);
  font-size: 1.3rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.contact-modal-close:hover {
  color: var(--silver-bright);
  border-color: var(--silver-bright);
  transform: scale(1.08);
}

.contact-modal-intro .contact-trust { margin-top: 24px; }

.contact-modal .contact-form {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.contact-modal-open { overflow: hidden; }

/* Footer — same treatment on every screen size now: gradient backdrop,
   bigger logo, and the extra handle/location lines. */
.site-footer {
  padding: 80px 0 48px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.75) 0%, rgba(0, 0, 0, 0.9) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(192, 192, 192, 0.15);
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-logo-img {
  width: 220px;
  min-width: 220px;
  height: auto;
  margin-bottom: 20px;
}

.footer-icons {
  display: flex;
  gap: 20px;
  margin-top: 36px;
}

.footer-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--silver);
  transition: border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.footer-icons a:hover {
  border-color: var(--silver);
  color: var(--white);
  transform: translateY(-3px);
}

.footer-copyright {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.footer-legal-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.footer-legal-link:hover { color: var(--silver); }

/* No separate @handle line here — the Instagram icon button above already
   links to the profile, so a duplicate text handle would be redundant. */
.footer-location {
  display: block;
  margin-top: 28px;
  color: var(--silver);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ============================================================
   SECONDARY BUTTON
   An outline variant of .btn for a page's secondary action, next
   to a .btn-primary. Used on the 404 page.
   ============================================================ */
.btn-secondary {
  background: transparent;
  color: var(--silver-bright);
  border: 1px solid rgba(192, 192, 192, 0.4);
  border-radius: 6px;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
  transform: scale(1.02);
  background: rgba(192, 192, 192, 0.1);
  border-color: var(--silver);
  color: var(--white);
}

.btn-secondary:active { transform: scale(0.99); }

/* ============================================================
   INTERIOR PAGE HERO — "Summit Card" (redesigned Oct 2026)
   Used on about, services, faq, privacy-policy and terms.
   A split layout: the page title on the left, and a frosted-glass
   brand panel on the right holding the brushed-silver mountain
   mark and the "Progress Matters" tagline. On phones the panel
   stacks underneath the title.

   Typography: titles use wide-tracked uppercase Montserrat 800
   (not the Cormorant serif the homepage hero uses) for a
   confident, modern feel; the subheading uses Montserrat Light.
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 100px;
  background:
    var(--grain) repeat left top/120px 120px,
    /* Soft silver glow sitting behind the glass card */
    radial-gradient(circle at 78% 45%, rgba(192, 192, 192, 0.12) 0%, rgba(192, 192, 192, 0) 45%),
    linear-gradient(180deg, var(--bg-a) 0%, var(--black) 100%);
}

/* Background depth (Oct 2026), two layers behind the title and card:
   1. ::before: two soft patches of mist, drifting very slowly.
   2. ::after: the homepage's mountain range, dimmed, as a band along the
      bottom (hero-ridges-band.svg), so every page shares the same horizon. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 0;
  background:
    radial-gradient(ellipse 40% 30% at 30% 70%, rgba(192, 192, 192, 0.06), rgba(192, 192, 192, 0) 70%),
    radial-gradient(ellipse 35% 25% at 75% 30%, rgba(192, 192, 192, 0.05), rgba(192, 192, 192, 0) 70%);
  animation: hero-drift 38s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hero-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-3%, 2%) scale(1.04); }
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  z-index: 0;
  /* Stretches to fill the band (the SVG allows it), so the whole ridgeline
     is always visible whatever the page's shape */
  background: url("hero-ridges-band.svg") center bottom / 100% 100% no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

.page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 64px;
  align-items: center;
}

/* Small label above the title, with a glowing silver dot in front */
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--silver);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.page-hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* The chrome gradient fill comes from the shared headline rule near the
   top of this file; this just sets the wide uppercase sans style. */
.page-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Base subheading style — also used on thank-you.html (centered there) */
.page-hero-sub {
  max-width: 600px;
  margin: 18px auto 0;
  color: var(--silver);
  font-size: 1.1rem;
}

.page-hero .page-hero-sub {
  max-width: 540px;
  margin: 22px 0 0;
  color: #E6E6E6;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.7;
}

/* Gives the card inside real 3D depth when it tilts (the lower the
   perspective value, the stronger the 3D effect looks). */
.page-hero-card-wrap { perspective: 900px; }

/* Frosted-glass brand panel (dark grey #1A1A1A at 55% + blur).
   Tilt: script.js sets --tilt-x / --tilt-y (degrees) from the cursor
   position, and --sheen-x / --sheen-y (where the light reflection sits).
   Default values of 0 mean it sits flat when there's no cursor, which is
   always the case on phones and with reduced motion. */
.page-hero-card {
  position: relative;
  overflow: hidden;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  /* Slow, springy ease back to flat when the cursor leaves */
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
  padding: 44px 32px 30px;
  /* Clear glass: only a faint light tint, so the mist and mountains behind
     show through, softly blurred */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 60%);
  backdrop-filter: blur(7px) saturate(1.3);
  -webkit-backdrop-filter: blur(7px) saturate(1.3);
  border: 1px solid rgba(192, 192, 192, 0.16);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 48px rgba(0, 0, 0, 0.25);
  text-align: center;
}

/* When script.js animates the card continuously (float + scroll + mouse /
   phone tilt), it does its own smoothing, so CSS easing is switched off */
.page-hero-card.is-live,
.page-hero-card.is-live picture { transition: none; }
.page-hero-card.is-live::after { opacity: 1; }

/* While the cursor is moving, follow it quickly instead of slowly */
.page-hero-card.is-tilting {
  transition: transform 0.15s ease-out, border-color 0.4s ease;
  border-color: rgba(192, 192, 192, 0.28);
}

/* Light reflection that slides across the glass toward the cursor */
.page-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--sheen-x, 50%) var(--sheen-y, 0%), rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.page-hero-card.is-tilting::after { opacity: 1; }

/* The mountain drifts slightly against the tilt, a subtle parallax
   that makes it feel like it sits "inside" the glass. */
.page-hero-card picture {
  display: block;
  transform: translate(var(--shift-x, 0px), var(--shift-y, 0px));
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-hero-card.is-tilting picture { transition: transform 0.15s ease-out; }

.page-hero-card img {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  opacity: 0.92;
  filter: drop-shadow(0 0 22px rgba(192, 192, 192, 0.35));
}

.page-hero-card-line {
  height: 1px;
  margin: 28px 0 18px;
  background: linear-gradient(90deg, transparent, rgba(192, 192, 192, 0.5), transparent);
}

.page-hero-card p {
  color: var(--silver);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

/* ============================================================
   PROSE CONTENT
   Long-form readable text, shared by the About page copy and the
   Privacy Policy sections.
   ============================================================ */
.prose {
  max-width: 720px;
  margin: 0 auto;
  color: var(--silver-bright);
  font-size: 1.05rem;
  line-height: 1.85;
}

.prose p { margin-bottom: 24px; }
.prose p:last-child { margin-bottom: 0; }

.prose h2 {
  font-size: 1.3rem;
  color: var(--silver);
  margin: 48px 0 16px;
  letter-spacing: 0.01em;
}

.prose h2:first-child { margin-top: 0; }

.prose a {
  color: var(--silver-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.prose a:hover { color: var(--white); }

.policy-back-link {
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
}

.policy-back-link a {
  color: var(--silver);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.policy-back-link a:hover { color: var(--white); }

/* ============================================================
   VALUES GRID (About page)
   Four cards in a 2x2 layout, reusing the same .feature-item
   glass-card styling as the homepage "What We Do" section.
   ============================================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}

/* ============================================================
   PRICING CARDS (Services page)
   Three glass cards side by side. The middle "Standard" card
   gets a --featured modifier: a brighter border plus a "Most
   Popular" badge overlapping the top edge.
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 30px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(192, 192, 192, 0.14);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 40px rgba(192, 192, 192, 0.08);
  border-color: rgba(192, 192, 192, 0.25);
}

.pricing-card--featured { border-color: rgba(192, 192, 192, 0.4); }

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--silver);
  color: var(--black);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
}

.pricing-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}

.pricing-price {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 10px 0 16px;
  background: linear-gradient(90deg, #FFFFFF 0%, #C0C0C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pricing-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--silver-bright);
  line-height: 1.5;
}

.pricing-features li i {
  color: var(--silver);
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ============================================================
   ADD-ONS LIST (Services page)
   A glass panel with a list of extra services and prices, each
   row separated by a hairline divider.
   ============================================================ */
.addons-panel {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.addon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.addon-row:last-child { border-bottom: none; }

.addon-name { font-size: 0.98rem; color: var(--white); }

.addon-price {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--silver);
  white-space: nowrap;
}

/* ============================================================
   HOW IT WORKS (Homepage, between Our Work and Contact)
   Four glass cards with a large chrome-gradient step number, the
   same card treatment as feature/pricing cards elsewhere.
   ============================================================ */
.how-it-works {
  background: #0d0d0d;
  padding: var(--space-section) 0;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step-card {
  padding: 32px 26px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(192, 192, 192, 0.14);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 40px rgba(192, 192, 192, 0.08);
  border-color: rgba(192, 192, 192, 0.25);
}

.step-number {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #FFFFFF 0%, #C0C0C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.step-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }

/* ============================================================
   CTA SECTION (About + Services)
   Centered call-to-action block, reusing .section-title /
   .section-copy / .btn-primary — just adds the layout and the
   same ambient glow treatment as the other sections.
   ============================================================ */
.cta-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--space-section) 0;
  background: #0d0d0d;
}

.cta-section::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 192, 192, 0.07) 0%, rgba(192, 192, 192, 0) 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambient-float 18s ease-in-out infinite;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}

.cta-content .section-copy { margin: 0 auto 32px; }

/* ============================================================
   404 PAGE
   Big glowing "404" numeral with a slow pulsing ambient glow
   behind it, centered heading/subtext/buttons below.
   ============================================================ */
.error-page {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    var(--grain) repeat left top/120px 120px,
    linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 100%);
}

.error-page::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 192, 192, 0.16) 0%, rgba(192, 192, 192, 0) 70%);
  pointer-events: none;
  z-index: 0;
  animation: error-pulse 4s ease-in-out infinite;
}

@keyframes error-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.error-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 0 32px;
}

.error-number {
  font-size: clamp(6rem, 18vw, 11rem);
  font-weight: 800;
  line-height: 1;
}

/* Thank-you page checkmark: same treatment as .error-number (big chrome
   gradient symbol above the heading), just sized for an icon glyph
   instead of digit characters. display:block centers it since icon fonts
   render as inline characters by default. */
.confirm-icon {
  display: block;
  font-size: clamp(4rem, 10vw, 5.5rem);
  line-height: 1;
}

.error-content h1 {
  margin-top: 12px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.error-content .section-copy {
  max-width: 480px;
  margin: 16px auto 36px;
}

.error-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Large, very faint mountain mark behind a hero heading — a watermark
   rather than a decoration, so it doesn't compete with the text. Used on
   the homepage hero and 404 page (interior pages show the mark in their
   glass card instead), sitting below the heading in the stacking order. */
.page-hero-watermark {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: min(760px, 92vw);
  height: auto;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}

/* Editorial paragraph treatment for the About story copy, so it reads as
   a designed page rather than a plain wall of text:
   - a large drop-cap on the opening letter
   - a big standalone pull-quote breaking up the run of paragraphs
   - a distinct, centered closing statement */
.prose-lead { font-size: 1.15rem; }

.prose-lead::first-letter {
  font-size: 3.4em;
  font-weight: 700;
  line-height: 0.8;
  float: left;
  margin: 0.04em 0.08em 0 0;
  color: var(--silver-bright);
}

.prose-pullquote {
  max-width: 640px;
  margin: 56px auto;
  padding: 0 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.35;
  background: linear-gradient(90deg, #FFFFFF 0%, #C0C0C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prose-closer {
  max-width: 560px;
  margin: 56px auto 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--silver-bright);
}

/* Values section: same card/grid styling as the rest of the site, but
   with its own tighter top/bottom padding instead of the larger
   --space-section rhythm used between major homepage sections. */
.values-section {
  background: #111111;
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0;
}

/* ============================================================
   FAQ PAGE
   Accordion list: click a question to expand its answer. The
   height animation uses grid-template-rows (0fr -> 1fr) instead
   of JS height measurement — a modern CSS-only technique that
   animates smoothly without knowing the answer's height in
   advance. The arrow icon rotates 180deg when a card is open.
   ============================================================ */
.faq-content {
  background: #0d0d0d;
  padding: var(--space-section) 0;
}

.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(192, 192, 192, 0.14);
  border-radius: 16px;
  transition: border-color 0.3s ease;
}

.faq-item.open { border-color: rgba(192, 192, 192, 0.3); }

/* Resets the <h3> wrapper's default margin — spacing comes from the
   button's own padding instead, so the heading doesn't add extra gap. */
.faq-question-heading { margin: 0; }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: none;
  border: none;
  border-radius: 16px;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
}

.faq-icon {
  flex-shrink: 0;
  color: var(--silver);
  font-size: 1.1rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-icon { transform: rotate(180deg); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-answer { grid-template-rows: 1fr; }

.faq-answer-inner { overflow: hidden; }

.faq-answer p {
  padding: 0 26px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* ============================================================
   COOKIE CONSENT BANNER (every page)
   Fixed to the bottom of the screen, slides up on first visit.
   The choice (accepted/declined) is saved to localStorage by
   script.js, so once a visitor picks one it never shows again.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: #0a0a0a;
  border-top: 1px solid rgba(192, 192, 192, 0.2);
  padding: 22px 32px;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.visible { transform: translateY(0); }

.cookie-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.cookie-banner-text {
  max-width: 760px;
  color: var(--silver-bright);
  font-size: 0.88rem;
  line-height: 1.6;
}

.cookie-banner-text a {
  color: var(--silver);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.cookie-banner-text a:hover { color: var(--white); }

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.cookie-decline {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cookie-decline:hover { color: var(--silver-bright); }

/* ============================================================
   CARD REDESIGN (Oct 2026)
   Overrides the original glass-box cards further up this file, so
   deleting this whole block (plus the "Card spotlight" section in
   script.js) brings the old cards straight back.
   - What We Do / About values: open editorial columns with a
     numbered silver hairline instead of boxes
   - How It Works: a timeline with numbered stops on a line; the
     last stop (launch) is lit like the summit
   - Pricing: cursor spotlight + a turning chrome border on the
     "Most Popular" card
   ============================================================ */

/* ---- Editorial columns (feature + value cards) ---- */
.feature-row,
.values-grid {
  gap: 56px 48px;
  counter-reset: feature;
}

.feature-item {
  position: relative;
  counter-increment: feature;
  padding: 34px 0 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-top: 1px solid rgba(192, 192, 192, 0.18);
  border-radius: 0;
  box-shadow: none;
}

.feature-item:hover {
  transform: none;
  background: none;
  box-shadow: none;
}

/* Bright segment of the hairline that sweeps across on hover */
.feature-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #FFFFFF, rgba(192, 192, 192, 0));
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Computers: the line sweeps across on hover */
.feature-item:hover::before { transform: scaleX(1); }

/* Phones and tablets (no cursor to hover with): the line grows from the
   left as the item scrolls through the screen instead. script.js sets
   --line between 0 and 1 on every scroll, on touch screens only. */
@media (hover: none) {
  .feature-item::before {
    transform: scaleX(var(--line, 0.22));
    transition: none;
  }
}

/* Running number (01, 02, 03) top-right */
.feature-item::after {
  content: counter(feature, decimal-leading-zero);
  position: absolute;
  top: 36px;
  right: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.feature-icon {
  font-size: 1.7rem;
  color: var(--silver-bright);
  margin-bottom: 22px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-item:hover .feature-icon { transform: translateY(-3px); }

.feature-item h3 { font-size: 1.3rem; margin-bottom: 12px; }

/* ---- How It Works timeline ---- */
.steps-grid {
  position: relative;
  gap: 32px;
}

/* The line the steps sit on, brightest in the middle */
.steps-grid::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), rgba(255, 255, 255, 0.6) 55%, rgba(192, 192, 192, 0.15));
}

/* Progress fill: a brighter line that travels along the timeline as you
   scroll (script.js sets --steps-fill from 0 to 1). Each number lights up
   as the fill reaches it. */
.steps-grid::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #FFFFFF);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: scaleX(var(--steps-fill, 0));
  transform-origin: left;
  transition: transform 0.35s ease-out;
}

.step-card {
  position: relative;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.step-card:hover {
  transform: none;
  background: none;
  box-shadow: none;
}

/* Numbered stop on the line. The box-shadow ring in the section's own
   background colour "cuts" the line either side of the stop. */
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
  border-radius: 50%;
  border: 1px solid rgba(192, 192, 192, 0.45);
  background: #0d0d0d;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--silver-bright);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 8px #0d0d0d;
  transition: background 0.6s ease, color 0.6s ease, box-shadow 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Lit: the number fills with silver and glows, with a small pop. Lit as
   the scroll progress reaches it (.is-lit, set by script.js), or on hover */
.step-card.is-lit .step-number,
.step-card:hover .step-number {
  background: var(--silver);
  color: var(--black);
  box-shadow: 0 0 0 8px #0d0d0d, 0 0 26px rgba(192, 192, 192, 0.45);
}

.step-card.is-lit .step-number { transform: scale(1.06); }
.step-card:hover .step-number { transform: scale(1.08); }

.step-card h3 { font-size: 1.15rem; }



/* Featured pricing card: chrome border with a slowly rotating highlight.
   @property lets the browser animate the gradient's angle smoothly. */
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* The featured card's two layers: a solid inner fill (padding-box) and the
   rotating chrome gradient that only shows through the 1.5px border. Kept
   in one variable so the normal and hover states use exactly the same
   background. */
.pricing-card--featured {
  --featured-bg:
    linear-gradient(#151515, #151515) padding-box,
    conic-gradient(from var(--border-angle), rgba(192, 192, 192, 0.3), #FFFFFF 10%, rgba(192, 192, 192, 0.3) 22%, rgba(192, 192, 192, 0.3) 55%, #FFFFFF 65%, rgba(192, 192, 192, 0.3) 77%) border-box;
  border: 1.5px solid transparent;
  background: var(--featured-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 50px rgba(192, 192, 192, 0.1);
  animation: border-spin 8s linear infinite;
  /* Background is deliberately NOT transitioned: animating it froze the
     moving chrome light mid-turn and snapped it back on every hover in or
     out, which looked like the animation restarting. */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

/* Hover: same background and transparent border (overriding the normal
   pricing-card hover tint), so the light keeps circling smoothly; the card
   just lifts and glows a little brighter. */
.pricing-card--featured:hover {
  background: var(--featured-bg);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 60px rgba(192, 192, 192, 0.18), 0 20px 40px rgba(0, 0, 0, 0.3);
}

@keyframes border-spin { to { --border-angle: 360deg; } }

/* ============================================================
   SMALL-SCREEN LAYOUT ADAPTATIONS (<=860px)
   These are the only remaining mobile/desktop differences, and
   they're pure usability necessities (single-column grids, a
   hamburger menu instead of a full nav bar) rather than a
   different look. Every decorative/content treatment above —
   hero photo, chrome dividers, trust signals, footer extras,
   gradient headings — is unified and applies at every size.
   ============================================================ */
@media (max-width: 960px) {
  .contact-inner { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .feature-row { grid-template-columns: 1fr; }

  .projects-grid { grid-template-columns: 1fr; }
  .lightbox { padding: 12px; }
  .demo-window { width: 100%; height: 100%; padding: 8px; border-radius: 18px; }
  .demo-title { letter-spacing: 0.14em; }

  .values-grid { grid-template-columns: 1fr; }

  .pricing-grid { grid-template-columns: 1fr; }

  .steps-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Timeline runs down the left on small screens */
  .steps-grid::before {
    top: 0;
    bottom: 0;
    left: 22px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.1), rgba(255, 255, 255, 0.6) 55%, rgba(192, 192, 192, 0.15));
  }
  /* Progress fill runs downwards on the vertical timeline */
  .steps-grid::after {
    top: 0;
    bottom: 0;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
    margin: 0 0 0 -0.5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #FFFFFF);
    transform: scaleY(var(--steps-fill, 0));
    transform-origin: top;
  }
  .step-card { padding-left: 72px; min-height: 44px; }
  .step-number { position: absolute; top: 0; left: 0; margin: 0; }
  .step-card h3 { padding-top: 10px; }

  /* Page hero on phones: everything centred in one column (title, then
     the glass card centred beneath it, full width) so it reads as one
     deliberate composition rather than a card floating on the left */
  .page-hero { padding: 64px 0 72px; }
  .page-hero::after { height: 34%; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .page-hero-content { text-align: center; }
  .page-hero .page-hero-sub { margin-left: auto; margin-right: auto; }
  .page-hero-card-wrap { width: 100%; max-width: 360px; }
  .page-hero-card { padding: 30px 24px 22px; }
  .page-hero-card img { max-width: 170px; }
}

/* Very small phones (e.g. iPhone SE at 320px): long single words like
   "QUESTIONS" need slightly smaller, tighter type to fit the column. */
@media (max-width: 400px) {
  .page-hero h1 { font-size: 2rem; letter-spacing: 0.05em; }

  /* Cookie banner: stack the text above the buttons instead of a tight
     single row, and let Accept/Decline sit side by side underneath. */
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; }
}

/* Homepage hero on phones + portrait tablets (redesigned Oct 2026):
   the hero fills the screen; the text and buttons are centred at the top,
   the mountain rises into the open space underneath them (summit and pin
   in clear view), and the facts run along the bottom as a slowly
   scrolling row of glass pills. */
@media (max-width: 860px), (max-width: 1100px) and (orientation: portrait) {
  .hero {
    /* Fill the screen, but never so short that the summit hits the buttons */
    min-height: max(calc(100svh - var(--nav-height)), 680px);
  }
  .hero-content {
    flex: 0 0 auto;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 44px;
    padding-bottom: 0;
  }
  .hero-eyebrow { margin-left: auto; margin-right: auto; }
  .hero h1, .hero-headline { margin-left: auto; margin-right: auto; }
  .hero-headline { max-width: 14ch; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; margin-top: 30px; }
  /* Mountain: bottom half of the hero; the summit (30% down the drawing)
     lands just below the buttons */
  .hero-ridges {
    inset: auto 0 0 0;
    height: 50%;
  }
  /* The facts strip sits at the very bottom, over the mountain's base */
  .hero-stats-wrap { margin-top: auto; padding-bottom: 22px; }
}

/* Phones (and small tablets): facts become a scrolling row of glass pills */
@media (max-width: 860px) {
  .hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; gap: 10px; }
  .hero-actions .btn-primary { padding: 15px 22px; }
  .hero-actions .btn-secondary { padding: 14px 22px; }
  .hero-actions .btn { font-size: 0.72rem; letter-spacing: 0.12em; }

  /* The wrap clips the row and fades it out at both edges */
  .hero-stats-wrap {
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .hero-stats {
    display: flex;
    gap: 10px;
    width: max-content;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    /* Moves left by exactly one set of facts, then repeats seamlessly */
    animation: stats-ticker 26s linear infinite;
  }
  .hero-stats::after,
  .hero-stats li::after { display: none; }
  .hero-stats li,
  .hero-stats li.stat-dup {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid rgba(192, 192, 192, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: none;
    white-space: nowrap;
  }
  .stat-icon { font-size: 1.2rem; }
  .hero-stats strong { display: inline; font-size: 1rem; }
  .hero-stats li > div > span { margin-left: 8px; font-size: 0.64rem; letter-spacing: 0.1em; }
}

/* When script.js runs the ticker (so it can be dragged), the CSS loop
   steps aside; vertical page scrolling still passes through */
.hero-stats.js-ticker { animation: none; will-change: transform; }
.hero-stats-wrap.js-ticker-wrap { touch-action: pan-y; cursor: grab; }
.hero-stats-wrap.js-ticker-wrap:active { cursor: grabbing; }

@keyframes stats-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 5px)); }
}

}

/* ============================================================
   LARGER-SCREEN REFINEMENTS (>=861px)
   Not a different look — just a bit more room to work with:
   a higher-resolution hero photo and a slightly bigger logo.
   ============================================================ */
@media (min-width: 861px) {
  .logo-img { height: 36px; }
  .logo-tagline-img { height: 11px; }
}

/* ============================================================
   CALMER MOTION ON PHONES / TABLETS (touch screens)
   Phones redraw big moving or blurred areas every frame, which made
   scrolling feel uneven. Here the background glow blobs and divider
   glints stay still, scroll-ins become a quick soft fade (no sliding),
   the mountain fades in rather than rising, and blur is dropped where
   it isn't visible anyway. The hero mountain, summit pin, facts ticker,
   count-up, glowing dots and card tilt all stay.
   ============================================================ */
@media (hover: none), (max-width: 860px) {
  .what-we-do::before,
  .projects::before,
  .contact::before,
  .values-section::before,
  .how-it-works::before,
  .faq-content::before,
  .cta-section::before { animation: none; }

  .reveal {
    transform: none;
    transition: opacity 0.45s ease;
  }

  .ridge-layer { animation-name: ridge-fade; animation-duration: 1s; }

  .contact-form,
  .site-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .pricing-card:hover,
  .pricing-card--featured:hover { transform: none; }

  /* Phone tilt is already smoothed in script.js; no extra CSS easing */
  .page-hero-card.is-tilting,
  .page-hero-card.is-tilting picture { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Hero ridges: show the finished drawing straight away */
  .ridge-line,
  .ridge-route-reveal { animation: none; stroke-dashoffset: 0; }
  .ridge-summit { animation: none; opacity: 1; }
  .ridge-layer { animation: none; opacity: 1; transition: none; }
  .ridge-mist { animation: none; }
  .summit-pulse { animation: none; opacity: 0; }
  .pricing-card--featured { animation: none; }
  .steps-grid::after { transition: none; }
  .project-try i,
  .demo-badge-dot { animation: none; }
  .hero-eyebrow::before,
  .page-hero-eyebrow::before,
  .demo-title::before,
  .mobile-nav-link[aria-current="page"]::after { animation: none; }
  .page-hero::before,
  .hero-stats { animation: none !important; }
  .hero-stats::after,
  .hero-stats li::after,
  .hero-stats li,
  .hero-stats li:hover .ph-map-pin,
  .hero-stats li:hover .ph-tag { animation: none; }
  .stat-icon { transition: none; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn-primary:hover,
  .project-card:hover,
  .footer-icons a:hover,
  .feature-item:hover .feature-icon,
  .step-card:hover,
  .logo-link:hover .logo-img {
    transform: none;
  }

  .divider::after,
  .what-we-do::before,
  .projects::before,
  .contact::before,
  .values-section::before,
  .how-it-works::before,
  .faq-content::before,
  .cta-section::before,
  .error-page::before,
  .btn-primary::after,
  .btn-outline-project::after {
    animation: none;
    transition: none;
  }

  .skip-link,
  .page-hero-card,
  .page-hero-card picture,
  .faq-icon,
  .faq-answer,
  .cookie-banner,
  .mobile-menu,
  .mobile-nav-link,
  .mobile-menu-footer,
  .lightbox,
  .contact-modal,
  .contact-modal-content,
  .demo-window {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .site-header.scrolled {
    background: var(--bg-b);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .feature-item,
  .contact-form,
  .page-hero-card,
  .hero-stats,
  .project-hover-overlay,
  .site-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}