/* ==========================================================================
   Tanuki Works — Tanuki Solutions Sdn. Bhd.
   Implementation of the approved earth-tone system (design/Tanuki Design System).
   Seventeen colour values, two type voices, an 8pt scale. Nothing else.
   ========================================================================== */

:root {
  /* --- Surfaces: three tiers, darkest first ----------------------------- */
  --base:          #13100D;  /* page background — the ground everything sits on */
  --surface:       #2A211C;  /* dark brown — banded sections, footer, tiles */
  --surface-lift:  #3B2F27;  /* lighter brown — raised cards, nav pill, drawers */
  --surface-high:  #4A3B31;  /* one step further up, for hover only */

  /* --- Light fills. Never grounds; only buttons and marks --------------- */
  --sand:          #EFE6D6;  /* primary button, active filter */
  --ivory:         #F6F1E8;  /* primary text — 16.8:1 on base */

  /* --- Text ------------------------------------------------------------- */
  --ivory-soft:    #CFC3B4;  /* body copy — 10.9:1 on base, 9.1:1 on surface */
  --muted:         #B5A99A;  /* secondary text — 8.2:1 on base, 5.6:1 on lift */
  --ink:           #1E1814;  /* only ever on a sand or ochre fill */

  /* --- Accents ---------------------------------------------------------- */
  --clay:          #B8613F;  /* fill, rule and display numeral only — 4.3:1 */
  --clay-light:    #E39A72;  /* every clay-coloured text and link — 8.2:1 */
  --clay-bright:   #E8A87C;  /* inner stop of the hero bloom. Never text */
  --ochre:         #E0B268;  /* the single conversion action, and link hover */
  --olive:         #C3C0A4;  /* eyebrows, line icons, tags — 10.3:1 on base */
  --olive-deep:    #6F7457;  /* decorative strokes where contrast is moot */

  /* --- Lines ------------------------------------------------------------ */
  --line:          rgba(246, 241, 232, 0.10);
  --line-strong:   rgba(246, 241, 232, 0.20);

  /* --- Type ------------------------------------------------------------- */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.5rem, 1.31rem + 3.87vw, 4.5rem);      /* 40 → 72 */
  --fs-h2: clamp(2rem, 1.4rem + 1.94vw, 3rem);           /* 32 → 48 */
  --fs-h3: clamp(1.5rem, 1.2rem + 0.97vw, 2rem);         /* 24 → 32 */
  --fs-quote: clamp(1.75rem, 1.3rem + 1.45vw, 2.5rem);   /* 28 → 40 */
  --fs-cta: clamp(2.25rem, 1.36rem + 2.9vw, 3.5rem);     /* 36 → 56 */
  --fs-body: clamp(1rem, 0.94rem + 0.19vw, 1.125rem);    /* 16 → 18 */
  --fs-ui: 1rem;
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* --- Space ------------------------------------------------------------ */
  --band-y: clamp(4.5rem, 2.3rem + 7.1vw, 7.5rem);       /* 72 → 120 */
  --page-x: clamp(1.5rem, -0.17rem + 5.4vw, 5rem);       /* 24 → 80 */
  --col-gap: clamp(2.5rem, 0.71rem + 5.8vw, 6rem);       /* 40 → 96 */
  --max-w: 1280px;

  /* --- Radius ----------------------------------------------------------- */
  --r-pill: 999px;
  --r-image: 6px;
  --r-card: 4px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Textures --------------------------------------------------------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ivory);
  font-family: var(--ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, blockquote, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   Browser surfaces — the parts we did not draw still carry the design
   -------------------------------------------------------------------------- */

::selection { background: var(--ochre); color: var(--ink); }
body { caret-color: var(--clay); }

* { scrollbar-width: thin; scrollbar-color: var(--surface-lift) var(--base); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--base); }
::-webkit-scrollbar-thumb { background: var(--surface-lift); border: 3px solid var(--base); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface-high); }

:focus-visible {
  outline: 2px solid var(--clay-light);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-nav {
  position: absolute;
  left: 1.5rem;
  top: -100px;
  z-index: 200;
  background: var(--ochre);
  color: var(--ink);
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-ui);
  font-weight: 600;
  transition: top 200ms var(--ease-out);
}
.skip-nav:focus { top: 1.5rem; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.display-1, .display-2, .display-3 {
  font-family: var(--display);
  font-weight: 400;
  color: inherit;
  text-wrap: balance;
}
.display-1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; }
.display-2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.015em; }
.display-3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; font-weight: 500; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 1.5rem;
}

.lede { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); max-width: 60ch; }

.prose { color: var(--ivory-soft); }
.prose p { max-width: 68ch; margin-bottom: 1.5rem; }
.prose p:last-child { margin-bottom: 0; }

.caption { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.band {
  padding: var(--band-y) var(--page-x);
  position: relative;
}
/* The three tiers the whole page is built from. */
.band--base { background: var(--base); }
.band--surface { background: var(--surface); overflow: hidden; }
.band--lift { background: var(--surface-lift); overflow: hidden; }
.band--hairline { border-top: 1px solid var(--line); }

.band__inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; }

.grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.band-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--col-gap);
  margin-bottom: 3.5rem;
}
.band-head__aside { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); max-width: 26rem; flex: none; }

