/* ==========================================================================
   Accetta Tax & Accounting — base and components
   Translated from the signed-off Home Concept design system. Every value
   traces to a component in that file. Depends on tokens.css, which must
   load first.

   Rule: no page adds a bespoke style. If a page needs something this file
   does not have, it gets added here as a class.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   Self-hosted so no request leaves for a third party and nothing depends on
   an external CDN staying up. Files live in assets/fonts/.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-variable-italic.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-variable.woff2') format('woff2-variations');
}

/* --------------------------------------------------------------------------
   RESET AND ELEMENT DEFAULTS
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body.accetta {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.accetta h1,
.accetta h2,
.accetta h3,
.accetta h4 {
  margin: 0;
  font-family: var(--font-serif-display);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}

.accetta h1 { font-size: var(--display-2xl); line-height: var(--leading-tight); }
.accetta h2 { font-size: var(--display-md); line-height: var(--leading-snug); }
.accetta h3 { font-size: var(--display-sm); line-height: var(--leading-snug); }

.accetta p { margin: 0 0 var(--space-4); }
.accetta p:last-child { margin-bottom: 0; }

.accetta img { max-width: 100%; height: auto; display: block; }

.accetta a { color: var(--text-link); }
.accetta a:hover { color: var(--text-link-hover); }

/* Visible focus for keyboard users only. Never remove this. */
.accetta :focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

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

/* Skip link, revealed on focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--blue-navy);
  color: var(--white);
  font-family: var(--font-sans-body);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--section-y) 0; }
.section--sm { padding: var(--section-y-sm) 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.bg-page  { background: var(--surface-page); }
.bg-white { background: var(--surface-card); }
.bg-band  { background: var(--surface-band); }
.bg-muted { background: var(--surface-muted); }
.bg-dark  { background: var(--surface-dark); color: var(--text-on-dark); }

.bg-dark h1,
.bg-dark h2,
.bg-dark h3 { color: var(--text-on-dark); }

.bg-dark .lead,
.bg-dark .text-muted { color: #C6D6E6; }

/* Simple grid. Collapses to one column below 760px. */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   TYPE HELPERS
   -------------------------------------------------------------------------- */
.lead {
  font: var(--type-lead);
  color: var(--text-muted);
  max-width: 62ch;
}

.text-muted { color: var(--text-muted); }
.text-small { font-size: var(--text-sm); }

.page-title { font: var(--type-page-title); color: var(--text-heading); }
.section-title { font: var(--type-section-title); color: var(--text-heading); }
.card-title { font: var(--type-card-title); color: var(--text-heading); }

/* --------------------------------------------------------------------------
   SECTION EYEBROW
   The signature header treatment: a short gold rule above an uppercase
   label, above a serif title. Gold here is structural rather than
   interactive, which is the one standing exception to the gold rule.
   -------------------------------------------------------------------------- */
.eyebrow { margin-bottom: var(--space-5); }

.eyebrow::before {
  content: "";
  display: block;
  width: 34px;
  height: 1.5px;
  background: var(--gold-beacon);
  margin: 0 0 var(--space-4);
}

.eyebrow__label {
  display: block;
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--blue-signal);
}

.eyebrow--center { text-align: center; }
.eyebrow--center::before { margin-left: auto; margin-right: auto; }

.bg-dark .eyebrow::before { opacity: 0.85; }
.bg-dark .eyebrow__label { color: var(--blue-sky); }

