/* ==========================================================================
   Helious Thrive — "The Thread"
   --------------------------------------------------------------------------
   PALETTE NOTE (Recipe Menu, colour character):
   "Avoid default AI-beige, default corporate navy and fashionable gradients
   without a brand reason." An earlier revision of this file used exactly those
   two defaults. It now works from the firm's own mark instead.

   The Helious logo is a single stroke running from a deep blue to a light cyan.
   That gradient supplies the accent (azure, darkened until it carries text on a
   light ground) and the decorative highlight (cyan, which never carries text at
   2.4:1). The ink is deliberately GRAPHITE, not navy, and the ground is
   deliberately COOL, not warm paper, so neither default is reintroduced by the
   back door.

   Contrast law, measured:
     ink    #1A1E21 on paper #F5F6F7 .... 15.5:1  body and headings
     ink-2  #343B41 on paper ........... 10.5:1  secondary prose
     ink-dim #515B62 on paper ........... 6.4:1  muted text, 14px+
     azure  #0C63A8 on paper ............ 5.8:1  links and buttons
     white  on azure .................... 6.2:1  primary button label
     cyan   #29ABE2 on paper ............ 2.4:1  DECORATION ONLY, never text
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------- */

:root {
  --paper: #f5f6f7;
  --paper-2: #e9ebed; /* recessed band */
  --paper-3: #e1e4e7; /* image backing plate */
  --white: #ffffff;

  --ink: #1a1e21;
  --ink-2: #343b41;
  --ink-dim: #515b62;

  --on-dark: #f2f4f5;
  --on-dark-dim: rgba(242, 244, 245, 0.72);
  --on-dark-faint: rgba(242, 244, 245, 0.46);
  --line-dark: rgba(242, 244, 245, 0.16);

  --blue: #0c63a8;
  --blue-deep: #084e86;
  --blue-tint: #e4eef6;
  --cyan: #29abe2; /* decoration only */

  --rule: #d5d9dd;
  --rule-strong: #b6bcc2;

  --focus: #0c63a8;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 1220px;
  --gutter: clamp(20px, 5vw, 56px);
  --sect: clamp(40px, 5vw, 76px);
  --sect-sm: clamp(30px, 3.6vw, 52px);

  --r: 3px; /* the only radius in the system */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-firm: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- reset -------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* guard only; layouts below do not overflow */
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ---- accessibility primitives ------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.cta :focus-visible,
.foot :focus-visible {
  outline-color: var(--on-dark);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}

.skip:focus {
  top: 12px;
}

/* ---- layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.main > section {
  padding-block: var(--sect);
}

/* ---- shared type -------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* The leading dash was decoration and a recognisable template tell. The
   label carries the meaning on its own. */
.eyebrow__rule {
  display: none;
}

.cta .eyebrow {
  color: var(--on-dark-dim);
}

.link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.16s var(--ease);
}

.link::after {
  content: "\2192";
  transition: transform 0.16s var(--ease);
}

.link:hover {
  color: var(--blue-deep);
}

@media (hover: hover) {
  .link:hover::after {
    transform: translateX(3px);
  }
}

.prose {
  font-family: var(--font-read);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 68ch;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2,
.prose h3 {
  font-family: var(--font);
  color: var(--ink);
  margin-top: 2em;
}

.prose h2 {
  font-size: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
}

.prose h3 {
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
}

.prose a {
  color: var(--blue);
  text-underline-offset: 3px;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose blockquote {
  border-left: 3px solid var(--blue);
  padding-left: 1.2em;
  font-style: italic;
}

.prose img {
  margin-block: 1.6em;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border: 2px solid var(--blue);
  border-radius: var(--r);
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.btn:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--blue);
}

.btn--ghost:hover {
  background: var(--blue-tint);
  border-color: var(--blue-deep);
  color: var(--blue-deep);
}

.btn--onDark {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--ink);
}

.btn--onDark:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn--sm {
  min-height: 42px;
  padding: 9px 18px;
  font-size: 0.875rem;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
}

.site__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.brand {
  display: block;
  flex: 0 0 auto;
  padding-block: 14px;
}

.brand__logo {
  width: auto;
  height: 38px;
}

/* ---- navigation --------------------------------------------------------- */

.nav__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r);
  background: transparent;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.nav__toggleBars {
  display: grid;
  gap: 5px;
  width: 18px;
}

.nav__toggleBars i {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform 0.22s var(--ease-firm), opacity 0.18s var(--ease);
}

.nav__toggle[aria-expanded="true"] .nav__toggleBars i:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggleBars i:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.nav__panel {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.04vw, 27px);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.56vw, 23px);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 10px 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.16s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease-firm);
}

.nav__link:hover {
  color: var(--ink);
}

@media (hover: hover) {
  .nav__link:hover::after {
    transform: scaleX(1);
  }
}

.nav__link.is-current {
  color: var(--ink);
  font-weight: 600;
}

.nav__link.is-current::after {
  transform: scaleX(1);
}

.nav__aside {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__phone {
  display: none;
}

@media (max-width: 1023px) {
  .nav__toggle {
    display: inline-flex;
  }

  .nav__panel {
    position: fixed;
    inset: 76px 0 0;
    z-index: 90;
    display: block;
    padding: 8px var(--gutter) calc(var(--gutter) + 24px);
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s var(--ease), transform 0.24s var(--ease-firm),
      visibility 0s linear 0.24s;
  }

  .nav__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav__list {
    display: block;
  }

  .nav__link {
    display: block;
    padding: 18px 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
  }

  .nav__link::after {
    left: -8px;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 3px;
    height: 22px;
    transform: translateY(-50%) scaleY(0);
  }

  .nav__link.is-current::after {
    transform: translateY(-50%) scaleY(1);
  }

  .nav__aside {
    display: block;
    margin-top: 28px;
    padding-top: 28px;
  }

  .nav__aside .btn {
    width: 100%;
  }

  .nav__phone {
    display: block;
    margin-top: 16px;
    font-size: 1.0625rem;
    font-weight: 600;
  }

  .nav__phone a {
    text-decoration: none;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__panel,
  .nav__toggleBars i,
  .nav__link::after,
  .link::after {
    transition-duration: 0.01ms;
  }
}

/* ---- page masthead ------------------------------------------------------ */

/* Type-led and full width. There is no second column, so there is no empty
   column, and the title is never squeezed into a narrow measure that stacks it
   into a tower. Padding is tight on purpose: a masthead, not a hero. */

.phead {
  padding-top: clamp(18px, 2.31vw, 27px);
  padding-bottom: 0;
}

.phead__inner {
  padding-bottom: clamp(20px, 2.72vw, 33px);
}

/* The label sits on a rule that carries to the right edge, the way a heading
   rule runs across a filed document. Not a short floating dash. */
.phead__rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(16px, 2.03vw, 25px);
}

.phead__label {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.phead__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule-strong);
}

/* Full container width. No max-width, no balance: the measure is the page. */
.phead__title {
  font-size: min(clamp(1.875rem, 4.2vw, 3.25rem), 10vw);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: pretty;
  max-width: none;
}

