/* ==========================================================================
   GK Website Builders — one compiled stylesheet.
   Tokens come straight from the brand guide in the design handoff. Every
   colour below is a token; nothing is invented.
   ========================================================================== */

:root {
  --navy:        #061c42;
  --navy-2:      #0b2a5c;
  --navy-soft:   #14305a;
  --gold:        #c9a24a;
  --gold-bright: #e0bc62;
  --gold-deep:   #9a7428;
  --cream:       #f7f4ee;
  --mist:        #eef1f6;
  --white:       #ffffff;
  --ink:         #1a2332;
  --muted:       #5c6777;
  --line:        rgba(6, 28, 66, 0.12);
  --line-soft:   rgba(6, 28, 66, 0.06);
  --shadow:      0 24px 60px rgba(6, 28, 66, 0.10);
  --shadow-card: 0 10px 30px rgba(6, 28, 66, 0.04);
  --radius:      22px;
  --radius-lg:   28px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 78px;
}

/* --------------------------------------------------------------- base --- */

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

html {
  scroll-behavior: smooth;
  /* clip, never hidden: hidden breaks position:sticky on the header */
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-navy :focus-visible,
.site-footer :focus-visible,
.trust-bar :focus-visible { outline-color: var(--gold-bright); }

::selection { background: rgba(201, 162, 74, 0.28); }

.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-size: 14px;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ typography */

h1 {
  font-size: clamp(42px, 6vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; }
h3 { font-size: 26px; line-height: 1.15; }

em.gold-word,
.gold-word { font-style: italic; color: var(--gold-deep); font-weight: 500; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-deep);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex: 0 0 28px;
}
.eyebrow.on-navy { color: var(--gold-bright); }

.lede {
  font-size: 18px;
  font-weight: 300;
  color: var(--muted);
  max-width: 540px;
}

.gold-rule { width: 64px; height: 1px; background: var(--gold); margin: 20px 0; border: 0; }

.section-head { max-width: 660px; margin-bottom: 44px; }
.section-head h2 + .gold-rule { margin: 18px 0 0; }
.section-head p { margin-top: 16px; color: var(--muted); font-size: 17px; font-weight: 300; }

section { padding: 96px 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
}
.btn:hover { background: var(--navy-2); transform: translateY(-1px); }

.btn-gold {
  /* the one sanctioned gradient in the system: the brand's gold pill */
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--navy);
  border-color: var(--gold-deep);
}
.btn-gold:hover { filter: brightness(1.05); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: rgba(6, 28, 66, 0.22);
}
.btn-ghost:hover { background: rgba(6, 28, 66, 0.04); color: var(--navy); }

.btn .ico { flex: 0 0 auto; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.text-link .ico { transition: transform 0.2s ease; }
.text-link:hover .ico { transform: translateX(4px); }

/* ----------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 42px; width: auto; }

.primary-nav { display: flex; align-items: center; gap: 28px; }
.primary-nav ul { display: flex; align-items: center; gap: 28px; }
.primary-nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  /* "E-Commerce Solutions" is long enough to wrap and shove the header out of
     alignment. A nav item wraps as a whole or not at all. */
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.primary-nav a:hover::after { width: 100%; }
.primary-nav .is-current > a { color: var(--gold-deep); }
.primary-nav .is-current > a::after { width: 100%; }

.nav-cta { flex: 0 0 auto; }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 26px;
  margin: 6px auto;
  background: var(--navy);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* -------------------------------------------------------------- home hero */

.hero-home {
  position: relative;
  padding: 72px 0 88px;
  background:
    radial-gradient(900px 420px at 85% 10%, rgba(201, 162, 74, 0.12), transparent 60%),
    linear-gradient(180deg, #fbfaf7 0%, var(--white) 70%);
  overflow: clip;
}
.hero-home::before {
  content: "";
  position: absolute;
  inset: auto -120px -180px auto;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(201, 162, 74, 0.22);
  border-radius: 50%;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero-home h1 { margin-bottom: 22px; }
.hero-home .lede { margin-bottom: 32px; max-width: 520px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }

.hero-stats {
  display: flex;
  gap: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 480px;
}
.hero-stats .stat { padding-right: 26px; }
.hero-stats .stat + .stat {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.hero-stats b {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.hero-stats span {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-visual { position: relative; display: grid; place-items: center; }
.hero-visual picture { grid-area: 1 / 1; }
.hero-visual img {
  width: min(460px, 100%);
  filter: drop-shadow(0 30px 50px rgba(6, 28, 66, 0.12));
}
/* the faint gold ring the mockups draw around the globe, centred on the globe
   rather than on the whole lockup (the wordmark sits below it) */
.orbit {
  grid-area: 1 / 1;
  width: 78%;
  max-width: 380px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 74, 0.42);
  transform: translateY(-34px);
  pointer-events: none;
}
.hero-inner .orbit { width: 74%; max-width: 340px; transform: translateY(-30px); }

/* --------------------------------------------------------- hero artwork */

/* The six supplied banners are all cream on the left and navy/gold on the
   right, so the copy lives in the left half and the art is the hero's visual.
   Above 900px the art is a full-bleed background; below it the art becomes a
   banner strip above the copy, because a portrait crop of a 2.33:1 graphic
   either hides the artwork or puts navy under the text. */

.has-hero-art {
  position: relative;
  overflow: clip;
}
.has-hero-art > .wrap {
  position: relative;
  z-index: 2;
}
/* the lockup that used to hold column two is gone — the art is the visual now */
.has-hero-art .hero-grid { grid-template-columns: 1fr; }
.has-hero-art .hero-copy { max-width: 52%; }

.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-art picture { display: block; height: 100%; }
.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The copy sits on an OPAQUE cream field, not a translucent scrim.
   The banners put their cream on the left of the *image*, but the copy is
   centred in a 1180px wrap, so as the viewport widens the text drifts right
   into the busy half and a scrim strong enough to rescue it fogs a third of
   the navy. An opaque field costs the left tail of the wave and nothing else:
   it is the same cream the artwork already uses there, so in the clean upper
   half it is invisible, and the navy beyond it stays untouched.

   The field must stay opaque past the copy's right edge. The copy is capped
   at 52% of the wrap, which lands at ~52% of the viewport at every width from
   1080 up, so the fade runs 54% -> 66%. */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #f8efe5 0%,
    #f8efe5 45%,
    rgba(248, 239, 229, 0.72) 52%,
    rgba(248, 239, 229, 0.22) 59%,
    rgba(248, 239, 229, 0) 65%
  );
}

.has-hero-art .hero-actions { margin-bottom: 24px; }
/* the outline button has no fill of its own, so over artwork it needs one —
   otherwise its navy label can land on navy */
.has-hero-art .btn-ghost {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(6, 28, 66, 0.18);
}
.has-hero-art .btn-ghost:hover { background: rgba(255, 255, 255, 0.9); }

/* The navy bands keep their darkness and let the gold geometry glow through. */
/* The case-study band is navy with white type, so here the scrim is the whole
   point: it holds the band dark and lets the gold geometry glow through. */
.hero-art--navy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 28, 66, 0.95) 0%,
    rgba(6, 28, 66, 0.9) 40%,
    rgba(6, 28, 66, 0.62) 62%,
    rgba(6, 28, 66, 0.34) 100%
  );
}