.band-head--label { align-items: baseline; margin-bottom: 3rem; }
.band-head--label .eyebrow { margin-bottom: 0; }
.band-head--label .band-head__aside { max-width: none; text-align: right; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Navigation — floating pill + detached CTA
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 1.25rem;
  left: clamp(1rem, -0.2rem + 3.9vw, 3rem);
  right: clamp(1rem, -0.2rem + 3.9vw, 3rem);
  z-index: 100;
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.nav-pill {
  flex: 1;
  min-width: 0;
  height: 60px;
  border-radius: var(--r-pill);
  background: rgba(59, 47, 39, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(246, 241, 232, 0.08);
  display: flex;
  align-items: center;
  padding: 0 0.75rem 0 1.75rem;
  gap: 2rem;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.site-header.is-scrolled .nav-pill {
  background: rgba(59, 47, 39, 0.98);
  box-shadow: 0 12px 32px rgba(30, 24, 20, 0.28);
}
.site-header.is-scrolled .btn-cta-nav { box-shadow: 0 12px 32px rgba(30, 24, 20, 0.24); }

.wordmark {
  font-family: var(--display);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ivory);
  white-space: nowrap;
  transition: color 160ms ease;
}
.wordmark span { color: var(--clay-light); }
.wordmark:hover { color: var(--ivory); }
.wordmark:hover span { color: var(--ochre); }

.nav-links {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav-item { position: relative; }
.nav-link {
  color: var(--ivory);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0;
  white-space: nowrap;
  transition: color 160ms ease;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--clay-light); }
.nav-link.is-active { color: var(--clay-light); }
.nav-link__chev { width: 9px; height: 9px; opacity: 0.6; transition: transform 200ms var(--ease-out), opacity 160ms ease; flex: none; }
.nav-item:hover .nav-link__chev, .nav-item:focus-within .nav-link__chev { transform: rotate(180deg); opacity: 1; }

.nav-drop {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 19rem;
  background: var(--surface-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 0.75rem;
  box-shadow: 0 20px 44px rgba(30, 24, 20, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 200ms;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -0.875rem; height: 0.875rem; }
.nav-drop a {
  display: block;
  padding: 0.75rem 0.875rem;
  color: var(--ivory-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 3px;
  transition: background 160ms ease, color 160ms ease;
}
.nav-drop a:hover, .nav-drop a:focus-visible { background: rgba(246, 241, 232, 0.07); color: var(--ivory); }

.nav-search {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  color: var(--ivory);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.nav-search:hover { border-color: var(--clay-light); background: rgba(246, 241, 232, 0.06); }

.btn-cta-nav {
  height: 60px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--ochre);
  color: var(--ink);
  display: flex;
  align-items: center;
  padding: 0 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.btn-cta-nav:hover { background: #EBC182; }

.nav-toggle, .nav-mobile-cta { display: none; }

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: var(--r-pill);
  padding: 0.9375rem 2.125rem;
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--sand); color: var(--ink); }
.btn--primary:hover { background: var(--ivory); }

.btn--ghost { border: 1px solid var(--ivory); color: var(--ivory); padding: 0.875rem 2.125rem; font-weight: 500; }
.btn--ghost:hover { background: rgba(246, 241, 232, 0.1); }

.btn--cta { background: var(--ochre); color: var(--ink); padding: 1.125rem 2.75rem; }
.btn--cta:hover { background: #EBC182; }

.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clay-light);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms ease;
}
.link-arrow svg { transition: transform 260ms var(--ease-out); flex: none; }
.link-arrow:hover { color: var(--ochre); }
.link-arrow:hover svg { transform: translateX(4px); }

a { color: var(--clay-light); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { color: var(--ochre); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--base);
  color: var(--ivory);
  overflow: hidden;
  min-height: 880px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 11rem var(--page-x) 6rem;
}
.hero--inner { min-height: 820px; padding-top: 11rem; }



.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin: 0 auto; }
.hero__eyebrow { color: var(--olive); margin-bottom: 2rem; }
.hero .display-1 { color: var(--ivory); max-width: 20ch; margin-bottom: 1.75rem; }
.hero__lede { font-size: var(--fs-body); line-height: 1.6; color: var(--ivory-soft); max-width: 560px; margin: 0 0 2.5rem; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-ui);
  color: var(--ivory);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--ivory); text-decoration: underline; text-underline-offset: 5px; }
.breadcrumb a:hover { color: var(--clay-light); }
.breadcrumb span[aria-hidden] { color: var(--muted); }
.breadcrumb__current { color: var(--ivory-soft); }

/* --------------------------------------------------------------------------
   Philosophy
   -------------------------------------------------------------------------- */

.quote {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.2;
  color: var(--ivory);
  margin: 0 0 2.25rem;
  text-wrap: pretty;
}
.quote__attrib { font-size: var(--fs-ui); color: var(--muted); }
.figure-mark { display: flex; justify-content: center; }
.figure-mark svg { width: min(100%, 520px); height: auto; }

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

.card-grid { display: grid; gap: 1.5rem; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.service-card {
  background: var(--surface-lift);
  border-radius: var(--r-card);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 280px;
  text-decoration: none;
  color: var(--ivory);
  border: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease, transform 320ms var(--ease-out);
}
.service-card:hover {
  background: var(--surface-high);
  border-color: var(--line);
  transform: translateY(-3px);
  color: var(--ivory);
}
.service-card__icon { color: var(--olive); }
.service-card p { color: var(--muted); font-size: var(--fs-ui); line-height: 1.6; flex: 1; }
.service-card .link-arrow { margin-top: auto; }
.service-card__sectors {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Methodology
   -------------------------------------------------------------------------- */

.method-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.25rem; }
.method-step { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.method-step__num {
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--clay-light);
  font-variant-numeric: lining-nums tabular-nums;
}
.method-step__title {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ivory);
  margin-top: 1rem;
  line-height: 1.3;
  /* Seven columns at ~166px wrap these titles to one or two lines. Reserving
     two keeps every summary starting on the same baseline across the row. */
  min-height: 2.6em;
}
.method-step__body { font-size: var(--fs-caption); line-height: 1.55; color: var(--muted); margin-top: 0.625rem; }

.method-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--col-gap); }
.method-row__sectors {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: 0.875rem;
}
.method-row {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0;
  display: flex;
  gap: 2rem;
}
.method-row:last-child, .method-row:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.method-row__num {
  font-family: var(--display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--clay-light);
  width: 4rem;
  flex: none;
  font-variant-numeric: lining-nums tabular-nums;
}
.method-row__title { font-size: 1.1875rem; font-weight: 600; color: var(--ivory); }
.method-row__body { font-size: var(--fs-ui); line-height: 1.6; color: var(--muted); margin-top: 0.625rem; max-width: 46ch; }

/* --------------------------------------------------------------------------
   Works
   -------------------------------------------------------------------------- */

.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }

.work-card { text-decoration: none; color: inherit; display: block; }
.work-card__frame {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-image);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
}
/* A frame on a raised band steps up a tier so it still separates. */
.band--surface .work-card__frame { background: var(--surface-lift); }
.band--lift .work-card__frame { background: var(--surface-high); }
.work-card__frame img,
.work-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out), filter 400ms ease;
  filter: saturate(0.92);
}
.work-card:hover .work-card__frame img,
.work-card:hover .work-card__video,
.work-card:focus-visible .work-card__video { transform: scale(1.03); filter: saturate(1); }