.phead__lede {
  margin-top: clamp(14px, 1.56vw, 20px);
  max-width: 64ch;
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  line-height: 1.62;
  color: var(--ink-dim);
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

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

.hero {
  padding-top: clamp(29px, 4.2vw, 58px) !important;
  padding-bottom: clamp(34px, 4.8vw, 66px) !important;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(19px, 3vw, 43px);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.25rem, 5.2vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.03;
  max-width: 15ch;
}

.hero__title em {
  font-style: normal;
  color: var(--blue);
}

.hero__lede {
  margin-top: 26px;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  line-height: 1.62;
  color: var(--ink-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.72vw, 33px);
  margin-top: 44px;
  padding-top: 28px;
}

.hero__proof li {
  display: grid;
  gap: 4px;
}

.hero__proofValue {
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hero__proofLabel {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.hero__figure {
  position: relative;
  margin: 0;
}

/* The brand stroke, drawn once behind the portrait on load. This is the first
   appearance of the thread that later runs the whole client journey. */
.hero__figure::before {
  content: "";
  position: absolute;
  inset: -6% -8% 12% 20%;
  background: linear-gradient(150deg, var(--blue) 0%, var(--cyan) 100%);
  opacity: 0.1;
  z-index: 0;
}

.hero__portrait {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--paper-3);
}

.hero__portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  /* One image language across all portraits: hard rectangular crop, navy
     duotone, so studio backgrounds that differ in the source read as one set. */
  /* Shown in colour. See the note on portraits in the images section. */
}

.hero__caption {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--blue);
}

.hero__captionName {
  font-size: 0.9375rem;
  font-weight: 700;
}

.hero__captionRole {
  font-size: 0.875rem;
  color: var(--ink-dim);
}

@media (max-width: 899px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__figure {
    order: -1;
    max-width: 420px;
  }

  .hero__title {
    max-width: 18ch;
  }
}

/* ---- mission ------------------------------------------------------------ */

/* ---- journey and the signature thread ----------------------------------- */

.journey {
  padding-bottom: clamp(29px, 4.2vw, 58px) !important;
}

.journey__head {
  max-width: 34ch;
  margin-bottom: clamp(24px, 3.6vw, 43px);
}

.journey__title {
  font-size: clamp(1.625rem, 2.4vw + 1rem, 2.5rem);
  letter-spacing: -0.028em;
}

.journey__body {
  position: relative;
}

/* The thread: one continuous line drawn down the rail as the section scrolls.
   Without JavaScript, or with reduced motion, it renders fully drawn. */
.thread {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
}

.stages {
  position: relative;
  display: grid;
  gap: clamp(29px, 4.2vw, 58px);
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(14px, 2.04vw, 27px);
  align-items: start;
}

.stage__marker {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

.stage__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 6px var(--paper);
  transition: transform 0.4s var(--ease-firm), background-color 0.4s var(--ease);
  /* Fill and hollow states are set in the thread block near the end of this
     file, so the finished state is the default. */
}

.stage.is-reached .stage__dot {
  background: var(--blue);
  transform: scale(1.15);
}

.stage__head {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
}

.stage__num {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

.stage__name {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stage__content {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(16px, 2.72vw, 38px);
  padding-top: 24px;
}

.stage__title {
  grid-column: 1;
  font-size: clamp(1.125rem, 0.8vw + 0.95rem, 1.375rem);
  margin-bottom: 12px;
}

.stage__body {
  grid-column: 1;
  grid-row: 2;
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--ink-dim);
  max-width: 56ch;
}

.stage__links {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: 0;
  align-content: start;
}

.stage__links a {
  display: block;
  padding: 14px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.16s var(--ease), padding-left 0.18s var(--ease);
}

.stage__links a:hover {
  color: var(--blue);
  padding-left: 8px;
}

@media (max-width: 899px) {
  .stage__content {
    grid-template-columns: 1fr;
  }

  .stage__title,
  .stage__body,
  .stage__links {
    grid-column: 1;
    grid-row: auto;
  }

  .stage__links {
    margin-top: 8px;
  }
}

@media (max-width: 639px) {
  .stage {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 16px;
  }

  .thread {
    width: 34px;
  }
}

/* ---- reviews ------------------------------------------------------------ */

.reviews {
  background: var(--paper-2);
}

.reviews__head {
  max-width: 34ch;
  margin-bottom: clamp(24px, 3.4vw, 38px);
}

.reviews__title {
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.25rem);
  letter-spacing: -0.028em;
}

.reviews__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 22px;
  font-size: 0.9375rem;
  color: var(--ink-dim);
}

.reviews__rating {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.stars {
  display: inline-flex;
  gap: 2px;
}

.stars svg {
  width: 17px;
  height: 17px;
  fill: var(--rule-strong);
}

.stars svg.is-on {
  fill: #e0a020;
}

.reviews__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.87vw, 25px);
}

.review {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--white);
}

.review__quote {
  flex: 1;
}

.review__quote p {
  font-family: var(--font-read);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink-2);
}

.review__quote p::before {
  content: "\201C";
}

.review__quote p::after {
  content: "\201D";
}

.review__author {
  padding-top: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 1023px) {
  .reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .reviews__list {
    grid-template-columns: 1fr;
  }
}

/* ---- leads (the two principals on the homepage) ------------------------- */

.leads__head {
  max-width: 30ch;
  margin-bottom: clamp(22px, 2.72vw, 35px);
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(19px, 3vw, 43px);
  align-items: start;
}

.intro__lede {
  font-size: clamp(1.25rem, 1.4vw + 1rem, 1.625rem);
  line-height: 1.42;
  letter-spacing: -0.018em;
  font-weight: 500;
  max-width: 34ch;
}

.intro__body {
  margin-top: 24px;
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--ink-dim);
}

.intro__figure {
  background: var(--paper-3);
}

.intro__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;

}

@media (max-width: 899px) {
  .intro__inner {
    grid-template-columns: 1fr;
  }
}

/* ---- team --------------------------------------------------------------- */

.team {
  background: var(--paper-2);
}

.team__head {
  max-width: 52ch;
  margin-bottom: clamp(22px, 3vw, 36px);
}

.team__title {
  font-size: clamp(1.625rem, 2.2vw + 1rem, 2.25rem);
  letter-spacing: -0.028em;
}

.team__lede {
  margin-top: 18px;
  font-size: 1.0625rem;
  line-height: 1.64;
  color: var(--ink-dim);
}

.team__list {
  display: grid;
  gap: clamp(22px, 3vw, 38px);
}

.person {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(19px, 2.72vw, 38px);
  padding-top: 28px;
  align-items: start;
}

.person__figure {
  margin: 0;
  background: var(--paper-3);
}

.person__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 10%;

}

.person__name {
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.person__role {
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue);
}

.person__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 20px;
}

.person__creds li {
  padding: 5px 11px;
  border-radius: var(--r);
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.person__summary {
  margin-top: 20px;
  margin-bottom: 22px;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--ink-dim);
}

@media (max-width: 767px) {
  .person {
    grid-template-columns: 1fr;
  }

  .person__figure {
    max-width: 240px;
  }
}

/* ---- accreditations ----------------------------------------------------- */

.accred {
  padding-block: var(--sect-sm) !important;
}

.accred__title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 32px;
}

.accred__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(17px, 3vw, 38px);
  padding-top: 28px;
}

.accred__item img {
  height: 46px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.72;
  mix-blend-mode: multiply;
  transition: filter 0.2s var(--ease), opacity 0.2s var(--ease);
}

.accred__item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ---- crosslink ---------------------------------------------------------- */

.crosslink {
  padding-block: var(--sect-sm) !important;
}

.crosslink__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.crosslink__title {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  letter-spacing: -0.024em;
}

.crosslink__body {
  margin-top: 10px;
  max-width: 52ch;
  font-size: 1rem;
  color: var(--ink-dim);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

.register__key {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 20px;
  padding-bottom: 24px;
  margin-bottom: clamp(19px, 2.72vw, 30px);
}

.register__list {
  display: grid;
}

.entry {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(14px, 2.04vw, 33px);
  padding-block: clamp(19px, 2.31vw, 30px);
  align-items: start;
  scroll-margin-top: 110px;
}

.entry:target {
  background: var(--blue-tint);
  box-shadow: -12px 0 0 var(--blue-tint), 12px 0 0 var(--blue-tint);
}

.entry__index {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  padding-top: 4px;
}

.entry__headRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 16px;
}

