/* ============================================================
   Shared sub-page layer.

   Loads AFTER style.css and never overrides it — every token,
   primitive (.btn, .section-label, .section-heading, .card--glass,
   .edge-fade) and the nav/footer come from the homepage sheet
   unchanged. Nothing here introduces a new colour, type size or
   spacing value that the homepage doesn't already use.
   ============================================================ */

/* ---------- Page shell ---------- */
/* Matches the homepage section rhythm exactly: 130px 6vw 150px,
   inner container min(1240px, 100%). */
.page-section { position: relative; width: 100%; overflow: hidden; background: var(--color-ink); padding: 130px 6vw 150px; }
.page-section--tight { padding: 110px 6vw 120px; }
.page-section--deep { background: var(--color-ink-deep); }
.page-inner { position: relative; z-index: 5; margin: 0 auto; width: min(1240px, 100%); }
.page-inner--wide { width: min(1360px, 100%); }

/* Reuses the homepage glow treatment (radial gold wash behind content). */
.page-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.page-glow--top { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(250, 169, 63, 0.1), transparent 60%); }
.page-glow--left { background: radial-gradient(ellipse 70% 60% at 18% 45%, rgba(250, 169, 63, 0.12), transparent 62%); }
.page-glow--right { background: radial-gradient(ellipse 70% 60% at 84% 40%, rgba(250, 169, 63, 0.11), transparent 62%); }

.page-head { display: flex; flex-direction: column; margin-bottom: 72px; }
.page-head--centered { align-items: center; text-align: center; }
.page-head__desc { margin: 24px 0 0; max-width: 620px; font-size: 16px; line-height: 1.8; color: rgba(244, 233, 214, 0.6); }
.page-head--centered .page-head__desc { margin-inline: auto; }

/* ---------- Page hero ----------
   Deliberately 72vh rather than the homepage's 100vh, and with no
   video: the cinematic film belongs to the homepage alone. Sub-pages
   open with the same word-mask reveal so the entrance still reads as
   the same site. */
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: 72vh; width: 100%; overflow: hidden; background: var(--color-ink); }
.page-hero__glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 66% 74% at 74% 16%, rgba(250, 169, 63, 0.17), transparent 62%); }
.page-hero__grid {
  position: absolute; inset: 0; z-index: 1; opacity: 0.5;
  background-image: linear-gradient(rgba(250, 189, 83, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(250, 189, 83, 0.05) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 20%, transparent 75%);
}
.page-hero__inner { position: relative; z-index: 5; margin: 0 auto; width: min(1240px, 100%); padding: 190px 6vw 96px; }
.page-hero__title {
  margin: 0; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--color-cream-bright); text-wrap: balance;
  font-size: clamp(46px, 5.6vw, 88px);
}
.page-hero__word-mask { display: inline-block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; vertical-align: top; }
.page-hero__word { display: inline-block; }
.page-hero__desc { margin: 30px 0 0; max-width: 520px; font-size: 17px; line-height: 1.75; color: rgba(244, 233, 214, 0.72); }
.page-hero__crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 233, 214, 0.4); }
.page-hero__crumb a { color: rgba(244, 233, 214, 0.4); }
.page-hero__crumb a:hover { color: var(--color-gold); }
.page-hero__crumb-sep { color: rgba(250, 189, 83, 0.5); }

/* ---------- Split feature (sticky column + scrolling column) ---------- */
.split { display: grid; grid-template-columns: 0.95fr 1fr; gap: 80px; align-items: start; }
.split__sticky { position: sticky; top: 140px; }
.split__quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--color-cream-bright);
}
.split__quote em { color: var(--color-gold); font-style: italic; }
.split__attrib { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.28em; color: rgba(244, 233, 214, 0.45); }
.split__attrib-line { display: block; width: 34px; height: 1px; background: var(--color-gold); flex: none; }
.split__body { display: flex; flex-direction: column; gap: 26px; }
.split__body p { margin: 0; font-size: 16.5px; line-height: 1.85; color: rgba(244, 233, 214, 0.68); }
.split__body p strong { color: var(--color-cream-bright); font-weight: 600; }
.split__lead { font-size: 19px !important; color: var(--color-cream) !important; }