/* --------------------------------------------------------------------------
   BUTTONS
   Primary rests signal blue and goes beacon gold on hover. Nothing rests
   gold. The 1px press translate is deliberate.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: 1.1;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--sm { padding: 8px 16px; font-size: var(--text-xs); }
.btn--lg { padding: 13px 30px; font-size: 15px; }

.btn--primary {
  background: var(--blue-signal);
  border-color: var(--blue-signal);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--gold-beacon);
  border-color: var(--gold-beacon);
  color: var(--blue-navy);
}

.btn--secondary {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--blue-navy);
}
.btn--secondary:hover {
  border-color: var(--gold-beacon);
  color: var(--gold-beacon);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--blue-signal);
}
.btn--ghost:hover { color: var(--gold-beacon); }

.bg-dark .btn--secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}
.bg-dark .btn--secondary:hover {
  border-color: var(--gold-beacon);
  color: var(--gold-beacon);
}

/* --------------------------------------------------------------------------
   LINK WITH ARROW
   The everyday inline "more" link. Arrow slides right, text goes gold.
   -------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--blue-signal);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.link-arrow:hover { color: var(--gold-beacon); }

.link-arrow .icon {
  width: 15px;
  height: 15px;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover .icon { transform: translateX(3px); }

.bg-dark .link-arrow { color: var(--blue-sky); }
.bg-dark .link-arrow:hover { color: var(--gold-beacon); }

/* --------------------------------------------------------------------------
   CARD
   White surface, hairline border, lifts on hover with a soft blue shadow.
   -------------------------------------------------------------------------- */
.card {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

a.card:hover,
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card--flat { box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   BADGE
   Quiet category or status label. Never gold.
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  font-family: var(--font-sans-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
}

.badge--sky {
  color: var(--blue-signal);
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge--solid { color: var(--white); background: var(--blue-signal); }
.badge--mist { color: var(--blue-navy); background: var(--blue-mist); }
.badge--outline { color: var(--blue-navy); border: 1px solid var(--border-subtle); }

/* --------------------------------------------------------------------------
   SERVICE ROW
   The signature content motif: serif numeral, serif title, sans description,
   trailing arrow. On hover the row slides right and the numeral goes gold.
   -------------------------------------------------------------------------- */
.service-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--neutral-100);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--duration-base) var(--ease-standard);
}

.service-row:last-child { border-bottom: 1px solid var(--neutral-100); }
.service-row:hover { padding-left: var(--space-3); }

.service-row__num {
  font-family: var(--font-serif-display);
  font-size: var(--display-sm);
  font-weight: var(--weight-semibold);
  color: var(--border-subtle);
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--duration-fast);
}

.service-row:hover .service-row__num { color: var(--gold-beacon); }

.service-row__body { flex: 1 1 auto; }

.service-row__title {
  font-family: var(--font-serif-display);
  font-size: var(--display-sm);
  font-weight: var(--weight-semibold);
  color: var(--blue-navy);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-snug);
}

.service-row__desc {
  font-family: var(--font-sans-body);
  font-size: var(--text-md);
  color: var(--text-muted);
  margin: 0;
}

.service-row__arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--blue-sky);
  transition:
    transform var(--duration-base) var(--ease-out),
    color var(--duration-fast);
}

.service-row:hover .service-row__arrow {
  color: var(--gold-beacon);
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .service-row { gap: var(--space-4); }
  .service-row__arrow { display: none; }
}

/* --------------------------------------------------------------------------
   FORM FIELDS
   Hairline border, signal-blue focus ring.
   -------------------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--space-4); }

.field__label {
  display: block;
  font-family: var(--font-sans-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--blue-navy);
  margin-bottom: 6px;
}

.field__required { color: var(--blue-signal); }

.field__input,
.field__textarea {
  width: 100%;
  font-family: var(--font-sans-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  outline: none;
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);
}

.field__textarea { resize: vertical; min-height: 140px; }

.field__input:focus,
.field__textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

/* --------------------------------------------------------------------------
   HARBOR HORIZON
   The signature divider. Two stacked wave paths under a thin gold rule.
   Inline SVG in the markup; this only governs its box.
   -------------------------------------------------------------------------- */
.harbor-horizon {
  display: block;
  width: 100%;
  height: 60px;
}

.harbor-horizon--flip { transform: scaleY(-1); }

/* --------------------------------------------------------------------------
   ICONS
   Inline SVG sprite, not a webfont. Icons inherit colour from the parent,
   which is what makes the hover rules above work.
   -------------------------------------------------------------------------- */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   PAGE SECTIONS
   Section-level composites used across pages. These live here rather than in
   a page so that no page ever carries bespoke CSS. Values traced to the
   concept's Hero, AboutTeaser and ContactCTA.
   -------------------------------------------------------------------------- */

