/* ==========================================================================
   Components — header, buttons, cards, services, process, forms, footer
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   Square-ish, uppercase, letterspaced, with a diagonal arrow that shifts on
   hover. Only the arrow moves, so nothing reflows. */

.btn {
  --btn-bg: var(--blue-600);
  --btn-fg: var(--white);
  --btn-bd: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  /* min-height keeps every button past the 44px touch target floor */
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.btn svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover svg { transform: translate(2px, -2px); }

.btn:hover { --btn-bg: var(--navy-800); --btn-bd: var(--navy-800); color: var(--white); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--silver-300);
}
.btn--ghost:hover {
  --btn-bg: var(--navy-800);
  --btn-bd: var(--navy-800);
  --btn-fg: var(--white);
}

/* On navy: outlined in translucent silver, fills white on hover */
.btn--ghost-dark {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.32);
}
.btn--ghost-dark:hover {
  --btn-bg: var(--white);
  --btn-bd: var(--white);
  --btn-fg: var(--navy-800);
}

.btn--block { width: 100%; }

/* Text link with arrow, for inline "read more" affordances */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--link);
}
.link-arrow svg {
  width: 0.75rem; height: 0.75rem;
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover svg { transform: translate(2px, -2px); }
.section--dark .link-arrow { color: var(--blue-500); }
.section--dark .link-arrow:hover { color: var(--blue-400); }

/* --- Header --------------------------------------------------------------
   A floating pill, inset from the viewport edges. Transparent over the dark
   hero; once scrolled (or on pages carrying .site-header--solid) the pill
   takes a translucent navy surface with a backdrop blur. */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding: var(--sp-3) var(--sp-3) 0;
  background: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: 4.25rem;
  padding-inline: var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.site-header.is-scrolled .site-header__inner,
.site-header--solid .site-header__inner {
  background: rgba(1, 0, 78, 0.8);
  border-color: rgba(173, 173, 173, 0.16);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.site-header__logo img { height: 2.5rem; width: auto; }

/* --- Primary nav ---------------------------------------------------------- */

.nav { display: none; }

@media (min-width: 62rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
  }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--blue-400); }

/* Current page gets an underline, not just a colour — colour alone is not
   a sufficient indicator. */
.nav__link[aria-current="page"] {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--blue-500);
}

.nav__caret {
  width: 0.6rem; height: 0.6rem;
  transition: transform var(--dur) var(--ease-out);
}
.nav__item--has-menu[data-open="true"] .nav__caret { transform: rotate(180deg); }

/* --- Services dropdown ---------------------------------------------------- */

.nav__menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 19rem;
  padding: var(--sp-3);
  margin: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--silver-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility var(--dur);
}

.nav__item--has-menu[data-open="true"] .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__menu-link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--navy-800);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__menu-link span {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.nav__menu-link:hover { background: var(--silver-100); color: var(--navy-800); }

.site-header__cta { display: none; }
@media (min-width: 62rem) { .site-header__cta { display: inline-flex; flex: none; } }

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

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (min-width: 62rem) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  inset: calc(var(--header-h) + var(--sp-2)) var(--sp-3) auto var(--sp-3);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-h) - var(--sp-6));
  max-height: calc(100dvh - var(--header-h) - var(--sp-6));
  padding: var(--sp-6) var(--gutter) var(--sp-10);
  background: var(--navy-800);
  border: 1px solid rgba(173, 173, 173, 0.16);
  border-radius: var(--radius-panel);
  box-shadow: 0 24px 64px rgba(1, 0, 54, 0.45);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    visibility var(--dur);
}
.mobile-nav[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (min-width: 62rem) { .mobile-nav { display: none; } }

.mobile-nav__list { list-style: none; margin: 0 0 var(--sp-8); padding: 0; }

.mobile-nav__link {
  display: block;
  padding: var(--sp-4) 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-heading);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-dark);
}
.mobile-nav__link[aria-current="page"] { color: var(--blue-400); }