/* The art carries its own rings and dot fields — the drawn ones would double up. */
.hero-home.has-hero-art::before,
.hero-contact.has-hero-art::before,
.hero-contact.has-hero-art::after,
.case-hero.has-hero-art::after { display: none; }

.has-hero-art { background: #f8efe5; }
.hero-inner.has-hero-art,
.hero-contact.has-hero-art { min-height: 360px; }
.hero-home.has-hero-art { min-height: min(56vw, 820px); }

.error-404.has-hero-art { text-align: left; padding: 96px 0 104px; }
.error-404.has-hero-art .lede { margin-left: 0; }
.page-hero.has-hero-art { padding: 72px 0 56px; }

/* ------------------------------------------------------------- trust bar */

.trust-bar {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: 18px 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.trust-bar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.trust-bar li { display: inline-flex; align-items: center; gap: 22px; }
.trust-bar li::before { content: "+"; color: var(--gold-bright); font-size: 14px; }
.trust-bar li:first-child::before { content: none; }

/* -------------------------------------------------------------- services */

.services { background: var(--cream); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.card:hover, .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .numeral {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  font-family: var(--serif);
  font-size: 17px;
  margin-bottom: 18px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; font-weight: 300; }
.card .card-arrow {
  margin-top: 18px;
  color: var(--gold-deep);
  transition: transform 0.2s ease;
}
a.card:hover .card-arrow { transform: translateX(5px); }

/* ----------------------------------------------------------------- tiers */

.tiers { background: var(--cream); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.tier {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.tier.is-current { border-color: var(--gold); }

/* The three illustrations have different aspect ratios (1.51, 1.31, 1.12), so a
   fixed-height media box with object-fit: contain is what keeps the copy beneath
   them aligned across the row. `contain` rather than `cover` because these are
   drawings with deliberate margins — cropping them cuts the shield off Premium. */
.tier-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  padding: 0;
  /* The mean of the three illustrations' own grounds — (254,248,243),
     (249,250,245) and (251,250,241). Within 3 per channel of each, so the
     letterboxed area either side of a contained image is indistinguishable from
     the image itself, and the whole thing reads as one band across the card top
     rather than three floating rectangles on white. */
  background: #fbf9f3;
  border-bottom: 1px solid var(--line-soft);
}
.tier-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tier-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 30px 30px;
}

.tier-pending {
  color: var(--muted);
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  margin-bottom: 26px;
}

/* ---- the navy variant: the e-commerce trio on the Services page ---- */

.tiers--navy {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
}
.tiers--navy .section-head h2 { color: var(--white); }
.tiers--navy .section-head p { color: rgba(255, 255, 255, 0.72); }
.tiers--navy .gold-rule { background: var(--gold-bright); }

.tiers--navy .tier {
  background: var(--navy-2);
  border-color: rgba(224, 188, 98, 0.28);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}
.tiers--navy .tier.is-current { border-color: var(--gold-bright); }

/* The illustrations carry a near-white ground, so on navy they keep their own
   light plate rather than being punched onto the dark card — inverting them is
   not an option and a dark plate would show the artwork's box. */
.tiers--navy .tier-media {
  border-bottom: 1px solid rgba(224, 188, 98, 0.22);
}

.tiers--navy .tier-name { color: var(--white); }
.tiers--navy .tier-sub { color: rgba(255, 255, 255, 0.72); }
.tiers--navy .tier-items li { color: rgba(255, 255, 255, 0.9); }
.tiers--navy .tier-items .ico { color: var(--gold-bright); }
.tiers--navy .tier-pending { color: rgba(255, 255, 255, 0.6); }

.tiers--navy .btn-ghost {
  color: var(--white);
  border-color: rgba(224, 188, 98, 0.5);
}
.tiers--navy .btn-ghost:hover {
  background: rgba(224, 188, 98, 0.14);
  color: var(--white);
}
.tiers--navy .tier-btn.is-here {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}

.tier-name {
  font-size: 30px;
  margin-bottom: 10px;
}
.tier-sub {
  color: var(--muted);
  font-weight: 300;
  font-size: 15.5px;
  margin-bottom: 22px;
}

.tier-items {
  display: grid;
  gap: 11px;
  margin-bottom: 28px;
}
.tier-items li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.45;
}
.tier-items .ico {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--gold-deep);
}

/* The button sits on the baseline of every card whatever the list length. */
.tier-btn {
  margin-top: auto;
  align-self: flex-start;
}
.tier-btn.is-here {
  border-style: dashed;
  color: var(--muted);
  cursor: default;
}

/* ------------------------------------------------------------- tier page */

.tier-detail { padding-top: 78px; }
.tier-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
/* The tier illustration. Its own background is near-white, so it sits on the
   page's white ground with no panel — a tinted panel would show a faint
   rectangle, and the three images do not share an identical background. */
.tier-illustration {
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 0 34px;
  /* Each illustration carries its own near-white ground, which meets the page's
     white as a hard-edged box. Rounding it makes that edge read as a deliberate
     panel — the same corner radius the cards and the aside already use. */
  border-radius: var(--radius);
}

.tier-body > p {
  color: var(--muted);
  font-weight: 300;
  font-size: 17.5px;
  max-width: 64ch;
  margin-bottom: 18px;
}
.tier-body h2 {
  font-size: 27px;
  margin: 34px 0 10px;
}
.tier-extra { margin-top: 30px; }

.tier-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.tier-card {
  padding: 30px 28px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.tier-card-h {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.tier-card-btn { width: 100%; margin-top: 4px; }
.tier-card-note {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--muted);
}

/* ------------------------------------------------------ project card (logo) */

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(201, 162, 74, 0.5);
}

/* The logo plate. A fixed height with object-fit: contain is what keeps four
   logos of wildly different proportions — a square mascot, two wordmarks and a
   compass lockup — reading at the same weight in one row. */
.project-card-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 176px;
  padding: 30px 34px;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.project-card-plate img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.project-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 26px 28px 28px;
}
.project-card-body small {
  display: block;
  color: var(--gold-deep);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
.project-card-body h3 {
  color: var(--navy);
  font-size: 27px;
  line-height: 1.12;
  margin: 9px 0 8px;
}
.project-card-body p {
  color: var(--muted);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.project-card-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  color: var(--gold-deep);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.project-card-more .ico { transition: transform 0.2s ease; }
.project-card:hover .project-card-more .ico { transform: translateX(4px); }
.project-card:hover h3 { color: var(--navy-2); }

.project-card .project-link { position: absolute; inset: 0; z-index: 2; }
.project-card:focus-within { border-color: var(--gold); }

/* The tall variant spans two rows on the home grid; give the plate the extra
   room rather than stretching the copy. */
/* The tall variant spans two rows, so something has to absorb the extra height.
   Let the PLATE take it, not the copy — stretching the body just opens a dead gap
   between the summary and the link. */
.project-card.is-tall { grid-row: span 2; }
.project-card.is-tall .project-card-plate {
  flex: 1 1 auto;
  height: auto;
  min-height: 300px;
  padding: 48px 52px;
}
.project-card.is-tall .project-card-body { flex: 0 0 auto; }
.project-card.is-tall .project-card-plate img { max-height: 260px; }
.project-card.is-tall .project-card-body h3 { font-size: 32px; }
.project-card.is-tall .project-card-body p { font-size: 16px; }

/* The e-commerce page: the same two-column detail block as a tier page, repeated
   once per sub-section, so the anchors from the Services cards land somewhere
   that already looks like the rest of the site. */
.ecom-detail { padding: 78px 0 20px; scroll-margin-top: calc(var(--header-h) + 20px); }
.tier-body .ecom-name {
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.06;
  margin: 0 0 26px;
}
.ecom-detail .tier-illustration { max-width: 560px; }

/* ---- the whole page runs navy; only the quote box is light ------------ */

.gk-ecom { background: var(--navy); }
.gk-ecom .ecom-detail,
.gk-ecom .longform { background: var(--navy); border-top: 0; }
.gk-ecom .ecom-detail + .ecom-detail {
  border-top: 1px solid rgba(224, 188, 98, 0.18);
}

.gk-ecom h1,
.gk-ecom h2,
.gk-ecom h3,
.gk-ecom h4 { color: var(--white); }
.gk-ecom .lede,
.gk-ecom .tier-body p,
.gk-ecom .tier-body li,
.gk-ecom .longform-body p,
.gk-ecom .longform-body li { color: rgba(255, 255, 255, 0.76); }
.gk-ecom .tier-body strong,
.gk-ecom .longform-body strong { color: var(--white); }
.gk-ecom .longform-body h2::after,
.gk-ecom .tier-body h3::after { background: var(--gold-bright); }
.gk-ecom .tier-pending { color: rgba(255, 255, 255, 0.58); }

/* The illustration carries a near-white ground, so on navy it keeps a plate of
   its own rather than looking like a bright rectangle punched into the field. */
.gk-ecom .tier-illustration {
  background: #fbf9f3;
  border: 1px solid rgba(224, 188, 98, 0.22);
}

/* The one light element on the page: the quote box. */
.gk-ecom .tier-card {
  background: var(--white);
  border-color: rgba(224, 188, 98, 0.34);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
}
.gk-ecom .tier-card h3.tier-card-h { color: var(--gold-deep); }
.gk-ecom .tier-card .tier-items li { color: var(--ink); }
.gk-ecom .tier-card .tier-items .ico { color: var(--gold-deep); }
.gk-ecom .tier-card .tier-card-note { color: var(--muted); }

.gk-ecom .cta-band { border-top: 1px solid rgba(224, 188, 98, 0.18); }

/* ---- navy CARDS on a light section (the e-commerce trio on the home page) --
   Same inversion as .tiers--navy but scoped to the cards, so the section keeps
   the cream ground and the two trios sit in one continuous block. The section
   head stays dark because it is on cream, not on navy. */
.tiers--navycards { padding-top: 0; }
.tiers--navycards .tier {
  background: var(--navy-2);
  border-color: rgba(224, 188, 98, 0.3);
  box-shadow: 0 18px 46px rgba(6, 28, 66, 0.22);
}
.tiers--navycards .tier.is-current { border-color: var(--gold-bright); }
.tiers--navycards .tier-media { border-bottom: 1px solid rgba(224, 188, 98, 0.22); }
.tiers--navycards .tier-name { color: var(--white); }
.tiers--navycards .tier-sub { color: rgba(255, 255, 255, 0.72); }
.tiers--navycards .tier-items li { color: rgba(255, 255, 255, 0.9); }
.tiers--navycards .tier-items .ico { color: var(--gold-bright); }
.tiers--navycards .tier-pending { color: rgba(255, 255, 255, 0.6); }
.tiers--navycards .btn-ghost {
  color: var(--white);
  border-color: rgba(224, 188, 98, 0.5);
}
.tiers--navycards .btn-ghost:hover { background: rgba(224, 188, 98, 0.14); color: var(--white); }

/* ------------------------------------------------- other services / partners */

.partner { padding: 84px 0; }
.partner + .partner { border-top: 1px solid var(--line-soft); }
.partner-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.partner-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.partner-media img { max-width: 100%; height: auto; }
.partner-body h2 { font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 20px; }
.partner-body p {
  color: var(--muted);
  font-weight: 300;
  font-size: 17.5px;
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 64ch;
}
.partner-plans {
  color: var(--navy) !important;
  font-weight: 400;
  padding: 14px 18px;
  background: var(--mist);
  border-radius: 12px;
  display: inline-block;
}
.partner-btn { margin-top: 10px; }
.partner-note {
  margin-top: 12px;
  font-size: 13px !important;
  color: var(--muted);
}

@media (max-width: 900px) {
  .partner { padding: 64px 0; }
  .partner-grid { grid-template-columns: 1fr; gap: 30px; }
  .partner-media { max-width: 280px; }
}

/* ---------------------------------------------------- site preview (scrub) */

.site-preview-figure { margin: 0 0 40px; }

.site-preview {
  --win: 460px;              /* the visible window height */
  --dur: 12s;                /* set per project from the image's own length */
  position: relative;
  height: var(--win);
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--mist);
  box-shadow: var(--shadow-card);
}
.site-preview img {
  display: block;
  width: 100%;
  height: auto;
  /* A percentage translateY resolves against the IMAGE's height, so
     -100% + the window height is exactly (imageH - windowH): the whole page,
     however long it happens to be. */
  transform: translateY(0);
  transition: transform var(--dur) linear;
  will-change: transform;
}
.site-preview:hover img,
.site-preview:focus-within img {
  transform: translateY(calc(-100% + var(--win)));
}

/* A hairline browser chrome so it reads as a website, not a tall photograph. */
.site-preview::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 26px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-preview::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 12px;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 14px 0 0 rgba(6, 28, 66, 0.16), 28px 0 0 rgba(6, 28, 66, 0.16);
}
.site-preview img { margin-top: 26px; }

