/* Media-Gothic: same file the current theme uses (copied into /fonts) */
@font-face {
  font-family: 'Media-Gothic';
  src: url('../fonts/Media-Gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============ Design tokens (taken from the current site's theme) ============ */
:root {
  /* Surfaces: neutral charcoal greys */
  --bg: #1b1b1b;
  --bg-2: #232323;
  --bg-3: #2b2b2b;
  --bg-4: #333333;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  /* Gold accent (used sparingly: borders, icons, highlights) */
  /* Gold sampled from the IZIA logo: bright metallic base, light highlight, deep edge */
  --gold: #ecbc52;
  --gold-2: #c9902e;
  --gold-light: #fde08a;
  --gold-grad: linear-gradient(115deg, #c38a2c 0%, #f2c55c 30%, #fff1b5 50%, #f2c55c 68%, #c9902e 100%);

  /* Text */
  --text: #ffffff;
  --muted: #b9b9b9;
  --dim: #808080;

  /* Type */
  --f-head: 'Lato', sans-serif;
  --f-ui: 'Poppins', sans-serif;
  --f-display: 'Media-Gothic', 'Poppins', sans-serif;

  --radius: 6px;
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  font-family: var(--f-head);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg-2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--bg); }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
/* Shiny metallic text. In split headings the gradient sits on each word, since the words animate. */
.gold, .a-split .gold .w > span {
  color: var(--gold);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.a-split .gold { background: none; }
section { position: relative; }
.section { padding: clamp(32px, 3.4vw, 46px) 0; }
.alt { background: var(--bg); }

.eyebrow {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #c9902e 0%, #f2c55c 35%, #fff6d0 50%, #f2c55c 65%, #c9902e 100%) 0 0 / 300% 100%;
  animation: goldShine 2.8s linear infinite;
}
/* light sweeping along a gold line */
@keyframes goldShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.25; }
/* Media-Gothic has no apostrophe glyph, so render it in Poppins */
.ap { font-family: var(--f-ui); }
.sec-title { font-size: clamp(26px, 2.8vw, 36px); margin-top: 12px; }

/* ============ Buttons (outlined gold, like the current site) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-solid { background: var(--gold-grad); color: var(--bg); }
.btn-solid::before { background: var(--gold-light); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip {
  position: absolute; left: -999px; top: 10px; z-index: 200;
  background: var(--gold); color: var(--bg); padding: 10px 16px;
}
.skip:focus { left: 10px; }

/* ============ Navbar ============ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled, .pf-open .nav {
  background: rgba(27, 27, 27, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner {
  width: min(1320px, 100% - 40px);
  margin-inline: auto;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: height .35s var(--ease);
}
.nav.scrolled .nav-inner, .pf-open .nav-inner { height: 68px; }
.nav-logo img { height: 46px; width: auto; transition: height .35s var(--ease); }
.nav.scrolled .nav-logo img, .pf-open .nav-logo img { height: 38px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
}
.nav-links a {
  position: relative;
  display: block;
  padding: 8px 13px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transition: transform .35s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
/* a gold circle with a gliding arrow invites a click on Portfolio; the word stays white, so it never reads as the active tab */
.nav-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: #1b1b1b;
  vertical-align: -4px;
  overflow: hidden;
  transition: transform .3s var(--ease);
}
.nav-go svg { width: 10px; height: 10px; animation: navGo 2.6s var(--ease) infinite; }
a:hover > .nav-go { transform: scale(1.15); }
@keyframes navGo {
  0%, 55% { transform: none; }
  75% { transform: translate(16px, -16px); }
  75.01% { transform: translate(-16px, 16px); }
  100% { transform: none; }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--text);
  transition: transform .35s var(--ease), opacity .3s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* a panel that opens straight under the header; tapping the dimmed page closes it */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.nav-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu ul {
  list-style: none;
  max-height: 100%;
  overflow-y: auto;
  padding: 84px 20px 12px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}
.mobile-menu li a {
  display: block;
  padding: 12px 0;
  font-family: var(--f-ui);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease), color .3s;
}
.mobile-menu li:last-child a { border-bottom: 0; }
.mobile-menu li a:hover, .mobile-menu li a[aria-current="page"] { color: var(--gold); }
.nav-open .mobile-menu li a { transform: none; opacity: 1; }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* Eye-catching link: a point of gold light runs around the edge while the text shines */
.spark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  background: rgba(236, 188, 82, .3);
  animation: sparkGlow 2.6s ease-in-out infinite;
  transition: transform .35s var(--ease);
}
.spark::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  z-index: -2;
  width: 140%;
  aspect-ratio: 1;
  background: conic-gradient(transparent 0 58%, #c9902e 72%, #fff1b5 92%, #f2c55c 100%);
  transform: translate(-50%, -50%);
  animation: sparkSpin 3s linear infinite;
}
.spark::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  border-radius: inherit;
  background-color: #1f1f1f;
  transition: background-color .35s;
}
.spark:hover { transform: translateY(-2px); }
.spark:hover::after { background-color: #333; }
.spark-text {
  color: var(--gold);
  background: linear-gradient(90deg, #e0a93f 0%, #f2c55c 35%, #fff6d0 50%, #f2c55c 65%, #e0a93f 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShine 2.8s linear infinite;
}
@keyframes sparkSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sparkGlow {
  0%, 100% { box-shadow: 0 0 14px -6px rgba(236, 188, 82, .5); }
  50% { box-shadow: 0 0 26px -4px rgba(236, 188, 82, .85); }
}
.spark-btn {
  margin-top: 12px;
  padding: 13px 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.spark-btn svg { width: 16px; height: 16px; animation: sparkNudge 1.6s ease-in-out infinite; }
@keyframes sparkNudge { 50% { transform: translateX(4px); } }

/* ============ Hero ============ */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 112px 0 clamp(64px, 6.5vw, 200px);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg) url('../images/hero/banner.jpg') center / cover no-repeat;
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: grayscale(1);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(27, 27, 27, .55) 0%, rgba(27, 27, 27, .72) 60%, var(--bg-2) 100%);
}
.hero-content { max-width: 820px; }
.hero h1 {
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.2;
  margin: 12px 0 10px;
}
.hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--muted);
}
.hero-tagline {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 1px;
  margin: 14px 0 18px;
}