/* Play cue — retires once the clip is actually running. */
.work-card__cue {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: rgba(42, 33, 28, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ivory);
  display: grid;
  place-items: center;
  padding-left: 2px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 240ms var(--ease-out);
  pointer-events: none;
}
.work-card__frame:hover .work-card__cue { opacity: 1; transform: none; }
.work-card__frame.is-playing .work-card__cue { opacity: 0; }
.work-card__title {
  font-family: var(--display);
  font-size: 1.625rem;
  line-height: 1.2;
  margin-top: 1.25rem;
  color: inherit;
  transition: color 160ms ease;
}
.work-card:hover .work-card__title { color: var(--clay-light); }
.work-card__meta { margin-top: 0.375rem; }

.work-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--surface);
}
.work-card__placeholder span {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--muted);
  text-align: center;
}

.filters { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 3rem; }
.filter {
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  padding: 0.6875rem 1.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.filter:hover { border-color: var(--ivory); color: var(--ivory); }
.filter.is-active { background: var(--sand); border-color: var(--sand); color: var(--ink); }

.work-index { border-top: 1px solid var(--line); }
.work-index__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: color 160ms ease;
}
.work-index__row:hover { color: var(--clay-light); }
.work-index__name {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.2;
  transition: transform 260ms var(--ease-out);
}
.work-index__row:hover .work-index__name { transform: translateX(0.75rem); }
.work-index__sector { font-size: var(--fs-caption); color: var(--muted); }
.work-index__year { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  padding: 4rem 2rem;
  text-align: center;
  color: var(--muted);
}
.empty-state__title { font-family: var(--display); font-size: 1.75rem; color: var(--ivory); margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   Figure / imagery
   -------------------------------------------------------------------------- */

.portrait {
  border-radius: var(--r-image);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) sepia(0.12) contrast(1.02); }

.landscape { border-radius: var(--r-image); overflow: hidden; aspect-ratio: 3 / 2; background: var(--surface-lift); }
.landscape img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) sepia(0.1) contrast(1.02); }

/* --------------------------------------------------------------------------
   Stat / definition pairs
   -------------------------------------------------------------------------- */

.def-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.def__term {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.25rem;
}
.def__body { font-size: var(--fs-body); line-height: 1.6; max-width: 52ch; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band { text-align: center; padding-block: calc(var(--band-y) * 1.17); }
.cta-band .display-1 { font-size: var(--fs-cta); margin-bottom: 1.5rem; }
.cta-band p { font-size: var(--fs-body); color: var(--muted); margin: 0 auto 2.5rem; max-width: 46ch; }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--wide { grid-column: 1 / -1; }
.field__label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
}
.field__req { color: var(--clay-light); }

.field-input {
  width: 100%;
  background: var(--base);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 0.875rem 1rem;
  font-size: var(--fs-ui);
  color: var(--ivory);
  transition: border-color 200ms ease, background 200ms ease;
}
.field-input::placeholder { color: var(--muted); opacity: 1; }
.field-input:hover { border-color: var(--muted); }
.field-input:focus { border-color: var(--clay-light); outline: 2px solid rgba(227, 154, 114, 0.24); outline-offset: 0; background: var(--surface); }
textarea.field-input { resize: vertical; min-height: 8.5rem; line-height: 1.6; }

.field-select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23B5A99A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.field--error .field-input { border-color: var(--clay); background: #241713; }
.field__error {
  font-size: var(--fs-caption);
  color: var(--clay-light);
  display: flex;
  align-items: flex-start;
  gap: 0.4375rem;
}
.field__error svg { flex: none; margin-top: 0.1875rem; }

.form-note { font-size: var(--fs-caption); color: var(--muted); margin-top: 1.5rem; max-width: 52ch; }

.messages-wrapper { position: fixed; top: 6rem; left: 50%; transform: translateX(-50%); z-index: 90; width: min(30rem, calc(100vw - 2rem)); }
.alert {
  background: var(--surface-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--ivory);
  box-shadow: 0 12px 32px rgba(30, 24, 20, 0.14);
}
.alert-error { background: #241713; border-color: rgba(227, 154, 114, 0.3); color: var(--clay-light); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Bottom padding clears the WhatsApp button, which would otherwise sit on the
   legal links at the end of the page. */
.site-footer { background: var(--surface); color: var(--ivory); padding: 4rem var(--page-x) 2.5rem; }
.site-footer__inner { max-width: var(--max-w); margin: 0 auto; }
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--col-gap);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand { display: inline-block; margin-bottom: 1.125rem; text-decoration: none; }
.footer-brand .wordmark { font-size: 1.5rem; }
.footer-address { font-size: var(--fs-caption); line-height: 1.65; color: var(--muted); font-style: normal; }
.footer-email { font-size: var(--fs-caption); margin-top: 0.875rem; display: inline-block; }
.footer-col__label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a { font-size: var(--fs-caption); color: var(--ivory-soft); text-decoration: none; transition: color 160ms ease; }
.footer-col a:hover { color: var(--clay-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.5rem;
  /* Keeps the legal links out from under the floating WhatsApp button, which
     is what the old oversized bottom padding was really buying. */
  padding-right: var(--fab-clear);
  font-size: var(--fs-caption);
  color: var(--muted);
  flex-wrap: wrap;
}
.footer-bottom nav { display: flex; gap: 1.5rem; }
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--clay-light); }

/* --------------------------------------------------------------------------
   WhatsApp
   -------------------------------------------------------------------------- */

