/* ==========================================================================
   DOWNPOUR DESIGN — styles.css
   Greyscale weather system. Sophisticated, forward-looking, quietly warm.
   Color is earned: imagery rests in monochrome and ignites on interaction;
   orange is reserved for the drop, the accents, and the orbit on hover.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg:      #131518;   /* deep wet ink / near-black background */
  --surface: #191C1F;   /* cards and surfaces */
  --white:   #FCFCFC;   /* pure white for high contrast highlights */
  --ink:     #F7F4EF;   /* warm paper light text */
  --muted:   #8C9094;   /* readable overcast grey on dark background */
  --band:    #1E2125;   /* dark gray band for process section */
  --black:   #0B0C0E;   /* deepest black for footer and contact */
  --orange:        #EE7744;  /* Kiln orange drop */
  --orange-deep:   #FF7D49;  /* text accent - shifted brighter for dark contrast */
  --orange-soft:   #FFA682;  /* soft orange accent */
  --border:        rgba(247, 244, 239, 0.12); /* light borders */
  --border-light:  rgba(247, 244, 239, 0.08);

  --display: "Tomorrow", sans-serif;
  --sans:    "Space Grotesk", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-pad: clamp(5rem, 12vw, 10rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Background lattice */
  --grid-size: 46px;
  --grid-line:  rgba(247, 244, 239, 0.045);
  --grid-dot:   rgba(247, 244, 239, 0.16);
  --grid-line-hot: rgba(238, 119, 68, 0.45);
  --grid-dot-hot:  rgba(255, 145, 92, 0.95);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip horizontal overflow at the root (the fanned hero cards on mobile
     push past the viewport) — clip, unlike hidden, never creates a scroll
     position, so the fixed header can't drift sideways during a swipe */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0425rem;
  line-height: 1.62;
  font-weight: 400;
  overflow-x: clip;
}

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

h1, h2, h3, blockquote, figure, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

/* Accent emphasis — no italics in the future, just heat */
em {
  font-style: normal;
  color: var(--orange-deep);
}

::selection { background: var(--orange); color: var(--black); }

/* Visible focus everywhere */
:focus-visible {
  outline: 2px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilities ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Film grain — kept faint; texture, not nostalgia */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 120;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Background lattice ----------
   A faint dotted grid sits behind everything. It's vignetted toward the
   centre so it dissolves at the page edges, and a second copy — tinted
   Kiln orange — is revealed only inside a soft circle that tracks the cursor.
*/
.bg-grid,
.bg-grid-glow {
  position: fixed;
  inset: 0;
  z-index: -1;            /* behind content, above the propagated page bg */
  pointer-events: none;
  /* dots at every intersection, plus the two line directions */
  background-image:
    radial-gradient(circle at center, var(--grid-dot) 1.4px, transparent 1.8px),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  /* nudge so the dot lands exactly where the lines cross */
  background-position: calc(var(--grid-size) / -2) calc(var(--grid-size) / -2),
                       -0.5px 0, 0 -0.5px;
}

/* Vignette: strong in the middle, faded — slightly uneven — at the edges */
.bg-grid {
  -webkit-mask-image:
    radial-gradient(ellipse 78% 72% at 50% 42%, #000 32%, transparent 88%),
    radial-gradient(ellipse 40% 36% at 18% 78%, #000 0%, transparent 70%),
    radial-gradient(ellipse 38% 34% at 82% 24%, #000 0%, transparent 72%);
  mask-image:
    radial-gradient(ellipse 78% 72% at 50% 42%, #000 32%, transparent 88%),
    radial-gradient(ellipse 40% 36% at 18% 78%, #000 0%, transparent 70%),
    radial-gradient(ellipse 38% 34% at 82% 24%, #000 0%, transparent 72%);
}

/* Orange copy of the same lattice, masked to a soft circle at the cursor */
.bg-grid-glow {
  --mx: 50%;
  --my: 50%;
  z-index: auto;          /* it's a child of .bg-grid, so it inherits placement */
  background-image:
    radial-gradient(circle at center, var(--grid-dot-hot) 1.5px, transparent 2px),
    linear-gradient(to right, var(--grid-line-hot) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-hot) 1px, transparent 1px);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  -webkit-mask-image: radial-gradient(circle 200px at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.35) 45%, transparent 72%);
  mask-image: radial-gradient(circle 200px at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.35) 45%, transparent 72%);
}
.bg-grid.is-lit .bg-grid-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bg-grid-glow { display: none; }
}

.meta-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.meta-label--light { color: rgba(231, 231, 229, 0.55); }
.meta-divider { color: var(--orange-deep); }

/* Headline mask lines (JS animates .line-inner) */
.line { display: block; overflow: hidden; }
.line-inner { display: block; }

/* Sticky header shouldn't swallow anchored sections */
section[id], footer[id] { scroll-margin-top: 5rem; }

/* Orbit spin — header logo always; hero only if GSAP fails to load */
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Consistent photographic treatment — monochrome at rest, color on contact */
.img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--band);
}
.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.07) brightness(1.01);
  transition: filter 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.img-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(23, 25, 28, 0.10), rgba(23, 25, 28, 0));
  mix-blend-mode: multiply;
  pointer-events: none;
}
figure:hover .img-frame img,
a:hover .img-frame img {
  filter: grayscale(0) contrast(1.03);
  transform: scale(1.02);
}

.collage-caption {
  margin-top: 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.collage-caption::before { content: "\2192  "; color: var(--orange-deep); }

/* ---------- Buttons & links ---------- */
.btn {
  --arrow-inset: 2.0em;           /* aligns the expanding fill with the arrow chip */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  /* Right padding matches the top/bottom padding so the arrow chip sits an
     equal distance from the top, bottom and right edge — a true inscribed circle. */
  padding: 1.05em 1.05em 1.05em 2.2em;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1;                 /* so the arrow chip isn't inflated by leading */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
/* The arrow lives inside an orange circle (.btn-arrow). On hover the fill
   grows from that same spot to flood the whole button. We clip a full-size
   orange layer to a circle centred on the arrow — a percentage radius means
   it always covers the button completely, no matter how wide the label is. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange-deep);
  z-index: -1;
  /* at rest the circle is exactly the size of the arrow chip, hidden behind it */
  clip-path: circle(0.975em at calc(100% - var(--arrow-inset)) 50%);
  transition: clip-path 0.55s cubic-bezier(0.25, 1, 0.3, 1);
}
.btn:hover {
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 125, 73, 0.25);
}
.btn:hover::before {
  clip-path: circle(200% at calc(100% - var(--arrow-inset)) 50%);
}
.btn:active { transform: translateY(-1px); }
.btn--small { --arrow-inset: 1.8em; padding: 0.8em 0.8em 0.8em 1.6em; font-size: 0.72rem; white-space: nowrap; }

/* The arrow rides inside a circular orange chip, centred by flexbox.
   It keeps overflow:hidden so the two arrows can slide across on hover. */