.entry__title {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  letter-spacing: -0.026em;
}

.entry__summary {
  margin-top: 14px;
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-dim);
}

.entry__scopeLabel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.entry__scopeList {
  display: grid;
  gap: 9px;
  margin-bottom: 20px;
}

.entry__scopeList li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.entry__scopeList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--blue);
}

@media (max-width: 899px) {
  .entry {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .entry__scope {
    grid-column: 2;
  }
}

/* ---- essay -------------------------------------------------------------- */

.essay {
  background: var(--paper-2);
}

.essay__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(17px, 2.4vw, 38px);
  align-items: start;
}

.essay__title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.125rem);
  letter-spacing: -0.028em;
  max-width: 14ch;
  padding-top: 20px;
}

@media (max-width: 899px) {
  .essay__inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   WHY HELIOUS
   ========================================================================== */

.case__title {
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.25rem);
  letter-spacing: -0.028em;
  margin-bottom: clamp(22px, 2.72vw, 35px);
}

.case__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(19px, 3vw, 43px);
}

.claim {
  padding-block: clamp(20px, 2.34vw, 30px);
}

.claim__index {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  margin-bottom: 14px;
}

.claim__title {
  font-size: clamp(1.125rem, 0.9vw + 0.95rem, 1.375rem);
  letter-spacing: -0.024em;
  margin-bottom: 12px;
  max-width: 26ch;
}

.claim__body {
  font-size: 1rem;
  line-height: 1.66;
  color: var(--ink-dim);
  max-width: 48ch;
}

@media (max-width: 767px) {
  .case__list {
    grid-template-columns: 1fr;
  }

}

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

.pullquote {
  background: var(--ink);
  color: var(--on-dark);
}

.pullquote__inner {
  max-width: 900px;
}

.pullquote__quote p {
  font-family: var(--font-read);
  font-size: clamp(1.375rem, 2.4vw + 1rem, 2.25rem);
  line-height: 1.34;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.pullquote__quote p::before {
  content: "\201C";
}

.pullquote__quote p::after {
  content: "\201D";
}

.pullquote__attrib {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: 28px;
  padding-top: 20px;
}

.pullquote__author {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pullquote__source {
  font-size: 0.875rem;
  color: var(--on-dark-dim);
}

.pullquote__source a {
  color: var(--on-dark);
  text-underline-offset: 3px;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: start;
}

.contact__h {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  letter-spacing: -0.024em;
  padding-bottom: 18px;
}

.contact__note {
  margin-top: 18px;
  margin-bottom: 28px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 54ch;
}

.contact__note a {
  color: var(--blue);
  text-underline-offset: 3px;
}

.contact__after {
  margin-top: 24px;
  padding-top: 18px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 56ch;
}

.details {
  margin-top: 26px;
}

.details__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  padding-block: 16px;
}

.details__row dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-top: 3px;
}

.details__row dd {
  font-size: 0.9375rem;
  line-height: 1.58;
}

.details__row address {
  font-style: normal;
  display: grid;
  gap: 2px;
}

.details__row a {
  color: var(--blue);
  font-weight: 500;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.details__hours {
  display: block;
  color: var(--ink-2);
}

.details__hours + .details__hours {
  margin-top: 4px;
}

@media (max-width: 899px) {
  .contact__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 419px) {
  .details__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---- form (Contact Form 7) ---------------------------------------------- */

.form {
  margin-top: 4px;
}

.form label {
  display: block;
  margin-bottom: 18px;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="number"],
.form input[type="date"],
.form textarea,
.form select {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--white);
  border-radius: var(--r);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.form textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.form ::placeholder {
  color: #7c8595;
  opacity: 1;
}

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27, 77, 184, 0.18);
}

.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
  border-color: #a4231d;
  box-shadow: 0 0 0 3px rgba(164, 35, 29, 0.14);
}

.form input[type="submit"],
.form .wpcf7-submit {
  width: auto;
  min-height: 48px;
  padding: 13px 30px;
  border: 2px solid var(--blue);
  border-radius: var(--r);
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.form input[type="submit"]:hover,
.form .wpcf7-submit:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #a4231d;
}

.form .wpcf7-response-output {
  margin: 22px 0 0 !important;
  padding: 14px 18px !important;
  border-left: 4px solid var(--ink) !important;
  border-radius: var(--r);
  background: var(--white);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.form .wpcf7 form.sent .wpcf7-response-output {
  border-left-color: #23572a !important;
  background: #f0f6f0;
}

.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.failed .wpcf7-response-output,
.form .wpcf7 form.spam .wpcf7-response-output {
  border-left-color: #a4231d !important;
  background: #fbf1f0;
}

.form .wpcf7-spinner {
  margin: 0 0 0 12px;
  vertical-align: middle;
}

.form__fallback {
  padding: 20px;
  border-left: 4px solid var(--ink);
  background: var(--white);
  font-size: 0.9375rem;
}

.form__fallback a {
  color: var(--blue);
}

/* ---- map ---------------------------------------------------------------- */

.map {
  padding-bottom: 0 !important;
  background: var(--paper-2);
}

.map__title {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  letter-spacing: -0.024em;
}

.map__note {
  margin-top: 12px;
  margin-bottom: clamp(19px, 2.72vw, 27px);
  max-width: 56ch;
  font-size: 1rem;
  color: var(--ink-dim);
}

.map__frame iframe {
  width: 100%;
  height: clamp(300px, 42vh, 440px);
  border: 0;
  filter: grayscale(0.85) contrast(1.05);
}

/* ==========================================================================
   PROFILE PAGES
   ========================================================================== */

.profile {
  padding-top: clamp(19px, 2.72vw, 33px) !important;
}

.profile__inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(19px, 3vw, 43px);
  align-items: start;
}

.profile__aside {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 28px;
}

.profile__figure {
  margin: 0;
  background: var(--paper-3);
}

.profile__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 12%;

}

.profile__cardH {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.profile__creds,
.profile__focus {
  display: grid;
  gap: 8px;
}

.profile__creds li,
.profile__focus li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.profile__creds li::before,
.profile__focus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--blue);
}

.profile__name {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.034em;
}

.profile__role {
  margin-top: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--blue);
}

.profile__quals {
  margin-top: 6px;
  padding-bottom: 26px;
  margin-bottom: 30px;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}

.profile__back {
  margin-top: 34px;
  padding-top: 24px;
}

@media (max-width: 899px) {
  .profile__inner {
    grid-template-columns: 1fr;
  }

  .profile__aside {
    position: static;
    max-width: 300px;
  }
}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */

.articles__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(19px, 2.31vw, 33px);
}

.article__link {
  display: grid;
  gap: 20px;
  height: 100%;
  text-decoration: none;
}

.article__figure {
  display: block;
  overflow: hidden;
  background: var(--paper-3);
}

.article__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

@media (hover: hover) {
  .article__link:hover .article__figure img {
    transform: scale(1.03);
  }
}

.article__body {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 18px;
}

.article__date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