.wa-fab {
  position: fixed;
  right: clamp(1rem, -0.2rem + 3.9vw, 2.5rem);
  bottom: clamp(1rem, -0.2rem + 3.9vw, 2.5rem);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 52px;
  padding: 0 1.375rem;
  border-radius: var(--r-pill);
  background: var(--surface-lift);
  color: var(--ivory);
  border: 1px solid var(--line-strong);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(30, 24, 20, 0.24);
  transition: background 200ms ease, transform 260ms var(--ease-out), color 200ms ease;
}
.wa-fab:hover { background: var(--surface-high); color: var(--ivory); transform: translateY(-2px); }
.wa-fab svg { flex: none; }
.wa-fab__label { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Motion — slow and few
   -------------------------------------------------------------------------- */

/* The entrance is a nicety; the content is not. Three independent guards keep
   a section from ever staying invisible: no-JS reveals immediately, the
   observer reveals on scroll, and this declarative animation reveals anything
   still hidden after 10s — including a tab restored from the background, where
   timers and observer callbacks are frozen. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-failsafe 0.01s linear 10s forwards;
}
.js-on .reveal { transition: opacity 400ms ease-out, transform 400ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js-on) .reveal { opacity: 1; transform: none; animation: none; }

@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .method-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem 1.25rem; }
  .method-step__title { min-height: 0; }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .nav-links { gap: 1.5rem; }
  .nav-pill { padding-left: 1.75rem; gap: 1.5rem; }
}

@media (max-width: 1024px) {
  .site-header { top: 1rem; left: 1rem; right: 1rem; }
  .nav-pill { height: 54px; padding: 0 0.625rem 0 1.25rem; gap: 0.75rem; }
  .wordmark { font-size: 1.375rem; }
  .nav-search { display: none; }
  .btn-cta-nav { display: none; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--r-pill);
  }
  .nav-toggle span { width: 20px; height: 1px; background: var(--ivory); transition: transform 260ms var(--ease-out), opacity 200ms ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .nav-mobile-cta {
    /* nav-links is fixed at this width, so push the controls to the right edge */
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--ochre);
    color: var(--ink);
    display: grid;
    place-items: center;
    text-decoration: none;
  }
  .nav-mobile-cta:hover { color: var(--ink); background: #EBC182; }

  .nav-links {
    position: fixed;
    /* The pill's backdrop-filter makes it a backdrop root, and a fixed child
       with z-index:auto can end up painting under page content in Chrome.
       An explicit stacking context above the header settles the paint order. */
    z-index: 120;
    isolation: isolate;
    top: 4.75rem;
    left: 1rem;
    right: 1rem;
    max-height: calc(100dvh - 6.25rem);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--surface-lift);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: 0.75rem;
    box-shadow: 0 24px 56px rgba(30, 24, 20, 0.42);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 240ms ease, transform 240ms var(--ease-out), visibility 240ms;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-item:last-child { border-bottom: 0; }
  .nav-link { padding: 1rem 0.875rem; width: 100%; justify-content: space-between; font-size: 1.0625rem; }
  .nav-link__chev { opacity: 0.5; }
  .nav-item:hover .nav-link__chev { transform: none; }

  .nav-drop {
    position: static;
    /* Expanded inline and always open at this width, so there is no state to
       animate between and a transition only shows as an unwanted slide. */
    transition: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.75rem 0.875rem;
  }
  /* The desktop rule that opens the dropdown is `.nav-item:focus-within
     .nav-drop` (0,3,0) and it sets transform: translate(-50%, 0). A media
     query adds no specificity, so the plain `.nav-drop` above (0,1,0) cannot
     undo it: tapping Services gave the item focus and threw the now
     full-width panel half its own width off the left edge. Match the
     specificity to hold it in place. */
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop { transform: none; }

  .nav-drop::before { display: none; }
  .nav-drop a { padding: 0.5rem 0; font-size: 0.9375rem; color: var(--muted); }
}

