/* ==========================================================================
   Tanda Consulting
   Palette is deliberately restricted: navy and black on white. There is no
   decorative accent colour — emphasis comes from scale, weight, hairline
   rules and whitespace instead.
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #1b3a5c;
  --navy-deep:   #132551;
  --ink:         #000000;
  --white:       #ffffff;

  /* Derived neutrals — all sampled off the navy so nothing reads as foreign */
  --text:        #2b323d;
  --muted:       #5c6675;
  --hairline:    #e2e6ec;
  --hairline-2:  #eef1f5;
  --tint:        #f7f8fa;

  /* Type */
  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --geo:    "Jost", var(--sans);

  /* Rhythm */
  --shell:      1240px;
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --section-y:  clamp(4.5rem, 9vw, 8.5rem);

  /* Shape — every card, button and box derives its corners from these, so
     the whole site can be softened or sharpened from one place. */
  --radius:     12px;
  --radius-sm:  6px;
  --gap:        clamp(.9rem, 1.5vw, 1.5rem);

  --ease:       cubic-bezier(.22, .61, .36, 1);
  --head-h:     78px;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

address { font-style: normal; }

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

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

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

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--navy-deep);
  color: var(--white);
  padding: .75rem 1.25rem;
  font-size: .875rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform .2s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
/* Navy on a navy or black band is invisible — flip the ring on dark sections. */
.cta :focus-visible,
.foot :focus-visible {
  outline-color: var(--white);
}

/* --- Type ----------------------------------------------------------------- */

.eyebrow {
  font-family: var(--geo);
  font-size: .875rem;   /* section labels, up 2px from 12px */
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.eyebrow--light { color: rgba(255, 255, 255, .72); }

.h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 20ch;
  font-weight: 300;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}

.btn--solid { background: var(--navy-deep); color: var(--white); }
.btn--solid:hover { background: var(--ink); }

.btn--ghost { border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }

.btn--light { background: var(--white); color: var(--navy-deep); }
.btn--light:hover { background: rgba(255, 255, 255, .86); }

.btn--outline-light { border-color: rgba(255, 255, 255, .38); color: var(--white); }
.btn--outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }

/* --- Header --------------------------------------------------------------- */

/* Transparent at the top of the page so the hero wash runs up behind the
   logo, turning solid once scrolled. On pages without a tinted hero the
   body is white anyway, so this reads as no change. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.site-head.is-stuck {
  background: var(--white);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 18px rgba(19, 37, 81, .05);
}
/* The open mobile panel is solid white; the bar above it must match. */
body.nav-open .site-head { background: var(--white); }

.head-inner {
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.lockup { display: inline-flex; align-items: center; gap: .7rem; }
.lockup__mark { width: auto; height: 40px; }

.lockup__type { display: flex; flex-direction: column; line-height: 1; }
.lockup__name {
  font-family: var(--geo);
  font-size: 1.28rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-deep);
}
.lockup__sub {
  font-family: var(--geo);
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .32rem;
  margin-left: .16em;
}
.lockup--light .lockup__name { color: var(--white); }
.lockup--light .lockup__sub  { color: rgba(255, 255, 255, .6); }

.nav { display: flex; align-items: center; gap: 2.5rem; }
.nav__list { display: flex; align-items: center; gap: 2.1rem; }

.nav__list a {
  position: relative;
  font-size: .9rem;
  color: var(--text);
  padding-block: .4rem;
  transition: color .2s var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease);
}
.nav__list a:hover { color: var(--navy-deep); }
.nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Smaller than a standard .btn: in the header it sits beside 0.9rem nav
   links, and at full button size it dominated them. Still 37px tall, so
   comfortably above the 24px minimum target size. The mobile panel keeps
   the full size — see the breakpoint below. */
.nav__cta {
  font-size: .8125rem;
  padding: .55rem 1.15rem;
}

.burger { display: none; }

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