.scroll-cue {
  position: relative;
  display: block;
  margin: 20px auto 0;
  width: 24px;
  height: 38px;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold-grad);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ============ Ribbon: gold band draws in from the right, services run along its curve ============ */
.ribbon {
  position: relative;
  z-index: 3;
  margin: -9vw 0 -2vw;
  overflow: hidden;
  pointer-events: none;
}
.ribbon svg { display: block; width: 100%; height: auto; }
/* pathLength="1" on the paths: -1 hides the stroke past its right end, 0 is fully drawn */
.ribbon-draw { stroke-dasharray: 1 1; }
.ribbon.is-armed .ribbon-draw { stroke-dashoffset: -1; }
.ribbon.is-armed.is-drawn .ribbon-draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s cubic-bezier(.22, 1, .36, 1);
}
.ribbon-text {
  font-family: var(--f-display);
  font-size: 58px;
  letter-spacing: .05em;
  fill: var(--bg);
  dominant-baseline: central;
}
.ribbon-dot { font-family: var(--f-ui); }
@media (min-width: 861px) {
  .ribbon-band { stroke-width: 78px; }
  .ribbon-text { font-size: 40px; }
}
/* the band and its text scale with this width, so a smaller width means smaller text */
@media (max-width: 860px) {
  .ribbon { --ribbon-w: 900px; margin: -58px 0 -20px; }
  .ribbon svg { width: var(--ribbon-w); margin-left: calc(50% - var(--ribbon-w) / 2); }
}
@media (max-width: 560px) {
  .ribbon { --ribbon-w: 720px; margin: -46px 0 -16px; }
}
@media (max-width: 380px) {
  .ribbon { --ribbon-w: 620px; margin: -40px 0 -14px; }
}

/* ============ Intro ============ */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 5vw, 70px);
  align-items: center;
}
.intro p.lead { font-size: 18px; color: var(--muted); }
.intro blockquote {
  margin-top: 18px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gold);
  font-family: var(--f-head);
  font-size: 19px;
  font-weight: 700;
  font-style: italic;
}
@media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; } }

/* ============ Section header ============ */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px 60px;
  margin-bottom: clamp(24px, 3vw, 34px);
}
.sec-head p { color: var(--muted); max-width: 460px; }

/* ============ Services (capsule gallery) ============ */
.services { overflow-x: clip; }
/* text sits close to the left edge; capsules run out past the right edge */
.caps-layout {
  padding-left: clamp(20px, 3.5vw, 64px);
  padding-right: 20px;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(56px, 6vw, 96px);
  align-items: center;
}
.caps-intro { color: var(--muted); font-size: 16px; margin-top: 12px; max-width: 360px; }
.caps-detail {
  position: relative;
  margin: 30px 0 26px;
  padding: 4px 0 4px 22px;
  min-height: 176px;
}
.caps-detail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--gold), rgba(236, 188, 82, .12));
  transform-origin: top;
}
/* the line redraws on every service change, and a glint runs down it */
.caps-detail.swap::before { animation: capLine .7s var(--ease) backwards; }
@keyframes capLine { from { transform: scaleY(0); } }
.caps-detail::after {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 46px;
  background: linear-gradient(rgba(255, 241, 181, 0), #fff1b5 50%, rgba(255, 241, 181, 0));
  filter: drop-shadow(0 0 4px var(--gold));
  animation: capGlint 2.2s ease-in-out infinite;
}
@keyframes capGlint {
  0% { top: -46px; opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.caps-detail.swap > * { animation: capSwap .55s var(--ease) backwards; }
.caps-detail.swap > :nth-child(2) { animation-delay: .05s; }
.caps-detail.swap > :nth-child(3) { animation-delay: .1s; }
    @keyframes capSwap { from { opacity: 0; transform: translateY(12px); } }
.caps-detail h3 { font-size: 24px; margin: 0 0 8px; }
.caps-detail p { color: var(--muted); font-size: 15px; }

.caps-stage { position: relative; min-width: 0; }
.caps { position: relative; display: flex; gap: 14px; height: 520px; }
.cap {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-3);
  cursor: pointer;
  transition: flex-grow .6s var(--ease), flex-basis .6s var(--ease), border-color .4s, box-shadow .6s;
}
.cap.is-active {
  flex-grow: 3;
  border-color: rgba(236, 188, 82, .3);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8), 0 0 36px -10px rgba(236, 188, 82, .45);
}
/* open capsule: two gold light arcs travelling around the border */
@property --cap-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cap::before, .ind::before, .founder-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--cap-ang),
    transparent 0deg 95deg, #c9902e 130deg, #fff1b5 165deg, #f2c55c 175deg, transparent 180deg 275deg,
    #c9902e 310deg, #fff1b5 345deg, #f2c55c 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.cap.is-active::before, .ind::before, .founder-photo::before { opacity: 1; animation: capSpin 3.2s linear infinite; }