@media (max-width: 900px) {
  .split, .def-grid, .form-grid { grid-template-columns: 1fr; }
  .split { gap: 2.75rem; }
  .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .method-list { grid-template-columns: 1fr; gap: 0; }
  .method-row:nth-last-child(2) { border-bottom: 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .band-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .band-head__aside { max-width: 46ch; }
  .hero { min-height: 680px; padding: 9rem var(--page-x) 3.5rem; }
  .hero--inner { min-height: 620px; padding-top: 9.5rem; }
  .split--reverse-mobile { display: flex; flex-direction: column-reverse; }
}

@media (max-width: 700px) {
  .card-grid--3, .card-grid--4, .works-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .method-step { display: flex; gap: 1.25rem; }
  .method-step__num { font-size: 2rem; width: 2.75rem; flex: none; }
  .method-step__title { margin-top: 0; }
  .service-card { padding: 1.75rem; min-height: 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand-col { grid-column: 1 / -1; }
  .work-index__row { grid-template-columns: 1fr; gap: 0.375rem; }
  .btn-row .btn { flex: 1; }
  .wa-fab__label { display: none; }
  .wa-fab { padding: 0; width: 52px; justify-content: center; }
  /* The button is a bare circle here, so the footer only has to clear 52px
     plus its inset, not the full labelled pill. */
  .footer-bottom { padding-right: 4.5rem; }
  .method-row { gap: 1.25rem; }
  .method-row__num { font-size: 2rem; width: 2.75rem; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon { color: inherit; }

/* --------------------------------------------------------------------------
   Services index — editorial practice rows
   -------------------------------------------------------------------------- */

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

.practice {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--col-gap);
  padding: 4rem 0;
  border-bottom: 1px solid var(--line);
}
.practice__lead { position: sticky; top: 7rem; align-self: start; }
.practice__lead .link-arrow { margin-top: 1.75rem; }
.practice__lede {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ivory);
  margin: 0 0 2.5rem;
  max-width: 44ch;
  text-wrap: pretty;
}

.practice__caps { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
.practice__caps li { display: flex; gap: 1rem; align-items: flex-start; }
.practice__caps strong { display: block; font-weight: 600; font-size: var(--fs-ui); margin-bottom: 0.375rem; color: var(--ivory); }
.practice__caps span:last-child { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.practice__cap-icon { color: var(--olive); flex: none; margin-top: 0.125rem; }
.practice__cap-icon .icon { width: 36px; height: 36px; }

/* --------------------------------------------------------------------------
   Methodology page — stage list
   -------------------------------------------------------------------------- */

.stage-list { border-top: 1px solid var(--line); }
.stage {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--col-gap);
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.stage__num {
  font-family: var(--display);
  font-size: 4rem;
  line-height: 0.9;
  color: var(--clay-light);
  font-variant-numeric: lining-nums tabular-nums;
}
.stage__body p { font-size: var(--fs-body); line-height: 1.65; color: var(--muted); max-width: 62ch; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--col-gap); align-items: start; }
.contact-aside { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 7rem; }
.contact-card {
  background: var(--surface-lift);
  border-radius: var(--r-card);
  padding: 2rem;
}
.contact-card .eyebrow { margin-bottom: 1.25rem; }

.contact-points { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-points li { display: flex; flex-direction: column; gap: 0.25rem; }
.contact-points__label {
  font-size: var(--fs-caption);
  color: var(--muted);
}
.contact-points a { font-size: var(--fs-ui); font-weight: 500; text-decoration: none; }
.contact-points a:hover { text-decoration: underline; }

.assurances { display: flex; flex-direction: column; gap: 1rem; }
.assurances li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.assurances svg { color: var(--olive); flex: none; margin-top: 0.25rem; }

.contact-form .field__req { font-weight: 600; }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal-hero {
  background: var(--base);
  color: var(--ivory);
  padding: 9.5rem var(--page-x) 5rem;
  position: relative;
  overflow: hidden;
}
.legal-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.legal-hero .band__inner { position: relative; z-index: 1; }
.legal-hero .display-1 { color: var(--ivory); font-size: var(--fs-h2); }
.legal-hero__meta { font-size: var(--fs-caption); color: var(--muted); margin-top: 1rem; }

.legal-layout { display: grid; grid-template-columns: 16rem 1fr; gap: var(--col-gap); align-items: start; }

.legal-toc { position: sticky; top: 7rem; }
.legal-toc ol { counter-reset: toc; display: flex; flex-direction: column; gap: 0.625rem; }
.legal-toc a {
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
  display: block;
}
.legal-toc a:hover { color: var(--clay-light); }

.legal-body { max-width: 68ch; }
.legal-body section + section { margin-top: 3rem; }
.legal-body h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  scroll-margin-top: 7rem;
}
.legal-body h3 { font-size: var(--fs-ui); font-weight: 600; margin: 1.75rem 0 0.625rem; }
.legal-body p { font-size: var(--fs-ui); line-height: 1.75; color: var(--muted); margin-bottom: 1rem; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body ul { display: flex; flex-direction: column; gap: 0.625rem; margin: 1rem 0; }
.legal-body ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-ui);
  line-height: 1.7;
  color: var(--muted);
}
.legal-body ul li::before {
  content: '';
  position: absolute;
  left: 0.125rem;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--olive);
}
.legal-body strong { color: var(--ivory); font-weight: 600; }

.legal-contact li { padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.legal-contact li::before { display: none; }
.legal-contact span {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  min-width: 9rem;
}

/* --------------------------------------------------------------------------
   Page-specific responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .practice__lead, .contact-aside, .legal-toc { position: static; }
}

@media (max-width: 900px) {
  .practice { grid-template-columns: 1fr; gap: 2.25rem; padding: 3rem 0; }
  .practice__caps { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-layout { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .legal-toc ol { columns: 2; column-gap: 2rem; }
  .stage { grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding: 2.25rem 0; }
  .stage__num { font-size: 2.75rem; }
  .legal-hero { padding-top: 9rem; }
}

@media (max-width: 700px) {
  .legal-toc ol { columns: 1; }
  .contact-card { padding: 1.5rem; }
  .legal-contact span { min-width: 0; width: 100%; }
}

/* ==========================================================================
   Motion — the hero globe and its supporting cast
   The globe is the one authored moment. Everything below it is feedback or
   sequence, kept quiet enough that the page still reads as "slow and few".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero globe
   -------------------------------------------------------------------------- */

.hero__globe {
  position: absolute;
  top: 40%;
  right: clamp(0.5rem, 2vw, 3rem);
  width: clamp(340px, 46vw, 720px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: 1;
  cursor: grab;
  touch-action: pan-y;            /* a vertical swipe still scrolls the page */
  opacity: 0;
  transition: opacity 1100ms ease-out 250ms;
}
.hero__globe.is-ready { opacity: 1; }
.hero__globe.is-grabbing { cursor: grabbing; }
.hero__globe canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }

/* Backlight, concentric with the sphere by construction. The peak sits at the
   limb (246/532 of this box), the middle stays clear so the dots keep the
   dark ground behind them. */
.hero__globe::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  height: 260%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  /* Tight rim at the limb (246/728 of this box), then a long faint bleed that
     carries the warmth across the hero. One light source, and it is the sphere. */
  background: radial-gradient(circle at 50% 50%,
    rgba(184, 97, 63, 0) 26%,
    rgba(184, 97, 63, 0.05) 31%,
    rgba(232, 168, 124, 0.26) 34%,
    rgba(217, 138, 99, 0.10) 38%,
    rgba(184, 97, 63, 0.038) 49%,
    rgba(184, 97, 63, 0.016) 66%,
    rgba(184, 97, 63, 0) 86%);
}


.globe-pin {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-light);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 1px 3px rgba(42, 33, 28, 0.95), 0 0 12px rgba(42, 33, 28, 0.8);
  will-change: transform, opacity;
}
.globe-pin--home { color: var(--ochre); }


/* --------------------------------------------------------------------------
   Philosophy mark — the only other loop on the page
   -------------------------------------------------------------------------- */

/* Every group turns about the same centre, at its own rate, so the mark reads
   as one mechanism rather than several spinning parts. */
/* Everything turns about the same centre; transform-box makes the origin
   resolve against the viewBox rather than each node's own tiny bounding box. */
.orbit * { transform-box: view-box; transform-origin: 260px 260px; }

/* Three planes precessing at rates that never resolve into a common beat, so
   the figure keeps composing new arrangements instead of looping visibly. */
.orbit__plane--a { animation: orbit-spin  96s linear infinite; }
.orbit__plane--b { animation: orbit-spin 128s linear infinite reverse; }
.orbit__plane--c { animation: orbit-spin 160s linear infinite; }

.orbit__ring       { animation: orbit-spin 210s linear infinite reverse; }
.orbit__sys--mid   { animation: orbit-spin  74s linear infinite reverse; }
.orbit__sys--inner { animation: orbit-spin  52s linear infinite; }
.orbit__sat        { animation: orbit-spin  44s linear infinite; }

.orbit__node { animation: orbit-breathe 7s ease-in-out infinite calc(var(--n, 0) * 1.4s); }
.orbit__bead { animation: orbit-breathe 9s ease-in-out infinite calc(var(--n, 0) * 2.1s); }