.btn-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.95em;
  height: 1.95em;
  border-radius: 50%;
  background: var(--orange-deep);
  color: var(--white);
  overflow: hidden;
  margin-left: 0.7rem;
}
.btn-arrow-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}
.btn-arrow-inner--hover {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-150%);
}
.btn:hover .btn-arrow-inner {
  transform: translateX(150%);
}
.btn:hover .btn-arrow-inner--hover {
  transform: translateX(0);
}

.link-arrow {
  position: relative;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35em;
  color: var(--ink);
  display: inline-block;
  transition: color 0.3s var(--ease-out);
}
.link-arrow::after {
  content: " \2192";
  display: inline-block;
  color: var(--orange-deep);
  transition: transform 0.3s var(--ease-out);
}
.link-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--border);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.link-arrow:hover {
  color: var(--orange-deep);
}
.link-arrow:hover::after {
  transform: translateX(4px);
}
.link-arrow:hover::before {
  background-color: var(--orange-deep);
  transform: scaleX(1);
}

/* ==========================================================================
   HEADER — the globe is the brand
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  z-index: 100;
  /* Three equal-weight tracks (1fr · auto · 1fr) keep the nav pinned to the
     true centre of the header, no matter how the logo and CTA widths differ. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.7rem var(--gutter);
  transition: width 0.5s var(--ease-out), max-width 0.5s var(--ease-out), top 0.5s var(--ease-out), padding 0.5s var(--ease-out);
}

/* The connecting spine: a thin frosted line that runs across the sticky
   header. The logo, nav and CTA bubble sit on top of it, so the bar appears
   to dip down to a hairline between them and bulge out at each group —
   one organic, connected shape rather than three islands. */
.site-header::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 2px;
  transform: translateY(-50%) scaleX(0.4);
  border-radius: 2px;
  /* a soft hairline that fades in at the ends, so it reads as the bubbles
     melting down into a thin connecting thread rather than a hard rule */
  background: linear-gradient(90deg,
    rgba(247, 244, 239, 0) 0%,
    rgba(247, 244, 239, 0.22) 12%,
    rgba(247, 244, 239, 0.22) 88%,
    rgba(247, 244, 239, 0) 100%);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.site-header.is-scrolled::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}

.site-header.is-scrolled {
  top: 1.5rem;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1100px;
  padding: 0.5rem 1.6rem;
}

.brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 100px;
  /* the globe artwork carries built-in whitespace on its left, which reads
     as extra padding — pull it back so it sits flush with the gutter */
  margin-left: -0.85rem;
  border: 1px solid transparent;
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), padding 0.5s var(--ease-out), margin 0.5s var(--ease-out);
}

/* In the sticky state the logo gets its own bubble so it bulges off the spine
   and the hairline tucks cleanly behind it. */
.site-header.is-scrolled .brand {
  margin-left: 0;
  /* same ~8px ring of breathing room the nav pill gives its text, so the
     logo reads as part of the same family — just larger */
  padding: 0.5rem;
  background: rgba(19, 21, 24, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-color: var(--border);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.globe { display: block; width: 100%; height: auto; }
.globe .orbit path { fill: var(--ink); transition: fill 0.35s var(--ease-out); }
.globe .globe-core { fill: var(--orange); }

.globe--brand {
  width: clamp(75px, 9.5vw, 95px);
  height: clamp(75px, 9.5vw, 95px);
  transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out);
}

.site-header.is-scrolled .globe--brand {
  width: 54px;
  height: 54px;
}

/* Shrink the CTA in the sticky state so its ring of padding matches the nav
   pill (em-based, so the arrow chip stays perfectly inscribed). */
.site-header.is-scrolled .btn--small {
  font-size: 0.66rem;
}

.globe--brand .orbit {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.brand:hover .orbit path,
.brand:focus-visible .orbit path { fill: var(--orange); }

/* The nav lives in its own frosted bubble — same material as the sticky
   header, but with tighter padding so it reads compact. */
.site-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.7rem);
  padding: 0.5rem 1.4rem;
  background: rgba(19, 21, 24, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.site-header > .btn--small { grid-column: 3; justify-self: end; }

/* ---------- Hamburger trigger (mobile only) ---------- */
.nav-toggle {
  grid-column: 3;
  justify-self: end;
  display: none;                 /* shown at the mobile breakpoint */
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  background: rgba(19, 21, 24, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-box {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}
.nav-toggle-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease-out), background-color 0.35s var(--ease-out);
}
.nav-toggle-line:nth-child(1) { top: 0; }
.nav-toggle-line:nth-child(2) { bottom: 0; }
/* open state morphs the two lines into an X */
.nav-toggle.is-open .nav-toggle-line { background: var(--orange-deep); }
.nav-toggle.is-open .nav-toggle-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-line:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Social icons (shared) ---------- */
.social-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* flex (not list-item) so each li hugs its icon — otherwise an inherited
   line box leaves the small header glyphs sitting high in the pill */
.social-links li { display: flex; align-items: center; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
    background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.social-links svg { width: 19px; height: 19px; display: block; }
.social-links a:hover,
.social-links a:focus-visible {
  color: var(--orange-deep);
  border-color: var(--orange-deep);
  transform: translateY(-2px);
}

/* Bare variant for the desktop header — just the glyphs, no chips */
.site-nav-sep {
  width: 1px;
  height: 1.1rem;
  background: var(--border);
  margin: 0 0.2rem;
}
.social-links--bare { gap: 0.85rem; }
.social-links--bare a {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}
.social-links--bare svg { width: 17px; height: 17px; }
/* header glyphs: no underline, no lift — just warm to orange on hover */
.social-links--bare a:hover,
.social-links--bare a:focus-visible { transform: none; }
.social-links--bare a::after { display: none; }

/* Footer set sits a touch below the links */
.footer-social { margin-top: 1.1rem; }
/* keep the header uncluttered — only surface the socials on roomy screens */
@media (max-width: 1080px) {
  .site-nav-sep,
  .social-links--bare { display: none; }
}

/* ---------- Mobile menu overlay ---------- */
.mobile-menu { display: none; }       /* only ever rendered at the mobile breakpoint */

.mobile-menu-nav { display: flex; flex-direction: column; }
.mobile-menu-nav a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.45rem 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  /* staggered entrance, released by .is-open */
  opacity: 0;
  transform: translateY(16px);
  transition: color 0.3s var(--ease-out), opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:active { color: var(--orange-deep); }
.mobile-menu-index {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--orange-deep);
}
.mobile-menu-foot {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out) 0.3s, transform 0.5s var(--ease-out) 0.3s;
}
.mobile-menu-email {
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
}
.mobile-menu-email:hover { color: var(--ink); }
/* direct children only — the social icon links (nested in a ul) stay clean */
.site-nav > a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding: 0.25em 0;
}
.site-nav > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--orange-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.site-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }

/* About Dropdown in Header Nav */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown-trigger {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--ink);
  padding: 0.25em 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35em;
  position: relative;
  transition: color 0.3s var(--ease-out);
}
.nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--orange-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav-dropdown:hover .nav-dropdown-trigger::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger {
  color: var(--orange-deep);
}
.nav-dropdown-arrow {
  width: 9px;
  height: 9px;
  stroke: var(--muted);
  transition: transform 0.35s var(--ease-out), stroke 0.35s var(--ease-out);
}
.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
  stroke: var(--orange-deep);
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(25, 28, 31, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.6rem 0;
  min-width: 150px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}
.nav-dropdown-menu a {
  padding: 0.6rem 1.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
  text-align: center;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  color: var(--orange-deep);
  background: rgba(255, 125, 73, 0.08);
}


/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(10rem, 16vh, 14rem) var(--gutter) clamp(4rem, 10vh, 7.5rem);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-meta {
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  justify-content: center;
}

.hero-title {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.6rem, 11.5vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 4vh, 3rem);
  max-width: 16ch;
  text-align: center;
  z-index: 2;
  /* Dragging a card across the headline shouldn't select the text */
  user-select: none;
  -webkit-user-select: none;
}
.hero-title em {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  color: var(--orange-deep);
}

/* ---------- Floating project cards ----------
   A playground of project cards that drift gently, can be dragged and
   tossed, and navigate to the relevant section when clicked. Positioning
   and motion are driven by JS; CSS handles look, entrance and hover. */
.hero-cards {
  position: absolute;
  inset: 0;                       /* float over the whole hero, on top of the text */
  z-index: 5;
  pointer-events: none;           /* empty space lets clicks reach the text & CTAs */
  touch-action: pan-y;            /* let the page scroll; cards capture their own drags */
}

.hero-cards-hint {
  position: absolute;
  top: clamp(5.5rem, 13vh, 8.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out) 0.4s;
}
.hero-cards.is-ready .hero-cards-hint { opacity: 1; }

.proj-card {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(150px, 16vw, 215px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 25px 45px -18px rgba(0, 0, 0, 0.75);
  color: var(--ink);
  text-decoration: none;
  cursor: grab;
  pointer-events: auto;           /* re-enable hits on the cards over the overlay */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;        /* no native link-drag ghost / no-drop cursor */
  touch-action: none;             /* we handle pointer dragging ourselves */
  opacity: 0;
  /* Entrance only; live motion is set inline by JS and must not be eased. */
  transition: opacity 0.7s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform;
}
.hero-cards.is-ready .proj-card { opacity: 1; }

.proj-card:hover {
  box-shadow: 0 40px 80px -22px rgba(0, 0, 0, 0.9);
}
.proj-card.is-dragging {
  cursor: grabbing;
  box-shadow: 0 55px 95px -25px rgba(0, 0, 0, 0.95);
}
.proj-card:focus-visible {
  outline: 2px solid var(--orange-deep);
  outline-offset: 3px;
}

.proj-card-media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--band);
}
.proj-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.68) contrast(1.12);
  transition: filter 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  pointer-events: none;           /* so drags register on the card, not the image */
  -webkit-user-drag: none;
}
.proj-card:hover .proj-card-media img {
  filter: grayscale(0) brightness(0.85) contrast(1.02);
  transform: scale(1.04);
}

.proj-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.85rem 0.85rem;
}
.proj-card-tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.proj-card-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.1;
}

/* The footer row below the visual collage */
.hero-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  gap: 4rem;
  text-align: left;
  margin-top: 2rem;
  z-index: 2;
}

.hero-sub {
  max-width: 48ch;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.62;
  color: var(--ink);
  flex: 1.1;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 0.9;
  justify-content: flex-end;
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Wider than the viewport and pulled in on both sides so the rotated
     corners never leave a gap; body's overflow-x:hidden clips the rest. */
  width: 112vw;
  /* generous vertical margin so the rotated corners never dip into the
     sections above/below (the overlap grows with viewport width) */
  margin: clamp(2.5rem, 7vw, 7rem) -6vw;
  transform: rotate(-4deg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.2rem 0;
  background: var(--surface);
  color: var(--ink);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.drop {
  width: 0.5em;
  height: 0.5em;
  flex: none;
  background: var(--orange);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   PHILOSOPHY
   ========================================================================== */
.philosophy {
  padding: var(--section-pad) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: clamp(2rem, 5vw, 4rem);
}
.philosophy .meta-label { grid-column: 1 / 4; }

.philosophy-title {
  grid-column: 1 / 10;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.6vw, 4.8rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
}
.philosophy-title em { color: var(--orange-deep); }

.philosophy-body {
  grid-column: 7 / 12;
  display: grid;
  gap: 1.25rem;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.68;
  color: var(--ink);
  max-width: 52ch;
}

/* Full-bleed card carousel — breaks out of the section gutter to span the
   whole viewport. JS drives a slow auto-drift (translateX) and clones the set
   for a seamless loop; it's also drag- and swipe-scrollable. */
.collage {
  grid-column: 1 / 13;
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  /* cancel the section's horizontal padding so the strip reaches both edges */
  margin-inline: calc(-1 * var(--gutter));
  /* vertical headroom so the hover lift + shadow are never clipped */
  padding-block: clamp(2rem, 3.5vw, 3rem);
  overflow: hidden;
  touch-action: pan-y;            /* vertical pans scroll the page; we handle horizontal drags */
  cursor: grab;
  /* feather the two edges so cards fade in/out instead of hard-cutting */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.collage.is-dragging { cursor: grabbing; }
/* don't let hover/click fire on the cards mid-drag */
.collage.is-dragging .collage-item { pointer-events: none; }

.collage-track {
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.collage-item {
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 300px);
  /* trailing margin (not flex gap) so every card — including the last of each
     copy — is evenly spaced, keeping the wrap perfectly seamless */
  margin: 0 clamp(1rem, 2.4vw, 2.1rem) 0 0;
}
.collage-item img { -webkit-user-drag: none; user-drag: none; }

.card-style {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.25rem;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: inherit;
  text-decoration: none;   /* these cards are now links — kill the default underline */
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

.card-style:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 125, 73, 0.35);
}

.card-meta {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--sans);
  transition: color 0.35s var(--ease-out);
}

.card-style:hover .card-meta {
  color: var(--orange-soft);
}

/* Inner image frame nested in the card */
.card-style .img-frame {
  border-radius: 12px;
  overflow: hidden;
}

.collage-item .img-frame { aspect-ratio: 4 / 5; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services {
  position: relative;
  padding: var(--section-pad) var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.services-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.services-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.8vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 20ch;
}
.services-head em { color: var(--orange-deep); }

.service-list { border-top: 1px solid var(--border); }

.service-row {
  position: relative;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
/* On hover the row's own photo fades in as a full-bleed background.
   A heavy gradient scrim sits on top of it so the copy stays legible. */
.service-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(15, 17, 19, 0.78), rgba(15, 17, 19, 0.82)),
    var(--row-img, none);
  background-size: cover;
  background-position: center;
  filter: grayscale(0.25) contrast(1.05);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.service-row:hover::before { opacity: 1; }

.service-link {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5rem 1fr 3rem;
  align-items: start;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
  text-decoration: none;
  transition: padding-left 0.4s var(--ease-out);
}
.service-link:hover { padding-left: clamp(1.5rem, 3.5vw, 2.75rem); }
/* keep the body copy crisp white over the photo */
.service-link:hover .service-body p { color: var(--white); }
.service-link:hover .service-num { color: var(--orange-soft); }

.service-num {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--orange-deep);
  padding-top: 0.7em;
}

.service-body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  transition: color 0.3s var(--ease-out);
}
.service-link:hover h3 { color: var(--orange-deep); }

.service-body p {
  margin-top: 0.9rem;
  max-width: 58ch;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.62;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.service-tags span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.4em 0.85em;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.service-link:hover .service-tags span { border-color: var(--orange-deep); color: var(--orange-deep); }

.service-arrow {
  font-size: 1.6rem;
  color: var(--muted);
  justify-self: end;
  padding-top: 0.4em;
  transition: transform 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.service-link:hover .service-arrow { transform: translateX(6px); color: var(--orange-deep); }

/* Inline thumbs: shown on touch / small screens only (no hover there) */
.service-thumb { display: none; }

@media (hover: none), (max-width: 760px) {
  .service-row::before { display: none; }   /* no hover reveal without a pointer */
  .service-thumb {
    display: block;
    margin: 0 0 2rem 0;
    aspect-ratio: 7 / 4;
  }
}

/* ==========================================================================
   PROCESS — dark grey band, change of weather
   ========================================================================== */
.process {
  background: var(--band);
  color: var(--ink);
  padding: var(--section-pad) var(--gutter);
}
.process-head { max-width: 60rem; }
.process-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4.2rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin-top: 1.25rem;
}
.process-head em { color: var(--orange); }
.process-sub {
  margin-top: 1.25rem;
  color: rgba(231, 231, 229, 0.72);
  font-size: 1.02rem;
}

/* A connected timeline: numbered nodes linked by a hairline that flows from
   one circle to the next, with each step lifting on hover. */
.process-steps {
  --node: 58px;
  --col-gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--col-gap);
}

.step {
  position: relative;
  padding-top: 0;
}
/* connector doubles as a progress bar: orange fills up to --seg (0–1, set
   by JS as the playhead crosses this segment), faint track after it */
.step::before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: var(--node);
  right: calc(-1 * var(--col-gap));
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(247, 244, 239, 0.12) 0,
    rgba(247, 244, 239, 0.12) calc(var(--s, 0) * 100%),
    var(--orange) calc(var(--s, 0) * 100%),
    var(--orange) calc(var(--e, 0) * 100%),
    rgba(247, 244, 239, 0.12) calc(var(--e, 0) * 100%),
    rgba(247, 244, 239, 0.12) 100%);
  z-index: 0;
}
.step:last-child::before { display: none; }

