/* ============================================================================
   retained.css — the FOURTH layer of the Halo Desk design system.
   ----------------------------------------------------------------------------
   This layer is deliberate, not debt. It owns exactly five things, and nothing else:

     (1) DESCENDANT / CONTEXTUAL   "this element, inside that one"
     (2) PSEUDO-ELEMENTS           ::before / ::after and their generated content
     (3) COUNTERS                  numbered steps
     (4) STATE                     :hover / :focus that no component control expresses
     (5) RESPONSIVE                behaviour with no single native control

   It must never beat a control the design system claims Bricks owns. Two things enforce that:
   every rule below is a descendant, pseudo, state or media rule (so it cannot collide with a
   component's own control), and Bricks chains a global class to its element type
   (`.hd-cta.brxe-text-link`, specificity 0-2-0), which outranks a bare `.hd-cta` here.
   `gates/audit-ownership.php` fails the build if a single-class rule appears in this file for a
   property a global class owns.

   Every rule carries the category it is claimed under. A rule that cannot name one does not
   belong in this file — it belongs in a Bricks control.
   ========================================================================== */

/* ---- (1) base ------------------------------------------------------------
   Vertical rhythm for unclassed headings and paragraphs. Bricks' Theme Styles own the SIZE,
   FAMILY and COLOUR of these elements but ship no margin control, so the spacing between them
   has nowhere native to live. Bare element selectors score 0-0-1, so any global class — or a
   `_margin` set on the element in the builder — still wins. */
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
h1, h2 { margin: 0 0 var(--hd-space-3); }
h3, h4 { margin: 0 0 var(--hd-space-2); }
p { margin: 0 0 var(--hd-space-3); }
/* NB: no blanket `p:last-child { margin-bottom: 0 }`. Bricks wraps each rich-text run in its own
   `.brxe-text` div, so every paragraph is a last child of something and the reset silently
   collapsed the rhythm inside the cards. The reset belongs to a prose run only. */
ul:last-child, table:last-child { margin-bottom: 0; }

/* (1) descendant: prose runs. A rich-text element holds several <p>; the rhythm between them is
   a relationship inside the run, not a property of the element. */
.hd-prose p { margin: 0 0 var(--hd-space-3); }
.hd-prose p:last-child { margin-bottom: 0; }
.hd-prose b, .hd-prose strong { color: var(--hd-navy); font-weight: 700; }

/* (4) state: link hover. The base link colour is the Theme Style's. */
a { transition: color .15s ease; }
a:hover { color: var(--hd-accent-deep); }

/* ---- (2) the photo frame -------------------------------------------------
   The approved photo card is a rounded photo floating on an even ~16px teal-tint panel. The panel
   is generated content behind the image; there is no Bricks control for it. */
.hd-photo-frame { position: relative; }
.hd-photo-frame::before {
  content: ""; position: absolute; inset: -16px;
  border-radius: 58px; background: var(--hd-teal-tint); z-index: 0;
}
.hd-photo-frame img { position: relative; z-index: 1; }
/* (1) contextual: on the teal close band a tint panel cannot read, so the approved design swaps
   it for a white matte border. */
.hd-photo-noframe::before { display: none; }

/* ---- (1) icons ------------------------------------------------------------
   Size and colour of a mark are contextual — the same icon is a 26px teal capability mark, a 58px
   soft-amber package mark and an 18px white trustpoint tick. */