/* The core emits on the globe's cadence: two rings, half a cycle apart, so
   the figure is never entirely still even between them. */
.orbit__pulse {
  opacity: 0;
  animation: orbit-pulse 9s cubic-bezier(0.22, 0.61, 0.36, 1) infinite calc(var(--p, 0) * 4.5s);
}

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
/* The travel occupies 40% of the cycle, not all of it: an exponential curve
   spread over nine seconds spends eight of them invisible, which reads as a
   rare blip rather than a pulse. Two rings half a cycle apart keep it steady. */
@keyframes orbit-pulse {
  0%        { opacity: 0;    transform: scale(1); }
  6%        { opacity: 0.5; }
  40%, 100% { opacity: 0;    transform: scale(4.1); }
}

/* --------------------------------------------------------------------------
   Client wall — arrives as a list, then answers the pointer
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Methodology — seven rules drawing in order
   -------------------------------------------------------------------------- */

.method-step, .method-row { position: relative; border-top-color: transparent; }
.method-step::before, .method-row::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
  transition: transform 640ms var(--ease-out) calc(var(--i, 0) * 85ms);
  animation: rule-failsafe 0.01s linear 10s forwards;
}
.js-on .reveal:not(.is-in) .method-step::before,
.js-on .reveal:not(.is-in) .method-row::before { transform: scaleX(0); }

@keyframes rule-failsafe { to { transform: none; } }

/* --------------------------------------------------------------------------
   Service card icons — the line language drawing itself
   -------------------------------------------------------------------------- */

.service-card__icon .icon > * {
  stroke-dasharray: var(--len, 200);
  transition: stroke-dashoffset 1000ms var(--ease-out) calc(var(--i, 0) * 130ms + 160ms);
  animation: draw-failsafe 0.01s linear 10s forwards;
}
.js-on .reveal:not(.is-in) .service-card__icon .icon > * { stroke-dashoffset: var(--len, 200); }
.service-card:hover .service-card__icon { color: var(--clay-light); }
.service-card__icon { transition: color 240ms ease; }

@keyframes draw-failsafe { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   Work cards — a rule under the title on hover
   -------------------------------------------------------------------------- */

.work-card__title { position: relative; display: inline-block; }
.work-card__title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
.work-card:hover .work-card__title::after,
.work-card:focus-visible .work-card__title::after { transform: none; }

/* --------------------------------------------------------------------------
   Globe responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .hero__globe { width: clamp(280px, 40vw, 460px); top: 32%; }
}

@media (max-width: 900px) {
  /* The sphere enters from the edge, above the headline rather than behind it.
     A little extra hero height buys it a band of its own. */
  .hero--globe { min-height: 760px; }
  .hero__globe {
    width: 380px;
    top: 15%;
    right: -160px;
    opacity: 0;
  }
  .hero__globe.is-ready { opacity: 0.72; }
  /* At this size the labels are unreadable and collide with the type. The arc
     still carries the point. */
  .globe-pin { display: none; }
}

@media (max-width: 700px) {
  .hero__globe { width: 320px; right: -160px; top: 13%; }
  .hero__globe.is-ready { opacity: 0.62; }
}

/* --------------------------------------------------------------------------
   Reduced motion — keep the meaning, drop the movement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  .hero__globe { opacity: 1; }
  .js-on .reveal:not(.is-in) .method-step::before,
  .js-on .reveal:not(.is-in) .method-row::before { transform: none; }
  .js-on .reveal:not(.is-in) .service-card__icon .icon > * { stroke-dashoffset: 0; }
  .work-card:hover .work-card__title::after { transform: none; }
}

/* --------------------------------------------------------------------------
   The system development package — /system-development/

   A conversion page, so it borrows the whole system rather than inventing
   one. Only the four things the system had no component for live here: the
   price plate, the symptom list, the integration cards and the terms.
   -------------------------------------------------------------------------- */

.hero--package { min-height: 0; padding-bottom: calc(var(--band-y) * 0.6); }
.hero--package .hero__lede { max-width: 58ch; }

/* --- The price plate ---------------------------------------------------- */

.pack-price {
  margin: 3rem 0 2.75rem;
  padding: 1.75rem 2rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--clay);
  border-radius: var(--r-card);
  background: rgba(246, 241, 232, 0.03);
  display: inline-block;
  max-width: 100%;
}
.pack-price__label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 0.5rem;
}
.pack-price__figure {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.9rem + 1.94vw, 3.5rem);
  line-height: 1;
  color: var(--ochre);
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.pack-price__unit {
  font-family: var(--ui);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--muted);
  margin-left: 0.625rem;
  letter-spacing: 0;
}
.pack-price__note { font-size: var(--fs-caption); color: var(--muted); margin: 0.75rem 0 0; }

/* --- The symptom list — the situation band ------------------------------ */

.pack-symptoms { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 0; }
.pack-symptom {
  position: relative;
  padding: 1.5rem 0 1.5rem 3.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ivory-soft);
}
.pack-symptom:last-child { border-bottom: 1px solid var(--line); }
.pack-symptom::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2.05rem;
  width: 1.75rem;
  height: 1px;
  background: var(--clay);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 520ms var(--ease-out) calc(var(--i, 0) * 85ms);
}
.reveal.is-in .pack-symptom::before { transform: scaleX(1); }

/* --- Integration cards -------------------------------------------------- */