.mobile-nav__sub { list-style: none; margin: 0; padding: var(--sp-2) 0 var(--sp-4) var(--sp-4); }
.mobile-nav__sub a {
  display: block;
  padding: var(--sp-3) 0;
  color: var(--silver-400);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.mobile-nav__sub a:hover { color: var(--white); }

body.nav-open { overflow: hidden; }

/* --- Hero ------------------------------------------------------------------
   Copy on logo navy beside a framed photograph from the shoot: Darren with
   a client at the boardroom table, real and only lightly graded. A card on
   the corner of the frame carries the free first consultation. A soft blue
   glow behind the frame gives the navy some depth without a wash over
   anyone in the picture.

   Phones and portrait tablets stack the two, copy first. From 64rem they
   sit side by side. */

.hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-10)) var(--sp-16);
  background:
    radial-gradient(48rem 36rem at 78% 55%, rgba(37, 99, 235, 0.24), transparent 70%),
    var(--navy-800);
  color: var(--white);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: var(--sp-12);
}
.hero__content { max-width: 34rem; }

/* Even columns on a small laptop keep both buttons on one line; from 75rem
   the photo takes the larger share. */
@media (min-width: 64rem) {
  .hero { padding-block: calc(var(--header-h) + var(--sp-16)) var(--sp-20); }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-12);
  }
}
@media (min-width: 75rem) {
  .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-16); }
}

/* The frame: the same corner radius as every other photograph on the site,
   a hairline of the logo silver, and a deep shadow so it sits up off the
   navy. isolation keeps the corners clipped while the photo settles in. */
.hero__figure { position: relative; margin: 0; }
.hero__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-photo);
  overflow: hidden;
  isolation: isolate;
  outline: 1px solid rgba(173, 173, 173, 0.18);
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.6);
}
/* 3:2 trims the shoot's 4:3 frame from the ceiling, not the table. */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 75%;
}

/* White on the navy, so it is the next thing read after the buttons. On a
   phone it overlaps the foot of the photo; from 64rem it straddles the
   frame's lower left corner, hanging into the gap beside the copy and below
   the frame, so it covers the table rather than either person. */
.hero__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 24rem;
  margin: calc(-1 * var(--sp-8)) var(--sp-4) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--white);
  color: var(--navy-800);
  border-radius: var(--radius-photo);
  box-shadow: 0 18px 40px -12px rgba(1, 0, 54, 0.55);
}
@media (min-width: 64rem) {
  .hero__card {
    position: absolute;
    left: calc(-1 * var(--sp-10));
    bottom: calc(-1 * var(--sp-8));
    margin: 0;
  }
}
.hero__card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue-600);
}
.hero__card-icon svg { width: 1.25rem; height: 1.25rem; }
.hero__card-label {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blue-600);
}
.hero__card-text {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--slate-600);
  text-wrap: balance;
}

/* The label sits on navy here, so it takes the light blue: the default
   blue-600 is built for white grounds and falls short of contrast on dark. */
.hero .eyebrow { color: var(--blue-400); margin-bottom: var(--sp-5); }
/* One line on a phone: the place drops out, the headline already says it. */
@media (max-width: 29.99rem) { .hero__place { display: none; } }

/* Quieter than a full-bleed headline: sized to hold three lines in the copy
   column at every width, and a step lighter than the display weight. */
.hero__title {
  font-size: clamp(2.25rem, 0.9rem + 3vw, 3.5rem);
  line-height: 1.04;
  font-weight: var(--fw-heading);
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-6);
  text-wrap: balance;
  max-width: 9.5em;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--silver-300);
  max-width: 40ch;
  margin-bottom: var(--sp-8);
  text-wrap: pretty;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
/* One line under a primary button: the fear killer. Silver on dark only. */
.btn-note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--silver-400);
}

/* Page hero for interior pages. Navy by default; .page-hero--photo puts a
   frame from the shoot underneath, behind a wash heavy enough that the
   headline never depends on what the photograph is doing. */
.page-hero {
  position: relative;
  background: var(--navy-800);
  color: var(--white);
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-16);
  overflow: hidden;
}
.page-hero--photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(36rem, 70vh);
  padding-top: calc(var(--header-h) + var(--sp-24));
  padding-bottom: var(--sp-16);
}
.page-hero > .container { position: relative; z-index: var(--z-base); }
.page-hero h1 { color: var(--white); margin-bottom: var(--sp-4); }
.page-hero .lead { color: var(--silver-300); }

/* A photograph under a navy wash: shared by interior heroes and CTA bands.
   The image is decorative, so it is aria-hidden and its alt is empty. */
.wash-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wash-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.wash-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 0, 54, 0.78) 0%, rgba(1, 0, 54, 0.62) 55%, rgba(1, 0, 54, 0.88) 100%),
    linear-gradient(90deg, rgba(1, 0, 78, 0.72) 0%, rgba(1, 0, 78, 0.28) 70%, rgba(1, 0, 78, 0.12) 100%);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--silver-400);
}
.breadcrumb a { color: var(--silver-400); text-decoration: none; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); opacity: 0.5; }