.hd-ico { display: inline-flex; width: 26px; height: 26px; flex: 0 0 26px; color: var(--hd-accent); }
.hd-ico svg { width: 100%; height: 100%; display: block; }
.hd-ico-lg { width: 46px; height: 46px; flex-basis: 46px; }
.hd-ico-mark { width: 58px; height: 58px; flex-basis: 58px; color: var(--hd-amber-soft); margin-bottom: var(--hd-space-2); }
.hd-ico-mark svg { stroke-width: 1.1; }
.hd-ico-sm { width: 18px; height: 18px; flex-basis: 18px; }
.hd-ico-24 { width: 24px; height: 24px; flex-basis: 24px; }
.hd-ico-onnavy { color: #FFFFFF; }
.hd-ico-amber { color: var(--hd-amber-soft); }

/* ---- (1) capability item: the icon + heading row -------------------------- */
.hd-cap-head { display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 0 0 var(--hd-space-1); }
.hd-cap-head h3 { margin: 0; }
/* The body copy aligns under the HEADING, not under the icon: the head row is
   [icon 26px][gap 14px][h3], so the text starts 40px in. */
.hd-cap-item > .brxe-text p { margin: 0 0 0 40px; font-size: var(--hd-body); line-height: 1.5; }

/* ---- (2) list markers -----------------------------------------------------
   Generated content: a dot, a hand-drawn tick. No Bricks control emits these. */
.hd-frictions { list-style: none; margin: var(--hd-space-3) 0 var(--hd-space-4); padding: 0; }
.hd-frictions li { position: relative; padding: 0 0 var(--hd-space-3) var(--hd-space-4);
  font-size: 19px; line-height: 1.45; color: var(--hd-navy); }
.hd-frictions li::before { content: ""; position: absolute; left: 0; top: 0.6em;
  width: 12px; height: 12px; border-radius: 50%; background: var(--hd-accent); }

.hd-featlist { list-style: none; margin: 0 0 var(--hd-space-3); padding: 0; }
.hd-featlist li { position: relative; padding: 0 0 10px 26px; font-size: 15.5px; line-height: 1.5; color: var(--hd-navy); }
.hd-featlist li::before { content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 8px; border-left: 2px solid var(--hd-amber); border-bottom: 2px solid var(--hd-amber);
  transform: rotate(-45deg); }
/* (1) the services variant of the same list is a notch smaller */
.hd-featlist--sm li { padding-bottom: 8px; padding-left: 24px; font-size: 15px; }
.hd-featlist--sm li::before { top: 7px; width: 13px; height: 7px; }

/* ---- (1) the in-house cost list -------------------------------------------
   `hd-billlist`, not `hd-bill`: the CARD is the global class `.hd-bill`, and a single-class rule
   of the same name here would reset the card's own padding — retained CSS quietly beating a
   control the design system claims to own. Different layer, different name. */
.hd-billlist { list-style: none; margin: 0; padding: 0; }
.hd-billlist li { display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--hd-hairline); font-size: 17px; line-height: 1.45; color: var(--hd-text); }
.hd-billlist__total { border-bottom: none; font-weight: 800; font-size: 19px; color: var(--hd-navy); padding-top: 20px; }
.hd-billlist__total .hd-ico { color: var(--hd-navy); }

/* ---- (1) the payoff rows -------------------------------------------------- */
.hd-relief-list { border-top: 1px solid var(--hd-hairline); }
.hd-relief-item .hd-ico { margin-top: 3px; }
.hd-relief-item p { margin: 0; }

/* ---- (3) numbered process steps ------------------------------------------- */
.hd-process { counter-reset: step; }
.hd-process__item { position: relative; padding-top: 6px; }
.hd-process__item::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--hd-teal-tint); color: var(--hd-teal-deep);
  font-weight: 800; font-size: 15px; margin-bottom: var(--hd-space-2);
}
.hd-process__item h3 { font-size: 19px; margin: 0 0 6px; }
.hd-process__item p { font-size: 15.5px; line-height: 1.55; color: var(--hd-muted); margin: 0; }

/* ---- (1) the three-way comparison table -----------------------------------
   A table's cell rules are structural relationships. (5) The wrapper scrolls the table instead of
   letting it widen the page — `min-width:0` is the load-bearing part: as a grid/flex child the
   wrapper's automatic minimum size is its content, so without it `overflow-x` never engages and
   the PAGE widens instead. */