.site-preview-figure figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.site-preview-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.site-preview-hint .ico { color: var(--gold-deep); }
.site-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-deep);
}
.site-preview-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Touch has no hover: make it a real scrollable pane instead of a dead image. */
@media (hover: none) {
  .site-preview { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .site-preview img { transition: none; }
  .site-preview:hover img { transform: none; }
  .site-preview-hint { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .site-preview img { transition: none; }
  .site-preview:hover img,
  .site-preview:focus-within img { transform: none; }
  .site-preview { overflow-y: auto; }
}

/* --------------------------------------------------------------- longform */

/* A reading column, not a marketing block. Measure is held near 68 characters
   because these pieces run to several thousand words and a full-width line at
   this size is genuinely hard to track back. */
.longform {
  background: var(--white);
  padding: 96px 0 104px;
  border-top: 1px solid var(--line-soft);
}
.longform-body {
  max-width: 68ch;
  margin-inline: auto;
}
.longform-body h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  margin: 52px 0 14px;
}
.longform-body > h2:first-child { margin-top: 0; }
.longform-body h3 {
  font-size: 23px;
  margin: 34px 0 10px;
}
.longform-body p {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 20px;
}
.longform-body strong { color: var(--navy); font-weight: 500; }
.longform-body ul,
.longform-body ol { margin: 0 0 22px 22px; }
.longform-body li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 10px;
}
.longform-body ul { list-style: disc; }
.longform-body ol { list-style: decimal; }
/* A gold rule under each h2 ties the band to the rest of the system. */
.longform-body h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin-top: 16px;
}
.longform-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 16px;
}
.longform-body th,
.longform-body td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 300;
}
.longform-body th { color: var(--navy); font-weight: 500; }