/* ---------- Vision & Mission ---------- */
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(250, 189, 83, 0.13); border-radius: 22px; overflow: hidden; background: linear-gradient(to bottom right, rgba(255, 236, 205, 0.055), rgba(255, 236, 205, 0.015)); backdrop-filter: blur(12px); box-shadow: var(--shadow-card); }
.vm__pane { padding: 58px 54px; position: relative; }
.vm__pane + .vm__pane { border-left: 1px solid rgba(250, 189, 83, 0.15); }
.vm__mark { display: grid; place-items: center; height: 52px; width: 52px; border-radius: 16px; border: 1px solid rgba(250, 189, 83, 0.22); background: rgba(250, 189, 83, 0.06); margin-bottom: 28px; }
.vm__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.34em; color: var(--color-gold); margin-bottom: 20px; }
/* Vision is set in the serif, Mission in the sans — the typographic
   contrast is what distinguishes them, not a label. */
.vm__text { font-size: 21px; line-height: 1.6; color: var(--color-cream-bright); }
.vm__pane--vision .vm__text { font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.45; }
.vm__note { margin-top: 24px; font-size: 15px; line-height: 1.8; color: rgba(244, 233, 214, 0.55); }

/* ---------- Philosophy (full-bleed statement) ---------- */
.philosophy { position: relative; display: flex; align-items: center; justify-content: center; min-height: 78vh; width: 100%; overflow: hidden; background: var(--color-ink); padding: 120px 6vw; text-align: center; }
.philosophy__inner { position: relative; z-index: 5; max-width: 1000px; }
.philosophy__text {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(32px, 4.4vw, 68px); line-height: 1.22; letter-spacing: -0.015em;
  color: var(--color-cream-bright); text-wrap: balance;
}
.philosophy__text span { color: var(--color-gold); }
.philosophy__sub { margin: 40px auto 0; max-width: 560px; font-size: 16px; line-height: 1.85; color: rgba(244, 233, 214, 0.55); }

/* ---------- Timeline (horizontally pinned track) ---------- */
.timeline { position: relative; width: 100%; overflow: hidden; background: var(--color-ink); }
.timeline__viewport { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 110px 0 90px; }
.timeline__head { width: min(1240px, 100%); margin: 0 auto 64px; padding: 0 6vw; }
.timeline__track { display: flex; align-items: stretch; gap: 28px; padding: 0 6vw; will-change: transform; }
.timeline__rule { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(to right, transparent, rgba(250, 189, 83, 0.28) 12%, rgba(250, 189, 83, 0.28) 88%, transparent); z-index: 1; }
.timeline__node { position: relative; z-index: 2; flex: none; width: 330px; display: flex; flex-direction: column; gap: 20px; }
.timeline__year { font-family: var(--font-serif); font-style: italic; font-size: 46px; line-height: 1; color: var(--color-gold); }
.timeline__dot { height: 11px; width: 11px; border-radius: 9999px; background: var(--color-gold); box-shadow: 0 0 18px 5px rgba(250, 189, 83, 0.45); }
.timeline__card { padding: 30px 28px; border-radius: 22px; }
.timeline__card-title { font-size: 19px; font-weight: 600; color: var(--color-cream-bright); margin-bottom: 12px; letter-spacing: -0.01em; }
.timeline__card-desc { font-size: 14.5px; line-height: 1.8; color: rgba(244, 233, 214, 0.6); }
.timeline__hint { margin-top: 50px; padding: 0 6vw; display: flex; align-items: center; gap: 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(244, 233, 214, 0.35); }
.timeline__hint-line { display: block; width: 54px; height: 1px; background: linear-gradient(to right, var(--color-gold), transparent); }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.person { position: relative; overflow: hidden; border-radius: 22px; }
.person__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; background: linear-gradient(160deg, rgba(250, 189, 83, 0.1), rgba(13, 8, 5, 0.9)); }
.person__img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(0.82); transition: filter 0.55s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
.person:hover .person__img { filter: grayscale(0) contrast(1.03) brightness(1); transform: scale(1.05); }
/* Portrait stand-in until real photography lands — initials on the
   same gold gradient used elsewhere, so an empty slot still looks
   designed rather than broken. */
.person__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-style: italic; font-size: 62px; color: rgba(250, 189, 83, 0.32); }
.person__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 8, 5, 0.92) 0%, rgba(13, 8, 5, 0.25) 42%, transparent 68%); }
.person__meta { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; }
.person__name { font-size: 17px; font-weight: 600; color: var(--color-cream-bright); letter-spacing: -0.01em; }
.person__role { margin-top: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-gold); }
.person__bio { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: rgba(244, 233, 214, 0.62); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, margin-top 0.5s ease; }
.person:hover .person__bio, .person:focus-within .person__bio { max-height: 120px; opacity: 1; }
.person__border { position: absolute; inset: 0; border-radius: 22px; border: 1px solid rgba(250, 189, 83, 0.14); pointer-events: none; transition: border-color 0.35s ease; }
.person:hover .person__border { border-color: rgba(250, 189, 83, 0.42); }