/* Hero: photographic, navy, with a directional scrim so the type holds. */
.hero {
  position: relative;
  background: var(--blue-navy);
  padding-top: 120px;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 34, 64, 0.94) 0%,
    rgba(11, 34, 64, 0.80) 45%,
    rgba(14, 45, 92, 0.55) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--content-gutter) var(--space-8);
}

.hero__copy { max-width: 640px; }

.hero__title {
  font-family: var(--font-serif-display);
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  margin: 0 0 20px;
}

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

.hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: #CDDDEC;
  margin: 0 0 30px;
  max-width: 500px;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.hero .harbor-horizon {
  position: relative;
  z-index: 2;
  height: 64px;
}

/* Split: an asymmetric two-column section. Collapses at 860px. */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.split--intro-list { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); }
.split--media-copy {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 44px;
  align-items: center;
}

@media (max-width: 860px) {
  .split--intro-list,
  .split--media-copy { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Portrait frame. */
.portrait {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 6;
  border: 1px solid #CBD9E7;
  max-width: 380px;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* CTA band: photographic, navy, centred, with a gold hairline at the top. */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--blue-navy);
  padding: 88px var(--content-gutter);
  text-align: center;
}

.cta-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.cta-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(25, 53, 83, 0.72) 0%,
    rgba(25, 53, 83, 0.92) 62%,
    rgba(25, 53, 83, 1) 100%
  );
}

.cta-band__rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  opacity: 0.6;
  z-index: 2;
}

.cta-band__inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
}

.cta-band h2 { color: var(--white); margin: 0 0 var(--space-3); }
.cta-band p { font-size: 17px; color: #CDDDEC; margin: 0 0 26px; }

/* Section head: eyebrow, title and supporting copy as one block. */
.section-head { margin-bottom: var(--space-6); }
.section-head .section-title { margin: 14px 0; }
.section-head p { color: var(--text-muted); margin: 0 0 22px; }

.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   INTERIOR PAGE COMPOSITES
   PageHeader, service blocks, checklist cards, simple CTA band.
   Traced to the concept's ServicesScreen, AboutScreen, ContactScreen.
   -------------------------------------------------------------------------- */

/* Navy page header with eyebrow, serif title, intro, harbor horizon below. */
.page-header {
  background: var(--blue-navy);
  padding-top: 56px;
  position: relative;
}

.page-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--content-gutter) 36px;
}

.page-header__title {
  font-family: var(--font-serif-display);
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: var(--weight-semibold);
  color: var(--white);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 14px 0 0;
}

.page-header__intro {
  font-size: var(--text-lg);
  color: #B9CCE0;
  line-height: var(--leading-body);
  margin: 18px 0 0;
  max-width: 560px;
}

.page-header .harbor-horizon { height: 52px; }

/* Service block: numbered two-column section, alternating white and mist. */
.svc-block { padding: var(--section-y-sm) 0; }
.svc-block--mist { background: var(--blue-mist); }
.svc-block--white { background: var(--white); }

.svc-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-7);
  align-items: start;
}

@media (max-width: 860px) {
  .svc-block__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

.svc-block__num {
  font-family: var(--font-serif-display);
  font-size: 48px;
  font-weight: var(--weight-semibold);
  color: var(--blue-sky);
  line-height: 1;
  margin: 0 0 var(--space-2);
}

.svc-block__title {
  font-family: var(--font-serif-display);
  font-size: var(--display-sm);
  font-weight: var(--weight-semibold);
  color: var(--blue-navy);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}

.svc-block__lede {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-body);
  margin: 0;
}

/* Checklist card grid: two columns of check-marked capability cards. */
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

.check-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.svc-block--white .check-item { background: var(--surface-page); }
.svc-block--mist .check-item { background: var(--white); }

.check-item .icon {
  color: var(--blue-signal);
  width: 19px;
  height: 19px;
  margin-top: 1px;
}

.check-item span { font-size: 14.5px; color: var(--neutral-900); line-height: 1.5; }

/* Simple CTA band: flat harbor blue, centred title and button. No photo. */
.cta-simple {
  background: #15467E;
  padding: 60px var(--content-gutter);
  text-align: center;
}

.cta-simple h2 {
  font-family: var(--font-serif-display);
  font-size: var(--display-sm);
  font-weight: var(--weight-semibold);
  color: var(--white);
  margin: 0 0 22px;
}