.hero {
  position: relative;
  overflow: hidden;
  /* Pulled up under the sticky header — which holds its place in normal
     flow — so the wash starts at the very top of the page. The header sits
     above it on z-index, and the lost height is added back as padding. */
  /* +1px accounts for the header's always-present transparent bottom border,
     which sits outside --head-h and would otherwise leave a white hairline. */
  margin-top: calc((var(--head-h) + 1px) * -1);
  padding-top: calc(var(--head-h) + 1px + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  /* Lightest under the headline, deepening toward the motif in the lower
     right, so the type always sits on the palest part of the wash. */
  background: linear-gradient(155deg, #eef4fb 0%, #eef4fb 42%, #cbd7e4 100%);
}

/* The homepage motif is a live canvas rather than a static SVG: nodes drift
   and wake as the cursor passes. Painted entirely in JS, so the only styling
   needed is placement. pointer-events stay off so it never intercepts a
   click meant for the headline or a link beneath it. */
.hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__title {
  font-family: var(--serif);
  /* Steep vw term with a low floor so both strapline lines stay unbroken all
     the way down to a 320px screen — measured against Newsreader's metrics. */
  font-size: clamp(2.05rem, 8.6vw, 5.15rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 1.75rem;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--navy);
}

.hero__lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.72;
  /* Darker than --muted: that only reaches 4.31:1 on the deep end of the
     hero wash, which is under the AA floor. */
  color: #454e5c;
  max-width: 54ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* --- Trust bar ------------------------------------------------------------ */

.trust {
  border-block: 1px solid var(--hairline);
  padding-block: 2.75rem;
}

.trust__title {
  font-family: var(--geo);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 2rem;
}

/* Continuous logo scroller. The track holds two identical copies of the
   list, so translating it exactly -50% lands copy two where copy one
   started and the loop is seamless. Spacing is a margin on each item
   rather than a flex gap — a gap would add an extra unit between the two
   copies and the seam would visibly jump. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
}

/* Only animates once JS has cloned the list — otherwise a no-JS page would
   scroll a single copy off into empty space. */
.marquee.is-ready .marquee__track {
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track,
.marquee__track:focus-within { animation-play-state: paused; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* Placeholder styling — swap the <li> contents for real logo <img> tags and
   delete the dashed border rule below. */
.trust__slot {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 172px;
  height: 78px;
  margin-right: clamp(1.5rem, 4vw, 3.25rem);
  padding-inline: 1rem;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  font-family: var(--geo);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A real client logo: no dashed placeholder box, just the mark itself,
   scaled to a consistent optical height across differing logo shapes. */
.trust__slot--logo {
  border-color: transparent;
  padding-inline: 0;
}
.trust__slot--logo img {
  max-height: 66px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  /* Some client marks are solid tiles rather than transparent wordmarks. The
     radius stops those reading as a hard block against the rounded cards
     everywhere else, and does nothing visible to a transparent logo. */
  border-radius: var(--radius-sm);
}

/* --- Sections ------------------------------------------------------------- */

.section { padding-block: var(--section-y); }
.section--tint { background: var(--tint); border-block: 1px solid var(--hairline); }

/* An image band carries no heading or copy, so it does not need a full
   section's breathing room on either side — that would read as a gap with a
   picture in it rather than as part of the page. */
.section--flush { padding-block: 0 var(--section-y); }

.section__head { margin-bottom: clamp(3rem, 5vw, 4.5rem); }

.section__head--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: end;
}
@media (min-width: 900px) {
  .section__head--split { grid-template-columns: 1.35fr .85fr; gap: 4rem; }
}

.section__aside {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
  padding-bottom: .4rem;
}

/* --- Why us --------------------------------------------------------------- */

/* Explicit column counts, not auto-fit: there are exactly four pillars and an
   auto-fit row of three would leave one stranded on its own row. */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.pillar {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem 2.5rem;
}

@media (min-width: 620px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar__title {
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: .8rem;
}
.pillar__body {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--muted);
}

/* --- Services grid -------------------------------------------------------- */

.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

/* Three cards into two columns would leave a hole, so the third spans the
   full row instead — deliberate rather than orphaned. */
@media (min-width: 680px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid > .svc:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-grid > .svc:last-child { grid-column: auto; }
}

.svc {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.9rem, 3vw, 2.75rem);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease), color .35s var(--ease);
}
.svc:hover {
  background: #b0b7cc;
  border-color: #9ba4bd;
  box-shadow: 0 6px 24px rgba(19, 37, 81, .09);
}
/* --muted drops to 2.85:1 on #b0b7cc, well under AA, so the body copy and
   link darken along with the fill. */
.svc:hover .svc__body { color: var(--text); }
.svc:hover .svc__link {
  color: var(--navy-deep);
  border-bottom-color: rgba(19, 37, 81, .3);
}

.svc__title {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 1rem;
}
/* Keeps the three body paragraphs on a shared baseline once side by side;
   pointless padding when the cards are stacked. */
@media (min-width: 1000px) {
  .svc__title { min-height: 2.5em; }
}
.svc__body {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

.svc__link {
  margin-top: auto;
  align-self: start;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--navy);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--hairline);
  transition: border-color .3s var(--ease);
}
.svc__link span { display: inline-block; transition: transform .3s var(--ease); }
.svc__link:hover { border-bottom-color: var(--navy); }
.svc__link:hover span { transform: translateX(4px); }

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

.faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}
@media (min-width: 940px) {
  .faq { grid-template-columns: .8fr 1.2fr; }
  .faq__intro { position: sticky; top: calc(var(--head-h) + 3rem); align-self: start; }
}