/* ---------- Why choose (reasons + metrics) ---------- */
.why { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: start; }
.why__reasons { display: flex; flex-direction: column; gap: 18px; }
.why__reason { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 30px 32px; border-radius: 22px; }
.why__reason-mark { display: grid; place-items: center; height: 56px; width: 56px; border-radius: 18px; border: 1px solid rgba(250, 189, 83, 0.22); background: rgba(250, 189, 83, 0.06); }
.why__reason-title { font-size: 18px; font-weight: 600; color: var(--color-cream-bright); margin-bottom: 10px; letter-spacing: -0.01em; }
.why__reason-desc { font-size: 14.5px; line-height: 1.8; color: rgba(244, 233, 214, 0.6); }
.why__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(250, 189, 83, 0.13); background: rgba(250, 189, 83, 0.13); }
.metric { padding: 44px 32px; background: var(--color-ink); display: flex; flex-direction: column; gap: 10px; }
.metric__value { font-size: clamp(38px, 3.4vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--color-gold); font-variant-numeric: tabular-nums; }
.metric__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.24em; color: rgba(244, 233, 214, 0.5); }

/* ---------- Awards ---------- */
#awards [hidden] { display: none !important; }
.awards { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(250, 189, 83, 0.16); }
.award {
  display: grid; grid-template-columns: 108px 1fr auto; gap: 32px; align-items: baseline;
  padding: 30px 8px; border-bottom: 1px solid rgba(244, 233, 214, 0.07);
  transition: background 0.35s ease, padding 0.35s ease;
}
.award:hover { background: rgba(250, 189, 83, 0.045); padding-inline: 22px; }
.award__year { font-family: var(--font-serif); font-style: italic; font-size: 26px; color: var(--color-gold); font-variant-numeric: tabular-nums; }
.award__title { font-size: 18px; font-weight: 600; color: var(--color-cream-bright); letter-spacing: -0.01em; }
.award__body { font-size: 14px; line-height: 1.75; color: rgba(244, 233, 214, 0.55); margin-top: 6px; }
.award__org { font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(244, 233, 214, 0.42); white-space: nowrap; }

/* ---------- Accordion ----------
   Built once here, used three times: the Services detail rows, the Services FAQ,
   and later the Careers vacancy list. Height is animated from measured geometry
   in accordionScene(); this sheet only handles the resting appearance. */
.accordion { border-top: 1px solid rgba(250, 189, 83, 0.16); }
.acc-item { border-bottom: 1px solid rgba(244, 233, 214, 0.07); }
.acc-item[hidden] { display: none !important; }
.acc-trigger {
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
  width: 100%; padding: 28px 8px;
  border: none; background: none; text-align: left; color: inherit;
  transition: background 0.35s ease, padding 0.35s ease;
}
.acc-trigger:hover { background: rgba(250, 189, 83, 0.045); padding-inline: 20px; }
.acc-trigger:focus-visible { outline: 1px solid var(--color-gold); outline-offset: -2px; }
.acc-item[data-open="true"] .acc-trigger { background: rgba(250, 189, 83, 0.05); padding-inline: 20px; }
.acc-index { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--color-gold); font-variant-numeric: tabular-nums; }
.acc-title { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-cream-bright); }
.acc-sub { display: block; margin-top: 6px; font-size: 14px; color: rgba(244, 233, 214, 0.5); }
.acc-sign { position: relative; height: 18px; width: 18px; flex: none; }
.acc-sign::before, .acc-sign::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 1px; width: 100%;
  background: var(--color-gold); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.acc-sign::after { transform: rotate(90deg); }
.acc-item[data-open="true"] .acc-sign::after { transform: rotate(0deg); }
.acc-panel { overflow: hidden; }
.acc-panel__inner { padding: 2px 8px 36px; }
.acc-body { font-size: 15.5px; line-height: 1.85; color: rgba(244, 233, 214, 0.65); max-width: 70ch; }
.acc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; margin-top: 26px; }
.acc-list { display: flex; flex-direction: column; gap: 11px; }
.acc-list-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--color-gold); margin-bottom: 6px; }
.acc-list li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.7; color: rgba(244, 233, 214, 0.62); }
.acc-list li::before { content: ""; height: 1px; width: 12px; margin-top: 12px; background: rgba(250, 189, 83, 0.6); }
/* The heading row sits inside the same list for markup simplicity, so it opts out
   of the dash and the two-column grid. */