.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--band);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--orange-soft);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
/* the progress playhead lights each node + heading as it arrives (no hover) */
.step.is-active .step-num {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(238, 119, 68, 0.3);
}
.step h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  margin-top: 1.5rem;
  letter-spacing: -0.01em;
  transition: color 0.35s var(--ease-out);
}
.step.is-active h3 { color: var(--orange-soft); }
.step p {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.62;
  color: rgba(231, 231, 229, 0.78);
  max-width: 26ch;
}

/* ==========================================================================
   FIT — who it's for
   ========================================================================== */
.fit { padding: var(--section-pad) var(--gutter); }

.fit-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.fit-text h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 1.25rem;
  max-width: 14ch;
}
.fit-text h2 em { color: var(--orange-deep); }

.fit-intro {
  margin-top: 1.5rem;
  max-width: 48ch;
  font-size: 1.06rem;
  line-height: 1.62;
}

.fit-list {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.fit-list li {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.95rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.98rem;
  line-height: 1.4;
  transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
/* the rain-drop marker, now riding inline at the start of each bubble */
.fit-list li::before {
  content: "";
  flex: none;
  margin-top: 0.4em;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--orange);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
}
.fit-list li:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 125, 73, 0.45);
  background: rgba(255, 125, 73, 0.06);
}
/* one inline-flowing text item so the orange <em> never splits the sentence
   into separate flex chunks — it just reads across and wraps normally */
.fit-list-text { min-width: 0; }
.fit-list em { color: var(--orange-deep); font-weight: 500; }

.fit-figure { margin-top: 4rem; }
.fit-figure .img-frame { aspect-ratio: 4 / 5; }

.fit-quote {
  margin-top: clamp(4rem, 9vw, 7rem);
  text-align: center;
}
.fit-quote p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  max-width: 28ch;
  margin: 0 auto;
}
.fit-quote em { color: var(--orange-deep); }

/* ==========================================================================
   CONTACT — near-black finale
   ========================================================================== */
.contact {
  background: var(--black);
  color: var(--ink);
  padding: var(--section-pad) var(--gutter) clamp(4rem, 9vw, 7rem);
  text-align: left;
}
.contact-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 10rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-top: 1.5rem;
  text-transform: uppercase;
}
.contact-title em { color: var(--orange); }

.contact-sub {
  margin-top: 2rem;
  max-width: 46ch;
  font-size: 1.06rem;
  line-height: 1.66;
  color: rgba(231, 231, 229, 0.78);
}
.contact-sub em { color: var(--orange-soft); }

.contact-email {
  display: inline-block;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.6vw, 2.7rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 0.15em;
  transition: color 0.3s var(--ease-out);
}
.contact-email:hover { color: var(--orange); }

.contact-note {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 231, 229, 0.45);
}

/* ==========================================================================
   FOOTER — still raining, still smiling
   ========================================================================== */
.site-footer {
  background: var(--black);
  color: var(--ink);
  padding: 0 var(--gutter) 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--border-light);
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.globe--footer {
  width: clamp(96px, 10vw, 140px);
  height: auto;
  transition: transform 0.5s var(--ease-out);
}
.globe--footer .globe-core {
  fill: #ffffff;
  transition: fill 0.35s var(--ease-out);
}
.globe--footer .orbit path {
  fill: #ffffff;
  transition: fill 0.35s var(--ease-out);
}
.footer-brand-link:hover .globe--footer .globe-core,
.footer-brand-link:focus-visible .globe--footer .globe-core {
  fill: var(--orange);
}
.footer-tag {
  margin-top: 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(231, 231, 229, 0.65);
}

.footer-heading {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(231, 231, 229, 0.45);
  margin-bottom: 1.1rem;
}

.footer-nav, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; }
.footer-nav a, .footer-contact a {
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.3em 0;
  color: rgba(231, 231, 229, 0.82);
  transition: color 0.25s var(--ease-out);
}
.footer-nav a:hover, .footer-contact a:hover { color: var(--orange); }