.faq__note {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
  max-width: 34ch;
  margin: 1.5rem 0 2rem;
}
.faq .h2 { max-width: 16ch; }

.faq__list { display: grid; gap: var(--gap); }

.qa {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease);
}
.qa:hover, .qa.is-open { border-color: #cfd6e0; }
.qa h3 { font-size: inherit; font-weight: inherit; }

.qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  text-align: left;
  padding: 1.35rem 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.45vw, 1.18rem);
  line-height: 1.4;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.qa__q:hover { color: var(--navy); }

.qa__icon {
  position: relative;
  flex: none;
  width: 13px; height: 13px;
  margin-top: .42em;
}
.qa__icon::before, .qa__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--navy);
  transition: transform .35s var(--ease);
}
.qa__icon::after { transform: rotate(90deg); }
.qa__q[aria-expanded="true"] .qa__icon::after { transform: rotate(0deg); }

/* 0fr → 1fr animates cleanly without needing a measured max-height. */
.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a-inner { overflow: hidden; }
.qa__a-inner p {
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 58ch;
  padding: 0 1.5rem 1.5rem;
}

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

.cta {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--white);
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.cta__inner { position: relative; z-index: 1; max-width: 720px; }

.cta__mark {
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 118%;
  opacity: .06;
  z-index: 0;
  pointer-events: none;
}

.cta__title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 300;
  margin-bottom: 1.25rem;
}
.cta__body {
  color: rgba(255, 255, 255, .74);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 50ch;
  margin-bottom: 2.5rem;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

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

.foot {
  background: var(--ink);
  color: rgba(255, 255, 255, .68);
  font-size: .875rem;
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}

.foot__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
}
/* Splitting the footer at 860px leaves the link columns too narrow to hold
   three tracks, so the brand block stays full-width until there is room. */
@media (min-width: 1040px) {
  .foot__top { grid-template-columns: 1fr 1.6fr; gap: 4rem; }
}

.foot .lockup__mark { height: 46px; }
.foot__strap {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin-top: 1.75rem;
}

.foot__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 560px) {
  .foot__cols { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.foot__h {
  font-family: var(--geo);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* .45 lands at 4.43:1 on black — a hair under AA for text this size. */
  color: rgba(255, 255, 255, .58);
  margin-bottom: 1.25rem;
}

.foot__cols li { margin-bottom: .7rem; }
.foot__cols a {
  color: rgba(255, 255, 255, .72);
  transition: color .2s var(--ease);
  overflow-wrap: anywhere;   /* the email address is longer than its column */
}
.foot__cols a:hover { color: var(--white); }

.foot__addr {
  margin-top: 1.5rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .58);
  font-size: .8125rem;
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .58);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot__legal a { transition: color .2s var(--ease); }
.foot__legal a:hover { color: var(--white); }

/* --- Interior page hero --------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  /* Same bleed as the homepage hero so the colour reaches true page top. */
  margin-top: calc((var(--head-h) + 1px) * -1);
  padding-top: calc(var(--head-h) + 1px + clamp(2.75rem, 5vw, 4.5rem));
  padding-bottom: clamp(3rem, 5vw, 4.75rem);
}

