/* Business broker microsite.
   Design language: Goldman Sachs (goldmansachs.com), measured from live computed
   styles at 1600px and recorded in design/gs-design-system.md. Reproduced, not copied.
   Colour: Elkridge Advisors blue, used in exactly one structural place (the nav band)
   plus the primary call to action. Every other value on the page is an
   Elkridge ramp colour, including the neutrals and both dark surfaces.

   The five rules that make this read as GS and not a generic template:
   1. Zero border-radius and zero box-shadow. Everywhere. Buttons and images included.
   2. Display line-height is exactly 1.0 at every size.
   3. Neutrals are opacity on Elkridge base-900 in four fixed stops. Never hex greys.
   4. Surfaces are FULL-BLEED alternating bands (#FFFFFF / #F7F7FA), never inset panels.
   5. Navigation is carried by arrow text links. Filled buttons are rare and deliberate. */

@font-face{
  /* The three faces goldmansachs.com itself serves (cdn.gs.com/fonts/.../v3/),
     Dalton Maag, version 2.100. Self-hosted rather than hotlinked so the site
     controls caching and does not leak a referrer to gs.com on every page load.
     Each file is axis-pinned to what this sheet uses and unicode-subset to
     latin: the DRKM (dark-mode optical compensation) and DPLX axes are pinned
     to 0 and dropped, and the weight range is clamped. */
  font-family:"GS Sans";
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/gs-sans-v3.woff2") format("woff2");
}
@font-face{
  /* Separately drawn cut, not a width axis, so it carries its own family name
     and no font-stretch/wdth declaration appears anywhere in this sheet. */
  font-family:"GS Sans Condensed";
  font-style:normal;font-weight:300 500;font-display:swap;
  src:url("/assets/gs-sans-cd-v3.woff2") format("woff2");
}
@font-face{
  /* A later, separate Dalton Maag commission (2022, revised 2024), not part of
     the 2020 Goldman Sans release, which is why every public source correctly
     says Goldman Sans is sans-serif only. The h1 is the only thing on the site
     that uses it, so the file ships as a narrow 300-500 range: 300 is GS's own
     hero weight, 400 is ours, and the headroom is there to retune without a
     rebuild of the font. */
  font-family:"GS Serif";
  font-style:normal;font-weight:300 500;font-display:swap;
  src:url("/assets/gs-serif-v3.woff2") format("woff2");
}
/* Token NAMES are the engine's original contract, kept so no page builder needs
   renaming. VALUES are the GS system with the Elkridge accent. */
:root{
  /* Accent. One structural place: the nav band. Plus the primary CTA. */
  --brand:#10457C;
  --navy:#042140;
  --teal:#1F5C9D;
  --gold:#3976BC;

  /* GS builds its greys as opacity on black. We keep the METHOD and swap the
     base to Elkridge base-900, so every neutral on the site is an Elkridge
     colour rather than a true grey. Two stops sit deeper than GS's because
     #182126 is lighter than #000 and the originals would drop under AA. */
  --ink:#182126;                /* base-900. headings, display */
  --ink-800:rgba(24,33,38,.8);  /* long-form body. 8.5:1 */
  --ink-700:rgba(24,33,38,.66); /* secondary copy. 5.2:1 */
  --ink-600:rgba(24,33,38,.62); /* eyebrows, meta, footnotes. 4.5:1 */
  --rule:rgba(24,33,38,.5);     /* structural hairline. 3.2:1, clears UI contrast */
  --body:rgba(24,33,38,.8);
  --muted:rgba(24,33,38,.62);
  --line:rgba(24,33,38,.16);
  --line-soft:rgba(24,33,38,.09);

  --bg:#FFFFFF;
  --panel:#F5FAFF;            /* brand-50. the alternating band, full bleed */
  --panel-grey:#F6F6F6;       /* base-900 at 4% over white. the article panel */

  --wrap:1440px;              /* container; 40px gutters leave 1360 of content */
  --prose:896px;              /* long-form measure */
  --pad:40px;
  --gap:32px;                 /* 3 x 432 + 2 x 32 = 1360 */

  --serif:"GS Serif",Georgia,"Times New Roman",serif;
  --sans:"GS Sans",system-ui,-apple-system,sans-serif;
  --display:"GS Sans Condensed","GS Sans",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--body);background:var(--bg);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border-radius:0}
a{color:inherit;text-decoration:none}