.footer-forecast p {
  font-size: 0.95rem;
  line-height: 1.62;
  color: rgba(231, 231, 229, 0.82);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.82rem;
  color: rgba(231, 231, 229, 0.5);
}
.back-top {
  text-decoration: none;
  color: rgba(231, 231, 229, 0.82);
  transition: color 0.25s var(--ease-out);
}
.back-top:hover { color: var(--orange); }

/* ---------- "Website by hordeman.co" credit ---------- */
.footer-credit { margin: 0; }
.credit-link {
  position: relative;
  display: inline-block;
  color: var(--orange-deep);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}
/* the name rolls up to a brighter copy on hover */
.credit-roll {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: -0.03em;
}
.credit-roll-line {
  display: block;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.2, 1);
}
.credit-roll-line:nth-child(2) { color: var(--orange); }
.credit-link:hover .credit-roll-line,
.credit-link:focus-visible .credit-roll-line { transform: translateY(-100%); }
/* underline wipes in beneath it */
.credit-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.credit-link:hover::after,
.credit-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1020px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: clamp(3rem, 6vw, 4rem); }
  /* a row-end node has nothing to its right to connect to */
  .step:nth-child(2n)::before { display: none; }

  .philosophy-body { grid-column: 5 / 13; }
}

@media (max-width: 860px) {
  /* Header recomposes: logo (left) · CTA (centre) · hamburger (right).
     The 1fr·auto·1fr grid keeps the CTA centred between the other two. */
  .site-nav { display: none; }
  .site-header > .btn--small { grid-column: 2; justify-self: center; }
  .nav-toggle { display: inline-flex; }
  /* drop the optical pull-left so the logo sits the same distance from the
     edge as the hamburger does on the other side */
  .brand { margin-left: 0; }

  .mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 95;                 /* under the header so the close (X) stays tappable */
    flex-direction: column;
    justify-content: center;
    gap: clamp(2rem, 7vh, 3.5rem);
    padding: clamp(7.5rem, 18vh, 10rem) var(--gutter) clamp(2.5rem, 8vh, 4rem);
    background: rgba(11, 12, 14, 0.97);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5%);
    transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out), visibility 0.45s;
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu.is-open .mobile-menu-nav a,
  .mobile-menu.is-open .mobile-menu-foot { opacity: 1; transform: none; }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(1) { transition-delay: 0.12s; }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(2) { transition-delay: 0.18s; }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(3) { transition-delay: 0.24s; }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(4) { transition-delay: 0.30s; }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(5) { transition-delay: 0.36s; }

  /* hide the header's inline CTA while the menu is open (the menu has its own) */
  body.menu-open { overflow: hidden; }
  body.menu-open .site-header > .btn--small { opacity: 0; pointer-events: none; }

  /* Don't try to fit the viewport on mobile — give the header generous
     clearance so the big logo never crowds the headline. */
  .hero {
    min-height: auto;
    padding-top: clamp(8.5rem, 18vh, 11rem);
  }
  .proj-card {
    width: clamp(120px, 38vw, 160px);
  }
  .hero-title { max-width: none; }

  /* Mobile: the floating playground becomes a 3D swipe carousel that sits
     in the flow between the headline and the body copy below it. */
  .hero-cards {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(330px, 80vw, 440px);
    margin: clamp(1.5rem, 5vw, 2.5rem) auto clamp(1rem, 4vw, 2rem);
    z-index: 6;
    pointer-events: auto;
    touch-action: pan-y;            /* vertical scroll native; we handle horizontal swipes */
    perspective: 1100px;
  }
  .hero-cards-hint {
    top: -1.5rem;
  }
  .proj-card {
    top: 50%;
    left: 50%;
    width: clamp(170px, 58vw, 240px);
    transform-style: preserve-3d;
    transition: opacity 0.3s var(--ease-out), box-shadow 0.4s var(--ease-out);
    will-change: transform, opacity;
    cursor: pointer;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85);
    backface-visibility: hidden;
  }

  .hero-info-row {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    margin-top: 1.5rem;
  }
  .hero-sub {
    max-width: none;
    text-align: center;
  }
  .hero-ctas {
    justify-content: center;
    width: 100%;
  }

  .philosophy-title { grid-column: 1 / 13; }
  .philosophy-body { grid-column: 1 / 13; }
  .philosophy .meta-label { grid-column: 1 / 13; }

  .fit-inner { grid-template-columns: 1fr; }
  .fit-figure { margin-top: 0; max-width: 26rem; }

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

@media (max-width: 560px) {
  /* Tight phones: the logo + CTA + hamburger would crowd, so drop the
     inline CTA and keep just the logo and the hamburger menu. */
  .site-header > .btn--small { display: none; }

  .service-link { grid-template-columns: 2.6rem 1fr; }
  .service-arrow { display: none; }

  /* Vertical timeline on phones: node on the left, copy beside it, the
     connector drops down through the gap to the next node. */
  .process-steps { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .step {
    padding-left: calc(var(--node) + 1.25rem);
    min-height: var(--node);
  }
  .step-num { position: absolute; left: 0; top: 0; }
  .step::before {
    top: var(--node);
    left: calc(var(--node) / 2 - 1px);
    right: auto;
    bottom: -2.5rem;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(247, 244, 239, 0.12) 0,
      rgba(247, 244, 239, 0.12) calc(var(--s, 0) * 100%),
      var(--orange) calc(var(--s, 0) * 100%),
      var(--orange) calc(var(--e, 0) * 100%),
      rgba(247, 244, 239, 0.12) calc(var(--e, 0) * 100%),
      rgba(247, 244, 239, 0.12) 100%);
  }
  .step:nth-child(2n)::before { display: block; }
  .step:last-child::before { display: none; }
  .step h3 { margin-top: 0; }
  .step p { max-width: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }

  .hero-ctas { flex-wrap: wrap; gap: 1.25rem; }
}

/* ==========================================================================
   CUSTOM CURSOR — a rotating "badge" that names where a link leads
   ========================================================================== */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 94px;
  height: 94px;
  margin: -47px 0 0 -47px;         /* centre on the pointer */
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}
.cursor-ring-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.cursor-ring.is-active .cursor-ring-inner {
  opacity: 1;
  transform: scale(1);
}
/* frosted disc so the label stays readable over photography */
.cursor-ring-inner::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: rgba(19, 21, 24, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(247, 244, 239, 0.14);
}
.cursor-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: orbit-spin 7s linear infinite;
}
.cursor-ring-text {
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  fill: var(--orange);
  text-transform: uppercase;
}
.cursor-ring-label {
  position: relative;
  max-width: 58px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.cursor-ring { z-index: 201; }

/* ---- base custom cursor: a precise dot + a trailing ring ---- */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--orange-deep);
  z-index: 202;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.cursor-follow {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(247, 244, 239, 0.45);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out), border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.cursor-follow.is-hover { border-color: var(--orange-deep); background: rgba(255, 125, 73, 0.07); }
.cursor-follow.is-down { background: rgba(255, 125, 73, 0.18); border-color: var(--orange-deep); }