.page-hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(64%, 820px);
  color: rgba(255, 255, 255, .6);
  pointer-events: none;
}
.page-hero__media svg,
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Navy veil, heaviest on the left. Guarantees the headline sits on solid
   colour no matter how light or busy the photograph behind it is. */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--navy) 0%, var(--navy) 26%,
    rgba(27, 58, 92, .74) 58%, rgba(27, 58, 92, .42) 100%);
}

.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }

.page-hero__title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: 1.1rem;
}

.page-hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.72;
  color: rgba(255, 255, 255, .82);
  max-width: 56ch;
}

/* --- Breadcrumb ----------------------------------------------------------- */

.crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.6rem;
  font-family: var(--geo);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.crumb li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(255, 255, 255, .7);
}
.crumb li + li::before { content: "/"; color: rgba(255, 255, 255, .4); }
.crumb a { transition: color .2s var(--ease); }
.crumb a:hover { color: var(--white); text-decoration: underline; }
.crumb [aria-current] { color: var(--white); }

/* --- Header over a dark hero ---------------------------------------------- */
/* The navy monogram would vanish on a navy band, so dark-hero pages carry
   both marks and swap them until the header turns solid on scroll. The
   nav-open guard matters on mobile, where the panel is white. */

.site-head .lockup__mark--light { display: none; }

body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .lockup__mark--dark { display: none; }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .lockup__mark--light { display: block; }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .lockup__name { color: var(--white); }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .lockup__sub { color: rgba(255, 255, 255, .65); }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .nav__list a { color: rgba(255, 255, 255, .86); }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .nav__list a:hover { color: var(--white); }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .nav__list a::after { background: var(--white); }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .burger__box span { background: var(--white); }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) :focus-visible { outline-color: var(--white); }
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .nav__cta {
  background: var(--white);
  color: var(--navy-deep);
}
body.on-dark-hero:not(.nav-open) .site-head:not(.is-stuck) .nav__cta:hover {
  background: rgba(255, 255, 255, .87);
}

/* --- Pillars: three-up variant -------------------------------------------- */

@media (min-width: 620px) {
  .pillars--three > .pillar:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .pillars--three { grid-template-columns: repeat(3, 1fr); }
  .pillars--three > .pillar:last-child { grid-column: auto; }
}

/* --- Pillars: two-up variant ---------------------------------------------- */

@media (min-width: 1000px) {
  .pillars--two { grid-template-columns: repeat(2, 1fr); }
}

/* --- Split rows ----------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.split + .split { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

@media (min-width: 900px) {
  .split { grid-template-columns: 1.02fr .98fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  /* Alternating sides. Only the visual order changes — the heading still
     precedes its panel in the DOM, so reading order stays correct. */
  .split--flip .split__media { order: -1; }
}

.split__label {
  font-family: var(--geo);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1rem;
}
.split__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 1rem;
}
.split__text {
  font-size: .95rem;
  line-height: 1.78;
  color: var(--muted);
  max-width: 52ch;
  margin-bottom: 1.9rem;
}

.split__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  color: rgba(255, 255, 255, .5);
  aspect-ratio: 16 / 10;
}
.split__media svg,
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Image slot ----------------------------------------------------------- */
/* A ready-made place for a photograph. The aspect ratio is reserved now, so
   dropping a real file in later changes nothing about the layout — no
   reflow, no shifted sections. Until then it renders the brand motif over
   navy, which costs one inline SVG and keeps the page looking finished.

   To use a photograph, replace the <svg> inside with:
       <img src="assets/img/example.jpg" alt="" loading="lazy" decoding="async">
   Nothing else needs to change. */

.imgslot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  color: rgba(255, 255, 255, .5);
  aspect-ratio: 4 / 3;
  margin: 0;
}
/* Tall enough to be a picture on a phone, cinematic once there is width. */
@media (min-width: 700px)  { .imgslot { aspect-ratio: 16 / 9; } }
@media (min-width: 1100px) { .imgslot { aspect-ratio: 21 / 9; } }

/* Shallower than the motif band was: a full-height 16:9 photograph pushed
   the sections either side too far apart. Wider ratios crop more of the
   frame, so anything important should sit near the middle of the shot.
   Declared after the rules above so it wins on source order at the same
   specificity. */
.imgslot--photo { aspect-ratio: 3 / 2; }
@media (min-width: 700px)  { .imgslot--photo { aspect-ratio: 2 / 1; } }
@media (min-width: 1100px) { .imgslot--photo { aspect-ratio: 21 / 9; } }

