/* =============================================================================
   Aloha Bookkeeping Pros: the stylesheet for every page.
   The layout system comes first: the 8px page frame, the notch cut-out, step cards, photo bands, the
   questions card, the header chips and the spring easing. The brand layer at the end of the file sets the
   company's own look: Cabin headings, Lato body text, teal, cream, sand and aqua grounds, and the pill
   buttons.
   ========================================================================== */

:root {
  /* --- colour. The roles (dark surface, tint surface, action) are named here; the hues are the company's.
     Text colours are checked for contrast against the grounds they sit on. */
  --ground:      #FFFFFF;
  --anchor:      #055261;              /* dark teal: the scorecard band and the footer. White text on it is 8.6:1 */
  --mint:        #CBEBF0;              /* aqua: the ground of the pale sections and cards */
  --teal:        #066C7F;              /* teal: headings, links and accents. 5.9:1 on white */
  --tint:        rgba(6,108,127,.08);
  --scrim:       rgba(0,0,0,.25);
  --chip:        rgba(0,0,0,.60);
  --sun:         #F5B800;              /* star gold, decorative only */
  --paper-2:     #FCFAF5;              /* off-white */
  --rule-red:    #B5483F;              /* a red rule colour, not currently used */
  --glass: rgba(3,44,52,.86);

  --ink:         #181716;
  --ink-invert:  #FFFFFF;
  --ink-anchor:  #055261;
  --ink-mute:    rgba(255,255,255,.62);
  --ink-ghost:   rgba(255,255,255,.48);
  --ink-soft:    rgba(255,255,255,.84);
  --ink-quiet:   rgba(0,0,0,.78);
  --ink-role:    rgba(0,0,0,.62);

  /* --- type: Cabin for headings, Lato for everything else. */
  --display:    "Cabin", "Trebuchet MS", Arial, sans-serif;
  --display-sm: "Cabin", "Trebuchet MS", Arial, sans-serif;
  --body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- corner radius scale ------------------------------------------------ */
  --r-xs: 7px;    --r-sm: 8px;    --r-chip: 10px;
  --r-md: 12px;   --r-shell: 15px; --r-card: 20px;  --r-lg: 25px;
  --r-pill: 999px;

  /* --- shadow ------------------------------------------------------------- */
  --shadow-card:  0 12px 12px rgba(0,0,0,.10);
  --shadow-chip:  0 2px 4px rgba(0,0,0,.08);
  --shadow-float: 0 3px 6px rgba(0,0,0,.25);

  /* --- frame -------------------------------------------------------------- */
  --gutter: 8px;          /* the page inset that makes every band a floating card */
  --pad-x: 60px;          /* section inner padding, desktop */
  --content: 1200px;      /* width of the content column (it starts at x=120 on a 1440px screen) */
  --gap: 24px;            /* space between cards (three across are 384px wide at 1440px) */

  /* --- motion: spring easings, solved numerically for a bounce of .2 over 1.5s (the curve peaks at 1.0151).
     A cubic-bezier cannot overshoot, so linear() is the right tool here, not an approximation of one. */
  --ease-rise: linear(0.0000 0%, 0.0207 2%, 0.0737 5%, 0.1476 8%, 0.2333 10%, 0.3240 12%, 0.4147 15%, 0.5019 18%, 0.5831 20%, 0.6570 22%, 0.7228 25%, 0.7802 28%, 0.8295 30%, 0.8711 32%, 0.9056 35%, 0.9337 38%, 0.9562 40%, 0.9739 42%, 0.9874 45%, 0.9975 48%, 1.0047 50%, 1.0097 52%, 1.0128 55%, 1.0145 58%, 1.0151 60%, 1.0150 62%, 1.0143 65%, 1.0133 68%, 1.0120 70%, 1.0106 72%, 1.0093 75%, 1.0079 78%, 1.0067 80%, 1.0055 82%, 1.0045 85%, 1.0036 88%, 1.0028 90%, 1.0021 92%, 1.0016 95%, 1.0011 98%, 1.0000 100%);
  --ease-zoom: linear(0.0000 0%, 0.0227 2%, 0.0783 5%, 0.1523 8%, 0.2348 10%, 0.3192 12%, 0.4012 15%, 0.4783 18%, 0.5490 20%, 0.6126 22%, 0.6691 25%, 0.7188 28%, 0.7620 30%, 0.7994 32%, 0.8314 35%, 0.8587 38%, 0.8820 40%, 0.9016 42%, 0.9182 45%, 0.9321 48%, 0.9437 50%, 0.9534 52%, 0.9615 55%, 0.9683 58%, 0.9739 60%, 0.9785 62%, 0.9823 65%, 0.9855 68%, 0.9881 70%, 0.9903 72%, 0.9920 75%, 0.9935 78%, 0.9947 80%, 0.9957 82%, 0.9965 85%, 0.9971 88%, 0.9976 90%, 0.9981 92%, 0.9984 95%, 0.9987 98%, 1.0000 100%);
  --dur-rise: 1.5s;
  --dur-zoom: 3s;
  --stagger: .1s;         /* delay between siblings entering */
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.4;               /* 25.2px lines on 18px text */
  letter-spacing: -.18px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* the 8px gutter frame must never scroll sideways */
}

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

a { color: inherit; }

/* WCAG 2.4.7 / 2.4.11 / 1.4.11. Two-tone so the ring clears BOTH grounds: a single
   ring measured against --anchor falls under the 3:1 that 1.4.11 requires. */
:focus-visible {
  outline: 3px solid var(--anchor);
  outline-offset: 3px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 6px var(--ground);
}
/* Only genuinely dark surfaces get the light ring. A white ring on a white section would be invisible, so
   the ring is dark everywhere else. */
.band--dark :focus-visible,
.site-foot :focus-visible,
.head :focus-visible,
.hero :focus-visible,
.visit :focus-visible,
.why :focus-visible {
  outline-color: var(--ground);
  box-shadow: 0 0 0 6px var(--anchor);
}

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

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--anchor); color: var(--ink-invert);
  padding: 12px 18px; border-radius: var(--r-chip); font-weight: 500;
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

/* =============================================================================
   type. Display headings use Cabin; body text uses Lato.
   ========================================================================== */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.d1 { font-size: 50px; line-height: 1.20; letter-spacing: normal; }
.d2 { font-size: 42px; line-height: 1.20; letter-spacing: -.02em; }
.d3 { font-size: 40px; line-height: 1.30; letter-spacing: -.4px; }   /* dark intro band */
.d4 { font-size: 32px; line-height: 1.20; letter-spacing: -.02em; }

/* The eyebrow: a small uppercase line above a heading, in teal (the brand layer below sets its final look). */
.eyebrow {
  font-family: var(--body);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  text-transform: uppercase; letter-spacing: normal;   /* no extra letter spacing (the brand layer below sets its own) */
  color: var(--teal);
  margin: 0 0 10px;
}
.band--dark .eyebrow { color: var(--mint); }

.lead  { font-size: 18px; line-height: 1.4; letter-spacing: -.18px; margin: 0; }
.meta  { font-size: 16px; line-height: 1.2; letter-spacing: -.32px; margin: 0; }
.micro { font-size: 12px; line-height: 1.2; letter-spacing: -.24px; margin: 0; }
.quiet { color: var(--ink-quiet); }
.band--dark .quiet, .site-foot .quiet, .hero .quiet { color: var(--ink-mute); }

p { margin: 0 0 18px; text-wrap: pretty; }
/* centered short copy: balance the lines so a single word never drops to its own
   line (Firefox has balance but not pretty, and that is where the orphan showed) */
.sec-head .lead, .center .lead, .foot-cta__lead { text-wrap: balance; }
p:last-child { margin-bottom: 0; }

/* =============================================================================
   the frame. Every band is a floating card inside an 8px page gutter, with 15px corners, instead of a
   full-width strip.
   ========================================================================== */
.shell { padding: var(--gutter) var(--gutter) 0; }

.band {
  border-radius: var(--r-shell);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--gutter);
}
.band > .inner { padding: 120px var(--pad-x) 80px; }

.band--dark  { background: var(--anchor); color: var(--ink-invert); }
.band--dark  > .inner { padding: 120px var(--pad-x) 60px; }
.band--mint  { background: var(--mint); }
.band--plain { background: var(--ground); }
.band--close > .inner { padding: 80px var(--pad-x) 100px; }
.band + .band:not(.band--dark):not(.band--mint) > .inner { padding-top: 60px; }
.band--tight > .inner { padding: 60px var(--pad-x); }

.wrap { max-width: var(--content); margin: 0 auto; }
.center { text-align: center; }
.center .eyebrow { text-align: center; }

.sec-head { max-width: 760px; margin: 0 auto 80px; text-align: center; }
.sec-head .lead { margin-top: 18px; color: var(--ink-quiet); }
.band--dark .sec-head .lead { color: var(--ink-soft); }

/* =============================================================================
   header. Fixed to the top and floating 25px down. On a wide screen it is three translucent chips (logo,
   menu, button) over the page; on a narrow screen it is one bar.
   ========================================================================== */
.head {
  position: fixed;
  top: 17px; left: 0; right: 0;        /* plus 8px of padding puts the menu chip 25px from the top */
  z-index: 100;
  padding: 8px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  pointer-events: none;                /* the frame is a spacer; children take the events */
  isolation: isolate;                  /* keeps the glass layer's z-index inside the header */
}
.head > * { pointer-events: auto; }

/* The logo block. The logo sits on a light plate inside the dark glass (see .brand__plate below). */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 2px 4px;
  color: var(--ink-invert);
  text-decoration: none;
  border-radius: var(--r-sm);
}
 /* the small light square that holds the flower mark: 38px, 7px corners, inside the dark logo chip. */
.brand__tile { width: 38px; height: 38px; border-radius: 7px; background: var(--ground); display: grid; place-items: center; flex: 0 0 auto; }
.brand__tile svg { width: 30px; height: auto; }
.brand__lockup { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; }
.brand__lockup .wordmark { display: block; width: auto; height: 20px; }
.brand__sub {
  display: block;
  font-family: var(--body); font-size: 9.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.86); white-space: nowrap;
}

/* the menu paints nothing itself: the chip you see behind it is the header's glass layer, clipped to the
   menu's box. That is what lets the chip grow into the bar. */
.nav {
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
}
.nav a {
  font-size: 14px; font-weight: 400; line-height: 1.4;
  color: var(--ink-invert);
  text-decoration: none;
  padding: 10px 14px;                  /* WCAG 2.5.8: 24px minimum target */
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .18s ease;
}
.nav a:hover { background: rgba(255,255,255,.10); }
.nav a[aria-current="page"] { background: rgba(255,255,255,.14); }

.head-cta {
  white-space: nowrap;
  box-shadow: var(--shadow-chip);
}




.burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  color: var(--ink-invert);
  border-radius: var(--r-sm);
  cursor: pointer;
  place-items: center;
}
.burger svg { width: 20px; height: 20px; }

/* =============================================================================
   buttons. Pill shaped (the brand layer at the end of the file sets the final shape).
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-size: 18px; font-weight: 500;
  line-height: 1.2; letter-spacing: -.36px;
  padding: 14px 24px;
  min-height: 50px;
  border: 0; border-radius: var(--r-md);
  box-shadow: var(--shadow-chip);
  text-decoration: none; cursor: pointer;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .8; }

.btn--light { background: var(--ground); color: var(--ink); box-shadow: var(--shadow-chip); }

.btn--dark  { background: var(--anchor); color: var(--ink-invert); }

.btn--ghost { background: var(--ground); color: var(--ink); }


.btn--sm { font-size: 16px; padding: 12px 20px; min-height: 44px; }
.btn--brand { box-shadow: var(--shadow-chip); }

/* The header button: it takes the action colour, so that it reads on the dark hero, on white and on the aqua
   sections without swapping colour as the page scrolls. */
.btn--brand { background: var(--cta); color: var(--cta-ink); }

/* =============================================================================
   hero. A full-width photograph inside the 8px gutter, with 15px corners, a dark shade over it and content
   padded 100/60/60. The menu floats on top of it.
   ========================================================================== */