/* reveal once the pointer moves; melt the ring away while the badge is up */
html.cursor-ready .cursor-dot,
html.cursor-ready .cursor-follow { opacity: 1; }
html.cursor-badge .cursor-follow,
html.cursor-badge .cursor-dot { opacity: 0; }

/* hide the native cursor everywhere the custom one is live (keep a caret on
   real text fields so people can still see where they're typing) */
html.custom-cursor-on, html.custom-cursor-on * { cursor: none; }
html.custom-cursor-on input:not([type="submit"]):not([type="button"]),
html.custom-cursor-on textarea { cursor: auto; }

/* ==========================================================================
   INNER PAGES — layout & aesthetics
   ========================================================================== */
.inner-page-header {
  padding: clamp(9.5rem, 16vh, 12rem) var(--gutter) clamp(3.5rem, 8vh, 5.5rem);
  text-align: left;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.inner-page-header .meta-label {
  margin-bottom: 1.5rem;
}
.inner-page-header h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.2rem, 9.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.inner-page-header h1 em {
  font-style: italic;
  font-family: var(--display);
  color: var(--orange-deep);
}
.inner-page-header p.subtitle {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.62;
  color: var(--muted);
}

/* --- Work Page Grid --- */
.work-section {
  padding: 0 var(--gutter) var(--section-pad);
  max-width: 1200px;
  margin: 0 auto;
}
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.work-grid-asym {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 2.5vw, 2.5rem);
}
.work-grid-asym .work-item {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .work-grid-asym .work-item:nth-child(3n+1) {
    grid-column: 1 / 8;
  }
  .work-grid-asym .work-item:nth-child(3n+2) {
    grid-column: 8 / 13;
    margin-top: 5rem;
  }
  .work-grid-asym .work-item:nth-child(3n+3) {
    grid-column: 3 / 11;
    margin-inline: 2rem;
  }
}

.work-item-inner {
  text-decoration: none;
  display: block;
}
.work-item-inner .img-frame {
  aspect-ratio: 16 / 10;
  margin-bottom: 1.25rem;
}
.work-item-inner:nth-child(2n) .img-frame {
  aspect-ratio: 4 / 5;
}
.work-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.85rem;
}
.work-item-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange-soft);
}
.work-item-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.3s var(--ease-out);
}
.work-item-inner:hover .work-item-title {
  color: var(--orange-deep);
}
.work-item-year {
  font-size: 0.82rem;
  color: var(--muted);
}
.work-item-desc {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 45ch;
  line-height: 1.55;
}

/* --- Services Page Detail --- */
.services-detail-section {
  padding: 0 var(--gutter) var(--section-pad);
  max-width: 1100px;
  margin: 0 auto;
}
.service-detail-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 6vw, 6rem) 0;
  border-bottom: 1px solid var(--border);
}
.service-detail-block:last-child {
  border-bottom: none;
}
.service-detail-info {
  grid-column: span 12;
}
.service-detail-visual {
  grid-column: span 12;
}
@media (min-width: 860px) {
  .service-detail-info {
    grid-column: 1 / 7;
  }
  .service-detail-visual {
    grid-column: 7 / 13;
    align-self: center;
  }
  .service-detail-block:nth-child(2n) .service-detail-info {
    grid-column: 7 / 13;
    grid-row: 1;
  }
  .service-detail-block:nth-child(2n) .service-detail-visual {
    grid-column: 1 / 7;
    grid-row: 1;
  }
}
.service-detail-num {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--orange-deep);
  margin-bottom: 1rem;
  display: block;
}
.service-detail-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.service-detail-desc {
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--ink);
  margin-bottom: 2rem;
  max-width: 44ch;
}
.service-deliverables-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.service-deliverables-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
.service-deliverables-list li {
  font-size: 0.92rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.service-deliverables-list li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  background: var(--orange-deep);
  border-radius: 50%;
  flex: none;
}
.service-detail-visual .img-frame {
  aspect-ratio: 4 / 3;
}

/* --- About Studio Page --- */
.about-section {
  padding: 0 var(--gutter) var(--section-pad);
  max-width: 1100px;
  margin: 0 auto;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: stretch;
}
@media (min-width: 900px) {
  /* narrow text/spec column on the left, big image filling the rest */
  .about-grid { grid-template-columns: minmax(0, 40ch) 1fr; }
}
.about-col {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  min-width: 0;
}
.about-story-text { max-width: 42ch; }
.about-story-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
  color: var(--ink);
}
.about-story-text p:last-child { margin-bottom: 0; }
.about-story-text p:first-child {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
}
.about-story-text em { color: var(--orange-deep); font-weight: 500; }

/* image fills the right column, matched to the left column's height */
.about-figure { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.about-figure .img-frame { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .about-figure { height: 100%; }
  .about-figure .img-frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 440px; }
}
.about-aside-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem;
}
.about-aside-card h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.about-aside-card ul {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.about-aside-card li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.about-aside-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange-soft);
}
.about-aside-val {
  font-size: 0.95rem;
  color: var(--ink);
}

/* --- FAQ Page --- */
.faq-section {
  padding: 0 var(--gutter) var(--section-pad);
  max-width: 800px;
  margin: 0 auto;
}
.faq-accordion {
  display: flex;
  flex-direction: column;
  /* solid panel so the answers read cleanly over the background grid */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0 clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}
.faq-item {
  border-bottom: 1px solid var(--border-light);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-trigger {
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  text-align: left;
  padding: 1.75rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.faq-trigger span {
  transition: color 0.3s var(--ease-out);
}
.faq-trigger:hover span {
  color: var(--orange-soft);
}
.faq-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--orange-deep);
  transition: transform 0.4s var(--ease-out);
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.4s var(--ease-out);
  opacity: 0;
}
.faq-panel-inner {
  padding: 0 0 1.75rem 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 72ch;
}
.faq-panel-inner p {
  margin-bottom: 1rem;
}
.faq-panel-inner p:last-child {
  margin-bottom: 0;
}

/* --- Contact Page --- */
.contact-section {
  padding: 0 var(--gutter) var(--section-pad);
  max-width: 1100px;
  margin: 0 auto;
}
.contact-grid-asym {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-left {
  grid-column: span 12;
}
.contact-right {
  grid-column: span 12;
}
@media (min-width: 860px) {
  .contact-left {
    grid-column: 1 / 7;
  }
  .contact-right {
    grid-column: 7 / 13;
  }
}

.contact-left-text p {
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--ink);
  margin-bottom: 1.5rem;
  max-width: 44ch;
}
.contact-links-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem;
  margin-top: 2.5rem;
}
.contact-links-card h2 {
  font-family: var(--display);
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}
.contact-direct-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  padding: 1.1rem 0;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out);
}
.contact-direct-link:last-child {
  border-bottom: none;
}
.contact-direct-link:hover {
  transform: translateX(4px);
}
.contact-direct-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-direct-value {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--orange-soft);
}
.contact-direct-link:hover .contact-direct-value {
  color: var(--orange-deep);
}