.pack-integrations {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.pack-int {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 1.5rem;
  align-content: start;
  padding: 2.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
/* The credit card is the differentiator, so it takes the full width and
   closes the grid instead of leaving an odd gap. */
.pack-int:last-child { grid-column: 1 / -1; }
.pack-int__icon { color: var(--olive); line-height: 0; }
.pack-int__title { font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; margin: 0 0 0.625rem; }
.pack-int__body { font-size: var(--fs-ui); line-height: 1.6; color: var(--muted); margin: 0; max-width: 54ch; }
.pack-int__services {
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pack-int__services li {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--ivory-soft);
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pack-int__foot {
  margin: 2rem 0 0;
  font-size: var(--fs-caption);
  color: var(--muted);
  max-width: 60ch;
}

/* --- Commercial terms --------------------------------------------------- */

.pack-term {
  padding: 2.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.pack-term__num {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--clay-light);
  margin-bottom: 1.25rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.pack-term__title { font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; margin: 0 0 0.75rem; }
.pack-term__body { font-size: var(--fs-ui); line-height: 1.6; color: var(--muted); margin: 0; }

/* --- Objections --------------------------------------------------------- */

.pack-objections { margin-top: 3.5rem; row-gap: 3rem; }
.pack-objection .def__term { color: var(--clay-light); text-transform: none; letter-spacing: 0; font-size: var(--fs-body); font-family: var(--display); font-weight: 500; }
.pack-objection .def__body { color: var(--muted); margin: 0; }

/* --- Closing ------------------------------------------------------------ */

.pack-close__number {
  margin-top: 2rem !important;
  font-size: var(--fs-caption);
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.cta-band .btn--cta svg,
.hero--package .btn--cta svg { margin-right: 0.5rem; flex: none; }

@media (max-width: 900px) {
  .pack-integrations { grid-template-columns: 1fr; }
  .pack-int:last-child { grid-column: auto; }
}

@media (max-width: 560px) {
  .pack-price { display: block; padding: 1.5rem 1.375rem; }
  .pack-int { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 1.375rem; }
  .pack-int__services { grid-column: auto; }
  .pack-int__services li { white-space: normal; }
  .pack-symptom { padding-left: 2.5rem; }
  .pack-symptom::before { width: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-symptom::before { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   Home — pinned hero and the card stack that rides over it
   ========================================================================== */

:root {
  --r-stack: clamp(1rem, 1.6vw, 1.375rem);
  --fab-clear: 9.5rem;   /* width the floating WhatsApp button needs kept free */
}

/* --------------------------------------------------------------------------
   Hero: one viewport tall, content on the bottom edge, meta rule beneath it
   -------------------------------------------------------------------------- */

.hero--pinned {
  min-height: 100vh;
  min-height: 100svh;
  padding: 7.5rem var(--page-x) 2.5rem;
}

/* Pinning only where the hero comfortably fits the viewport. Below that it
   scrolls like any other section rather than trapping its own footer offscreen. */
@media (min-width: 760px) and (min-height: 700px) {
  .hero--pinned { position: sticky; top: 0; z-index: 0; }
}

.hero__meta {
  position: relative;
  z-index: 2;
  padding-right: var(--fab-clear);
  width: 100%;
  max-width: var(--max-w);
  margin: 3.5rem auto 0;
  padding-top: 1.375rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.hero__practices { display: flex; flex-wrap: wrap; gap: 0.375rem 2.25rem; }
.hero__practices a {
  font-size: var(--fs-caption);
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
}
.hero__practices a:hover { color: var(--ivory); }

.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
}
.hero__cue svg { animation: cue-drift 2.8s ease-in-out infinite; }

@keyframes cue-drift {
  0%, 100% { transform: translateY(-2px); opacity: 0.5; }
  50%      { transform: translateY(2px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Inner-page sphere — the quiet member of the family
   -------------------------------------------------------------------------- */

.hero-sphere {
  position: absolute;
  top: 50%;
  right: -7%;
  width: clamp(420px, 54vw, 780px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms ease-out 250ms;
}
.hero-sphere.is-ready { opacity: 0.62; }
.hero-sphere canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }

/* The same backlight as the homepage sphere, pitched lower — on these pages
   the headline leads and the sphere is atmosphere. */
.hero-sphere::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250%;
  height: 250%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(184, 97, 63, 0) 27%,
    rgba(184, 97, 63, 0.04) 32%,
    rgba(232, 168, 124, 0.16) 35%,
    rgba(217, 138, 99, 0.07) 40%,
    rgba(184, 97, 63, 0.03) 52%,
    rgba(184, 97, 63, 0.014) 70%,
    rgba(184, 97, 63, 0) 88%);
}

.legal-hero .hero-sphere { right: -14%; width: clamp(360px, 44vw, 620px); }

/* Narrow enough and the sphere sits under the headline. It stays legible —
   the mesh lands around 14:1 behind ivory — but the type is cleaner with the
   sphere pushed further off the edge and pitched down. */
@media (max-width: 900px) {
  .hero-sphere { right: -34%; width: 500px; }
  .hero-sphere.is-ready { opacity: 0.45; }
}

@media (max-width: 700px) {
  .hero-sphere { right: -48%; width: 420px; }
  .hero-sphere.is-ready { opacity: 0.36; }
}

/* --------------------------------------------------------------------------
   The stack
   -------------------------------------------------------------------------- */

.home-stack { position: relative; z-index: 1; }

/* Exactly one card, the section directly below the hero. It rides up over the
   pinned hero and then everything after it is an ordinary flat band. */
.stack-card {
  position: relative;
  border-radius: var(--r-stack) var(--r-stack) 0 0;
  overflow: hidden;
  /* A hairline catches the top edge; the long soft shadow lifts the card off
     the hero it is covering. */
  box-shadow: 0 -1px 0 var(--line), 0 -30px 60px -30px rgba(0, 0, 0, 0.85);
  margin-top: calc(var(--r-stack) * -1);
}

/* The card travels further than an ordinary section — that lift is the swipe. */
.js-on .reveal.stack-card { transform: translateY(52px); }
.js-on .reveal.stack-card.is-in { transform: none; }

/* --------------------------------------------------------------------------
   Trusted by — a bare field of marks, no tiles and no grid lines
   -------------------------------------------------------------------------- */

.clientele__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  /* Shares the field's measure so the rule above it ends where the marks do. */
  max-width: 64rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4rem;
}
.clientele__head .eyebrow { margin-bottom: 0; }
.clientele__sectors {
  font-size: var(--fs-caption);
  color: var(--muted);
  text-align: right;
  margin: 0;
}

.logo-field {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.5rem 2.5rem;
  align-items: center;
  max-width: 64rem;
}
/* The wall is a plain showcase: full strength, no stagger, no hover states.
   These are client marks, not controls, and dimming them to make a hover
   effect possible only weakened the credibility they are there to carry. */
.logo-field__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.logo-field__logo {
  max-height: 34px;
  max-width: 148px;
  width: auto;
  object-fit: contain;
}
/* A near-square mark hits the height cap while a wordmark hits the width cap,
   so at the same max-height it carries far less optical weight. These get
   more height to even out the area across the wall. */
.logo-field__logo--square { max-height: 46px; }
.logo-field__mark {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
  color: var(--ivory);
}

/* --------------------------------------------------------------------------
   Systems proof — tally, data-path diagram, before/after ledger

   Operations software has no publishable screenshot, so the diagram is the
   evidence. It is drawn in the same 1px stroke language as the service icons,
   and the pulse travelling along it is the globe's signal motion reused: one
   record moving from the field, through the queue, into the record and out to
   the report. Node 0 fires at t=0, each link takes 0.7s, the chain resets at
   4.4s. Everything stills under prefers-reduced-motion; the arrowheads carry
   the direction on their own.
   -------------------------------------------------------------------------- */

/* A section header carries one message: headline, then the line that explains
   it, stacked. The left-headline / right-floating-paragraph split reads as two
   competing columns and is not used here. */
.band-head--stacked {
  display: block;
  margin-bottom: 3.5rem;
}
.band-head--stacked .display-2 { max-width: 24ch; }
.band-head__lede {
  margin: 1.25rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}

.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem var(--col-gap);
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
}
.tally--wide { margin: 4rem 0 0; }

.tally__item {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.tally__value {
  font-family: var(--display);
  font-size: var(--fs-quote);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sand);
  font-variant-numeric: lining-nums tabular-nums;
}
.tally__label {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--muted);
  max-width: 22rem;
}

/* --- The data path ------------------------------------------------------ */

.flow {
  --flow-node: 60px;
  --flow-gap: clamp(1.75rem, 3vw, 2.75rem);
  --flow-row: calc(var(--flow-gap) + 1.5rem);
  margin: 0;
}

.flow__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--flow-gap);
  row-gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow__stage { position: relative; }

.flow__node {
  display: grid;
  place-items: center;
  width: var(--flow-node);
  height: var(--flow-node);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--olive);
  background: var(--base);
  animation: flow-arrive 4.4s linear infinite calc(var(--i) * 0.7s);
}
.flow__node .icon { width: 28px; height: 28px; }

.flow__title {
  font-family: var(--ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ivory);
  line-height: 1.35;
  /* Titles run one or two lines depending on the copy. Reserving two keeps
     every body starting on the same baseline across the row. */
  min-height: 2.7em;
  margin: 1.25rem 0 0.5rem;
}
.flow__body {
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* The connector: the element itself is the rule, ::before the arrowhead,
   ::after the travelling pulse. */
/* The connector belongs to the stage it leaves. Anchoring both ends lets it
   stretch from this node's edge to the next node's edge whatever the column
   or row turns out to measure — a fixed length can only span the gutter, and
   leaves a stranded dash floating in the middle. */
.flow__link {
  position: absolute;
  top: calc(var(--flow-node) / 2);
  left: var(--flow-node);
  right: calc(-1 * var(--flow-gap));
  height: 1px;
  background: var(--line-strong);
}
.flow__link::before,
.flow__link::after { content: ''; position: absolute; }

.flow__link::before {
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}
.flow__link::after {
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--clay-bright);
  box-shadow: 0 0 8px 1px rgba(232, 168, 124, 0.5);
  opacity: 0;
  animation: flow-pulse 4.4s linear infinite calc(var(--i) * 0.7s);
}

@keyframes flow-pulse {
  0%        { opacity: 0; left: 0; }
  3%, 13%   { opacity: 1; }
  16%, 100% { opacity: 0; left: calc(100% - 5px); }
}

@keyframes flow-arrive {
  0%   { border-color: var(--clay-bright); box-shadow: 0 0 0 5px rgba(232, 168, 124, 0.09); }
  18%,
  100% { border-color: var(--line-strong); box-shadow: 0 0 0 0 rgba(232, 168, 124, 0); }
}

.flow__note {
  margin: 3.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--muted);
  max-width: 44rem;
}

/* --- Before / after ledger ---------------------------------------------- */

.ledger { margin-top: 4rem; }
.ledger__heading { margin: 0 0 2rem; }
.ledger__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
}
.ledger__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.ledger__col li {
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--muted);
  padding-left: 1.5rem;
  position: relative;
}
.ledger__col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 1px;
  background: var(--line-strong);
}
.ledger__col--after li { color: var(--ivory-soft); }
.ledger__col--after li::before { background: var(--clay); width: 9px; }