.hero {
  position: relative;
  border-radius: var(--r-shell);
  overflow: hidden;
  min-height: 900px;
  display: flex;
  margin-bottom: var(--gutter);
  background: var(--anchor);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* a slow 3s zoom out from 120% to 100%. Runs once, on load. */
.hero__media img {
  animation: heroZoom var(--dur-zoom) var(--ease-zoom) both;
  transform-origin: 50% 50%;
}
@keyframes heroZoom { from { transform: scale(1.2); } to { transform: scale(1); } }

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.12) 72%, rgba(0,0,0,.05) 100%),
    linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.24) 46%, rgba(0,0,0,.18) 100%);
}
@media (max-width: 1100px) {
  /* narrow viewports put the text over the middle of the frame, so the left-weighted
     ramp stops helping and a vertical one has to carry it */
  .hero__scrim { background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.34) 100%); }
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: calc(var(--content) + var(--pad-x) * 2);
  margin: 0 auto;
  padding: 100px var(--pad-x) 60px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--ink-invert);
}
.hero .d1 { max-width: 16ch; color: var(--ink-invert); }
.hero__lead { max-width: 46ch; color: var(--ink-soft); margin-top: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* The small line at the top of a hero: an icon, a rule and a short statement. It carries a plain fact, not a
   star rating, because stars next to a line of text read as a review score. */
.rating { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.rating__text {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1.2;
  color: var(--ink-invert);
  background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 9px 16px; border-radius: var(--r-pill);
}

/* the small card at the bottom right of the hero (12px corners) */
.hero__card {
  position: absolute; right: var(--pad-x); bottom: 60px;
  width: 268px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-float);
}
.hero__card img { width: 100%; height: 150px; object-fit: cover; }
.hero__card p { padding: 14px; font-size: 14px; line-height: 1.4; color: var(--ink-invert); margin: 0; }

/* =============================================================================
   metrics strip. Large figures with a caption, split by vertical rules. It carries only facts the company
   can stand behind, never an invented statistic.
   ========================================================================== */
.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: var(--content); margin: 0 auto; padding: 44px var(--pad-x);
}
.metrics__item { padding: 0 28px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.metrics__item + .metrics__item { box-shadow: inset 1px 0 0 rgba(0,0,0,.12); }
.metrics__fig { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1.15; text-wrap: balance; }
.metrics__cap { font-size: 14px; line-height: 1.4; color: var(--ink-quiet); }

/* =============================================================================
   cards
   ========================================================================== */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ground);
  display: flex; flex-direction: column;
}
.card--mint { background: var(--mint); padding: 40px; }
blockquote.d4 { font-size: 27px; line-height: 1.32; }

/* WCAG 2.5.8. Standalone links in lists and breadcrumbs, as opposed to links
   inside a sentence, have to clear a 24px target. */
.crumb, .card--mint ul a,
.card--mint .lead a { display: inline-block; padding: 4px 0; min-height: 24px; }

input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--anchor); }

/* 1.4.11 non-text contrast: a field has to have a visible boundary. rgba(23,33,54,.45)
   measures about 3.6:1 against both the mint fill and the white page. */
.field {
  font: inherit; padding: 14px 16px; border: 0; border-radius: var(--r-chip);
  background: var(--mint); min-height: 48px; width: 100%;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(23,33,54,.45);
  transition: box-shadow .16s ease;
}
.field:hover { box-shadow: inset 0 0 0 1.5px rgba(23,33,54,.7); }
.field:focus { box-shadow: inset 0 0 0 2px var(--anchor); }
.card--pad  { padding: 28px; }

/* the notched photo card: a photograph whose label sits in a cut-out notch at the bottom corner. The notch is
   built with a radial mask rather than an overlaid box, so it is part of the card and not a sticker on top
   of it. */
.shot {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--mint);
  aspect-ratio: 4 / 3;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot__label { max-width: 82%; }
.shot { text-decoration: none; color: inherit; display: block; }


/* a card with no photograph: it carries a question and a button instead */
.grid--mosaic { grid-template-columns: repeat(3, 1fr); }
.grid--mosaic .shot--ask { grid-column: 2; grid-row: 2 / span 2; aspect-ratio: auto; }

.shot--ask { background: var(--mint); display: grid; place-items: center; padding: 28px; }
.shot__ask { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.shot__ask .eyebrow { margin: 0; }
.shot__ask .d4 { font-size: 24px; }
.shot__ask .meta { color: var(--ink-quiet); line-height: 1.45; }
.shot__ask .btn { margin-top: 10px; justify-self: center; }


/* step card: an aqua card that holds only the line drawing (25px corners, 384x300 at desktop) with the step
   label cut into its corner as a notch. The title and text sit below the card on the page ground, 24px
   under it and 5px in from its edge. */
.step { display: flex; flex-direction: column; }
.step__art {
  position: relative; overflow: hidden;
  background: var(--mint);
  border-radius: var(--r-lg);
  aspect-ratio: 384 / 300;
  display: grid; place-items: center;
  color: var(--anchor);
}
.step__art svg { width: 78px; height: 78px; }
.step__t { font-family: var(--body); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.4px; margin: 24px 5px 16px; }
.step__d { font-size: 18px; line-height: 1.4; color: var(--ink); margin: 0 5px; }

/* service card */
.svc {
  border-radius: var(--r-card);
  background: var(--ground);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease-rise), box-shadow .28s ease;
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 18px 24px rgba(0,0,0,.12); }
.svc__art { aspect-ratio: 3 / 2; background: var(--mint); overflow: hidden; }
.svc__art img { width: 100%; height: 100%; object-fit: cover; }
.svc__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc__t { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.svc__d { font-size: 18px; line-height: 1.4; color: var(--ink); margin: 0; flex: 1; }
.svc__go { font-size: 16px; font-weight: 500; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 0; align-self: flex-start; }

/* a small label badge on a service card (not used by the current pages) */
.draft {
  display: inline-flex; align-items: center; gap: 6px;
  background: #FFF6D6; color: #5A4300;
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  align-self: flex-start;
}

/* =============================================================================
   accordion
   ========================================================================== */
/* The questions block: a tall tinted card on the left (the flower mark at the top, a title and a sentence at
   the bottom, a notched button cut into its corner), and the eyebrow, heading and question rows on the right. */
.faq { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 56px; align-items: stretch; }
.faq__card {
  position: relative; overflow: hidden;
  background: var(--mint); border-radius: var(--r-card);
  padding: 40px 40px 104px;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.faq__mark { display: block; width: 56px; }
.faq__mark svg { width: 56px; height: auto; }
.faq__cardt { font-family: var(--display); font-size: 32px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.faq__cardd { font-size: 18px; line-height: 1.4; color: var(--ink-quiet); margin: 0; }
.faq__head { margin-bottom: 28px; }
.faq__list { display: flex; flex-direction: column; }
.faq__row { border-radius: 0; }
.faq__q {
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 22px 8px;
  font-family: var(--body); font-size: 18px; font-weight: 500; letter-spacing: -.18px;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
  min-height: 48px;
}

/* the plus sign sits in a small tinted square at the end of the row */
.faq__ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; background: var(--mint); color: var(--anchor); display: grid; place-items: center; transition: transform .28s var(--ease-rise); }
.faq__q[aria-expanded="true"] .faq__ico { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease-rise); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a[hidden] { display: none; }
.faq__a p { padding: 16px 8px 24px; color: var(--ink); font-size: 18px; line-height: 1.5; }

/* =============================================================================
   footer
   ========================================================================== */
.site-foot {
  background: var(--anchor);
  color: var(--ink-invert);
  border-radius: var(--r-shell);
  margin-bottom: var(--gutter);
  position: relative;
  overflow: hidden;
}
.site-foot__blobs { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.site-foot__inner { position: relative; max-width: var(--content); margin: 0 auto; padding: 100px var(--pad-x) 60px; }

.foot-cta { text-align: center; }
.foot-cta__lead { color: var(--ink-soft); max-width: 44ch; margin: 16px auto 0; }
.foot-cta__mark {
  width: 108px; height: 108px; border-radius: var(--r-lg);
  background: var(--ground);
  display: grid; place-items: center;
  margin: 0 auto 26px;
  box-shadow: var(--shadow-float);
}
.foot-cta__mark svg { width: 66px; height: auto; }
.foot-cta .d2 { color: var(--ink-invert); }
.foot-cta .btn { margin-top: 30px; }

.foot-rule { height: 1px; background: rgba(255,255,255,.2); margin: 64px 0 56px; }

.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) 1.2fr; gap: 32px; }
.foot-col h3 { font-size: 16px; font-weight: 400; color: var(--ink-mute); margin: 0 0 18px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.foot-col a { font-size: 16px; text-decoration: none; color: var(--ink-invert); display: inline-block; padding: 3px 0; min-height: 24px; }
.foot-col a:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }

.foot-base {
  margin-top: 56px; padding-top: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 14px; color: var(--ink-mute);
}
.foot-base a { color: var(--ink-soft); display: inline-block; padding: 4px 0; min-height: 24px; }

/* =============================================================================
   motion. The entrance animation: opacity from 0.001 to 1 with a rise, on a spring with a bounce of .2 over
   1.5s, with siblings staggered .1s apart. The distance travelled depends on the element's weight.
   ========================================================================== */
[data-rise] {
  opacity: .001;
  transform: translateY(var(--rise, 25px));
  transition:
    opacity var(--dur-rise) var(--ease-rise) var(--rise-delay, .3s),
    transform var(--dur-rise) var(--ease-rise) var(--rise-delay, .3s);
  will-change: opacity, transform;
}
[data-rise="text"]  { --rise: 10px; }
[data-rise="step"]  { --rise: 40px; }
[data-rise="large"] { --rise: 50px; }
[data-rise].is-in { opacity: 1; transform: translateY(0); }

[data-pop] {
  opacity: .001;
  transform: scale(.7) rotate(var(--rot, -10deg));
  transition:
    opacity var(--dur-rise) var(--ease-rise) var(--rise-delay, .3s),
    transform var(--dur-rise) var(--ease-rise) var(--rise-delay, .3s);
}
[data-pop].is-in { opacity: 1; transform: scale(1) rotate(0deg); }

/* scroll-linked word reveal in the dark band */
.reveal-words span {
  color: var(--ink-ghost);
  transition: color .45s ease;
}
.reveal-words span.lit { color: var(--ink-invert); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-rise], [data-pop] { opacity: 1 !important; transform: none !important; }
  .reveal-words span { color: var(--ink-invert); }
  .hero__media img { animation: none; transform: none; }
}

/* =============================================================================
   responsive. The blocks do not overlap. The menu's breakpoint is written once (--bp-nav below) and read by
   assets/js/site.js, so the stylesheet and the script always use the same number.
   ========================================================================== */
@media (max-width: 1180px) {
  :root { --pad-x: 40px; --content: 100%; }
  .hero__card { display: none; }
}