/* ------------------------------------------------------------------ work */

.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.work-head .section-head { margin-bottom: 0; }

.work-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.project {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  padding: 28px;
  border-radius: 24px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
  isolation: isolate;
}
.project.is-tall { min-height: 580px; grid-row: span 2; }
.project img.project-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.project .shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 28, 66, 0.15), rgba(6, 28, 66, 0.82)),
    radial-gradient(circle at 80% 20%, rgba(201, 162, 74, 0.28), transparent 45%);
}
/* The scrim above was tuned for the navy card with no image behind it. A real
   screenshot is lighter and far busier than navy, so a card carrying one gets a
   deeper scrim and quieter dots — the picture reads as texture, the copy stays
   readable. Contrast is measured on the rendered page, not eyeballed. */
/* The scrim only has to be dark where the copy actually sits. Measured on the
   rendered page: the earliest copy block starts at 35.2% of card height (the Work
   card whose title wraps to two lines), so everything above ~18% can stay almost
   clear and let the screenshot show. The ramp between is long enough not to read
   as a band edge. */
.project:has(> img.project-bg) .shade {
  background:
    linear-gradient(180deg,
      rgba(6, 28, 66, 0.05) 0%,
      rgba(6, 28, 66, 0.12) 18%,
      rgba(6, 28, 66, 0.50) 27%,
      rgba(6, 28, 66, 0.86) 35%,
      rgba(6, 28, 66, 0.93) 55%,
      rgba(6, 28, 66, 0.95) 100%),
    radial-gradient(circle at 80% 20%, rgba(201, 162, 74, 0.10), transparent 45%);
}
/* The tall card's copy does not start until 75.4%, so it can show far more. */
.project.is-tall:has(> img.project-bg) .shade {
  background:
    linear-gradient(180deg,
      rgba(6, 28, 66, 0.04) 0%,
      rgba(6, 28, 66, 0.10) 46%,
      rgba(6, 28, 66, 0.46) 62%,
      rgba(6, 28, 66, 0.88) 74%,
      rgba(6, 28, 66, 0.95) 100%),
    radial-gradient(circle at 80% 14%, rgba(201, 162, 74, 0.10), transparent 42%);
}
.project .dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.4px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: 0.35;
}
.project:has(> img.project-bg) .dots { opacity: 0.10; }
/* the globe mark watermarked into the card, as the mockups show */
.project .globe-mark {
  position: absolute;
  z-index: -1;
  top: -6%;
  right: -8%;
  width: 66%;
  aspect-ratio: 512 / 398;
  background: url("../images/globe-white.webp") no-repeat center / contain;
  opacity: 0.15;
  pointer-events: none;
}
.project.is-tall .globe-mark { top: 4%; right: -6%; width: 78%; }
.project small {
  display: block;
  color: var(--gold-bright);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}