.acc-list li.acc-list-title { grid-template-columns: 1fr; }
.acc-list li.acc-list-title::before { content: none; }
.acc-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Services: overview constellation ---------- */
.svc-overview { display: grid; grid-template-columns: 0.85fr 1fr; gap: 76px; align-items: center; }
.svc-orbit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-orb { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
/* Flow-positioned variant of the homepage chip — same ring and glyph, released
   from the absolute placement the Section 03 scatter needs. */
.svc-icon--flow { position: static; margin: 0; opacity: 1; }
.svc-orb .svc-icon--flow { margin: 0; }
.svc-orb__label { font-size: 11.5px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 233, 214, 0.5); transition: color 0.3s ease; }
.svc-orb:hover .svc-orb__label { color: var(--color-gold); }

/* ---------- Services: cards ----------
   Uses the homepage .services__grid / .services__card / .services__icon-tile
   verbatim. Only the hover sweep and the count chip are new. */
/* The card is a <button> so it is keyboard-reachable and announces as actionable —
   these reset the UA defaults that would otherwise fight .services__card. */
.svc-card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; }
.svc-card:focus-visible { outline: 1px solid var(--color-gold); outline-offset: 3px; }
.svc-card__sweep {
  pointer-events: none; position: absolute; inset: 0; z-index: 1; border-radius: 22px; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(250, 189, 83, 0.11) 48%, transparent 66%);
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(-40%);
}
.svc-card:hover .svc-card__sweep { opacity: 1; transform: translateX(40%); }

/* ---------- Services: technologies ---------- */
.tech { display: flex; flex-direction: column; }
.tech__row { display: grid; grid-template-columns: 210px 1fr; gap: 40px; padding: 30px 0; border-bottom: 1px solid rgba(244, 233, 214, 0.07); align-items: start; }
.tech__row:first-child { border-top: 1px solid rgba(250, 189, 83, 0.16); }
.tech__group { font-size: 12px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--color-gold); padding-top: 6px; }
.tech__items { display: flex; flex-wrap: wrap; gap: 10px; }
.tech__item {
  padding: 9px 18px; border-radius: 9999px; font-size: 13.5px; letter-spacing: 0.01em;
  border: 1px solid rgba(250, 189, 83, 0.16); color: rgba(244, 233, 214, 0.72);
  background: rgba(255, 236, 205, 0.03);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.tech__item:hover { border-color: rgba(250, 189, 83, 0.55); color: var(--color-cream-bright); transform: translateY(-2px); }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; }