/* --- Trust ticker -----------------------------------------------------------
   The credential strip under the hero, as a slow marquee row: a fixed label,
   a hairline divider, then the firm's verifiable facts drifting past. The
   track is duplicated for the loop; every fact also appears elsewhere on the
   page, so a reduced-motion visitor loses nothing — motion.css hides the
   duplicate and lets the first track wrap instead. */

.trust {
  background: var(--bg);
  padding-block: var(--sp-6) var(--sp-4);
}

.trust__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
@media (min-width: 48rem) {
  .trust__row { flex-direction: row; align-items: center; gap: 0; }
}

.trust__intro {
  flex: none;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
@media (min-width: 48rem) {
  .trust__intro {
    max-width: 11rem;
    padding-right: var(--sp-6);
    text-align: end;
    border-right: 1px solid var(--rule);
  }
}

.trust__ticker {
  position: relative;
  display: flex;
  overflow: hidden;
  flex: 1;
  padding-block: var(--sp-3);
}
@media (min-width: 48rem) { .trust__ticker { margin-left: var(--sp-6); } }

/* Edge fades, so facts dissolve at the row's ends instead of hitting a wall */
.trust__ticker::before,
.trust__ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 4rem;
  z-index: var(--z-base);
  pointer-events: none;
}
.trust__ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.trust__ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.trust__track {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex: none;
  min-width: 100%;
  padding: 0 var(--sp-10) 0 0;
  margin: 0;
  list-style: none;
}

.trust__track li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-muted);
}
.trust__track li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue-600);
  flex: none;
}

/* --- Service list ----------------------------------------------------------
   An editorial row list rather than a card grid — closer to how a firm
   actually talks about its work, and it scales past three items. */

.service-list { border-top: 1px solid var(--rule); }

/* Each row is one link. The round arrow button on the right is there at every
   width, so a row reads as something to tap even without hover; on hover or
   focus the button fills blue and the title follows. On a phone the number,
   title and description stack beside the button. */
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  padding: var(--sp-6) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur) var(--ease-out);
}
.service-row > :not(.service-row__go) { grid-column: 1; }
@media (min-width: 48rem) {
  .service-row {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: var(--sp-3) var(--sp-8);
    padding: var(--sp-8) var(--sp-5);
  }
  .service-row > :not(.service-row__go) { grid-column: auto; }
}
.service-row:hover,
.service-row:active { background: var(--white); }
.service-row:hover .service-row__title,
.service-row:focus-visible .service-row__title { color: var(--blue-600); }
.service-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.service-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--blue-600);
  font-variant-numeric: tabular-nums;
}
.service-row__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  letter-spacing: -0.01em;
  margin: 0;
  transition: color var(--dur) var(--ease-out);
}
.service-row__desc {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  max-width: 52ch;
}
.service-row__go {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--silver-300);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-800);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}
@media (min-width: 48rem) { .service-row__go { grid-column: auto; grid-row: auto; } }
.service-row__go svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease-out); }
.service-row:hover .service-row__go,
.service-row:focus-visible .service-row__go,
.service-row:active .service-row__go { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.service-row:hover .service-row__go svg { transform: translate(2px, -2px); }

/* --- Cards ------------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.card:hover { border-color: var(--silver-300); box-shadow: var(--shadow-card); }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }

.card__icon {
  width: 2.25rem; height: 2.25rem;
  margin-bottom: var(--sp-2);
  color: var(--blue-600);
}

.section--dark .card {
  background: var(--navy-700);
  border-color: var(--rule-dark);
}
.section--dark .card:hover { border-color: var(--navy-500); box-shadow: none; }
.section--dark .card p { color: var(--silver-400); }
.section--dark .card__icon { color: var(--blue-500); }

/* --- Stats ------------------------------------------------------------------ */

.stat { border-top: 1px solid var(--rule); padding-top: var(--sp-5); position: relative; }
.stat::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: var(--sp-8); height: 2px;
  background: var(--blue-500);
}
.section--dark .stat { border-top-color: var(--rule-dark); }
.stat__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3);
}
.stat__label {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0;
}
.section--dark .stat__label { color: var(--silver-400); }

/* --- Process steps ----------------------------------------------------------- */