.imgslot > svg,
.imgslot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imgslot__cap {
  margin-top: .85rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

/* --- Capability grid ------------------------------------------------------ */

.caps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 640px)  { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .caps { grid-template-columns: repeat(3, 1fr); } }

.cap {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.cap__title {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: .65rem;
}
.cap__body {
  font-size: .875rem;
  line-height: 1.72;
  color: var(--muted);
}

/* --- Prose block ---------------------------------------------------------- */

.prose {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
}
@media (min-width: 940px) {
  .prose { grid-template-columns: .8fr 1.2fr; }
}
.prose .h2 { max-width: 14ch; }
.prose__body p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 1.3rem;
}
.prose__body p:last-child { margin-bottom: 0; }

/* --- Services grid: two-up variant ---------------------------------------- */
/* The base grid spans its last card across a two-column row, which is right
   for three cards and wrong for two. */

@media (min-width: 680px) {
  .svc-grid--two > .svc:last-child { grid-column: auto; }
}
@media (min-width: 1000px) {
  .svc-grid--two { grid-template-columns: repeat(2, 1fr); }
}

/* --- Placeholder marker --------------------------------------------------- */
/* Unmissable on purpose: anything still highlighted is a gap only the client
   can fill, and must not reach a published page. Delete the span together
   with its bracketed text. */

.ph {
  background: rgba(157, 35, 53, .08);
  box-shadow: 0 0 0 1px rgba(157, 35, 53, .3);
  border-radius: 2px;
  padding: 0 .25em;
}

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

/* Legal heroes carry no motif, so they need less breathing room beneath. */
.page-hero--plain { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }

/* Narrower than the standard container: long-form text is far easier to
   read at roughly 70 characters a line. */
.legal { max-width: 46rem; }

.legal__meta {
  font-size: .8125rem;
  color: var(--muted);
  padding-bottom: 1.25rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--hairline);
}

.legal h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 2.75rem 0 1rem;
}
.legal .sr-only + h2 { margin-top: 0; }

.legal h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 1.85rem 0 .6rem;
}

.legal p,
.legal li {
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--muted);
}
.legal p { margin-bottom: 1.1rem; }
.legal p:last-child { margin-bottom: 0; }

.legal ul { margin-bottom: 1.5rem; }
.legal li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .75rem;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .87em;
  width: 6px;
  height: 1px;
  background: var(--navy);
}

.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--navy); text-decoration: underline; }
.legal a:hover { color: var(--navy-deep); }

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

.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 940px) {
  .contact { grid-template-columns: 1.35fr .8fr; }
}

/* --- Form ----------------------------------------------------------------- */

.form { margin-top: 2.25rem; max-width: 40rem; }

.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .5rem;
}
.field__req { color: var(--navy); }

.field input,
.field textarea {
  display: block;
  width: 100%;
  font: inherit;
  /* Must stay at 16px: iOS Safari zooms the viewport when a focused field
     is smaller, and never zooms back out. */
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: .8rem .95rem;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.65; }

.field input::placeholder,
.field textarea::placeholder { color: #97a1af; }

/* The border shift carries the focus state; the ring is reinforcement, so
   the indicator does not rely on a low-contrast glow alone. */
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27, 58, 92, .14);
}

.field.is-invalid input,
.field.is-invalid textarea { border-color: #9d2235; }
.field.is-invalid input:focus,
.field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(157, 34, 53, .14); }

.field__err {
  margin-top: .45rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: #9d2235;
}

/* Off-screen rather than display:none — bots read the DOM, and a hidden
   input that is genuinely removed would not be filled in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit { margin-top: .5rem; }
.form__submit[aria-busy="true"] { opacity: .6; pointer-events: none; }

.form__legal {
  margin-top: 1.1rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
}
.form__legal a { color: var(--navy); text-decoration: underline; }

.form__alert {
  margin-top: 1.4rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text);
}
.form__alert a { color: var(--navy); text-decoration: underline; }

/* --- Success state -------------------------------------------------------- */

.form__done {
  margin-top: 2.25rem;
  max-width: 40rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--tint);
}
.form__done-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 1.25rem 0 .6rem;
}
.form__done-body {
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--muted);
}
.form__done-body a { color: var(--navy); text-decoration: underline; }