.project h3 { color: var(--white); font-size: 32px; margin: 8px 0 6px; }
.project p { color: rgba(255, 255, 255, 0.78); font-weight: 300; font-size: 14.5px; }
.project .project-link { position: absolute; inset: 0; z-index: 2; }
.project:hover h3 { color: var(--gold-bright); }

.work-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 44px;
  text-align: center;
  color: var(--muted);
}

/* --------------------------------------------------------------- process */

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.process-steps .step {
  padding: 28px 24px 8px 0;
  border-right: 1px solid var(--line);
}
.process-steps .step:last-child { border-right: 0; }
.step .num {
  display: block;
  font-family: var(--serif);
  font-size: 42px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
}
.step h3 { font-size: 24px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; font-weight: 300; padding-right: 12px; }

/* ---------------------------------------------------------- studio band */

.studio-band {
  position: relative;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  overflow: clip;
}
.studio-band::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 40px solid rgba(201, 162, 74, 0.08);
  pointer-events: none;
}
.studio-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.studio-mark {
  background: #08224e;
  border-radius: 24px;
  padding: 34px;
}
.studio-mark img { width: 100%; }
.studio-band h2 { color: var(--white); }
.studio-band .intro { color: rgba(255, 255, 255, 0.72); font-weight: 300; font-size: 17px; margin-bottom: 26px; }
.studio-points { display: grid; gap: 16px; }
.studio-points li {
  padding-left: 18px;
  border-left: 2px solid var(--gold);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
}
.studio-points b { display: block; color: var(--white); font-weight: 500; font-size: 16px; }

/* ----------------------------------------------------------------- quote */