.article__title {
  font-size: clamp(1.125rem, 0.9vw + 0.95rem, 1.375rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.024em;
}

.article__link:hover .article__title {
  color: var(--blue);
}

.article__excerpt {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

.article__more {
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--blue);
  justify-self: start;
  padding-bottom: 2px;
}

/* ---- single article ----------------------------------------------------- */

.post__head {
  padding-top: clamp(19px, 2.72vw, 33px);
  padding-bottom: clamp(22px, 2.72vw, 33px);
}

.post__headBody {
  margin-top: clamp(16px, 2.04vw, 27px);
  max-width: 24ch;
}

.post__date {
  display: block;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

.post__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.032em;
  max-width: 20ch;
}

.post__lede {
  margin-top: 20px;
  max-width: 56ch;
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
  line-height: 1.6;
  color: var(--ink-dim);
}

.post__headBody {
  max-width: none;
}

.post__figure {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.post__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.post__inner {
  padding-bottom: var(--sect);
}

.postnav {
  padding-block: var(--sect-sm) !important;
}

.postnav__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.04vw, 27px);
}

.postnav__item {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  text-decoration: none;
}

.postnav__item--next {
  text-align: right;
  grid-column: 2;
}

.postnav__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.postnav__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.02em;
}

.postnav__item:hover .postnav__title {
  color: var(--blue);
}

@media (max-width: 639px) {
  .postnav__inner {
    grid-template-columns: 1fr;
  }

  .postnav__item--next {
    grid-column: 1;
    text-align: left;
  }
}

/* ---- pagination --------------------------------------------------------- */

.pager {
  margin-top: clamp(24px, 3vw, 38px);
  padding-top: 28px;
}

.pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.pager .page-numbers:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pager .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.pager .page-numbers.dots {
  border-color: transparent;
  min-width: 24px;
}

/* ---- documents (privacy policy and similar) ----------------------------- */

.doc__updated {
  margin-top: clamp(22px, 2.72vw, 33px);
  padding-top: 20px;
  font-size: 0.875rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* ---- empty and not-found states ----------------------------------------- */

.empty {
  padding: clamp(24px, 3.4vw, 38px);
  background: var(--white);
  max-width: 60ch;
}

.empty__title {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
  letter-spacing: -0.024em;
  margin-bottom: 12px;
}

.empty__body {
  font-size: 1rem;
  line-height: 1.64;
  color: var(--ink-dim);
}

.empty__body a {
  color: var(--blue);
  text-underline-offset: 3px;
}

.notfound {
  padding-top: clamp(34px, 4.8vw, 66px) !important;
}

.notfound__inner {
  max-width: 62ch;
}

.notfound__code {
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--rule-strong);
  font-variant-numeric: tabular-nums;
}

.notfound__title {
  margin-top: 12px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
}

.notfound__body {
  margin-top: 18px;
  font-size: 1.0625rem;
  line-height: 1.64;
  color: var(--ink-dim);
}

.notfound__links {
  display: grid;
  margin-top: 32px;
}

.notfound__links a {
  display: block;
  padding: 16px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.16s var(--ease), padding-left 0.18s var(--ease);
}

.notfound__links a:hover {
  color: var(--blue);
  padding-left: 8px;
}

.notfound__search {
  margin-top: 40px;
}

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

.sform__label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.sform__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sform__input {
  flex: 1 1 220px;
  min-height: 46px;
  padding: 11px 15px;
  background: var(--white);
  border-radius: var(--r);
  font-size: 1rem;
}

.sform__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27, 77, 184, 0.18);
}

.searchbox {
  max-width: 520px;
  margin-bottom: clamp(22px, 2.72vw, 33px);
  padding-bottom: clamp(22px, 2.72vw, 33px);
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */

.cta {
  background: var(--ink);
  color: var(--on-dark);
}

.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(19px, 3vw, 48px);
  align-items: start;
}

.cta__title {
  font-size: clamp(1.75rem, 2.8vw + 1rem, 2.75rem);
  letter-spacing: -0.032em;
  max-width: 16ch;
}

.cta__text {
  margin-top: 20px;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.64;
  color: var(--on-dark-dim);
}

.cta__actions {
  display: grid;
  gap: 30px;
  justify-items: start;
  padding-top: 22px;
}

.cta__directLabel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 12px;
}

.cta__link {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding-bottom: 4px;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
  transition: border-color 0.16s var(--ease);
}

.cta__link:hover {
  border-bottom-color: var(--on-dark);
}

@media (max-width: 899px) {
  .cta__inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   A service strip over an office record, not a three-column sitemap. The
   Standards list identical three-column footers among the patterns that make
   unrelated brands feel templated.
   ========================================================================== */

.foot {
  background: var(--ink);
  color: var(--on-dark);
}

.foot__h {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 16px;
}

/* ---- service strip ------------------------------------------------------ */

.fstrip {
  padding-block: clamp(22px, 2.7vw, 36px);
}

.fstrip__h {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 20px;
}

.fstrip__list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
}

.fstrip__list li {
  display: flex;
  align-items: center;
}

/* A separator drawn between items strands an orphan bar at the start of every
   wrapped row, because flex wrapping has no notion of which item ends a line.
   Giving every item the same leading rule sidesteps that entirely and reads as
   a ruled index rather than a broken list. */
.fstrip__list li {
  padding-left: 16px;
  margin-right: 20px;
}

.fstrip__list a {
  font-size: clamp(0.9375rem, 0.5vw + 0.8rem, 1.0625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--on-dark-dim);
  padding-block: 4px;
  transition: color 0.16s var(--ease);
}

.fstrip__list a:hover {
  color: var(--on-dark);
}

/* ---- office record ------------------------------------------------------ */

.foot__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.6fr);
  gap: clamp(17px, 2.4vw, 38px);
  padding-block: clamp(22px, 2.7vw, 36px);
}

.foot__address {
  font-style: normal;
  display: grid;
  gap: 3px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-dark-dim);
}

.foot__map {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 3px;
  transition: border-color 0.16s var(--ease);
}

.foot__map:hover {
  border-bottom-color: var(--on-dark);
}

.foot__h--span {
  grid-column: 1 / -1;
}

.foot__hours {
  display: grid;
  align-content: start;
  gap: 0;
}

.foot__hoursRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  padding-block: 10px;
  font-size: 0.9375rem;
}

.foot__hoursRow dt {
  color: var(--on-dark-dim);
}

.foot__hoursRow dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.foot__list {
  display: grid;
  gap: 10px;
}

.foot__list a {
  font-size: 0.9375rem;
  color: var(--on-dark-dim);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}

.foot__list a:hover {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 40px;
  padding-block: 22px clamp(19px, 2.04vw, 27px);
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.875rem;
}

.foot__co {
  font-weight: 700;
}

.foot__reg,
.foot__copy {
  color: var(--on-dark-dim);
  font-variant-numeric: tabular-nums;
}

.foot__accred {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  font-size: 0.8125rem;
}

.foot__accredLabel {
  color: var(--on-dark-faint);
}

.foot__accred abbr {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: help;
}