.step {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--rule-dark);
}
@media (min-width: 48rem) {
  .step { grid-template-columns: 8rem 1fr; gap: var(--sp-10); align-items: start; }
}
.step__num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blue-500);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin: 0 0 var(--sp-2); }
.step p { margin: 0; max-width: 62ch; }

/* --- Accordion (FAQ) ---------------------------------------------------------- */

.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--blue-600); }

.accordion__icon {
  width: 1.25rem; height: 1.25rem;
  flex: none;
  color: var(--silver-400);
  transition: transform var(--dur) var(--ease-out);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }

/* Height is animated via a grid row so it works without measuring in JS */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p {
  padding-bottom: var(--sp-6);
  color: var(--ink-muted);
  max-width: 68ch;
}

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

.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--blue-600); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--silver-300);
  border-radius: var(--radius);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 9rem; resize: vertical; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--silver-400); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.field__hint { font-size: 0.875rem; color: var(--ink-muted); }

/* Honeypot for Netlify Forms spam filtering — hidden from people and AT */
.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

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

.contact-item { display: flex; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--rule-dark); }
.contact-item__icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.3rem; color: var(--blue-500); }
.contact-item dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--silver-400);
  margin-bottom: var(--sp-1);
}
.contact-item dd { margin: 0; color: var(--white); font-size: var(--fs-lead); }
.contact-item dd a[href^="tel:"] { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; }
.contact-item dd a { color: var(--white); text-decoration: none; }
.contact-item dd a:hover { color: var(--blue-400); }

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

.cta-band {
  position: relative;
  background: var(--navy-700);
  color: var(--white);
  padding-block: var(--section-y);
  overflow: hidden;
}
.cta-band > .container { position: relative; z-index: var(--z-base); }
.cta-band--photo .wash-media::after {
  background:
    linear-gradient(180deg, rgba(20, 19, 95, 0.82) 0%, rgba(20, 19, 95, 0.70) 100%),
    linear-gradient(90deg, rgba(1, 0, 78, 0.80) 0%, rgba(1, 0, 78, 0.30) 70%, rgba(1, 0, 78, 0.16) 100%);
}
/* With a photograph behind it the band runs taller and the copy and buttons
   sit at the bottom, so the face in the frame stays clear above them. */
.cta-band--photo { padding-top: clamp(12rem, 7rem + 14vw, 19rem); }
.cta-band--photo .wash-media img { object-position: center 58%; }
.cta-band__inner { align-items: end; }
/* The phone number in a CTA band is a figure: set it in the ledger face */
.cta-band .btn[href^="tel:"] { font-family: var(--font-mono); letter-spacing: 0.04em; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--silver-300); }

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

.site-footer {
  background: var(--navy-900);
  color: var(--silver-400);
  padding-top: var(--sp-20);
  padding-bottom: var(--sp-8);
  font-size: var(--fs-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-10);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 62rem) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.site-footer__logo img { height: 2.75rem; width: auto; margin-bottom: var(--sp-5); }

.site-footer h2,
.site-footer h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp-4);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-3); }
.site-footer a { color: var(--silver-400); text-decoration: none; }
.site-footer a:hover { color: var(--white); }

/* Statutory disclosures — ABN, principal, and the Professional Standards
   scheme notice CA ANZ members are required to display. */
.site-footer__legalblock {
  padding-top: var(--sp-6);
  font-size: 0.875rem;
  color: var(--silver-400);
  opacity: 0.85;
}
.site-footer__legalblock p { margin: 0 0 var(--sp-1); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-6);
  font-size: 0.875rem;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