.quote-band { background: var(--cream); text-align: center; }
.quote-band blockquote {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.2;
  color: var(--navy);
  font-style: italic;
  max-width: 820px;
  margin: 0 auto 18px;
}
.quote-band cite {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.cta-band {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  padding: 84px 0;
  position: relative;
  overflow: clip;
}
.cta-band .eyebrow { color: var(--gold-bright); justify-content: center; }
.cta-band h2 {
  color: var(--gold-bright);
  font-style: italic;
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 18px;
}
.cta-band .lede {
  color: rgba(255, 255, 255, 0.72);
  margin: 0 auto 28px;
  max-width: 620px;
}
.cta-band .cta-mail { display: block; margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.cta-band .cta-mail a { color: var(--gold-bright); }

/* ----------------------------------------------------------------- footer */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.7);
  padding: 48px 0 28px;
}
.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.foot-top img { height: 44px; width: auto; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; }
.foot-links ul { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a:hover { color: var(--gold-bright); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  font-size: 13px;
  flex-wrap: wrap;
}
.foot-bottom .gold { color: var(--gold-bright); }

/* ------------------------------------------------------------ about page */

.hero-inner {
  padding: 72px 0 80px;
  background:
    radial-gradient(800px 380px at 88% 0%, rgba(201, 162, 74, 0.14), transparent 55%),
    linear-gradient(180deg, #fbfaf7, var(--white) 72%);
}
.hero-inner .hero-grid { grid-template-columns: 1.3fr 0.7fr; gap: 40px; }
/* the band that follows an inner hero starts closer to it */
.hero-inner + .work { padding-top: 24px; }
.hero-inner + .services-detail { padding-top: 64px; }
.hero-inner h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1; margin-bottom: 20px; }
.hero-inner .hero-visual img { width: min(420px, 100%); }

.story { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }
.story-copy h2 { margin-bottom: 18px; }
.story-copy p { color: var(--muted); font-weight: 300; margin-bottom: 16px; font-size: 16.5px; }
.story-copy p:last-child { margin-bottom: 0; }

.pull {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: radial-gradient(circle at 80% 20%, rgba(201, 162, 74, 0.2), transparent 40%);
}
.pull picture { display: block; }
.pull img { width: 210px; margin: 0 auto 30px; }
.pull blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.28;
  color: var(--gold-bright);
  max-width: 24ch;
}
.pull .gold-rule { margin: 26px auto 0; width: 56px; }
.pull cite {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-style: normal;
}

.values { background: var(--cream); }
.values .card-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.values .card { padding: 26px 22px; }
.values .card .n {
  display: block;
  font-family: var(--serif);
  color: var(--gold-deep);
  font-size: 22px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  position: relative;
}
.values .card .n::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.values .card h3 { font-size: 26px; }
.values .card p { font-size: 14.5px; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.person {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 24px 28px;
  text-align: center;
  background: var(--white);
}
/* navy disc with the globe's meridians behind the initials, as mockup 05 shows */
.person .mono {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c9a24a' stroke-width='1' opacity='0.5'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Cellipse cx='50' cy='50' rx='12' ry='34'/%3E%3Cellipse cx='50' cy='50' rx='24' ry='34'/%3E%3Cpath d='M16 50h68M20.5 34h59M20.5 66h59'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    var(--navy);
  color: var(--gold-bright);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.person .portrait {
  width: 86px;
  height: 86px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.person h3 { font-size: 26px; margin-bottom: 2px; }
.person .role {
  color: var(--gold-deep);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  padding-bottom: 14px;
  position: relative;
}
.person .role::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 1px;
  background: var(--gold);
}
.person p { color: var(--muted); font-size: 14.5px; font-weight: 300; }

/* ---------------------------------------------------------- contact page */

.gk-contact { background: var(--cream); }
.gk-contact .site-header { background: rgba(255, 255, 255, 0.92); }

.hero-contact {
  position: relative;
  padding: 70px 0 36px;
  overflow: clip;
}
.hero-contact::after,
.hero-contact::before {
  content: "";
  position: absolute;
  border: 1px solid rgba(201, 162, 74, 0.38);
  border-radius: 50%;
  pointer-events: none;
}
.hero-contact::after {
  right: -70px;
  top: 60px;
  width: 540px;
  height: 340px;
  transform: rotate(-24deg);
}
.hero-contact::before {
  right: 30px;
  top: 140px;
  width: 430px;
  height: 300px;
  transform: rotate(16deg);
  border-color: rgba(201, 162, 74, 0.22);
}
.hero-contact h1 {
  font-size: clamp(44px, 6.4vw, 76px);
  line-height: 0.95;
  max-width: 14ch;
  margin-bottom: 16px;
  position: relative;
}
.hero-contact .lede { max-width: 470px; position: relative; }

.board { padding: 12px 0 80px; }
.board-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 22px;
  align-items: stretch;
}

.contact-panel {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-image: radial-gradient(circle at 100% 0%, rgba(201, 162, 74, 0.18), transparent 42%);
}
.contact-panel h2 { color: var(--gold-bright); font-size: 42px; line-height: 1.05; }
.contact-panel .gold-rule { margin: 16px 0 0; width: 48px; }
.panel-meta { display: grid; gap: 18px; }
.panel-meta > div { display: flex; gap: 14px; align-items: flex-start; }
.panel-meta .ico { color: var(--gold-bright); margin-top: 3px; flex: 0 0 auto; }
.panel-meta b {
  display: block;
  color: var(--gold-bright);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 3px;
}
.panel-meta span, .panel-meta a { color: var(--white); font-weight: 400; font-size: 15px; }
.panel-meta a:hover { color: var(--gold-bright); }

.chips {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(201, 162, 74, 0.24);
}
.chips li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(201, 162, 74, 0.28);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.76);
}
.chips .ico { color: var(--gold-bright); margin-top: 2px; flex: 0 0 auto; }
.chips strong { display: block; color: var(--white); font-weight: 500; margin-bottom: 2px; }