@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--mosaic { grid-template-columns: repeat(2, 1fr); }
  .grid--mosaic .shot--ask { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .faq { grid-template-columns: 1fr; gap: 28px; }
  .faq__card { min-height: 0; padding: 32px 32px 96px; order: 2; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .d1 { font-size: 42px; }
  .d2 { font-size: 34px; }
  .d3 { font-size: 30px; }
  .d4 { font-size: 26px; }
}

/* Between the menu-button breakpoint and a full laptop width the logo block is wide, and the header button was
   pushed off the screen at 1120 to 1160px. Tighten the bar here rather than move the breakpoint up onto
   1280px laptops. */
@media (min-width: 1101px) and (max-width: 1320px) {
  .head { gap: 12px; }
  .nav a { padding: 10px 10px; }
  .head-cta { font-size: 16px; padding: 12px 18px; min-height: 44px; }
  .nav { gap: 6px; }
  .brand__lockup .wordmark { height: 18px; }
  .brand__sub { font-size: 8px; letter-spacing: .03em; }
}

/* --- the mobile menu breakpoint. This is the one number: assets/js/site.js reads it from this same custom
   property, so the two cannot drift. --- */
:root { --bp-nav: 1100px; }

@media (max-width: 1100px) {
  .head { top: 15px; padding: 0 15px; }
  .burger { display: grid; }

  /* the whole bar collapses into one translucent chip */
  .head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    left: 15px; right: 15px;
    padding: 8px 8px 8px 10px;
    /* the desktop flex gap becomes a grid row gap here. A 16px gap before each of the two collapsed menu rows left
       32px of dead space under the logo on every closed bar, so it is 0; the open menu sets its own spacing. */
    row-gap: 0; column-gap: 12px;
  }
  /* pin both header controls to row 1. Without explicit placement the burger
     auto-flowed to a fourth row and sat at the BOTTOM LEFT of the open panel. */
  .brand  { background: transparent; box-shadow: none; padding: 0; grid-column: 1; grid-row: 1;
            -webkit-backdrop-filter: none; backdrop-filter: none; }
  .burger { grid-column: 2; grid-row: 1; }
  .burger:hover { background: rgba(255,255,255,.10); }
  .nav      { grid-row: 2; }
  .head-ring { display: contents; }
  .head-cta { grid-row: 3; }

  /* The menu OPENS rather than appearing: the panel's height, the links (staggered)
     and the CTA all run on the site's spring. visibility keeps the closed links out
     of the tab order, and flips instantly on open but only after the close. */
  .head-cta {
    grid-column: 1 / -1;
    display: inline-flex;
    justify-content: center;
    width: 100%;
    max-height: 0; min-height: 0; padding-block: 0; margin-top: 0;
    opacity: 0; visibility: hidden; overflow: hidden;
    transition: max-height .55s var(--ease-rise), padding .55s var(--ease-rise), margin .55s var(--ease-rise),
                opacity .3s ease, visibility 0s linear .55s;
  }
  .head.is-open .head-cta {
    max-height: 72px; min-height: 48px; padding-block: 14px; margin-top: 8px;
    opacity: 1; visibility: visible;
    transition-delay: 0s, 0s, 0s, .18s, 0s;
  }

  .nav {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 2px;
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    transition: max-height .55s var(--ease-rise), padding .55s var(--ease-rise),
                opacity .25s ease, visibility 0s linear .55s;
  }
  .nav.is-open {
    max-height: 480px; padding: 10px 0 4px; opacity: 1; visibility: visible;
    transition-delay: 0s;
  }
  .nav.is-open a { animation: navIn .5s var(--ease-rise) both; }
  .nav.is-open a:nth-child(2) { animation-delay: .04s; }
  .nav.is-open a:nth-child(3) { animation-delay: .08s; }
  .nav.is-open a:nth-child(4) { animation-delay: .12s; }
  .nav.is-open a:nth-child(5) { animation-delay: .16s; }
  .nav.is-open a:nth-child(6) { animation-delay: .20s; }
  .nav.is-open a:nth-child(7) { animation-delay: .24s; }
  /* landscape phones: the panel must be able to scroll to its own CTA */
  .head.is-open {
    max-height: calc(100dvh - 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav a { padding: 14px 12px; color: var(--ink-invert); }
  .nav a:hover { background: rgba(255,255,255,.10); }
  .nav a[aria-current="page"] { background: rgba(255,255,255,.14); }
  .nav .btn { margin-top: 8px; width: 100%; }
}

@media (max-width: 720px) {
  :root { --pad-x: 25px; --gap: 16px; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .grid--mosaic { grid-template-columns: 1fr; }
  .grid--mosaic .shot--ask { grid-column: auto; grid-row: auto; min-height: 240px; }
  .band > .inner,
  .band--dark > .inner,
  .band--close > .inner { padding: 40px var(--pad-x); }
  /* clear the fixed header on inner pages, which have no hero to sit under it */
  main > .shell > .band:first-child > .inner { padding-top: 116px; }
  .band--tight > .inner { padding: 25px var(--pad-x); }
  .hero { min-height: 765px; }
  .hero__inner { padding: 60px var(--pad-x) 25px; }
  .site-foot__inner { padding: 60px var(--pad-x) 25px; }
  .metrics { grid-template-columns: 1fr; padding: 25px var(--pad-x); gap: 18px; }
  .metrics__item { padding: 0; }
  .metrics__item + .metrics__item { box-shadow: inset 0 1px 0 rgba(0,0,0,.12); padding-top: 18px; }
  .sec-head { margin-bottom: 32px; }
  .card--mint { padding: 25px; }
  .faq__card { padding: 25px 25px 90px; gap: 24px; }
  /* two columns, not one: four stacked link groups made the phone footer twice the
     length it needs to be */
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  /* phones: the tinted card stays (it carries the notch) but is a short banner, not a tall empty panel */
  .step__art { aspect-ratio: auto; height: 150px; }
  .step__art svg { width: 60px; height: 60px; }
  .step__t { margin: 18px 5px 10px; }
  .foot-rule { margin: 40px 0 36px; }
}

@media (max-width: 560px) {
  .d1 { font-size: 34px; }
  .d2 { font-size: 28px; }
  .d3 { font-size: 24px; }
  .d4 { font-size: 22px; }
  body { font-size: 17px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

@media (max-width: 400px) {
  :root { --pad-x: 18px; --gutter: 6px; }
  .brand__lockup .wordmark { height: 17px; }
  .brand__sub { font-size: 8.5px; letter-spacing: .04em; }
  .head { left: 10px; right: 10px; padding: 8px; }
}

/* =============================================================================
   Portrait card: a framed portrait photograph, shown at no more than 380px wide.
   ========================================================================== */
.about-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; }
.portrait {
  position: relative; margin: 0; justify-self: center;
  width: 100%; max-width: 380px; aspect-ratio: 760 / 917;
  border-radius: var(--r-card); overflow: hidden;
  background: #EDEDED; box-shadow: var(--shadow-float);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================================
   Contact. The left column says what happens next and gives the phone number a
   real card; the form is one white card in three short labelled groups, so it
   reads as a sequence without becoming a click-through wizard.
   ========================================================================== */
.contact > .inner { padding-top: 140px; }
/* overflow:hidden makes the band a scroll container, which silently disables
   position:sticky inside it. clip rounds the corners the same way without that. */
.band.contact { overflow: clip; }
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: stretch; }
.contact__form { align-self: start; }
/* only the phone card sticks: the whole column is taller than a laptop screen, so
   sticking it slid the top under the header and left the lower half empty */
.call { position: sticky; top: 120px; }
.contact__lead { margin-top: 18px; max-width: 40ch; }

.next__h {
  font-family: var(--body); font-size: 13px; font-weight: 600; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .06em; color: var(--teal);
  margin: 40px 0 16px;
}
.next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.next li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; position: relative; padding-bottom: 20px; }
.next li:not(:last-child)::before {
  content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px;
  width: 2px; background: rgba(23,33,54,.18); border-radius: 2px;
}
.next__n {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--anchor); color: var(--ink-invert);
  display: grid; place-items: center; font-size: 15px; font-weight: 600;
}
.next__t { font-size: 18px; font-weight: 600; margin: 5px 0 4px; }
.next__d { font-size: 16px; line-height: 1.45; color: var(--ink-quiet); margin: 0; }

.call {
  margin-top: 16px; background: var(--anchor); color: var(--ink-invert);
  border-radius: var(--r-card); padding: 28px 30px;
}
.call__k { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mint); margin: 0 0 8px; }
.call__num {
  display: inline-block; font-family: var(--display); font-size: 36px; line-height: 1.15;
  color: var(--ink-invert); text-decoration: none; padding: 2px 0;
}
.call__num:hover { color: var(--mint); }
.call__alt { font-size: 16px; color: var(--ink-soft); margin: 6px 0 0; }
.call__addr { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 18px 0 0; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.call a:not(.call__num) { color: var(--ink-invert); display: inline-block; padding: 2px 0; min-height: 24px; text-underline-offset: 3px; }
.call a:not(.call__num):hover { color: var(--mint); }
.call :focus-visible { outline-color: var(--ground); box-shadow: 0 0 0 6px var(--anchor); }

.contact__form {
  background: var(--ground); border-radius: var(--r-lg);
  padding: 40px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 32px;
}
.fset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fset + .fset { padding-top: 32px; box-shadow: inset 0 1px 0 rgba(23,33,54,.1); }
.fset > legend {
  float: left; width: 100%;
  display: flex; align-items: center; gap: 12px; padding: 0; margin: 0 0 20px;
  font-family: var(--display); font-size: 24px; line-height: 1.2; letter-spacing: -.02em;
}
.fset__n {
  width: 30px; height: 30px; border-radius: var(--r-pill); flex: 0 0 auto;
  background: var(--mint); color: var(--anchor);
  display: grid; place-items: center;
  font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: 0;
}
.fset > legend + * { clear: both; }
.fset__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld--full { grid-column: 1 / -1; }
.fld > label { font-size: 16px; font-weight: 500; }
.fld__req, .fld__opt { font-size: 13px; font-weight: 400; color: var(--ink-quiet); }
.fld__help { font-size: 13px; line-height: 1.4; color: var(--ink-quiet); margin: 0; }
.contact__form .field { background: #FBFDFA; }
.contact__form textarea.field { min-height: 132px; resize: vertical; line-height: 1.45; }

.sub { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.fset__grid + .sub { margin: 22px 0 0; }
.sub__l { font-size: 16px; font-weight: 500; padding: 0; margin: 0 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill); cursor: pointer;
  font-size: 15px; line-height: 1.25;
  box-shadow: inset 0 0 0 1.5px rgba(23,33,54,.3);
  transition: background .16s ease, box-shadow .16s ease;
}
.chip:hover { background: var(--mint); }
.chip:has(input:checked) { background: var(--mint); box-shadow: inset 0 0 0 2px var(--anchor); }
.chip input { margin: 0; flex: 0 0 auto; width: 18px; height: 18px; }

.contact__send { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.contact__send .btn { min-width: 220px; }
.contact__send .micro { flex: 1 1 220px; line-height: 1.4; }
.contact__done { background: var(--mint); border-radius: var(--r-md); padding: 20px 22px; font-size: 16px; line-height: 1.5; }

@media (max-width: 1100px) {
  .contact > .inner { padding-top: 120px; }
}
@media (max-width: 1000px) {
  .about-hero { grid-template-columns: 1fr 300px; gap: 36px; }
  .contact__grid { grid-template-columns: 1fr; gap: 36px; }
  .call { position: static; }
}
@media (max-width: 720px) {
  .about-hero { grid-template-columns: 1fr; }
  .portrait { max-width: 280px; justify-self: start; }
  .contact > .inner { padding-top: 116px; }
  .contact__form { padding: 24px 20px; gap: 28px; border-radius: var(--r-card); }
  .fset__grid { grid-template-columns: 1fr; }
  .fset > legend { font-size: 21px; }
  .call { padding: 24px; }
  .call__num { font-size: 30px; }
  .contact__send .btn { width: 100%; }
}

/* =============================================================================
   Action colour and form tokens. One action colour wherever a visitor is asked to act (the main button is
   set to teal at the end of the file).
   ========================================================================== */
:root {
  --cta: #161616;  --cta-ink: #FFFFFF;  --cta-hi: #000000;   /* the dark pill button colour */
  --line: color-mix(in srgb, var(--anchor) 45%, transparent);
  --line-soft: color-mix(in srgb, var(--anchor) 14%, transparent);
  --field-bg: #FFFFFF;
}
.field { box-shadow: inset 0 0 0 1.5px var(--line); }
.field:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--anchor) 70%, transparent); }
.contact__form .field { background: var(--field-bg); }
.next li:not(:last-child)::before { background: color-mix(in srgb, var(--anchor) 18%, transparent); }
.fset + .fset { box-shadow: inset 0 1px 0 var(--line-soft); }
.chip { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--anchor) 30%, transparent); }


/* the footer logo mark sits directly on the dark teal, with no white tile */
.foot-cta__mark { background: transparent; box-shadow: none; width: auto; height: auto; }
.foot-cta__mark svg { width: 92px; height: auto; }

/* =============================================================================
   THE HEADER GLASS. The menu bar grows to take in the logo and the button, in the same dark glass.

   One layer does it. .head__glass spans the whole bar and is CLIPPED to the menu's box while the page sits
   at the top of the hero (assets/js/site.js measures that box into --gt/--gr/--gb/--gl). Leave the top and
   the clip opens out to the full bar on the site's own spring, so the chip visibly becomes the bar and is
   never swapped for another element. Nothing else moves: the logo and button are already in place and the
   glass arrives under them.
   ========================================================================== */
.head__glass {
  position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0;
  left: calc(var(--pad-x) - 12px); right: calc(var(--pad-x) - 12px);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-radius: 16px;
  clip-path: inset(0px 0px 0px 0px round 16px);
  transition: clip-path .85s var(--ease-rise);
}
.head.is-top .head__glass {
  clip-path: inset(var(--gt, 0px) var(--gr, 0px) var(--gb, 0px) var(--gl, 0px) round 10px);
}
/* first paint and resizes are placed, not animated */
.head.no-anim .head__glass { transition: none; }

@keyframes navIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* the burger's three lines fold into an X on the same spring */
.burger__lines { position: relative; display: block; width: 20px; height: 14px; }
.burger__lines span {
  position: absolute; left: 0; height: 2px; width: 100%;
  border-radius: 2px; background: currentColor;
  transition: transform .5s var(--ease-rise), opacity .2s ease, width .35s ease;
}
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 6px; }
.burger__lines span:nth-child(3) { top: 12px; width: 70%; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(3) { width: 100%; transform: translateY(-6px) rotate(-45deg); }

/* phones: one glass bar at all times, the menu opens inside it */
@media (max-width: 1100px) {
  .head__glass { left: 0; right: 0; border-radius: 14px; clip-path: inset(0px 0px 0px 0px round 14px); }
  .head.is-top .head__glass { clip-path: inset(0px 0px 0px 0px round 14px); }
  /* an OPEN menu must be read, not seen through. Firefox rendered the hero's own
     headline through the 86% glass behind the links, so the panel firms up to fully
     solid as it opens, on the same timing as the panel itself. */
  .head__glass { transition: clip-path .85s var(--ease-rise), background-color .35s ease; }
  .head.is-open .head__glass { background-color: rgb(3,44,52); }
}

/* =============================================================================
   Detail refinements. The sizes, radii and spacing below refine the rules above; where a rule is repeated,
   the later one wins.
   ========================================================================== */

/* ---- THE NOTCH. A cut-out tab at the bottom corner of a card, used on service labels, step numbers, the
   questions button, the testimonial name and the founder's name. A ground-coloured tab with a 20px radius on
   its inner corner and padding 15/20, plus two 20px CONCAVE fillets so the card edge curves into it. The
   fillets are the tab's own ::before and ::after. --notch-bg must be the colour AROUND the card, or the
   fillets show. ---------- */
.notch {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  background: var(--notch-bg, var(--ground));
  border-radius: 20px 0 0 0;
  padding: 15px 20px;
  font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.36px;
  color: var(--ink);
  text-decoration: none;
}
.notch::before, .notch::after {
  content: ""; position: absolute; width: 20px; height: 20px; pointer-events: none;
  background: radial-gradient(circle at 0 0, transparent 19.5px, var(--notch-bg, var(--ground)) 20px);
}
.notch::before { right: 0; bottom: 100%; }   /* above the tab, on the card's right edge */
.notch::after  { right: 100%; bottom: 0; }   /* left of the tab, on the card's bottom edge */
.band--mint { --notch-bg: var(--mint); }

/* the notched button: a 20px label and a dark circle holding a chevron */
.notch--btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 22px;
  font-size: 20px; letter-spacing: -.4px;
  min-height: 56px;
}
.notch__go {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--anchor); color: var(--ink-invert);
  display: grid; place-items: center; flex: 0 0 auto;
  transition: transform .28s var(--ease-rise), background .2s ease;
}
.notch__go svg { width: 16px; height: 16px; }
.notch--btn:hover .notch__go { transform: translateX(3px); background: var(--cta); }
.notch--btn:focus-visible { outline-offset: -4px; box-shadow: none; }