.hd-comparewrap { margin-top: var(--hd-space-5); overflow-x: auto; min-width: 0; max-width: 100%; }
.hd-compare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; }
.hd-compare th, .hd-compare td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--hd-hairline);
  font-size: 15px; line-height: 1.45; vertical-align: top; }
.hd-compare thead th { font-family: var(--hd-font-display); font-weight: 700; font-size: 17px;
  color: var(--hd-navy); border-bottom: 2px solid var(--hd-hairline); }
.hd-compare tbody th { font-weight: 700; color: var(--hd-navy); width: 24%; }
.hd-compare td { color: var(--hd-muted); width: 25.3%; }
.hd-compare .is-hd { background: var(--hd-teal-tint); color: var(--hd-navy); font-weight: 600; }
.hd-compare thead .is-hd { background: var(--hd-teal); color: #fff; border-bottom-color: var(--hd-teal);
  border-radius: 12px 12px 0 0; }
.hd-compare tbody tr:last-child .is-hd { border-radius: 0 0 12px 12px; }
.hd-compare tbody tr:last-child th, .hd-compare tbody tr:last-child td { border-bottom: none; }
.hd-compare-note { margin-top: var(--hd-space-3); font-size: 13.5px; color: var(--hd-muted); font-style: italic; }

/* ---- (1) package card internals ------------------------------------------- */
.hd-pkg-top { display: flex; align-items: center; gap: 12px; min-height: 30px; margin-bottom: var(--hd-space-2); }
.hd-pkg-price { font-family: var(--hd-font-display); font-weight: 700; font-size: 34px; letter-spacing: normal;
  color: var(--hd-teal-deep); margin: 6px 0 2px; }
.hd-pkg-price small { font-size: 16px; font-weight: 600; color: var(--hd-muted); }
.hd-pkg-vat { font-size: 14px; color: var(--hd-muted); margin: 0 0 var(--hd-space-3); }
.hd-pkg-desc { font-size: 16px; line-height: 1.55; color: var(--hd-navy); margin: 0 0 var(--hd-space-3); }
.hd-pkg-hr { border: none; border-top: 1px solid var(--hd-hairline); margin: 0 0 var(--hd-space-3); }
.hd-pkg-for { margin-top: auto; font-size: 14.5px; color: var(--hd-muted); }
.hd-pkg-for b { color: var(--hd-navy); font-weight: 700; }

/* ---- (1) service + security card internals -------------------------------- */
.hd-sec-card p { font-size: 15.5px; line-height: 1.55; color: var(--hd-muted); margin: 0; }

/* ---- (1) the hourly tile + tier card internals ---------------------------- */
.hd-hourly-note { font-size: 16.5px; line-height: 1.5; color: rgba(255,255,255,0.92); margin: 0; position: relative; z-index: 1; }
.hd-tier-desc { font-size: 16px; line-height: 1.5; color: var(--hd-muted); margin: 0; }
.hd-tier-lead .hd-tier-desc { color: rgba(255,255,255,0.88); }

/* ---- (2) the halo marks on the two teal fields ----------------------------
   A multi-tonal SVG laid in behind the card corner. Decorative, positioned against its parent —
   a background layer, not an element the client edits. */
.hd-halo { position: absolute; pointer-events: none; opacity: 0.55;
  background: url("assets/img/halo-rays-soft.svg") center / contain no-repeat; }
.hd-halo--hourly { top: -34px; right: -30px; width: 280px; height: 280px; }
.hd-halo--tier { bottom: -58px; right: -48px; width: 240px; height: 240px; }
.hd-clip { position: relative; overflow: hidden; }

/* ---- (1) founder + team ---------------------------------------------------- */
.hd-founder-cap { font-size: var(--hd-small); color: var(--hd-muted);
  margin: calc(var(--hd-space-4) + 6px) 0 0; padding-left: var(--hd-space-3); position: relative; }
.hd-founder-cap::before { content: ""; position: absolute; left: 0; top: 0.58em;
  width: 18px; height: 2px; background: var(--hd-accent); }   /* (2) */