/* ------------------------------------------------------------------ form */

.brief-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  box-shadow: 0 18px 50px rgba(6, 28, 66, 0.06);
}
.brief-card h2 { font-size: 36px; margin-bottom: 6px; }
.brief-card .hint { color: var(--muted); font-weight: 300; margin-bottom: 24px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.span-2 { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 7px;
  font-weight: 600;
}
.field .req { color: var(--gold-deep); }

input[type="text"], input[type="email"], input[type="url"], select, textarea {
  width: 100%;
  border: 1px solid rgba(6, 28, 66, 0.14);
  background: #fbfaf7;
  border-radius: 12px;
  padding: 13px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: #9aa3b0; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
  outline: none;
}
textarea { min-height: 140px; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23061c42' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit { margin-top: 20px; width: 100%; }

.form-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

.form-alert {
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 15px;
  border: 1px solid;
}
.form-alert-error { background: #fdf3f3; border-color: #e4b8b8; color: #7a2323; }
.form-alert-ok {
  background: #f6f1e4;
  border-color: var(--gold);
  color: var(--gold-deep);
  font-weight: 500;
}
.field-error { display: block; margin-top: 6px; font-size: 13px; color: #a03434; }
.field.has-error input, .field.has-error textarea { border-color: #c86a6a; }

.brief-sent {
  text-align: center;
  padding: 26px 10px 6px;
}
.brief-sent h2 { margin-bottom: 10px; }
.brief-sent p { color: var(--muted); font-weight: 300; }

/* --------------------------------------------------------------- mailbar */

.mailbar {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  padding: 18px 16px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mailbar .ico { color: var(--gold-bright); }
.mailbar a { color: var(--gold-bright); }
.mailbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------- FAQ */

.faq { background: var(--white); padding: 72px 0 80px; }
.faq h2 { font-size: clamp(32px, 4vw, 40px); margin-bottom: 24px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--gold-deep);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); font-weight: 300; padding: 10px 0 6px; max-width: 70ch; }

/* ------------------------------------------------------- services page */

.service-rows { display: grid; gap: 18px; }
.service-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.service-row .numeral {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold-deep);
}
.service-row h2 { font-size: 32px; margin-bottom: 8px; }
.service-row p { color: var(--muted); font-weight: 300; font-size: 16.5px; max-width: 62ch; }

/* --------------------------------------------------- work page + single */

.work-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work-page-grid .project,
.work-page-grid .project-card { min-height: 340px; }

/* Four projects leave one alone on the second row of a three-up grid.
   Centre it rather than letting it hang off the left edge. Scoped to the
   three-up state only — below 900px the grid is two-up (four fills it) and
   below 480px it is one-up, where grid-column:2 would invent a column. */
@media (min-width: 901px) {
  .work-page-grid:has(> :nth-child(4):last-child) > :last-child {
    grid-column: 2;
  }
}

.case-hero {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: 72px 0 64px;
  position: relative;
  overflow: clip;
}
.case-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 36px solid rgba(201, 162, 74, 0.08);
}
.case-hero h1 { color: var(--white); position: relative; }
.case-hero .case-meta {
  position: relative;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.case-body { padding: 72px 0 88px; }

/* ------------------------------------------------------- generic content */

.page-hero {
  padding: 64px 0 40px;
  background: linear-gradient(180deg, #fbfaf7, var(--white) 80%);
}
.entry-content { padding: 8px 0 88px; }
.entry-content .wrap { width: min(760px, calc(100% - 40px)); }
.entry-content h2 { font-size: 34px; margin: 40px 0 12px; }
.entry-content h3 { font-size: 26px; margin: 28px 0 10px; }
.entry-content p { margin-bottom: 16px; color: var(--muted); font-weight: 300; font-size: 16.5px; }
.entry-content a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.entry-content strong { color: var(--navy); font-weight: 500; }
.entry-content ul, .entry-content ol { margin: 0 0 18px 20px; color: var(--muted); font-weight: 300; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 8px; }
.entry-content blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 20px;
  margin: 24px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
}
.entry-content img { border-radius: 16px; margin: 24px 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--cream); color: var(--navy); font-weight: 600; }
/* tables scroll rather than push the page wide on phones */
.entry-content .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.error-404 { padding: 110px 0 120px; text-align: center; }
.error-404 .lede { margin: 0 auto 28px; }

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

@media (max-width: 1080px) {
  .hero-grid { gap: 32px; }
  .studio-grid { gap: 40px; }
  .has-hero-art .hero-copy { max-width: 62%; }

  /* The tier page's sticky sidebar stops being worth a column here. */
  .tier-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .tier-aside { position: static; max-width: 460px; }
}

/* Six nav items stop fitting beside the lockup and the CTA at about this width —
   measured, not guessed: at 1180 the row is clear, at 1080 "E-Commerce Solutions"
   wraps to two lines. Hand over to the burger before that happens. The 900px
   block below repeats these rules for narrower screens; the duplication is
   deliberate so that block keeps working on its own. */
@media (max-width: 1120px) {
  .primary-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 18px 20px 26px;
    box-shadow: 0 18px 40px rgba(6, 28, 66, 0.08);
    z-index: 30;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 6px; }
  .primary-nav a { font-size: 16px; padding: 10px 0; }
  .menu-toggle { display: block; }
  .header-inner { position: relative; }
}

@media (max-width: 900px) {
  section { padding: 72px 0; }

  .primary-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 18px 20px 26px;
    box-shadow: 0 18px 40px rgba(6, 28, 66, 0.08);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 6px; }
  .primary-nav a { font-size: 16px; padding: 10px 0; }
  .menu-toggle { display: block; }
  .site-header { position: sticky; }
  .header-inner { position: relative; }
  .nav-cta .btn { padding: 11px 16px; font-size: 12px; }

  .hero-grid,
  .hero-inner .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }

  /* Art becomes a banner strip above the copy: a 2.33:1 graphic cannot be
     cropped to a phone-shaped box without either losing the artwork or
     putting navy under the text. */
  .hero-art {
    position: static;
    width: 100%;
  }
  .hero-art picture { height: auto; }
  .hero-art img {
    height: auto;
    aspect-ratio: 1916 / 821;
  }
  .hero-art::after { display: none; }
  .has-hero-art .hero-copy { max-width: none; }
  .has-hero-art { min-height: 0; }

  .hero-home.has-hero-art,
  .hero-inner.has-hero-art,
  .hero-contact.has-hero-art,
  .page-hero.has-hero-art,
  .case-hero.has-hero-art,
  .error-404.has-hero-art { padding-top: 0; }
  .has-hero-art > .wrap { padding-top: 38px; }
  .error-404.has-hero-art { text-align: center; padding-bottom: 96px; }
  .error-404.has-hero-art .lede { margin-left: auto; }
  .hero-visual img { width: min(360px, 78%); }
  .hero-home { padding: 48px 0 64px; }
  .hero-home::before { width: 380px; height: 380px; inset: auto -140px -200px auto; }

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

  /* Three tiers, two columns — the third centres rather than hanging left. */
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid > .tier:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc(50% - 10px));
  }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps .step { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 20px 20px 0; }
  .process-steps .step:nth-child(2n) { border-right: 0; }

  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-page-grid { grid-template-columns: repeat(2, 1fr); }
  .project.is-tall { min-height: 380px; }
  .project-card.is-tall .project-card-plate { height: 210px; padding: 32px 36px; }

  .studio-grid { grid-template-columns: 1fr; }
  .studio-mark { max-width: 380px; }

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

  .board-grid { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .hero-contact::after { right: -180px; width: 420px; height: 280px; }
  .hero-contact::before { display: none; }
  .contact-panel h2 { font-size: 36px; }

  .service-row { grid-template-columns: 1fr; gap: 16px; padding: 26px 24px; }
  .service-row .numeral { width: 56px; height: 56px; font-size: 22px; }

  .foot-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot-bottom { flex-direction: column; gap: 8px; }
}