@keyframes capSpin { to { --cap-ang: 360deg; } }
.cap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: grayscale(.9) brightness(.5);
  transition: filter .6s var(--ease), transform 1.2s var(--ease);
}
.cap:hover img { filter: grayscale(.6) brightness(.65); }
.cap.is-active img { filter: grayscale(0) brightness(.88); transform: scale(1.04); }
.cap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(27, 27, 27, .4) 0%, rgba(27, 27, 27, 0) 28%, rgba(27, 27, 27, .88) 100%);
}
/* collapsed: vertical label; expanded: horizontal tag */
.cap-vert {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  transition: opacity .3s;
}
.cap-tag {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translate(-50%, 12px);
  padding: 8px 18px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(27, 27, 27, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cap.is-active .cap-vert { opacity: 0; }
.cap.is-active .cap-tag { opacity: 1; transform: translate(-50%, 0); transition-delay: .3s; }

/* after the last capsule, outside the cards: gold words with light sweeping along them */
.caps-more {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0 .28em;
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.caps-more span {
  display: inline-block;
  color: var(--gold);
  background: linear-gradient(90deg, #c9902e 0%, #f2c55c 35%, #fff6d0 50%, #f2c55c 65%, #c9902e 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShine 2.8s linear infinite;
}

/* desktop: the section pins and scrolling carries the capsules from right to left (positions set by JS).
   The pin is only as tall as its content, so nothing is left empty when the section ends;
   --pin-top centres it below the navbar. */
.services.is-pinned { padding: 0; }
.services.is-pinned .caps-pin {
  position: sticky;
  top: var(--pin-top, 84px);
  padding: 34px 0;
}
.services.is-pinned .caps { display: block; height: min(520px, 100vh - 150px); }
.services.is-pinned .cap, .services.is-rail .cap {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transform-origin: 100% 50%;
  will-change: transform, width;
  animation: none;
}
/* phones and tablets: an endless rail, also placed by JS, running off the right edge */
.services.is-rail .caps {
  display: block;
  height: min(380px, 100svh - 110px);
  margin-right: -20px;
  overflow: hidden;
}
/* fills the space beside the last capsule (left edge set by JS) */
.services.is-pinned .caps-more {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  font-size: clamp(44px, 6.5vw, 104px);
  pointer-events: none;
}

@media (max-width: 1100px) {
  .caps-layout { gap: 56px; }
  .caps { height: 460px; gap: 10px; }
}
@media (max-width: 860px) {
  .caps-layout { grid-template-columns: 1fr; gap: 0; }
  .caps-detail { min-height: 0; margin: 24px 0 20px; }
}

@media (max-width: 400px) {
  .cap-tag { padding: 7px 12px; font-size: 11px; letter-spacing: .06em; }
}

/* ============ Approach (Ideas / Platform / Story) ============ */
.pillars {
  margin-top: clamp(24px, 3vw, 34px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pillar {
  padding: 28px 28px;
  text-align: center;
  transition: background .4s;
}
.pillar + .pillar { border-left: 1px solid var(--line); }
.pillar:hover { background: var(--bg-3); }
.pillar-icon {
  width: 64px;
  height: 56px;
  margin: 0 auto 12px;
  color: var(--gold);
  display: grid;
  place-items: center;
  transition: transform .5s var(--ease);
}
.pillar:hover .pillar-icon { transform: translateY(-4px); }
.pillar-icon svg { width: 44px; height: 44px; }
.pillar h3 {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 10px;
}
.pillar p { color: var(--muted); max-width: 300px; margin-inline: auto; }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--line); }
}

/* ============ Industries (self-running row of cards) ============ */
/* Base (reduced motion, no JS): a swipeable row. JS adds two copies of the row for the loop. */
.inds-pin { position: relative; overflow: hidden; padding: clamp(32px, 3.4vw, 46px) 0; }
.inds-giant {
  position: absolute;
  left: 0;
  bottom: 4%;
  font-family: var(--f-display);
  font-size: clamp(120px, 21vw, 340px);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 188, 82, .24);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.inds .sec-head, .inds-rail { position: relative; z-index: 1; }
.inds-rail { overflow-x: auto; scrollbar-width: none; }
.inds-rail::-webkit-scrollbar { display: none; }
.inds-track {
  --ind-gap: clamp(16px, 2vw, 28px);
  display: flex;
  align-items: flex-start;
  gap: var(--ind-gap);
  width: max-content;
  padding: 0 var(--ind-gap) 10px 0;
}
/* running: JS moves the track; pan-y leaves vertical page swipes to the browser */
.inds-rail.is-running {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.inds-rail.is-running .inds-track { will-change: transform; }
.inds-rail.is-dragging { cursor: grabbing; }
.ind {
  flex: 0 0 clamp(260px, 27vw, 400px);
  height: min(58vh, 470px);
  min-height: 340px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  border: 1px solid rgba(236, 188, 82, .3);
  box-shadow: 0 0 30px -12px rgba(236, 188, 82, .45);
}
/* staggered heights; counted per row of five so the loop joins up exactly */
.ind:nth-child(5n + 2), .ind:nth-child(5n + 4) { margin-top: 56px; }
.ind-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  transition: transform .9s var(--ease);
}
.ind-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ind::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .68) 100%);
}
.ind:hover .ind-media { transform: scale(1.07); }
.ind h3, .ind p { text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
.ind h3 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.ind h3::before { content: ""; width: 3px; height: 20px; background: var(--gold-grad); }
.ind p {
  color: #dcdcdc;
  font-size: 15px;
  max-width: 44ch;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease);
}
.ind:hover p, .ind:focus-within p { max-height: 120px; opacity: 1; margin-top: 8px; }
.ind a::after { content: ""; position: absolute; inset: 0; }
@media (hover: none) { .ind p { max-height: none; opacity: 1; margin-top: 8px; } }