@media (max-width: 899px) {
  .foot__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .site,
  .foot,
  .cta,
  .thread,
  .nav,
  .skip,
  .map__frame {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .main > section {
    padding-block: 16pt;
  }
}

/* ==========================================================================
   REFINEMENTS
   Adjustments made after reviewing rendered pages in the browser. Kept in one
   block so the intent of each change stays readable.
   ========================================================================== */

/* The thread must share the stage grid's left edge, so it is positioned inside
   the same centred wrap rather than against the raw viewport. */
.journey__rail {
  position: relative;
}

.thread {
  left: var(--gutter);
}

/* Headings were wrapping into narrow towers. Constrain by measure in px so the
   line count stays sensible as the clamped font size changes. */
.journey__head {
  max-width: 46rem;
}

.journey__title {
  max-width: 22ch;
}

.reviews__head {
  max-width: 46rem;
}

.reviews__title {
  max-width: 20ch;
}

.leads__head,
.team__head {
  max-width: 46rem;
}

/* Hero figure: a single flat offset panel behind a hard-cropped portrait. The
   source photograph carries a soft white studio vignette, so the image is
   scaled slightly inside its frame to crop the vignette out and keep the edge
   hard, consistent with every other portrait on the site. */
.hero__figure::before {
  inset: -20px -20px 96px 40px;
  background: var(--blue-tint);
  opacity: 1;
}

.hero__portrait img {
  transform: scale(1.07);
  transform-origin: 50% 40%;
}

/* Portraits sit at the top of their row rather than stretching, so no grey
   backing plate shows below a shorter image. */
.lead__figure,
.person__figure,
.intro__figure,
.profile__figure {
  align-self: start;
}

/* reCAPTCHA v3 renders a floating badge that collides with the WhatsApp
   button. Google permits hiding it when the required attribution appears
   beside the form instead; that text is printed under the enquiry form. */
.grecaptcha-badge {
  visibility: hidden;
}

.form__recaptcha {
  margin-top: 16px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.form__recaptcha a {
  color: var(--blue);
  text-underline-offset: 3px;
}

/* Keep the floating chat button clear of the closing content on small screens. */
#qlwapp {
  z-index: 80;
}

/* The offset panel now clears the portrait on two sides so it reads as a
   deliberate printed offset plate rather than a misaligned edge. */
.hero__figure::before {
  inset: -26px -34px 84px 52%;
}

/* The mission heading holds position while the two statements scroll past it,
   which uses the left column rather than leaving it empty. */

/* Claim headings broke mid-term ("e-/KYC"). Widening the measure keeps each
   claim on one or two whole lines. */
.claim__title {
  max-width: 34ch;
}

/* ---- form fields with persistent labels --------------------------------- */

.form .field {
  display: block;
  margin-bottom: 20px;
}

.form .field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.form .field__label abbr {
  color: #a4231d;
  text-decoration: none;
  border: 0;
}

.form .field__hint {
  display: block;
  margin-top: 7px;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
}

.form .wpcf7-form-control-wrap {
  display: block;
}

.form .field--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 559px) {
  .form .field--split {
    grid-template-columns: 1fr;
  }
}

/* ---- Insights as a ruled register --------------------------------------- */

.articles__list {
  display: block;
}

.article__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(16px, 2.72vw, 38px);
  align-items: center;
  padding-block: clamp(18px, 2.18vw, 27px);
  height: auto;
  transition: background-color 0.18s var(--ease);
}

.article__body {
  padding-top: 0;
  border-top: 0;
  max-width: 60ch;
}

.article__figure {
  align-self: center;
}

.article__figure img {
  aspect-ratio: 16 / 10;
}

.article__title {
  font-size: clamp(1.25rem, 1.3vw + 1rem, 1.625rem);
}

@media (max-width: 767px) {
  .article__link {
    grid-template-columns: 1fr;
  }

  .article__figure {
    order: -1;
    max-width: 420px;
  }
}

/* An article is a single column of reading. Narrowing its container keeps the
   measure and the image on one axis instead of leaving a wide empty margin. */
.post__head > .wrap,
.post__figure > .wrap,
.post__inner,
.postnav__inner {
  max-width: 940px;
}

/* ---- mobile nav panel, anchored to the header ---------------------------- */

/* The panel was pinned to a hard-coded 76px, which drifts whenever the header
   height changes (longer logo, larger text zoom). Positioning it against the
   header itself keeps it flush at any header height and at 200% zoom. */
@media (max-width: 1023px) {
  .nav__panel {
    position: absolute;
    inset: auto 0 auto 0;
    top: 100%;
    max-height: min(80dvh, calc(100dvh - 4rem));
    padding-block: 8px calc(var(--gutter) + 16px);
    box-shadow: 0 18px 40px -28px rgba(14, 26, 43, 0.45);
  }
}

/* The offset plate behind the hero portrait is a desktop composition device.
   Below the two-column breakpoint the portrait is full width, so the plate has
   nowhere to sit and would push past the right edge. */
@media (max-width: 899px) {
  .hero__figure::before {
    display: none;
  }
}

/* Third-party floating widgets sit outside the layout. Keep them from
   contributing horizontal scroll on narrow screens. */
.grecaptcha-badge {
  visibility: hidden;
  right: auto !important;
  left: -10000px !important;
}

/* ==========================================================================
   200% TEXT ZOOM
   --------------------------------------------------------------------------
   Display sizes are set with clamp() in rem, so at 200% browser text zoom the
   clamp minimum doubles and can exceed the viewport on a phone. Two measures:
   a viewport ceiling on the largest display type, so headings shrink to fit
   rather than overflow; and a break-word safety net on all headings and long
   strings, so nothing can ever push the document wider than the screen.
   ========================================================================== */

.hero__title {
  font-size: min(clamp(2.25rem, 5.2vw, 4rem), 12vw);
}

.post__title {
  font-size: min(clamp(2rem, 4.4vw, 3.5rem), 11vw);
}

.profile__name {
  font-size: min(clamp(2rem, 3.6vw, 3rem), 11vw);
}

.notfound__code {
  font-size: min(clamp(3.5rem, 9vw, 7rem), 20vw);
}

.journey__title,
.reviews__title,
.leads__title,
.team__title,
.case__title,
.essay__title,
.cta__title,
.person__name,
.stage__name {
  font-size: min(clamp(1.5rem, 2.4vw + 1rem, 2.75rem), 10vw);
}

.pullquote__quote p {
  font-size: min(clamp(1.375rem, 2.4vw + 1rem, 2.25rem), 9vw);
}

/* Safety net: headings, long words, URLs and email addresses break rather than
   push the page wide. No effect at normal zoom, where nothing needs to break. */
h1,
h2,
h3,
h4,
p,
li,
dt,
dd,
address,
blockquote,
.prose,
.prose * {
  overflow-wrap: break-word;
}

.prose a,
.details__row a,
.foot__list a,
.cta__link {
  overflow-wrap: anywhere;
}

/* Flex children need an explicit zero minimum before they will shrink. */
.sform__input,
.hero__actions .btn,
.crosslink__inner > *,
.reviews__meta > * {
  min-width: 0;
}

.btn {
  max-width: 100%;
  white-space: normal;
}