.social { display: flex; gap: var(--sp-3); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.social a:hover { border-color: var(--silver-400); color: var(--white); }
.social svg { width: 1.125rem; height: 1.125rem; }


/* --- Business health check ---------------------------------------------------
   Eight yes/no questions in four groups as cards, a summary panel that keeps
   score as you go (ring, progress, two dots per foundation), and a result
   panel that fills in once all eight are answered. State lives in the DOM. */

.hc__grid { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 62rem) {
  .hc__grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-12); }
  .hc__aside { order: 2; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* Summary panel */
.hc__summary {
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .hc__summary { grid-template-columns: auto 1fr; column-gap: var(--sp-8); align-items: center; }
  .hc__summary .hc__ring-wrap { grid-row: 1 / span 3; }
}

.hc__ring-wrap { position: relative; width: 8.5rem; height: 8.5rem; margin: 0 auto; }
.hc__ring-wrap--large { width: 12rem; height: 12rem; margin: 0; }
.hc__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.hc__ring-track { fill: none; stroke: var(--silver-200); stroke-width: 8; }
.hc__ring-fill {
  fill: none;
  stroke: var(--blue-600);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}
.hc__result .hc__ring-track { stroke: rgba(255, 255, 255, 0.16); }
.hc__result .hc__ring-fill { stroke: var(--blue-500); }
.hc__ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  line-height: 1;
}
.hc__ring-score { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.04em; color: var(--navy-800); }
.hc__ring-wrap--large .hc__ring-score { font-size: 3.5rem; color: var(--white); }
.hc__ring-of { margin-top: var(--sp-1); font-size: 0.8125rem; color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.hc__result .hc__ring-of { color: var(--silver-400); }

.hc__count { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.875rem; color: var(--navy-800); }
@media (min-width: 40rem) and (max-width: 61.99rem) { .hc__count { text-align: left; } }

.hc__foundations { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.hc__foundations li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm); color: var(--ink);
}
.hc__dots { display: inline-flex; gap: 6px; }
.hc__dot {
  display: inline-block; width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--silver-300);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hc__dot.is-yes { background: var(--blue-600); border-color: var(--blue-600); }
.hc__dot.is-no { background: var(--silver-300); border-color: var(--silver-300); }

.hc__hint { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.hc__privacy { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); letter-spacing: 0.02em; }

/* Question groups and cards */
.hc__group + .hc__group { margin-top: var(--sp-10); }
.hc__group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.hc__group-title { margin: 0; font-size: var(--fs-h3); display: flex; align-items: baseline; gap: var(--sp-3); }
.hc__group-num { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--blue-600); letter-spacing: 0.08em; }
.hc__group-count { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-muted); }

.hc__q {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--silver-200);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hc__q + .hc__q { margin-top: var(--sp-3); }
.hc__q:hover { border-color: var(--silver-300); box-shadow: var(--shadow-card); }
.hc__q.is-yes { border-left-color: var(--blue-600); }
.hc__q.is-no { border-left-color: var(--silver-400); }
@media (min-width: 48rem) {
  .hc__q { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-8); }
}
.hc__q-body { display: flex; gap: var(--sp-4); align-items: flex-start; }
.hc__num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--silver-400); padding-top: 0.35em; font-variant-numeric: tabular-nums; }
.hc__question { margin: 0; font-size: var(--fs-lead); font-weight: 500; line-height: 1.4; color: var(--ink); }

/* Segmented Yes / No */
.hc__answers {
  display: inline-flex;
  padding: 3px;
  background: var(--silver-100);
  border-radius: var(--radius-pill);
}
.hc__btn {
  min-width: 4.75rem;
  min-height: 2.5rem;
  padding: var(--sp-2) var(--sp-4);
  background: transparent;
  color: var(--navy-800);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hc__btn:hover { background: var(--white); }
.hc__btn[aria-pressed="true"] { background: var(--navy-800); color: var(--white); }
.hc__btn[aria-pressed="true"][data-hc-answer="no"] { background: var(--slate-600); }

/* Result panel */
.hc__result {
  margin-top: var(--sp-12);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius-photo);
}
.hc__result-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 48rem) { .hc__result-grid { grid-template-columns: 14rem 1fr; gap: var(--sp-12); align-items: start; } }
.hc__result .eyebrow { color: var(--blue-500); }
.hc__result h2, .hc__result h3 { color: var(--white); }
.hc__result-title { margin-bottom: var(--sp-3); outline: none; }
.hc__result h3 { font-size: var(--fs-body); margin: var(--sp-6) 0 var(--sp-3); }
.hc__body { color: var(--silver-300); font-size: var(--fs-lead); max-width: 56ch; }
.hc__list { margin: 0; padding-left: var(--sp-5); color: var(--silver-300); }
.hc__list li { margin-bottom: var(--sp-3); max-width: 60ch; }
.hc__list strong { color: var(--white); font-weight: 600; }
.hc__reset {
  margin-top: var(--sp-6);
  padding: 0;
  background: none;
  border: 0;
  color: var(--silver-400);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.hc__reset:hover { color: var(--white); }

/* --- Partner badge -----------------------------------------------------------
   The Xero Gold Partner mark, supplied by Xero. Never recoloured. */

.badge-xero { width: 5rem; height: auto; flex: none; }

.badge-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  max-width: 34rem;
}
.badge-row p { margin: 0; font-size: var(--fs-sm); }
.badge-row strong { color: var(--white); font-weight: 600; }
.section--dark .badge-row p { color: var(--silver-300); }