/* a lone card at the end of a two-up row centres itself */
@media (max-width: 900px) {
  .card-grid > *:last-child:nth-child(odd),
  .team-grid > *:last-child:nth-child(odd),
  .work-page-grid > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc(50% - 10px));
  }
}

@media (max-width: 640px) {
  .brand img { height: 34px; }
  :root { --header-h: 66px; }
  h1 { font-size: clamp(34px, 9vw, 46px); }
  /* keep the three figures on one row rather than letting one wrap with a
     stray divider hanging off its left edge */
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: none; }
  .hero-stats .stat { padding-right: 10px; }
  .hero-stats .stat + .stat { padding-left: 12px; }
  .hero-stats b { font-size: 24px; }
  .hero-stats span { font-size: 10.5px; letter-spacing: 0.04em; }
  .hero-actions .btn { width: 100%; }
  .trust-bar { font-size: 11px; letter-spacing: 0.1em; }
  .trust-bar ul { gap: 12px; }
  .trust-bar li { gap: 12px; }
  .card { padding: 20px 18px; }
  .card h3 { font-size: 22px; }
  .card p { font-size: 14px; }
  .card .numeral { width: 34px; height: 34px; font-size: 15px; margin-bottom: 14px; }
  .values .card h3 { font-size: 21px; }
  .work-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .project { padding: 22px; }
  .project h3 { font-size: 26px; }
  .contact-panel, .brief-card { padding: 28px 22px; }
  .brief-card h2 { font-size: 30px; }
  .faq summary { font-size: 21px; }
  .quote-band blockquote { font-size: 24px; }
  .pull { padding: 34px 26px; }
  .pull blockquote { font-size: 23px; }
  .studio-band .intro { font-size: 16px; }
}

@media (max-width: 480px) {
  .work-grid, .work-page-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .work-grid > *:last-child:nth-child(odd),
  .work-page-grid > *:last-child:nth-child(odd),
  .team-grid > *:last-child:nth-child(odd) { width: 100%; }
  .project.is-tall { min-height: 300px; }
  .project-card.is-tall { grid-row: auto; }
  .project-card.is-tall .project-card-plate { height: 170px; }
  .hero-stats .stat { padding-right: 6px; }
  .hero-stats .stat + .stat { padding-left: 10px; }
  .hero-stats b { font-size: 22px; }

  /* A tier card is a list of promises; two-up would set them in a gutter. */
  .tier-grid { grid-template-columns: 1fr; }
  .tier-grid > .tier:last-child:nth-child(odd) { width: 100%; }
  .tier-inner { padding: 20px 22px 24px; }
  .tier-media { height: 170px; }
  .tier-name { font-size: 26px; }
}

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

@media print {
  .site-header, .site-footer, .cta-band, .mailbar, .menu-toggle { display: none !important; }
  body { color: #000; background: #fff; }
}