/* ---------- type ----------
   Two faces off one superfamily plus a light serif. Condensed display (wdth 75)
   for section and card headlines; normal-width sans for body; serif at weight 300
   for the page headline. Line-height is 1.0 at display sizes. That density is
   the single most recognisable thing about the system. */
h1,h2,h3,h4{color:var(--ink);margin:0 0 1rem;text-wrap:balance}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.25rem,1.15rem + 3.5vw,3.75rem);line-height:1;letter-spacing:-.01em;
}
h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.75rem,1.15rem + 1.9vw,2.5rem);line-height:1;letter-spacing:0;
}
h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.375rem,1.05rem + 1vw,1.875rem);line-height:1;letter-spacing:0;
}
h4{font-family:var(--sans);font-size:1.25rem;line-height:1.5;font-weight:500}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* Eyebrow. 12/16, 1px tracking, uppercase, ink-600, and only 4px of air beneath
   it. GS binds the eyebrow tight to the headline so the pair reads as one object. */
.eyebrow,.hero__eyebrow,.linklist-heading{
  font-family:var(--sans);font-size:.75rem;line-height:1.333;font-weight:400;
  letter-spacing:1px;text-transform:uppercase;color:var(--ink-600);
  margin:0 0 4px;width:fit-content;
}
.section__lead{font-size:1.25rem;line-height:1.5;color:var(--ink-800);max-width:var(--prose)}
.updated{font-size:.75rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-600);margin-bottom:2rem}
.table-note,.form-micro{font-size:.75rem;line-height:1.333;color:var(--ink-600);margin-top:.75rem}

/* Inline links inside running copy: black, hairline underline. Never accent blue. */
.prose a,.section__lead a,.faq__a a,.card p a{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--rule);
}
.prose a:hover,.section__lead a:hover,.faq__a a:hover,.card p a:hover{text-decoration-color:var(--ink)}

/* ---------- container and section rhythm ----------
   Sections stack contiguously with no margins. All separation is internal
   padding plus the band colour. */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%}
.section{padding-block:64px}
/* Full-bleed alternating band. This replaces the inset panel entirely and is
   the structural difference between this system and the previous one. */
.section--alt{background:var(--panel)}
.section--center{text-align:left}

/* ---------- buttons ----------
   Four variants, all measured. Zero radius. Ghost is the default; a filled
   button is a deliberate signal that this is the one action on the page. */
.btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.25;
  padding:9px 11px;min-height:40px;border-radius:0;border:1px solid var(--rule);
  background:transparent;color:var(--ink);cursor:pointer;text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--lg{font-size:1.125rem;line-height:1.222;padding:12px 15px;min-height:48px}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* The one filled button. GS fills theirs solid black; ours takes the Elkridge
   accent because this is a lead-gen page and the primary action has to win. */