/* ---- step grid of four --------------------------------------------------- */


/* ---- the photo band on the Home page: a full photograph inside the 8px frame with the heading above it, and
   glass cards on a dark ground: two stacked on the left and the estimate card, tall, on the right. ------- */
.why { position: relative; background: #04323B; color: var(--ink-invert); isolation: isolate; }
.why__media { position: absolute; inset: 0; z-index: -2; }
.why__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.why__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(10,15,27,.28) 0%, rgba(10,15,27,0) 26%, rgba(10,15,27,0) 48%, rgba(10,15,27,.55) 100%);
}
.why__inner { max-width: calc(var(--content) + var(--pad-x) * 2); margin: 0 auto; padding: 120px var(--pad-x) 60px; }
.why__head { text-align: center; max-width: 760px; margin: 0 auto 330px; }
.why__head .eyebrow { color: var(--ink-invert); opacity: .9; }
.why__head .d2 { color: var(--ink-invert); }
.why__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  max-width: 940px; margin: 0 auto;
  grid-template-areas: "a b" "c b";
}
.why__grid > :nth-child(1) { grid-area: a; }
.why__grid > :nth-child(2) { grid-area: b; }
.why__grid > :nth-child(3) { grid-area: c; }
.why__card {
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(8,22,34,.62);
  -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
  border-radius: var(--r-card);
  padding: 24px 24px 26px;
  color: var(--ink-invert); text-decoration: none;
}
.why__t { font-family: var(--body); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.4px; margin: 0; display: block; }
.why__d { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.84); margin: 0; display: block; }
.why__chip {
  align-self: center; margin-top: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--ground); color: var(--anchor);
  border-radius: var(--r-md); padding: 14px 22px 14px;
  box-shadow: var(--shadow-card);
}
.why__av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.why__who { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.why__name { font-size: 16px; line-height: 1.2; letter-spacing: -.32px; }
.why__role { font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--anchor) 80%, transparent); }
.why__link { color: var(--ink-invert); font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 0; margin-top: auto; align-self: flex-start; }
.why__link svg { width: 16px; height: 16px; }

/* the estimate card: a small example of the pricing calculator's form, drawn with the calculator's own labels */
.why__card--form { transition: transform .28s var(--ease-rise); }
.why__card--form:hover { transform: translateY(-3px); }
.wf {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--ground); color: var(--anchor);
  border-radius: var(--r-md); padding: 18px;
  box-shadow: var(--shadow-card);
}
.wf__h { font-size: 15px; font-weight: 500; }
.wf__s { font-size: 13px; color: color-mix(in srgb, var(--anchor) 72%, transparent); margin-top: -4px; }
.wf__row { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.wf__k { font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--anchor) 80%, transparent); }
.wf__v { font-size: 14px; background: var(--mint); border-radius: var(--r-sm); padding: 10px 12px; }
.wf__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf__chip { font-size: 12px; padding: 7px 10px; border-radius: var(--r-pill); background: var(--mint); }
.wf__chip.is-on { background: var(--anchor); color: var(--ink-invert); }
.wf__btn { margin-top: 6px; align-self: flex-start; font-size: 13px; font-weight: 500; background: var(--cta); color: var(--cta-ink); border-radius: var(--r-sm); padding: 9px 14px; }

/* ---- THE FOUNDER. A row of tall portrait cards with names in notches: the founder's portrait and tinted
   cards in the same shape. ---------- */
.founder__row { display: grid; grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.fcard { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-card); aspect-ratio: 370 / 500; }
.fcard--photo { background: #EDE7DF; aspect-ratio: auto; }
.fcard--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.fcard--fact { background: var(--mint); padding: 28px 24px 90px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; }
/* a span, not a p: the build's widow control binds the last two words of every p, which made a two-word
   figure one unbreakable run wider than its card */
.fcard__fig { display: block; font-family: var(--display); font-size: 38px; line-height: 1.2; letter-spacing: -.76px; margin: 0; text-wrap: balance; }
.fcard__cap { font-size: 18px; line-height: 1.4; color: rgba(0,0,0,.8); margin: 0; }
.fcard__tab--who { display: flex; flex-direction: column; gap: 2px; max-width: 86%; }
.fcard__name { font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
.fcard__role { font-size: 18px; font-weight: 400; letter-spacing: -.18px; color: var(--ink-quiet); }
.founder__more { margin-top: 44px; }

/* ---- TESTIMONIAL. Heading on the left, source note on the right; a photo card
   beside a tint card with a large display line, the quote, and the name in a notch. */
.testi__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.testi__head .d2 { text-align: left; }
.testi__src { max-width: 30ch; text-align: right; }
.testi__row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); }
.testi__photo { border-radius: var(--r-card); overflow: hidden; min-height: 460px; }
.testi__photo img { width: 100%; height: 100%; object-fit: cover; }
.testi__card {
  position: relative; overflow: hidden; margin: 0;
  background: var(--mint); border-radius: var(--r-card);
  padding: 32px 32px 110px;
  display: flex; flex-direction: column; gap: 20px;
}
.testi__fig { font-family: var(--display); font-size: 42px; line-height: 1.2; letter-spacing: -.84px; margin: 0; text-wrap: balance; }
.testi__q { margin: 0; font-size: 18px; line-height: 1.4; color: var(--ink); }
.testi__who { display: flex; flex-direction: column; gap: 2px; }
.testi__name { font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
.testi__place { font-size: 18px; font-weight: 400; letter-spacing: -.18px; color: var(--ink-quiet); }

/* ---- PHOTO HERO: the opener of the Law Firms page, with a facts card ----------------------- */
.visit {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-shell); margin-bottom: var(--gutter);
  min-height: 860px; display: flex; background: var(--anchor);
}
.visit__media { position: absolute; inset: 0; z-index: -2; }
.visit__media img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom var(--dur-zoom) var(--ease-zoom) both; }
.visit__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8,11,20,.86) 0%, rgba(8,11,20,.55) 34%, rgba(8,11,20,.10) 62%, rgba(8,11,20,.25) 100%),
    linear-gradient(to right, rgba(8,11,20,.45) 0%, rgba(8,11,20,0) 55%);
}
.visit__inner {
  width: 100%; max-width: calc(var(--content) + var(--pad-x) * 2); margin: 0 auto;
  padding: 140px var(--pad-x) 60px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: end;
  color: var(--ink-invert);
}
.visit .d1 { color: var(--ink-invert); max-width: 13ch; }
.visit__lead { color: var(--ink-soft); max-width: 44ch; margin-top: 20px; }
.visit__meta { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 44px; }
.visit__k { font-size: 16px; line-height: 1.2; color: rgba(255,255,255,.8); margin: 0 0 8px; }
.visit__v { font-size: 20px; font-weight: 500; letter-spacing: -.4px; color: var(--ink-invert); text-decoration: none; display: inline-block; min-height: 24px; }
.visit__v:hover { text-decoration: underline; text-underline-offset: 4px; }
.visit__card {
  background: rgba(8,22,34,.66);
  -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
  border-radius: var(--r-card); padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.visit__ct { font-family: var(--body); font-size: 20px; font-weight: 500; letter-spacing: -.4px; margin: 0; }
.visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.vf { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vf--full { grid-column: 1 / -1; }
.vf dt { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.86); }
.vf dd { margin: 0; font-size: 15px; line-height: 1.35; background: rgba(255,255,255,.10); border-radius: var(--r-sm); padding: 11px 14px; }
.visit__btn { width: 100%; }

/* ---- LOCATION: a photograph beside a list of details ------------------------------------- */
.locate__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.locate__photo { position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 620 / 400; }
.locate__photo img { width: 100%; height: 100%; object-fit: cover; }
.locate__copy .d2 { max-width: 14ch; }
.locate__list { margin: 44px 0 0; display: flex; flex-direction: column; gap: 22px; }
.locate__list dt { font-size: 20px; font-weight: 500; letter-spacing: -.4px; margin: 0 0 8px; }
.locate__list dd { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-quiet); }
.locate__list a { color: inherit; display: inline-block; min-height: 24px; }