.filter-pill {
  border-radius: 9999px; padding: 11px 22px;
  border: 1px solid rgba(250, 189, 83, 0.18);
  background: rgba(255, 236, 205, 0.03);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  color: rgba(244, 233, 214, 0.66);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.filter-pill:hover { border-color: rgba(250, 189, 83, 0.5); color: var(--color-cream-bright); transform: translateY(-2px); }
.filter-pill:focus-visible { outline: 1px solid var(--color-gold); outline-offset: 3px; }
.filter-pill[aria-pressed="true"] {
  background: linear-gradient(to bottom, #ffce7a, #f5a93a);
  border-color: transparent; color: var(--color-dark-text); font-weight: 600;
  box-shadow: var(--shadow-gold);
}
.filter-count { margin-left: 8px; font-variant-numeric: tabular-nums; opacity: 0.55; font-size: 12px; }

/* ---------- Portfolio additions ----------
   The grid, cards, media frame, tag, shade, meta and link all come from
   style.css unchanged. Only the media fill, video preview and the filtered
   state are new. */
.pf-media__layer {
  position: absolute; inset: -8% 0; height: 116%; width: 100%;
  background: linear-gradient(158deg, rgba(250, 189, 83, 0.16), rgba(26, 16, 10, 0.9) 62%);
  will-change: transform;
}
.pf-media__img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.pf-media__video { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.portfolio__item:hover .pf-media__video { opacity: 1; }
.pf-media__play {
  position: absolute; right: 18px; top: 18px; z-index: 3;
  display: grid; place-items: center; height: 38px; width: 38px; border-radius: 9999px;
  border: 1px solid rgba(250, 189, 83, 0.3); background: rgba(24, 15, 8, 0.5); backdrop-filter: blur(12px);
}
/* The homepage's editorial offsets read as intentional across a full grid, but
   look like broken alignment once a filter thins it out. */
.portfolio__grid.is-filtered .portfolio__item--up,
.portfolio__grid.is-filtered .portfolio__item--down { margin-top: 0; }
.pf-empty { padding: 70px 0; text-align: center; font-size: 15px; color: rgba(244, 233, 214, 0.5); }

/* ---------- Featured project (full-bleed, alternating) ---------- */
.feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.feature + .feature { margin-top: 120px; }
.feature--flip .feature__media { order: 2; }
.feature__media {
  position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 16 / 10;
  border: 1px solid rgba(250, 189, 83, 0.15);
  background: linear-gradient(160deg, #1a100a, #241408);
  box-shadow: 0 34px 70px -32px rgba(0, 0, 0, 0.75), 0 0 44px -18px rgba(250, 169, 63, 0.25);
}
.feature__index { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--color-gold); margin-bottom: 18px; }
.feature__title { margin: 0 0 18px; font-size: clamp(28px, 2.8vw, 42px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: var(--color-cream-bright); text-wrap: balance; }
.feature__desc { margin: 0 0 26px; font-size: 16px; line-height: 1.85; color: rgba(244, 233, 214, 0.65); max-width: 46ch; }
.feature__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.feature__tag { border-radius: 9999px; border: 1px solid rgba(250, 189, 83, 0.2); padding: 7px 15px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 214, 148, 0.8); }
.feature__results { display: flex; flex-wrap: wrap; gap: 34px; margin-bottom: 32px; }
.feature__result-value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-gold); font-variant-numeric: tabular-nums; }
.feature__result-label { margin-top: 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(244, 233, 214, 0.45); }

/* ---------- Generic card grid ----------
   One grid driven by --cols, used for Culture (3), Core Values (4) and
   Benefits (3). Saves three near-identical grid declarations. */
.card-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 28px; }
.card-tile { padding: 38px 34px; display: flex; flex-direction: column; }
.card-tile__title { margin: 22px 0 12px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-cream-bright); }
.card-tile__desc { font-size: 14.5px; line-height: 1.8; color: rgba(244, 233, 214, 0.6); }
/* Shared icon plate. .vm__mark and .why__reason-mark predate this and are left
   as-is so About isn't disturbed; new pages use this one. */
.mark-tile {
  display: grid; place-items: center; height: 54px; width: 54px; flex: none;
  border-radius: 17px; border: 1px solid rgba(250, 189, 83, 0.22);
  background: rgba(250, 189, 83, 0.06);
}

/* ---------- Gallery (masonry of studio photography) ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gallery__item {
  position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid rgba(250, 189, 83, 0.14);
  background: linear-gradient(160deg, #1a100a, #241408);
  transition: border-color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery__item:hover { border-color: rgba(250, 189, 83, 0.4); transform: translateY(-6px); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__frame { position: relative; height: 100%; width: 100%; aspect-ratio: 4 / 3; }
.gallery__item--tall .gallery__frame { aspect-ratio: 4 / 6.2; }
.gallery__item--wide .gallery__frame { aspect-ratio: 8 / 3; }
.gallery__caption {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244, 233, 214, 0.55);
}

/* ---------- Open positions (accordion rows carrying job metadata) ---------- */
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.job-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 9999px; border: 1px solid rgba(250, 189, 83, 0.18);
  background: rgba(255, 236, 205, 0.03); padding: 7px 15px;
  font-size: 12.5px; color: rgba(244, 233, 214, 0.68);
}
.job-chip svg { flex: none; opacity: 0.8; }
.job-dept { font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-gold); }

/* ---------- Metric wall (generic n-column statistics strip) ---------- */
.metric-wall {
  display: grid; grid-template-columns: repeat(var(--metric-cols, 4), 1fr); gap: 1px;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(250, 189, 83, 0.13); background: rgba(250, 189, 83, 0.13);
}

/* ---------- Contact: split layout (info column + form card) ---------- */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.contact-info__sticky { position: sticky; top: 140px; }
.contact-info__desc { margin: 22px 0 44px; font-size: 16px; line-height: 1.85; color: rgba(244, 233, 214, 0.65); max-width: 46ch; }

.contact-details { display: flex; flex-direction: column; gap: 4px; margin-bottom: 40px; }
.contact-detail { display: grid; grid-template-columns: 50px 1fr; gap: 18px; align-items: center; padding: 16px 4px; border-bottom: 1px solid rgba(244, 233, 214, 0.07); }
.contact-detail__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; color: rgba(244, 233, 214, 0.42); margin-bottom: 4px; }
.contact-detail__value { display: block; font-size: 15.5px; color: var(--color-cream-bright); }
a.contact-detail__value:hover { color: var(--color-gold); }