/* --------------------------------------------------------------------------
   ABOUT PAGE COMPOSITES
   Sticky portrait split, facts row, harbor quote band.
   -------------------------------------------------------------------------- */

.about-section { background: var(--white); padding: var(--section-y) 0; }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-7);
  align-items: start;
}

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

.about-portrait { position: sticky; top: 120px; }

@media (max-width: 860px) {
  .about-portrait { position: static; max-width: 380px; }
}

.about-portrait__frame {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 6;
  border: 1px solid var(--border-subtle);
}

.about-portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-portrait__name {
  font-family: var(--font-serif-display);
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--blue-navy);
  margin: 18px 0 2px;
}

.about-portrait__role { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

.about-body { font-size: 17px; color: var(--neutral-900); line-height: 1.75; }
.about-body p { margin: 0 0 18px; }
.about-body p:first-child { margin-top: 14px; }
.about-body p:last-child { margin-bottom: 0; }

/* Facts row: three top-ruled stat cells. */
.facts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}

@media (max-width: 560px) {
  .facts-row { grid-template-columns: 1fr; }
}

.fact { border-top: 2px solid var(--blue-mist); padding-top: 14px; }

.fact__value {
  font-family: var(--font-serif-display);
  font-size: 24px;
  font-weight: var(--weight-bold);
  color: var(--blue-signal);
  margin: 0 0 6px;
}

.fact__label { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Quote band: full-bleed photo, navy gradient scrim, italic serif line. */
.quote-band { position: relative; }

.quote-band__media { height: 380px; overflow: hidden; }

.quote-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

.quote-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,34,64,0.78) 0%, rgba(11,34,64,0.35) 55%, rgba(11,34,64,0.05) 100%);
}

.quote-band__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.quote-band__line {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 26px;
  color: var(--white);
  line-height: 1.4;
  margin: 0;
  max-width: 520px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.25);
}

/* --------------------------------------------------------------------------
   CONTACT PAGE COMPOSITES
   Form card, reach-us info rows, client tool card.
   -------------------------------------------------------------------------- */

.contact-section { background: var(--surface-page); padding: var(--section-y-sm) 0; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
  gap: var(--space-7);
  align-items: start;
}

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

.form-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-sm);
}

.form-card form { display: grid; gap: var(--space-4); margin-top: 18px; }
.form-card .field { margin-bottom: 0; }

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 560px) {
  .field-pair { grid-template-columns: 1fr; }
}

.form-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.form-card__privacy {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-card__privacy .icon { width: 14px; height: 14px; }

/* Reach-us rows: icon, small caps label, value. */
.info-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--neutral-100);
}

.info-row .icon {
  width: 20px;
  height: 20px;
  color: var(--blue-signal);
  margin-top: 2px;
  flex: none;
}