/* Grid tracks must be allowed to go below their content's intrinsic width. */
@media (max-width: 899px) {
  .hero__inner,
  .intro__inner,
  .essay__inner,
  .contact__inner,
  .profile__inner,
  .cta__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The name banner now sits above the two profile columns, so the quals rule
   spans the full measure and the aside starts level with the biography. */
.profile__head {
  max-width: 940px;
  margin-bottom: clamp(19px, 2.72vw, 30px);
}

.profile__quals {
  margin-bottom: 0;
}

.profile__aside {
  top: 108px;
}

/* ==========================================================================
   THE THREAD, REBUILT ON CLIPPING
   --------------------------------------------------------------------------
   The reveal was previously a stroke-dasharray animation normalised with
   pathLength="1". That does not survive this drawing: the path is stretched
   with preserveAspectRatio="none" and drawn with vector-effect
   non-scaling-stroke, so the browser resolves dash lengths in screen space and
   pathLength no longer maps onto them. The line rendered part-drawn even with
   no JavaScript running, which is exactly the state the fallback must not be in.

   Clipping is independent of that scaling. The drawn line is a second SVG laid
   over the track and revealed top-down with inset(). Its default cut is 0%, so
   the complete thread is what renders with no JavaScript, with reduced motion,
   or if the script fails: a finished line, not an empty one.
   ========================================================================== */

.thread__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.thread__svg--live {
  clip-path: inset(0 0 var(--thread-cut, 0%) 0);
}

.thread__track,
.thread__live {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.thread__track {
  stroke: var(--rule);
}

.thread__live {
  stroke: var(--blue);
}

/* Stage nodes are filled by default, so the static state is the finished one.
   The script marks the document while it is driving the reveal, and only then
   are unreached nodes drawn hollow. */
.stage__dot {
  background: var(--blue);
}

.thread-js .stage:not(.is-reached) .stage__dot {
  background: var(--paper);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .thread__svg--live {
    clip-path: none;
  }

  .stage__dot {
    background: var(--blue);
    transform: none;
  }
}

/* Legal pages are a single reading column, like articles. */
.doc__inner {
  max-width: 940px;
}

/* The essay is a run of plain paragraphs, not .prose, so it needs its own
   rhythm and reading treatment. */
.essay__body {
  font-family: var(--font-read);
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.0625rem);
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 66ch;
}

.essay__body > p + p {
  margin-top: 1.1em;
}

/* A long link label wrapped onto a second line left the arrow stranded at the
   far right, because inline-flex distributes across the full line box. Laying
   the link out inline keeps the arrow with the final word. */
.link {
  display: inline;
}

.link::after {
  display: inline-block;
  margin-left: 6px;
}

/* On the narrowest screens at 200% zoom the record number column left too
   little room for a service title, so the entry becomes a single column and the
   title takes a viewport ceiling like the other display sizes. */
.entry__title {
  font-size: min(clamp(1.25rem, 1.2vw + 1rem, 1.625rem), 8vw);
}

@media (max-width: 479px) {
  .entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .entry__scope {
    grid-column: 1;
  }

  .entry__index {
    padding-top: 0;
  }
}

/* The oversized 404 numeral sat at 1.75:1 against paper. Even as decoration it
   is large visible text, so it is darkened to clear the 3:1 large-text ratio. */
.notfound__code {
  color: #7e858b;
}

/* ==========================================================================
   PHOTOGRAPHY SLOTS
   --------------------------------------------------------------------------
   Every slot reserves its proportion up front, so the page does not shift when
   a photograph is dropped in later. Treatments vary on purpose: portrait-family
   images take the navy duotone used for the principals so the people on the
   site read as one set, while environment and detail images stay in colour so
   the office and the work look like themselves.
   ========================================================================== */

.shot {
  margin: 0;
  min-width: 0;
}

.shot__img,
.shot__ph {
  display: block;
  width: 100%;
  aspect-ratio: var(--shot-ratio, 16 / 9);
  background: var(--paper-3);
}

.shot__img {
  object-fit: cover;
}

.shot--duotone .shot__img {
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: multiply;
}

.shot__caption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--blue);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* ---- production placeholder --------------------------------------------- */

.shot__ph {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(12px, 1.56vw, 20px);
  background: repeating-linear-gradient(
    -45deg,
    var(--paper-3),
    var(--paper-3) 10px,
    var(--paper-2) 10px,
    var(--paper-2) 20px
  );
  overflow: hidden;
}