.contact-social { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-social__link {
  display: grid; place-items: center; height: 46px; width: 46px; border-radius: 9999px;
  border: 1px solid rgba(250, 189, 83, 0.2); background: rgba(255, 236, 205, 0.03);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.contact-social__link:hover { border-color: rgba(250, 189, 83, 0.55); background: rgba(250, 189, 83, 0.08); transform: translateY(-3px); }

/* ---------- Contact: form card ---------- */
.contact-form { padding: 44px; display: flex; flex-direction: column; gap: 22px; }
#project-form { scroll-margin-top: 24px; }
.contact-form__title { font-size: 21px; font-weight: 600; color: var(--color-cream-bright); margin-bottom: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Floating label — placeholder=" " (a literal space, never empty) is required for
   :placeholder-shown to behave: an empty placeholder attribute still counts as
   "has a placeholder" for this pseudo-class, so the label only floats once the
   field genuinely holds a value or is focused. */
.field { position: relative; }
.field__input, .field__textarea {
  width: 100%; display: block;
  padding: 24px 20px 10px;
  font-family: var(--font-sans); font-size: 15px; color: var(--color-cream-bright);
  background: rgba(255, 236, 205, 0.03);
  border: 1px solid rgba(250, 189, 83, 0.16);
  border-radius: 14px;
  outline: none; appearance: none;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.field__textarea { min-height: 128px; resize: vertical; }
.field__input:hover, .field__textarea:hover { border-color: rgba(250, 189, 83, 0.3); }
.field__input:focus, .field__textarea:focus { border-color: rgba(250, 189, 83, 0.6); background: rgba(255, 236, 205, 0.05); box-shadow: 0 0 0 3px rgba(250, 189, 83, 0.08); }
.field__label {
  position: absolute; left: 21px; top: 22px; transform-origin: left top;
  font-size: 15px; color: rgba(244, 233, 214, 0.42); pointer-events: none;
  transition: top 0.25s cubic-bezier(0.22, 1, 0.36, 1), font-size 0.25s ease, letter-spacing 0.25s ease, color 0.25s ease;
}
.field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label,
.field__textarea:focus ~ .field__label, .field__textarea:not(:placeholder-shown) ~ .field__label {
  top: 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-gold);
}
.field__error { display: block; min-height: 18px; margin-top: 6px; font-size: 12.5px; color: #f2a9b8; opacity: 0; transition: opacity 0.25s ease; }
.field--invalid .field__input, .field--invalid .field__textarea { border-color: rgba(242, 169, 184, 0.6); }
.field--invalid .field__error { opacity: 1; }

/* Radio/checkbox groups presented as pills/box — real inputs, visually hidden,
   driving a styled sibling via :checked so the group stays natively accessible
   and validatable (required on one radio in a name-group covers the whole
   group) instead of being a JS-only fake control. */
.field__group-label { display: block; margin-bottom: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; color: rgba(244, 233, 214, 0.45); }
.pill-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-input { position: absolute; opacity: 0; height: 1px; width: 1px; pointer-events: none; }
.pill {
  display: inline-flex; align-items: center; cursor: pointer; user-select: none;
  border-radius: 9999px; padding: 10px 20px;
  border: 1px solid rgba(250, 189, 83, 0.18); background: rgba(255, 236, 205, 0.03);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: rgba(244, 233, 214, 0.66);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pill:hover { border-color: rgba(250, 189, 83, 0.5); color: var(--color-cream-bright); transform: translateY(-2px); }
.pill-input:checked + .pill { background: linear-gradient(to bottom, #ffce7a, #f5a93a); border-color: transparent; color: var(--color-dark-text); font-weight: 600; box-shadow: var(--shadow-gold); }
.pill-input:focus-visible + .pill { outline: 1px solid var(--color-gold); outline-offset: 3px; }

.checkbox { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.checkbox__input { position: absolute; opacity: 0; height: 1px; width: 1px; }
.checkbox__box { position: relative; flex: none; margin-top: 2px; height: 20px; width: 20px; border-radius: 6px; border: 1px solid rgba(250, 189, 83, 0.3); background: rgba(255, 236, 205, 0.03); transition: background 0.25s ease, border-color 0.25s ease; }
.checkbox__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--color-dark-text); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.checkbox__input:checked + .checkbox__box { background: linear-gradient(to bottom, #ffce7a, #f5a93a); border-color: transparent; }
.checkbox__input:checked + .checkbox__box::after { transform: rotate(45deg) scale(1); }
.checkbox__input:focus-visible + .checkbox__box { outline: 1px solid var(--color-gold); outline-offset: 3px; }
.checkbox__text { font-size: 13.5px; line-height: 1.65; color: rgba(244, 233, 214, 0.6); }
.checkbox__text a { color: var(--color-gold); }
.field--invalid .checkbox__box { border-color: rgba(242, 169, 184, 0.6); }

.contact-form__submit { margin-top: 6px; justify-content: center; width: 100%; }
.contact-form__status { min-height: 20px; font-size: 13.5px; text-align: center; color: rgba(244, 233, 214, 0.55); transition: color 0.3s ease; }
.contact-form__status--success { color: var(--color-gold); }

/* ---------- Contact: map ---------- */
.map-frame {
  position: relative; aspect-ratio: 21 / 8; overflow: hidden; border-radius: 26px;
  border: 1px solid rgba(250, 189, 83, 0.18);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.7), 0 0 60px -18px rgba(250, 169, 63, 0.28);
}
.map-frame iframe {
  position: absolute; inset: 0; height: 100%; width: 100%; border: 0;
  /* Fakes a dark map to match the theme — the no-API embed endpoint has no
     native dark mode, so this inverts + re-hues rather than shipping a bright
     white rectangle in an otherwise all-dark page. */
  filter: invert(0.92) hue-rotate(180deg) contrast(0.9) brightness(0.95);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-info__sticky { position: static; }
  .contact-form { padding: 34px 28px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .svc-overview { grid-template-columns: 1fr; gap: 48px; }
  .feature { grid-template-columns: 1fr; gap: 34px; }
  .feature--flip .feature__media { order: 0; }
  .feature + .feature { margin-top: 84px; }
  .metric-wall { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .card-tile { padding: 30px 26px; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .gallery__item--wide { grid-column: span 2; }
  .acc-grid { grid-template-columns: 1fr; gap: 28px; }
  .tech__row { grid-template-columns: 1fr; gap: 16px; }

  .page-section { padding: 100px 6vw 110px; }
  .page-hero__inner { padding: 170px 6vw 76px; }
  .page-head { margin-bottom: 54px; }

  .split { grid-template-columns: 1fr; gap: 44px; }
  .split__sticky { position: static; }

  .vm { grid-template-columns: 1fr; }
  .vm__pane { padding: 44px 38px; }
  .vm__pane + .vm__pane { border-left: none; border-top: 1px solid rgba(250, 189, 83, 0.15); }

  .team { grid-template-columns: repeat(2, 1fr); }

  .why { grid-template-columns: 1fr; gap: 44px; }

  .timeline__node { width: 290px; }
}

@media (max-width: 640px) {
  .contact-form { padding: 26px 20px; }
  .contact-detail { grid-template-columns: 42px 1fr; gap: 14px; }
  .map-frame { aspect-ratio: 4 / 5; border-radius: 20px; }
  .card-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__item--tall, .gallery__item--wide { grid-row: auto; grid-column: auto; }
  .gallery__item--tall .gallery__frame, .gallery__item--wide .gallery__frame { aspect-ratio: 4 / 3; }
  .job-meta { gap: 6px; }
  .job-chip { padding: 6px 12px; font-size: 11.5px; }

  .filter-bar { gap: 8px; margin-bottom: 38px; }
  .filter-pill { padding: 9px 16px; font-size: 12.5px; }
  .filter-count { display: none; }
  .feature__results { gap: 22px; }
  .metric-wall { grid-template-columns: repeat(2, 1fr); }

  .svc-orbit { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .svc-orb__label { font-size: 10.5px; letter-spacing: 0.1em; }
  .acc-trigger { grid-template-columns: auto 1fr auto; gap: 16px; padding: 22px 4px; }
  .acc-index { font-size: 17px; }
  .acc-title { font-size: 16.5px; }
  .acc-panel__inner { padding-bottom: 28px; }

  .page-section { padding: 84px 6vw 92px; }
  .page-hero { min-height: 66vh; }
  .page-hero__inner { padding: 148px 6vw 62px; }
  .page-head { margin-bottom: 42px; }

  .vm__pane { padding: 36px 26px; }
  .vm__pane--vision .vm__text { font-size: 22px; }
  .vm__text { font-size: 18px; }

  .philosophy { min-height: 62vh; padding: 90px 6vw; }
  .philosophy__sub { margin-top: 28px; }

  .team { grid-template-columns: 1fr; gap: 20px; }
  .person__bio { max-height: 120px; opacity: 1; }

  .why__reason { grid-template-columns: 1fr; gap: 16px; padding: 26px 24px; }
  .why__metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: 30px 22px; }

  .award { grid-template-columns: 68px 1fr; gap: 18px; padding: 24px 4px; }
  .award:hover { padding-inline: 10px; }
  .award__year { font-size: 21px; }
  .award__org { grid-column: 2; }

  .timeline__viewport { min-height: auto; padding: 84px 0 70px; }
  .timeline__node { width: 268px; }
  .timeline__year { font-size: 36px; }
}

/* ---------- About: journey becomes a swipe row on phones ---------- */
@media (max-width: 768px) {
  .timeline__track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 6vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none !important;
    padding-bottom: 8px;
  }
  .timeline__track::-webkit-scrollbar { display: none; }
  .timeline__node { scroll-snap-align: start; }
  .timeline__rule { display: none; }
}

/* ---------- Contact: map directions ---------- */
.map-actions { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- Careers: apply modal ---------- */
html.has-modal, html.has-modal body { overflow: hidden; }
.apply-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.apply-modal.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.apply-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 5, 3, 0.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.apply-modal__dialog.contact-form {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(160deg, rgba(38, 23, 12, 0.97), rgba(15, 9, 5, 0.98));
  border: 1px solid rgba(250, 189, 83, 0.22);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 60px -24px rgba(250, 169, 63, 0.3);
  transform: translateY(28px) scale(0.98);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 189, 83, 0.35) transparent;
}
.apply-modal.is-open .apply-modal__dialog { transform: none; }
.apply-modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 9999px;
  border: 1px solid rgba(250, 189, 83, 0.3);
  background: rgba(13, 8, 5, 0.6);
  color: var(--color-cream-bright);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.apply-modal__close:hover { background: var(--color-gold); color: var(--color-dark-text); transform: rotate(90deg); }
.apply-modal__head { padding-right: 48px; }
.apply-modal__head .section-label { margin-bottom: 14px; }
.apply-modal__title { margin: 0 0 12px; font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-cream-bright); }
.apply-modal__desc { margin: 0; max-width: 520px; font-size: 14.5px; line-height: 1.7; color: rgba(244, 233, 214, 0.6); }

.apply-upload {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 20px;
  text-align: center;
  border: 1.5px dashed rgba(250, 189, 83, 0.35);
  border-radius: 16px;
  background: rgba(255, 236, 205, 0.025);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.apply-upload > p { display: contents; }
.apply-upload:hover, .apply-upload.is-dragover { border-color: rgba(250, 189, 83, 0.75); background: rgba(250, 189, 83, 0.06); }
.apply-upload.is-dragover { box-shadow: 0 0 0 4px rgba(250, 189, 83, 0.08); }
.apply-upload:focus-within { border-color: rgba(250, 189, 83, 0.75); box-shadow: 0 0 0 3px rgba(250, 189, 83, 0.12); }
.apply-upload.has-file { border-style: solid; border-color: rgba(250, 189, 83, 0.6); background: rgba(250, 189, 83, 0.05); }
.apply-upload__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 4px;
  border-radius: 16px;
  border: 1px solid rgba(250, 189, 83, 0.25);
  border-top-color: rgba(250, 189, 83, 0.6);
  background: linear-gradient(to bottom right, rgba(255, 236, 205, 0.07), rgba(255, 236, 205, 0.015));
  box-shadow: 0 0 26px rgba(250, 189, 83, 0.13);
}
.apply-upload__title { font-size: 15px; font-weight: 500; color: var(--color-cream-bright); }
.apply-upload__browse { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; }
.apply-upload__hint { font-size: 12.5px; color: rgba(244, 233, 214, 0.5); word-break: break-all; }
.apply-upload.has-file .apply-upload__hint { color: var(--color-gold); }
.apply-upload .wpcf7-form-control-wrap { position: static; }
.apply-upload .apply-upload__input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.apply-upload .wpcf7-not-valid-tip { position: relative; z-index: 1; pointer-events: none; }

@media (max-width: 640px) {
  .apply-modal { padding: 12px; align-items: flex-end; }
  .apply-modal__dialog.contact-form { max-height: calc(100dvh - 24px); padding: 28px 20px; }
  .apply-modal__close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .apply-upload { padding: 24px 16px; }
}