.hd-teamcard__photo { flex: 0 0 96px; width: 96px; }
.hd-teamcard__photo img { width: 96px; height: 96px; object-fit: cover; object-position: center 12%;
  border-radius: 50%; display: block; }
.hd-teamcard p { margin: 0; font-size: 16.5px; color: var(--hd-text); }
.hd-member__name { font-family: var(--hd-font-display); font-weight: 700; font-size: 20px; letter-spacing: normal;
  color: var(--hd-navy); margin: var(--hd-space-2) 0 2px; }
.hd-member__role { font-size: 14px; color: var(--hd-accent); font-weight: 600; margin: 0 0 8px; }
.hd-member__bio { font-size: 15px; line-height: 1.55; color: var(--hd-muted); margin: 0; }

/* ---- (1) vetting stat card -------------------------------------------------- */
.hd-vet__num { font-family: var(--hd-font-display); font-weight: 800; font-size: 66px; line-height: 1; letter-spacing: normal; color: #fff; }
.hd-vet__num-cap { font-size: 15px; color: rgba(255,255,255,0.82); margin-top: 10px; }
.hd-vet__points { list-style: none; margin: var(--hd-space-3) 0 0; padding: var(--hd-space-3) 0 0;
  border-top: 1px solid var(--hd-navy-line); text-align: left; }
.hd-vet__points li { position: relative; padding: 7px 0 7px 28px; font-size: 14.5px; line-height: 1.45;
  color: rgba(255,255,255,0.9); }
.hd-vet__points li .hd-ico { position: absolute; left: 0; top: 7px; }
.hd-vet__text p { font-size: 17px; line-height: 1.6; color: var(--hd-navy); margin: 0 0 var(--hd-space-2); }

/* ---- (1) trustpoints row ----------------------------------------------------- */
.hd-trustpoints { display: flex; flex-wrap: wrap; gap: var(--hd-space-2); margin: var(--hd-space-3) 0 var(--hd-space-4); }

/* ---- (1) contact aside -------------------------------------------------------- */
.hd-contact-line { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid var(--hd-hairline); }
.hd-contact-line:last-child { border-bottom: none; }
.hd-contact-line .hd-ico { margin-top: 2px; }
.hd-contact-line b { display: block; color: var(--hd-navy); font-weight: 700; font-size: 15.5px; }
.hd-contact-line span { color: var(--hd-muted); font-size: 15px; }
.hd-contact-line a { color: var(--hd-teal-deep); text-decoration: none; font-weight: 600; }

/* (1) The two form measurements Bricks ships no control for. Everything else about this form —
   label typography, field colour, border, radius, padding, field spacing, button colour, border
   and type — is set through the form element's own controls and is editable in the builder. */
.brxe-form label { margin-bottom: 6px; }
.brxe-form button[type="submit"].bricks-button { padding: 13px 26px; }

/* (4) state: the field focus ring. Field colour, border, padding and typography are all native
   Bricks form controls; only the focus state has no control. */
.brxe-form input:focus, .brxe-form textarea:focus, .brxe-form select:focus {
  outline: none; border-color: var(--hd-teal); box-shadow: 0 0 0 3px var(--hd-teal-tint);
}

/* ---- (2)(5) the hero: a full-bleed photograph under a white scrim ------------
   Three background layers — a directional scrim, the photograph anchored centre-right, and the
   white ground beneath. `color-mix()` inside a gradient stop has no Bricks control. */
.hd-hero-bleed {
  position: relative; min-height: 640px; display: flex; align-items: center;
  background:
    linear-gradient(96deg,
      var(--hd-white) 0%, var(--hd-white) 34%,
      color-mix(in srgb, var(--hd-white) 82%, transparent) 50%,
      transparent 72%),
    url("assets/img/ambient-consult.jpg") center right / cover no-repeat,
    var(--hd-white);
}

/* ---- (2) the warm-sand glow --------------------------------------------------
   Director-settled: the glow lives on EXACTLY TWO sections — "The work doesn't wait for someone to
   be free" and "How practices work with us" — and nowhere else. Strength is the `--hd-glow-pct`
   token, so it is still one knob. A radial gradient built with color-mix has no single control. */
.hd-glow-left {
  background:
    radial-gradient(85% 105% at 18% 20%,
      color-mix(in srgb, var(--hd-warm-glow) var(--hd-glow-pct), transparent) 0%, transparent 60%),
    var(--hd-white);
}
.hd-glow-right {
  background:
    radial-gradient(85% 105% at 85% 20%,
      color-mix(in srgb, var(--hd-warm-glow) var(--hd-glow-pct), transparent) 0%, transparent 60%),
    var(--hd-white);
}

/* ---- (1) header + footer ------------------------------------------------------ */
.hd-logo img { height: 72px; width: auto; }
.hd-footer-wordmark { font-family: var(--hd-font-display); font-weight: 700; font-size: 24px; letter-spacing: normal;
  color: #fff; margin: 0 0 var(--hd-space-2); }
.hd-footer-col h4 { color: #fff; margin: 0 0 var(--hd-space-3); font-size: 18px; }
.hd-footer-col p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.68); margin: 0 0 10px; max-width: 44ch; }
.hd-footer-col ul { list-style: none; margin: 0; padding: 0; }
.hd-footer-col li { margin-bottom: 10px; }
.hd-footer-col ul a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 15px; }
.hd-footer-col ul a:hover { color: #fff; }                    /* (4) */
.hd-footer-legalname { font-weight: 700; color: rgba(255,255,255,0.9); margin-top: var(--hd-space-2); }
.hd-footer-tel a { color: rgba(255,255,255,0.82); text-decoration: none; font-weight: 600; }
.hd-footer-tel a:hover { color: #fff; }                        /* (4) */
.hd-foot-tile__ico { display: inline-flex; width: 44px; height: 44px; flex: 0 0 44px;
  align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(217,162,95,0.16); color: var(--hd-amber-soft); }
.hd-foot-tile__ico svg { width: 22px; height: 22px; }
.hd-foot-tile__tx { display: flex; flex-direction: column; }
.hd-foot-tile__tx b { color: #fff; font-weight: 700; font-size: 16px; }
.hd-foot-tile__tx span { color: rgba(255,255,255,0.62); font-size: 14px; }
.hd-footer-bottom { display: flex; justify-content: space-between; align-items: center;
  gap: var(--hd-space-3); flex-wrap: wrap; padding-top: var(--hd-space-4);
  border-top: 1px solid var(--hd-navy-line); font-size: 13.5px; color: rgba(255,255,255,0.58); }

/* (1) the nav sits on the light header; Bricks' nav-nested ships the hamburger and its behaviour. */
.hd-nav .brxe-text-link { color: var(--hd-navy); text-decoration: none; font-size: var(--hd-body); }
.hd-nav .brxe-text-link:hover { color: var(--hd-accent); }     /* (4) */
.hd-nav .brx-nav-nested-items { gap: var(--hd-space-4); }

/* (1) the mobile menu opens over a white ground, so its links must not inherit the transparent
   overlay's colour handling. */
.hd-nav .brx-nav-nested-items.brx-open { background: var(--hd-white); }

/* ---- (5) responsive -----------------------------------------------------------
   Grid collapse is native (Bricks breakpoint keys on the grid controls). Only behaviour with no
   control lives here. */
@media (max-width: 991px) {
  .hd-hero-bleed { min-height: 0; background-position: center right, center right; }
  .hd-hero-bleed::after {
    content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.55); z-index: 0;   /* (2) */
  }
  .hd-hero-bleed > * { position: relative; z-index: 1; }
}
@media (max-width: 767px) {
  .hd-compare { min-width: 640px; }
  .hd-footer-bottom { flex-direction: column; align-items: flex-start; }
}