.shot__phTag {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 4px 10px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.shot__phSlot {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.shot__phSubject {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 46ch;
}

.shot__phSpec {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* Very small frames cannot carry the full note. */
@media (max-width: 479px) {
  .shot__phSubject {
    display: none;
  }
}

/* ---- placements --------------------------------------------------------- */

/* Why Helious: an advisory scene and an e-KYC detail flank the argument. */
.whyshots {
  padding-top: 0 !important;
}

.whyshots__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(14px, 2.04vw, 27px);
  align-items: start;
}

@media (max-width: 767px) {
  .whyshots__grid {
    grid-template-columns: 1fr;
  }
}

/* Services: a wide record shot under the page header, a device detail in the
   essay column. */
.serviceshot {
  padding-block: 0 0 !important;
  padding-top: clamp(22px, 3vw, 38px) !important;
}

.essay__inner {
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
}

.essay__figure {
  margin-top: 28px;
}

@media (max-width: 899px) {
  .essay__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .essay__figure {
    max-width: 380px;
  }
}

/* Contact: the office entrance sits above the map. */
.contactshot {
  padding-bottom: 0 !important;
}

/* The essay heading and its device detail share the left column. */
.essay__head {
  position: sticky;
  top: 108px;
}

@media (max-width: 899px) {
  .essay__head {
    position: static;
  }
}

/* Contact: the office shot sits above the map, sharing its measure. */
.map__shot {
  margin-bottom: clamp(19px, 2.72vw, 30px);
}

/* The photograph pair introduces the argument, so it takes a modest top space
   and lets the section below own the separation. Previously both sections
   contributed a full section rhythm and the gap doubled. */
.whyshots {
  padding-block: var(--sect-sm) 0 !important;
}

.serviceshot {
  padding-block: var(--sect-sm) 0 !important;
}

/* ==========================================================================
   BORDERLESS SYSTEM
   --------------------------------------------------------------------------
   Every hairline rule has been removed from the theme. Separation is now
   carried by three things instead, which is a stronger system than lines were:

     1. Alternating ground tones. Adjacent sections never share a background,
        so the change of surface is what divides them.
     2. Space. Section padding does the work a divider used to.
     3. Filled surfaces. Anything that used to be an outlined box is now a
        solid panel that sits on the ground rather than being drawn onto it.

   Link affordances survive as real text underlines rather than bottom borders,
   so they still read as links. The focus ring stays: it is an outline, not a
   border, and it is an accessibility requirement.
   ========================================================================== */

/* ---- ground tones ------------------------------------------------------- */

/* Hand-listing which sections take which tone breaks the moment a section is
   added, moved or removed: two neighbours end up sharing a ground and merge
   into one undivided slab. Alternating by position cannot drift, so the bands
   stay correct on every page whatever the section order is.

   The dark sections set their own ground further down the cascade and simply
   opt out of the alternation. */

.main > section:nth-of-type(odd) {
  background: var(--paper);
}

.main > section:nth-of-type(even) {
  background: var(--paper-2);
}

/* These need the same specificity as the alternation rule above, or the
   positional selector outranks them and a dark band silently renders light
   with reversed text on it. */
.main > section.cta,
.main > section.pullquote {
  background: var(--ink);
}

/* The masthead is a <header>, so it sits outside that count. It takes the
   recessed tone, which puts it between the page header above and the first
   section below without either pair merging. */
.site {
  background: rgba(245, 246, 247, 0.92);
}

.phead {
  background: var(--paper-2);
  padding-bottom: clamp(23px, 3.06vw, 38px);
}

.phead__label {
  display: block;
  margin-bottom: clamp(12px, 1.56vw, 19px);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---- filled surfaces ---------------------------------------------------- */

/* Panels that used to be outlined boxes are solid now. */
.review,
.empty,
.form__fallback,
.form .wpcf7-response-output {
  background: var(--white);
  border-radius: var(--r);
}

.review {
  padding: 30px;
}

.form .wpcf7-response-output {
  padding: 16px 20px !important;
  margin: 22px 0 0 !important;
}

.form .wpcf7 form.sent .wpcf7-response-output {
  background: #e8f0e8;
}

.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.failed .wpcf7-response-output,
.form .wpcf7 form.spam .wpcf7-response-output {
  background: #f7e9e8;
}

/* Credential chips and pagination read as small filled tokens. */
.person__creds li,
.pager .page-numbers {
  background: var(--paper-3);
  border-radius: var(--r);
}

.pager .page-numbers:hover {
  background: var(--blue-tint);
  color: var(--blue);
}

.pager .page-numbers.current {
  background: var(--ink);
  color: var(--paper);
}

.pager .page-numbers.dots {
  background: transparent;
}

.nav__toggle {
  /* Zeroed explicitly: with no border declared a button falls back to the
     browser's own 2px outset bevel. */
  border: 0;
  background: var(--paper-3);
  border-radius: var(--r);
  color: var(--ink);
}

/* ---- form fields as wells ----------------------------------------------- */

/* A field is now a recessed surface rather than an outlined rectangle. It has
   to read as a field without a line, so the fill is stepped clearly off the
   page ground and the focus state lifts it to white with the focus ring. */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="number"],
.form input[type="date"],
.form textarea,
.form select,
.sform__input {
  background: #e7eaec;
  border-radius: var(--r);
}

.form ::placeholder,
.sform__input::placeholder {
  color: #5f686f;
  opacity: 1;
}

.form input:focus,
.form textarea:focus,
.form select:focus,
.sform__input:focus {
  background: var(--white);
  box-shadow: none;
}

.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
  background: #f7e9e8;
  box-shadow: none;
}

/* ---- link affordances --------------------------------------------------- */

/* Real underlines, not bottom borders, so links still look like links. */
.link,
.lead__more,
.article__more,
.cta__link,
.foot__map {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.foot__accred abbr {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* ---- spacing that replaces dividers -------------------------------------- */

/* Rows that were separated by a rule are separated by air. */
.stage__links li a {
  padding-block: 10px;
}

.details__row {
  padding-block: 12px;
}

.foot__hoursRow {
  padding-block: 8px;
}

.notfound__links a {
  padding: 14px 0;
}

.entry {
  padding-block: clamp(20px, 2.45vw, 33px);
}

.article__link {
  padding-block: clamp(19px, 2.31vw, 30px);
}

.person {
  padding-top: 0;
}

.team__list {
  gap: clamp(26px, 3.6vw, 46px);
}

.essay__title,
.lead__link,
.article__body,
.postnav__item,
.notfound__links,
.articles__list,
.claim,
.contact__h,
.profile__quals,
.stage__head,
.entry__scopeLabel,
.profile__cardH,
.person__creds,
.lead__quals,
.review__author,
.register__key,
.hero__proof,
.pullquote__attrib,
.cta__actions,
.contact__after,
.doc__updated,
.profile__back,
.accred__list,
.searchbox,
.pager,
.foot__base,
.fstrip,
.fstrip__list li {
  padding-top: 0;
}

/* Where a rule used to sit directly above a heading, that space is given back
   as margin so the group still reads as a group. */
.claim,
.person,
.lead__link,
.article__body {
  padding-top: 0;
}

.fstrip__list li {
  padding-left: 0;
  margin-right: 28px;
}

/* ---- images sit flush ---------------------------------------------------- */

.shot__img,
.shot__ph,
.hero__portrait,
.lead__figure,
.intro__figure,
.person__figure,
.profile__figure,
.article__figure,
.post__figure img {
  border-radius: 0;
}

.shot__ph {
  background: repeating-linear-gradient(
    -45deg,
    var(--paper-3),
    var(--paper-3) 10px,
    var(--paper-2) 10px,
    var(--paper-2) 20px
  );
}

/* Removing a border declaration hands the element back to the browser's own
   default, which for form controls is a 1px inset line. They have to be zeroed
   explicitly, or the fields quietly reintroduce exactly what was removed.
   The submit button keeps its 2px shape and is excluded. */
.form input:not([type="submit"]),
.form textarea,
.form select,
.sform__input {
  border: 0;
}

/* reCAPTCHA writes a border onto its hidden response textarea as an inline
   style, so a class rule cannot reach it. The element is off-screen and never
   seen, but this keeps the "no one-pixel borders" rule true everywhere. */
.g-recaptcha-response {
  border: 0 !important;
}

/* ==========================================================================
   HOMEPAGE ABOUT
   --------------------------------------------------------------------------
   Replaces a sticky heading beside two stacked paragraphs, which left a tall
   empty gap in the left column and read as a stock two-up.

   The mission is now stated once, at display size and full width, so the
   section leads with the claim rather than burying it mid-paragraph. Beneath
   it, three equal columns carry the photograph and the two supporting blocks,
   which fills the measure and gives the picture an actual role.
   ========================================================================== */

.about__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: clamp(14px, 1.72vw, 22px);
}

.about__statement {
  font-size: min(clamp(1.5rem, 2.6vw + 0.8rem, 2.625rem), 8vw);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.028em;
  /* No narrow cap. A constrained measure stacks this into a tower against an
     empty right half, which is the pattern the mastheads deliberately avoid. */
  max-width: none;
  text-wrap: pretty;
  margin-bottom: clamp(24px, 3vw, 43px);
}

/* ==========================================================================
   AFTER RESTORING THE CLIENT'S COPY
   --------------------------------------------------------------------------
   The stage rows previously held a heading and a paragraph on the left with the
   service links on the right. That descriptive copy was written by us and has
   been removed, which left the left column empty and the links stranded. Each
   stage now carries only the client's own service names, laid out across the
   full width of the row.
   ========================================================================== */

.stage__content {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 18px;
}

.stage__links {
  grid-column: 1;
  grid-row: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  column-gap: clamp(14px, 2.04vw, 30px);
  align-content: start;
}

/* The closing line is a full sentence from the client, not a short headline,
   so it needs a reading measure rather than a display cap. */
.cta__title {
  max-width: 32ch;
  font-size: min(clamp(1.375rem, 1.8vw + 0.9rem, 2rem), 7vw);
  line-height: 1.24;
}

.cta__inner {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
}

@media (max-width: 899px) {
  .cta__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* With the stage description gone, the head and its links were left far apart. */
.stage__content {
  padding-top: 10px;
}

.stage__head {
  padding-bottom: 10px;
}

.stages {
  gap: clamp(22px, 3vw, 38px);
}

/* The register was a three-column row: number, title and summary, then the
   scope list. The scope list was written here rather than by the client and has
   been removed, so the row is now two columns and the entry uses the width. */
.entry {
  grid-template-columns: 56px minmax(0, 1fr);
}

.entry__summary {
  max-width: 68ch;
}

@media (max-width: 479px) {
  .entry {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- mission and vision as a diptych ------------------------------------ */

/* Two photographs the client supplied, paired for what they mean rather than
   for symmetry: the mission is the work as it happens, close and in hand; the
   vision is the long view over the city. Near against far, on one line. */

.about__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(17px, 2.4vw, 38px);
  align-items: start;
}

.about__col .shot {
  margin-bottom: clamp(16px, 1.87vw, 23px);
}

.about__colLabel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}

.about__colBody {
  font-size: 1.0625rem;
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 54ch;
}

@media (max-width: 767px) {
  .about__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 4.08vw, 33px);
  }
}

/* ==========================================================================
   PAGE BANNER MASTHEAD
   --------------------------------------------------------------------------
   The supplied banners are all composed the same way: the subject sits right of
   centre and the left third is deliberately empty and light. The title goes in
   that empty area, so the photograph is used as it was shot rather than being
   cropped to fit around text.

   Legibility does not rely on the photograph. A scrim runs from solid page
   ground on the left to transparent past the midpoint, so the text always sits
   on a known background even if a banner is replaced with a darker one later.
   ========================================================================== */

.phead--banner {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(240px, 25vw, 380px);
  padding-block: clamp(22px, 2.72vw, 38px);
  background: var(--paper-2);
  overflow: hidden;
}

.phead__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.phead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.phead__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    /* Fully opaque past the text column's right edge (~42% of the viewport),
       so no glyph ever sits on a partially transparent ground. */
    var(--paper-2) 0%,
    var(--paper-2) 45%,
    rgba(233, 235, 237, 0.82) 58%,
    rgba(233, 235, 237, 0) 78%
  );
}

.phead--banner > .wrap {
  position: relative;
  z-index: 1;
}