.tick { width: 46px; height: 46px; stroke: var(--navy); stroke-width: 2.5; }
.tick__circle {
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: tickDraw .55s var(--ease) forwards;
}
.tick__mark {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: tickDraw .35s var(--ease) .45s forwards;
}
@keyframes tickDraw { to { stroke-dashoffset: 0; } }

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

/* Same wash as the homepage hero. */
.info-card {
  background: linear-gradient(155deg, #eef4fb 0%, #eef4fb 42%, #cbd7e4 100%);
  border: 1px solid rgba(27, 58, 92, .16);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
}
.info-card + .info-card { margin-top: var(--gap); }

/* --muted measures 4.31:1 against #cbd7e4 — under AA — so secondary text
   inside these cards drops to the darker tone used in the hero. The
   hairline dividers would also disappear on the tint, so they pick up a
   navy tint instead. */
.info-card .info-card__note,
.info-card .info-list__k,
.info-card .steps li { color: #454e5c; }
.info-card .info-list li { border-top-color: rgba(27, 58, 92, .15); }
.info-card .steps li::before { border-color: rgba(27, 58, 92, .3); }

.info-card__h {
  font-family: var(--geo);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.1rem;
}
.info-card__body { font-size: .9375rem; line-height: 1.8; color: var(--text); }
.info-card__note {
  margin-top: 1rem;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--muted);
}

.info-list li {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem 0;
  border-top: 1px solid var(--hairline-2);
}
.info-list li:first-child { border-top: 0; padding-top: 0; }
.info-list__k {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.info-list__v {
  font-size: .95rem;
  color: var(--navy-deep);
  overflow-wrap: anywhere;
  transition: color .2s var(--ease);
}
.info-list__v:hover { color: var(--navy); text-decoration: underline; }

.steps { counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1rem 2.1rem;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--muted);
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-family: var(--geo);
  font-size: .7rem;
  color: var(--navy);
}

/* --- Scroll reveal -------------------------------------------------------- */
/* Only armed when JS is running, so content is never trapped invisible. */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 880px) {
  :root { --head-h: 66px; }

  .burger {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-right: -10px;
  }
  .burger__box {
    display: block;
    position: relative;
    width: 22px; height: 12px;
  }
  .burger__box span {
    position: absolute;
    left: 0;
    width: 100%; height: 1.5px;
    background: var(--navy-deep);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
  }
  .burger__box span:first-child { top: 0; }
  .burger__box span:last-child  { bottom: 0; }
  .burger[aria-expanded="true"] .burger__box span:first-child {
    transform: translateY(5.25px) rotate(45deg);
  }
  .burger[aria-expanded="true"] .burger__box span:last-child {
    transform: translateY(-5.25px) rotate(-45deg);
  }

  .nav {
    position: fixed;
    inset: var(--head-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--white);
    padding: 1rem var(--gutter) 2.5rem;
    border-top: 1px solid var(--hairline);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity .28s var(--ease), transform .28s var(--ease),
                visibility .28s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--hairline-2); }
  .nav__list a {
    display: block;
    padding: 1.15rem 0;
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--ink);
  }
  .nav__list a::after { display: none; }

  /* Back to full size inside the mobile panel: it is a primary touch target
     there, not a compact item sitting next to nav links. */
  .nav__cta {
    margin-top: 2rem;
    width: 100%;
    font-size: .875rem;
    padding: .85rem 1.6rem;
  }

  body.nav-open { overflow: hidden; }

  .lockup__mark { height: 34px; }
  .lockup__name { font-size: 1.1rem; }
  .lockup__sub  { font-size: .55rem; }

  .pillar { padding: 1.85rem 1.4rem 2rem; }

  .cta__mark { height: auto; width: 90%; right: -28%; opacity: .05; }
}

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

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

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* Reveal targets must land visible, not merely animate faster. */
  .js .reveal { opacity: 1; transform: none; }

  /* Stop the scroller outright rather than letting it snap to its end frame.
     The hero canvas handles reduced motion in JS: it paints one still frame
     and never starts its loop. */
  .marquee.is-ready .marquee__track { animation: none; }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .site-head, .burger, .hero__net, .cta, .foot { display: none; }
  body { color: #000; }
  .js .reveal { opacity: 1; transform: none; }
}