.site-footer__badge {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.site-footer__badge .badge-xero { width: 3.5rem; }


/* --- Comparison table --------------------------------------------------------
   Accountant vs Chartered Accountant. The CA column carries the accent so the
   eye lands on the side that does more. Scrolls inside its own box on phones. */

.cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp__table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.cmp__table th, .cmp__table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.cmp__table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--silver-100);
}
.cmp__table tbody th {
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  font-size: var(--fs-body);
  color: var(--ink);
  width: 12rem;
}
.cmp__table td { color: var(--ink-muted); }
.cmp__table td.cmp__ca { color: var(--ink); }
.cmp__table thead th.cmp__ca { color: var(--blue-600); box-shadow: inset 0 3px 0 var(--blue-600); }
.cmp__table tr:last-child th, .cmp__table tr:last-child td { border-bottom: 0; }


/* --- Principal card ----------------------------------------------------------
   Darren, cut out and standing in a navy panel, next to who he is and what
   the firm holds itself to. The figure is bottom-aligned so he rises out of
   the panel rather than floating in it. */

.principal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius-photo);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}
@media (min-width: 62rem) {
  .principal { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.principal__figure {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 22rem;
  padding: var(--sp-10) var(--sp-6) 0;
  background:
    radial-gradient(60% 55% at 50% 100%, rgba(59, 130, 246, 0.45), transparent 70%),
    linear-gradient(180deg, var(--navy-700), var(--navy-800));
}
.principal__figure::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--rule-dark);
}
.principal__figure img {
  width: min(100%, 24rem);
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(1, 0, 54, 0.55));
}

.principal__body { padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.principal__role {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blue-500);
}
.principal__name { color: var(--white); margin-bottom: var(--sp-4); }
.principal .lead { color: var(--silver-300); }

.principal__facts {
  display: grid;
  gap: var(--sp-3) var(--sp-6);
  list-style: none;
  margin: var(--sp-6) 0 var(--sp-8);
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--silver-300);
}
@media (min-width: 40rem) { .principal__facts { grid-template-columns: 1fr 1fr; } }
.principal__facts li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.principal__facts li::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--blue-500);
  flex: none;
}
.principal .btn--ghost {
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.32);
}
.principal .btn--ghost:hover { --btn-bg: var(--white); --btn-bd: var(--white); --btn-fg: var(--navy-800); }


/* --- Hero parallax -----------------------------------------------------------
   main.js moves the media and content layers on scroll. Both move down at a
   fraction of scroll speed while the hero itself scrolls up, so no bare edge
   is ever exposed and the media keeps its natural framing. The fade at the
   foot of the hero lets the next section rise over it. */

.has-parallax .wash-media,
.has-parallax.page-hero > .container { will-change: transform; }
.has-parallax::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  z-index: var(--z-base);
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(1, 0, 54, 0.85));
}


/* --- Why DWA: proof tiles and the cross-border card ---------------------------
   Four figures as white tiles on the ruled section, then a navy card with the
   photo bleeding to the edge and the three two-state rules as a numbered
   list. Echoes the principal card so the home page has one family of panels. */

.proof {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 40rem) { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .proof { grid-template-columns: repeat(4, 1fr); } }

.proof__item {
  position: relative;
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card);
}
.proof__item::before {
  content: "";
  position: absolute;
  top: 0; left: var(--sp-6);
  width: var(--sp-8); height: 3px;
  background: var(--blue-600);
  border-radius: 0 0 2px 2px;
}
.proof__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
  margin: var(--sp-2) 0 var(--sp-4);
}
.proof__label { font-size: var(--fs-body); margin: 0 0 var(--sp-2); }
.proof__item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }

.border-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card-hover);
}
@media (min-width: 62rem) { .border-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.border-card > * { min-width: 0; }
.border-card__media { position: relative; min-height: 16rem; }
.border-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 40% 35%;
}
@media (max-width: 61.99rem) { .border-card__media { aspect-ratio: 16 / 10; } }
.border-card__body { padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.border-card__body .eyebrow { color: var(--blue-500); }
.border-card__body h3 { color: var(--white); font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.border-card__body .lead { color: var(--silver-300); }

.border-card__list {
  list-style: none;
  margin: var(--sp-6) 0;
  padding: 0;
  border-top: 1px solid var(--rule-dark);
}
.border-card__list li {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule-dark);
  color: var(--silver-300);
}
.border-card__list li span {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--blue-500);
  letter-spacing: 0.08em;
}
.border-card__close { color: var(--white); font-weight: 500; }
.border-card .link-arrow { color: var(--blue-500); }
.border-card .link-arrow:hover { color: var(--blue-400); }