.phead--banner .phead__inner {
  /* Kept inside the solid part of the scrim, so no line of the title or lede
     ever sits on the photograph itself. */
  max-width: 40%;
}

.phead--banner .phead__lede {
  max-width: 46ch;
}

/* Below the two-column breakpoint the banner is far too short to hold a
   heading, so the photograph becomes a band above the title and the scrim is
   not needed. */
@media (max-width: 899px) {
  .phead--banner {
    display: block;
    min-height: 0;
    padding-top: 0;
    background: var(--paper-2);
  }

  .phead__media {
    position: relative;
    inset: auto;
    margin-bottom: clamp(19px, 3.12vw, 28px);
  }

  .phead__media img {
    aspect-ratio: 20 / 9;
    height: auto;
    object-position: 70% 50%;
  }

  .phead__scrim {
    display: none;
  }

  .phead--banner .phead__inner {
    max-width: none;
  }
}

/* ==========================================================================
   THE RECORD
   --------------------------------------------------------------------------
   Three figures, each drawn as the quantity it states, so the graphics are
   information and not decoration:

     400+ clients   a field of exactly 400 dots (25 x 16)
     20+ years      a bar of 20 segments, one a year
     98%            a bar of 50 segments of 2% each, the last one left dark

   The row of three equal numerals on a dark band was replaced because it is
   the stock statistics strip. Here the client count leads on the brand blue
   and the other two stack beside it, so the composition has a hierarchy.

   The panels meet edge to edge and are told apart by their ground alone.
   Motion: the dots and bars fill as the figures count, then a slow light
   passes over the dot field. It pauses off screen, and with no script or
   with reduced motion everything is simply drawn complete.
   ========================================================================== */

.main > section.stats {
  padding-block: 0;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  container-type: inline-size;
}

.stats__grid {
  /* Where the site's content column starts, so the full-bleed panels still
     line their text up with everything above and below. */
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  --edge: max(var(--gutter), calc((100cqw - var(--wrap)) / 2 + var(--gutter)));
  --pad: clamp(22px, 2.8vw, 40px);

  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat {
  min-width: 0;
  padding: var(--pad);
}

.stat__text {
  margin: 0;
}

.stat__value {
  display: block;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---- the lead figure ------------------------------------------------------ */

.stat--clients {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px clamp(24px, 3vw, 48px);
  padding-block: clamp(28px, 3.4vw, 48px);
  padding-inline-start: var(--edge);
  background: linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 100%);
  color: var(--white);
}

.stat--clients .stat__value {
  margin-bottom: 14px;
  font-size: min(clamp(4.5rem, 9vw, 8.5rem), 30vw);
  line-height: 0.82;
}

.stat--clients .stat__label {
  color: rgba(255, 255, 255, 0.86);
}

/* 400 dots: 25 columns by 16 rows. The element paints them dim; the lit
   layer above paints the same dots brighter and is wiped in from the left. */
.dots {
  --dot: radial-gradient(circle at center, #fff 0 30%, transparent 33%);

  position: relative;
  flex: 1 1 220px;
  max-width: 400px;
  aspect-ratio: 25 / 16;
  margin-inline-start: auto;
}

.dots::before,
.dots__lit,
.dots__sheen {
  content: "";
  position: absolute;
  inset: 0;
}

.dots::before,
.dots__lit {
  background-image: var(--dot);
  background-size: 4% 6.25%;
}

.dots::before {
  opacity: 0.2;
}

.dots__lit {
  opacity: 0.6;
}

.dots__sheen {
  overflow: hidden;
  -webkit-mask-image: var(--dot);
  mask-image: var(--dot);
  -webkit-mask-size: 4% 6.25%;
  mask-size: 4% 6.25%;
}

.dots__sheen i {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  transform: translateX(-110%) skewX(-18deg);
  will-change: transform;
}

/* ---- the two supporting figures ------------------------------------------- */

.stat--years,
.stat--recommend {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding-inline-end: var(--edge);
}

.stat--years {
  background: var(--ink);
}

.stat--recommend {
  background: var(--ink-2);
}

.stat--years .stat__text,
.stat--recommend .stat__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}

.stat--years .stat__value,
.stat--recommend .stat__value {
  font-size: min(clamp(2.5rem, 4vw, 3.5rem), 15vw);
}

.stat--years .stat__label,
.stat--recommend .stat__label {
  color: var(--on-dark-dim);
}

/* A segmented bar. --n is the number of segments and --fill how much of the
   bar is lit. The segments are cut with a mask so the lit layer can carry one
   continuous brand gradient across all of them. */
.meter {
  --n: 20;
  --fill: 100%;
  --seg: linear-gradient(90deg, #000 0 72%, transparent 72%);

  position: relative;
  height: 14px;
  -webkit-mask-image: var(--seg);
  mask-image: var(--seg);
  -webkit-mask-size: calc(100% / var(--n)) 100%;
  mask-size: calc(100% / var(--n)) 100%;
  background: rgba(242, 244, 245, 0.16);
}

.stat--recommend .meter {
  /* 50 segments of 2% each: 49 lit, the last one left dark. A hundred
     segments were too fine to read as separate marks at this width. */
  --n: 50;
  --fill: 98%;
  --seg: linear-gradient(90deg, #000 0 66%, transparent 66%);
}

.meter__lit {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%);
  clip-path: inset(0 calc(100% - var(--fill)) 0 0);
}

/* ---- motion --------------------------------------------------------------- */

.stats-js .dots__lit,
.stats-js .meter__lit {
  clip-path: inset(0 100% 0 0);
}

.stats-js.is-live .dots__lit {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s var(--ease) 0.1s;
}

.stats-js.is-live .meter__lit {
  clip-path: inset(0 calc(100% - var(--fill)) 0 0);
  transition: clip-path 1.2s var(--ease) 0.3s;
}

.stats-js.is-live .stat--recommend .meter__lit {
  transition-delay: 0.5s;
}

.stats-js.is-live .dots__sheen i {
  animation: dots-sheen 7s var(--ease-firm) 1.8s infinite;
}

/* Offscreen work is wasted work. */
.stats-js:not(.is-onscreen) .dots__sheen i {
  animation-play-state: paused;
}

@keyframes dots-sheen {
  0% {
    transform: translateX(-110%) skewX(-18deg);
  }
  55%,
  100% {
    transform: translateX(260%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats-js .dots__lit,
  .stats-js.is-live .dots__lit {
    clip-path: none;
    transition: none;
  }

  .stats-js .meter__lit,
  .stats-js.is-live .meter__lit {
    clip-path: inset(0 calc(100% - var(--fill)) 0 0);
    transition: none;
  }

  .stats-js.is-live .dots__sheen i {
    animation: none;
  }
}

@media (max-width: 767px) {
  .stats__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat--clients,
  .stat--years,
  .stat--recommend {
    grid-column: 1;
    grid-row: auto;
    padding-inline: var(--gutter);
  }

  /* The lead figure stays first when the panels stack. */
  .stat--clients {
    order: -1;
  }

  /* Beside the figure rather than under it, so the band stays compact. */
  .dots {
    flex-basis: 110px;
  }
}

/* ==========================================================================
   HOW WE WORK — THREE CARDS
   --------------------------------------------------------------------------
   Filled panels rather than outlined ones, since the theme carries no borders.
   The card is a surface lifted off the page ground, which is what gives the
   three statements the container they previously lacked.
   ========================================================================== */

.pointers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  align-items: stretch;
}

.card {
  background: var(--white);
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 34px);
}

.card__title {
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  margin-bottom: 10px;
}

.card__body {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink-dim);
}

@media (max-width: 767px) {
  .pointers__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}