.info-row__label {
  margin: 0 0 2px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.info-row__value { margin: 0; font-size: 15.5px; color: var(--neutral-900); }

/* Small caps side heading above the client tools list. */
.side-label {
  font-family: var(--font-sans-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

/* Client tool card: icon chip, title, sub, arrow. Gold border on hover. */
.tool-card {
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.tool-card:hover { border-color: var(--gold-beacon); }

.tool-card__chip {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--blue-mist);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-card__chip .icon { width: 20px; height: 20px; color: var(--blue-signal); }

.tool-card__title {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--blue-navy);
}

.tool-card__sub { display: block; font-size: var(--text-xs); color: var(--text-muted); }

.tool-card__arrow {
  width: 17px;
  height: 17px;
  color: var(--blue-sky);
  flex: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.tool-card:hover .tool-card__arrow { color: var(--gold-beacon); }

/* Form success note, shown by the thank-you state or page. */
.form-success {
  padding: 28px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.form-success .icon { width: 26px; height: 26px; color: var(--status-success); flex: none; }

.form-success__title {
  font-family: var(--font-serif-display);
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--blue-navy);
  margin: 0 0 6px;
}

.form-success__text { font-size: 15px; color: var(--text-muted); margin: 0; line-height: 1.6; }

/* --------------------------------------------------------------------------
   SITE CHROME
   Utility strip and footer ship as HTML blocks in the Kadence header and
   footer builders. Nav link styling skins Kadence's own menu markup.
   -------------------------------------------------------------------------- */

/* Utility strip: dark navy, location left, ShareFile link right. */
.util-strip {
  background: #0B2240;
  padding: 7px var(--content-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.util-strip__loc {
  font-family: var(--font-sans-body);
  color: #6E89A6;
  font-size: 12.5px;
  letter-spacing: 0.03em;
}

.util-strip__link {
  font-family: var(--font-sans-body);
  font-size: 12.5px;
  color: #C6D6E6;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.util-strip__link:hover { color: var(--gold-beacon); }
.util-strip__link .icon { width: 14px; height: 14px; }

/* Kadence primary nav skin: gold underline on hover and current item. */
body.accetta .main-navigation .menu-item a {
  font-family: var(--font-sans-body);
  font-size: 14px;
  color: var(--blue-navy);
}

body.accetta .main-navigation .menu-item a .menu-label {
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

body.accetta .main-navigation .menu-item a:hover .menu-label,
body.accetta .main-navigation .menu-item.current-menu-item a .menu-label {
  border-bottom-color: var(--gold-beacon);
}

/* Footer: harbor divider strip, dark panel, legal bar. */
.site-foot__divider { background: #15467E; position: relative; height: 28px; }
.site-foot__divider .harbor-horizon { opacity: 0.5; position: absolute; top: 0; left: 0; height: 28px; }

.site-foot__main {
  background: #0B2240;
  padding: 40px var(--content-gutter);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}

.site-foot__brand { max-width: 280px; }

.site-foot__name {
  margin: 0 0 8px;
  font-family: var(--font-serif-display);
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--white);
}

.site-foot__desc,
.site-foot__contact { margin: 0 0 14px; font-size: 13px; color: #8FA8C0; line-height: 1.7; }
.site-foot__contact { margin-bottom: 0; }
.site-foot__contact a { color: inherit; text-decoration: none; }
.site-foot__contact a:hover { color: var(--white); }

.site-foot__cols { display: flex; gap: 44px; flex-wrap: wrap; }

.site-foot__heading {
  margin: 0 0 9px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-sky);
}

.site-foot__cols a,
.site-foot__cols p {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  color: #C6D6E6;
  text-decoration: none;
}

.site-foot__cols a:hover { color: var(--gold-beacon); }

.site-foot__legal {
  background: #0B2240;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px var(--content-gutter);
  font-size: var(--text-xs);
  color: #6E89A6;
}


/* --------------------------------------------------------------------------
   RUNTIME OVERRIDES — 2026-08-11 staging pass
   Kadence link color was winning over button label; hero/page titles lacked
   explicit white and inherited the global navy heading color.
   -------------------------------------------------------------------------- */
body .hero__title, body .page-header__title,
body .cta-band__inner h2, body .cta-simple h2 { color: #fff; }
.hero__title em { color: var(--blue-sky); }
a.btn--primary, .btn--primary, button.btn--primary,
a.btn--primary:hover, .btn--primary:hover { color: #fff !important; }


/* --------------------------------------------------------------------------
   HEADER & FOOTER CHROME — 2026-08-11
   Kadence header/footer styled to the design system: logo sizing, nav
   typography, navy footer band.
   -------------------------------------------------------------------------- */
#masthead { border-bottom: 1px solid rgba(14, 45, 92, 0.08); }
#masthead .custom-logo { max-height: 46px; width: auto; }
#masthead .primary-menu-container a,
#masthead .main-navigation a {
  font-family: var(--font-sans-body); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue-navy);
}
#masthead .primary-menu-container a:hover,
#masthead .main-navigation a:hover { color: var(--blue-signal); }
#colophon { background: #193553; }
#colophon, #colophon .footer-html, #colophon .footer-html p { color: #B9CCE0; font-size: 14px; }
#colophon a { color: #fff; }
#colophon a:hover { color: var(--gold-beacon); }
#colophon .site-footer-wrap { padding-top: 26px; padding-bottom: 26px; }

/* logo replaces text title; hide the duplicate */
#masthead .site-branding .site-title, #masthead .site-branding .site-description { display: none; }