@media (max-width: 860px) {
  .ind { flex-basis: 78vw; height: 380px; min-height: 0; }
  .ind:nth-child(5n + 2), .ind:nth-child(5n + 4) { margin-top: 30px; }
}

/* ============ Process ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.step {
  padding: 24px 22px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .4s, transform .4s var(--ease);
}
.step:hover { border-color: rgba(236, 188, 82, .4); transform: translateY(-4px); }
.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 14px;
  transition: background .4s, color .4s;
}
.step:hover .step-num { background: var(--gold-grad); color: var(--bg); }
.step p { color: var(--muted); }
.step p b { color: var(--gold); font-weight: 700; letter-spacing: .04em; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ============ Inner page heading ============ */
.page-top { padding-top: clamp(124px, 11vw, 156px); }
.page-head { display: flex; align-items: center; gap: 22px; }
.page-title {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* a gold line draws across from the title and ends at the subtitle */
.page-sub {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-sub::before {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #c9902e 0%, #f2c55c 35%, #fff6d0 50%, #f2c55c 65%, #c9902e 100%) 0 0 / 300% 100%;
  transform-origin: left;
  animation: goldShine 2.8s linear infinite;
}
.page-sub.in::before { animation: pageLine 1.2s var(--ease) backwards, goldShine 2.8s linear infinite; }
@keyframes pageLine { from { transform: scaleX(0); } }
.page-lead { max-width: 720px; margin-top: 10px; color: var(--muted); }
@media (max-width: 380px) { .page-title:not(.page-title-sm) { font-size: 30px; } }
@media (max-width: 640px) {
  .page-head { display: block; }
  .page-title { white-space: normal; }
  .page-sub { margin-top: 8px; font-size: 11px; letter-spacing: .14em; }
}
.founder {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #2e2e2e, #222);
}
.founder-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
}
.founder-photo::before { z-index: 1; }
.founder-photo img { display: block; width: 100%; height: auto; }
.founder-copy h3 { font-size: clamp(26px, 2.8vw, 36px); margin-top: 10px; }
.founder-copy blockquote {
  margin: 14px 0 16px;
  padding-left: 18px;
  border-left: 3px solid var(--gold);
  font-family: var(--f-head);
  font-size: clamp(18px, 1.8vw, 22px);
  font-style: italic;
  line-height: 1.4;
  color: var(--gold);
}
.founder-copy p { color: var(--muted); }
.founder-copy p + p { margin-top: 8px; }
@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; }
  .founder-photo { max-width: 340px; margin-inline: auto; }
}

/* ============ Trusted brands ============ */
.brands-intro { margin-top: clamp(36px, 4vw, 56px); text-align: center; }
.brands-intro p { max-width: 620px; margin: 12px auto 0; color: var(--muted); }
/* one even gold line runs back and forth down the section: a faint copy under the one that draws on scroll.
   A selection of logo cards sit on it and bounce in as it reaches them. Height, line and card
   positions are all set by JS */