/* --- Contact page ------------------------------------------------------------
   Three ways in as tappable rows, what happens after you send the form, and
   the form itself as a card that stays with you on wide screens. */

.contact-grid { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 62rem) {
  .contact-grid { grid-template-columns: 6fr 5fr; gap: var(--sp-16); }
  .contact-form { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

.channels { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }
.channel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-photo);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.channel:hover { border-color: var(--silver-300); box-shadow: var(--shadow-card); transform: translateY(-1px); color: var(--ink); }
.channel:hover .channel__arrow { color: var(--blue-600); transform: translate(2px, -2px); }
.channel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--silver-100);
  color: var(--blue-600);
}
.channel__icon svg { width: 1.25rem; height: 1.25rem; }
.channel__body { display: grid; gap: 2px; min-width: 0; }
.channel__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.channel__value { font-weight: 600; font-size: var(--fs-body); overflow-wrap: anywhere; }
.channel__note { font-size: var(--fs-sm); color: var(--ink-muted); }
.channel__arrow { color: var(--silver-400); transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.channel__arrow svg { width: 0.875rem; height: 0.875rem; }

.next-steps { margin-top: var(--sp-10); }
.next-steps h3 { font-size: var(--fs-body); margin-bottom: var(--sp-3); }
.next-steps ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.next-steps li {
  display: flex; gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.next-steps li span { flex: none; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--blue-600); letter-spacing: 0.08em; }

.contact-form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card-hover);
}
.contact-form__head { margin-bottom: var(--sp-6); }
.contact-form__head h3 { margin-bottom: var(--sp-2); }
.contact-form__head p { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.contact-form form { margin: 0; }


/* Agency credit in the footer. A plain followed link; the heart is the one
   warm note in the footer and beats gently on hover. */
.site-footer__credit { color: var(--silver-400); }
.site-footer__heart { display: inline-block; color: var(--blue-500); transition: transform var(--dur) var(--ease-out); }
.site-footer__credit:hover .site-footer__heart { transform: scale(1.25); }


/* --- Where we work -------------------------------------------------------------
   Plain and scannable: the towns we cover, grouped by state, beside the
   office with its hours and a directions link, then the two notes that
   matter for a practice on the border. */

.areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-10) var(--sp-6);
  margin-top: var(--sp-12);
}
@media (min-width: 40rem) { .areas { column-gap: var(--sp-8); } }
@media (min-width: 62rem) { .areas { grid-template-columns: 1fr 1fr 1.2fr; gap: var(--sp-10); align-items: start; } }

.areas__label {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blue-500);
}
.areas__towns {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-dark);
}
.areas__towns li {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule-dark);
  color: var(--white);
  font-weight: 500;
}

.areas__office {
  padding: var(--sp-6);
  background: var(--navy-700);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-photo);
}
@media (max-width: 61.99rem) { .areas__office { grid-column: 1 / -1; } }
.areas__office address {
  margin: 0 0 var(--sp-4);
  font-style: normal;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--white);
}
.section--dark .areas__office p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--silver-300); }
.areas__phone { color: var(--white); font-weight: 600; text-decoration: none; }
.areas__phone:hover { color: var(--blue-400); }
.areas__office .link-arrow { margin-top: var(--sp-2); }

.areas-notes {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}
@media (min-width: 48rem) { .areas-notes { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
.areas-notes > div {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--blue-500);
}
.areas-notes h3 {
  margin: 0 0 var(--sp-2);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}
.section--dark .areas-notes p { margin: 0; max-width: 48ch; color: var(--silver-400); }


/* --- Mobile intro -------------------------------------------------------------
   The logo on navy, shown once per visit on a phone (the <head> script adds
   html.intro-on). Four copies of the reversed logo, each clipped to one piece:
   the d, the w, the A and the tagline, so they can arrive one at a time. The
   motion lives in motion.css. Hidden everywhere else. */

.intro { display: none; }
html.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.intro::before,
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
}
.intro::before { background: var(--blue-600); }
.intro::after { background: var(--navy-800); }
.intro__logo {
  position: relative;
  z-index: 1;
  width: min(64vw, 16rem);
  aspect-ratio: 771 / 390;
}
.intro__piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.intro__piece--d { clip-path: inset(0 72.5% 20.5% 0); }
.intro__piece--w { clip-path: inset(0 32.4% 20.5% 27.5%); }
.intro__piece--a { clip-path: inset(0 0 20.5% 67.6%); }
.intro__piece--tag { clip-path: inset(79.5% 0 0 0); }