/* Dynamic Project Builder signature interaction */
.builder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}
.builder-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.builder-subtitle {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.5;
}
.builder-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.builder-step-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 1rem;
  display: block;
}
.builder-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.builder-opt {
  background: var(--band);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.75rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  user-select: none;
}
.builder-opt:hover {
  border-color: rgba(255, 125, 73, 0.45);
}
.builder-opt.is-selected {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(255, 125, 73, 0.22);
}
.builder-input {
  width: 100%;
  background: var(--band);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease-out);
}
.builder-input:focus {
  outline: none;
  border-color: var(--orange-deep);
}
.builder-action {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}
/* the send button stretches full width — push the arrow chip to the far end
   so it lines up with the fill origin (otherwise a second circle appears) */
.builder-action .btn { justify-content: space-between; }
.builder-email-preview {
  background: rgba(11, 12, 14, 0.45);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
  display: none;
}
.builder-email-preview.is-visible {
  display: block;
}
.builder-email-preview strong {
  color: var(--ink);
}

/* ==========================================================================
   INNER PAGES — extra polish to match the homepage's finish
   ========================================================================== */

/* Masthead closes off with a hairline rule, like a magazine spread */
.inner-page-header { border-bottom: 1px solid var(--border); }

/* Work cards lift, the meta rule heats up, and an arrow leads out on hover */
.work-item-inner { transition: transform 0.5s var(--ease-out); }
.work-item-inner:hover { transform: translateY(-6px); }
.work-item-meta { transition: border-color 0.4s var(--ease-out); }
.work-item-inner:hover .work-item-meta { border-color: var(--orange-deep); }
.work-item-title::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--orange-deep);
  opacity: 0;
  transform: translate(-5px, 3px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.work-item-inner:hover .work-item-title::after { opacity: 1; transform: none; }

/* Service detail: the visual ignites to colour when its block is hovered */
.service-detail-block:hover .service-detail-visual .img-frame img {
  filter: grayscale(0) contrast(1.03);
  transform: scale(1.02);
}

/* About: the spec card trails along while the story scrolls */
@media (min-width: 860px) {
  .about-aside { position: sticky; top: 7rem; }
}
.about-aside-card { transition: border-color 0.4s var(--ease-out); }
.about-aside-card:hover { border-color: rgba(255, 125, 73, 0.3); }
.about-aside-card li { padding-bottom: 1.1rem; border-bottom: 1px solid var(--border-light); }
.about-aside-card li:last-child { padding-bottom: 0; border-bottom: none; }

/* Services: a giant ghosted index sits behind every block */
.services-detail-section { counter-reset: svc; }
.service-detail-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  counter-increment: svc;
}
.service-detail-block::before {
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  top: clamp(0.5rem, 2vw, 2rem);
  right: -0.5rem;
  z-index: -1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(7rem, 22vw, 19rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.05;
  pointer-events: none;
}

/* Work: an outlined index rides each card, filling orange on hover */
.work-grid-asym { counter-reset: proj; }
.work-item { counter-increment: proj; }
.work-item-inner { position: relative; }
.work-item-inner::before {
  content: counter(proj, decimal-leading-zero);
  position: absolute;
  top: -0.7rem;
  left: -0.3rem;
  z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 244, 239, 0.4);
  text-stroke: 1px rgba(247, 244, 239, 0.4);
  pointer-events: none;
  transition: color 0.4s var(--ease-out), -webkit-text-stroke-color 0.4s var(--ease-out);
}
.work-item-inner:hover::before {
  color: var(--orange-deep);
  -webkit-text-stroke-color: transparent;
}

/* ==========================================================================
   INNER PAGES — full-bleed layouts + custom heroes (use the space like home)
   ========================================================================== */

/* Run gutter-to-gutter like the homepage instead of a narrow centred column */
.inner-page-header,
.work-section,
.services-detail-section,
.about-section,
.contact-section,
.faq-section {
  max-width: none;
  margin-inline: 0;
}

/* ---- Custom masthead: an asymmetric two-column hero ---- */
.inner-page-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
@media (min-width: 880px) {
  .inner-page-header { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}
.page-hero-main { display: flex; flex-direction: column; min-width: 0; }
.inner-page-header h1 { margin-bottom: 1.5rem; }
.inner-page-header .subtitle { margin: 0; max-width: 48ch; }
.page-hero-aside { align-self: end; min-width: 0; }
@media (max-width: 879px) { .page-hero-aside { align-self: start; } }

/* Work — a big outlined tally */
.hero-bignum {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--orange-deep);
  text-stroke: 1.5px var(--orange-deep);
}
.hero-bignum-label {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}

/* Services — interactive capability index that jumps to each block */
.hero-svc-index { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.hero-svc-index a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 0.4s var(--ease-out), color 0.3s var(--ease-out);
}
.hero-svc-index a:hover { padding-left: 0.9rem; color: var(--orange-deep); }
.hero-svc-index .idx-num {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; color: var(--orange-soft); flex: none;
}
.hero-svc-index .idx-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.45rem); }
.hero-svc-index a::after {
  content: "\2197"; margin-left: auto; color: var(--orange-deep);
  opacity: 0; transform: translate(-4px, 2px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.hero-svc-index a:hover::after { opacity: 1; transform: none; }

/* About — an offset studio frame */
.page-hero--about .page-hero-aside .img-frame { aspect-ratio: 3 / 4; }

/* FAQ — a ghosted question mark */
.hero-faq-aside { display: flex; justify-content: flex-end; align-items: flex-end; }
.hero-ghost-q {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(8rem, 22vw, 17rem); line-height: 0.66;
  color: transparent; -webkit-text-stroke: 1.5px rgba(247, 244, 239, 0.16);
  text-stroke: 1.5px rgba(247, 244, 239, 0.16);
}

/* Contact — a reply-time badge */
.hero-contact-aside { display: flex; justify-content: flex-start; }
.hero-badge {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 1.6rem 1.9rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  line-height: 1.4;
}
.hero-badge strong {
  display: block; margin-top: 0.4rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.01em; color: var(--ink); text-transform: none;
}

/* ---- FAQ — sticky heading beside the accordion (uses the width) ---- */
.faq-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 880px) {
  .faq-section { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .faq-aside-head { position: sticky; top: 8rem; }
}
.faq-aside-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em;
}
.faq-aside-head p { margin-top: 1rem; color: var(--muted); font-size: 0.98rem; }
.faq-accordion { min-width: 0; }

/* Extra breathing room below the tilted marquee before the page content */
.work-section,
.services-detail-section,
.about-section,
.contact-section {
  padding-top: clamp(2rem, 5vw, 4.5rem);
}

/* Bolder mastheads */
.inner-page-header h1 { font-size: clamp(3.3rem, 10vw, 8rem); }

/* ---- Services hero: a big interactive index of the five capabilities ---- */
.page-hero--svc-list { display: block; }   /* override the two-column grid */
.svc-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.svc-hero-top .meta-label { margin: 0; }
.svc-hero-lead { max-width: 44ch; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.6; }
.svc-hero-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.svc-hero-list a {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(0.9rem, 2.2vw, 1.8rem) 0.2rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: color 0.35s var(--ease-out), padding-left 0.4s var(--ease-out);
}
.svc-hero-list a:hover,
.svc-hero-list a:focus-visible { color: var(--orange-deep); padding-left: clamp(0.6rem, 1.5vw, 1.2rem); }
.svc-hero-list .svc-n {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em;
  color: var(--orange-soft); flex: none; align-self: flex-start; padding-top: 0.4em;
}
.svc-hero-list .svc-name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
}
.svc-hero-list .svc-arr {
  margin-left: auto; flex: none;
  font-size: clamp(1.3rem, 2.2vw, 2rem); color: var(--orange-deep);
  opacity: 0; transform: translate(-10px, 4px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.svc-hero-list a:hover .svc-arr,
.svc-hero-list a:focus-visible .svc-arr { opacity: 1; transform: none; }

/* ---- About: big stat band ---- */
.about-stats {
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 760px) { .about-stats { grid-template-columns: repeat(4, 1fr); } }
.about-stat { display: flex; flex-direction: column; gap: 0.6rem; }
.about-stat-num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.85; letter-spacing: -0.03em;
}
.about-stat-num em { font-style: normal; color: var(--orange-deep); font-size: 0.55em; margin-left: 0.04em; }
.about-stat-label {
  font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; line-height: 1.4; max-width: 18ch;
  text-transform: uppercase; font-weight: 600;
}

/* ==========================================================================
   WORK — big-text filters + bold project gallery
   ========================================================================== */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(1.2rem, 3vw, 2.8rem) clamp(1.4rem, 3.5vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.filter-btn {
  position: relative;
  background: none; border: 0; padding: 0 0 0.18em; cursor: pointer;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 3.2rem); line-height: 1;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s var(--ease-out);
}
.filter-btn sup {
  font-family: var(--sans); font-size: 0.3em; font-weight: 600;
  vertical-align: super; margin-left: 0.18em; color: var(--orange-soft);
}
.filter-btn::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--orange-deep); transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.filter-btn:hover { color: var(--ink); }
.filter-btn:hover::after { transform: scaleX(1); transform-origin: left; }
.filter-btn.is-active { color: var(--orange-deep); }
.filter-btn.is-active sup { color: var(--orange-deep); }
.filter-btn.is-active::after { transform: scaleX(1); transform-origin: left; }