@media (max-width: 1180px) {
  .why__head { margin-bottom: 260px; }
  .visit__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 36px; }
  .locate__grid { gap: 48px; }
}
@media (max-width: 1000px) {
  .founder__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testi__row { grid-template-columns: 1fr; }
  .testi__photo { min-height: 0; aspect-ratio: 16 / 10; }
  .visit__inner { grid-template-columns: 1fr; align-items: start; padding-top: 150px; }
  /* stacked, the text sits over the busy middle of the photograph, not its dark foot */
  .visit__scrim { background: linear-gradient(to bottom, rgba(8,11,20,.62) 0%, rgba(8,11,20,.74) 45%, rgba(8,11,20,.86) 100%); }
  .visit__card { max-width: 520px; }
  .locate__grid { grid-template-columns: 1fr; }
  .grid--4.park { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .why__inner { padding: 60px var(--pad-x) 25px; }
  .why__head { margin-bottom: 200px; }
  .why__grid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; }
  .founder__row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fcard--fact { padding: 18px 16px 76px; }
  .fcard__fig { font-size: 26px; }
  .fcard__cap { font-size: 15px; }
  .fcard__name { font-size: 16px; }
  .fcard__role { font-size: 14px; }
  .testi__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .testi__src { text-align: left; }
  .testi__card { padding: 24px 22px 104px; }
  .testi__fig { font-size: 30px; }
  .visit { min-height: 0; }
  .visit__inner { padding: 120px var(--pad-x) 25px; gap: 28px; }
  .visit__meta { gap: 24px; margin-top: 28px; }
  .grid--4.park { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .founder__row { grid-template-columns: 1fr; }
  .fcard { aspect-ratio: auto; min-height: 220px; }
  .fcard--photo { aspect-ratio: 370 / 500; }
  .visit__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .visit__media img { animation: none; }
}

/* ---- THE HEADER, desktop. Three SEPARATE chips that never change on scroll: a logo chip 50px tall (radius
   10, padding 6/10/6/6), a menu chip 55px tall (radius 12, padding 6/14) and the button in its OWN chip ring
   (radius 12, padding 6, 8px from the menu chip) with the button inside at radius 8. The chips are a slate
   teal rather than black, and white text on it stays 6.2:1 over a white page. The links are full white: at 60%
   white they measure 2.6:1 and fail WCAG 1.4.3 AA. On desktop the glass that grows from the chip into a
   full-width bar is switched off. --------- */
/* a dark slate teal for the chips, on purpose: the dark teal itself vanished on the dark teal bands. White on
   it over a white page: 6.2:1. */
:root { --chip-glass: rgba(3,44,52,.72); }
@media (min-width: 1101px) {
  /* the chips line up with the 1200px content column */
  .head { gap: 8px; padding-inline: max(var(--pad-x), calc((100% - 1200px) / 2)); }
  .head__glass { display: none; }
  .brand, .nav, .head-ring {
    background: var(--chip-glass);
    -webkit-backdrop-filter: blur(5px) saturate(120%); backdrop-filter: blur(5px) saturate(120%);
  }
  .brand { height: 50px; border-radius: 10px; padding: 6px 14px 6px 6px; gap: 10px; }
  .nav { margin-left: auto; height: 55px; border-radius: 12px; padding: 6px 14px; gap: 14px; }
  .nav a { font-size: 16px; font-weight: 500; padding: 12px 6px; }
  .nav a:hover { background: transparent; text-decoration: underline; text-underline-offset: 5px; }
  .nav a[aria-current="page"] { background: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .head-ring { display: inline-flex; height: 55px; border-radius: 12px; padding: 6px; }
  .head-ring .head-cta { border-radius: 8px; padding: 12px 20px; min-height: 43px; font-size: 16px; letter-spacing: -.32px; box-shadow: none; }
  .head-ring .head-cta:hover { transform: none; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  .nav { gap: 4px; padding: 6px 10px; }
  .nav a { font-size: 15px; padding: 12px 5px; }
  .head-ring .head-cta { padding: 12px 14px; font-size: 15px; }
  .brand__sub { font-size: 8px; }
}
/* phones and tablets: the header collapses to one chip bar, in the same dark glass */
@media (max-width: 1100px) {
  .head__glass { background: var(--chip-glass); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
  .brand__tile { width: 38px; height: 38px; }
}


/* =============================================================================
   More detail refinements: heading entrance, hero, metrics, steps, questions, testimonial, footer,
   services and contact.
   ========================================================================== */

/* ---- headings enter word by word: 15px rise out of a 10px blur, .06s apart ---- */
.words .w { display: inline-block; opacity: .001; transform: translateY(15px); filter: blur(10px);
  transition: opacity .9s var(--ease-rise), transform .9s var(--ease-rise), filter .9s ease;
  transition-delay: calc(.2s + var(--i, 0) * .06s); }
.words.is-in .w { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .words .w { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ---- hero: the top line is an icon, a 1x15 rule and 16px medium text with no pill, and the card is a lone
   image with its caption beneath ---- */
.rating { gap: 12px; margin-bottom: 20px; color: var(--ink-invert); }
.rating__ico svg { width: 18px; height: 18px; display: block; color: var(--sun); }
.rating__rule { width: 1px; height: 15px; background: rgba(255,255,255,.5); }
.rating__text { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0;
  font-size: 16px; font-weight: 500; letter-spacing: -.32px; text-transform: none; }
.hero__card { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; overflow: visible; width: 267px; }
.hero__cardimg { display: block; position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.hero__cardimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 23%, rgba(0,0,0,.5)); }
.hero__card p { padding: 12px 0 0; color: var(--ink-soft); }

/* ---- metrics: a 50px figure BESIDE a 14px label, split by solid 53px rules ---- */
.metrics__item { flex-direction: row; align-items: flex-start; gap: 16px; padding: 0 36px; }
.metrics__item + .metrics__item { box-shadow: none; position: relative; }
.metrics__item + .metrics__item::before { content: ""; position: absolute; left: 0; top: 6px; width: 1px; height: 53px; background: var(--anchor); }
.metrics__fig { font-size: 50px; line-height: 1.2; white-space: nowrap; }
.metrics__cap { max-width: 150px; margin-top: 10px; color: var(--ink); }
/* the middle figure is a range, wider than the others, so that column takes the extra width rather than
   crushing its label to one word a line */
.metrics { grid-template-columns: 1fr 1.75fr 1fr; }
.metrics__cap { flex: 1 1 auto; min-width: 130px; }
.band--mint .next__n { background: var(--ground); }

/* ---- services centre card: the mark on top, a 32px heading, the standard light button ---- */
.shot__askmark { display: block; margin: 0 auto 6px; }
.shot__askmark svg { width: 56px; height: auto; }
.shot__ask .d4 { font-size: 32px; }
.shot__ask .btn { box-shadow: var(--shadow-chip); }

/* ---- steps: each tinted card carries its own soft gradient ---- */
.step:nth-child(3n+1) .step__art { background: linear-gradient(124deg, var(--paper-2) 0%, var(--mint) 100%); }
.step:nth-child(3n+2) .step__art { background: linear-gradient(230deg, var(--paper-2) 0%, var(--mint) 100%); }
.step:nth-child(3n+3) .step__art { background: linear-gradient(178deg, var(--paper-2) 0%, var(--mint) 100%); }
.step__art svg { width: 120px; height: 120px; }
.step__art svg :is(path, circle, rect)[stroke] { vector-effect: non-scaling-stroke; stroke-width: 1.8px; }
.step__d { color: var(--ink-quiet); }

/* ---- questions: flush-left rows, a card with 15px corners, and the notch's circle arrow turning and growing
   on hover ---- */
.faq__q { padding: 20px 0; }
.faq__a p { padding: 12px 0 22px; }
.faq__card { border-radius: var(--r-shell); }
.faq__cardd { color: var(--ink-quiet); }
.notch--btn { transition: color .2s ease; }
.notch--btn:hover { color: rgba(0,0,0,.7); }
.notch--btn:hover .notch__go { transform: rotate(-39deg) scale(1.3); background: var(--anchor); }

/* ---- testimonial: the photo with 15px corners, the card with 14px corners, the quote text at 78% black ---- */
.testi__photo { border-radius: var(--r-shell); }
.testi__card { border-radius: 14px; }
.testi__q { color: var(--ink-quiet); }
.testi__place, .fcard__role { color: var(--ink-role); }

/* ---- footer: full width with no corners, a vertical gradient, the mark as a rotated 3% watermark off the left
   edge, a 75px logo tile and one rule at 10% white ---- */
.site-foot { border-radius: 0; margin-bottom: 0; background-color: var(--anchor); background-image: linear-gradient(0deg, #03363F -20%, var(--anchor) 85%); }
.site-foot__mark { position: absolute; left: -135px; top: 50%; width: 768px; transform: translateY(-50%) rotate(8deg); opacity: .03; pointer-events: none; }
.site-foot__mark svg { width: 768px; height: auto; }
.foot-cta__mark { width: 75px; height: 75px; border-radius: var(--r-shell); background: var(--ground); box-shadow: var(--shadow-float); display: grid; place-items: center; margin: 0 auto 26px; }
.foot-cta__mark svg { width: 50px; height: auto; }
.site-foot__inner { max-width: calc(1200px + var(--pad-x) * 2); }
.foot-rule { background: rgba(255,255,255,.1); }
.foot-cols { grid-template-columns: repeat(3, 200px) 1fr; gap: 0 24px; }
.foot-col h3 { font-weight: 500; color: rgba(255,255,255,.5); }
.foot-col a { font-size: 14px; }
.foot-col ul { gap: 10px; }
.foot-base { box-shadow: none; }

/* ---- services index: tile with the title in the notch beside a circle arrow ---- */
.svc { background: none; box-shadow: none; border-radius: 0; overflow: visible; gap: 16px; }
.svc:hover { transform: none; box-shadow: none; }
.svc__tile { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 4 / 3; color: inherit; text-decoration: none; }
.svc__tile img { width: 100%; height: 100%; object-fit: cover; }
.svc__tab { max-width: 92%; gap: 10px; padding: 10px 10px 10px 16px; }
.svc__t { font-family: var(--body); font-size: 16px; font-weight: 500; letter-spacing: -.32px; line-height: 1.25; margin: 0; }
.svc__d { font-size: 16px; line-height: 1.45; color: var(--ink-quiet); margin: 0 5px; }
.svc > .draft { margin: 0 5px; }
.svc--ask .svc__tile { aspect-ratio: auto; height: 100%; min-height: 100%; }
.svc-grid { gap: 40px var(--gap); }

/* ---- portrait and fact pairs: the portrait carries no shadow; facts are labelled pairs ---- */
.portrait { box-shadow: none; background: var(--mint); }
.card--mint { border-radius: var(--r-shell); padding: 30px; }
.pairs { margin: 18px 0 0; display: flex; flex-direction: column; gap: 22px; }
.pairs dt { font-size: 20px; font-weight: 500; letter-spacing: -.4px; margin: 0 0 6px; }
.pairs dd { margin: 0; font-size: 18px; line-height: 1.4; color: var(--ink-quiet); }

/* ---- contact: small controls are filled tiles with 4px to 8px corners rather than pills with outline rings;
   the send button runs full width at 8px corners; no connecting line between steps ---- */
.next li:not(:last-child)::before { display: none; }
.next__n { border-radius: var(--r-sm); background: var(--mint); color: var(--anchor); }
.next__h, .call__k { font-size: 14px; letter-spacing: normal; }
.fset > legend { font-family: var(--body); font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
.fset__n { border-radius: 6px; }
.chip { border-radius: var(--r-sm); background: var(--mint); }
.contact__form { box-shadow: none; border-radius: var(--r-shell); background: var(--ground); outline: 1px solid color-mix(in srgb, var(--anchor) 10%, transparent); }
.contact__send .btn { width: 100%; border-radius: var(--r-sm); }
.call__num { font-size: 32px; }
.draft { border-radius: 6px; }

@media (max-width: 1180px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metrics__item { flex-direction: column; gap: 4px; padding: 0 24px; }
  .metrics__fig { font-size: 40px; white-space: normal; }
  .metrics__cap { margin-top: 0; min-width: 0; }
}
@media (max-width: 1100px) {
}
@media (max-width: 1000px) {
  .grid--4.svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 720px) {
  .metrics { grid-template-columns: 1fr; }   /* restated: the wider-middle rule above comes later in the file */
  .metrics__fig { font-size: 32px; }
  .metrics__item + .metrics__item::before { display: none; }
  .sec-head { margin-bottom: 40px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-foot__mark { width: 520px; left: -160px; }
  .site-foot__mark svg { width: 520px; }
}
@media (max-width: 560px) {
  .d1 { font-size: 32px; line-height: 1.19; }
  .hero__actions { flex-direction: row; }
  .hero__actions .btn { width: auto; font-size: 16px; min-height: 47px; }
  .grid--4.svc-grid { grid-template-columns: 1fr; }
}

/* ---- type weight and size limits: bold is at most 600 here, labels are never below 14px, and the phone bar's
   corner radius is 10px ---- */
strong, b { font-weight: 600; }
.fld__req, .fld__opt, .fld__help { font-size: 14px; }
.chip { font-size: 14px; }
@media (max-width: 1100px) {
  .head__glass { border-radius: 10px; clip-path: inset(0px 0px 0px 0px round 10px); }
  .head.is-top .head__glass { clip-path: inset(0px 0px 0px 0px round 10px); }
}

/* =============================================================================
   Fixes found on the inner pages.
   ========================================================================== */
/* an inner page's H1 uses the 50px display size, not the 42px section size */
h1.d2 { font-size: 50px; line-height: 1.2; letter-spacing: normal; }
/* the step tab is taller than the label tab (89 x 59) */
.step__n { padding: 19px 20px 18px; }
/* the notched button is 66px tall with a 36px circle */
.notch--btn { padding: 15px 15px 15px 22px; min-height: 66px; }
.notch__go { width: 36px; height: 36px; }
/* service-page tiles carry the plain label on one line, like the tiles on the Home page */
.svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-grid .svc--ask { grid-column: span 2; }
.svc__tab.notch--btn { padding: 15px 20px; min-height: 0; gap: 0; }
.svc__tab .notch__go { display: none; }
.svc__t { font-size: 18px; letter-spacing: -.36px; white-space: nowrap; }
/* the label badge stays on the photo tiles */
.shot__draft { position: absolute; left: 12px; top: 12px; z-index: 2; }
/* the facts card and the contact row of the photo hero: sizes */
.visit__card { border-radius: var(--r-shell); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); gap: 16px; }
.vf dt { font-size: 12px; }
.vf dd { font-size: 14px; border-radius: 6px; background: rgba(255,255,255,.08); padding: 11px 12px; }
.visit__btn { min-height: 42px; padding: 10px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; box-shadow: none; }
.visit__lead { font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
.visit__k { font-size: 14px; }
.visit__v { font-size: 16px; letter-spacing: -.32px; }
/* the other-services rows */
.others { margin-top: 14px; }
/* outranks the older .card--mint ul a target rule (inline-block, 4px padding) */
.others .notch__go { width: 28px; height: 28px; }
.others .notch__go svg { width: 14px; height: 14px; }
/* no pill shapes */
/* the radio chips are filled tiles; the radio's own circle is the boundary */
.chip, .chip:has(input:checked) { box-shadow: none; }
.chip:has(input:checked) { background: color-mix(in srgb, var(--anchor) 12%, var(--mint)); }
/* cards separate by fill, never by a hairline */
.contact__form { outline: none; }
.fset + .fset { box-shadow: none; padding-top: 8px; }
.call__addr { box-shadow: none; padding-top: 0; }
/* short card copy wraps evenly */
.faq__cardd, .shot__ask .meta { text-wrap: balance; }
/* the logo tile is a light gradient with a soft bevel, not flat white */
.brand__tile, .foot-cta__mark { background: linear-gradient(180deg, #FFFFFF 0%, #EAE2D3 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(23,33,54,.12), 0 3px 6px rgba(0,0,0,.25); }
@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid .svc--ask { grid-column: auto; }
}
@media (max-width: 720px) {
  h1.d2 { font-size: 34px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc__t { white-space: normal; }
}

/* =============================================================================
   Fixes found on the Home page.
   ========================================================================== */
/* every text notch is 59px tall (padding 19/20/18), not 52 */
.notch { padding: 19px 20px 18px; }
.notch--btn { padding: 15px 15px 15px 22px; }             /* restated: the rule above is later in the file */
.svc__tab.notch--btn { padding: 19px 20px 18px; }
/* the founder row is four equal 3:4 cards on equal gaps, inside the column; the name notch is smaller; card
   corners are 15px */
.founder__row { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.fcard, .fcard--photo { aspect-ratio: 3 / 4; border-radius: var(--r-shell); }
.fcard__tab--who { padding: 10px 15px; }
.fcard__name { font-size: 16px; letter-spacing: -.32px; }
.fcard__role { font-size: 16px; }
/* the fact figure on the display scale */
.fcard__fig { font-size: 32px; letter-spacing: -.64px; }
/* the hero is 884px tall, so its bottom gutter and corners show on a 900px screen */
.hero { min-height: 884px; }
/* the hero card lines up with the 1200px column, not the band's padding */
.hero__card { right: max(var(--pad-x), calc((100% - 1200px) / 2)); }
/* the photo band has its own 25px corners */
.why { border-radius: var(--r-lg); }
/* light smoked glass cards with 15px corners */
.why__grid { max-width: 1000px; gap: 8px; }
.why__card { background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--r-shell); padding: 25px 25px 15px; }
.why__card .why__d { font-size: 18px; line-height: 1.4; color: rgba(255,255,255,.75); }
.why__card--form, .why__card:last-child { padding-bottom: 25px; }
/* the lighter glass needs the photo darker where the cards sit */
.why__scrim { background: linear-gradient(to bottom, rgba(2,30,36,.45) 0%, rgba(2,30,36,.1) 24%, rgba(2,30,36,.12) 44%, rgba(2,30,36,.64) 62%, rgba(2,30,36,.84) 100%); }
/* the inner mini cards are frosted glass with a light edge, not white slabs */
.why__chip, .wf {
  background: linear-gradient(180deg, rgba(255,255,255,.5) -50%, rgba(252,250,245,.8) 73%);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 12px 12px rgba(0,0,0,.1);
}
/* a real colour UNDER the gradient: without it a contrast checker sees through the glass to the dark card
   behind and scores the dark text at 1.2:1 */
.why__chip, .wf { background-color: rgba(252,250,245,.8); }
.why__chip { border-radius: 10px; }
.wf { border-radius: 13px; }
.wf__v, .wf__chip { background: rgba(255,255,255,.7); }
/* no pill shapes */
.wf__chip { border-radius: var(--r-sm); }
/* the card with the question pins the mark to the top and the button to the bottom */
.shot--ask { padding: 40px; place-items: stretch; }
.shot--ask .shot__ask { height: 100%; justify-content: space-between; align-items: center; }
.shot__ask .btn { align-self: stretch; }
/* menu labels about 30px apart, letter spacing -0.32px */
@media (min-width: 1321px) { .nav { gap: 18px; } }
.nav a { letter-spacing: -.32px; }
/* the metric rules are faded to 40% */
.metrics__item + .metrics__item::before { opacity: .4; }
/* nothing below the 14px label size */
.testi__src { font-size: 14px; line-height: 1.35; max-width: 34ch; }
@media (max-width: 1000px) {
  .founder__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hero { min-height: 701px; }                       /* restated for phones: 701px */
  .founder__row { grid-template-columns: 1fr 1fr; }
  .why__card { padding: 20px 20px 18px; }
  .shot--ask { padding: 28px; }
}
@media (max-width: 400px) {
  .founder__row { grid-template-columns: 1fr; }
  .fcard { aspect-ratio: auto; min-height: 220px; }
  .fcard--photo { aspect-ratio: 3 / 4; }
}

/* =============================================================================
   BRAND LAYER. The company's own type, colours and buttons: headings in Cabin 700 uppercase at 1px spacing;
   body text in Lato; the eyebrow in Lato uppercase in warm brown #615844 at wide spacing; buttons are
   pills in Lato 700 uppercase; section grounds are cream #FFF8EB, off-white #FCFAF5, sand #F4EBD5 and
   aqua, with teal #066C7F and dark teal #055261 for accents and dark bands.
   ========================================================================== */
:root {
  --cream: #FFF8EB; --sand: #F4EBD5; --brown: #615844; --gold: #F5B800;
  --line-soft: color-mix(in srgb, var(--anchor) 14%, transparent);
  --tick: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cpath d=%22M5.5 10.5l3 3 6-7%22 fill=%22none%22 stroke=%22white%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --tick-dark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cpath d=%22M5.5 10.5l3 3 6-7%22 fill=%22none%22 stroke=%22%23055261%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
body { letter-spacing: normal; color: var(--ink); }
strong, b { font-weight: 700; }

/* ---- type: the heading voice ---- */
.d1, .d2 { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.d1 { font-size: 58px; line-height: 1.1; }
.d2 { font-size: 40px; line-height: 1.16; }
h1.d2 { font-size: 48px; line-height: 1.14; letter-spacing: .02em; }
.d3 { font-weight: 500; font-size: 36px; line-height: 1.3; letter-spacing: 0; }
.d4 { font-weight: 600; font-size: 26px; line-height: 1.25; letter-spacing: 0; }
.eyebrow { font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .16em; color: var(--brown); margin-bottom: 14px; }
.band--dark .eyebrow, .hero .eyebrow, .visit .eyebrow, .site-foot .eyebrow, .why .eyebrow { color: var(--mint); }
.lead { font-size: 19px; line-height: 1.5; letter-spacing: 0; }
.micro { font-size: 14px; line-height: 1.45; letter-spacing: 0; }
.meta { letter-spacing: 0; }
.prose p { font-size: 18px; line-height: 1.65; color: var(--ink-quiet); }
.center { text-align: center; }

/* ---- buttons: pill shaped, Lato 700 uppercase, wide letter spacing ---- */
.btn { font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 16px 30px; min-height: 52px; text-align: center; }
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn--brand { background: var(--cta); color: var(--cta-ink); }
.btn--light { background: var(--cream); color: var(--cta); }
.btn--glass { background: rgba(255,255,255,.14); color: var(--ink-invert); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.24); opacity: 1; }
.contact__send .btn { border-radius: 999px; }

/* ---- bands: the section grounds ---- */
.band--cream { background: var(--cream); --notch-bg: var(--cream); }
.band--sand { background: var(--sand); --notch-bg: var(--sand); }
.band--dark { --notch-bg: var(--anchor); }
.band--dark .notch { color: var(--ink-invert); }
.band--dark .notch__go { background: var(--mint); color: var(--anchor); }
.band--dark .notch--btn:hover { color: rgba(255,255,255,.8); }
.band--head .sec-head { margin-bottom: 0; }
.band--head > .inner { padding-bottom: 72px; }
.sec-head .d2 { color: var(--ink); }

/* ---- the header: the company name as the wordmark beside the flower mark ---- */
.brand__tile img, .foot-cta__mark img, .faq__mark img, .article__ctamark img { object-fit: contain; display: block; }
.brand__tile img { width: 32px; height: 32px; }
.brand__name { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1; color: var(--ink-invert); white-space: nowrap; letter-spacing: .01em; }
.brand__sub { font-family: var(--body); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }
.nav a { font-family: var(--body); text-transform: uppercase; font-weight: 700; letter-spacing: .1em; }
@media (min-width: 1101px) {
  .nav a { font-size: 13px; font-weight: 700; letter-spacing: .1em; padding: 12px 4px; }
  .head-ring { border-radius: 999px; }
  .head-ring .head-cta { border-radius: 999px; font-size: 13px; letter-spacing: .12em; padding: 12px 20px; }
}
@media (min-width: 1321px) { .nav { gap: 16px; } }
@media (min-width: 1101px) and (max-width: 1320px) {
  .nav { gap: 2px; padding: 6px 10px; }
  .nav a { font-size: 12px; letter-spacing: .06em; padding: 12px 5px; }
  .head-ring .head-cta { font-size: 12px; letter-spacing: .08em; padding: 12px 14px; }
  .brand__name { font-size: 15px; }
}
@media (max-width: 1100px) { .nav a { font-size: 14px; } }

/* ---- hero ---- */
.hero .d1 { max-width: none; }
.hero--page { min-height: 680px; }
.hero__strong { display: block; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.3; color: var(--ink-invert); margin-bottom: 6px; }
.hero__lead { max-width: 52ch; }
.hero__card--badges { width: 300px; padding: 18px; border-radius: var(--r-shell);
  background: rgba(3,40,48,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero__card--badges p { padding-top: 12px; font-size: 14px; line-height: 1.45; }
.badges--hero { justify-content: space-between; gap: 10px; margin: 0; }
.badges--hero img { height: 76px; }

/* ---- metrics: Cabin figures in dark teal ---- */
.metrics__fig { font-weight: 700; color: var(--anchor); letter-spacing: 0; }
.metrics__cap { font-size: 15px; }
.metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- the dark intro band: the sentence that lights up word by word, then three cards cut by notches ---- */
.intro .reveal-words { max-width: 30ch; margin: 0 auto; }
.why3 { margin-top: 72px; }
.why3__card { position: relative; overflow: hidden; background: var(--ground); color: var(--ink); border-radius: var(--r-card);
  padding: 34px 30px 104px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.why3__t { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--teal); margin: 0; }
.why3__d { font-size: 17px; line-height: 1.55; color: var(--ink-quiet); margin: 0; }

/* ---- tick lists (the pricing cards and "services at a glance") ---- */
.ticks, .plan__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ticks li, .plan__list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; }
.ticks li::before, .plan__list li::before { content: ""; position: absolute; left: 0; top: .18em; width: 19px; height: 19px; border-radius: 50%;
  background: var(--teal) var(--tick) center / 13px no-repeat; }
.ticks--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 14px 0 20px; }

/* ---- service tiles: six photographs and the calculator card across the row ---- */
.grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--tiles > * { min-width: 0; }
.shot__label { font-family: var(--body); font-weight: 700; font-size: 17px; letter-spacing: 0; }
.shot--wide { grid-column: 1 / -1; aspect-ratio: auto; padding: 34px 40px; }
.shot--wide .shot__ask { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 28px; height: auto; }
.shot--wide .shot__askcopy { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.shot--wide .d4 { font-size: 28px; }
.shot--wide .btn { align-self: center; flex: 0 0 auto; }
.shot__askico { width: 72px; height: 72px; border-radius: 18px; background: var(--ground); color: var(--anchor); display: grid; place-items: center; flex: 0 0 auto; }
.shot__askico svg { width: 44px; height: 44px; }

/* ---- the photo band: an office photograph with the heading on the ceiling and glass cards below ---- */
.why__card { background: rgba(2,30,36,.34); }
.why__head .d2 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.why__role { color: var(--brown); }
.why__name { font-weight: 700; }
.wf__res { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: var(--anchor); color: var(--ink-invert);
  border-radius: 8px; padding: 10px 12px; margin-top: 4px; }
.wf__res .wf__k { color: var(--ink-invert); }
.wf__price { font-family: var(--display); font-weight: 700; font-size: 18px; }
.wf__btn { border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 12px; padding: 9px 14px; }

/* ---- the founder: the founder's words beside a portrait, the credentials beneath ---- */
.founder__split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 72px; align-items: center; }
.founder__copy .d2 { margin-bottom: 24px; }
.founder__prose { margin-bottom: 30px; }
.founder__photo { aspect-ratio: 4 / 5; }
.creds { margin-top: 80px; background: var(--cream); border-radius: var(--r-card); padding: 36px 40px 40px; }
.badges { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 28px 36px; }
.badges img { height: 96px; width: auto; }

/* ---- testimonials: stars and quotes ---- */
.stars { display: inline-flex; gap: 3px; color: var(--gold); }
.stars svg { width: 18px; height: 18px; }
.band--sand .testi__card { background: var(--ground); }
.testi__fig { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: 0; }
.testi__q { font-size: 17px; line-height: 1.6; }
.testi__name { font-weight: 700; }
.testi__photo img { object-position: 50% 40%; }
.quotes { margin-top: 24px; }
.quote { margin: 0; background: var(--ground); border-radius: var(--r-shell); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.quote__t { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0; color: var(--teal); }
.quote__q { margin: 0; }
.quote__q p { font-size: 16px; line-height: 1.6; color: var(--ink-quiet); margin: 0 0 10px; }
.quote__who { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.quote__name { font-weight: 700; font-size: 16px; }
.quote__role { font-size: 14px; color: var(--ink-quiet); }

/* ---- dark call-to-action bands (the scorecard band) ---- */
.band--dark.score > .inner { padding: 84px var(--pad-x); }
.score__row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.score .d2 { color: var(--ink-invert); max-width: 20ch; }
.score__lead { color: var(--ink-soft); margin-top: 16px; max-width: 62ch; }
.score__lead p { color: var(--ink-soft); }
.score .btn { flex: 0 0 auto; }

/* ---- split: copy beside a photograph that carries a notch ---- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.split--top { align-items: start; }
.split > * { min-width: 0; }
.split__copy .d2 { margin-bottom: 22px; }
.split__photo { position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 4 / 3; }
.split__photo img { width: 100%; height: 100%; object-fit: cover; }
.split__btn { margin-top: 28px; }
.split__p { margin-top: 18px; font-size: 17px; line-height: 1.6; }
.report__note { margin-top: 16px; }
.pchips { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pchips li { background: var(--ground); border-radius: 999px; padding: 9px 16px; font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--anchor); }
.band--close .pchips li, .band--plain .pchips li { background: var(--mint); }

/* ---- pricing: the packages as notched cards ---- */
.pricing__jump { text-align: center; margin: -44px 0 56px; }
.plans > * { min-width: 0; }
.plan { position: relative; overflow: hidden; background: var(--ground); border-radius: var(--r-card); padding: 34px 30px 112px; display: flex; flex-direction: column; gap: 12px; }
.plan__name { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); margin: 0; }
.plan__price { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; margin: 6px 0 0; color: var(--ink); }
.plan__cur { font-size: 28px; vertical-align: .7em; margin-right: 2px; }
.plan__per { display: block; font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); margin-top: 10px; }
.plan__vol { font-size: 16px; line-height: 1.5; color: var(--ink-quiet); margin: 0 0 6px; }
.plan--trust { background: var(--anchor); color: var(--ink-invert); }
.plan--trust .plan__name { color: var(--mint); }
.plan--trust .plan__price { color: var(--ink-invert); }
.plan--trust .plan__per { color: var(--mint); }
.plan--trust .plan__vol { color: var(--ink-soft); }
.plan--trust .plan__list li::before { background: var(--mint) var(--tick-dark) center / 13px no-repeat; }
.plan__go { font-size: 16px; font-weight: 700; }
.dtable { margin: 24px 0 0; display: grid; gap: 8px; }
.dtable > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; background: var(--cream); border-radius: var(--r-md); padding: 16px 20px; }
.dtable dt { font-weight: 700; }
.dtable dd { margin: 0; font-family: var(--display); font-weight: 600; color: var(--teal); white-space: nowrap; }
.notes__p { font-size: 16px; line-height: 1.65; color: var(--ink-quiet); margin: 0; }

/* ---- the pricing calculator form ---- */
#calculator, #reporting, #report, #cleanup-pricing { scroll-margin-top: 110px; }
.calc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.calc__intro .d2 { margin-bottom: 18px; }
.calc__disc { margin-top: 22px; max-width: 46ch; }
.calc__form { background: var(--ground); border-radius: var(--r-card); padding: 32px; }
.calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc__opts { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.calc__check { display: flex; gap: 14px; align-items: flex-start; background: var(--cream); border-radius: 12px; padding: 14px 16px; cursor: pointer; min-height: 48px; }
.calc__check input { margin-top: 1px; flex: 0 0 auto; accent-color: var(--anchor); }
.calc__check strong { display: block; font-size: 16px; line-height: 1.35; }
.calc__help { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-quiet); margin-top: 3px; }
.calc__check--sub { background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--line-soft); }
.calc__more { padding: 4px 0 8px 18px; display: flex; flex-direction: column; gap: 10px; }
.calc__more[hidden] { display: none; }
.calc__btn { width: 100%; margin-top: 24px; }
.calc__err { margin: 14px 0 0; background: #FBEAE8; color: #7A1B12; border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.calc__result { margin-top: 22px; background: var(--anchor); color: var(--ink-invert); border-radius: var(--r-shell); padding: 28px; }
.calc__result[hidden] { display: none; }
.calc__k { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin: 0 0 8px; }
.calc__price { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1; margin: 0 0 12px; }
.calc__tier { font-size: 18px; margin: 0 0 6px; }
.calc__clean { font-size: 16px; color: var(--mint); margin: 0; }
.calc__clean:empty { display: none; }
.calc__npnote { color: var(--ink-soft); margin-top: 12px; }
.calc__book { margin-top: 20px; }

/* ---- law firms: the three-way reconciliation ---- */
.visit__eyebrow { margin-bottom: 16px; }
.visit .d1 { max-width: 18ch; }
.tw { margin-top: 72px; background: var(--ground); border-radius: var(--r-card); padding: 36px 36px 30px; }
.tw__h { font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; text-align: center; margin: 0; color: var(--anchor); }
.tw__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; }
.tw__item { background: var(--mint); border-radius: var(--r-shell); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.tw__n { width: 34px; height: 34px; border-radius: 9px; background: var(--anchor); color: var(--ink-invert); display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.tw__t { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.2; }
.tw__d { font-size: 15px; line-height: 1.5; color: var(--ink-quiet); }
.tw__eq { align-self: center; font-family: var(--display); font-weight: 700; font-size: 40px; color: var(--teal); }
.tw__foot { text-align: center; margin-top: 18px; }

/* ---- cleanup: signs ---- */
.signs > * { min-width: 0; }
.sign { background: var(--ground); border-radius: var(--r-card); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.sign__n { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--teal); }
.sign__t { font-family: var(--body); font-weight: 700; font-size: 19px; line-height: 1.3; margin: 6px 0 0; }
.sign__d { font-size: 16px; line-height: 1.55; color: var(--ink-quiet); margin: 0; }

/* ---- nonprofit services list ---- */
.inc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.inc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inc__list li { background: var(--ground); border-radius: var(--r-shell); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.inc__t { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--teal); }
.inc__d { font-size: 16px; line-height: 1.5; color: var(--ink-quiet); }

/* ---- FAQ page: the closing quote over a photograph ---- */
.quoteband > .inner { padding: 110px var(--pad-x); }
.quoteband__q { color: var(--ink-invert); max-width: 24ch; margin: 0 auto; }
.quoteband__who { margin-top: 20px; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.faq__cardt { font-family: var(--display); font-weight: 600; font-size: 28px; }
.faq__q { font-family: var(--body); font-weight: 700; font-size: 18px; letter-spacing: 0; }
.faq__cardphone { margin: 16px 0 0; }
.faq__cardphone a { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--anchor); text-decoration: none; display: inline-block; min-height: 24px; }
.faq__cardphone a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- blog ---- */
.fchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -44px 0 48px; }
.fchip { font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: var(--ground); border: 0; border-radius: 999px; padding: 12px 18px; min-height: 44px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line-soft); }
.fchip:hover { box-shadow: inset 0 0 0 1.5px var(--anchor); }
.fchip[aria-pressed="true"] { background: var(--anchor); color: var(--ink-invert); box-shadow: none; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
.post { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.post[hidden] { display: none; }
.post--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.post__img { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 16 / 10; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-rise); }
.post:hover .post__img img { transform: scale(1.04); }
.post__cat { font-size: 14px; font-weight: 700; padding: 13px 16px 12px; }
.post__body { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.post__date { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); margin: 0; }
.post__t { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.25; margin: 0; }
.post--feature .post__t { font-size: 34px; }
.post__t a { color: var(--ink); text-decoration: none; }
.post__t a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post__x { font-size: 16px; line-height: 1.55; color: var(--ink-quiet); margin: 0; }
.post__go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); text-decoration: none; min-height: 24px; padding: 4px 0; align-self: flex-start; }
.post__go svg { width: 16px; height: 16px; }
.posts__none { text-align: center; margin-top: 24px; }
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.news .d2 { margin-bottom: 16px; }
.news__form { background: var(--ground); border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; gap: 14px; }

/* ---- a blog post ---- */
.article__wrap { max-width: 780px; }
.article-head > .inner { padding-bottom: 56px; }
.crumbs { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); margin: 0 0 18px; }
.crumbs a { color: var(--teal); display: inline-block; min-height: 24px; padding: 3px 0; }
.article__t { font-size: 44px; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 0; font-size: 15px; color: var(--ink-quiet); }
.article__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.article__img { margin: 0 0 44px; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; }
.article__img img { width: 100%; height: 100%; object-fit: cover; }
.article__body { font-size: 18px; line-height: 1.75; color: #2E2B27; }
.article__body h2 { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.25; margin: 52px 0 16px; color: var(--anchor); }
.article__body h3 { font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.3; margin: 40px 0 12px; color: var(--anchor); }
.article__body h4 { font-family: var(--body); font-weight: 700; font-size: 19px; margin: 30px 0 10px; }
.article__body p { margin: 0 0 20px; }
.article__body ul { margin: 0 0 22px; padding-left: 24px; }
.article__body li { margin: 0 0 10px; }
.article__body li::marker { color: var(--teal); }
/* What else the post editor can produce: a numbered list, a horizontal rule (typing three hyphens), a table and a
   quotation, in the same look as the rest of the text. A very long word with no spaces (a pasted web address) in a
   paragraph, list, quotation or table breaks to fit the text column instead of running out of it. */
.article__body ol { margin: 0 0 22px; padding-left: 28px; }
.article__body hr { border: 0; height: 1px; margin: 40px 0; background: var(--line-soft); }
.article__body blockquote { margin: 0 0 22px; padding: 20px 24px; background: var(--cream); border-radius: var(--r-md); color: var(--ink-quiet); }
.article__body table { display: block; max-width: 100%; margin: 0 0 22px; overflow-x: auto; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.article__body th, .article__body td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.article__body th { font-weight: 700; color: var(--anchor); }
.article__body p, .article__body li, .article__body blockquote, .article__body th, .article__body td { overflow-wrap: break-word; }
.article__cta { margin-top: 60px; background: var(--mint); border-radius: var(--r-card); padding: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.article__ctat { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 0 0 4px; }
.article__ctad { font-size: 16px; color: var(--ink-quiet); margin: 0; }
.posts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- downloads ---- */
.dls > * { min-width: 0; }
.dl { position: relative; overflow: hidden; background: var(--ground); border-radius: var(--r-card); padding: 30px 28px 104px; display: flex; flex-direction: column; gap: 8px; min-height: 300px; }
.band--close .dl { background: var(--cream); }
.dl__ico { width: 66px; height: 66px; border-radius: 16px; background: var(--mint); color: var(--anchor); display: grid; place-items: center; margin-bottom: 10px; }
.dl__ico svg { width: 40px; height: 40px; }
.dl__tag { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); margin: 0; }
.dl__t { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.25; margin: 0; }
.dl__f { font-size: 15px; line-height: 1.5; color: var(--ink-quiet); margin: 0; }
.dl__go { font-size: 16px; font-weight: 700; }

/* ---- contact, thank you ---- */
.contact__book { margin-top: 24px; }
.call__alt a { color: var(--teal); font-weight: 700; display: inline-block; min-height: 24px; }
.thanks__card { background: var(--ground); border-radius: var(--r-card); overflow: hidden; }
.thanks__card > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.thanks__body { padding: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.thanks__t { font-family: var(--display); font-weight: 600; font-size: 24px; margin: 0; }
.thanks__d { font-size: 16px; color: var(--ink-quiet); margin: 0 0 12px; }

/* ---- footer ---- */
.foot-cta__mark img { width: 52px; height: 52px; }
.foot-cta .d2 { color: var(--ink-invert); }
.foot-cta .btn { margin-top: 30px; }
.foot-social { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 16px 0 0; }
.foot-social__a { font-size: 14px; color: var(--ink-invert); display: inline-block; min-height: 24px; padding: 3px 0; }
.foot-tag { display: block; margin-top: 6px; font-style: italic; }
.faq__mark img { width: 56px; height: 56px; }

/* ---- forms: honeypot, error state ---- */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact__done.is-error { background: #FBEAE8; color: #6B1F1A; }
/* the bot check takes no room until it shows its box (site.js adds is-shown): its negative margin cancels the form's gap */
.contact__check:not(.is-shown) { margin-top: -32px; }
@media (max-width: 720px) { .contact__check:not(.is-shown) { margin-top: -28px; } }
.fld > label { font-weight: 700; }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .founder__split { gap: 48px; }
  .split { gap: 48px; }
}
@media (max-width: 1000px) {
  .d1 { font-size: 46px; }
  .d2 { font-size: 34px; }
  h1.d2, .article__t { font-size: 40px; }
  .d3 { font-size: 30px; }
  .grid--tiles, .posts, .posts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .founder__split, .calc, .news, .inc { grid-template-columns: 1fr; gap: 36px; }
  .post--feature { grid-template-columns: 1fr; gap: 18px; }
  .post--feature .post__t { font-size: 26px; }
  .tw__list { grid-template-columns: 1fr; }
  .tw__eq { justify-self: center; line-height: .8; }
  .founder__photo { max-width: 460px; }
  .score__row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .d1 { font-size: 36px; }
  .d2 { font-size: 28px; }
  h1.d2, .article__t { font-size: 32px; }
  .d3 { font-size: 24px; }
  .hero--page { min-height: 620px; }
  .hero__strong { font-size: 21px; }
  .grid--tiles, .posts, .posts--3 { grid-template-columns: 1fr; }
  .shot--wide { padding: 26px; }
  .shot--wide .shot__ask { flex-direction: column; align-items: flex-start; }
  .shot--wide .btn { align-self: stretch; }
  .why3 { margin-top: 44px; }
  .ticks--2, .calc__grid, .inc__list { grid-template-columns: 1fr; }
  .calc__form { padding: 22px; }
  .creds { padding: 26px 22px; margin-top: 48px; }
  .badges img { height: 72px; }
  .tw { padding: 24px 20px; margin-top: 48px; }
  .article__cta { grid-template-columns: 1fr; }
  .fchips { margin: -20px 0 32px; }
  .pricing__jump { margin: -20px 0 36px; }
  .plan__price { font-size: 48px; }
  .band--dark.score > .inner, .quoteband > .inner { padding: 56px var(--pad-x); }
  .score .btn { width: 100%; }
}
@media (max-width: 560px) {
  .d1 { font-size: 30px; line-height: 1.12; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .brand__name { font-size: 15px; }
}
@media (max-width: 400px) {
  .d1 { font-size: 27px; }
  .brand__name { font-size: 14px; }
  .brand__sub { font-size: 8.5px; letter-spacing: .06em; }
  .btn { padding: 15px 20px; letter-spacing: .1em; }
}

/* ---- hero shade and metrics: a lighter shade, so that the sunset photograph does not read almost black; the
   metric figures are long, so they sit above their captions ---- */
.hero__scrim { background:
  linear-gradient(to right, rgba(0,0,0,.66) 0%, rgba(0,0,0,.44) 38%, rgba(0,0,0,.06) 72%, rgba(0,0,0,0) 100%),
  linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 46%, rgba(0,0,0,.10) 100%); }
@media (max-width: 1100px) { .hero__scrim { background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 52%, rgba(0,0,0,.28) 100%); } }
.metrics__item { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 36px; }
.metrics__fig { white-space: nowrap; font-size: 46px; }
.metrics__cap { max-width: 26ch; min-width: 0; margin-top: 0; }
@media (max-width: 1180px) { .metrics__fig { font-size: 38px; white-space: normal; } .metrics__item { padding: 0 24px; } }
@media (max-width: 720px) { .metrics__item { padding: 0; } .metrics__fig { font-size: 32px; } }

/* ---- phones: the pill button's min-height held the CLOSED menu button open at 52px, doubling the height of the
   phone bar; and the brand layer's three-across metrics rule sat later than the phone rule ---- */
@media (max-width: 1100px) {
  .head .head-cta { min-height: 0; padding-block: 0; }
  .head.is-open .head-cta { min-height: 48px; padding-block: 14px; }
}
@media (max-width: 720px) {
  .metrics { grid-template-columns: 1fr; }
  .metrics__item { flex-direction: row; align-items: baseline; gap: 14px; }
  .metrics__fig { white-space: nowrap; }
}

/* ---- accessibility fixes ---- */
/* the eyebrow and plan names became headings for the outline; they keep their look */
h2.eyebrow { font-size: 13px; line-height: 1.2; margin: 0 0 14px; }
h2.plan__name { font-size: 20px; }
h2.dl__t { font-size: 22px; }
h2.post__t { font-size: 22px; }
.post--feature h2.post__t { font-size: 34px; }
h2.step__t { font-family: var(--body); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.4px; margin: 24px 5px 16px; }
/* one link per post card, stretched over the whole card */
.post { position: relative; }
.post__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--r-card); }
/* the title link keeps the site's own focus ring (hiding it on the link would fail WCAG 2.4.7) */
/* the notched button's focus ring is two-tone, so it reads on a light tab and a dark card alike */
.notch--btn:focus-visible { outline: 3px solid var(--anchor); outline-offset: -4px; box-shadow: inset 0 0 0 7px #FFFFFF; }
.band--dark .notch--btn:focus-visible { outline-color: #FFFFFF; box-shadow: inset 0 0 0 7px var(--anchor); }
@media (max-width: 1000px) { .post--feature h2.post__t { font-size: 26px; } }

/* =============================================================================
   PERFORMANCE. A backdrop-filter blur on the FIXED header made Firefox re-blur the page under it on every
   scroll frame. Removing it cut Firefox scroll time by 24% on the Home page, 61% on the resources page and
   49% on the Pricing page; the in-page glass panels on the Home page cost a further 21%. Page weight,
   will-change and scripts were measured and ruled out. So there is no backdrop-filter anywhere: the glass
   is solid or semi-solid teal that reads close to it.
   ========================================================================== */
:root { --chip-glass: rgb(24,62,70); }
.brand, .nav, .head-ring, .head__glass, .why__card, .why__chip, .wf, .hero__card, .hero__card--badges,
.btn--glass, .visit__card, .rating__text, .skip { -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero__card--badges { background: rgba(3,40,48,.74); }
.why__card { background: rgba(2,30,36,.58); }
.visit__card { background: rgba(8,22,34,.78); }
.btn--glass { background: rgba(255,255,255,.16); }
.btn--glass:hover { background: rgba(255,255,255,.26); }
/* without the blur a see-through chip only lets the photograph show through behind small text, so it is solid
   now (the founder's name measured 4.49:1 on the translucent chip) */
.why__chip, .wf { background: #FCFAF5; background-image: none; }

/* =============================================================================
   LOGOS, SEAL, PHOTO BANDS AND HERO SHADES. The full company logo in the header and footer, the BBB seal,
   the photographs behind the closing quote and the scorecard band, and lighter hero photographs.
   ========================================================================== */

/* the full logo in the header. Its lettering is dark navy, so it sits on a white plate inside the dark chip,
   widened for a 2:1 logo. On desktop the chip is taller than the menu chip so the logo reads; its negative
   block margin keeps the row's height, so the menu chip stays 25px from the top. */
.brand__plate { display: grid; place-items: center; flex: 0 0 auto; background: #FFFFFF; border-radius: 6px; }
.brand__logo { display: block; width: auto; max-width: none; }
@media (min-width: 1101px) {
  .brand { height: 66px; padding: 5px; gap: 0; margin-block: -5.5px; }
  .brand__plate { height: 56px; padding: 0 10px; }
  .brand__logo { height: 48px; }
}
@media (max-width: 1100px) {
  .brand__plate { height: 48px; padding: 0 8px; }
  .brand__logo { height: 42px; }
}

/* the full logo in the footer, on a white plate wide enough for its tagline to read */
.foot-cta__logo { display: block; width: 340px; max-width: 100%; margin: 0 auto 30px; padding: 18px 24px;
  background: #FFFFFF; border-radius: var(--r-shell); box-shadow: var(--shadow-float); }
.foot-cta__logo img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .foot-cta__logo { width: 270px; padding: 14px 18px; } }

/* in-text links on the Services page, underlined */
.svc__d .inlink { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  padding-block: 3px; }   /* inline padding: a 24px tap target, the lines do not move */
.svc__d .inlink:hover { text-decoration-thickness: 2px; }
.pchips li.pchips__link { padding: 0; }
.pchips__link a { display: block; padding: 9px 16px; min-height: 24px; border-radius: inherit; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pchips__link a:hover { text-decoration-thickness: 2px; }

/* the BBB Dynamic Seal. BBB's own script only wrote these rules (for class ruvtbum: a 60 x 110 window on a
   120 x 108 two-frame sprite, the hover showing the dated side); they live here instead. Keyboard focus shows
   the same side. */
a#bbblink { display: block; position: relative; text-align: center; color: #005A78; text-decoration: none; overflow: hidden; margin: 0; padding: 0; }
a#bbblink img { border: 0; position: absolute; top: 0; left: 0; margin-left: 0; max-width: 200%; }
/* the badge row sizes every badge image (.badges img, 96px, 72px on phones); the seal is a two-frame sprite and
   must stay at BBB's own 120 x 108, or the second frame shows beside the first */
.badges a#bbblink img { width: 120px; height: 108px; }
a#bbblink.ruvtbum { width: 60px; height: 110px; }
a#bbblink.ruvtbum:hover img, a#bbblink.ruvtbum:focus-visible img { margin-left: -60px; }
.badges__bbb { display: flex; }
@media (max-width: 1000px) { .founder .badges { justify-content: center; } }
@media (max-width: 720px) {
  .badges a#bbblink.ruvtbum { width: 48px; height: 88px; }
  .badges a#bbblink img { width: 96px; height: 86px; }
  .badges a#bbblink.ruvtbum:hover img, .badges a#bbblink.ruvtbum:focus-visible img { margin-left: -48px; }
}

/* photographs behind the closing quote (FAQ page) and the free scorecard band (Home and Resources pages),
   each with its own shade, set so that the white text stays readable. The three pricing bands that share
   .score are not touched. */
.score--photo, .quoteband--photo { isolation: isolate; }
.photoband__media { position: absolute; inset: 0; z-index: -2; }
.photoband__media img { width: 100%; height: 100%; object-fit: cover; }
.photoband__scrim { position: absolute; inset: 0; z-index: -1; }
/* the quote: shade centred on the words, the office's windows left open at the edges (quote text 5.4 to
   6.6:1, attribution 5.2 to 5.9:1 against the brightest 5% behind them, from 320 to 1440px wide) */
.quoteband--photo .photoband__scrim { background: radial-gradient(ellipse 62% 72% at 50% 50%, rgba(6,20,28,.70) 0%, rgba(6,20,28,.60) 50%, rgba(6,20,28,.32) 100%); }
/* the scorecard: a warm dark shade (not teal, so the band reads apart from the dark teal footer below it),
   heaviest under the words: on the left on desktop, at the top on phones where the band stacks (eyebrow 5.6
   to 8.4:1, heading 5.9 to 7.8:1, from 320 to 1440px wide) */
.score--photo .photoband__scrim { background: linear-gradient(to right, rgba(20,16,12,.70) 0%, rgba(20,16,12,.50) 50%, rgba(20,16,12,.28) 100%); }
@media (max-width: 340px) { .score .d2 { font-size: 25px; } }   /* the word "BOOKKEEPING?" fits a 320px screen */
@media (max-width: 1000px) { .score--photo .photoband__scrim { background: linear-gradient(to bottom, rgba(20,16,12,.74) 0%, rgba(20,16,12,.66) 60%, rgba(20,16,12,.40) 100%); } }

/* lighter Home and Law Firms heroes. The shade sits behind the words only and the rest of the photograph is
   left open, so each photograph reads lighter at every width, while every line of white text measures at
   least 4.5:1 (3:1 for the headlines) against the brightest 5% of the photograph behind it, at every width
   from 320 to 1440. Each phone stop starts the shade just above where the eyebrow sits at that width. Under
   381px the text fills the Home photograph, so it has its own lighter shade. Home only: the Nonprofit,
   Cleanup and Waikoloa heroes keep .hero__scrim as it was. */
.hero--home .hero__scrim { background:
  radial-gradient(ellipse 62% 58% at 22% 72%, rgba(0,0,0,.60) 0%, rgba(0,0,0,.46) 45%, rgba(0,0,0,0) 100%),
  linear-gradient(to top, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 40%); }
@media (max-width: 1100px) { .hero--home .hero__scrim { background: linear-gradient(to bottom, rgba(0,0,0,.06) 0%, rgba(0,0,0,.10) 28%, rgba(0,0,0,.58) 40%, rgba(0,0,0,.58) 64%, rgba(0,0,0,.74) 100%); } }
@media (max-width: 720px) { .hero--home .hero__scrim { background: linear-gradient(to bottom, rgba(0,0,0,.06) 0%, rgba(0,0,0,.10) 22%, rgba(0,0,0,.58) 34%, rgba(0,0,0,.58) 62%, rgba(0,0,0,.74) 100%); } }
@media (max-width: 380px) { .hero--home .hero__scrim { background: linear-gradient(to bottom, rgba(0,0,0,.02) 0%, rgba(0,0,0,.05) 14%, rgba(0,0,0,.372) 20%, rgba(0,0,0,.50) 48%, rgba(0,0,0,.63) 74%, rgba(0,0,0,.54) 100%); } }
/* the small eyebrow line carries its own soft shade, hugging its words at every width, so the
   photograph around it can stay open (it sat over the brightest part of both photos) */
.hero--home .rating, .visit__eyebrow { position: relative; isolation: isolate; width: fit-content; }
/* a blurred pill, so the shade has no edge (a clipped gradient showed a box edge at 1440) */
.hero--home .rating::before, .visit__eyebrow::before { content: ""; position: absolute; z-index: -1;
  left: -12px; right: -12px; top: -6px; bottom: -6px; pointer-events: none;
  border-radius: 999px; background: rgba(0,0,0,.46); filter: blur(12px); }
.visit__eyebrow::before { background: rgba(8,11,20,.46); }
.visit__scrim { background:
  radial-gradient(ellipse 60% 74% at 24% 64%, rgba(8,11,20,.68) 0%, rgba(8,11,20,.50) 45%, rgba(8,11,20,0) 100%),
  linear-gradient(to top, rgba(8,11,20,.30) 0%, rgba(8,11,20,0) 40%); }
@media (max-width: 1000px) { .visit__scrim { background: linear-gradient(to bottom, rgba(8,11,20,.64) 0%, rgba(8,11,20,.64) 52%, rgba(8,11,20,.28) 68%, rgba(8,11,20,.20) 100%); } }

/* the portrait image on the thank-you page, shown whole (never cropped), at most 400px wide so the 1086px
   file stays sharp at 2x, with the card on the content edge */
.thanks__card { width: 100%; max-width: 400px; justify-self: end; }
@media (max-width: 1000px) { .thanks__card { justify-self: start; } }
.thanks__card > img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }

/* =============================================================================
   COMPACT FOOTER. About 27% less vertical space and a slightly smaller centred logo, with the consultation
   section closer to the navigation links. Spacing and the logo's size only: every element, column, link and
   word stays where it was. The footer is about 760px tall at 1440 wide (it was 1060px) and about 945px at
   390 wide (it was 1225px). Every link keeps its 24px tap height (min-height above).
   ========================================================================== */
.site-foot__inner { padding-top: 44px; padding-bottom: 28px; }
.foot-cta__logo { width: 280px; margin-bottom: 18px; padding: 14px 20px; }
.foot-cta__lead { margin-top: 10px; }
.foot-cta .btn { margin-top: 20px; }
.foot-rule { margin: 28px 0 24px; }
.foot-col h3 { margin-bottom: 10px; }
.foot-col ul { gap: 4px; }
.foot-col a { padding: 2px 0; }
.foot-social { margin-top: 10px; }
.foot-base { margin-top: 24px; padding-top: 14px; }
@media (max-width: 1000px) { .foot-cols { gap: 24px; } }
@media (max-width: 720px) {
  .site-foot__inner { padding-top: 24px; padding-bottom: 16px; }
  .foot-cta__logo { width: 240px; padding: 12px 16px; margin-bottom: 14px; }
  .foot-cta__lead { margin-top: 6px; }
  .foot-cta .btn { margin-top: 14px; }
  .foot-rule { margin: 20px 0 16px; }
  .foot-cols { gap: 12px 20px; }
  .foot-col h3 { margin-bottom: 6px; }
  /* links 30px apart for a thumb (27px read as one block); the height comes from padding */
  .foot-col ul { gap: 6px; }
  .foot-base { margin-top: 16px; gap: 6px 14px; }
}
/* the thank-you page's footer: the logo, with no consultation heading, line or button */
.foot-cta--logo .foot-cta__logo { margin-bottom: 0; }

/* =============================================================================
   MAIN BUTTON IN TEAL. The black pill (#161616) sank into the dark photograph heroes, worst on a phone; teal
   reads on the photographs, on white and on the aqua band. Only .btn--brand changes (the header button is
   one); .btn--light (cream, on the dark teal bands) keeps its look. White on #066C7F = 5.9:1.
   ========================================================================== */
.btn--brand { background: var(--teal); color: var(--cta-ink); }