/* --- Who you deal with -------------------------------------------------------
   The three kinds of client as short ruled rows beside the boardroom photo.
   Kept deliberately light, and the photo stays still. */

.who-list {
  list-style: none;
  margin: var(--sp-8) 0 var(--sp-6);
  padding: 0;
  border-top: 1px solid var(--rule);
}
.who-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
  color: var(--ink);
}
.who-list li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-600);
}
.who-close { font-weight: 500; color: var(--ink); }

/* --- Contact page, v2 ---------------------------------------------------------
   A plain headline hero, three ways in as cards overlapping the hero edge,
   a details list beside the form, and four photo cards to explore. */

.page-hero__big { font-size: clamp(2.75rem, 1.6rem + 4.5vw, 5.25rem); letter-spacing: -0.035em; }

.ways-band { padding-top: 0; padding-bottom: 0; }
.ways { display: grid; gap: var(--sp-4); margin-top: calc(-1 * var(--sp-10)); }
@media (min-width: 48rem) { .ways { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
.way {
  position: relative;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card-hover);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.way:hover { transform: translateY(-2px); color: var(--ink); }
.way:hover .way__arrow { color: var(--blue-600); transform: translate(2px, -2px); }
.way__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
}
.way__icon svg { width: 1.25rem; height: 1.25rem; }
.way__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blue-600);
}
.way__value { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.way__note { font-size: var(--fs-sm); color: var(--ink-muted); }
.way__arrow { position: absolute; top: var(--sp-6); right: var(--sp-6); color: var(--silver-400); transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.way__arrow svg { width: 0.875rem; height: 0.875rem; }

.details { margin: var(--sp-8) 0 0; border-top: 1px solid var(--rule); }
.details__row {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) { .details__row { grid-template-columns: 11rem 1fr; gap: var(--sp-6); } }
.details dt {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.details dt svg { width: 1.1rem; height: 1.1rem; color: var(--blue-600); flex: none; }
.details dd { margin: 0; color: var(--ink); }
.details dd a:not(.link-arrow) { color: var(--ink); font-weight: 600; text-decoration: none; }
.details dd a:not(.link-arrow):hover { color: var(--blue-600); }
.details dd .link-arrow { display: flex; width: fit-content; margin-top: var(--sp-2); font-size: var(--fs-sm); }
.hours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.hours li { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.hours li span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.details__social { margin-top: var(--sp-6); }
.details__social a { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; text-decoration: none; color: var(--ink); }
.details__social a:hover { color: var(--blue-600); }
.details__social svg { width: 1.25rem; height: 1.25rem; color: var(--blue-600); }

.field--choice { border: 0; padding: 0; margin: 0 0 var(--sp-5); min-width: 0; }
.field--choice legend {
  padding: 0;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); }
.choices .choice {
  position: relative;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.choices .choice:has(input:checked) { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.choices .choice:has(input:focus-visible) { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.choices .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice--consent { align-items: flex-start; margin: 0 0 var(--sp-5); color: var(--ink-muted); }
.choice--consent input { margin-top: 0.2em; accent-color: var(--blue-600); width: 1rem; height: 1rem; flex: none; }
.choice--consent a { color: var(--blue-600); }

.explore { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .explore { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .explore { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }
.explore__card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-photo);
  background: var(--navy-800);
  color: var(--white);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.explore__card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 900ms var(--ease-out), opacity var(--dur) var(--ease-out);
}
.explore__card:hover img { transform: scale(1.04); opacity: 0.7; }
.explore__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(1, 0, 54, 0.92) 0%, rgba(1, 0, 54, 0.35) 55%, rgba(1, 0, 54, 0) 100%);
}
.explore__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: grid; gap: var(--sp-1);
  padding: var(--sp-5);
}
.explore__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; }
.explore__note { font-size: var(--fs-sm); color: var(--silver-300); }
.explore__body > svg { width: 0.875rem; height: 0.875rem; margin-top: var(--sp-2); color: var(--blue-400); }