.brands { position: relative; max-width: 1760px; margin: 16px auto 0; overflow: hidden; }
.brands-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.brands-track, .brands-fill { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brands-track { stroke: var(--gold); opacity: .25; }
.brands-start { fill: #141414; stroke: var(--gold); stroke-width: 3; }
.brand-item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: clamp(96px, 10.4vw, 150px);
  margin: 0;
  text-align: center;
  will-change: transform;
}
.brand-card {
  height: clamp(66px, 6.9vw, 100px);
  padding: clamp(7px, .7vw, 10px);
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  border: 1px solid rgba(236, 188, 82, .5);
  border-radius: 14px;
  background: var(--bg-3);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .9), 0 0 22px -10px rgba(236, 188, 82, .5);
  transition: transform .45s var(--ease), border-color .3s, box-shadow .3s;
}
/* Dark-coloured logos sit on a light card so they stay readable */
.brand-card.light { background: #ececec; }
.brand-card img { width: 100%; height: 100%; object-fit: contain; }
/* where the line ends: the brands not shown as cards */
.brand-more {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 22px clamp(28px, 4vw, 54px) 24px;
  border: 1px solid rgba(236, 188, 82, .55);
  border-radius: 26px;
  background: linear-gradient(145deg, #2e2e2e, #1f1f1f);
  box-shadow: 0 0 44px -14px rgba(236, 188, 82, .6);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(.7);
  transition: opacity .35s, transform .6s var(--ease), visibility 0s .35s;
}
.brand-more.is-in { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); transition-delay: 0s; }
.brand-stack { display: flex; justify-content: center; margin-bottom: 12px; }
.brand-stack span {
  width: 58px;
  height: 58px;
  padding: 7px;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--bg-3);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .4s, transform .5s var(--ease);
}
.brand-stack span + span { margin-left: -14px; }
.brand-stack span.light { background: #ececec; }
.brand-stack img { width: 100%; height: 100%; object-fit: contain; }
.brand-more.is-in .brand-stack span { opacity: 1; transform: none; }
.brand-more.is-in .brand-stack span:nth-child(2) { transition-delay: .07s; }
.brand-more.is-in .brand-stack span:nth-child(3) { transition-delay: .14s; }
.brand-more.is-in .brand-stack span:nth-child(4) { transition-delay: .21s; }
.brand-more.is-in .brand-stack span:nth-child(5) { transition-delay: .28s; }
.brand-more p {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  text-transform: uppercase;
}
/* Poppins for the figure: Media-Gothic draws some symbols as blanks */
.brand-more b { font-family: var(--f-ui); font-size: 1.25em; font-weight: 600; }
.brand-more .brand-tease {
  display: block;
  margin-top: 8px;
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  text-transform: none;
  color: var(--muted);
}

/* the card the line has reached */
.brand-item.is-active .brand-card {
  transform: scale(1.1);
  border-color: var(--gold);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), 0 0 34px -8px rgba(236, 188, 82, .75);
}
/* the brand's name circles the active card, then travels to the next one (position set by JS) */
.brand-orbit {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: clamp(160px, 17.4vw, 250px);
  height: clamp(160px, 17.4vw, 250px);
  opacity: 0;
  pointer-events: none;
  transition: transform .6s var(--ease), opacity .3s;
}
.brand-orbit.is-on { opacity: 1; }
.brand-orbit svg { display: block; width: 100%; height: 100%; animation: orbitSpin 16s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.brand-orbit text {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  fill: var(--gold);
  transition: opacity .18s;
}
.brand-orbit.is-swap text { opacity: 0; }
@media (max-width: 1200px) { .brand-orbit text { font-size: 18px; } }
@media (max-width: 860px) { .brand-card { border-radius: 10px; } }

/* ============ Careers page: openings ============ */
.jobs { margin-top: 26px; display: grid; gap: 16px; }
.job {
  padding: 26px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px;
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .4s;
}
.job:hover { border-color: rgba(236, 188, 82, .4); }
.job h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }
.job-main > p:last-child { margin-top: 8px; color: var(--muted); }
.job .btn { min-width: 150px; justify-content: center; }
@media (max-width: 760px) {
  .job { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
}

/* ============ Portfolio: project cards ============ */
.page-title-sm { font-family: var(--f-head); font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: 0; text-transform: none; }
/* a short last row stays centred instead of leaving a gap on one side */
.works { --per-row: 3; margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.works .work { flex: 0 0 calc((100% - 20px * (var(--per-row) - 1)) / var(--per-row)); min-width: 0; }
.work {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
  transition: border-color .4s, box-shadow .5s, transform .5s var(--ease);
}
.work:hover { border-color: rgba(236, 188, 82, .5); box-shadow: 0 0 40px -16px rgba(236, 188, 82, .5); transform: translateY(-4px); }
.work-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.work-media img {
  position: absolute;
  left: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover;
  transform: translate3d(0, var(--drift, 0), 0) scale(1);
  transition: transform 1s var(--ease);
}
.work:hover .work-media img { transform: translate3d(0, var(--drift, 0), 0) scale(1.05); }
.work.in .work-media img { animation: workImage 1.3s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes workImage { from { scale: 1.14; } }
.work-info { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 20px; }
.work-cat { font-family: var(--f-ui); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--gold); }
.work-title { margin-top: 4px; font-size: 22px; }
.work-sum { margin-top: 4px; color: var(--muted); }
.work-more {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: color .3s;
}
.work-more svg { width: 15px; height: 15px; color: var(--gold); transition: transform .35s var(--ease); }
.work:hover .work-more { color: var(--gold); }
.work:hover .work-more svg { transform: translateX(4px); }
.work[hidden], .work-load[hidden] { display: none; }
.work-load { margin-top: 28px; display: flex; justify-content: center; }
@media (max-width: 960px) { .works { --per-row: 2; } }
@media (max-width: 600px) { .works { --per-row: 1; } }

/* ============ Portfolio: project view ============ */
.pf-dialog[hidden], .pf-fly[hidden] { display: none; }
.pf {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-2);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.pf-dialog.show .pf { opacity: 1; }
/* the navbar stays on top of an open project, with the back strip just under it */
.pf-open .nav { z-index: 75; }
.pf-open .mobile-menu { z-index: 74; }
.pf-body { padding-top: 114px; transition: opacity .28s var(--ease); }
.pf-body.swap { opacity: 0; }
.pf-fly { position: fixed; z-index: 71; object-fit: cover; }
/* a slim strip that stays in place while the project scrolls */
.pf-bar {
  position: fixed;
  left: 0; right: 0; top: 68px;
  z-index: 72;
  height: 46px;
  display: flex;
  align-items: center;
  background: rgba(27, 27, 27, .9);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.pf-dialog.show .pf-bar { opacity: 1; }
.pf-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-family: var(--f-ui);
  font-size: 14px;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .3s;
}
.pf-back svg { width: 17px; height: 17px; color: var(--gold); transition: transform .35s var(--ease); }
.pf-back:hover { color: var(--gold); }
.pf-back:hover svg { transform: translateX(-4px); }
/* opening: title and details beside the cover, the project name large and faint behind */
.pf-top { position: relative; overflow: hidden; padding-block: clamp(28px, 4.4vw, 60px); }
.pf-ghost {
  position: absolute;
  left: 0;
  bottom: -.2em;
  font-family: var(--f-ui);
  font-size: clamp(64px, 15vw, 230px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .035);
  pointer-events: none;
  user-select: none;
  animation: pfGhost 22s ease-in-out infinite alternate;
}
@keyframes pfGhost { to { transform: translateX(-18%); } }
/* gold words in headings, with a slow shine */
.pf-gold {
  background: linear-gradient(90deg, #e0a93f 0%, #f2c55c 35%, #fff6d0 50%, #f2c55c 65%, #e0a93f 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShine 4s linear infinite;
}
/* the opening lines rise in one after another once the cover has landed */
.pf-intro > * { animation: pfUp .8s var(--ease) backwards; }
.pf-intro > :nth-child(2) { animation-delay: .08s; }
.pf-intro > :nth-child(3) { animation-delay: .16s; }
.pf-intro > :nth-child(4) { animation-delay: .24s; }
.pf-intro > :nth-child(5) { animation-delay: .32s; }
.pf-dialog.flying .pf-intro > *, .pf-dialog.flying .pf-title::after { animation: none; }
@keyframes pfUp { from { opacity: 0; transform: translateY(24px); } }
.pf-top-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.pf-intro { transition: opacity .6s var(--ease), transform .7s var(--ease); }
.pf-cat { font-family: var(--f-ui); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.pf-title { margin-top: 6px; font-size: clamp(30px, 3.8vw, 48px); }
.pf-title::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; background: var(--gold-grad); transform-origin: left; animation: pfBar .9s .35s var(--ease) backwards; }
@keyframes pfBar { from { transform: scaleX(0); } }
.pf-sum { margin-top: 16px; font-size: 17px; color: var(--muted); }
.pf-meta { margin-top: 22px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 14px 40px; border-top: 1px solid var(--line); }
.pf-meta dt { font-family: var(--f-ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pf-meta dd { margin-top: 2px; font-family: var(--f-ui); font-size: 15px; font-weight: 500; }
/* a boxed bar: arrow cell, then a gold label cell */
.pf-visit {
  margin-top: 26px;
  display: inline-flex;
  border: 1px solid var(--gold);
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pf-visit-icon { width: 50px; display: grid; place-items: center; color: var(--gold); border-right: 1px solid var(--gold); }
.pf-visit-icon svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.pf-visit-text { padding: 14px 26px; background: var(--gold-grad); color: #1b1b1b; }
.pf-visit:hover .pf-visit-icon svg { transform: translateX(4px); }
.pf-hero { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.pf-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pf-hero:hover img { transform: scale(1.04); }
.pf-dialog.flying .pf-hero img { visibility: hidden; }
.pf-dialog.flying .pf-intro { opacity: 0; transform: translateY(22px); }

/* figures: big gold numbers split by thin gold lines */
.pf-stats { background: var(--bg); border-block: 1px solid var(--line); }
.pf-stats-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding-block: clamp(26px, 3.6vw, 44px); }
.pf-stat { padding: 6px 16px; text-align: center; }
.pf-stat + .pf-stat { border-left: 1px solid rgba(236, 188, 82, .35); }
.pf-stat b {
  display: block;
  font-family: var(--f-ui);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.15;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pf-stat-word b { font-size: clamp(20px, 2.4vw, 32px); line-height: 1.4; }
.pf-stat span { display: block; margin-top: 6px; font-family: var(--f-ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* image and text side by side, the second one mirrored */
.pf-split { padding-block: clamp(36px, 5.6vw, 76px); }
.pf-flip { background: var(--bg); }
.pf-split-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pf-flip .pf-shot { order: 1; }
.pf-shot { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--bg-3); }
.pf-reveal { clip-path: inset(0 0 0 100%); transform: scale(1.1); transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease); }
.pf-flip .pf-reveal { clip-path: inset(0 100% 0 0); }
/* the section is watched, since a fully clipped image never counts as on screen */
.pf-split-in.in .pf-reveal { clip-path: inset(0); transform: none; }
.pf-copy { padding-left: clamp(18px, 2.4vw, 30px); border-left: 1px solid var(--line-2); }
.pf-copy h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 12px; }
.pf-copy p { color: var(--muted); }
.pf-split .pf-shot { translate: 0 calc(var(--par, 0) * -40px); }
.pf-split .pf-copy { translate: 0 calc(var(--par, 0) * 50px); }
.pf-top .pf-ghost { translate: 0 calc(var(--par, 0) * -90px); }
.pf-copy .pf-lead { font-size: 17px; color: var(--text); }
.pf-copy p + p { margin-top: 12px; }
.pf-rise { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.pf-rise.in { opacity: 1; transform: none; }
.pf-stat.pf-rise, .pf-points .pf-rise { transition-delay: calc(var(--i, 0) * 110ms); }

/* clients: one card each, name in gold, projects in bold */
.pf-clients { padding-block: clamp(36px, 5.6vw, 76px); border-bottom: 1px solid var(--line); }
.pf-client-grid { margin-top: clamp(24px, 3.4vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pf-client {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .4s, box-shadow .4s;
}
.pf-client::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--gold-grad); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease); }
.pf-client:hover { border-color: rgba(236, 188, 82, .5); box-shadow: 0 0 40px -18px rgba(236, 188, 82, .6); }
.pf-client:hover::before { transform: scaleX(1); }
.pf-client.pf-rise { transition-delay: calc(var(--i, 0) * 110ms); }
.pf-client-label { font-family: var(--f-ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pf-client h4 { margin: 6px 0 10px; font-size: clamp(22px, 2.4vw, 28px); }
.pf-client p:last-child { color: var(--muted); }
.pf-client b { color: var(--text); font-weight: 600; }
@media (max-width: 720px) { .pf-client-grid { grid-template-columns: minmax(0, 1fr); } }

/* highlights: centred title between lines, two columns split by a line */
.pf-high { padding-block: clamp(36px, 5.6vw, 76px); }
.pf-high-title > span { flex: none; }
.pf-high-title { display: flex; align-items: center; gap: 22px; font-size: clamp(22px, 2.4vw, 30px); text-align: center; }
.pf-high-title::before, .pf-high-title::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.pf-points {
  position: relative;
  margin-top: clamp(24px, 3.4vw, 40px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px clamp(40px, 7vw, 110px);
  color: var(--muted);
}
.pf-points::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.pf-points li { padding-left: 16px; border-left: 2px solid rgba(236, 188, 82, .25); transition: border-color .4s; }
.pf-points li:hover { border-left-color: var(--gold); }
.pf-points b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.pf-others { padding-block: clamp(26px, 3.4vw, 40px); background: var(--bg); overflow: hidden; }
.pf-others-title { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 16px; }
.pf-rail {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.pf-rail.drag { cursor: grabbing; }
.pf-rail.drag .work { pointer-events: none; }
.pf-track { width: max-content; display: flex; gap: 16px; will-change: transform; }
.pf-track .work { flex: none; width: clamp(250px, 25vw, 320px); }
.pf-track .work:hover { transform: none; }
.pf-track .work-title { font-size: 19px; }
@media (max-width: 860px) {
  .pf-top-in, .pf-split-in { grid-template-columns: minmax(0, 1fr); }
  .pf-hero { order: -1; }
  .pf-flip .pf-shot { order: 0; }
}
@media (max-width: 720px) {
  .pf-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 8px; }
  .pf-stat { padding: 20px 10px; }
  .pf-stat + .pf-stat { border-left: 0; }
  .pf-stat:nth-child(odd) { border-right: 1px solid rgba(236, 188, 82, .35); }
  .pf-stat:nth-child(-n+2):not(:nth-last-child(-n+2)) { border-bottom: 1px solid rgba(236, 188, 82, .35); }
  .pf-stat:nth-child(odd):last-child { grid-column: 1 / -1; border-right: 0; }
  .pf-points { grid-template-columns: minmax(0, 1fr); }
  .pf-points::before { display: none; }
}
@media (max-width: 400px) {
  .pf-visit { display: flex; }
  .pf-visit-text { flex: 1; padding-inline: 18px; text-align: center; }
}

/* ============ Careers band ============ */
.careers-band {
  position: relative;
  padding: clamp(26px, 3.5vw, 38px) clamp(24px, 4vw, 50px);
  background: var(--bg-3);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 0 40px -12px rgba(236, 188, 82, .45);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.careers-band h2 { font-size: clamp(24px, 2.6vw, 34px); margin-top: 10px; }

/* ============ Contact ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.contact h2 {
  font-family: var(--f-display);
  font-weight: normal;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.3;
  letter-spacing: 1px;
  margin: 14px 0 6px;
}
/* "Give us a Shout": gold letters pop in, a glint runs across them, sound waves pulse out */
.shout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 14px;
}
.shout-lead { font-family: var(--f-head); font-weight: 300; font-style: italic; font-size: clamp(20px, 2vw, 26px); color: var(--muted); }
.shout-word, .shout-word > span {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shout-word.is-split { background: none; }
.shout-word > span {
  display: inline-block;
  animation: shoutGlint 3.6s ease-in-out infinite;
  animation-delay: calc(1.2s + var(--i) * 80ms);
}
.shout.in .shout-word > span {
  animation: shoutPop .7s cubic-bezier(.3, 1.6, .5, 1) backwards, shoutGlint 3.6s ease-in-out infinite;
  animation-delay: calc(var(--d, 0ms) + .25s + var(--i) * 70ms), calc(1.2s + var(--i) * 80ms);
}
@keyframes shoutPop { from { opacity: 0; transform: translateY(60%) scale(.4) rotate(-12deg); } }
@keyframes shoutGlint {
  0%, 72%, 100% { filter: none; }
  80% { filter: brightness(1.45) drop-shadow(0 0 8px rgba(236, 188, 82, .7)); }
}
.shout-waves { position: relative; width: 34px; height: 40px; }
.shout-waves i {
  position: absolute;
  top: 50%;
  left: 0;
  border: 2px solid transparent;
  border-right-color: var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: shoutWave 1.8s ease-out infinite;
}
.shout-waves i:nth-child(1) { width: 16px; height: 16px; margin-top: -8px; left: -8px; }
.shout-waves i:nth-child(2) { width: 32px; height: 32px; margin-top: -16px; left: -16px; animation-delay: .2s; }
.shout-waves i:nth-child(3) { width: 48px; height: 48px; margin-top: -24px; left: -24px; animation-delay: .4s; }
@keyframes shoutWave {
  0% { opacity: 0; transform: translateX(-4px); }
  30% { opacity: 1; }
  70%, 100% { opacity: 0; transform: translateX(4px); }
}
.contact .lead { font-size: 17px; color: var(--muted); max-width: 420px; }
.phone-card {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px 14px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color .4s;
}
.phone-card:hover { border-color: var(--gold); }
.phone-card .ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: grid;
  place-items: center;
}
.phone-card .ic svg { width: 20px; height: 20px; }
.phone-card small { display: block; font-family: var(--f-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.phone-card strong { font-size: 19px; }

.form {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 16px;
}
.field { position: relative; }
.field.full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 11px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .3s;
}
.field select { appearance: none; cursor: pointer; }
.field.select::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 19px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.form .btn { justify-self: start; }
.form .btn:disabled { opacity: .6; cursor: wait; }
/* hidden field that only bots fill in */
.form-trap { position: absolute; left: -9999px; }
.form-note { grid-column: 1 / -1; font-size: 14px; color: var(--gold); min-height: 1em; }
.toast {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 60;
  max-width: 360px;
  padding: 14px 20px;
  font-family: var(--f-ui);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.show { opacity: 1; transform: none; }
@media (max-width: 520px) { .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; text-align: center; } }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }

/* ============ Footer ============ */
.footer { background: var(--bg-3); border-top: 1px solid var(--line); }
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.footer-cta h2 {
  font-family: var(--f-display);
  font-weight: normal;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: 1px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
  gap: 32px 40px;
  padding: 40px 0 34px;
}
.footer-brand img { height: 50px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: var(--muted); max-width: 280px; font-size: 15px; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--text);
  transition: background .3s, color .3s, border-color .3s;
}
.socials a:hover { background: var(--gold-grad); color: var(--bg); border-color: var(--gold); }
.socials svg { width: 16px; height: 16px; }
.footer h4 {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.footer ul { list-style: none; }
.footer li + li { margin-top: 8px; }
.footer ul a { color: var(--muted); font-size: 15px; transition: color .3s; }
.footer ul a:hover { color: var(--gold); }
.office + .office { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.office strong { font-size: 16px; display: block; margin-bottom: 4px; }
.office p, .office a { color: var(--muted); font-size: 14px; line-height: 1.75; }
.office a { display: block; transition: color .3s; }
.office a:hover { color: var(--gold); }
.office .lbl { color: var(--text); font-weight: 700; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--gold);
}
.to-top {
  width: 38px;
  height: 38px;
  border: 1px solid var(--gold);
  background: none;
  color: var(--gold);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.to-top:hover { background: var(--gold-grad); color: var(--bg); }
.to-top svg { width: 15px; height: 15px; }
@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* ============ Load / scroll animations ============
   Classes are added by JS: .a-split (headings, word by word), .a-up (text), .a-card (cards).
   Keyframes use `backwards` fill so once an element has animated in, its normal hover
   transforms and transitions take over again. --d is the stagger delay set by JS. */
.js .a-up:not(.in), .js .a-card:not(.in), .js .a-cap:not(.in) { opacity: 0; }
.a-up.in { animation: aUp .8s var(--ease) backwards; animation-delay: var(--d, 0ms); }
.a-card.in { animation: aCard .9s var(--ease) backwards; animation-delay: var(--d, 0ms); }
.a-cap.in { animation: aCap 1s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes aUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes aCard { from { opacity: 0; transform: translateY(44px) scale(.97); } }
@keyframes aCap { from { opacity: 0; transform: translateX(140px); } }

/* Headings: each word slides up from behind a mask */
.a-split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.a-split .w > span { display: inline-block; }
.js .a-split:not(.in) .w > span { transform: translateY(110%); }
.a-split.in .w > span {
  animation: aWord .9s var(--ease) backwards;
  animation-delay: calc(var(--d, 0ms) + var(--wi, 0) * 60ms);
}
@keyframes aWord { from { transform: translateY(110%); } }

/* Small details that play after their parent appears */
.eyebrow.in::before {
  transform-origin: left;
  animation: aLine .8s var(--ease) backwards, goldShine 2.8s linear infinite;
  animation-delay: calc(var(--d, 0ms) + .15s), 0s;
}
@keyframes aLine { from { transform: scaleX(0); } }
.step.in .step-num, .pillar.in .pillar-icon { animation: aPop .6s var(--ease) backwards; animation-delay: calc(var(--d, 0ms) + .35s); }
@keyframes aPop { from { opacity: 0; transform: scale(.4); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .a-up, .js .a-card, .js .a-cap, .pf-rise { opacity: 1; }
  .js .a-split .w > span { transform: none; }
  html { scroll-behavior: auto; }
}