.work-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.2vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
}
.work-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.work-card-media {
  position: relative; display: block; overflow: hidden;
  border-radius: 18px; background: var(--band); aspect-ratio: 3 / 2;
}
.work-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.94);
  transition: filter 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}
.work-card:hover .work-card-media img { filter: grayscale(0) contrast(1.02); transform: scale(1.05); }
.work-card-no {
  position: absolute; top: 1rem; left: 1.2rem; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  color: var(--white); letter-spacing: 0.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.work-card-foot { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.15rem; }
.work-card-titlerow { display: flex; align-items: baseline; gap: 0.75rem; }
.work-card-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.55rem, 2.9vw, 2.6rem); line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase;
  transition: color 0.3s var(--ease-out);
}
.work-card:hover .work-card-title { color: var(--orange-deep); }
.work-card-go {
  margin-left: auto; flex: none; font-size: 1.4rem; color: var(--orange-deep);
  opacity: 0; transform: translate(-8px, 4px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.work-card:hover .work-card-go { opacity: 1; transform: none; }
.work-card-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.work-card-tag { font-size: 0.88rem; color: var(--muted); letter-spacing: 0.03em; }
.work-card-year { font-size: 0.88rem; color: var(--orange-soft); font-variant-numeric: tabular-nums; flex: none; }

@media (max-width: 720px) {
  .work-gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PROJECT / CASE-STUDY PAGES
   ========================================================================== */
.case-back {
  display: inline-flex;
  align-items: center;
  margin: clamp(7.5rem, 15vh, 9.5rem) var(--gutter) 0;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.case-back:hover { color: var(--orange-deep); transform: translateX(-4px); }

.case-hero { padding: clamp(1.25rem, 3vw, 2rem) var(--gutter) 0; }
.case-hero .meta-label { justify-content: flex-start; }
.case-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase;
  margin: 0.7rem 0 1.2rem;
}
.case-lead {
  max-width: 32ch; color: var(--muted);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.45;
}
.case-hero-media { margin-top: clamp(2.5rem, 5vw, 4rem); }
.case-hero-media .img-frame { aspect-ratio: 16 / 9; border-radius: clamp(16px, 2vw, 28px); }

.case-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.5rem;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 720px) { .case-facts { grid-template-columns: repeat(4, 1fr); } }
.case-fact-label {
  display: block; margin-bottom: 0.55rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-soft);
}
.case-fact-val { font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.2; }

.case-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 860px) {
  /* narrow label column so the body + chips sit close to the heading */
  .case-block { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); }
}
.case-block-head .meta-label { color: var(--orange-deep); }
@media (min-width: 860px) { .case-block-head { position: sticky; top: 8rem; } }
.case-block-body { max-width: 46ch; }
.case-block-body p { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.5; color: var(--ink); }
.case-block-body p + p { margin-top: 1.1rem; }
.case-block-body em { color: var(--orange-deep); font-weight: 500; }

.case-deliverables { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.9rem; }
.case-deliverables li {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 99px; padding: 0.55em 1.05em;
}

.case-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: 0 var(--gutter) clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px) {
  .case-gallery { grid-template-columns: repeat(2, 1fr); }
  .case-gallery .span-2 { grid-column: 1 / -1; }
}
.case-shot { margin: 0; }
.case-gallery .img-frame { aspect-ratio: 4 / 3; border-radius: clamp(14px, 1.6vw, 22px); }
.case-gallery .img-frame.wide { aspect-ratio: 16 / 9; }

/* a huge pull quote — big type, tight vertical space */
.case-quote {
  max-width: none;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  text-align: center;
}
.case-quote p {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 8.5vw, 8.5rem); line-height: 0.98; letter-spacing: -0.03em;
  max-width: 15ch;
}
.case-quote cite {
  display: block; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-style: normal;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-soft);
}

/* "More work" — floating, clickable project cards (reuses the homepage hero
   card system) with an oversized ghost title behind them */
.more-projects {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
@media (min-width: 861px) {
  .more-projects { min-height: clamp(480px, 64vh, 720px); }
}
@media (max-width: 860px) {
  .more-projects { padding-block: clamp(2.5rem, 8vw, 4.5rem); }
}
.more-projects-title {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.5rem, 19vw, 18rem); line-height: 0.8; letter-spacing: -0.04em; text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(247, 244, 239, 0.18);
  text-stroke: 1.5px rgba(247, 244, 239, 0.18);
  z-index: 0; pointer-events: none;
}
.more-projects .hero-cards { z-index: 5; }

/* ==========================================================================
   REDUCED MOTION — calm weather
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .globe--brand .orbit { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}