.btn--primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--primary:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--gold,.btn--outline{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--gold:hover,.btn--outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* On black, the border lifts to near-solid white and the fill inverts. */
.btn--primary-inv{background:#fff;color:var(--ink);border-color:#fff;padding:12px 14px}
.btn--primary-inv:hover{background:rgba(255,255,255,.85);color:var(--ink);border-color:rgba(255,255,255,.85)}
.btn--ghost-inv{background:transparent;color:#fff;border-color:rgba(255,255,255,.95)}
.btn--ghost-inv:hover{background:#fff;color:var(--ink);border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.cta-inline{margin:2rem 0}
/* The arrow link. This, not the button, is what carries most navigation. */
.more-link{
  display:inline-flex;align-items:center;gap:.4rem;font-size:1rem;line-height:1.25;
  font-weight:500;color:var(--ink);margin-top:2rem;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.more-link::after{content:"\2192";transition:transform .25s ease}
.more-link:hover{border-bottom-color:var(--ink)}
.more-link:hover::after{transform:translateX(3px)}

/* ---------- header ----------
   Sticky solid accent band. This is the only place the accent appears as a
   surface, which is what stops the palette reading as decoration. */
.site-header{position:sticky;top:0;z-index:50;background:var(--brand);color:#fff}
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;z-index:40}
.nav-scrim.show{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}
@media (min-width:1024px){.nav-scrim{display:none}}
.site-nav__inner{display:flex;align-items:center;justify-content:space-between;padding-block:.875rem;gap:1rem}
.nav__logo{
  font-family:var(--display);
  font-size:1.25rem;line-height:1.1;font-weight:500;color:#fff;
  letter-spacing:0;max-width:none;white-space:nowrap;display:block;
}
.nav__logo span{display:block;color:rgba(255,255,255,.7);font-size:.75rem;letter-spacing:1px;text-transform:uppercase;font-weight:400}
.nav__logo:hover{color:#fff}
.nav__links{
  list-style:none;display:flex;align-items:center;gap:1.5rem;margin:0;padding:0;font-size:1rem;
}
.nav__links>li{position:relative}
.nav__links>li>a{color:#fff;font-weight:400;padding-block:.35rem;display:inline-block;border-bottom:1px solid transparent;white-space:nowrap}
.nav__links>li>a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.95)}
/* Dropdown: a plain white sheet, square, no shadow. */
.dropdown{
  list-style:none;margin:0;padding:.5rem 0;position:absolute;top:100%;left:-.75rem;min-width:16rem;
  background:#fff;border:1px solid var(--rule);border-radius:0;opacity:0;visibility:hidden;
  transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:.6rem .75rem;color:var(--ink);font-size:1rem;white-space:nowrap}
.dropdown a:hover{background:var(--panel);color:var(--ink)}
/* Filled-on-dark: white ground, accent text, 12px 14px. */
.nav__links>li>a.nav__estimate{
  background:#fff;color:var(--brand);border:1px solid #fff;border-radius:0;padding:12px 14px;
  display:inline-flex;align-items:center;gap:.5em;font-size:1rem;font-weight:500;line-height:1.25;
}
.nav__links>li>a.nav__estimate:hover{background:rgba(255,255,255,.85);color:var(--brand);border-color:rgba(255,255,255,.85)}
.nav__estimate svg{width:1em;height:1em;flex:none}
/* The bar goes horizontal at 1024px and the CTA carries a long label, so the row
   is tightest right at the breakpoint: at 1024px it needs 951px against 944px
   available and the button overhangs the gutter. Pull the gaps in across the
   narrow band rather than raise the breakpoint, which would bury the primary
   CTA behind the toggle on iPad landscape. */
@media (min-width:1024px) and (max-width:1179px){
  .nav__links{gap:18px}
  .nav__links>li>a.nav__estimate{padding:12px 12px}
}
.nav__call{font-variant-numeric:tabular-nums}
.nav__toggle{
  display:none;width:2.25rem;height:2.25rem;border:0;background:none;cursor:pointer;
  position:relative;padding:0;color:#fff;
}
.nav__toggle span{
  position:absolute;left:50%;top:50%;width:1.125rem;height:1.5px;background:currentColor;
  transition:transform .3s ease,opacity .3s ease;
}
.nav__toggle span:nth-child(1){transform:translate(-50%,-50%)}
.nav__toggle span:nth-child(2){transform:translate(-50%,-50%) rotate(90deg)}
.nav__toggle span:nth-child(3){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

/* ---------- hero ----------
   Eyebrow bound tight to a serif headline at weight 300, then the supporting
   copy on a narrow measure, then the image at 3:2 running the full container. */
.hero{padding-top:64px}
.hero__split{display:block}
.hero__inner{max-width:var(--prose)}
.hero__inner h1{margin-bottom:0}
.hero__eyebrow{margin-bottom:4px}
.hero__sub{font-size:1.25rem;line-height:1.5;color:var(--ink-800);max-width:38rem;margin-top:1.5rem}
.hero__checklist{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.75rem;max-width:38rem}
.hero__checklist li{
  position:relative;padding-left:1.75rem;font-size:1.125rem;line-height:1.556;color:var(--ink-800);
}
.hero__checklist li::before{
  content:"";position:absolute;left:0;top:.6em;width:.75rem;height:1px;background:var(--rule);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__photo{margin-top:48px}
/* height:auto is load-bearing: the img still carries width/height attributes for
   CLS, and a definite height would make aspect-ratio a no-op. */
.hero__photo img{width:100%;height:auto;object-fit:cover;object-position:center;aspect-ratio:3/2;max-height:640px}

/* Full-bleed image strip. In this system images are allowed to touch the edge. */
.image-band{width:100%;max-width:none;margin:0;padding:0}
.image-band img{width:100%;height:clamp(220px,32vw,440px);object-fit:cover;object-position:center}

/* ---------- card grid ----------
   No fills, no borders, no shadows. A single hairline across the top of each
   card and a 32px gutter. The grid reads as an editorial index, which is exactly
   what GS does with its insights row. */
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:48px;background:none}
.grid--2{grid-template-columns:1fr}
@media (min-width:768px){.grid,.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:none;padding:1.5rem 0 0;display:flex;flex-direction:column;
  justify-content:flex-start;gap:0;min-height:0;border-top:1px solid var(--rule);
}
.card h3{margin-bottom:.75rem}
.card p{color:var(--ink-800);font-size:1.125rem;line-height:1.556;margin-bottom:1.5rem}
.card p:last-of-type{margin-bottom:1.5rem}
.grid + p,.grid + .btns,.linklist + p{margin-top:2rem}
/* The action is an arrow link pinned to the card floor. Never a button. */
.card__more{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;margin-top:auto;
  font-size:1rem;line-height:1.25;font-weight:500;letter-spacing:0;
  color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:2px;
}
.card__more::after{content:"\2192";transition:transform .25s ease}
.card:hover .card__more::after{transform:translateX(3px)}
.card__more:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- trust points ----------
   Four across, hairline over each, label at 20/30 bold. */
.trust-points{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:48px}
@media (min-width:768px){.trust-points{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.trust-points{grid-template-columns:repeat(4,1fr)}}
.trust-points .card{
  background:none;padding:1rem 0 0;gap:0;min-height:0;border-top:1px solid var(--rule);
}
.trust-points .card h3{
  font-family:var(--sans);font-size:1.25rem;line-height:1.5;font-weight:700;
  color:var(--ink);margin-bottom:.5rem;
}
.trust-points .card p{font-size:1rem;line-height:1.5;color:var(--ink-700);margin-bottom:0}

/* ---------- area links ----------
   290 of these render across the site, so they carry a lot of the character.
   A hairline index, no fills. */
.linklist{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0;
  margin-top:1.5rem;border-top:1px solid var(--rule);
}
.linklist-heading{margin:48px 0 0}
.area-link{
  display:block;background:none;padding:1rem 1rem 1rem 0;transition:background .2s ease;
  border-bottom:1px solid var(--line);
}
.area-link:hover{background:var(--panel)}
.area-link__name{
  display:block;font-family:var(--display);
  font-size:1.25rem;line-height:1;font-weight:400;color:var(--ink);
}
.area-link__city{
  display:block;font-size:.75rem;line-height:1.333;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-600);margin-top:.5rem;
}

/* ---------- split (image + copy) ---------- */
.split{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start}
@media (min-width:768px){.split{grid-template-columns:1fr 1fr}}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;border-radius:0}
.split__media--square img{aspect-ratio:1/1}
.split--center{align-items:center}

/* ---------- prose (long-form guide pages) ----------
   896px measure at 20/30. This is the article setting, not the homepage card
   setting; the two are genuinely different sizes in the source system. */
.prose{max-width:var(--prose)}
.prose h2{margin-top:48px}
.prose h3{margin-top:2rem;margin-bottom:.5rem}
.prose p,.prose li{font-size:1.25rem;line-height:1.5;color:var(--ink-800)}
.prose ul,.prose ol{padding-left:1.15rem;margin:0 0 1rem}
.prose li{margin-bottom:.75rem}
.prose h2+p,.prose h3+p{margin-top:1rem}

/* ---------- long-form article ----------
   Goldman's article template, which is a different object from a marketing
   section and is built on three moves.

   One measure, centred rather than ranged left. A 976px wrap holding the 896px
   prose column puts the text at x=272 in a 1440 viewport, which is exactly
   where Goldman puts it. The container maths is already ours, so this is one
   rule rather than a layout.

   Headings in the normal-width sans at 30/30 bold instead of the condensed
   display face. A display headline every four hundred words reads as a
   brochure; the article voice wants the quieter one.

   Neutral grey panels instead of the blue tint, derived the same way every
   other neutral here is, by laying Elkridge base-900 over white at low alpha.
   Scoped to .page--article so the rest of the site is untouched. */
.page--article .section > .wrap,
.page--article .hero > .wrap{max-width:calc(var(--prose) + var(--pad) * 2)}
.page--article .section--alt{background:var(--panel-grey)}
.page--article .section h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.5rem,1.15rem + 1.1vw,1.875rem);line-height:1;letter-spacing:0;
}
.page--article .section h3{
  font-family:var(--sans);font-weight:700;
  font-size:1.25rem;line-height:1.5;
  margin-top:2.5rem;margin-bottom:.5rem;
}

/* Key takeaways. The one panel Goldman puts above the body of an article. Grey,
   the full width of the measure, and padded hard enough that it reads as an
   object held apart from the article rather than as a tinted paragraph. */
.section--summary{padding-bottom:0}
.summary{background:var(--panel-grey);padding:80px 60px}
.summary ul{list-style:none;margin:0;padding:0}
.summary li{
  position:relative;padding-left:1.75rem;margin-bottom:24px;
  font-size:1.25rem;line-height:1.5;color:var(--ink-800);
}
.summary li:last-child{margin-bottom:0}

/* Body bullets. The marker is drawn rather than inherited, because the default
   disc sits too tight to a 20/30 line and lands at the wrong optical weight
   against a square-cornered system. A 7px square on brand, aligned to the
   x-height of the first line. */
.bullets{list-style:none;margin:0 0 1rem;padding:0;max-width:var(--prose)}
.bullets li{
  position:relative;padding-left:1.75rem;margin-bottom:1rem;
  font-size:1.25rem;line-height:1.5;color:var(--ink-800);
}
.bullets li:last-child{margin-bottom:0}
.summary li::before,.bullets li::before{
  content:"";position:absolute;left:0;top:.625rem;
  width:7px;height:7px;background:var(--brand);
}
.bullets--num{counter-reset:step}
.bullets--num li{padding-left:2.5rem}
.bullets--num li::before{
  counter-increment:step;content:counter(step);
  background:none;width:auto;height:auto;top:0;
  font-family:var(--sans);font-weight:700;font-size:1.25rem;line-height:1.5;
  color:var(--brand);
}
@media (max-width:767px){
  .summary{padding:40px 24px}
  .summary li{margin-bottom:1rem}
}

/* ---------- tables ----------
   Hairline rules only. The header is a rule and a tracked-out label, not a fill. */
.table-wrap{overflow-x:auto;margin-top:2rem;border:0;border-top:1px solid var(--rule)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:36rem;font-size:1rem}
.table-wrap th,.table-wrap td{text-align:left;padding:1rem 1.5rem 1rem 0;border-bottom:1px solid var(--line)}
.table-wrap thead th{
  background:none;color:var(--ink-600);font-weight:400;font-size:.75rem;line-height:1.333;
  letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--rule);
}
.table-wrap tbody th{font-weight:500;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{margin-top:2rem;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-family:var(--display);
  font-size:1.5rem;line-height:1.1;font-weight:400;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.25rem;top:1.75rem;width:.875rem;height:1px;background:var(--ink);
}
.faq summary::before{
  content:"";position:absolute;right:.25rem;top:1.75rem;width:.875rem;height:1px;background:var(--ink);
  transform:rotate(90deg);transition:transform .3s ease;
}
.faq details[open] summary::before{transform:rotate(0)}
.faq__a{padding:0 2.5rem 1.5rem 0;max-width:var(--prose)}
.faq__a p{color:var(--ink-800);font-size:1.125rem;line-height:1.556}

/* ---------- forms ----------
   Underline fields, no boxes. A 1px rule at rgba(0,0,0,.44) under each input is
   the measured GS treatment and it is what keeps the form from looking generic. */
.form-card--teal{background:var(--panel);padding:48px var(--pad)}
@media (min-width:1024px){.form-card--teal{padding:64px}}
/* The GHL card gets narrower side padding than the native one. The form is in
   an iframe, its fields sit two up, and every 2px of card padding is 1px off
   each field column. At 1440 the split column is 664px: at 64px padding the
   iframe gets 536 and the field columns 252, and five of the twelve labels wrap
   to two lines. At 32px it gets 600 and 284, and only the longest label wraps.
   Measured, not guessed: the longest label, "Owner earnings before your salary,
   roughly", needs 365px on one line, and no padding value reaches that inside a
   half width split. */
@media (min-width:1024px){.form-card--embed{padding-inline:32px}}

/* Vertical padding is not symmetrical on the embed card, and that is deliberate.

   Top is zero from 768px up, the width at which .split goes side by side. The
   card top and the left column's h2 top are both the top of the grid row, so
   with no top padding the form's first label starts on the same line as the
   headline next to it. The GHL form contributes nothing of its own here: its
   first field wrapper sits at y=0 inside the iframe, measured. Below 768px the
   card is stacked under the copy rather than beside it, there is nothing to
   align to, and the base 48px stays.

   Bottom is 32px rather than 64. The old 64 was not the whole problem: inside
   the iframe the form carried about 39px of its own dead space under the closing
   line, 13 hidden attribution fields rendering 1px each plus two 16px margins.
   That is trimmed in ghl-form-styles.css, so what is left below the last line of
   text really is just this padding. 32px matches the side padding. */
.form-card--embed{padding-bottom:32px}
@media (min-width:768px){.form-card--embed{padding-top:0}}
.form-shell{display:grid;gap:2rem;max-width:44rem}
@media (min-width:640px){
  .form-shell{grid-template-columns:repeat(2,1fr)}
  .form-shell>.btn,.form-shell>.form-micro,.form-shell>.form-error{grid-column:1/-1}
}
.field{display:grid;gap:.35rem}
.field label{
  font-size:.75rem;line-height:1.333;font-weight:400;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-600);
}
.field .req{color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:.5rem 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  font:inherit;font-size:1.125rem;line-height:1.556;color:var(--ink);background:transparent;
}
.field textarea{min-height:6rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-bottom-color:var(--ink);border-bottom-width:2px;padding-bottom:calc(.5rem - 1px);
}
.field input.field-error,.field select.field-error,.field textarea.field-error{border-bottom-color:#b4482e}
.form-error{
  margin:.5rem 0 0;padding:1rem 0;border-radius:0;background:none;
  border:0;border-top:1px solid #b4482e;color:#7d2f1c;font-size:1rem;line-height:1.5;
}
.form-success{display:none;background:none;border:0;border-top:1px solid var(--rule);padding:2rem 0 0}
.is-sent .form-shell{display:none}
.is-sent .form-success{display:block}

/* ---------- CTA band ----------
   Brand-900, full bleed, split. The copy still lines up with the container column
   so the band reads as part of the page and not a banner. */
.phone-strip{background:var(--navy);margin-top:0}
.phone-strip__grid{display:grid;grid-template-columns:1fr}
@media (min-width:1024px){.phone-strip__grid{grid-template-columns:1fr 1fr}}
.phone-strip__inner{max-width:var(--wrap);margin-inline:auto;padding:64px var(--pad);width:100%}
@media (min-width:1024px){
  .phone-strip__inner{
    padding-block:96px;max-width:none;margin-inline:0;
    padding-left:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
    padding-right:48px;
  }
}
.phone-strip__media img{width:100%;height:100%;min-height:22rem;object-fit:cover}
.phone-strip h2{color:#fff;max-width:18ch}
.phone-strip .sub{color:rgba(255,255,255,.8);margin-top:1.5rem;max-width:40ch;font-size:1.25rem;line-height:1.5}
.phone-strip .btns{margin-top:2rem}

/* ---------- footer ----------
   Elkridge brand-900, where GS uses pure black. Dividers at rgba(255,255,255,.6),
   body at .95. GS never fades
   footer text into illegibility, which is why theirs still reads as content. */
.site-footer{background:var(--navy);color:rgba(255,255,255,.95);padding:64px 0 32px;font-size:1rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--gap)}}
.footer-col h3{
  font-family:var(--sans);font-size:.75rem;line-height:1.333;font-weight:400;letter-spacing:1px;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 1.25rem;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.footer-col a{color:rgba(255,255,255,.95);border-bottom:1px solid transparent}
.footer-col a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.footer-col p{color:rgba(255,255,255,.8);line-height:1.5}
.footer-nap address{font-style:normal;line-height:1.5}
.nav__logo--footer{color:#fff;margin-bottom:1.25rem;max-width:none}
.nav__logo--footer span{color:rgba(255,255,255,.6)}
.footer-map{margin-top:48px;position:relative;height:240px;overflow:hidden}
.footer-map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(.9) brightness(.8)}
/* booking calendar on /thank-you */
.booking{max-width:56rem;margin:0 auto}
.booking__head{text-align:center;margin-bottom:1.6rem}
.booking__head .sub{color:var(--body);margin:.6rem auto 0;max-width:44rem}
.booking__frame{background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.booking__frame iframe{display:block;width:100%;border:0}
.booking__fallback,.ghl-fallback{padding:2.4rem;text-align:center;color:var(--body);margin:0}
/* Enquiry form embed. The frame carries no height of its own until app.js has a
   measured one, because a seeded height stops the provider's child script from
   reporting a real number. The reserved height sits on the wrapper instead, so the
   page does not jump when the form arrives. */
.ghl-frame{display:block;width:100%;border:0}
.ghl-embed:not(.ghl-embed--live){min-height:62rem}
@media(max-width:640px){.ghl-embed:not(.ghl-embed--live){min-height:82rem}}
/* Fallback state, set by app.js when no height ever arrives. An iframe with no
   height of its own is 150px, so the frame has to be given the reserved height
   here and left to scroll internally. */
.ghl-frame--forced{height:62rem}
@media(max-width:640px){.ghl-frame--forced{height:82rem}}
/* Reserved height, and our own border, are a placeholder for the provider's card.
   Both are dropped once app.js confirms the frame has been sized, because the
   widget draws its own bordered rounded card inside the frame: keeping ours as
   well reads as two borders round one thing, and keeping the reserved height
   leaves a tall empty strip under a calendar that is shorter than the reservation
   on a phone. Until then they hold the layout, so a provider outage leaves a box
   rather than a collapsed nothing. */
.booking__frame:not(.booking__frame--live){min-height:44rem}
@media(max-width:640px){.booking__frame:not(.booking__frame--live){min-height:56rem}}
.booking__frame--live{background:none;border:0;border-radius:0}
/* Trim the provider's outer gutter. Its card is inset 16px top and bottom in the
   wide layout and sits flush in the narrow one, so the trim has to switch with it.
   The widget picks its layout from its own width, at 726px, measured by bisection.
   Threshold here is 800px of viewport rather than the 766px the arithmetic gives,
   because a classic scrollbar takes about 15px off the frame; trimming the wide
   amount off the narrow layout would cut through the card's own top border, so
   the safe direction is to under-trim. */
.booking__frame--trim iframe{margin-block:calc(0px - var(--booking-trim-sm,0px))}
@media(min-width:800px){
  .booking__frame--trim iframe{margin-block:calc(0px - var(--booking-trim-md,0px))}
}
/* Fallback state, set by app.js when no height ever arrives for the frame. An
   iframe with no height of its own is 150px, so the frame has to be given the
   reserved height here and left to scroll internally. The trim assumes a sized
   frame, so pulling the edges in on an unsized one just crops the calendar.
   Order matters: these have to sit after the trim rules to win. */
.booking__frame--forced iframe{margin-block:0;min-height:44rem}
@media(max-width:640px){.booking__frame--forced iframe{min-height:56rem}}
.footer-map__pin{
  position:absolute;left:1rem;bottom:1rem;background:#fff;color:var(--ink);
  padding:.75rem 1rem;font-size:1rem;font-weight:500;line-height:1.25;border-radius:0;
}
.footer-map__pin span{
  display:block;font-weight:400;color:var(--ink-600);font-size:.75rem;
  letter-spacing:1px;text-transform:uppercase;margin-top:.25rem;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.6);margin-top:48px;padding-block:1.5rem 0;
  color:rgba(255,255,255,.8);font-size:.75rem;line-height:1.333;
}
.footer-updated{display:block;margin-top:.5rem}

/* ---------- mobile ---------- */
@media (max-width:1023px){
  :root{--pad:20px;--gap:24px}
  .section{padding-block:48px}
  .nav__toggle{display:block}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--brand);
    border-top:1px solid rgba(255,255,255,.35);flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem var(--pad) 1.5rem;
  }
  .nav__links.open{display:flex}
  .nav__links>li>a{display:block;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.25)}
  .nav__links>li>a.nav__estimate{margin-top:1.25rem;justify-content:center;border-bottom:1px solid #fff}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:0 0 0 1rem;background:none}
  .dropdown a{padding:.6rem 0;color:rgba(255,255,255,.8)}
  .dropdown a:hover{background:none;color:#fff}
  .hero{padding-top:40px}
  .hero__photo{margin-top:32px}
  .hero__photo img{aspect-ratio:4/3}
  .hero__cta .btn,.phone-strip .btns .btn{width:100%}
  .grid,.grid--2,.grid--3{grid-template-columns:1fr}
  .card{min-height:0}
  .prose p,.prose li,.section__lead,.hero__sub{font-size:1.125rem;line-height:1.556}
}