@media (max-width: 1100px) {
  .flow__track { grid-template-columns: 1fr; row-gap: var(--flow-row); }
  .flow__stage { padding-left: calc(var(--flow-node) + 1.5rem); min-height: var(--flow-node); }
  .flow__node { position: absolute; left: 0; top: 0; }
  .flow__title { margin-top: 0.25rem; min-height: 0; }
  .flow__body { max-width: 34rem; }

  .flow__link {
    top: var(--flow-node);
    bottom: calc(-1 * var(--flow-row));
    left: calc(var(--flow-node) / 2);
    right: auto;
    width: 1px;
    height: auto;
  }
  .flow__link::before {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 1px) rotate(135deg);
  }
  .flow__link::after {
    left: 50%;
    top: 0;
    margin-top: 0;
    margin-left: -2.5px;
  }
  @keyframes flow-pulse {
    0%        { opacity: 0; left: 50%; top: 0; }
    3%, 13%   { opacity: 1; }
    16%, 100% { opacity: 0; left: 50%; top: calc(100% - 5px); }
  }
}

@media (max-width: 700px) {
  .ledger__cols { grid-template-columns: 1fr; gap: 2.5rem; }
  .tally { gap: 1.75rem; margin-bottom: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flow__node { animation: none; }
  .flow__link::after { animation: none; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Home responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 2.5rem; padding-right: 4.5rem; }
  .hero__practices { gap: 0.375rem 1.5rem; }
  .clientele__head { flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 3rem; }
  .clientele__sectors { text-align: left; }
  .logo-field { gap: 3rem 2rem; }
}

@media (max-width: 700px) {
  .hero--pinned { padding-top: 8rem; }
  .hero__cue { display: none; }
  .logo-field { grid-template-columns: repeat(2, 1fr); gap: 2.75rem 1.5rem; }
  .logo-field__logo { max-height: 34px; }
  .stack-card { box-shadow: 0 -1px 0 var(--line), 0 -20px 40px -22px rgba(0, 0, 0, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue svg { animation: none; }
  .js-on .reveal.stack-card { transform: none; }
}